/* The games. Loaded only on /games pages (front matter: styles: games.css). */

/* The stage is sized so the whole game fits the window without scrolling: the narrowest of the page
   width, 1120px, and whatever width the window's height allows at the stage's aspect ratio. */
.game-section{padding:26px 0 56px}
.game-wrap{--ratio:1.7778;--chrome:230px;
  width:max(300px,min(1120px,calc(100% - 24px),calc((100vh - var(--chrome)) * var(--ratio))));margin-inline:auto}
.game-wrap.toss{--ratio:1.6667;--chrome:350px}
.game-head{display:flex;justify-content:space-between;align-items:end;gap:10px 24px;flex-wrap:wrap;margin-bottom:14px}
.game-head .eyebrow{margin-bottom:.6em}
.game-title{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:0}
.hud{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.hud-box{background:var(--paper);border:var(--line);border-radius:14px;padding:6px 14px 7px;box-shadow:3px 3px 0 var(--ink);min-width:78px;text-align:center}
.hud-box small{display:block;font:700 .66rem/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.hud-box b{font:700 1.5rem/1.1 var(--display);font-variant-numeric:tabular-nums}
.hud-btn{font:700 .86rem/1 var(--display);color:var(--ink);background:var(--lemon-l);border:var(--line);border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);padding:0 14px;cursor:pointer}
.hud-btn[aria-pressed="false"]{background:var(--paper);color:var(--ink-soft)}
.game-help{margin:16px 0 0;color:var(--ink-soft);font-size:1rem}
.game-help a{font-weight:800}

.stage{position:relative;overflow:hidden;border:var(--line);border-radius:var(--r);box-shadow:var(--pop);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-touch-callout:none;outline-offset:4px}
/* focused by script so Space reaches the game; it is not a Tab stop, so it wears no ring */
.stage:focus{outline:none}
.game-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(42,26,74,.5);z-index:30;padding:14px}
.game-overlay[hidden]{display:none}
.game-card{background:var(--paper);border:var(--line);border-radius:var(--r);box-shadow:var(--pop);padding:22px 26px;text-align:center;
  max-width:460px;max-height:100%;overflow:auto}
