/* ============================================================
   Game Kit — the shared chrome for every review game.
   A game file supplies a board and its rules; everything you
   see here comes free.
   ============================================================ */
:root{
  --ink:#F4F7EF; --ink-dim:#9DB39E; --bg:#0A2117; --panel:#11301F; --panel-2:#173B28;
  --line:rgba(244,247,239,.14); --line-2:rgba(244,247,239,.28);
  --bulb:#FFC23A; --on-bulb:#2A1B00; --flag:#DD5238; --ok:#63D394;
  --turf:#1C4B31; --turf-2:#17402A; --dirt:#B87445; --leather:#8E4B24;
  --shadow:0 8px 24px rgba(0,0,0,.35); --radius:14px;
  --uni-white:#F2F5EE; --uni-grey:#C7D0C1; --uni-dark:#22402E; --uni-red:#DD5238;
}
:root[data-mode="day"]{
  --ink:#16301F; --ink-dim:#5E7765; --bg:#E9EFE1; --panel:#FFFFFF; --panel-2:#F3F7EC;
  --line:rgba(22,48,31,.16); --line-2:rgba(22,48,31,.32);
  --bulb:#B87A08; --on-bulb:#FFF6E2; --flag:#C03A24; --ok:#26804F;
  --turf:#3E8C5C; --turf-2:#357B50; --dirt:#C6834E;
  --shadow:0 4px 14px rgba(22,48,31,.12);
}
*{box-sizing:border-box}
html{height:100%}
body{min-height:100%; margin:0; background:var(--bg); color:var(--ink);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.4;
  -webkit-text-size-adjust:100%; display:flex; flex-direction:column; overflow-x:hidden}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--bulb); outline-offset:2px; border-radius:6px}
.lbl{font-family:"Barlow Condensed",sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; font-size:12px; color:var(--ink-dim)}
.grow{flex:1 1 auto}

.k-wrap{width:100%; max-width:1560px; margin:0 auto; padding:0 16px; padding-block:10px 18px;
  display:flex; flex-direction:column; gap:12px; flex:1}
.k-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.k-mark{font-family:"Alfa Slab One",Georgia,serif; font-size:clamp(19px,2.4vw,27px); line-height:1;
  display:flex; align-items:center; gap:9px}
.k-mark svg{width:30px; height:26px; flex:none}

.btn{background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:10px;
  padding:8px 13px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:7px;
  font-family:"Barlow Condensed",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  font-size:14px; line-height:1.15; transition:transform .08s ease, background .15s ease, border-color .15s ease}
.btn:hover{background:var(--panel-2); border-color:var(--line-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.38; cursor:default; transform:none}
.btn.primary{background:var(--bulb); color:var(--on-bulb); border-color:transparent; font-weight:700}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{border-color:color-mix(in srgb,var(--flag) 55%,transparent); color:var(--flag)}
.btn.danger:hover{background:color-mix(in srgb,var(--flag) 14%,var(--panel))}
.btn.go{border-color:var(--bulb); color:var(--bulb)}
.btn.sm{padding:5px 9px; font-size:13px; border-radius:8px}
.btn.icon{padding:7px 10px; font-size:15px}
.btn.big{padding:14px 18px; font-size:19px; border-radius:12px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:12px; min-width:0}
.card > h3{margin:0 0 9px; font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; font-size:13px; color:var(--ink-dim); display:flex; align-items:center; gap:8px}

/* ---- scoreboard ---- */
.k-score{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:stretch}
@media (max-width:820px){ .k-score{grid-template-columns:1fr} .k-team.right{flex-direction:row}
  .k-team.right .bar{left:0; right:auto} }
.k-team{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:10px 14px; display:flex; align-items:center; gap:12px; min-width:0; position:relative; overflow:hidden}
.k-team .bar{position:absolute; top:0; left:0; bottom:0; width:4px; background:var(--bulb); opacity:0}
.k-team.active .bar{opacity:1}
.k-team.active{border-color:var(--bulb)}
.k-team.right{flex-direction:row-reverse; text-align:right}
.k-team.right .bar{left:auto; right:0}
.k-team .tname{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:clamp(17px,2vw,24px);
  text-transform:uppercase; letter-spacing:.03em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.k-team .pts{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:clamp(34px,5vw,52px);
  line-height:.9; color:var(--bulb); font-variant-numeric:tabular-nums}
.k-team .stack{display:flex; flex-direction:column; gap:2px; min-width:0}
.k-team .flags{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--flag); font-weight:600; flex-wrap:wrap}
.k-turn{display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--bulb); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; font-family:"Barlow Condensed",sans-serif}

