/* ============================================================================
 * GameChanger Kiosk demo — styles
 * Visual language reverse-engineered from the GameChanger app scoring videos:
 *   dark chrome, green textured field, brown infield diamond, white pop-up
 *   menus with blue "Back/Menu" links, red accent for outs, blue bottom nav.
 * Designed to run full-screen in an iPad browser (portrait).
 * ==========================================================================*/

:root {
  --gc-bg: #000;
  --gc-panel: #1c1c1e;
  --gc-panel-2: #2c2c2e;
  --gc-blue: #1e88e5;
  --gc-blue-2: #2f80ed;
  --gc-red: #e53935;
  --gc-green-dark: #2f5d34;
  --gc-green: #3c7a42;
  --gc-dirt: #9c6b3f;
  --gc-dirt-2: #8a5d36;
  --gc-text: #f5f5f7;
  --gc-muted: #9a9aa0;
  --gc-line: #3a3a3c;
  --frame-w: 440px;   /* native phone width of the scoring UI */
  font-synthesis: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #050505;
  color: var(--gc-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}

/* ---- Device frame: the iPad shows a phone-shaped scoring surface --------- */
#app {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.phone {
  width: var(--frame-w);
  max-width: 100%;
  height: min(900px, 92vh);
  background: var(--gc-bg);
  border-radius: 38px;
  box-shadow: 0 0 0 12px #111, 0 30px 80px rgba(0,0,0,.6);
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}

