/* ==========================================================================
   play.css - Snip & Ship (/play). Visual direction v2 (the owner,
   2026-10-08: clean, "advanced level gaming visuals", all elements and
   screens).

   One sky runs from the title down into the stage: the title is the deep
   top of it, and its last colour is the canvas's first, so the two read as
   one picture. Everything on top of the game is glass: dark frosted panels
   with a hairline edge, white type, one warm accent for the call to play.
   No sticker tilts, no hard offset shadows.
   ========================================================================== */
:root{
  --sky-a:#1b549b;--sky-b:#2f7cc7;--sky-c:#5fa9e6;
  --glass:rgba(12,22,48,.46);--glass-hi:rgba(255,255,255,.16);--glass-edge:rgba(255,255,255,.22);
  --glass-blur:blur(16px) saturate(1.5);
  --ink:#0f1a2e;--on:#fff;--on-2:rgba(255,255,255,.82);--on-3:rgba(255,255,255,.62);
  --play-a:#ff7b6b;--play-b:#e63f4d;--play-glow:rgba(230,63,77,.45);
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --display:'Inter Tight','Satoshi',system-ui,sans-serif;
  --sans:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --out:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --theme-color:#1b549b;--mark-ink:#fff;
}
html.dark{--sky-a:#060a1c;--sky-b:#0a1129;--sky-c:#0c1430;--theme-color:#060a1c;--glass:rgba(8,12,30,.55)}

html{scroll-behavior:smooth;cursor:url(../img/play/scissors-open.svg) 16 9,crosshair}
html.cutting,html.cutting *{cursor:url(../img/play/scissors-shut.svg) 16 9,crosshair}
a,button,label{cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--sky-c);color:var(--on);font:500 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:#fff;color:var(--ink);padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid #9fd0ff;outline-offset:3px}

/* glass: the one surface every control sits on */
.glass{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 10px 30px -12px rgba(5,10,30,.5);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}

/* ---------------- the title ---------------- */
.title{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;box-sizing:border-box;
  background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 58%,var(--sky-c) 100%);
  padding:clamp(64px,8vh,104px) 20px calc(var(--dock-top) + 16px)}
.sunglow{display:none;position:absolute;right:-18%;bottom:-38%;width:80vmax;height:80vmax;border-radius:50%;pointer-events:none}
html.dark .sunglow{display:block}
html.dark .sunglow{mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(150,160,255,.18),rgba(150,160,255,0) 65%)}
/* minmax(0,1fr): nothing inside may widen the column past the screen */
.title{grid-template-columns:minmax(0,1fr)}
.t-in{position:relative;z-index:1;max-width:1040px;width:100%;min-width:0;text-align:center}
.logo{margin:0 0 clamp(14px,2.2vh,22px);display:flex;flex-direction:column;align-items:center;gap:6px}
.logo-k{font:700 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--on-3)}
.logo-w{display:inline-flex;align-items:center;gap:.28em;font:900 clamp(26px,3vw,40px)/1 var(--display);letter-spacing:.08em;color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.12),0 10px 30px rgba(10,30,70,.35)}
.logo-ic{display:inline-grid;width:1.05em;height:1.05em;transform:rotate(-90deg)}
.logo-ic svg{width:100%;height:100%;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.disp{margin:0 auto;max-width:18ch;font:800 min(5vw,7.6vh,72px)/1.04 var(--display);letter-spacing:-.022em;word-spacing:.04em;color:#fff;text-wrap:balance;
  text-shadow:0 2px 24px rgba(8,24,60,.25)}
.lede{margin:clamp(10px,1.6vh,16px) 0 0;font:500 clamp(17px,1.5vw,20px)/1.4 var(--sans);color:var(--on-2)}
.how{list-style:none;padding:0;margin:clamp(20px,3.4vh,36px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:960px;text-align:left}
.how li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;
  background:rgba(8,22,52,.34);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 34px -18px rgba(5,10,30,.6);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.how-ic{flex:none;display:grid;place-items:center;width:clamp(64px,6vw,80px);height:clamp(52px,5vw,62px);border-radius:14px;background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0))}