.k-status{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:9px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:210px}
.k-status .big{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:clamp(24px,3.4vw,34px);
  line-height:1; letter-spacing:.02em; text-transform:uppercase; text-align:center}
.k-status .small{font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:15px; color:var(--ink-dim);
  text-transform:uppercase; letter-spacing:.07em; text-align:center}
.k-status .tiny{font-size:11px; color:var(--ink-dim); letter-spacing:.06em; text-transform:uppercase;
  font-family:"Barlow Condensed",sans-serif}

/* ---- board ---- */
.k-boardcard{padding:10px}
.k-board{position:relative; border-radius:10px; overflow:hidden; margin-inline:auto}
.k-board svg{display:block; width:100%; height:100%}
.k-fx{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.k-banner{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition:opacity .2s ease}
.k-banner.show{opacity:1}
.k-banner span{font-family:"Alfa Slab One",Georgia,serif; font-size:clamp(28px,6vw,62px); color:var(--bulb);
  text-shadow:0 4px 0 rgba(0,0,0,.45), 0 0 34px rgba(0,0,0,.55); transform:rotate(-3deg); text-align:center; padding:0 12px}
.k-banner.bad span{color:var(--flag)}

/* ---- layout ---- */
.k-main{display:grid; gap:12px; grid-template-columns:minmax(210px,250px) minmax(0,1fr) minmax(250px,320px);
  grid-template-areas:"roster call wheel"; align-items:start}
@media (max-width:1080px){ .k-main{grid-template-columns:1fr; grid-template-areas:"call" "wheel" "roster"} }
#kCall{grid-area:call} #kWheelCard{grid-area:wheel} #kRosterCard{grid-area:roster}

.k-now{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.k-now > div{flex:1; min-width:0}
.k-now .who{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:clamp(22px,3.2vw,32px);
  line-height:1.05; text-transform:uppercase}
.k-now .next{font-size:13px; color:var(--ink-dim)}
.k-actions{display:flex; gap:10px; flex-wrap:wrap}
.k-actions .btn{flex:1 1 150px}
.k-extra{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.k-extra .btn{flex:1 1 120px}
#kPrompt{margin-top:10px; background:var(--panel-2); border:1px dashed var(--line-2); border-radius:12px;
  padding:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
#kPrompt .q{font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:15px; margin-right:4px}
#kPrompt.hot{background:color-mix(in srgb,var(--bulb) 16%,var(--panel)); border-color:var(--bulb)}

/* ---- wheel ---- */
.k-wheelbox{position:relative; display:flex; justify-content:center}
.k-wheelbox svg{width:100%; max-width:290px; height:auto; display:block}
#kWheelRot{transform-box:view-box; transform-origin:150px 150px; will-change:transform}
.k-slicelabel{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:14px; text-anchor:middle; fill:#1A1206}
.k-manual{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:12px}
.k-manual .btn{padding:9px 4px; font-size:14px; justify-content:center}
.note{font-size:12.5px; color:var(--ink-dim); margin:6px 0 0}

/* ---- roster + log ---- */
.k-roster{list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:3px}
.k-roster li{display:flex}
.k-roster button{width:100%; display:flex; align-items:center; gap:8px; background:transparent;
  border:1px solid transparent; border-radius:9px; padding:5px 8px; cursor:pointer; text-align:left}
.k-roster button:hover{background:var(--panel-2); border-color:var(--line)}
.k-roster .n{font-family:"Barlow Condensed",sans-serif; font-weight:700; color:var(--ink-dim); width:16px;
  font-variant-numeric:tabular-nums}
.k-roster .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.k-roster li.current button{background:color-mix(in srgb,var(--bulb) 16%,var(--panel)); border-color:var(--bulb)}
.k-roster li.current .n{color:var(--bulb)}
.k-roster .chip{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:12px;
  color:var(--on-bulb); background:var(--bulb); border-radius:5px; padding:1px 5px}
#kLog{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; max-height:230px; overflow-y:auto}
#kLog li{font-size:13px; display:flex; gap:7px; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:5px}
#kLog li:last-child{border-bottom:0}
#kLog .tag{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--on-bulb); background:var(--bulb); border-radius:5px; padding:1px 5px; flex:none}
#kLog .tag.bad{background:var(--flag); color:#fff}
#kLog .tag.sc{background:var(--ok); color:#0A2117}
#kLog .tag.inf{background:var(--line-2); color:var(--ink)}
.empty{color:var(--ink-dim); font-size:13px; font-style:italic}

/* ---- overlays ---- */
.k-overlay{position:fixed; inset:0; background:rgba(4,16,10,.62); backdrop-filter:blur(3px);
  display:flex; z-index:40; padding:16px; overflow:auto}
.k-overlay[hidden]{display:none!important}
.k-sheet{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.45); width:100%; max-width:560px; margin:auto; padding:18px}
.k-sheet.wide{max-width:780px}
.k-sheet h2{margin:0 0 4px; font-family:"Alfa Slab One",Georgia,serif; font-size:22px}
.k-sheet .sub{color:var(--ink-dim); font-size:13px; margin:0 0 16px}
.sec{border-top:1px solid var(--line); padding-top:14px; margin-top:16px}
.sec:first-of-type{border-top:0; padding-top:0; margin-top:0}
.sec h4{margin:0 0 10px; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.09em; font-size:13px; color:var(--ink-dim)}
label.f{display:block; margin-bottom:12px}
label.f > span{display:block; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.07em; font-size:12px; color:var(--ink-dim); margin-bottom:4px}
input[type=text],input[type=number],textarea,select{width:100%; background:var(--panel-2); border:1px solid var(--line);
  border-radius:9px; color:var(--ink); padding:8px 10px; font:inherit; font-size:15px}
textarea{resize:vertical; min-height:110px; line-height:1.55}
input[type=number]{width:78px; text-align:center}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){ .two{grid-template-columns:1fr} }
.check{display:flex; align-items:center; gap:9px; margin-bottom:10px; cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--bulb); flex:none}
.sliceline{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line)}
.sliceline .nm{flex:1; font-weight:600}
.sliceline .meta{font-size:12px; color:var(--ink-dim)}
.sw{width:11px; height:11px; border-radius:3px; flex:none}
.cnt{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:19px; min-width:26px;
  text-align:center; font-variant-numeric:tabular-nums}
