/* ============================================================
   junior.css — the Junior Gunners arcade (junior.html only).
   Kept out of styles.css, which sits at its 80KB budget and is
   loaded by every page; none of this is needed anywhere else.
   Uses the same tokens, so both themes just work.
   ============================================================ */

.jg__skip{margin-top:18px}
/* .btn sets display:inline-block, which beats the browser's own
   [hidden]{display:none} — the games toggle buttons with `hidden`. */
.arcade [hidden]{display:none !important}

/* ---------- arcade shell ---------- */
.arcade__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:16px}
.arcade__hd h2{margin:0;font-size:clamp(28px,5vw,42px);font-weight:900;font-variation-settings:'wdth' 112;letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.arcade__hd p{margin:0;font-size:14px;color:var(--mute);max-width:44ch}
.arcade__menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px}
.arcade__tile{
  --t:var(--red);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:14px 14px 12px;border-radius:var(--r-lg);border:0;background:var(--t);color:#fff;text-align:left;
  box-shadow:0 5px 0 rgba(0,0,0,.28);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.arcade__tile:hover{transform:translateY(-3px) rotate(-1.2deg);box-shadow:0 8px 0 rgba(0,0,0,.28)}
.arcade__tile:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.arcade__tile.is-on{outline:3px solid var(--gold);outline-offset:3px}
.arcade__tile[data-game="pens"]{--t:#063672}
.arcade__tile[data-game="keepy"]{--t:#1E7A34}
.arcade__tile[data-game="who"]{--t:#6A3FC9}
.arcade__tile[data-game="memory"]{--t:#A0660A}
.arcade__tile[data-game="kit"]{--t:#C2410C}
.arcade__tile[data-game="bingo"]{--t:#0B6E66}
.arcade__ico{font-size:30px;line-height:1.1}
.arcade__tile b{font-size:16.5px;font-weight:900;letter-spacing:-.01em}
.arcade__tile small{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.88}
.arcade__stage{margin-top:18px;scroll-margin-top:84px}
.arcade__panel{
  position:relative;overflow:hidden;background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--r-xl);padding:clamp(18px,3.5vw,32px);box-shadow:var(--shadow-sm);
}
.arcade__panel > h3{margin:0 0 4px;font-size:clamp(21px,3vw,27px);font-weight:900;font-variation-settings:'wdth' 110;letter-spacing:-.015em}
.arcade__intro{margin:0 0 18px;color:var(--ink-2);font-size:15px;line-height:1.55}

/* ---------- shared game bits ---------- */
.jq__top{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.jq__top b{color:var(--red);font-size:15px}
.jq__bar{height:8px;border-radius:99px;background:var(--card-2);overflow:hidden;margin-bottom:18px}
.jq__bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--red),#ff7a3d);transition:width .4s var(--ease-out)}
.jq__next{margin-top:14px}
.jend{text-align:center;padding:8px 0}
.jend__big{margin:0;font-size:68px;font-weight:900;line-height:1;color:var(--red)}
.jend__big small{font-size:26px;color:var(--mute)}
.jend__msg{margin:12px auto 16px;font-family:var(--serif);font-size:18px;max-width:40ch}
.jend__best{margin:-6px 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.jstats{display:flex;justify-content:center;gap:18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.jstats b{color:var(--red)}
.jmsg{text-align:center;font-weight:800;font-size:17px;margin:14px 0 12px;min-height:1.4em}
.jfoot{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.jmode{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.jmode button{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--card-border);background:var(--card);color:var(--ink-2)}
.jmode button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

.confetti{position:absolute;top:-12px;width:8px;height:13px;border-radius:2px;pointer-events:none;z-index:6;animation:confFall 1.8s var(--ease-in-out) forwards}
@keyframes confFall{to{transform:translate(var(--dx,0),460px) rotate(560deg);opacity:0}}

/* ---------- penalties ---------- */
.pens__dots{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.pens__dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;font-weight:700;border:2px solid var(--card-border);color:var(--mute)}
.pens__dot.is-good{background:var(--ok);border-color:var(--ok);color:#fff}
.pens__dot.is-bad{background:var(--red);border-color:var(--red);color:#fff}
.pens__pitch{
  position:relative;max-width:540px;margin:0 auto;padding:22px 20px 100px;border-radius:var(--r-lg);overflow:hidden;
  background:repeating-linear-gradient(180deg,#3a9e48 0 34px,#34913f 34px 68px);
}
.pens__pitch::after{content:'';position:absolute;left:50%;bottom:30px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:rgba(255,255,255,.85)}
.pens__goal{
  position:relative;aspect-ratio:3/1.3;border:6px solid #fff;border-bottom:0;border-radius:4px 4px 0 0;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 1px,transparent 1px 11px),
    rgba(0,0,0,.08);
}
.pens__keeper{position:absolute;left:50%;bottom:0;width:18%;transform:translateX(-50%);transform-origin:50% 80%;transition:transform .45s var(--ease-out);z-index:2}
.pens__keeper svg{display:block;width:100%;height:auto}
.pens__zones{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);z-index:3}
.pens__zones button{position:relative;background:none;border:0;padding:0;cursor:crosshair}
.pens__zones button::after{content:'';position:absolute;inset:20% 27%;border:3px dashed rgba(255,255,255,.9);border-radius:50%;background:rgba(255,255,255,.1);opacity:.75;transition:opacity .15s,transform .15s}
.pens__zones button:hover::after,.pens__zones button:focus-visible::after{opacity:1;transform:scale(1.08)}
.is-saving .pens__zones button{cursor:pointer}
.pens__ball{position:absolute;left:50%;bottom:22px;width:40px;height:40px;margin-left:-20px;font-size:34px;line-height:40px;text-align:center;z-index:4;transition:transform .5s cubic-bezier(.2,.7,.3,1);pointer-events:none}
.no-anim .pens__ball,.no-anim .pens__keeper{transition:none}

/* ---------- keepy-uppy ---------- */
.keepy{
  position:relative;height:360px;border-radius:var(--r-lg);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;
  background:linear-gradient(180deg,#bfe4ff 0,#e6f4ff 76%,#3a9e48 76%,#34913f 100%);
}
[data-theme="dark"] .keepy{background:linear-gradient(180deg,#0d1f38 0,#1a3558 76%,#1f6b2b 76%,#185a24 100%)}
.keepy:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.keepy__count{position:absolute;top:14px;left:0;right:0;text-align:center;font-size:56px;font-weight:900;line-height:1;color:rgba(10,22,34,.78);pointer-events:none}
[data-theme="dark"] .keepy__count{color:rgba(255,255,255,.85)}
.keepy__ball{position:absolute;left:calc(50% - 31px);top:calc(76% - 56px);width:62px;height:62px;font-size:56px;line-height:62px;text-align:center;pointer-events:none;will-change:transform}
.keepy__ball.is-hit{animation:kHit .2s}
@keyframes kHit{50%{filter:brightness(1.35) drop-shadow(0 0 8px #fff)}}
.keepy.is-live .keepy__ball{left:0;top:0}
.keepy__start{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:2}

/* ---------- who am I ---------- */
.who__card{display:flex;gap:16px;align-items:flex-start;background:var(--board-bg);color:#fff;border-radius:var(--r-lg);padding:18px;margin-bottom:16px}
.who__mark{flex:0 0 auto;width:64px;height:78px;border-radius:14px 14px 20px 20px;background:var(--red);display:grid;place-items:center;font-size:38px;font-weight:900;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
.who__mark.is-found{background:#fff;color:var(--red)}
.who__clues{margin:0;padding-left:20px;font-size:16px;line-height:1.75}
.who__clues li{animation:clueIn .35s var(--ease-out)}
@keyframes clueIn{from{opacity:0;transform:translateX(-8px)}}
.who__actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- memory ---------- */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:460px;margin:0 auto}
.mem{aspect-ratio:3/4;border:0;padding:0;background:none;perspective:600px}
.mem__in{position:relative;display:block;width:100%;height:100%;transition:transform .4s var(--ease-out);transform-style:preserve-3d}
.mem.is-up .mem__in{transform:rotateY(180deg)}
.mem__back,.mem__face{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.mem__back{background:repeating-linear-gradient(45deg,var(--red) 0 10px,#c8000a 10px 20px);border:3px solid #fff;box-shadow:var(--shadow-sm)}
.mem__face{background:var(--card-2);border:2px solid var(--card-border);transform:rotateY(180deg);font-size:clamp(26px,7vw,36px);align-content:center;gap:2px;line-height:1.1}
.mem__face small{font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.mem.is-match .mem__face{border-color:var(--ok);background:var(--ok-wash)}

/* ---------- kit designer ---------- */
.kit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:start}
.kit__svg{width:100%;max-width:300px;margin:0 auto;display:block;filter:drop-shadow(0 12px 18px rgba(0,0,0,.2))}
.kit__svg text{font-family:var(--sans);font-weight:900;text-anchor:middle;paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-width:2.6;stroke-linejoin:round}
#kit-name{stroke-width:1.6}
.kit__row{margin-bottom:12px}
.kit__row > span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.swatches{display:flex;flex-wrap:wrap;gap:7px}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid var(--card-border);padding:0}
.sw[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:2px}
.pat{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:7px 11px;border-radius:var(--r-pill);border:1px solid var(--card-border);background:var(--card);color:var(--ink-2)}
.pat[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.kit__in{display:flex;gap:8px}
.kit__in input{font:inherit;font-size:16px;padding:9px 12px;border-radius:var(--r-md);border:1px solid var(--card-border);background:var(--card-2);color:var(--ink);min-width:0}
#kit-name-in{flex:1;text-transform:uppercase}
#kit-num-in{width:74px;text-align:center}
.kit__btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.kit__note{font-size:12.5px;color:var(--mute);margin:10px 0 0}

/* ---------- bingo ---------- */
.bingo--fixed{grid-template-columns:repeat(3,1fr)}
.bingo--fixed button.is-line{box-shadow:0 0 0 3px var(--gold)}

@media (max-width:640px){
  .kit{grid-template-columns:1fr}
  .kit__svg{max-width:230px}
  .keepy{height:330px}
  .arcade__menu{grid-template-columns:repeat(2,1fr)}
  .mem-grid{gap:8px}
}