.game-card h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.35em}
.game-card p{margin-bottom:1em}
.game-card .big{font:700 clamp(2.4rem,6vw,3.6rem)/1 var(--display);color:var(--pink);display:block;margin-bottom:.15em}
.game-card .btn-row{justify-content:center}
.float-text{position:absolute;z-index:25;font:700 1.7rem/1 var(--display);pointer-events:none;color:var(--ink);white-space:nowrap;
  text-shadow:0 2px 0 #fff,2px 0 0 #fff,-2px 0 0 #fff,0 -2px 0 #fff,2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff}
.float-text.gold{color:#c98a00;font-size:2.2rem}
.float-text.bad{color:var(--ink-soft);font-size:1.3rem}
.float-text.good{color:#1f9a3c}
.float-text.level{color:var(--pink);font-size:2rem}

/* ── Candy Blaster ──────────────────────────────────── */
.blaster-stage{aspect-ratio:16/9;background-color:var(--sky-l);cursor:crosshair}
.awning{position:absolute;left:0;right:0;top:0;height:11%;z-index:3;border-bottom:var(--line);
  background:repeating-linear-gradient(90deg,var(--pink) 0 5%,var(--cream) 5% 10%)}
.awning::after{content:"";position:absolute;left:0;right:0;top:100%;margin-top:3px;height:9px;background:var(--lemon);border-bottom:var(--line)}
.plank{position:absolute;left:24%;right:0;height:6.5%;z-index:4;background:var(--orange);border-block:var(--line)}
.plank::after{content:"";position:absolute;left:0;right:0;top:22%;height:3px;background:rgba(42,26,74,.18)}
.plank.p1{top:50%} .plank.p2{top:90%}
.slot{position:absolute;width:12%;height:34%;overflow:hidden;z-index:2}
.slot.r1{top:16%} .slot.r2{top:56%}
.slot.c1{left:30%} .slot.c2{left:47%} .slot.c3{left:64%} .slot.c4{left:81%}
/* A target rises from behind its plank: the slot clips everything below the plank's top edge. */
.target{appearance:none;background:none;border:0;padding:0;margin:0;position:absolute;left:50%;bottom:0;width:76%;cursor:crosshair;
  transform:translate(-50%,105%);transition:transform .22s cubic-bezier(.3,1.5,.5,1);-webkit-tap-highlight-color:transparent}
.target.up{transform:translate(-50%,28%)}
.target .dsp{pointer-events:none}
.target.hit .dsp-head{visibility:hidden}
.target.gold .dsp{filter:drop-shadow(0 0 9px #ffd53d) drop-shadow(0 0 3px #fff)}
.target:focus-visible{outline:4px solid var(--grape);outline-offset:-4px}
/* The popped head is a copy of the whole drawing with everything but the head switched off, laid
   exactly over the original, so it can leave the slot's clip and fly across the stage. */
.flyhead{position:absolute;z-index:20;pointer-events:none;transform-origin:50% 22%}
.flyhead .dsp-body,.flyhead .dsp-candy{display:none}
.gun{position:absolute;z-index:10;width:21%;left:1.5%;top:39.4%;transform-origin:30.67% 47.2%;pointer-events:none}
.gun-art{display:block;width:100%;height:auto;overflow:visible}
.shot{position:absolute;left:0;top:0;z-index:15;width:2.7%;min-width:20px;aspect-ratio:34/16;pointer-events:none;
  background:var(--lemon-l);border:2.5px solid var(--ink);border-radius:4px}
.shot.mini{width:1.7%;min-width:13px;border-width:2px;z-index:19}
.ammo{position:absolute;left:1.5%;bottom:3%;z-index:12;display:grid;grid-template-columns:repeat(6,auto);gap:3px;pointer-events:none;
  background:rgba(255,255,255,.75);border:2.5px solid var(--ink);border-radius:10px;padding:5px 6px}
.ammo i{display:block;width:15px;height:8px;border:2px solid var(--ink);border-radius:3px;background:var(--lemon)}
.ammo i:nth-child(3n+1){background:var(--pink-l)} .ammo i:nth-child(3n+2){background:var(--sky-l)}
.ammo i.spent{opacity:.16}
.ammo.reloading{animation:ammo-blink .3s steps(2) infinite}
@keyframes ammo-blink{50%{opacity:.35}}

/* ── Candy Toss ─────────────────────────────────────── */
.toss-stage{aspect-ratio:5/3;background-color:var(--lime-l);cursor:pointer}
.toss-stage .field{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block}
.toss-stage .field text{font:700 15px var(--display);fill:var(--ink);opacity:.4}
.toss-disp{position:absolute;z-index:1;pointer-events:none}
.toss-disp .dsp-candy{display:none}
.basket-art{transform-box:fill-box;transform-origin:50% 100%}
.basket-art.bump{animation:basket-bump .36s ease-out}
@keyframes basket-bump{30%{transform:scale(1.12,.84)}60%{transform:scale(.95,1.08)}}
.toss-controls{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-top:16px}
.meter{position:relative;height:34px;border:var(--line);border-radius:99px;box-shadow:3px 3px 0 var(--ink);
  background:linear-gradient(90deg,var(--lime),var(--lemon) 45%,var(--orange) 75%,var(--pink));transition:filter .15s,opacity .15s}
.meter i{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:rgba(42,26,74,.3)}
.meter-mark{position:absolute;top:-7px;bottom:-7px;left:0;width:12px;margin-left:-6px;background:var(--ink);border-radius:6px;border:2.5px solid #fff}
.meter-label{position:absolute;left:14px;top:50%;transform:translateY(-50%);font:700 .8rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:.7}
[data-state]:not([data-state="power"]) ~ .toss-controls .meter{filter:saturate(.35);opacity:.6}
.toss-go{min-width:11.5em;justify-content:center}
.toss-go:disabled{opacity:.45;cursor:default;transform:none;box-shadow:4px 4px 0 var(--ink)}

/* ── hub ────────────────────────────────────────────── */
.game-tile{display:grid;grid-template-rows:auto 1fr;overflow:hidden;padding:0}
.game-tile .art{display:flex;align-items:end;justify-content:center;gap:4%;height:210px;padding:18px 18px 0;border-bottom:var(--line);overflow:hidden}
.game-tile .art .dsp{width:70px;height:auto;align-self:end;margin-bottom:-60px}
.game-tile .art .gun-art{width:190px;align-self:center}
.game-tile .art .basket-svg{width:150px;align-self:center}
.game-tile .art .brick{width:44px;height:21px;border:3px solid var(--ink);border-radius:5px;background:var(--pink-l);align-self:start;margin-top:26px;transform:rotate(-24deg)}
.game-tile .body{padding:22px 26px 24px}

@media (max-width:640px){
  .game-wrap,.game-wrap.toss{--ratio:.8}
  .game-wrap{--chrome:250px} .game-wrap.toss{--chrome:400px}
  .game-head{justify-content:center;text-align:center}
  .hud{justify-content:center;gap:8px}
  .hud-box{min-width:68px;padding:5px 10px 6px} .hud-box b{font-size:1.25rem}
  .hud-btn{padding:9px 12px}

  .blaster-stage{aspect-ratio:4/5}
  .awning{height:8%}
  .plank{left:0} .plank.p1{top:42%} .plank.p2{top:76%}
  .slot{width:24%;height:30%} .slot.r1{top:12%} .slot.r2{top:46%}
  .slot.c1{left:6%} .slot.c2{left:38%} .slot.c3{left:70%} .slot.c4{display:none}
  .target{width:72%}
  .gun{width:36%;left:2%;top:80%}
  .ammo{left:auto;right:3%;bottom:3%}

  .toss-stage{aspect-ratio:4/5}
  .toss-controls{grid-template-columns:1fr}
  .toss-go{width:100%}
  .float-text{font-size:1.35rem}
}