/* ---- Generic screen plumbing -------------------------------------------- */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; }
.screen.active { display: flex; }
.fill { flex: 1; min-height: 0; }
.pad { padding: 22px; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

button { font-family: inherit; cursor: pointer; }

.btn {
  appearance: none; border: none; border-radius: 999px;
  padding: 16px 28px; font-size: 17px; font-weight: 700;
  background: var(--gc-blue); color: #fff;
  transition: transform .05s ease, filter .15s ease;
}
.btn:active { transform: scale(.97); }
.btn.secondary { background: var(--gc-panel-2); color: var(--gc-text); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ---- Splash / intro ----------------------------------------------------- */
.brandbar { padding: 18px 22px; display:flex; align-items:center; gap:10px; }
.brandbar .logo {
  font-weight: 900; letter-spacing: .5px; font-size: 15px;
  background: linear-gradient(90deg,#19c2c2,#1e88e5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 { font-size: 34px; line-height: 1.1; margin: 0 0 10px; font-weight: 900; }
.hero p { color: var(--gc-muted); font-size: 16px; line-height: 1.5; margin: 0 0 8px; }
.kicker { color: var(--gc-blue); font-weight: 800; letter-spacing: 1.5px; font-size: 13px; text-transform: uppercase; margin-bottom: 14px; }
.dots { display:flex; gap:8px; margin: 22px 0; }
.dots i { width:9px; height:9px; border-radius:50%; background:var(--gc-line); }
.dots i.on { background: var(--gc-blue); }

/* ---- Video screen ------------------------------------------------------- */
/* NB: no `position` here — let the `.screen` rule (absolute inset:0) own layout
   so the video area fills the full height. */
.video-wrap { background:#000; flex:1; display:flex; flex-direction:column; }
.video-head { padding: 16px 18px 6px; }
.video-head .tag { color: var(--gc-blue); font-weight:800; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; }
.video-head h2 { margin:4px 0 0; font-size:20px; }
.video-box { position: relative; flex:1; display:flex; align-items:center; background:#000; }
.video-box video { width:100%; max-height:100%; }
.prompt {
  background: var(--gc-panel); margin: 0; padding: 16px 18px;
  font-size: 15px; line-height: 1.45; color: #e8e8ea; border-top:1px solid var(--gc-line);
}
.video-actions { padding: 14px 18px 20px; background: var(--gc-panel); display:flex; gap:10px; }
.replay { background:var(--gc-panel-2); color:var(--gc-text); border:none; border-radius:999px; padding:16px; font-weight:700; }

/* ---- Scoring surface ---------------------------------------------------- */
.score-top { background:#000; padding: 10px 12px 0; }
.statusbar {
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:#fff; padding: 2px 2px 8px;
}
.statusbar .menu { color: var(--gc-blue); font-weight:700; font-size:16px; }
.bso { display:flex; align-items:center; gap:10px; font-weight:700; }
.bso .inn { font-size:15px; }
.bso b { font-size:18px; }
.bso small { color: var(--gc-muted); font-weight:600; }
.novideo { background:#000; border:1px solid #333; color:#bbb; border-radius:999px; font-size:11px; padding:5px 10px; }

.scoreline { display:flex; font-size:13px; background:#161616; border-radius:6px; overflow:hidden; }
.scoreline div { padding:8px 10px; }
.scoreline .nm { flex:1; color:#ddd; }
.scoreline .rn { width:34px; text-align:center; font-weight:800; }
.scoreline .home { justify-content:flex-end; text-align:right; }

.atbat { display:flex; gap:6px; margin-top:6px; font-size:12px; }
.atbat .cell { flex:1; background:#fff; color:#111; border-radius:6px; padding:8px 10px; display:flex; gap:8px; align-items:center; }
.atbat .role { font-weight:800; color:#444; }
.atbat .who { font-weight:800; color:var(--gc-blue); }
.atbat .sub { color:#666; }

/* The field */
.field {
  position: relative; flex:1; min-height:0; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 120%, #244b28 0%, #1c3a20 60%, #122814 100%);
}
.field::before { /* mowed-grass stripes */
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 22px, rgba(0,0,0,.04) 22px 44px);
}
.infield {
  position:absolute; width:64%; aspect-ratio:1/1; left:18%; top:30%;
  background: linear-gradient(180deg, var(--gc-dirt) 0%, var(--gc-dirt-2) 100%);
  transform: rotate(45deg); border-radius:10px;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.08);
}
.grass-infield {
  position:absolute; width:34%; aspect-ratio:1/1; left:33%; top:42%;
  background: var(--gc-green); transform: rotate(45deg); border-radius:6px;
}
.base { position:absolute; width:13px; height:13px; background:#f3f3f3; transform:rotate(45deg); border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.4); }
.base.first  { right:18.5%; top:50%; }
.base.second { left:50%; top:31%; transform: translateX(-50%) rotate(45deg); }
.base.third  { left:18.5%; top:50%; }
.home-plate  { left:50%; bottom:13%; width:14px; height:14px; background:#fff; transform:translateX(-50%); clip-path: polygon(50% 100%, 0 55%, 12% 0, 88% 0, 100% 55%); }

.player {
  position:absolute; transform:translate(-50%,-50%);
  text-align:center; font-size:11px; line-height:1.15; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9); width:120px; pointer-events:none;
}
.player .num { color:#d8d8d8; font-weight:700; }
.player.batter {
  background: var(--gc-blue); border-radius:6px; padding:5px 8px; width:auto;
  font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,.5); text-shadow:none;
}
.pitch-ball {
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:13px; color:#111; letter-spacing:.5px;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
  background-image: radial-gradient(circle at 30% 30%, #fff, #e9e9e9);
}
.pitch-ball::before, .pitch-ball::after { content:''; position:absolute; top:8px; bottom:8px; width:2px; }
.field-hint { position:absolute; top:8px; left:0; right:0; text-align:center; font-weight:700; color:#fff; font-size:15px; text-shadow:0 1px 4px #000; }

.undo-row { position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:space-between; padding:0 12px; }
.undo-row span { background:#222; color:#ddd; font-size:13px; padding:6px 14px; border-radius:7px; }
.undo-row span.dim { color:#555; }

/* Pitch action bar */
.actions { background:#0a0a0a; padding:12px 10px; display:flex; gap:8px; justify-content:space-between; }
.action {
  flex:1; background:#1c1c1e; border:none; border-radius:14px; color:#fff;
  padding:10px 4px 8px; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:11px; font-weight:700;
}
.action .ic {
  width:34px; height:34px; border-radius:50%; background:#fff; color:#111;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px;
}
.action.primary .ic { background:#fff; }
.action:active { background:#2c2c2e; }

/* Bottom nav */
.tabbar { background:#0a0a0a; border-top:1px solid #1c1c1c; display:flex; padding:8px 0 14px; }
.tabbar .tab { flex:1; text-align:center; font-size:11px; color:#666; font-weight:600; }
.tabbar .tab.on { color: var(--gc-blue); }
.tabbar .tab .ic { display:block; font-size:17px; margin-bottom:3px; }

/* ---- Pop-up scoring menu ------------------------------------------------ */
.sheet-mask { position:absolute; inset:0; background:rgba(0,0,0,.35); display:none; z-index:20; }
.sheet-mask.show { display:block; }
.sheet {
  position:absolute; left:14px; right:14px; top:120px; max-height:62%;
  background:#fff; color:#111; border-radius:14px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.5); display:flex; flex-direction:column;
}
.sheet-head { display:flex; align-items:center; padding:14px 16px 10px; }
.sheet-head .back { color:var(--gc-blue); font-weight:700; font-size:16px; }
.sheet-head .title { flex:1; text-align:center; font-weight:800; font-size:16px; margin-right:40px; }
.sheet-list { overflow-y:auto; }
.opt {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-top:1px solid #ececec; font-size:16px; font-weight:600; color:#111;
}
.opt:active { background:#f1f4f8; }
.opt .dot { width:26px; height:26px; border-radius:50%; background:#dfe3e8; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#555; }
.opt .chev { margin-left:auto; color:#c4c4c4; font-weight:700; }
.opt.danger { color: var(--gc-red); }
.opt.danger .dot { background:#fde3e3; color:var(--gc-red); }

/* ---- Result / answer reveal -------------------------------------------- */
.result-card { padding: 26px 22px; }
.verdict { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.verdict .badge { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; flex:none; }
.verdict.ok  .badge { background:#10331b; color:#3ddc6d; }
.verdict.no  .badge { background:#3a1414; color:#ff6b6b; }
.verdict h2 { margin:0; font-size:22px; }
.verdict .sub { color:var(--gc-muted); font-size:14px; }

.yourcall { background:var(--gc-panel); border-radius:12px; padding:14px 16px; margin:16px 0; font-size:14px; }
.yourcall .row { display:flex; justify-content:space-between; padding:4px 0; }
.yourcall .row .k { color:var(--gc-muted); }
.yourcall .row .v { font-weight:800; }
.yourcall .row .v.good, .yourcall .row .v .good { color:#3ddc6d; }
.yourcall .row .v.bad,  .yourcall .row .v .bad  { color:#ff6b6b; }
.yourcall .row .v .mut  { color: var(--gc-muted); }
.yourcall .row .v .sep  { color: var(--gc-muted); font-weight:600; }

.answer-call { font-size:13px; color:var(--gc-blue); font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.answer-head { font-size:20px; font-weight:800; margin:4px 0 14px; }
.pbp { list-style:none; margin:0; padding:0; }
.pbp li { position:relative; padding:10px 0 10px 30px; font-size:14px; line-height:1.45; color:#dcdce0; border-top:1px solid var(--gc-line); }
.pbp li:before { content:''; position:absolute; left:8px; top:16px; width:8px; height:8px; border-radius:50%; background:var(--gc-blue); }

/* ---- Insights / spray recap -------------------------------------------- */
.spray { background:var(--gc-green-dark); border-radius:14px; height:200px; position:relative; margin:14px 0; overflow:hidden; }
.spray .pt { position:absolute; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 2px rgba(0,0,0,.25); }
.insight-row { display:flex; gap:10px; margin:10px 0; }
.insight { flex:1; background:var(--gc-panel); border-radius:12px; padding:14px; }
.insight .big { font-size:26px; font-weight:900; }
.insight .lbl { color:var(--gc-muted); font-size:12px; }

/* ---- Lead capture ------------------------------------------------------- */
.field-input { width:100%; padding:15px 16px; border-radius:12px; border:1px solid var(--gc-line); background:var(--gc-panel); color:#fff; font-size:16px; margin-top:12px; }
.field-input::placeholder { color:#6c6c70; }
.legal { color:#6c6c70; font-size:11px; line-height:1.4; margin-top:14px; }

.progress { display:flex; gap:6px; padding:10px 18px 0; }
.progress i { flex:1; height:4px; border-radius:2px; background:var(--gc-line); }
.progress i.on { background:var(--gc-blue); }

/* ---- Global "start over" floating button -------------------------------- */
.resetfab {
  position: absolute; top: 9px; right: 10px; z-index: 60;
  height: 30px; min-width: 30px; padding: 0 9px; border: none;
  border-radius: 999px; background: rgba(28,28,30,.78); color: #fff;
  font-size: 16px; font-weight: 800; line-height: 30px; backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.45); transition: background .15s ease;
}
.resetfab.armed { background: var(--gc-red); font-size: 13px; padding: 0 14px; }
/* On the scoring screen, keep the status bar clear of the fab. */
.score-top .statusbar { padding-right: 44px; }

.muted { color: var(--gc-muted); }
.mt { margin-top: 14px; } .mt2 { margin-top: 22px; }