/* ============================================================
   FULL-TIME - base theme
   ------------------------------------------------------------
   Same shared shell (topbar, buttons, panels, modal, auth screens,
   stat tiles, leaderboard rows, inline SVG chart) as Card Tally's own
   stylesheet, reused near-verbatim under the SAME token names so every
   structural rule just works - reskinned here as a stadium-night
   "floodlight" palette (deep pitch-navy + broadcast blue) distinct from
   Legends Legacy FC's pitch-green identity, since both are football
   apps in this library and need to read as different things on the
   catalogue grid.
   ============================================================ */
:root{
  --bg-0:#080d14; --bg-1:#0a1420; --panel:#101d2d; --panel-2:#152841; --panel-3:#1d3455;
  --line:#28496e; --line-soft:#1a3252;
  --ink:#f2f5fa; --ink-dim:#aab8cd; --ink-faint:#71839e;
  --gold:#4aa9f5; --gold-2:#2c86d6; --gold-soft:rgba(74,169,245,0.13);
  --emerald:#3ed98c; --emerald-soft:rgba(62,217,140,0.13);
  --crimson:#f0685a; --crimson-soft:rgba(240,104,90,0.13);
  --felt:#142840; --silver:#c7d0cc; --bronze:#c98a4b;
  --radius:16px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.35);
  --shadow-card:0 1px 1px rgba(0,0,0,0.3), 0 10px 28px -12px rgba(0,0,0,0.55);
  --shadow-pop:0 4px 10px -2px rgba(0,0,0,0.4), 0 16px 36px -12px rgba(0,0,0,0.6);
  --font-d:'Fraunces',Georgia,serif;
  --font-b:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{min-height:100%;}
body{
  margin:0; color:var(--ink); font-family:var(--font-b); min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(74,169,245,0.07), transparent 55%),
    radial-gradient(700px 560px at 108% 6%, rgba(62,217,140,0.035), transparent 55%),
    var(--bg-0);
  overflow-x:hidden; overscroll-behavior-y:contain;
  padding-bottom:env(safe-area-inset-bottom);
}
/* A faint pitch marking (centre circle + halfway line) rather than a
   generic gradient blob - reads as "football app" at a glance without
   competing with real content. Fixed and low-opacity so it never moves
   or interferes with anything on top of it. */
body::before{
  content:''; position:fixed; top:-6vw; right:-14vw; width:72vw; height:72vw; max-width:820px; max-height:820px;
  pointer-events:none; z-index:0; opacity:0.05;
  background-image:
    radial-gradient(circle, transparent 0 39%, var(--gold) 39% 39.4%, transparent 39.4%),
    linear-gradient(180deg, transparent calc(50% - 0.2%), var(--gold) calc(50% - 0.2%) calc(50% + 0.2%), transparent calc(50% + 0.2%));
}
button,input,select,textarea{font-family:inherit;}
input,textarea,select{-webkit-user-select:text; user-select:text; touch-action:manipulation;}
#app{max-width:960px; margin:0 auto; position:relative; z-index:1; padding:0 18px 64px;}
h1,h2,h3,h4{font-family:var(--font-d); margin:0; letter-spacing:0.2px;}
.hero h1{letter-spacing:-0.3px;}
.num{font-variant-numeric:tabular-nums; font-family:var(--font-m);}
.hidden{display:none !important;}
@keyframes screenIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.screen{animation:screenIn .28s ease-out;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50; max-width:960px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:16px 18px 13px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(8,13,20,0.97), rgba(8,13,20,0.9) 70%, transparent);
  border-bottom:1px solid rgba(255,255,255,0.02);
}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer; flex-shrink:0;}
@media (max-width:420px){ .brand-title{font-size:17px;} .brand-sub{font-size:9.5px; letter-spacing:1.2px;} }
.brand-mark{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, #234061, var(--panel-2) 72%); border:1.5px solid var(--gold);
  color:var(--gold); font-size:18px; box-shadow:0 0 0 1px rgba(74,169,245,0.2), var(--shadow-sm);
}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-title{font-family:var(--font-d); font-weight:800; font-size:19px; letter-spacing:0.1px;}
.brand-sub{font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:var(--gold); font-weight:600;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-b); font-weight:700; font-size:14px; letter-spacing:0.1px;
  padding:12px 18px; border-radius:11px; border:1px solid var(--line); cursor:pointer;
  color:var(--ink); background:var(--panel-2); transition:transform .08s ease, filter .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{border-color:var(--line-soft); filter:brightness(1.12);}