.how-ic svg{max-width:100%;max-height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.how-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.how-n{font:800 11px/1 var(--display);letter-spacing:.18em;color:#ffd27a}
.how-t b{font:700 16.5px/1.25 var(--display);color:#fff}
.how-t>span:last-child{font:500 15px/1.35 var(--sans);color:var(--on-2)}
.rules{margin:clamp(16px,2.6vh,24px) 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;font:700 15px/1 var(--sans);color:#fff;
  background:rgba(8,22,52,.3);border:1px solid rgba(255,255,255,.18)}
.hearts{display:inline-flex;gap:2px}
.hearts svg{width:16px;height:15px}
.chip-ic{width:14px;height:17px;border-radius:2px;background:linear-gradient(#9fd0ff 0 62%,#fff 62%);box-shadow:0 0 0 2px #fff;transform:rotate(-6deg)}
.t-go{margin-top:clamp(18px,3vh,30px);display:flex;flex-direction:column;align-items:center;gap:8px}
.down{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;font:600 15px/1 var(--sans);color:var(--on-3);text-decoration:none}
.down:hover{color:#fff}
.down span{display:inline-block;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}

/* clouds on the title: art.js's own, set in by game.js */
.cloud{position:absolute;z-index:0;width:clamp(150px,16vw,240px);opacity:.9;pointer-events:none}
.cloud svg{width:100%;height:auto;display:block}
.c1{left:3%;top:16%;animation:drift 40s linear infinite alternate}
.c2{right:4%;top:28%;width:clamp(110px,12vw,180px);opacity:.7;animation:drift 48s linear infinite alternate-reverse}
.c3{left:10%;bottom:10%;width:clamp(120px,13vw,190px);opacity:.75;animation:drift 54s linear infinite alternate}
@keyframes drift{to{translate:60px 0}}

/* ---------------- buttons ---------------- */
.go{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 42px;border:0;border-radius:999px;
  background:linear-gradient(180deg,var(--play-a),var(--play-b));color:#fff;font:800 21px/1 var(--display);letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.12),0 14px 30px -10px var(--play-glow),0 4px 10px -4px rgba(0,0,0,.3);
  transition:transform .25s var(--spring),box-shadow .25s,filter .2s}
.go::after{content:'';position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgba(255,123,107,.55);opacity:0;pointer-events:none}
#startBtn::after{animation:ring 2.4s var(--out) infinite}
@keyframes ring{0%{opacity:.8;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.18)}}
.go:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.12),0 20px 40px -12px var(--play-glow),0 6px 14px -6px rgba(0,0,0,.3)}
.go:active{transform:translateY(1px) scale(.99)}
.go-ic{width:0;height:0;border-left:14px solid currentColor;border-top:8.5px solid transparent;border-bottom:8.5px solid transparent;margin-left:2px}
.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;font:700 15.5px/1 var(--sans);text-decoration:none;transition:background .2s}
.ghost:hover{background:rgba(255,255,255,.16)}

/* ---------------- the stage ---------------- */
/* svh, not dvh: a phone's toolbar showing and hiding must not re-lay the
   world (and re-tie the photos) while someone scrolls */
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--sky-c);touch-action:pan-y;outline:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* A game has the whole screen: the stage pins over everything but the
   dock (z 50), which steps aside on its own (.away) and comes back on
   pause and at the end. */
html.playing body{overflow:hidden}
html.playing .stage{position:fixed;inset:0;z-index:40;touch-action:none}
/* the pinned stage leaves the page; its height stays, so the scroll cannot
   snap back to the title and leave the result card below the fold */
html.playing #main{padding-bottom:100vh;padding-bottom:100svh}
/* the consent bar never lands on the road mid-game (its gate is the end
   card, but a replay starts while it can still be up) */
html.playing .ph-consent{visibility:hidden!important}
.nojs{position:absolute;inset:auto 16px 45% 16px;text-align:center;font-weight:700}

/* the HUD: dark glass, white type */
.hud{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));pointer-events:none}
.hud[hidden]{display:none}
.hud>*{pointer-events:auto}
.lives,.safe,.clock{display:inline-flex;align-items:center;gap:3px;min-height:44px;padding:0 14px;box-sizing:border-box;border-radius:999px;font:800 16px/1 var(--display);color:#fff}
.lives svg{width:21px;height:19px;transition:transform .3s var(--spring)}
.lives svg.break{animation:break .6s ease-out}
@keyframes break{30%{transform:scale(1.55) rotate(-12deg)}100%{transform:scale(1)}}
.safe{gap:12px}
.slots{display:inline-flex;gap:4px}
.slots i{display:block;width:15px;height:19px;border-radius:3px;background:rgba(255,255,255,.1) center/cover no-repeat;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);transition:box-shadow .3s}
.slots i.on{box-shadow:inset 0 0 0 1.5px #fff,0 0 12px rgba(255,214,122,.75);animation:slot .5s var(--spring)}
@keyframes slot{from{transform:scale(1.8);opacity:0}}
.safe-n{display:inline-flex;align-items:baseline;gap:0;font-weight:700;color:var(--on-2)}
.safe-w{margin-right:6px}
.safe-n b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.safe.pop{animation:pop .45s var(--spring)}
@keyframes pop{40%{transform:scale(1.08)}}
.hud-r{display:inline-flex;align-items:center;gap:8px}
.clock{font-variant-numeric:tabular-nums;min-width:70px;justify-content:center}
.hb{width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;color:#fff}
.hb svg{width:20px;height:20px;fill:currentColor;stroke:currentColor}
.hb:hover{background:rgba(12,22,48,.62)}
.hb:active{transform:scale(.94)}
.hb .snd-off,.hb[aria-pressed="true"] .snd-on{display:none}
.hb[aria-pressed="true"] .snd-off{display:inline}

/* cards: one at a time, glass, over the open sky */
.ov{position:absolute;inset:0;z-index:4;pointer-events:none;display:grid;place-items:center;padding:16px}
.card{pointer-events:auto;position:relative;top:4vh;width:min(420px,100%);box-sizing:border-box;text-align:center;border-radius:26px;padding:26px 24px 24px;
  background:rgba(10,18,40,.66);border:1px solid rgba(255,255,255,.16);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 80px -24px rgba(4,8,24,.7);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  display:flex;flex-direction:column;align-items:center;gap:12px;animation:cardIn .5s var(--out)}
.card[hidden],.count[hidden],.toast[hidden]{display:none}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.96)}}
.card-k{margin:0;font:800 12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:#ffd27a}
.card-h{margin:0;font:800 clamp(24px,2.8vw,30px)/1.1 var(--display);letter-spacing:-.015em;text-wrap:balance}
.card-p{margin:0;color:var(--on-2);font-size:16px;text-wrap:balance}
.card-s{margin:0;font:600 14px/1 var(--sans);color:var(--on-3)}
.card-keys{font-weight:500;font-size:13px}
@media (hover:none){.card-keys{display:none}}
.card-row{display:flex;gap:10px}
.card--end{top:1vh}
#cardStart{top:7vh;padding:20px 22px 20px;gap:10px;width:min(380px,100%)}
#cardStart .go{min-height:52px;font-size:19px}
.fan{position:relative;height:74px;width:100%;margin:4px 0 6px}
.fan img{position:absolute;left:50%;top:6px;width:44px;height:52px;object-fit:cover;background:#fff;border:3px solid #fff;border-bottom-width:9px;border-radius:2px;box-shadow:0 8px 16px rgba(0,0,0,.35);
  transform:translateX(calc(-50% + var(--x))) rotate(var(--r));animation:fanIn .55s var(--spring) both;animation-delay:var(--d)}
@keyframes fanIn{from{opacity:0;transform:translateX(-50%) translateY(30px) rotate(0)}}
.count{font:900 clamp(110px,20vh,200px)/1 var(--display);color:#fff;letter-spacing:-.04em;text-shadow:0 0 40px rgba(255,255,255,.55),0 12px 40px rgba(10,20,50,.45);pointer-events:none}
.count span{display:inline-block;animation:countPop .6s var(--spring)}
@keyframes countPop{from{transform:scale(.4);opacity:0;filter:blur(8px)}}
.toast{position:absolute;left:50%;top:46%;transform:translateX(-50%);margin:0;background:rgba(10,18,40,.72);border:1px solid rgba(255,255,255,.16);color:#fff;font:700 15px/1 var(--sans);padding:12px 18px;border-radius:999px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:cardIn .3s var(--out)}

/* the arrival from the homepage's crash: the sky the truck drove into opens */
html.wipe-in body::after{content:'';position:fixed;inset:0;z-index:300;background:#1b549b;pointer-events:none;
  clip-path:circle(150% at 100% 55%);animation:wipeOut .6s cubic-bezier(.7,0,.3,1) .12s forwards}
html.dark.wipe-in body::after{background:#060a1c}
@keyframes wipeOut{to{clip-path:circle(0% at 100% 55%)}}

/* ---------------- smaller screens ---------------- */
/* A short laptop: the dock takes the foot of the first screen, so the
   title tightens until Play clears it. */
@media (max-height:820px) and (min-width:861px){
  .disp{font-size:min(5vw,6.8vh,72px)}
  .logo{margin-bottom:12px}
  .how{margin-top:18px}.how li{padding:11px 14px}
  .rules{margin-top:12px}
  .t-go{margin-top:16px}
  .down{display:none}
}
@media (max-width:860px){
  .how{grid-template-columns:1fr;max-width:460px;gap:10px}
  .how li{padding:10px 14px}
  .how-ic{width:58px;height:46px}
  .disp{font-size:min(9.2vw,6.4vh,52px)}
}
@media (max-width:560px){
  .hud{gap:6px;padding-left:10px;padding-right:10px}
  .lives{padding:0 10px;gap:1px}.lives svg{width:16px;height:15px}
  .safe,.clock{padding:0 11px;font-size:15px}
  .slots{display:none}
  .clock{min-width:58px}
  .hud-r{gap:6px}
}
@media (max-width:440px){.clock{display:none}}
@media (max-width:359px){
  .hud{gap:4px;padding-left:8px;padding-right:8px}
  .lives{padding:0 8px}.lives svg{width:13px;height:12px}
  .safe{padding:0 10px}.safe-w{display:none}
  .hud-r{gap:4px}
  .chip .hearts{display:none}
  .chip{padding:0 10px}
}
/* 320 x 640 and the like: the tiles keep their titles, which carry the
   rules, and drop the line under them so Play clears the dock */
@media (max-width:359px) and (max-height:700px){
  .logo-k{display:none}
  .how-t>span:last-child{display:none}
  .how li{padding:5px 10px}
}
/* a phone in portrait: Play must clear the dock on the first screen */
@media (max-width:560px) and (orientation:portrait){
  .title{padding-top:56px}
  .cloud{display:none}
  .logo{margin-bottom:10px}.logo-k{font-size:11px}
  .lede{font-size:16px;margin-top:8px}
  .how{margin-top:16px;gap:8px}
  .how li{padding:8px 12px;gap:12px;border-radius:16px}
  .how-ic{width:50px;height:40px}
  .how-t b{font-size:15.5px}
  .rules{margin-top:12px;gap:6px;flex-wrap:nowrap}
  .chip{min-height:32px;padding:0 11px;font-size:13.5px;gap:6px;white-space:nowrap}
  .hearts svg{width:12px;height:11px}
  .t-go{margin-top:14px}
  .go{min-height:52px;padding:0 36px}
  .down{display:none}
}
@media (max-width:560px) and (orientation:portrait){#cardStart{top:11vh}}
/* the smallest phones (320 x 640): a little tighter still */
@media (max-width:560px) and (max-height:700px) and (orientation:portrait){
  .title{padding-top:50px}
  .logo{margin-bottom:6px}.logo-w{font-size:22px}
  .disp{font-size:min(8.4vw,27px)}
  .lede{display:none}
  .how{margin-top:12px;gap:6px}
  .how li{padding:6px 10px}
  .how-ic{width:40px;height:32px}
  .rules{margin-top:10px}
  .t-go{margin-top:10px}
  .go{min-height:48px}
}
/* a phone on its side: the title goes two-up so Play is on the first screen */
@media (orientation:landscape) and (max-height:520px){
  .title{padding:50px 20px calc(var(--dock-top) + 10px)}
  .lede,.down{display:none}
  .t-in{display:grid;grid-template-columns:1.1fr 1fr;gap:12px 28px;align-items:center;text-align:left;max-width:1000px}
  .logo,.disp,.t-go,.rules{grid-column:1}
  .logo{align-items:flex-start;margin:0}
  .disp{font-size:min(4.4vw,8vh,34px);margin:0}
  .how{grid-column:2;grid-row:1 / span 4;margin:0;grid-template-columns:1fr;gap:8px}
  .how li{padding:7px 12px}
  .how-ic{width:48px;height:36px}
  .how-t>span:last-child{font-size:15px;line-height:1.25}
  .rules{justify-content:flex-start;margin-top:4px}
  .t-go{align-items:flex-start;margin-top:6px}
  .go{min-height:48px;padding:0 30px;font-size:18px}
  .cloud,.sunglow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .card,.count span,.fan img,.safe.pop,.lives svg.break,.down span,.cloud,.slots i.on,#startBtn::after{animation:none}
  html.wipe-in body::after{display:none}
}