/* Candy Andy arcade on the landing system (scroll/design tokens). Labels and counts only. */
.arcade-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}
.arcade-card{display:flex;flex-direction:column;color:var(--text-1);text-decoration:none;box-shadow:var(--e-2);transition:transform .2s var(--ease-out,ease)}
.arcade-card:hover{transform:translateY(-4px)}
.arcade-card img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;background:var(--surface-2)}
.arcade-card div{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5)}
.arcade-card h2{font-size:clamp(24px,2.2vw,32px);line-height:1.05}
.arcade-card span{font-size:14px;color:var(--text-2)}
.arcade-card .go{margin-top:var(--s-2);font-family:var(--font-display);text-transform:uppercase;color:var(--text-1);text-decoration:underline;text-underline-offset:5px}
.arcade-card:hover .go{color:var(--accent)}

.page-top.compact{padding-block:var(--s-3) var(--s-4)}
.page-top.compact .section-heading{margin-top:var(--s-3)}
.page-top.compact .section-heading h1{font-size:clamp(34px,4.4vw,60px)}
.game-band{padding-block:var(--s-4) var(--s-9)}
.game{position:relative;width:min(100%,520px);margin:auto;aspect-ratio:9/16;max-height:calc(100dvh - var(--header-height) - 48px);border-radius:var(--r-lg);overflow:hidden;background:var(--bg);box-shadow:var(--e-3);touch-action:none;user-select:none;-webkit-user-select:none}
.game.wide{width:min(100%,960px);aspect-ratio:4/5}
.game canvas.stage{position:absolute;inset:0;width:100%;height:100%;display:block}
.game .bg-squiggle{position:absolute;inset:0;background:url('/scroll/assets/squiggle-orange.svg?v=2') 0 0 / 240px 240px;opacity:.16}
.game .bg-blue{position:absolute;inset:0;background:var(--accent-2) url('/scroll/assets/squiggle-blue.svg?v=2') 0 0 / 240px 240px}
.hud{position:absolute;inset:var(--s-4) var(--s-4) auto;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-2);pointer-events:none;z-index:3}
.hud .chip{display:inline-flex;align-items:center;gap:var(--s-2);min-height:40px;padding:0 var(--s-4);border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--e-1);font-family:var(--font-display);font-size:20px;text-transform:uppercase}
.hud .chip.hot{background:var(--highlight)}
.lives{display:flex;gap:4px}
.lives i{width:14px;height:14px;border-radius:50%;background:var(--accent)}
.lives i.lost{background:var(--hairline)}
.callout{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;font-family:var(--font-display);font-size:clamp(28px,7vw,44px);text-transform:uppercase;color:var(--text-1);opacity:0;transition:opacity .15s,transform .15s}
.callout.on{opacity:1;transform:translate(-50%,-60%)}
.overlay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:var(--s-5);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.overlay[hidden]{display:none}
.overlay .panel{display:flex;flex-direction:column;align-items:center;gap:var(--s-4);width:min(100%,380px);padding:var(--s-6) var(--s-5);text-align:center;box-shadow:var(--e-3)}
.overlay h2{font-size:clamp(32px,7vw,48px);line-height:1}
.overlay .keys{font-size:13px;color:var(--text-2)}
.overlay .score{font-family:var(--font-display);font-size:56px;line-height:1;color:var(--accent)}
.overlay .ctarow{justify-content:center}
.notice{font-size:14px;color:var(--text-2)}
.game-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3);margin-top:var(--s-5)}

.pads{position:absolute;left:0;right:0;bottom:var(--s-4);z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2);padding:0 var(--s-4)}
.pads button{aspect-ratio:1;border:0;border-radius:50%;font-family:var(--font-display);font-size:22px;color:var(--text-1);box-shadow:var(--e-2);cursor:pointer;touch-action:manipulation}
.pads button:nth-child(1){background:var(--accent);color:var(--accent-ink)}
.pads button:nth-child(2){background:var(--highlight)}
.pads button:nth-child(3){background:var(--accent-2);color:var(--accent-ink)}
.pads button:nth-child(4){background:var(--surface)}
.pads button.hit{transform:scale(.92)}
canvas.lanes{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}

.booth video,.booth img.still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.booth video.mirror{transform:scaleX(-1)}
.booth .frame{position:absolute;inset:0;z-index:2;pointer-events:none;border:14px solid var(--bg);border-radius:var(--r-lg);box-shadow:inset 0 0 0 3px var(--accent)}
.booth .frame img{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:42%;height:auto}
.booth-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-2);margin-top:var(--s-5)}
.pose{min-height:44px;padding:0 var(--s-4);border:1.5px solid var(--text-1);border-radius:var(--r-pill);background:var(--surface);font-family:var(--font-display);text-transform:uppercase;cursor:pointer}
.pose[aria-pressed="true"]{background:var(--highlight)}
.shutter{width:72px;height:72px;border-radius:50%;border:6px solid var(--surface);background:var(--accent);box-shadow:0 0 0 2px var(--accent),var(--e-2);cursor:pointer}
.shutter:active{transform:scale(.94)}
.size-row{display:flex;align-items:center;justify-content:center;gap:var(--s-3);margin-top:var(--s-3);font-size:14px}
.shot-result{display:flex;flex-direction:column;align-items:center;gap:var(--s-4);margin-top:var(--s-6)}
.shot-result img{width:min(100%,420px);border-radius:var(--r-lg);box-shadow:var(--e-3)}

@media(max-width:1000px){.arcade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.game-band{padding-block:var(--s-4) var(--s-7)}.game{max-height:none}.game.wide{aspect-ratio:3/4}.arcade-grid{gap:var(--s-4)}.arcade-card div{padding:var(--s-4)}}
@media(prefers-reduced-motion:reduce){.arcade-card,.arcade-card:hover{transition:none;transform:none}.callout{transition:none}}