.k-foot{display:flex; gap:9px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap}

/* ---- coin toss ---- */
.k-coinstage{perspective:900px; height:170px; display:flex; align-items:center; justify-content:center; margin:4px 0 12px}
.k-coin{width:132px; height:132px; position:relative; transform-style:preserve-3d}
.k-coin .face{position:absolute; inset:0; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:radial-gradient(circle at 34% 28%, #FFE79E, #FFC23A 52%, #B4780A);
  border:4px solid #8A5E06; color:#3A2600; box-shadow:0 12px 26px rgba(0,0,0,.42)}
.k-coin .tails{transform:rotateX(180deg)}
.k-coin .ch{font-family:"Alfa Slab One",Georgia,serif; font-size:42px; line-height:1}
.k-coin .cn{font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:12px; max-width:108px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.k-tossres{font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:clamp(17px,2.4vw,22px); color:var(--bulb); min-height:28px}

/* ---- small wheel (miss) ---- */
.k-small{display:flex; flex-direction:column; align-items:center; gap:10px}
.k-small svg{width:200px; height:200px}
.k-smallres{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:19px;
  text-transform:uppercase; letter-spacing:.05em}

/* ---- the player figure ---- */
.pl .shadow{fill:rgba(0,0,0,.32)}
.pl .pants{fill:var(--uni-grey); stroke:var(--uni-dark); stroke-width:1.2; stroke-linejoin:round}
.pl .shoe{fill:var(--uni-dark)}
.pl .jersey{fill:var(--uni-white); stroke:var(--uni-dark); stroke-width:1.4; stroke-linejoin:round}
.pl .pads{fill:var(--uni-white); stroke:var(--uni-dark); stroke-width:1.3; stroke-linejoin:round}
.pl .arm{fill:none; stroke:var(--uni-red); stroke-width:5.2; stroke-linecap:round}
.pl .helmet{fill:var(--bulb); stroke:var(--uni-dark); stroke-width:1.4}
.pl .cap{fill:var(--bulb); stroke:var(--uni-dark); stroke-width:1.1}
.pl .shade{fill:rgba(20,45,30,.1)}
.pl .jname{fill:var(--uni-dark); font-family:"Barlow Condensed",sans-serif; font-weight:700; letter-spacing:.02em}
.pl .jnum{fill:var(--uni-dark); font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:13px; text-anchor:middle}

@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* ---- question difficulty ---- */
.lvl{margin:0 0 10px; padding:10px; border:1px dashed var(--line-2); border-radius:12px; background:var(--panel-2)}
.lvl[hidden],.lvlbadge[hidden]{display:none!important}
.lvlq{font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:15px; margin-bottom:8px}
.lvlrow{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.lvl.spinonly .lvlrow{grid-template-columns:1fr}
@media (max-width:640px){ .lvlrow{grid-template-columns:1fr 1fr} }
.lvlbtn{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; border-radius:11px;
  border:2px solid var(--line-2); background:var(--panel); color:var(--ink); cursor:pointer; text-align:left; font:inherit}
.lvlbtn[hidden]{display:none!important}
.lvlbtn:hover{background:var(--panel-2)}
.lvlbtn b{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:20px; text-transform:uppercase; letter-spacing:.04em; line-height:1.1}
.lvlbtn span{font-size:12px; color:var(--ink-dim); line-height:1.25}
.lvlbtn.e{border-color:var(--ok)}   .lvlbtn.e b{color:var(--ok)}
.lvlbtn.m{border-color:var(--bulb)} .lvlbtn.m b{color:var(--bulb)}
.lvlbtn.h{border-color:var(--flag)} .lvlbtn.h b{color:var(--flag)}
.lvlbadge{display:flex; align-items:center; gap:12px; margin:0 0 10px; padding:8px 12px; border-radius:12px;
  border:2px solid var(--line-2); background:var(--panel-2)}
.lvlbadge span{font-family:"Alfa Slab One",Georgia,serif; font-size:26px; line-height:1; letter-spacing:.02em}
.lvlbadge small{flex:1; color:var(--ink-dim); font-size:13px}
.lvlbadge.e{border-color:var(--ok)}   .lvlbadge.e span{color:var(--ok)}
.lvlbadge.m{border-color:var(--bulb)} .lvlbadge.m span{color:var(--bulb)}
.lvlbadge.h{border-color:var(--flag)} .lvlbadge.h span{color:var(--flag)}

/* a question in the prompt bar locks the play buttons until it's answered */
body.asking #lvlBox, body.asking #lvlBadge{opacity:.35; pointer-events:none}
body.asking #kManual .btn{opacity:.4}
#kPrompt.nudge{animation:k-nudge .35s}
@keyframes k-nudge{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}