/* Soft Arcade: one charcoal + mint system for the feed shell and every game's chrome.
   Tokens only plus a tiny, behaviour-safe base. Gameplay canvases keep their own touch-action. */
:root{
 color-scheme:dark;
 /* Type */
 --sa-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Arial,sans-serif;--sa-font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
 --sa-fs-micro:11px;--sa-fs-caption:12px;--sa-fs-fine:12px;--sa-fs-label:12px;--sa-fs-body:13px;--sa-fs-button:15px;--sa-fs-title:17px;--sa-fs-sheet:26px;
 --sa-fs-hud:clamp(30px,4.6vh,40px);--sa-fs-hero:clamp(82px,12vh,130px);--sa-fs-result:clamp(46px,8vh,64px);
 --sa-weight-light:300;--sa-weight-regular:400;--sa-weight-medium:500;--sa-weight-strong:600;
 --sa-tracking-caps:.16em;--sa-tracking-tight:-.03em;
 /* Colour */
 --sa-bg:#111714;--sa-bg-2:#1b2620;--sa-bg-gradient:linear-gradient(165deg,#111714 0%,#1a2620 55%,#223428 100%);
 --sa-surface:rgba(19,29,23,.66);--sa-surface-strong:rgba(22,32,26,.95);--sa-surface-raised:rgba(34,48,40,.86);
 --sa-line:rgba(205,240,222,.15);--sa-line-strong:rgba(205,240,222,.30);
 --sa-text:#eef7f1;--sa-text-2:rgba(232,246,238,.74);--sa-text-3:rgba(232,246,238,.52);
 --sa-mint:#a3f0cb;--sa-mint-2:#6fdba8;--sa-mint-ink:#0e2218;--sa-mint-soft:rgba(163,240,203,.15);--sa-mint-glow:rgba(111,219,168,.28);
 --sa-mint-fill:linear-gradient(150deg,#b5f5d6 0%,#86e6b9 55%,#6fdba8 100%);
 --sa-gold:#f1d690;--sa-warn:#ffd9a0;--sa-danger:#ff9f8f;
 --sa-scrim:rgba(6,12,9,.52);
 /* Material */
 --sa-blur:blur(22px) saturate(140%);--sa-blur-strong:blur(34px) saturate(140%);
 /* Liquid glass: one recipe for every floating control (top bar, tabs, balance, rail, sheets, toasts,
    the PvP lobby bar). A thin tinted body, a strong backdrop blur, a bright top rim and a soft drop.
    Only these few layers blur: every extra blurred layer over a WebGL game costs frames. */
 --sa-glass:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 48%,rgba(255,255,255,.02) 100%),rgba(18,26,22,.34);
 --sa-glass-strong:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 30%),rgba(20,28,24,.74);
 --sa-glass-press:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.10) 100%),rgba(18,26,22,.30);
 --sa-glass-line:rgba(255,255,255,.20);
 --sa-glass-rim:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 0 0 .5px rgba(255,255,255,.06);
 --sa-glass-shadow:0 8px 24px rgba(0,0,0,.26),0 1px 3px rgba(0,0,0,.18);
 --sa-glass-blur:blur(18px) saturate(185%) brightness(1.06);
 --sa-glass-blur-strong:blur(30px) saturate(190%);
 --sa-highlight:inset 0 1px 0 rgba(236,255,245,.14);
 --sa-shadow:0 10px 30px rgba(0,0,0,.32);--sa-shadow-lg:0 20px 60px rgba(0,0,0,.45);
 --sa-text-shadow:0 1px 14px rgba(6,16,11,.55);
 /* Shape and size */
 --sa-radius-s:10px;--sa-radius-m:14px;--sa-radius-l:24px;--sa-radius-pill:999px;
 --sa-control:44px;--sa-primary:52px;--sa-primary-width:min(310px,calc(100vw - 48px));
 --sa-space-1:4px;--sa-space-2:8px;--sa-space-3:12px;--sa-space-4:16px;--sa-space-5:20px;--sa-space-6:24px;
 /* Safe areas: every edge-anchored control uses these. */
 --sa-gutter:16px;
 --sa-safe-top:max(14px,env(safe-area-inset-top));
 --sa-safe-bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));
 --sa-safe-left:max(var(--sa-gutter),calc(env(safe-area-inset-left) + 12px));
 --sa-safe-right:max(var(--sa-gutter),calc(env(safe-area-inset-right) + 12px));
 /* Embedded games keep their HUD below the feed's top pills. */
 --sa-chrome-clearance:calc(var(--sa-safe-top) + var(--sa-control) + 18px);
 /* Candy Arcade (docs/QUALITY_BAR.md §1): result cards over the bright game frame. */
 --ca-ink:#1E2140;--ca-sun:#FFD23F;--ca-alert:#FF5A4E;--ca-mint:#3FE0A6;--ca-pink:#FF4FA3;--ca-sky:#5EC8FF;--ca-card:#FFF8E8;
 --ca-font-display:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",-apple-system,system-ui,sans-serif;
 /* Motion */
 --sa-ease:cubic-bezier(.2,.8,.2,1);--sa-ease-out:cubic-bezier(.22,1,.36,1);--sa-spring:cubic-bezier(.32,1.25,.5,1);--sa-fast:.14s;--sa-medium:.22s;--sa-slow:.4s;
}
@media(min-width:700px){:root{--sa-gutter:28px;--sa-safe-top:max(22px,env(safe-area-inset-top));--sa-safe-bottom:max(28px,calc(env(safe-area-inset-bottom) + 12px))}}
@media(orientation:landscape) and (max-height:500px){:root{--sa-safe-top:max(10px,env(safe-area-inset-top));--sa-safe-bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));--sa-primary:48px}}
@media(prefers-reduced-motion:reduce){:root{--sa-fast:0s;--sa-medium:0s;--sa-slow:0s}}
/* Taps act immediately on touch screens: no double-tap zoom wait, no grey flash. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,input,label,[role=button]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* Candy Arcade result moments, shared by the PvP card and the solo result sheets: a pop in, confetti on a win, a shake on a loss. */
/* Individual translate/scale/rotate, so a card's own transform (centring) is kept. */
@keyframes ca-pop{0%{translate:0 24px;scale:.86;opacity:0}60%{translate:0 -4px;scale:1.04;opacity:1}100%{translate:0 0;scale:1}}
@keyframes ca-shake{0%,100%{translate:0 0;rotate:0deg}20%{translate:-10px 0;rotate:-1deg}40%{translate:9px 0;rotate:1deg}60%{translate:-6px 0;rotate:0deg}80%{translate:4px 0}}
@keyframes ca-confetti{0%{transform:translateY(-70px);opacity:0}12%{opacity:1}100%{transform:translateY(190px) rotate(8deg);opacity:0}}
@media(prefers-reduced-motion:reduce){:root{--ca-motion:none}}