.btn:active{transform:scale(0.97);}
.btn-primary{background:linear-gradient(180deg, #57b3f6, var(--gold) 55%, var(--gold-2)); color:#071a2c; border:1px solid var(--gold-2); font-weight:800; box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 16px -6px rgba(74,169,245,0.55);}
.btn-primary:hover{filter:brightness(1.05); box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 20px -6px rgba(74,169,245,0.65);}
.btn-emerald{background:var(--emerald); color:#04241a; border:none; font-weight:700;}
.btn-danger{background:transparent; border:1px solid rgba(240,104,90,0.4); color:var(--crimson);}
.btn-ghost{background:transparent; border:1px solid var(--line);}
.btn-sm{padding:8px 12px; font-size:12.5px; border-radius:9px;}
.btn-block{width:100%;}
.btn:disabled{opacity:0.4; cursor:not-allowed; box-shadow:none;}
.icon-btn{width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:var(--panel-2); border:1px solid var(--line); color:var(--ink-dim); cursor:pointer; flex-shrink:0; padding:0; font-size:15px; transition:border-color .12s ease, color .12s ease;}
.icon-btn:hover{color:var(--ink); border-color:var(--line-soft);}
.icon-btn.motm-on{color:var(--gold); border-color:var(--gold); background:var(--gold-soft);}

/* ---------- Cards / panels ---------- */
.card{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px; margin-bottom:12px; box-shadow:var(--shadow-card);}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.card-head h3{font-size:14.5px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; display:flex; align-items:center; gap:8px;}
.card-head h3::before{content:''; width:6px; height:6px; border-radius:2px; background:var(--gold); flex-shrink:0;}
.card-foot{margin:14px 0 0; font-size:12px; color:var(--ink-faint); line-height:1.5;}
.tag{font-size:11px; font-weight:600; color:var(--ink-dim); background:var(--panel-2); border:1px solid var(--line-soft); border-radius:99px; padding:3px 10px; white-space:nowrap;}
.muted{color:var(--ink-dim);}
.faint{color:var(--ink-faint);}
.tiny{font-size:12.5px; color:var(--ink-dim); line-height:1.55;}

/* ---------- Hero ---------- */
.hero{padding:26px 4px 18px; text-align:left;}
.hero h1{font-size:clamp(28px,5.6vw,40px); font-weight:800; line-height:1.05;}
.hero .accent{color:var(--gold); font-style:italic;}
.hero p{margin:12px 0 0; color:var(--ink-dim); font-size:15px; max-width:520px; line-height:1.55;}
.hero-stats{display:flex; gap:22px; margin-top:22px; flex-wrap:wrap;}
.hero-stat b{display:block; font-size:24px; color:var(--gold); font-weight:700;}
.hero-stat span{font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--ink-faint);}

/* ---------- Tabs / filters ---------- */
.tabbar{display:flex; gap:6px; margin:22px 0 16px; border-bottom:1px solid var(--line-soft); overflow-x:auto;}
.tab{padding:10px 4px; margin-right:20px; font-weight:700; font-size:13.5px; color:var(--ink-faint); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;}
.tab.active{color:var(--gold); border-color:var(--gold);}
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; padding:14px 16px; background:var(--panel); border:1px solid var(--line-soft); border-radius:14px; box-shadow:var(--shadow-card);}
.filter-group{display:flex; align-items:center; gap:6px;}
.filter-label{font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); font-weight:700; margin-right:2px;}
/* 16px is the line iOS Safari uses to decide whether to auto-zoom into a
   focused field - anything smaller and the whole page visibly jumps/
   zooms the instant you tap in, which reads as broken. Every text input
   and select in this app stays at or above it. */
.input,.select-input{background:var(--panel-2); border:1px solid var(--line); color:var(--ink); border-radius:9px; padding:9px 11px; font-size:16px; transition:border-color .12s ease;}
.input:focus,.select-input:focus,.btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--gold); outline-offset:1px;}
.input:focus,.select-input:focus{border-color:var(--gold);}
.input::placeholder{color:var(--ink-faint);}

/* ---------- Play toolbar / group header ---------- */
.play-toolbar{display:flex; gap:10px; margin:16px 0 4px; flex-wrap:wrap; align-items:center;}
.group-header{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-top:8px; flex-wrap:wrap;}
.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--ink-dim); font-size:13px; cursor:pointer; margin-bottom:14px; font-weight:600;}
.back-link:hover{color:var(--gold);}

