/* =====================================================================
   MATHKIDOO GAME ARENA THEME - "CANDY ARCADE"  (v1, 22 Oct 2026)
   The founder-approved Direction A, lifted out of dirA-candy-arcade.html
   as one reusable stylesheet. Any game links this file and gets the look.

   HOW A GAME OPTS IN
     1. Load the fonts (Baloo 2 display, Nunito body), then this file.
     2. Put class "ca" on <body>.  Nothing here styles a bare element, so
        linking the file restyles nothing until body has class ca.
     3. Build the screen from the component classes below (all start
        with "ca-"). Variant words (blue, gold, ghost, big, sm ...) are
        bare but only work when combined with a ca- base class.
     4. A game keeps its own small <style> for board geometry only
        (grid, tile positions, container queries). Colour, type, depth
        and motion come from here. A page never invents a colour.

   SECTIONS
     1 tokens            6 header            11 game screen (stats, meter,
     2 base + wrap       7 challenge marquee     field, board, float, banner)
     3 type              8 mode pills         12 win moment + overlay
     4 candy-gloss ball  9 game tile          13 laptop layout (>= 900px)
     5 chunky button    10 rail (streak,      14 motion off
       card + chip          collection)

   Comment rule for this file: never write a star next to a slash inside
   a comment. That closes the comment and the browser drops the next rule.
   ===================================================================== */


/* ------------------------------------------------------------ 1. TOKENS
   Brand palette unchanged. Every ca- component only consumes these. */
