/* ===== μFita web demo ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --lightblue: #6599CB;
  --black: #000000;
  --white: #FFFFFF;
}

html, body {
  height: 100%;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #2b2f33;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 12px 32px;
  gap: 16px;
  min-height: 100%;
}

/* ---- demo bar (outside the phone) ---- */
.demo-bar {
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.demo-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; }
.demo-title img { width: 28px; height: 28px; }
.demo-title small { color: #8c949c; font-weight: 400; }
.demo-controls { display: flex; align-items: center; gap: 10px; }
.lang-toggle { display: flex; border: 1px solid #555; border-radius: 6px; overflow: hidden; }
.lang-toggle button {
  background: #3a3f44; color: #b9bfc5; border: none; padding: 6px 12px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.lang-toggle button.active { background: var(--lightblue); color: #fff; }
.demo-reset {
  background: #3a3f44; color: #d6dadd; border: 1px solid #555; border-radius: 6px;
  padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.demo-reset:hover, .lang-toggle button:hover { filter: brightness(1.12); }

/* ---- device frame ---- */
.device {
  width: 392px;
  background: #0c0c0e;
  border-radius: 34px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), inset 0 0 0 2px #232323;
}
.device-screen {
  position: relative;
  width: 364px;
  height: 648px;
  background: var(--lightblue);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---- status bar ---- */
.statusbar {
  height: 22px;
  background: #1a1a1a;
  color: #d8d8d8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  font-size: 11px;
  flex: 0 0 auto;
}
.sb-carrier { font-weight: 600; letter-spacing: .2px; }
.sb-icons { display: flex; align-items: center; gap: 6px; }
.sb-signal { width: 14px; height: 10px;
  background: linear-gradient(to right, #ccc 0 3px, transparent 3px 4px, #ccc 4px 7px, transparent 7px 8px, #ccc 8px 11px, transparent 11px 12px, #888 12px 14px);
  clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.sb-battery { width: 18px; height: 9px; border: 1px solid #cfcfcf; border-radius: 1px; position: relative; }
.sb-battery::before { content:""; position:absolute; left:1px; top:1px; bottom:1px; width:70%; background:#7cc043; }
.sb-battery::after { content:""; position:absolute; right:-3px; top:2px; height:4px; width:2px; background:#cfcfcf; }
.sb-clock { font-weight: 600; }

/* ---- title bar ---- */
.titlebar {
  height: 34px;
  background: linear-gradient(#5d5d5d, #383838);
  border-bottom: 1px solid #1c1c1c;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  flex: 0 0 auto;
}
.tb-icon { width: 20px; height: 20px; }
.tb-title { font-size: 14px; font-weight: 600; color: #f0f0f0; }

/* ---- app content ---- */
.app-content {
  flex: 1 1 auto;
  overflow-y: auto;
  position: relative;
  background: var(--lightblue);
}
.app-content.target-bg { background: #000; }

/* ---- bottom navbar ---- */
.navbar {
  height: 44px;
  background: linear-gradient(#2a2a2a, #111);
  border-top: 1px solid #000;
  display: flex;
  flex: 0 0 auto;
}
.nav-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-btn:last-child { border-right: none; }
.nav-btn:active { background: #3a3a3a; }
.nav-btn svg { width: 24px; height: 24px; fill: none; stroke: #cfcfcf; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn#navHome svg { fill: #cfcfcf; stroke: none; }

/* ============ MAIN SCREEN ============ */
.main-screen { display: flex; flex-direction: column; height: 100%; }
.main-header {
  background: #000;
  display: flex;
  align-items: center;
  padding: 6px 4px;
}
.main-header img { width: 92px; height: auto; }
.main-header .mh-text { display: flex; flex-direction: column; align-items: center; flex: 1; }
.mh-name {
  font-family: "Courier New", monospace;
  font-size: 38px;
  font-weight: 700;
  color: #cfd6dd;
}
.mh-help {
  font-family: "Courier New", monospace;
  font-size: 23px;
  font-weight: 700;
  color: #cfd6dd;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 2px;
}
.tile-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 8px;
  padding: 16px 12px;
  justify-items: center;
  align-content: start;
}
.tile-cell {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tile-cell:active { transform: scale(.97); }
.tile-img {
  width: 134px;
  height: 116px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.tile-label {
  font-family: "Courier New", monospace;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  margin-top: -8px;
}

/* ============ generic screen padding ============ */
.screen { padding: 8px; min-height: 100%; }

.section-label { font-size: 12px; color: #000; font-style: italic; }
.row-head { display: flex; justify-content: space-between; padding: 4px 6px 2px; }

/* spinner / select */
.field-label { font-size: 12px; color: #000; padding: 4px 6px 2px; }
.distance-select {
  width: 100%;
  padding: 9px 8px;
  font-size: 15px;
  background: linear-gradient(#f4f4f4, #d3d3d3);
  border: 1px solid #888;
  border-radius: 3px;
  color: #222;
}

/* ---- arrow / session lists ---- */
.list { list-style: none; }
.list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-bottom: 1px solid #5184b3;
  cursor: pointer;
  user-select: none;
}
.list-item:active { background: #588ec0; }
.arrow-ico { width: 22px; height: 22px; flex: 0 0 auto; transform: rotate(8deg); }
.archer-ico { width: 30px; height: 30px; flex: 0 0 auto; }

.arrow-main { flex: 1; min-width: 0; }
.arrow-line1 { display: flex; justify-content: space-between; align-items: baseline; }
.arrow-name { font-size: 16px; font-weight: 700; color: #1f1f1f; }
.arrow-quiver { font-size: 18px; font-weight: 700; }
.arrow-quiver.in { color: #fff; }
.arrow-quiver.out { color: #b53030; }
.arrow-acc { font-size: 12px; font-style: italic; color: #000; }
.arrow-acc b { color: #fff; font-style: italic; }

/* session row */
.sess-main { flex: 1; min-width: 0; }
.sess-line1 { display: flex; align-items: baseline; gap: 3px; font-size: 13px; }
.sess-date { color: #fff; }
.sess-sep { color: #000; }
.sess-dist { color: #000; }
.sess-note { flex: 1; text-align: right; color: #fff; font-style: italic;
  font-family: "Courier New", monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess-line2 { font-size: 13px; font-family: "Courier New", monospace; }
.sess-score { color: #fff; font-weight: 700; }
.sess-mid { color: #000; }
.sess-ends { color: #fff; font-weight: 700; }
.sess-endw { color: #fff; }

/* ---- bottom input bar (arrows / new session) ---- */
.input-bar {
  display: flex;
  gap: 6px;
  padding: 8px 6px;
  align-items: center;
}
.input-bar input[type=text] {
  flex: 1;
  min-width: 0;
  padding: 9px 8px;
  font-size: 14px;
  border: 2px solid #f0a030;
  border-radius: 3px;
  background: #fafafa;
  color: #222;
}
.btn {
  background: linear-gradient(#f6f6f6, #d0d0d0);
  border: 1px solid #7a7a7a;
  border-radius: 3px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #1d1d1d;
  cursor: pointer;
}
.btn:active { background: linear-gradient(#d0d0d0, #f6f6f6); }
.btn.small { padding: 6px 9px; font-size: 13px; font-weight: 400; }
.btn.full { width: 100%; }

.new-session-btn { margin: 8px auto; display: block; }

.empty-note { text-align: center; color: #fff; font-style: italic; padding: 30px 16px; }

/* ============ TARGET SCREEN ============ */
.target-screen { display: flex; flex-direction: column; align-items: center; color: #fff; }
.target-header {
  width: 100%;
  font-family: "Courier New", monospace;
  font-size: 14px;
  padding: 6px 8px;
}
.target-header b { font-weight: 700; }
.target-wrap {
  position: relative;
  width: 320px;
  height: 320px;
  margin-top: 6px;
}
.target-svg { width: 320px; height: 320px; display: block; touch-action: manipulation; }
.score-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 12px;
}
.undo-action {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 20px;
}
.undo-action img { width: 22px; height: 22px; }
.score-box {
  font-family: "Courier New", monospace;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  min-width: 26px;
  text-align: center;
}

/* ============ OVERLAY / DIALOGS ============ */
.overlay-host, .toast-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.overlay-host { display: flex; align-items: center; justify-content: center; }
.scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  pointer-events: auto;
}
.dialog {
  position: relative;
  width: 312px;
  max-height: 88%;
  background: #1f1f1f;
  border: 1px solid #4a4a4a;
  border-radius: 4px;
  color: #e8e8e8;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.dialog-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid var(--lightblue);
}
.dialog-title img { width: 22px; height: 22px; }
.dialog-body {
  padding: 12px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.45;
}
.dialog-body p { margin-bottom: 9px; }
.dialog-body p:last-child { margin-bottom: 0; }
.dialog-body .help-tail { font-style: italic; color: #9fb6cc; }
.dialog-buttons {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid #3a3a3a;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dialog input[type=text], .dialog textarea {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  background: #fafafa;
  color: #222;
  border: 2px solid #f0a030;
  border-radius: 3px;
  font-family: inherit;
}
.dialog textarea { min-height: 70px; resize: vertical; }
.dialog .head-text { font-size: 13px; color: #cfcfcf; margin-bottom: 6px; }

/* stats dialog */
.stats-msg { min-height: 70px; }
.stats-btns { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }

/* shots grid */
.shots-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.shot-cell {
  background: #2e2e2e;
  border: 1px solid #444;
  text-align: center;
  padding: 7px 0;
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 15px;
}

/* mark-arrows grid */
.mark-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.mark-cell {
  background: #2e2e2e;
  border: 1px solid #4a4a4a;
  border-radius: 3px;
  padding: 10px 4px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .25s;
}
.mark-cell:active { background: #3c3c3c; }
.mark-cell.used { opacity: 0; pointer-events: none; }
.mark-cell img { width: 20px; display: block; margin: 0 auto 4px; }

/* ---- menu (bottom sheet) ---- */
.menu-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #e9e9e9;
  border-top: 2px solid #9a9a9a;
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.menu-item {
  background: transparent;
  border: 1px solid #c4c4c4;
  padding: 12px 4px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #2a2a2a;
  font-size: 12px;
}
.menu-item:active { background: #d4d4d4; }
.menu-item img { width: 26px; height: 26px; }

/* toast */
.toast {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  background: rgba(20,20,20,.92);
  color: #fff;
  padding: 8px 16px;
  border-radius: 14px;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  animation: toastfade 1.9s forwards;
}
@keyframes toastfade {
  0% { opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

a { color: #7db4e6; }