/* ---------- Stat tiles ---------- */
.tile-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:12px;}
.tile{
  position:relative; background:var(--panel); border:1px solid var(--line-soft); border-radius:14px; padding:17px 16px 16px;
  display:flex; flex-direction:column; gap:4px; overflow:hidden; box-shadow:var(--shadow-card);
}
.tile::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--gold), var(--gold-2));}
.tile.accent-emerald::before{background:linear-gradient(90deg, var(--emerald), #2bb473);}
.tile.accent-crimson::before{background:linear-gradient(90deg, var(--crimson), #d84a3c);}
.tile-label{font-size:10.5px; text-transform:uppercase; letter-spacing:1.1px; color:var(--ink-faint); font-weight:700;}
.tile-value{font-size:28px; font-weight:800; line-height:1.1; letter-spacing:-0.3px;}
.tile-foot{font-size:11.5px; color:var(--ink-faint);}
.pos{color:var(--emerald);} .neg{color:var(--crimson);}

/* ---------- Leaderboard ---------- */
.lb-row{display:grid; grid-template-columns:26px 1fr auto; gap:14px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line-soft);}
.lb-row:last-of-type{border-bottom:none;}
.lb-rank{font-size:13px; font-weight:600; color:var(--ink-faint); text-align:center; font-variant-numeric:tabular-nums;}
.lb-rank.lead{color:var(--gold);}
.lb-main{min-width:0;}
.lb-name{font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:6px;}
.lb-value{text-align:right;}
.lb-value b{font-size:18px; font-weight:700; display:block; font-variant-numeric:tabular-nums;}
.lb-value span{font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.6px;}

/* ---------- Poker-board-style rows (reused for game lineups) ---------- */
.poker-board{display:flex; flex-direction:column; gap:6px;}
.poker-row{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; background:var(--panel-2); border:1px solid transparent;}
.poker-rank{width:32px; text-align:center; font-family:var(--font-m); font-weight:800; font-size:12px; color:var(--ink-faint); flex-shrink:0;}
.poker-name{flex:1; min-width:0; font-weight:700; font-size:14px; display:flex; align-items:center; gap:6px;}
.poker-name span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.poker-chip-value{display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0;}
.poker-chips{font-family:var(--font-b); font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.3px;}
.poker-chips-gbp{font-family:var(--font-m); font-size:10.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; margin-top:1px;}

/* ---------- Game log ---------- */
.game-row-wrap{border-bottom:1px solid var(--line-soft);}
.game-row-wrap:last-child{border-bottom:none;}
.game-row{display:flex; align-items:center; gap:12px; padding:12px 0; width:100%; background:none; border:none; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer;}
.game-no{color:var(--gold); flex-shrink:0; display:flex;}
.game-main{flex:1; min-width:0;}
.game-score{font-size:14px; color:var(--ink-dim);}
.game-dash{color:var(--ink-faint);}
.game-meta{font-size:11.5px; color:var(--ink-faint); margin-top:3px;}

/* ---------- Players tab ---------- */
.player-row{display:flex; align-items:center; justify-content:space-between; padding:12px 6px; border-bottom:1px solid var(--line-soft); gap:10px;}
.player-row:last-child{border-bottom:none;}
.player-row.archived{opacity:0.5;}
.player-row-name{font-weight:700; display:flex; align-items:center; gap:8px;}
.player-row-meta{font-size:11.5px; color:var(--ink-faint); font-family:var(--font-m); margin-top:2px;}
.badge{font-size:9.5px; text-transform:uppercase; letter-spacing:0.6px; padding:2px 7px; border-radius:99px; background:var(--panel-3); color:var(--ink-faint); font-weight:700;}

/* ---------- Empty state ---------- */
.empty-state{text-align:center; padding:56px 20px; border:1px dashed var(--line); border-radius:var(--radius); color:var(--ink-dim);}
.empty-state .glyph{font-size:34px; margin-bottom:10px; color:var(--gold); display:flex; justify-content:center;}
.empty-state h3{font-size:18px; margin-bottom:6px; color:var(--ink);}
.empty-state p{max-width:360px; margin:0 auto; font-size:13.5px; line-height:1.6;}

/* ---------- Chart ---------- */
.rating-chart-svg{width:100%; height:150px; display:block; overflow:visible;}
.chart-legend{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:10px;}
.chart-legend-item{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-dim);}
.chart-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0; display:inline-block;}

/* ---------- Career mode: W/D/L bar + result picker ---------- */
.wdl-bar{display:flex; gap:2px; height:14px; border-radius:99px; overflow:hidden; background:var(--panel-3);}
.wdl-seg{flex-basis:0; min-width:0;}
.wdl-seg.win{background:var(--emerald);}
.wdl-seg.draw{background:var(--ink-faint);}
.wdl-seg.loss{background:var(--crimson);}
.wdl-legend{display:flex; gap:16px; margin-top:10px;}
.result-picker{display:flex; gap:8px;}
.result-btn{
  flex:1; padding:11px 10px; border-radius:11px; border:1.5px solid var(--line); background:var(--panel-2);
  color:var(--ink-dim); font-weight:700; font-size:13.5px; cursor:pointer; text-align:center; font-family:inherit;
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.result-btn.win.selected{border-color:var(--emerald); color:var(--emerald); background:var(--emerald-soft);}
.result-btn.draw.selected{border-color:var(--ink-faint); color:var(--ink); background:var(--panel-3);}
.result-btn.loss.selected{border-color:var(--crimson); color:var(--crimson); background:var(--crimson-soft);}

/* ---------- Goal/assist stepper ---------- */
.stat-stepper{display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:8px 10px;}
.stepper-btn{
  width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--panel-3); color:var(--ink);
  font-size:19px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  line-height:1; padding:0; font-family:inherit;
}
.stepper-btn:hover{border-color:var(--gold); color:var(--gold);}
.stepper-btn:active{transform:scale(0.92);}
.stepper-icon{color:var(--gold); display:flex; flex-shrink:0;}
.stepper-value{flex:1; text-align:center; font-size:21px; font-weight:800; font-variant-numeric:tabular-nums;}

/* ---------- Career mode: match history ---------- */
.match-history{display:flex; flex-direction:column; gap:8px;}
.match-row{
  display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px; border-radius:12px; background:var(--panel-2);
  border:1px solid transparent; border-left:3px solid var(--line); cursor:pointer;
  transition:border-color .12s ease, background .12s ease, transform .06s ease;
}
.match-row:hover{border-color:var(--line); background:var(--panel-3);}
.match-row:active{transform:scale(0.99);}
.match-row.win{border-left-color:var(--emerald);}
.match-row.draw{border-left-color:var(--ink-faint);}
.match-row.loss{border-left-color:var(--crimson);}
.match-result-chip{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; flex-shrink:0;
}
.match-result-chip.win{background:var(--emerald-soft); color:var(--emerald);}
.match-result-chip.draw{background:var(--panel-3); color:var(--ink-faint);}
.match-result-chip.loss{background:var(--crimson-soft); color:var(--crimson);}
.match-main{flex:1; min-width:0;}
.match-opponent{font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.match-meta{font-size:11.5px; color:var(--ink-faint); margin-top:2px;}
.match-stats{display:flex; gap:14px; flex-shrink:0;}
.match-stat{display:flex; align-items:center; gap:5px; font-size:13.5px; font-weight:700; color:var(--ink-dim);}
.match-stat svg{color:var(--ink-faint); flex-shrink:0;}

/* ---------- Win-btn (reused for the competition picker) ---------- */
.tile-row .win-btn{
  position:relative; border-radius:var(--radius); border:1px solid var(--line-soft); background:var(--panel);
  padding:18px 12px; cursor:pointer; text-align:center; transition:transform .07s ease, border-color .12s ease, background .12s ease;
  display:flex; flex-direction:column; align-items:center; gap:6px; user-select:none; box-shadow:var(--shadow-card);
}
.win-btn:hover{border-color:var(--gold);}
.win-btn:active{transform:scale(0.96);}
.win-btn .win-name{font-weight:800; font-size:14px;}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(3,6,11,0.78); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:100; display:flex; align-items:flex-end; justify-content:center; padding:0;}
@media (min-width:640px){ .modal-overlay{align-items:center; padding:20px;} }
@keyframes modalIn{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
.modal{background:var(--bg-1); border:1px solid var(--line-soft); width:100%; max-width:600px; max-height:92vh; overflow-y:auto; border-radius:20px 20px 0 0; padding:24px; animation:modalIn .22s ease-out; box-shadow:var(--shadow-pop);}
@media (min-width:640px){ .modal{border-radius:18px;} }
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.modal-head h2{font-size:20px; letter-spacing:-0.1px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); font-weight:700; margin-bottom:6px;}
.field .input,.field .select-input{width:100%;}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1;}
.modal-actions{display:flex; gap:10px; margin-top:20px;}
.small-note{font-size:12px; color:var(--ink-faint); margin-top:4px; line-height:1.5;}
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--panel-2); border:1px solid var(--gold); color:var(--ink); padding:11px 18px; border-radius:99px; font-size:13px; font-weight:600; z-index:200; box-shadow:0 8px 22px rgba(0,0,0,0.4);}
.auth-error{font-size:12.5px; color:var(--crimson); background:var(--crimson-soft); border:1px solid rgba(239,106,93,0.35); padding:9px 12px; border-radius:9px; margin-bottom:14px;}