:root{
  /* ground + ink */
  --ca-ground:#FFFDF6;        /* the cream Field */
  --ca-ground-2:#FFF4CF;      /* warm cream band (stripes, dimples, tint cards) */
  --ca-surface:#FFFFFF;
  --ca-ink:#0B1440;           /* all main text, 17.4 to 1 on cream */
  --ca-ink-soft:#3E4A7A;      /* supporting text, 8.1 to 1 on cream */
  --ca-navy:#12266F;

  /* the five candy families: body, lit (top), deep (bottom + press) */
  --ca-purple:#7139D3; --ca-purple-lit:#A077F5; --ca-purple-deep:#4A1F9C;
  --ca-blue:#3B7CFF;   --ca-blue-lit:#86AEFF;   --ca-blue-deep:#1E4FC2;
  --ca-teal:#23C7A0;   --ca-teal-lit:#7DF2D4;   --ca-teal-deep:#118C70;
  --ca-green:#10C05D;  --ca-green-lit:#66E79A;  --ca-green-deep:#0A8A42;
  --ca-gold:#FFC61A;   --ca-gold-lit:#FFF0B3;   --ca-gold-deep:#D99F00;
  --ca-mint:#9BFFE4;

  /* soft tints for chips, pills and rims */
  --ca-tint-purple:#EFE8FB; --ca-tint-purple-2:#E4DAF6;
  --ca-tint-gold:#FFF1BF;   --ca-tint-teal:#D4F7EE;
  --ca-tint-blue:#DCE7FF;   --ca-tint-green:#D6F7E3;

  /* the brand ribbon: the ONE decorative stripe (purple > blue > teal > green) */
  --ca-ribbon:linear-gradient(90deg,#7139D3 0%,#3B7CFF 34%,#23C7A0 68%,#10C05D 100%);
  --ca-ribbon-soft:linear-gradient(90deg,#E9DDFB,#DCE7FF 34%,#D4F7EE 68%,#D6F7E3);

  /* type: Baloo 2 display, Nunito body. Nothing smaller than 14px. */
  --ca-font-display:'Baloo 2','Segoe UI',system-ui,sans-serif;
  --ca-font-body:'Nunito','Segoe UI',system-ui,sans-serif;
  --ca-fs-hero:clamp(2.25rem,7vw,3.5rem);     /* 36 > 56 */
  --ca-fs-h1:clamp(1.75rem,5vw,2.5rem);       /* 28 > 40 */
  --ca-fs-h2:clamp(1.25rem,3.4vw,1.5rem);     /* 20 > 24 */
  --ca-fs-body:1.0625rem;                     /* 17 */
  --ca-fs-small:0.875rem;                     /* 14, the floor */
  --ca-fs-score:clamp(2.5rem,9vw,4rem);       /* the big number */

  /* shape, depth, treatment */
  --ca-r-sm:14px; --ca-r-md:22px; --ca-r-lg:30px; --ca-r-pill:999px;
  --ca-rim:0 0 0 3px #FFFFFF;                                  /* the sticker rim */
  --ca-shadow-card:0 2px 0 rgba(11,20,64,.04),0 14px 30px -14px rgba(18,38,111,.22);
  --ca-shadow-float:0 28px 50px -24px rgba(18,38,111,.35);
  --ca-press:5px;                                              /* chunky button depth */
  --ca-ball-gloss:radial-gradient(circle at 30% 22%,rgba(255,255,255,.95),rgba(255,255,255,0) 30%),
                  radial-gradient(circle at 50% 118%,rgba(255,255,255,.35),rgba(255,255,255,0) 42%);
  --ca-ball-shade:inset 0 -7px 12px rgba(0,0,0,.20),inset 0 2px 2px rgba(255,255,255,.55);

  /* motion */
  --ca-dur-1:140ms; --ca-dur-2:260ms; --ca-dur-3:520ms;
  --ca-ease-out:cubic-bezier(.2,.8,.2,1);
  --ca-spring:cubic-bezier(.34,1.56,.64,1);

  /* targets: 48px minimum tap, 56px button */
  --ca-target:48px; --ca-btn-h:56px;
  --ca-wrap:1180px;
}


/* ------------------------------------------------------------ 2. BASE
   body.ca paints the cream Field: three soft colour pools plus a 22px dot
   grid. Scoped to .ca so a page that has not opted in is untouched. */
.ca, .ca *, .ca *::before, .ca *::after{ box-sizing:border-box; }
html:has(> body.ca){ -webkit-text-size-adjust:100%; }
body.ca{
  margin:0; min-height:100dvh; color:var(--ca-ink);
  font-family:var(--ca-font-body); font-size:var(--ca-fs-body); line-height:1.5; font-weight:600;
  background-color:var(--ca-ground);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(113,57,211,.08), transparent 32%),
    radial-gradient(circle at 88% 30%, rgba(35,199,160,.10), transparent 30%),
    radial-gradient(circle at 20% 80%, rgba(59,124,255,.07), transparent 32%),
    radial-gradient(rgba(18,38,111,.06) 1.2px, transparent 1.3px);
  background-size:auto,auto,auto,22px 22px;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
.ca button{ font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ca a{ -webkit-tap-highlight-color:transparent; }
.ca :focus-visible{ outline:3px solid var(--ca-navy); outline-offset:3px; }
.ca-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ca-wrap{ width:100%; max-width:var(--ca-wrap); margin-inline:auto; padding-inline:clamp(16px,3vw,32px); }
.ca-page{ padding-block:16px 40px; padding-bottom:max(40px, env(safe-area-inset-bottom)); }
.ca-foot{ text-align:center; color:var(--ca-ink-soft); font-size:var(--ca-fs-small); margin-top:28px; }


/* ------------------------------------------------------------ 3. TYPE
   ca-d = hero display, ca-h1, ca-h2, ca-eyebrow = small caps label,
   ca-soft = supporting colour, ca-num = tabular digits, ca-grad-text =
   ribbon-filled words (use sparingly, one phrase per screen). */
.ca-d, .ca-h1, .ca-h2{ font-family:var(--ca-font-display); font-weight:800; line-height:1.05; margin:0; color:var(--ca-ink); letter-spacing:-.005em; }
.ca-d{ font-size:var(--ca-fs-hero); } .ca-h1{ font-size:var(--ca-fs-h1); } .ca-h2{ font-size:var(--ca-fs-h2); font-weight:700; }
.ca-eyebrow{ font-family:var(--ca-font-display); font-weight:700; font-size:var(--ca-fs-small); letter-spacing:.08em; text-transform:uppercase; color:var(--ca-purple-deep); margin:0; }
.ca-soft{ color:var(--ca-ink-soft); }
.ca-small{ font-size:var(--ca-fs-small); }
.ca-num{ font-family:var(--ca-font-display); font-weight:800; font-variant-numeric:tabular-nums; }
.ca-grad-text{ background:var(--ca-ribbon); -webkit-background-clip:text; background-clip:text; color:transparent; }


/* ------------------------------------------------------------ 4. THE CANDY-GLOSS BALL
   <i class="ca-ball blue">40</i>
   Recipe: gloss highlight (top-left) + under-glow (bottom) over a three-stop
   radial body (lit > body > deep), inner shade, 3px white sticker rim, soft
   coloured drop shadow. Size with --sz (default 44px) or sm / lg / xl.
   Families: (none) purple, blue, teal, green, gold.
   States:  gold  = the prize ball (extra gold halo)
            sel   = picked (gold ring)
            lit   = freshly made (white flash ring, pairs with pop)
            off   = empty slot (grey, no colour)
            pop   = spawn or merge bounce   drop = fall-in from above
   hue    = value-ladder games: set --h (0-360) from script; the ball derives
            lit / body / deep from that hue. Add "lite" for hues 40-170
            (yellow, lime, green) so the number turns dark ink for contrast.
   Digits: d3 and d4 shrink the number for 3- and 4-digit values.
   no-rim = drops the white sticker rim (use on dark grounds e.g. marquee). */
.ca-ball{ --c:var(--ca-purple); --lit:var(--ca-purple-lit); --deep:var(--ca-purple-deep); --sz:44px; --ink:#fff;
  position:relative; display:inline-grid; place-items:center; width:var(--sz); height:var(--sz); border-radius:50%; flex:none;
  color:var(--ink); font-family:var(--ca-font-display); font-weight:800; font-size:max(14px, calc(var(--sz) * .42)); line-height:1; font-variant-numeric:tabular-nums; font-style:normal;
  background-image:var(--ca-ball-gloss), radial-gradient(circle at 50% 58%, var(--lit) 0%, var(--c) 52%, var(--deep) 100%);
  box-shadow:var(--ca-ball-shade), var(--ca-rim), 0 8px 16px -6px color-mix(in srgb, var(--deep) 70%, transparent);
  text-shadow:0 1px 0 rgba(0,0,0,.18); user-select:none; -webkit-user-select:none; }
.ca-ball.blue { --c:var(--ca-blue);  --lit:var(--ca-blue-lit);  --deep:var(--ca-blue-deep); }
.ca-ball.teal { --c:var(--ca-teal);  --lit:var(--ca-teal-lit);  --deep:var(--ca-teal-deep); --ink:var(--ca-ink); text-shadow:none; }
.ca-ball.green{ --c:var(--ca-green); --lit:var(--ca-green-lit); --deep:var(--ca-green-deep); --ink:var(--ca-ink); text-shadow:none; }
.ca-ball.gold { --c:var(--ca-gold);  --lit:var(--ca-gold-lit);  --deep:var(--ca-gold-deep);  --ink:var(--ca-ink); text-shadow:none;
  box-shadow:var(--ca-ball-shade), var(--ca-rim), 0 0 0 6px rgba(255,198,26,.28), 0 10px 22px -6px rgba(217,159,0,.8); }
.ca-ball.hue  { --h:263; --c:hsl(var(--h) 74% 54%); --lit:hsl(var(--h) 86% 78%); --deep:hsl(var(--h) 72% 32%); text-shadow:0 1px 2px rgba(0,0,0,.35); }
.ca-ball.hue.lite{ --ink:var(--ca-ink); text-shadow:none; }
.ca-ball.off  { --c:#ECEAF1; --lit:#F8F6FC; --deep:#CFC9DD; --ink:var(--ca-ink-soft); text-shadow:none; box-shadow:var(--ca-ball-shade), var(--ca-rim); }
.ca-ball.d3{ font-size:max(14px, calc(var(--sz) * .34)); } .ca-ball.d4{ font-size:max(14px, calc(var(--sz) * .27)); }
.ca-ball.sm{ --sz:30px; } .ca-ball.lg{ --sz:64px; } .ca-ball.xl{ --sz:92px; }
.ca-ball.no-rim{ box-shadow:var(--ca-ball-shade), 0 6px 12px -4px color-mix(in srgb, var(--deep) 70%, transparent); }
.ca-ball.sel{ transform:scale(1.08); box-shadow:var(--ca-ball-shade), 0 0 0 3px #fff, 0 0 0 7px var(--ca-gold), 0 10px 20px -6px rgba(217,159,0,.8); }
.ca-ball.lit{ box-shadow:var(--ca-ball-shade), 0 0 0 3px #fff, 0 0 0 7px rgba(255,255,255,.55), 0 10px 22px -6px color-mix(in srgb, var(--deep) 80%, transparent); }
.ca-ball.pop{ animation:ca-pop var(--ca-dur-3) var(--ca-spring); }
.ca-ball.drop{ animation:ca-drop 420ms var(--ca-spring); }
.ca-ball > svg{ width:50%; height:50%; }
@keyframes ca-pop{ 0%{transform:scale(.7);} 28%{transform:scale(1.26,.8); filter:brightness(1.35);} 52%{transform:scale(.88,1.16);} 76%{transform:scale(1.06,.96);} 100%{transform:scale(1); filter:none;} }
@keyframes ca-drop{ 0%{transform:translateY(-45%) scale(.2); opacity:0;} 55%{transform:translateY(4%) scale(1.12,.9); opacity:1;} 100%{transform:none; opacity:1;} }


/* ------------------------------------------------------------ 5. CHUNKY 3-D BUTTON, STICKER CARD, CHIP
   <button class="ca-btn gold big"><span class="ca-shine"></span>Play now</button>
   Button: pill, lit-to-body vertical gradient, 5px solid "deep" ledge
   underneath; :active sinks it onto the ledge. Primary = gold (dark ink).
   Also: (none) purple, teal, ghost (white, purple outline = secondary),
   big (64px), icon (48px round, svg inside). Add .ca-shine inside a gold
   button for the slow passing glint. Links work the same: <a class="ca-btn">. */
.ca-btn{ --c:var(--ca-purple); --lit:var(--ca-purple-lit); --deep:var(--ca-purple-deep); --ink:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:var(--ca-btn-h); min-width:var(--ca-target); padding:0 26px;
  border:0; border-radius:var(--ca-r-pill); color:var(--ink); font-family:var(--ca-font-display); font-weight:800; font-size:1.125rem; line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer;
  background:linear-gradient(180deg, var(--lit) 0%, var(--c) 55%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.08), 0 var(--ca-press) 0 var(--deep), 0 14px 24px -10px color-mix(in srgb, var(--c) 70%, transparent);
  margin-bottom:var(--ca-press); position:relative; overflow:hidden;
  transition:transform var(--ca-dur-1) var(--ca-ease-out), box-shadow var(--ca-dur-1) var(--ca-ease-out), filter var(--ca-dur-2); }
.ca-btn:hover{ filter:brightness(1.05); }
.ca-btn:active{ transform:translateY(var(--ca-press)); box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 0 0 var(--deep); }
.ca-btn[disabled], .ca-btn[aria-disabled="true"]{ filter:saturate(.3) opacity(.6); cursor:default; }
.ca-btn.gold{ --c:var(--ca-gold); --lit:var(--ca-gold-lit); --deep:var(--ca-gold-deep); --ink:var(--ca-ink); }
.ca-btn.teal{ --c:var(--ca-teal); --lit:var(--ca-teal-lit); --deep:var(--ca-teal-deep); --ink:var(--ca-ink); }
.ca-btn.blue{ --c:var(--ca-blue); --lit:var(--ca-blue-lit); --deep:var(--ca-blue-deep); }
.ca-btn.green{ --c:var(--ca-green); --lit:var(--ca-green-lit); --deep:var(--ca-green-deep); --ink:var(--ca-ink); }
.ca-btn.ghost{ background:var(--ca-surface); color:var(--ca-purple-deep); box-shadow:inset 0 0 0 2.5px var(--ca-purple), 0 4px 0 #D3C9EA; --ca-press:4px; }
.ca-btn.ghost:active{ box-shadow:inset 0 0 0 2.5px var(--ca-purple), 0 0 0 #D3C9EA; }
.ca-btn.ghost[aria-pressed="true"]{ background:var(--ca-tint-purple); }
.ca-btn.big{ min-height:64px; font-size:1.375rem; padding:0 34px; }
.ca-btn.icon{ width:var(--ca-target); height:var(--ca-target); min-height:0; padding:0; border-radius:50%; flex:none; }
.ca-btn.icon svg{ width:22px; height:22px; }
.ca-btn.wide{ width:100%; }
.ca-btn > svg{ flex:none; }
.ca-shine{ position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%); transform:translateX(-120%); pointer-events:none; }
.ca-btn.gold .ca-shine{ animation:ca-shine 3.6s var(--ca-ease-out) infinite 1.2s; }
@keyframes ca-shine{ 0%{transform:translateX(-120%);} 35%,100%{transform:translateX(120%);} }

/* Sticker card: white, 30px radius, 3px white rim + soft navy shadow.
   .tint = warm cream version for secondary cards. .halo = purple halo
   (use around the play field). */
.ca-card{ background:var(--ca-surface); border-radius:var(--ca-r-lg); padding:clamp(16px,2.6vw,24px); box-shadow:var(--ca-rim), var(--ca-shadow-card); position:relative; }
.ca-card.tint{ background:var(--ca-ground-2); }
.ca-card.halo{ box-shadow:var(--ca-rim), var(--ca-shadow-card), 0 0 0 6px rgba(113,57,211,.08); }

/* Chip: small label pill. Colours: (none) purple, gold, teal, blue, green,
   navy (solid). <span class="ca-chip gold"><span class="dot"></span>Quick</span> */
.ca-chip{ display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:2px 12px; border-radius:var(--ca-r-pill); background:var(--ca-tint-purple); color:var(--ca-purple-deep);
  font-family:var(--ca-font-display); font-weight:700; font-size:var(--ca-fs-small); line-height:1.2; white-space:nowrap; }
.ca-chip.gold{ background:var(--ca-tint-gold); color:#6B4400; } .ca-chip.teal{ background:var(--ca-tint-teal); color:#0B5E4B; }
.ca-chip.blue{ background:var(--ca-tint-blue); color:#1E4FC2; } .ca-chip.green{ background:var(--ca-tint-green); color:#0A6B35; }
.ca-chip.navy{ background:var(--ca-navy); color:#fff; }
.ca-chip .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; }


/* ------------------------------------------------------------ 6. HEADER (every arena screen)
   <header class="ca-top"><div class="ca-wrap ca-top-in">
     <a class="ca-brand" href="arena-home.html"><img src="mk-mark.png" alt="">
       <span class="name">Game Arena<small>MathKidoo</small></span></a>
     <span class="ca-sp"></span>
     <span class="ca-stars">(star svg)<span class="ca-num">128</span></span>
     <span class="ca-player"><i class="ca-ball teal no-rim" style="--sz:40px">A</i>
       <span class="name">Aarav<small>Class 3</small></span></span>
   </div></header>
   Sticky, frosted white, the 6px brand ribbon along the top edge.
   Under 480px the player name hides and the avatar ball stays. */
.ca-top{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(18,38,111,.08), 0 10px 24px -18px rgba(18,38,111,.3); }
.ca-top::before{ content:""; display:block; height:6px; background:var(--ca-ribbon); }
.ca-top-in{ display:flex; align-items:center; gap:12px; min-height:64px; padding-block:8px; }
.ca-brand{ display:inline-flex; align-items:center; gap:10px; min-height:var(--ca-target); text-decoration:none; color:var(--ca-ink); border-radius:var(--ca-r-sm); }
.ca-brand img, .ca-brand svg{ width:40px; height:40px; display:block; flex:none; filter:drop-shadow(0 3px 4px rgba(18,38,111,.25)); }
.ca-brand .name{ font-family:var(--ca-font-display); font-weight:800; font-size:1.25rem; line-height:1; }
.ca-brand .name small{ display:block; font-size:.875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ca-purple); margin-top:2px; }
.ca-sp{ flex:1; }
.ca-player{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:var(--ca-r-pill); background:var(--ca-surface); box-shadow:inset 0 0 0 2px var(--ca-tint-purple), 0 3px 0 var(--ca-tint-purple); min-height:var(--ca-target); }
.ca-player .name{ font-family:var(--ca-font-display); font-weight:800; font-size:1rem; line-height:1; }
.ca-player .name small{ display:block; font-family:var(--ca-font-body); font-weight:700; font-size:.875rem; color:var(--ca-ink-soft); margin-top:2px; }
.ca-stars{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px 4px 6px; border-radius:var(--ca-r-pill); background:var(--ca-tint-gold); font-family:var(--ca-font-display); font-weight:800; min-height:40px; }
.ca-stars svg{ width:22px; height:22px; }
@media (max-width:479px){
  .ca-player{ padding:4px; }
  .ca-player .name{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}


/* ------------------------------------------------------------ 7. CHALLENGE MARQUEE (the hub hero)
   <div class="ca-marquee">
     <p class="ca-eyebrow">Today's challenge</p>
     <h1 class="ca-d">Hundred Merge<br><em>beat 1,200</em></h1>
     <p>one line</p>
     <div class="row"><a class="ca-btn gold big">...</a><span class="timer">6h left</span></div>
     <div class="ca-cluster"><i class="ca-ball b1 blue">40</i> ... b4</div>
     <svg class="ca-kidoo">mascot</svg>
   </div>
   Purple-to-blue gradient, white text, gold <em>. Phone: two balls bob
   behind the text at the right, mascot small top-right. Laptop: the ball
   cluster (all four) and the mascot sit beside the text. */
.ca-marquee{ position:relative; overflow:hidden; border-radius:var(--ca-r-lg); padding:clamp(22px,4vw,40px); color:#fff; isolation:isolate;
  background:linear-gradient(118deg, #5A24C4 0%, #7139D3 32%, #3B7CFF 100%);
  box-shadow:var(--ca-rim), var(--ca-shadow-float), 0 0 0 6px rgba(113,57,211,.12); }
.ca-marquee::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:radial-gradient(circle at 85% 10%, rgba(155,255,228,.5), transparent 36%), radial-gradient(circle at 10% 100%, rgba(255,198,26,.35), transparent 40%); }
.ca-marquee .ca-eyebrow{ color:var(--ca-gold); display:inline-flex; align-items:center; gap:8px; }
.ca-marquee .ca-eyebrow::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--ca-gold); box-shadow:0 0 0 4px rgba(255,198,26,.3); }
.ca-marquee .ca-d{ color:#fff; margin-top:8px; text-shadow:0 2px 0 rgba(0,0,0,.12); }
.ca-marquee .ca-d em{ font-style:normal; color:var(--ca-gold); }
.ca-marquee p{ margin:10px 0 0; max-width:24ch; color:#F1ECFF; font-weight:600; }
.ca-marquee .row{ display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center; margin-top:20px; }
.ca-marquee .timer{ display:inline-flex; align-items:center; gap:8px; padding:0 14px; min-height:44px; border-radius:var(--ca-r-pill); background:rgba(11,20,64,.35); color:#fff; font-family:var(--ca-font-display); font-weight:700; }
.ca-marquee .timer svg{ width:18px; height:18px; }
.ca-marquee .ca-btn:focus-visible, .ca-marquee a:focus-visible{ outline-color:#fff; }
.ca-cluster{ position:absolute; right:-14px; top:92px; width:120px; height:120px; pointer-events:none; z-index:-1; opacity:.95; }
.ca-cluster .ca-ball{ position:absolute; box-shadow:var(--ca-ball-shade), 0 0 0 3px rgba(255,255,255,.9), 0 14px 24px -8px rgba(11,20,64,.5); animation:ca-bob 4s ease-in-out infinite; }
.ca-cluster .b2, .ca-cluster .b4{ display:none; }
.ca-cluster .b1{ left:0; top:62px; --sz:44px; } .ca-cluster .b3{ left:34px; top:0; --sz:64px; }
.ca-cluster .b2{ left:70px; top:0; --sz:52px; animation-delay:-1s; } .ca-cluster .b4{ left:54px; top:86px; --sz:48px; animation-delay:-.6s; }
.ca-cluster .b3{ animation-delay:-2.2s; }
@keyframes ca-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.ca-kidoo{ width:96px; height:96px; filter:drop-shadow(0 10px 14px rgba(11,20,64,.35)); }
.ca-marquee .ca-kidoo{ position:absolute; right:12px; top:12px; width:64px; height:64px; }


/* ------------------------------------------------------------ 8. MODE PILLS
   <div class="ca-modes" role="group"><button class="ca-mode" aria-pressed="true">All</button>
     <button class="ca-mode" aria-pressed="false"><i class="ca-ball sm gold"></i>Quick</button></div>
   A horizontal scroll row on phone (no scrollbar). The pressed pill is navy. */
.ca-modes{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px; scrollbar-width:none; }
.ca-modes::-webkit-scrollbar{ display:none; }
.ca-mode{ flex:none; min-height:var(--ca-target); padding:0 18px; border:0; border-radius:var(--ca-r-pill); background:var(--ca-surface); color:var(--ca-navy);
  font-family:var(--ca-font-display); font-weight:700; font-size:1rem; box-shadow:inset 0 0 0 2px var(--ca-tint-purple-2), 0 3px 0 var(--ca-tint-purple-2); margin-bottom:3px; display:inline-flex; align-items:center; gap:8px;
  transition:background var(--ca-dur-1), color var(--ca-dur-1); }
.ca-mode[aria-pressed="true"]{ background:var(--ca-navy); color:#fff; box-shadow:0 3px 0 #061033; }
.ca-mode .ca-ball.sm{ --sz:22px; font-size:0; }


/* ------------------------------------------------------------ 9. GAME TILE
   <a class="ca-tile blue new" href="game.html">
     <span class="art"><i class="ca-ball green">7</i><i class="ca-ball teal">49</i><i class="ca-ball blue">97</i></span>
     <span class="body"><span class="ca-h2">Numberdex</span><span class="desc">one line</span>
       <span class="meta"><span class="ca-chip teal"><span class="dot"></span>Daily</span>
                          <span class="best">Best <b>1,180</b></span></span></span>
     <span class="go">(chevron svg)</span>
   </a>
   Family word sets the art gradient: (none) purple, blue, teal, green, gold.
   The art holds up to three balls (positions fixed below). "new" adds the
   tilted NEW sticker. Phone: art left 96px, text right. Laptop: art on top.
   .ca-tiles is the grid wrapper (1 column phone, 3 across at 900px). */
.ca-tiles{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
.ca-tile{ --c:var(--ca-purple); --lit:var(--ca-purple-lit); --deep:var(--ca-purple-deep);
  display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; padding:12px 14px 12px 12px; min-height:120px;
  background:var(--ca-surface); border-radius:var(--ca-r-md); box-shadow:var(--ca-rim), var(--ca-shadow-card); text-decoration:none; color:inherit; position:relative;
  transition:transform var(--ca-dur-2) var(--ca-spring), box-shadow var(--ca-dur-2); }
.ca-tile:hover{ transform:translateY(-3px); box-shadow:var(--ca-rim), 0 22px 40px -18px color-mix(in srgb, var(--c) 60%, transparent); }
.ca-tile:active{ transform:translateY(0) scale(.99); }
.ca-tile.blue{ --c:var(--ca-blue); --lit:var(--ca-blue-lit); --deep:var(--ca-blue-deep); }
.ca-tile.teal{ --c:var(--ca-teal); --lit:var(--ca-teal-lit); --deep:var(--ca-teal-deep); }
.ca-tile.green{ --c:var(--ca-green); --lit:var(--ca-green-lit); --deep:var(--ca-green-deep); }
.ca-tile.gold{ --c:var(--ca-gold); --lit:var(--ca-gold-lit); --deep:var(--ca-gold-deep); }
.ca-tile .art{ position:relative; width:96px; height:96px; border-radius:20px; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 40%), linear-gradient(160deg, var(--lit), var(--c) 60%, var(--deep));
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.4); }
.ca-tile .art .ca-ball{ --sz:34px; box-shadow:var(--ca-ball-shade), 0 0 0 2px rgba(255,255,255,.95), 0 6px 10px -4px rgba(0,0,0,.4); position:absolute; }
.ca-tile .art .ca-ball:nth-child(1){ left:12px; top:14px; } .ca-tile .art .ca-ball:nth-child(2){ right:12px; top:22px; --sz:30px; } .ca-tile .art .ca-ball:nth-child(3){ left:30px; bottom:10px; --sz:40px; }
.ca-tile .body{ min-width:0; padding-right:36px; }
.ca-tile .ca-h2{ display:block; font-size:1.25rem; }
.ca-tile .desc{ display:block; margin:2px 0 8px; font-size:var(--ca-fs-small); color:var(--ca-ink-soft); font-weight:600; }
.ca-tile .meta{ display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; }
.ca-tile .best{ font-family:var(--ca-font-display); font-weight:700; font-size:var(--ca-fs-small); color:var(--ca-ink-soft); display:inline-flex; align-items:center; gap:4px; }
.ca-tile .best b{ color:var(--ca-ink); }
.ca-tile .go{ position:absolute; right:12px; top:50%; margin-top:-18px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--ca-ground-2); color:var(--ca-navy); }
.ca-tile .go svg{ width:18px; height:18px; }
.ca-tile.new::after{ content:"NEW"; position:absolute; left:-6px; top:-8px; padding:2px 10px; border-radius:var(--ca-r-pill); background:var(--ca-gold); color:var(--ca-ink);
  font-family:var(--ca-font-display); font-weight:800; font-size:.875rem; letter-spacing:.08em; box-shadow:0 0 0 3px #fff, 0 3px 0 var(--ca-gold-deep); transform:rotate(-6deg); }
.ca-tile.today::after{ content:"TODAY"; position:absolute; left:-6px; top:-8px; padding:2px 10px; border-radius:var(--ca-r-pill); background:var(--ca-gold); color:var(--ca-ink);
  font-family:var(--ca-font-display); font-weight:800; font-size:.875rem; letter-spacing:.08em; box-shadow:0 0 0 3px #fff, 0 3px 0 var(--ca-gold-deep); transform:rotate(-6deg); }
.ca-tile[hidden]{ display:none; }


/* ------------------------------------------------------------ 10. RAIL (streak, collection, bests)
   <aside class="ca-rail"><div class="ca-card">...streak...</div> ...</aside>
   Streak ring = conic green progress with the day count inside; .ca-days
   = the seven day dots (on = played, now = today). .ca-collect = a row of
   small balls. .ca-bests = list rows with a ball, a name and a value. */
.ca-rail{ display:grid; gap:16px; }
.ca-streak{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; }
.ca-streak .ring{ --p:57%; width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--ca-green) 0 var(--p), #E6F7EC var(--p) 100%); box-shadow:var(--ca-rim), 0 6px 14px -6px rgba(16,192,93,.5); }
.ca-streak .ring i{ width:54px; height:54px; border-radius:50%; background:var(--ca-surface); display:grid; place-items:center; font-family:var(--ca-font-display); font-weight:800; font-size:1.5rem; font-style:normal; }
.ca-days{ display:flex; gap:6px; margin-top:8px; }
.ca-days i{ width:26px; height:26px; border-radius:50%; background:#E6F7EC; display:grid; place-items:center; font-size:.875rem; font-weight:800; font-style:normal; color:var(--ca-ink-soft); }
.ca-days i.on{ background:var(--ca-green); color:var(--ca-ink); box-shadow:inset 0 -3px 0 rgba(0,0,0,.12); }
.ca-days i.now{ background:var(--ca-gold); color:var(--ca-ink); box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--ca-gold); }
.ca-collect{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.ca-bests{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.ca-bests li{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--ca-r-sm); background:var(--ca-ground-2); }
.ca-bests li .ca-ball{ --sz:30px; font-size:.875rem; }
.ca-bests li span{ flex:1; font-weight:700; } .ca-bests li b{ font-family:var(--ca-font-display); font-weight:800; }
.ca-hub{ display:grid; gap:20px; grid-template-columns:minmax(0,1fr); }
.ca-hub-main{ display:grid; gap:20px; min-width:0; }


/* ------------------------------------------------------------ 11. GAME SCREEN
   <div class="ca-game"><div class="main"> gtop, stats, meter, field, controls </div>
                        <aside class="side"> help cards </aside></div>
   gtop   = the title row: back (ca-btn ghost icon), ca-h1 title with a chip,
            sound / pause icons.
   stats  = three sticker stat boxes (.score purple, .best soft).
   meter  = ribbon progress bar + a prize ball at its end.
   field  = the white sticker card with a purple halo that holds the board.
   board / cell = a simple square grid of cream dimples (set --n). Games
            that position balls by script keep their own geometry and use
            the .ca-cell look on the dimples only.
   float  = a floating "+30" label; banner = the big tilted shout
            ("60 + 40 = 100!"); add .on to play it. */
.ca-game{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
.ca-game .main{ min-width:0; display:grid; gap:14px; }
.ca-game .side{ display:grid; gap:16px; min-width:0; }
.ca-gtop{ display:flex; align-items:center; gap:10px; }
.ca-gtop .ca-h1{ flex:1; min-width:0; font-size:var(--ca-fs-h2); display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.ca-gtop .ca-h1 .ca-chip{ font-size:.875rem; }
.ca-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ca-stat{ background:var(--ca-surface); border-radius:var(--ca-r-md); padding:10px 8px 8px; text-align:center; box-shadow:var(--ca-rim), var(--ca-shadow-card); min-width:0; }
.ca-stat .lbl{ font-family:var(--ca-font-display); font-weight:700; font-size:.875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ca-ink-soft); }
.ca-stat .v{ font-family:var(--ca-font-display); font-weight:800; font-size:clamp(1.5rem,6vw,2.125rem); line-height:1.05; font-variant-numeric:tabular-nums; display:inline-block; }
.ca-stat .sub{ font-size:var(--ca-fs-small); color:var(--ca-ink-soft); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.3em; }
.ca-stat.score .v{ color:var(--ca-purple); }
.ca-stat.best .v{ color:var(--ca-ink-soft); }
.ca-stat.beat .v{ color:var(--ca-gold-deep); }
.ca-stat .v.bump{ animation:ca-bump 350ms var(--ca-spring); }
@keyframes ca-bump{ 0%{transform:scale(1);} 40%{transform:scale(1.3);} 100%{transform:scale(1);} }
.ca-meter{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; }
.ca-meter .bar{ height:18px; border-radius:var(--ca-r-pill); background:var(--ca-surface); box-shadow:inset 0 0 0 2px var(--ca-tint-purple-2), inset 0 3px 6px rgba(18,38,111,.08); overflow:hidden; }
.ca-meter .bar i{ display:block; height:100%; width:0; border-radius:var(--ca-r-pill); background:var(--ca-ribbon); box-shadow:inset 0 2px 0 rgba(255,255,255,.5); transition:width 350ms var(--ca-spring); }
.ca-meter .lab{ font-family:var(--ca-font-display); font-weight:700; font-size:var(--ca-fs-small); color:var(--ca-ink-soft); margin-bottom:4px; display:flex; justify-content:space-between; }
.ca-meter .lab b{ color:var(--ca-ink); }
.ca-field{ background:var(--ca-surface); border-radius:var(--ca-r-lg); padding:clamp(10px,2.4vw,18px); box-shadow:var(--ca-rim), var(--ca-shadow-card), 0 0 0 6px rgba(113,57,211,.08); position:relative; }
.ca-board{ --n:5; display:grid; grid-template-columns:repeat(var(--n),1fr); gap:clamp(6px,1.8vw,12px); width:min(100%,560px); margin-inline:auto; position:relative; }
.ca-cell{ aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, #FFF9E2, var(--ca-ground-2)); box-shadow:inset 0 4px 8px rgba(18,38,111,.10), inset 0 -1px 0 #fff; }
.ca-cell .ca-ball{ --sz:100%; width:88%; height:88%; font-size:clamp(14px,4.6vw,30px); }
.ca-cell .ca-ball.d3{ font-size:clamp(12px,3.8vw,24px); }
.ca-float{ position:absolute; z-index:5; transform:translate(-50%,-50%); padding:4px 14px; border-radius:var(--ca-r-pill); background:var(--ca-navy); color:#fff; pointer-events:none;
  font-family:var(--ca-font-display); font-weight:800; font-size:clamp(1rem,4vw,1.375rem); box-shadow:0 0 0 3px #fff, 0 8px 16px -6px rgba(11,20,64,.6); white-space:nowrap; }
.ca-float.gold{ background:var(--ca-gold); color:var(--ca-ink); }
.ca-float.up{ animation:ca-floatup 950ms ease-out forwards; }
@keyframes ca-floatup{ 0%{opacity:0; transform:translate(-50%,-30%) scale(.7);} 15%{opacity:1; transform:translate(-50%,-90%) scale(1.05);} 100%{opacity:0; transform:translate(-50%,-230%) scale(1);} }
.ca-banner{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) rotate(-4deg); z-index:6; padding:8px 26px; border-radius:var(--ca-r-md); pointer-events:none; opacity:0;
  background:var(--ca-surface); color:var(--ca-ink); font-family:var(--ca-font-display); font-weight:800; font-size:clamp(1.5rem,7vw,2.75rem); line-height:1.1; white-space:nowrap;
  box-shadow:var(--ca-rim), 0 0 0 7px var(--ca-purple), 0 24px 40px -14px rgba(74,31,156,.6); }
.ca-banner.gold{ box-shadow:var(--ca-rim), 0 0 0 7px var(--ca-gold), 0 24px 40px -14px rgba(217,159,0,.6); }
.ca-banner.on{ animation:ca-ban 1.6s var(--ca-spring) both; }
.ca-banner.still{ opacity:1; }   /* a banner that stays (a static mock, a paused state) */
@keyframes ca-ban{ 0%{opacity:0; transform:translate(-50%,-50%) rotate(-4deg) scale(.4);} 18%{opacity:1; transform:translate(-50%,-50%) rotate(-4deg) scale(1.08);} 28%{transform:translate(-50%,-50%) rotate(-4deg) scale(1);} 80%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-70%) rotate(-4deg) scale(1);} }
@keyframes ca-ban-quiet{ 0%{opacity:0;} 10%,80%{opacity:1;} 100%{opacity:0;} }
.ca-nudge{ animation:ca-nudge 180ms; }
@keyframes ca-nudge{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }
.ca-controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ca-controls .ca-sp{ flex:1; }
@media (max-width:599px){ .ca-controls > .ca-btn.main{ flex:1 1 100%; } }
.ca-help{ display:grid; gap:10px; }
.ca-help .row{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; font-size:var(--ca-fs-small); font-weight:600; color:var(--ca-ink-soft); }
.ca-help .row b{ color:var(--ca-ink); }
.ca-help .pair{ display:inline-flex; align-items:center; gap:4px; }
.ca-help .pair .ca-ball{ --sz:30px; font-size:.875rem; }
.ca-help .pair span{ font-family:var(--ca-font-display); font-weight:800; color:var(--ca-ink); }
/* the sum line: "2 + 2 = 4" shown as it happens */
.ca-eq{ font-family:var(--ca-font-display); font-weight:800; font-variant-numeric:tabular-nums; line-height:1.05; color:var(--ca-ink-soft); font-size:clamp(17px,4.5vw,22px); text-align:center; }
.ca-eq.last{ color:var(--ca-ink); font-size:clamp(30px,8vw,42px); animation:ca-bump 450ms var(--ca-spring); }
.ca-eq .res{ color:var(--ca-purple); } .ca-eq .pl{ color:var(--ca-blue); }


/* ------------------------------------------------------------ 12. WIN MOMENT + OVERLAY
   Over the board when the round ends.
   <div class="ca-overlay on"><div class="ca-win">
     <div class="trophy"><i class="ca-ball gold xl"></i>(star svg)</div>
     <h2 class="ca-d">Hundred!</h2><p class="sub">...</p>
     <div class="score">1,240<small>points</small></div>
     <div class="ca-starrow"><i class="ca-ball gold">(star)</i> x3 (.off = not earned)</div>
     <ul class="rows"><li><span>Merges</span><b>18</b></li></ul>
     <div class="acts"><a class="ca-btn gold big">Play again</a><a class="ca-btn ghost">Back</a></div>
   </div></div>
   ca-overlay = the frosted scrim (absolute, fills its parent); .on shows it.
   ca-winwrap = a full-bleed stage version with drifting ca-confetti balls.
   ca-burst   = helper for script particles (position:absolute children). */
.ca-overlay{ position:absolute; inset:0; z-index:10; display:grid; place-items:center; padding:12px; border-radius:inherit;
  background:rgba(255,253,246,.78); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity var(--ca-dur-2), visibility var(--ca-dur-2); }
.ca-overlay.on{ opacity:1; visibility:visible; }
.ca-overlay .ca-win{ transform:scale(.85); transition:transform 400ms var(--ca-spring); }
.ca-overlay.on .ca-win{ transform:scale(1); }
.ca-winwrap{ position:relative; isolation:isolate; display:grid; place-items:center; padding:28px 0; min-height:560px; overflow:hidden; border-radius:var(--ca-r-lg);
  background:radial-gradient(circle at 50% 30%, rgba(255,198,26,.35), transparent 45%), linear-gradient(180deg, rgba(113,57,211,.10), rgba(59,124,255,.06)); }
.ca-confetti{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.ca-confetti .ca-ball{ position:absolute; --sz:26px; font-size:0; animation:ca-drift 6s ease-in-out infinite; opacity:.9; }
.ca-confetti .ca-ball:nth-child(2n){ animation-duration:7.5s; } .ca-confetti .ca-ball:nth-child(3n){ animation-duration:5.2s; animation-delay:-2s; }
@keyframes ca-drift{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-16px) rotate(12deg);} }
.ca-burst{ position:absolute; inset:0; pointer-events:none; z-index:5; overflow:visible; }
.ca-win{ width:min(100%,440px); text-align:center; padding:28px 22px 24px; background:var(--ca-surface); border-radius:var(--ca-r-lg); box-shadow:var(--ca-rim), var(--ca-shadow-float), 0 0 0 7px rgba(255,198,26,.35); position:relative; }
.ca-win .trophy{ width:112px; height:112px; margin:-78px auto 6px; position:relative; }
.ca-win .trophy .ca-ball{ --sz:112px; }
.ca-win .trophy > svg{ position:absolute; inset:0; margin:auto; width:56px; height:56px; }
.ca-win .ca-d{ font-size:clamp(2rem,8vw,3.25rem); }
.ca-win .sub{ margin:4px 0 0; color:var(--ca-ink-soft); font-weight:700; }
.ca-win .score{ font-family:var(--ca-font-display); font-weight:800; font-size:var(--ca-fs-score); line-height:1; margin-top:14px; color:var(--ca-purple); }
.ca-win .score small{ display:block; font-size:var(--ca-fs-small); letter-spacing:.1em; text-transform:uppercase; color:var(--ca-ink-soft); margin-top:2px; }
.ca-starrow{ display:flex; justify-content:center; gap:10px; margin:16px 0 6px; }
.ca-starrow .ca-ball{ --sz:52px; font-size:0; } .ca-starrow .ca-ball svg{ width:26px; height:26px; }
.ca-starrow .ca-ball:nth-child(2){ --sz:64px; margin-top:-10px; } .ca-starrow .ca-ball:nth-child(2) svg{ width:32px; height:32px; }
.ca-starrow .ca-ball.off svg{ opacity:.35; }
.ca-win .rows{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:6px; text-align:left; }
.ca-win .rows li{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--ca-r-sm); background:var(--ca-ground-2); font-weight:700; }
.ca-win .rows li span{ flex:1; color:var(--ca-ink-soft); } .ca-win .rows li b{ font-family:var(--ca-font-display); font-weight:800; font-size:1.125rem; }
.ca-win .rows li .ca-chip{ font-size:.875rem; }
.ca-win .acts{ display:grid; gap:10px; margin-top:18px; }
.ca-win .acts .ca-btn{ width:100%; }
.ca-win.compact{ padding:20px 16px 18px; }
.ca-win.compact .trophy{ width:84px; height:84px; margin:-62px auto 4px; }
.ca-win.compact .trophy .ca-ball{ --sz:84px; }
.ca-win.compact .ca-d{ font-size:clamp(1.5rem,6vw,2.25rem); }
.ca-win.compact .rows{ margin-top:10px; gap:4px; } .ca-win.compact .rows li{ padding:6px 12px; }
.ca-win.compact .acts{ margin-top:12px; }


/* ------------------------------------------------------------ 13. LAPTOP (>= 900px)
   What changes: the hub becomes tiles (3 across) + a 320px right rail; the
   marquee puts its ball cluster beside the text; the game puts the board
   left and a 320px sticky rail right; the win card gains a side column of
   stats. Nothing is hidden or added. */
@media (min-width:900px){
  .ca-hub{ grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; }
  .ca-marquee{ padding-right:300px; min-height:260px; }
  .ca-marquee p{ max-width:44ch; }
  .ca-cluster{ right:120px; bottom:auto; top:50%; transform:translateY(-50%); width:200px; height:190px; opacity:1; }
  .ca-cluster .b2, .ca-cluster .b4{ display:inline-grid; }
  .ca-cluster .b1{ left:0; top:30px; --sz:64px; } .ca-cluster .b3{ left:108px; top:50px; --sz:76px; }
  .ca-marquee .ca-kidoo{ right:20px; top:50%; transform:translateY(-50%); width:104px; height:104px; }
  .ca-tiles{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .ca-tile{ grid-template-columns:1fr; padding:14px; align-content:start; }
  .ca-tile .art{ width:100%; height:128px; }
  .ca-tile .art .ca-ball{ --sz:46px; } .ca-tile .art .ca-ball:nth-child(1){ left:22%; top:18px; } .ca-tile .art .ca-ball:nth-child(2){ right:22%; top:28px; --sz:40px; } .ca-tile .art .ca-ball:nth-child(3){ left:40%; bottom:12px; --sz:54px; }
  .ca-tile .body{ padding:12px 4px 2px; }
  .ca-tile .go{ top:auto; bottom:18px; margin-top:0; }
  .ca-game{ grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
  .ca-game .side{ position:sticky; top:84px; }
  .ca-stats, .ca-meter, .ca-controls{ max-width:560px; margin-inline:auto; width:100%; }
  .ca-winwrap{ min-height:620px; }
  .ca-winwrap .ca-win{ width:min(100%,720px); display:grid; grid-template-columns:1fr 1fr; gap:0 28px; text-align:left; padding:32px 36px 30px; }
  .ca-winwrap .ca-win .trophy{ margin:-90px 0 8px; grid-column:1; }
  .ca-winwrap .ca-win .ca-d, .ca-winwrap .ca-win .sub, .ca-winwrap .ca-win .score{ grid-column:1; }
  .ca-winwrap .ca-starrow{ grid-column:1; justify-content:flex-start; }
  .ca-winwrap .ca-win .rows{ grid-column:2; grid-row:1 / span 5; align-self:center; margin:0; }
  .ca-winwrap .ca-win .acts{ grid-column:1 / -1; grid-template-columns:1fr 1fr; }
}
@media (min-width:1180px){ .ca-tiles{ gap:20px; } }


/* ------------------------------------------------------------ 14. MOTION OFF
   Every animation and transition stops. States still land (the banner
   shows, the overlay opens) because each keyframe uses "both" or the
   resting style is already the end state. A game that needs a timed
   reveal under reduced motion sets its own short animation on a more
   specific selector (see hundred-merge.html for the pattern). */
@media (prefers-reduced-motion:reduce){
  .ca *, .ca *::before, .ca *::after{ animation:none !important; transition:none !important; }
  .ca-shine{ display:none; }
  .ca-overlay .ca-win{ transform:none; }
  /* timed reveals keep a plain fade (no bounce, no travel) so the shout still reads and still clears */
  .ca-banner.on{ animation:ca-ban-quiet 1.2s linear both !important; }
  .ca-float.up{ animation:ca-ban-quiet 950ms linear both !important; }
}