footer.site-footer{text-align:center; padding:36px 0 10px; color:var(--ink-faint); font-size:11.5px; letter-spacing:0.4px;}
footer.site-footer b{color:var(--gold);}

/* ---------- Auth ---------- */
.account-pill{display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--line); padding:5px 6px 5px 12px; border-radius:999px; font-size:12.5px; min-width:0;}
.account-pill b{color:var(--gold); font-weight:700;}
.pill-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
@media (max-width:520px){ .pill-prefix{display:none;} }
.auth-wrap{max-width:400px; margin:10vh auto 0; padding:0 4px;}
.auth-card{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); padding:30px 26px;}
.auth-brand{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:18px;}
.auth-toggle{display:flex; gap:8px; margin-top:18px; justify-content:center; font-size:13px; color:var(--ink-dim);}
.auth-toggle a{color:var(--gold); font-weight:700; text-decoration:none; cursor:pointer;}
.auth-checking{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:70vh; gap:14px; color:var(--ink-dim);}
.spinner{width:30px; height:30px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--gold); animation:spin 0.8s linear infinite;}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   FULL-TIME SPECIFIC - screenshot upload + lineup preview table
   ============================================================ */
.shot-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-top:12px;}
.shot-thumb{position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line-soft); aspect-ratio:4/3; background:var(--panel-2);}
.shot-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.shot-remove{position:absolute; top:5px; right:5px; width:26px; height:26px; background:rgba(4,7,14,0.75); border-color:transparent;}

.preview-table{display:flex; flex-direction:column; gap:8px; overflow-x:auto;}
.preview-row{
  display:grid;
  grid-template-columns:36px minmax(120px,1.4fr) 56px 56px 48px 48px 60px 110px 36px;
  gap:8px; align-items:center; min-width:640px;
}
.preview-row.preview-head{font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px; color:var(--ink-faint); font-weight:700; padding:0 0 2px;}
.preview-row .input,.preview-row .select-input{width:100%; padding:7px 6px; font-size:16px;}

.ocr-progress{height:8px; border-radius:99px; background:var(--panel-3); overflow:hidden; margin-top:14px;}
.ocr-progress-fill{height:100%; background:var(--gold); border-radius:99px; transition:width .15s ease;}

/* ============================================================
   CAREER MODE - always-on quick-log panel
   ------------------------------------------------------------
   Deliberately never a modal: logging a game is the single most
   repeated action in Career Mode, so it stays on the page at all times
   (no open-panel click, no overlay that can shift focus or get
   dismissed by an outside tap) and every field in it uses the 16px
   input rule above, so tapping in never triggers iOS's auto-zoom and
   the page never visibly jumps mid-entry.
   ============================================================ */
.quick-log-card{border-top:3px solid var(--gold); box-shadow:var(--shadow-pop);}
.quick-log-card .card-head h3::before{display:none;}
.goal-list{display:flex; flex-direction:column; gap:8px; margin-top:2px;}
.goal-chip{display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:7px 9px;}
.goal-chip-icon{color:var(--gold); display:flex; flex-shrink:0;}
.goal-chip-num{font-family:var(--font-m); font-size:11.5px; color:var(--ink-faint); width:16px; flex-shrink:0;}
.goal-chip .input{width:64px; flex-shrink:0; padding:7px 8px; font-size:16px;}
.goal-chip .select-input{flex:1; min-width:0; padding:7px 8px; font-size:16px;}
.goal-chip-remove{width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--panel-3); color:var(--ink-faint); flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; padding:0;}
.goal-chip-remove:hover{color:var(--crimson); border-color:var(--crimson);}
.goal-list-empty{font-size:12.5px; color:var(--ink-faint); padding:4px 2px;}
.add-goal-btn{display:flex; align-items:center; gap:8px; width:100%; justify-content:center; margin-top:8px;}