/* =====================================================================
   ARCADE — the shared chrome, in the "Playground" identity.

   Kipwick's explorer's map behind everything (2026-10-01: warm cream
   paper, soft contour lines, a dotted trail, a compass, and a wash in
   the colour of the land the child is in), white panels with chunky
   navy outlines, four saturated play colors, and press physics: chunky
   elements sit on a solid navy underside and physically depress when
   tapped.

   CHROME ONLY. No canvas, sprite or HUD styles live here; each game
   keeps those inline, because they're the game, not the furniture.
   parent-report/index.html deliberately stays on its own plain grown-up
   styling and does not load this file.

   ---------------------------------------------------------------------
   WHY EVERY TOKEN IS PREFIXED --ac-
   ---------------------------------------------------------------------
   The games disagree about what the unprefixed names mean. Coin Climb
   sets --ink:#2a1a05 (dark brown, because it has a light sky), while
   other games define their own. Prefixing means a game can adopt the
   shared chrome without anyone auditing its existing CSS. Never add a
   bare token here.
   ===================================================================== */

:root{
  /* surfaces. The sky and grass are a literal sky for the games that
     play under one (Star Hopper, Math Baseball…); the PAGE is the map
     below (--ac-page-bg), never the sky. */
  --ac-sky-top:#79D2FF;  --ac-sky-mid:#A8E4FF;  --ac-sky-bot:#D6F3FF;
  --ac-grass:#5FD963;    --ac-grass-deep:#31A84A;

  /* KIPWICK'S MAP (2026-10-01). Paper and peach from the splash screen,
     the mark's green, sunny yellow and turquoise. The wash is the
     chameleon idea: it takes the colour of the land the child is in
     (assets/land-tint.js sets --ac-land-wash on <html>; Kipwick's own
     green until a land is known). Text never sits on the wash at more
     than 45%, so navy and the dim text stay AA (kipwick.test.mjs). */
  --kw-paper:#FFF8EC;  --kw-peach:#FDEBD3;
  --kw-green:#5DBB7A;  --kw-green-deep:#2E7845;  --kw-sun:#FFD25E;  --kw-teal:#3FB8B0;
  --ac-land-wash:rgba(93,187,122,0.4);   /* = washFor(''), Kipwick's green */
  --kw-compass-at:right -34px top 70px / 150px 150px;
  --ac-page-bg:
    var(--kw-compass) var(--kw-compass-at) no-repeat,
    radial-gradient(150% 620px at 50% -90px, var(--ac-land-wash), rgba(255,248,236,0) 78%) 0 0 / 100% 100% no-repeat,
    var(--kw-map) 0 0 / 560px 560px repeat,
    linear-gradient(180deg, var(--kw-paper), var(--kw-peach)) 0 0 / 100% 100% no-repeat,
    var(--kw-paper);
  --ac-panel:#FFFFFF;    --ac-panel-2:#FFF4DA;
  --ac-edge:#1E2B63;     --ac-line:#C8D6F5;

  /* text. Dim and mute were #5C6EA8 / #8E9BC4 until 2026-10-01: dim was
     4.9:1 on white and under 4.5:1 on the map, mute 2.9:1 anywhere. Now
     dim is the grown-ups' page's (6.4:1 on white, AA over the map's
     wash and trail) and mute is AA on paper. */
  --ac-text:#1E2B63;  --ac-text-dim:#4A5788;  --ac-text-mute:#616D9A;

  /* the four play colors */
  --ac-red:#FF5A5A;     --ac-red-deep:#D62A2A;
  --ac-yellow:#FFC93C;  --ac-yellow-deep:#E39B00;
  --ac-blue:#4C9BFF;    --ac-blue-deep:#1F5FD6;
  --ac-purple:#A971F5;  --ac-purple-deep:#7433CE;

  /* status */
  --ac-good:#2ECC71;  --ac-bad:#FF4D4D;

  /* rarity (mythic isn't in the identity spec's four — it borrows the
     hottest play color so the top tier still reads as THE prize) */
  --rar-common:#9BB1D4; --rar-rare:#4C9BFF; --rar-epic:#A971F5;
  --rar-legend:#FFC93C; --rar-mythic:#FF5A5A;

  /* surface tints (badges, tinted tiles) */
  --ac-tint-blue:#CBE4FF; --ac-tint-purple:#E9DAFF;
  --ac-tint-green:#CFF6D9; --ac-tint-warn:#FFD9D9;

  /* compatibility aliases — old names, new values; keeps Phase 2/3 CSS
     and any module that referenced them working untouched */
  --ac-bg-top:var(--ac-sky-top);  --ac-bg-bottom:var(--ac-sky-bot);
  --ac-accent:var(--ac-yellow);   --ac-accent-deep:var(--ac-yellow-deep);
  --ac-accent-edge:var(--ac-edge);
  --ac-accent-ink:var(--ac-edge); /* text on yellow is navy now */
  --ac-btn-ink:#FFFFFF;           /* default button is red with white text */
  --ac-placeholder:var(--ac-text-mute);

  /* shape + type */
  --ac-radius:24px;  --ac-radius-sm:14px;
  --ac-bd:4px;       /* chunky border width */
  --ac-lift:7px;     --ac-lift-sm:5px;
  --ac-font:'Baloo 2','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;
}
/* On a phone the compass peeks in at the top corner, beside the header
   rather than behind the first card. */
@media (max-width:600px){ :root{ --kw-compass-at:right -30px top -6px / 104px 104px; } }

/* BEGIN KIPWICK MAP (scripts/kipwick-map.mjs writes this block) */
:root{
  --kw-map:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%237A6A3A' stroke-opacity='.17' stroke-width='1.6'%3E%3Cpath d='M174 150C174 153 169 156 167 158S162 162 159 163S153 163 150 163S142 167 138 166S132 162 131 159S132 153 133 150S131 144 133 142S137 138 140 136S147 132 150 133S156 136 159 138S164 140 167 142S174 147 174 150Z'/%3E%3Cpath d='M206 150C206 156 194 163 189 168S178 178 171 180S158 179 150 181S130 189 123 187S108 177 105 171S109 157 110 150S107 136 109 131S121 122 127 119S143 109 150 109S163 119 170 123S183 127 189 132S206 144 206 150Z'/%3E%3Cpath d='M238 150C238 159 219 170 210 178S194 194 184 197S163 196 150 198S119 211 108 209S83 192 80 182S87 160 88 150S81 128 86 120S104 107 115 102S139 85 150 86S171 101 181 107S202 114 212 122S238 141 238 150Z'/%3E%3Cpath d='M270 150C270 163 243 176 231 187S210 211 197 215S168 211 150 214S108 234 92 231S59 208 54 194S65 164 66 150S55 120 62 109S88 93 103 85S135 60 150 62S178 84 192 92S221 102 234 111S271 137 270 150Z'/%3E%3Cpath d='M303 150C302 166 266 183 251 197S227 228 210 233S172 227 150 230S96 256 76 252S34 223 29 206S43 168 44 150S29 111 37 98S72 79 91 69S131 36 150 37S185 66 203 77S239 89 256 101S304 134 303 150Z'/%3E%3Cpath d='M422 400C421 402 419 404 418 406S414 408 412 409S408 415 405 416S399 414 396 412S393 408 392 406S390 402 390 400S390 395 391 393S394 388 396 387S402 389 405 389S411 387 413 388S419 391 421 392S422 398 422 400Z'/%3E%3Cpath d='M445 400C444 405 440 411 436 415S426 419 421 423S411 438 405 439S390 433 384 429S376 420 373 415S368 405 368 400S369 389 371 384S377 370 383 369S398 373 405 374S419 369 425 371S440 377 443 382S446 395 445 400Z'/%3E%3Cpath d='M469 400C467 409 461 418 454 424S438 429 430 435S415 461 405 463S381 453 373 446S359 432 354 424S346 408 346 400S348 383 352 375S361 352 370 350S394 358 405 359S428 351 438 353S460 363 465 371S470 391 469 400Z'/%3E%3Cpath d='M492 400C489 412 482 425 473 433S450 439 438 448S418 484 405 487S373 472 361 463S341 444 335 433S324 411 324 400S327 377 333 366S344 334 356 330S389 344 405 344S436 333 450 335S481 350 488 361S494 388 492 400Z'/%3E%3Cpath d='M515 400C512 415 504 432 492 442S461 448 447 460S421 508 405 511S364 491 349 480S324 456 316 443S302 414 301 400S307 372 314 357S327 315 343 311S385 329 405 330S445 314 463 317S501 336 510 350S518 385 515 400Z'/%3E%3Cpath d='M538 400C535 419 526 439 512 451S473 457 455 471S424 532 405 536S356 510 338 496S306 468 297 452S279 417 279 400S288 366 296 348S310 296 328 290S380 315 405 317S454 295 476 299S521 323 532 340S541 381 538 400Z'/%3E%3Cpath d='M468 110C467 112 467 113 467 114S466 119 464 120S458 120 455 120S449 119 447 118S445 116 443 114S439 112 438 110S439 106 441 105S446 104 448 103S453 100 455 100S461 100 463 101S469 103 470 105S468 108 468 110Z'/%3E%3Cpath d='M487 110C486 114 486 116 485 121S483 133 478 135S462 135 455 135S440 133 435 131S430 124 426 120S414 114 413 110S415 100 419 97S433 95 439 93S449 85 455 84S469 86 476 88S491 93 493 97S488 106 487 110Z'/%3E%3Cpath d='M506 110C504 116 504 120 502 127S500 146 493 150S467 150 455 149S431 148 423 144S415 132 409 126S389 116 387 110S391 94 398 90S420 86 429 82S445 70 455 68S478 72 488 75S512 83 515 89S508 104 506 110Z'/%3E%3Cpath d='M143 455C144 457 141 460 139 462S132 464 129 464S123 465 120 465S114 465 111 465S101 464 99 462S101 457 102 455S103 451 104 450S107 446 110 444S117 443 120 443S128 443 130 445S132 448 134 450S142 453 143 455Z'/%3E%3Cpath d='M172 455C174 459 168 466 163 470S147 475 140 476S127 479 120 479S107 479 99 477S75 476 72 472S77 460 79 455S81 446 84 442S91 433 97 431S112 427 120 427S138 428 143 431S147 440 152 444S171 451 172 455Z'/%3E%3Cpath d='M203 455C206 462 195 473 186 478S163 486 152 488S131 493 120 493S100 492 87 490S49 488 44 482S53 463 56 455S59 441 63 435S75 421 84 417S108 412 120 412S148 413 156 417S162 431 169 438S200 448 203 455Z'/%3E%3C/g%3E%3Cpath d='M0 300C60 300 90 270 150 282S240 340 290 318S350 250 420 262S500 300 560 300' fill='none' stroke='%23B9793A' stroke-opacity='.27' stroke-width='5' stroke-linecap='round' stroke-dasharray='.1 13'/%3E%3Ccircle cx='290' cy='318' r='5' fill='%23B9793A' fill-opacity='.27'/%3E%3Cg transform='translate(300 70) rotate(30) scale(1)' opacity='0.3'%3E%3Cpath d='M0-12C7-8 8 4 0 12C-8 4-7-8 0-12Z' fill='%235DBB7A'/%3E%3Cpath d='M0-10V10' stroke='%23FFF8EC' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(318 82) rotate(80) scale(0.7)' opacity='0.28'%3E%3Cpath d='M0-12C7-8 8 4 0 12C-8 4-7-8 0-12Z' fill='%233FB8B0'/%3E%3Cpath d='M0-10V10' stroke='%23FFF8EC' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(250 480) rotate(-40) scale(0.9)' opacity='0.26'%3E%3Cpath d='M0-12C7-8 8 4 0 12C-8 4-7-8 0-12Z' fill='%235DBB7A'/%3E%3Cpath d='M0-10V10' stroke='%23FFF8EC' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(530 210) rotate(120) scale(0.8)' opacity='0.24'%3E%3Cpath d='M0-12C7-8 8 4 0 12C-8 4-7-8 0-12Z' fill='%233FB8B0'/%3E%3Cpath d='M0-10V10' stroke='%23FFF8EC' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(40 220) rotate(-70) scale(0.75)' opacity='0.24'%3E%3Cpath d='M0-12C7-8 8 4 0 12C-8 4-7-8 0-12Z' fill='%235DBB7A'/%3E%3Cpath d='M0-10V10' stroke='%23FFF8EC' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --kw-compass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='-80 -80 160 160'%3E%3Cg fill='none' stroke='%231E2B63' stroke-opacity='.13' stroke-width='2'%3E%3Ccircle r='62'/%3E%3Ccircle r='54' stroke-dasharray='2 6'/%3E%3C/g%3E%3Cg fill='%231E2B63' fill-opacity='.18'%3E%3Cpath d='M0-70L10-10 0 0-10-10ZM0 70L10 10 0 0-10 10ZM-70 0L-10-10 0 0-10 10ZM70 0L10-10 0 0 10 10Z'/%3E%3Cpath d='M0-44L6-6 0 0-6-6ZM0 44L6 6 0 0-6 6ZM-44 0L-6-6 0 0-6 6ZM44 0L6-6 0 0 6 6Z' transform='rotate(45)'/%3E%3C/g%3E%3Ccircle r='7' fill='%23FFD25E'/%3E%3C/svg%3E");
}
/* END KIPWICK MAP */

/* Kept unprefixed on purpose: every page and every game already toggles
   this exact class name from JS, with this exact meaning. */
.hidden{ display:none !important; }

/* ---------------------------------------------------------------- page */
*{ box-sizing:border-box; }

.ac-page{
  margin:0; min-height:100%;
  background:var(--kw-paper);     /* if the map below can't be drawn */
  background:var(--ac-page-bg);
  font-family:var(--ac-font);
  font-weight:700;                /* no thin text anywhere in the arcade */
  color:var(--ac-text);
}
.ac-page__inner{ max-width:720px; margin:0 auto; padding:40px 20px; text-align:center; }
.ac-page h1{ font-size:40px; font-weight:800; margin:0 0 6px; text-shadow:0 3px 0 rgba(30,43,99,0.18); }
.ac-sub{ color:var(--ac-text-dim); margin:0 0 32px; font-size:15px; }

/* =====================================================================
   PRESS PHYSICS — the signature feel. Chunky navy border, solid navy
   underside, and :active physically depresses the element into it.
   ===================================================================== */

/* ----------------------------------------------------------------- bar */
.ac-bar{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px;
  font-size:13px; color:var(--ac-text-dim); margin-bottom:22px;
  background:var(--ac-panel); border:var(--ac-bd) solid var(--ac-edge);
  border-radius:999px; padding:8px 16px;
  box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge);
}
.ac-bar span{
  color:var(--ac-text); background:var(--ac-panel-2);
  border:2px solid var(--ac-edge); border-radius:999px; padding:3px 12px;
  font-weight:800; font-size:12px;
}

.ac-bar--game{
  justify-content:space-between; max-width:900px; margin:10px auto 14px;
  padding:8px 14px; gap:10px;
}
.ac-bar__group{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ac-bar__title{ font-weight:800; font-size:16px; color:var(--ac-text); letter-spacing:0.5px; }
.ac-bar__level{
  background:var(--ac-yellow); border:2px solid var(--ac-edge);
  border-radius:999px; padding:3px 12px;
  font-weight:800; font-size:12px; color:var(--ac-edge);
}
.ac-bar__coins{ font-weight:800; font-size:13px; }

/* --------------------------------------------------------------- tiles */
.ac-tile{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:var(--ac-panel); border:var(--ac-bd) solid var(--ac-edge);
  border-radius:var(--ac-radius); padding:24px 16px;
  text-decoration:none; color:var(--ac-text);
  box-shadow:0 var(--ac-lift) 0 var(--ac-edge), 0 13px 14px rgba(30,43,99,0.25);
  transition:transform 0.18s cubic-bezier(0.34,1.6,0.64,1), box-shadow 0.18s;
}
.ac-tile:hover{ transform:translateY(-5px); box-shadow:0 12px 0 var(--ac-edge), 0 18px 18px rgba(30,43,99,0.25); }
.ac-tile:active{ transform:translateY(var(--ac-lift)); box-shadow:0 0 0 var(--ac-edge); }
.ac-tile__emoji{ font-size:44px; }
.ac-tile__name{ font-weight:800; font-size:16px; }
/* A game with a painted title card (catalog `art`): the picture fills the
   top of the tile edge to edge, and the name and badges sit under it. */
.ac-tile--art{ padding-top:12px; }
.ac-tile__art{ display:block; width:100%; aspect-ratio:4 / 3; border-radius:calc(var(--ac-radius) - 6px); overflow:hidden;
  border:3px solid var(--ac-edge); background:var(--ac-panel-2); }
.ac-tile__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.ac-tile--unavailable .ac-tile__art{ filter:saturate(.55); }
/* The big featured tile spans the whole row: a wide, capped picture, not a
   full-width 4:3 poster. */
.ac-tile--feature .ac-tile__art{ max-width:440px; aspect-ratio:16 / 9; }
/* One tile per row on a phone: picture on the left, words on the right, so
   seven fun games don't become seven screen-tall posters. */
@media (max-width:520px){
  .ac-tile--art{ display:grid; grid-template-columns:44% 1fr; grid-auto-rows:auto; column-gap:12px; row-gap:6px;
    align-items:center; text-align:left; padding:12px; }
  .ac-tile--art .ac-tile__art{ grid-row:1 / span 3; }
  .ac-tile--art .ac-badges{ justify-content:flex-start; }
  .ac-tile--feature.ac-tile--art{ display:flex; flex-direction:column; text-align:center; }
  .ac-tile--feature.ac-tile--art .ac-badges{ justify-content:center; }
}

.ac-tile--math{ background:var(--ac-tint-blue); }
.ac-tile--reading{ background:var(--ac-tint-green); }
.ac-tile--science{ background:var(--ac-tint-purple); }

/* A place to GO rather than a game to play — the map, the handbook. Same
   blue as the maths tint by value, but a separate name on purpose: these
   are navigation, and the day the subject tints get retuned they should
   not drag the signposts along with them. */
.ac-tile--navigate{ background:var(--ac-tint-blue); }

.ac-tile--feature{
  grid-column:1 / -1;
  background:linear-gradient(135deg,#FFE9A8,#FFC93C 60%,#FFB020);
  color:var(--ac-edge);
}
.ac-tile--feature .ac-tile__emoji{ font-size:56px; }
.ac-tile--feature .ac-tile__name{ font-size:24px; letter-spacing:2px; }
.ac-tile__blurb{ font-size:13px; color:var(--ac-text-dim); max-width:430px; line-height:1.5; font-weight:700; }
.ac-tile--feature .ac-tile__blurb{ color:var(--ac-edge); opacity:0.75; }

/* A tile that can't be played here (Harvest Night on a tablet). Dimmed,
   never removed — the kid should still see the game exists. */
.ac-tile--unavailable{
  opacity:0.7; border-style:dashed; box-shadow:none;
}
.ac-tile--unavailable:hover{ transform:none; box-shadow:none; }

/* The in-game pill on the top bar: ⭐ TODAY'S PICK on this child's pick
   (arcade-shell.js mountBar). The class keeps its old name. */
.ac-bar__gotd{
  font-size:11px; font-weight:800; letter-spacing:0.6px;
  background:var(--ac-yellow); color:var(--ac-edge);
  border:2px solid var(--ac-edge); border-radius:999px; padding:3px 9px;
}

/* =====================================================================
   THE TEACHING MOMENT

   Warm, not clinical. This card appears when a child got something
   wrong, so there is nothing red on it anywhere, nothing crossed out,
   and no X. Yellow and cream — the colours this design uses for rewards
   — because being shown how something works is a good thing happening.
   ===================================================================== */
.ac-teach__card{ width:min(430px, 92vw); }
.ac-teach__fact{
  font-size:clamp(30px, 9vw, 42px); font-weight:800; letter-spacing:1px;
  color:var(--ac-edge); background:var(--ac-panel-2);
  border:4px solid var(--ac-edge); border-radius:var(--ac-radius-sm);
  padding:14px 10px; margin:6px 0 12px;
}
/* What they typed. Deliberately quiet, and deliberately not red. */
.ac-teach__said{ margin:0 0 10px; font-size:13.5px; font-weight:700; color:var(--ac-text-mute); }
/* The strategy line — the actual teaching, so it gets the emphasis. */
.ac-teach__why{
  margin:0 0 16px; font-size:16px; font-weight:800; line-height:1.5;
  color:var(--ac-text); background:#FFF8E4;
  border-left:6px solid var(--ac-yellow); border-radius:10px;
  padding:12px 14px; text-align:left;
}
.ac-teach__lead{ margin:0 0 9px; font-size:14px; font-weight:800; color:var(--ac-text-dim); }
.ac-teach__row{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; }
.ac-teach__prompt{
  font-size:24px; font-weight:800; color:var(--ac-edge);
  white-space:nowrap; flex:none;   /* "7 × 6 =" must never break across lines */
}
/* Doubled class on purpose: the input also carries .ac-input, whose
   width:100% comes later in this file and used to stretch this box past
   the card's edge at 375px. */
.ac-teach__input.ac-input, .ac-teach__input{
  width:104px; flex:none; text-align:center; font-size:26px; font-weight:800; padding:10px 6px;
}
.ac-teach__input.is-right{
  border-color:var(--ac-good); background:#EAFBF0; color:var(--ac-good);
}
.ac-teach__note{ min-height:20px; margin:11px 0 0; font-size:13.5px; font-weight:800; color:var(--ac-text-dim); }
.ac-teach__skip{ display:block; margin:8px auto 0; font-size:12px; }
/* Errors wiggle themselves; they never shake the screen. */
@keyframes ac-wiggle{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.ac-wiggle{ animation:ac-wiggle .22s ease-in-out 2; }
@media (prefers-reduced-motion: reduce){ .ac-wiggle{ animation:none; } }

/* The end-screen "⭐ TODAY'S PICK 40 → 80" line (pickAwardLine). */
.ac-gotd-line{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  font-weight:800; color:var(--ac-yellow-deep); margin:6px 0 2px;
}
.ac-gotd-line__was{ color:var(--ac-text-mute); text-decoration:line-through; font-size:15px; }
.ac-gotd-line__now{ font-size:22px; }


.ac-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px; }
.ac-grid__empty{
  background:var(--ac-panel); border-radius:var(--ac-radius); padding:30px;
  color:var(--ac-text-dim); border:3px dashed var(--ac-line); grid-column:1 / -1;
}

/* -------------------------------------------------------------- badges */
.ac-badge{
  font-size:11px; font-weight:800; letter-spacing:1px;
  color:var(--ac-edge); background:var(--ac-panel-2);
  border:3px solid var(--ac-edge);
  padding:3px 10px; border-radius:999px; margin-top:-2px;
}
/* A small inline signpost that sits above a panel's content — an
   invitation, not a control the page depends on. 48px tall so a thumb
   never misses it. */
.ac-chip{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  min-height:48px; padding:8px 16px; margin:0 0 10px;
  background:var(--ac-tint-blue); border:3px solid var(--ac-edge);
  border-radius:999px; text-decoration:none; color:var(--ac-text);
  font-weight:800; font-size:14px;
  box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge);
}
.ac-chip:active{ transform:translateY(var(--ac-lift-sm)); box-shadow:0 0 0 var(--ac-edge); }
.ac-chip__text{ color:var(--ac-text-dim); }
.ac-chip__cta{ text-decoration:underline; }

.ac-badge--quiet{ background:var(--ac-panel); border-color:var(--ac-line); color:var(--ac-text-dim); }
.ac-badge--blue{ background:var(--ac-tint-blue); }
.ac-badge--purple{ background:var(--ac-tint-purple); }
.ac-badge--green{ background:var(--ac-tint-green); }
.ac-badge--warn{ background:var(--ac-tint-warn); }
.ac-badge--hot{ background:var(--ac-yellow); animation:ac-breathe 1.8s ease-in-out infinite; }
.ac-badges{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }

@keyframes ac-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }

/* ------------------------------------------------------------- buttons
   Default = red = THE action. One red button per screen, tops; other
   choices take --yellow / --blue / --purple / --green / --outline. */
.ac-btn{
  width:100%; background:linear-gradient(180deg,var(--ac-red),var(--ac-red-deep));
  color:#FFFFFF; text-shadow:0 2px 0 rgba(0,0,0,0.22);
  border:var(--ac-bd) solid var(--ac-edge);
  padding:13px; border-radius:999px; font-weight:800; font-size:15px;
  box-shadow:0 var(--ac-lift) 0 var(--ac-edge), 0 13px 14px rgba(30,43,99,0.25);
  cursor:pointer; font-family:inherit; margin-top:4px;
  transition:transform 0.06s, box-shadow 0.06s;
}
.ac-btn:active{ transform:translateY(var(--ac-lift)); box-shadow:0 0 0 var(--ac-edge); }
.ac-btn:disabled{ opacity:0.5; cursor:default; transform:none; }

.ac-btn--yellow{ background:linear-gradient(180deg,var(--ac-yellow),var(--ac-yellow-deep)); color:var(--ac-edge); text-shadow:none; }
.ac-btn--blue{   background:linear-gradient(180deg,var(--ac-blue),var(--ac-blue-deep)); }
.ac-btn--purple{ background:linear-gradient(180deg,var(--ac-purple),var(--ac-purple-deep)); }
.ac-btn--green{  background:linear-gradient(180deg,#63E08A,#23A354); }

.ac-btn--outline{
  background:var(--ac-panel); color:var(--ac-text); text-shadow:none;
}
.ac-btn--outline:active{ background:var(--ac-panel-2); }

/* The quiet text button: "Switch profile", "Log out", "Sign in instead". */
.ac-btn--ghost{
  background:none; border:2px dashed var(--ac-line); box-shadow:none;
  padding:4px 12px; border-radius:999px; font:inherit; font-size:12px; font-weight:800;
  color:var(--ac-text-dim); text-decoration:none; cursor:pointer; width:auto; margin-top:0;
  text-shadow:none;
}
.ac-btn--ghost:hover{ color:var(--ac-edge); border-color:var(--ac-edge); }
.ac-btn--ghost:active{ transform:none; box-shadow:none; }

/* An auto-width pill, for rows of choices rather than a form's submit. */
.ac-btn--inline{ width:auto; padding:11px 22px; }
.ac-btn--sm{ font-size:12px; padding:8px 16px; box-shadow:0 4px 0 var(--ac-edge); }
.ac-btn--sm:active{ transform:translateY(4px); }
.ac-btn--xl{
  font-size:clamp(20px,3.2vw,24px); padding:18px 30px; letter-spacing:1px;
  box-shadow:0 10px 0 var(--ac-edge), 0 16px 18px rgba(30,43,99,0.28);
}
.ac-btn--xl:active{ transform:translateY(10px); box-shadow:0 0 0 var(--ac-edge); }

.ac-link{
  display:inline-block; margin-top:34px; color:var(--ac-text-dim);
  font-size:13px; font-weight:800; text-decoration:none;
}
.ac-link:hover{ color:var(--ac-edge); text-decoration:underline; }

/* --------------------------------------------------------------- cards */
.ac-card{
  background:var(--ac-panel); border:var(--ac-bd) solid var(--ac-edge);
  border-radius:var(--ac-radius); padding:26px 22px; max-width:340px;
  margin:0 auto; text-align:left;
  box-shadow:0 var(--ac-lift) 0 var(--ac-edge), 0 13px 14px rgba(30,43,99,0.25);
}
.ac-card h2{ margin:0 0 4px; font-size:20px; font-weight:800; text-align:center; }
.ac-card > .ac-sub{ margin:0 0 18px; font-size:13px; text-align:center; }
.ac-card--wide{ max-width:560px; }

/* A row of pill tabs inside a card (Sign In / Create Account). */
.ac-tabs{ display:flex; gap:6px; margin-bottom:16px; background:var(--ac-panel-2); border:2px solid var(--ac-line); border-radius:999px; padding:4px; }
.ac-tabs__tab{
  flex:1; background:none; border:none; color:var(--ac-text-dim); font-weight:800; font-size:11px;
  padding:9px 6px; border-radius:999px; cursor:pointer; font-family:inherit;
}
.ac-tabs__tab.is-active{ background:var(--ac-yellow); color:var(--ac-edge); border:2px solid var(--ac-edge); }

/* -------------------------------------------------------------- fields */
.ac-input, .ac-select{
  width:100%; margin-bottom:10px; padding:12px 14px; border-radius:var(--ac-radius-sm);
  border:3px solid var(--ac-line); background:var(--ac-panel); color:var(--ac-text);
  font-size:14px; font-family:inherit; font-weight:700;
}
.ac-input:focus, .ac-select:focus{ outline:none; border-color:var(--ac-blue); }
.ac-input::placeholder{ color:var(--ac-placeholder); font-weight:700; }
.ac-label{ font-size:11px; color:var(--ac-text-dim); font-weight:800; display:block; margin:8px 0 4px; }

.ac-error{ color:var(--ac-bad); font-size:12px; font-weight:800; margin:10px 0 0; text-align:center; }
.ac-divider{
  display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:var(--ac-text-dim);
  font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
}
.ac-divider::before, .ac-divider::after{ content:''; flex:1; height:2px; background:var(--ac-line); border-radius:2px; }

/* -------------------------------------------------------------- modals
   The ONE place a kid-facing surface stays dark: the backdrop. */
.ac-modal{
  position:fixed; inset:0; background:rgba(30,43,99,0.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;
}
.ac-modal__card{
  background:var(--ac-panel); border:var(--ac-bd) solid var(--ac-edge);
  border-radius:var(--ac-radius); padding:26px; text-align:center; width:250px;
  box-shadow:0 var(--ac-lift) 0 var(--ac-edge), 0 18px 30px rgba(30,43,99,0.35);
}
.ac-modal__card--form{ width:270px; text-align:left; }
.ac-modal__name{ font-weight:800; font-size:16px; margin:0 0 2px; }
.ac-modal__hint{ color:var(--ac-text-dim); font-size:12px; margin:0 0 6px; }

/* ----------------------------------------------------------- PIN entry */
.ac-pin__dots{ display:flex; gap:10px; justify-content:center; margin:14px 0; }
.ac-pin__dots span{
  width:16px; height:16px; border-radius:50%; border:3px solid var(--ac-line);
  transition:transform 0.16s cubic-bezier(0.34,1.8,0.64,1), background 0.16s, border-color 0.16s;
}
.ac-pin__dots span.is-filled{
  background:var(--ac-purple); border-color:var(--ac-edge); transform:scale(1.28);
}
.ac-pin__keys{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:4px; }
.ac-pin__keys button{
  padding:14px 0; border-radius:var(--ac-radius-sm);
  border:3px solid var(--ac-edge); background:var(--ac-panel-2); color:var(--ac-text);
  font-size:18px; font-weight:800; cursor:pointer; font-family:inherit;
  box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge);
  transition:transform 0.06s, box-shadow 0.06s;
}
.ac-pin__keys button:active{ transform:translateY(var(--ac-lift-sm)); box-shadow:0 0 0 var(--ac-edge); }

/* ------------------------------------------------------ profile picker */
.ac-profiles{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin:18px 0 4px; }
.ac-profile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--ac-panel); border:var(--ac-bd) solid var(--ac-edge);
  border-radius:18px; padding:16px 14px; min-width:88px; cursor:pointer;
  box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge); font-family:inherit;
  transition:transform 0.06s, box-shadow 0.06s;
}
.ac-profile:active{ transform:translateY(var(--ac-lift-sm)); box-shadow:0 0 0 var(--ac-edge); }
.ac-profile__emoji{ font-size:36px; }
.ac-profile__face{ width:64px; height:64px; border-width:3px; }
.ac-profile__name{ font-size:12px; font-weight:800; color:var(--ac-text); }
.ac-profile__edit{
  position:absolute; top:-8px; right:-8px; background:var(--ac-yellow); color:var(--ac-edge);
  border:2px solid var(--ac-edge);
  border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  font-size:11px; cursor:pointer; line-height:1;
}
.ac-profile--add{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:3px dashed var(--ac-line); border-radius:18px; padding:16px 14px; min-width:88px; cursor:pointer;
  color:var(--ac-text-dim); font-weight:800; font-size:12px; background:none; font-family:inherit;
}
.ac-profile--add .ac-profile__plus{ font-size:26px; }

/* ------------------------------------------------------------- google
   Google's button keeps Google's colours to satisfy their branding
   rules, so it is deliberately not themed. */
.ac-btn--google{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#3c4043; border:1px solid #dadce0; border-radius:999px;
  padding:12px; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit;
}
.ac-btn--google:active{ background:#f1f3f4; }

/* --------------------------------------------------- "who's playing?" */
.ac-gate{ max-width:520px; margin:0 auto; text-align:center; padding:60px 20px; color:var(--ac-text); }
.ac-gate__emoji{ font-size:52px; display:block; margin-bottom:10px; }
.ac-gate h2{ margin:0 0 8px; font-size:22px; font-weight:800; }
.ac-gate p{ color:var(--ac-text-dim); margin:0 0 20px; font-size:14px; }

/* =====================================================================
   CHARACTER HOME
   ===================================================================== */

/* ---- the header card: avatar on a warm-cream stage ---- */
.ac-home-head{ text-align:left; padding:20px 22px; }
.ac-home-head__row{ display:flex; align-items:center; gap:18px; }
.ac-home-head__id{ flex:1; min-width:0; }
.ac-home-head__name{ font-size:24px; font-weight:800; letter-spacing:1px; }
.ac-home-head__guest{ font-size:11px; color:var(--ac-text-mute); font-weight:800; margin-top:2px; }

.ac-stage{ position:relative; flex:none; }
.ac-avatar{
  width:88px; height:88px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#FFF6D8,#FFE49A);
  border:5px solid var(--ac-edge);
  display:flex; align-items:center; justify-content:center; font-size:44px; flex:none;
}
.ac-avatar--pet{ width:34px; height:34px; font-size:18px; border-width:3px; background:var(--ac-panel); }
.ac-avatar, .ac-look{ position:relative; }
/* The profile picture is a portrait of the child's My World avatar
   (portraitSVG in avatar-look.js, via skinAvatar in widgets.js): an SVG
   that fills its circle, crisp at any size. The circle keeps its border;
   the sky is drawn inside. */
.ac-avatar--portrait{ overflow:hidden; padding:0; background:#A8E4FF; }
.ac-portrait{ display:block; width:100%; height:100%; border-radius:50%; }
/* the small one beside a word or on an item card */
.ac-look{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.ac-look.ac-avatar--portrait{ width:1.6em; height:1.6em; border-radius:50%; box-shadow:0 0 0 2px var(--ac-edge); background:none; }
.ac-stage__lvl{
  position:absolute; top:-8px; left:-10px; z-index:1;
  background:var(--ac-yellow); color:var(--ac-edge); border:3px solid var(--ac-edge);
  border-radius:999px; padding:2px 10px; font-size:12px; font-weight:800; letter-spacing:0.5px;
}
.ac-stage__pet{
  position:absolute; bottom:-6px; right:-10px; z-index:1;
  width:36px; height:36px; border-radius:50%;
  background:var(--ac-panel); border:3px solid var(--ac-edge);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}

.ac-xp{ margin-top:12px; }
.ac-xp__label{
  display:flex; justify-content:space-between; font-size:12px;
  color:var(--ac-text-dim); font-weight:800; margin-bottom:4px;
}
.ac-xpbar{
  height:16px; border-radius:999px; background:var(--ac-panel-2);
  border:3px solid var(--ac-edge); overflow:hidden;
}
.ac-xpbar__fill{
  height:100%; border-radius:999px; min-width:4px;
  background:linear-gradient(90deg,#63E08A,#23A354);
  transform-origin:left;
  animation:ac-xp-grow 0.9s cubic-bezier(0.34,1.2,0.64,1);
  transition:width 0.4s ease;
}
@keyframes ac-xp-grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.ac-home-stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; font-weight:800; font-size:13px; }
.ac-home-stats > span{
  background:var(--ac-panel-2); border:3px solid var(--ac-edge);
  border-radius:999px; padding:5px 14px; color:var(--ac-edge);
}

/* ---- ── SECTION ── ribbons: navy pill + dashed rule ---- */
.ac-section{ display:flex; align-items:center; gap:12px; margin:28px 0 14px; }
.ac-section::after{ content:''; flex:1; border-top:3px dashed var(--ac-line); }
.ac-section__pill{
  background:var(--ac-edge); color:#FFFFFF; border-radius:999px;
  padding:6px 16px; font-size:12px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase; white-space:nowrap;
}
.ac-section--purple .ac-section__pill{ background:var(--ac-purple-deep); }
.ac-section--yellow .ac-section__pill{ background:var(--ac-yellow-deep); }
.ac-section--blue .ac-section__pill{ background:var(--ac-blue-deep); }
.ac-play-note{ margin-top:22px; }

/* ---- sprite chips (the 60 collectibles) ---- */
.ac-sprites{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:10px; }
.ac-sprites--mini{ grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:8px; max-height:240px; overflow-y:auto; }
.ac-sprite{
  position:relative; background:var(--ac-panel); border:3px solid var(--ac-line);
  border-radius:14px; padding:10px 4px 8px; display:flex; flex-direction:column;
  align-items:center; gap:3px; color:var(--ac-text); font-family:inherit;
}
button.ac-sprite{ cursor:pointer; transition:transform 0.06s; }
button.ac-sprite:active{ transform:translateY(2px); }
.ac-sprite__glyph{ font-size:26px; }
/* Painted block-print icon, where a collection has one. Same footprint as
   the emoji it replaces so a mixed grid (painted set next to an emoji set)
   still lines up row for row. */
.ac-sprite__art{
  width:38px; height:38px; display:block; object-fit:contain;
  border-radius:8px; background:#F6F0E2;
}
.ac-sprites--mini .ac-sprite__art{ width:30px; height:30px; }
/* Kipwick Originals paintings are full scenes, so they fill their square. */
.ac-sprite__art--club{ object-fit:cover; }
.ac-sprite--resting{ opacity:.7; border-style:dashed; }
.ac-sprite__name{ font-size:9px; font-weight:800; color:var(--ac-text-dim); text-align:center; }

.ac-sprite--common{ border-color:var(--rar-common); }
.ac-sprite--rare{ border-color:var(--rar-rare); }
.ac-sprite--epic{ border-color:var(--rar-epic); }
.ac-sprite--legendary{ border-color:var(--rar-legend); }
.ac-sprite--mythic{ border-color:var(--rar-mythic); }
/* the top tiers glow: the border duplicated underneath and blurred */
.ac-sprite--legendary::before, .ac-sprite--mythic::before{
  content:''; position:absolute; inset:-3px; border-radius:inherit;
  border:3px solid var(--rar-legend); filter:blur(4px); z-index:-1;
}
.ac-sprite--mythic::before{ border-color:var(--rar-mythic); }

.ac-sprite--unknown{ border:3px dashed var(--ac-line); opacity:0.6; }
.ac-sprite--unknown .ac-sprite__glyph{ color:var(--ac-text-mute); }
.ac-sprite.is-selected{ border-color:var(--ac-yellow) !important; box-shadow:0 0 0 3px var(--ac-yellow) !important; }
.ac-sprite__count{
  position:absolute; top:-8px; right:-8px; background:var(--ac-red); color:#FFFFFF;
  border:2px solid var(--ac-edge);
  font-size:10px; font-weight:800; border-radius:999px; min-width:20px; height:20px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
/* The unread-card dot: this critter is yours, but you have never opened
   its card. Top-LEFT, because .ac-sprite__count already owns the top-right
   and a spare you haven't read needs to show both at once. No number on
   it — one card is one card, and a count here would just be clutter. */
.ac-sprite__new{
  position:absolute; top:-7px; left:-7px; width:16px; height:16px; border-radius:50%;
  background:var(--ac-yellow); border:3px solid var(--ac-edge);
  box-shadow:0 0 0 2px var(--ac-panel);
  animation:ac-dot-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .ac-sprite__new{ animation:none; } }

/* The invitation line above the grid. An offer, never a chore list. */
.ac-unread{
  /* 12px above: clear of the Sets / All buttons' soft shadow, which
     otherwise sits behind the top of the words */
  margin:12px 0 12px; font-weight:800; color:var(--ac-purple-deep);
}

.ac-rarity-legend{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:12px; }
.ac-rarity-key{ font-size:11px; font-weight:800; letter-spacing:0.5px; }

/* ---- item cards (skins & pets in locker and shop) ---- */
.ac-items{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
.ac-item{
  background:var(--ac-panel); border:3px solid var(--ac-edge); border-radius:16px;
  padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge);
}
.ac-item__glyph{ font-size:34px; }
.ac-item__name{ font-weight:800; font-size:13px; text-align:center; }
.ac-item__meta{ display:flex; gap:8px; font-size:11px; font-weight:800; color:var(--ac-text-dim); }
.ac-item__btn{ font-size:12px; padding:8px 16px; }
/* Locked stays visible — grayscale plus the goal, never hidden. */
.ac-item--locked{ opacity:0.8; border-color:var(--ac-line); box-shadow:0 var(--ac-lift-sm) 0 var(--ac-line); }
.ac-item--locked .ac-item__glyph{ filter:grayscale(0.85); }
.ac-item__lock{ font-size:11px; font-weight:800; color:var(--ac-purple-deep); }
/* tapped a locked thing? it wiggles — it never just does nothing */
.ac-wiggle{ animation:ac-wiggle 0.22s ease-in-out; }
@keyframes ac-wiggle{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); }
}

/* ---- trade offers ---- */
.ac-trade-step{ font-size:14px; font-weight:800; color:var(--ac-text); margin:18px 0 10px; text-align:left; }
.ac-offer{
  background:var(--ac-panel); border:3px solid var(--ac-edge); border-radius:16px; padding:14px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  margin-bottom:12px; box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge);
}
.ac-offer .ac-sprite{ background:var(--ac-panel-2); min-width:76px; }
.ac-offer__text{ font-size:13px; color:var(--ac-text-dim); flex-basis:100%; text-align:center; }
.ac-offer__text b{ color:var(--ac-text); }
.ac-offer__chips{ display:flex; align-items:center; gap:12px; }
.ac-offer__side{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.ac-offer__label{ font-size:10px; font-weight:800; letter-spacing:1px; color:var(--ac-text-mute); }
.ac-offer__swap{ font-size:22px; }
.ac-offer__warn{ flex-basis:100%; font-size:12px; color:var(--ac-purple-deep); font-weight:800; margin:0; text-align:center; }
.ac-offer__btns{ display:flex; gap:10px; }

/* ---- family leaderboard ---- */
.ac-lb{ display:flex; flex-direction:column; gap:12px; max-width:560px; margin:0 auto; }
.ac-lb__row{
  display:flex; align-items:center; gap:12px;
  background:var(--ac-panel); border:3px solid var(--ac-edge);
  color:var(--ac-text); border-radius:16px; padding:12px 16px;
  font-family:inherit; cursor:pointer; text-align:left;
  box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge);
  transition:transform 0.06s, box-shadow 0.06s;
}
.ac-lb__row:active{ transform:translateY(var(--ac-lift-sm)); box-shadow:0 0 0 var(--ac-edge); }
.ac-lb__medal{ font-size:20px; width:26px; flex:none; }
.ac-lb__who{ font-weight:800; flex:1; display:flex; align-items:center; gap:8px; font-size:15px; }
.ac-lb__pet{ font-size:13px; }
.ac-lb__stats{
  display:flex; gap:10px; font-size:12px; font-weight:800; color:var(--ac-text-dim);
  flex-wrap:wrap; justify-content:flex-end;
}
.ac-modal__card--loadout{ width:min(400px, 92vw); }
.ac-loadout__equip{ display:flex; align-items:center; gap:12px; justify-content:center; margin:12px 0; }
.ac-loadout__labels{ text-align:left; font-weight:800; font-size:14px; }

/* ---- level-up moment & toasts ---- */
.ac-levelup{
  position:fixed; inset:0; z-index:80; background:rgba(30,43,99,0.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; font-family:var(--ac-font);
}
.ac-levelup__card{
  background:var(--ac-panel); border:var(--ac-bd) solid var(--ac-edge);
  border-radius:var(--ac-radius); padding:34px 30px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow:0 var(--ac-lift) 0 var(--ac-edge), 0 18px 30px rgba(30,43,99,0.35);
}
.ac-levelup h2{
  font-size:44px; margin:0; color:var(--ac-yellow);
  -webkit-text-stroke:2px var(--ac-edge); paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(30,43,99,0.25);
}
.ac-levelup__sub{ font-size:15px; color:var(--ac-text-dim); font-weight:800; margin:0; }
.ac-levelup__items{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.ac-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ac-panel); color:var(--ac-text); border:3px solid var(--ac-edge);
  padding:12px 20px; border-radius:999px; font-weight:800; font-size:14px; z-index:70;
  font-family:var(--ac-font);
  box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge), 0 12px 20px rgba(30,43,99,0.3);
  max-width:90vw; text-align:center;
}

/* ---- idle life: gentle bobbing, staggered so nothing syncs ---- */
.ac-floaty{ animation:ac-floaty 3.4s ease-in-out infinite; }
@keyframes ac-floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* ---- the biggest moments only ---- */
.shake{ animation:ac-shake 0.32s ease-in-out; }
@keyframes ac-shake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,2px); } 40%{ transform:translate(5px,-3px); }
  60%{ transform:translate(-4px,2px); } 80%{ transform:translate(3px,-1px); }
}

/* =====================================================================
   REDUCED MOTION — the site works exactly the same with everything
   still. Press transforms stay (they're feedback, not decoration).
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .ac-floaty, .ac-badge--hot, .ac-xpbar__fill, .shake{ animation:none !important; }
  .ac-tile{ transition:none; }
  .ac-tile:hover{ transform:none; }
}

/* =====================================================================
   COLLECTIONS (R2B · E1) — the three sprite states, the badge banner,
   the set cards, and the completion card.
   ===================================================================== */

/* ---- the three states (see catalog.js spriteState) ---- */
/* silhouette: the emoji blacked out on a light tile, name ???, ring kept
   (the rarity class still sets border-color). Contrast: the black shape
   at .55 on cream reads as a dark grey cut-out, never as a broken glyph. */
.ac-sprite--silhouette{ background:var(--ac-panel-2); }
.ac-sprite--silhouette .ac-sprite__glyph{ filter:brightness(0); opacity:0.55; }
/* The painted outline file is ALREADY a solid silhouette — flattening it
   again would only mute it, so it just softens slightly like the emoji does. */
.ac-sprite--silhouette .ac-sprite__art{ opacity:0.72; }
.ac-sprite--silhouette .ac-sprite__name{ color:var(--ac-text-mute); letter-spacing:1px; }
.ac-sprite--silhouette.ac-sprite--legendary::before{ opacity:0.55; }
/* hidden: a held place. No name, no ring, not clickable — but it wears the
   shared mystery icon so it reads as a present nobody has opened rather than
   a blank cell. */
.ac-sprite--hidden{
  border:3px dashed var(--ac-line); background:transparent; box-shadow:none;
  min-height:74px; opacity:0.55; justify-content:center;
}
.ac-sprite__art--mystery{ background:transparent; opacity:.85; }
/* the "JAX HAS ONE" chip on a silhouette a sibling can trade */
.ac-sprite__hint{
  position:absolute; bottom:-9px; left:50%; transform:translateX(-50%);
  font-size:8px; font-weight:800; letter-spacing:0.4px; padding:1px 6px;
  background:var(--ac-blue); color:#FFFFFF; border:2px solid var(--ac-edge);
  border-radius:99px; white-space:nowrap;
}
.ac-sprites--set{ row-gap:16px; }

/* ---- badge banner: bunting with pennants ---- */
.ac-banner{ padding:6px 0 0; }
.ac-bunting{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:10px 8px 6px;
  border-top:4px solid var(--ac-edge); border-radius:2px;
}
.ac-pennant{
  width:86px; padding:10px 6px 16px; text-align:center;
  background:linear-gradient(180deg,#FFF8E4,#FFE9B8); color:#7A4E00;
  clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);
  transform-origin:top center; animation:ac-sway 2.6s ease-in-out infinite;
}
.ac-pennant__e{ display:block; font-size:30px; line-height:1.1; }
.ac-pennant__n{ display:block; font-size:10.5px; font-weight:800; line-height:1.15; margin-top:2px; }
.ac-pennant--empty{
  background:repeating-linear-gradient(45deg,var(--ac-panel-2) 0 6px,#F1E4C4 6px 12px);
  color:var(--ac-text-mute); opacity:0.7; animation:none;
}
.ac-pennant--empty .ac-pennant__e{ filter:grayscale(1); opacity:0.6; }
@keyframes ac-sway{ 0%,100%{ transform:rotate(-2.5deg); } 50%{ transform:rotate(2.5deg); } }
.ac-banner__caption{ margin:8px 0 0; text-align:center; font-size:12px; font-weight:800; color:var(--ac-text-dim); letter-spacing:0.5px; }
@media (prefers-reduced-motion: reduce){ .ac-pennant{ animation:none; } }

/* ---- Collections header card ---- */
.ac-col-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ac-col-head__emoji{ font-size:44px; }
.ac-col-head__text{ flex:1; min-width:200px; }
.ac-col-head__text h2{ margin:0; font-size:26px; }
.ac-col-head__text p{ margin:2px 0 0; font-size:14px; color:var(--ac-text-dim); }
.ac-col-head__count{ text-align:center; }
.ac-col-head__n{ font-size:31px; line-height:1; }
.ac-col-head__of{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ac-text-mute); }

/* ---- set cards ---- */
.ac-sets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.ac-set{
  background:var(--ac-panel); border:var(--ac-bd) solid var(--ac-edge); border-radius:var(--ac-radius);
  box-shadow:0 var(--ac-lift) 0 var(--ac-edge); overflow:hidden; text-align:left;
}
.ac-set.is-done{ border-color:var(--ac-yellow-deep); box-shadow:0 var(--ac-lift) 0 var(--ac-yellow-deep),0 0 34px rgba(255,201,60,.5); }
/* A set that isn't in the wild yet (Fantasy, Space — see COLLECTION_TIERS).
   Cooled down, not greyed out and not disabled: it still opens, it still
   shows anything the kid has traded for, and it says what unlocks it. A
   long-term goal has to look like a goal, which means it has to look
   like something worth wanting rather than something switched off. */
.ac-set.is-locked{ border-style:dashed; }
.ac-set.is-locked .ac-set__icon{ filter:grayscale(0.55); opacity:0.8; }
.ac-set.is-locked .ac-setbar__fill{ background:var(--ac-text-dim); }
/* The header is the tap target for the whole card, so it presses like
   one: a 1st grader who can't find the chevron still gets confirmation
   that the thing they touched is a thing that does something. */
.ac-set__top{
  width:100%; display:flex; align-items:center; gap:13px; padding:15px 16px 12px;
  background:none; border:0; color:var(--ac-text); font-family:inherit; font-weight:800; cursor:pointer; text-align:left;
  transition:background .12s, transform .06s;
}
.ac-set__top:hover{ background:var(--ac-panel-2); }
.ac-set__top:active{ background:var(--ac-panel-2); transform:scale(0.985); }
.ac-set__icon{ width:56px; height:56px; flex:none; display:grid; place-items:center; font-size:30px; border-radius:14px; border:3px solid var(--ac-edge); background:var(--ac-panel-2); }
.ac-set__title{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ac-set__name{ font-size:19px; line-height:1.1; }
.ac-set__sub{ font-size:12.5px; color:var(--ac-text-dim); }
/* OPEN / CLOSE — a picture AND a word, built like every other button on
   the site (navy edge, solid underside, presses down). The old version
   was a bare grey ▶, which reads as an affordance only to someone who
   already knows the pattern. */
.ac-set__chev{
  margin-left:auto; flex:none; display:flex; align-items:center; gap:5px;
  padding:7px 11px; border-radius:999px;
  background:var(--ac-yellow); color:var(--ac-edge);
  border:3px solid var(--ac-edge); box-shadow:0 4px 0 var(--ac-edge);
  font-size:11px; font-weight:800; letter-spacing:0.8px;
  transition:box-shadow .06s, transform .06s;
}
.ac-set__chevarrow{ font-size:13px; line-height:1; transition:transform .2s; }
.ac-set.is-open .ac-set__chevarrow{ transform:rotate(180deg); }
.ac-set.is-open .ac-set__chev{ background:var(--ac-panel-2); }
.ac-set__top:active .ac-set__chev{ transform:translateY(4px); box-shadow:0 0 0 var(--ac-edge); }

/* The nudge: the first set's button waves until a kid opens something,
   then never again this sitting. A demonstration of the gesture, not an
   instruction about it — and never a red dot, because nothing here is
   wrong or waiting. */
@keyframes ac-set-nudge{
  0%,72%,100%{ transform:translateY(0) rotate(0); }
  78%{ transform:translateY(-4px) rotate(-5deg); }
  84%{ transform:translateY(-4px) rotate(5deg); }
  90%{ transform:translateY(-2px) rotate(0); }
}
.ac-set--nudge .ac-set__chev{ animation:ac-set-nudge 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .ac-set--nudge .ac-set__chev{ animation:none; }
}
.ac-setbar{ height:16px; margin:0 16px; background:var(--ac-panel-2); border:3px solid var(--ac-edge); border-radius:999px; overflow:hidden; }
.ac-setbar__fill{ height:100%; background:linear-gradient(90deg,#63E08A,#23A354); border-radius:999px; box-shadow:inset 0 -5px 0 rgba(0,0,0,.13); transition:width .7s cubic-bezier(.34,1.3,.64,1); }
.ac-setbar__fill.is-full{ background:linear-gradient(90deg,var(--ac-yellow),var(--ac-yellow-deep)); }
.ac-set__reward{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:11px 16px 14px; font-size:12.5px; color:var(--ac-text-dim); }
.ac-set__reward b{ color:var(--ac-text); }
.ac-set__body{ display:none; padding:4px 16px 18px; }
.ac-set.is-open .ac-set__body{ display:block; }
.ac-set__locked{ margin:14px 0 0; font-size:12.5px; font-weight:800; color:var(--ac-purple-deep); text-align:center; }
.ac-col-hint{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:16px; padding:10px 13px;
  font-size:13px; background:var(--ac-tint-blue); border:3px dashed var(--ac-blue); border-radius:12px; color:var(--ac-text);
}
.ac-col-hint__e{ font-size:19px; }
.ac-col-hint__btn{ margin-left:auto; font-size:13px; padding:8px 16px; }

/* ---- the completion card ---- */
.ac-complete__card{ width:min(470px, 92vw); max-height:88vh; overflow:auto; }
.ac-complete__kicker{ margin:0; font-size:13px; letter-spacing:2px; color:var(--ac-text-mute); font-weight:800; }
.ac-complete__icon{ font-size:60px; line-height:1.1; }
.ac-rewards{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin:16px 0; }
.ac-reward{ padding:13px 7px; background:var(--ac-panel-2); border:3px solid var(--ac-edge); border-radius:14px; }
.ac-reward__e{ font-size:32px; line-height:1.2; }
.ac-reward__k{ font-size:9.5px; letter-spacing:0.9px; text-transform:uppercase; color:var(--ac-text-mute); margin-top:3px; font-weight:800; }
.ac-reward__n{ font-size:12.5px; line-height:1.2; font-weight:800; }
.ac-complete__card--grand{ background:linear-gradient(180deg,#FFFFFF,#FFF4D2); }

/* =====================================================================
   FINDING CRITTERS (R2B · E2) — the drop reveal and the level-up beat.
   ===================================================================== */
.ac-reveal__card{ width:min(440px, 92vw); }
.ac-reveal__kicker{ margin:0; font-size:13px; letter-spacing:2px; color:var(--ac-text-mute); font-weight:800; }
.ac-reveal__stage{ min-height:132px; display:grid; place-items:center; margin:6px 0 2px; }
.ac-reveal__chest{ font-size:84px; line-height:1.1; }
.ac-reveal__chest--pop{ animation:ac-chest 0.7s ease-in-out; }
@keyframes ac-chest{
  0%{ transform:scale(0.6) rotate(-8deg); } 40%{ transform:scale(1.15) rotate(6deg); }
  70%{ transform:scale(0.95) rotate(-4deg); } 100%{ transform:scale(1.3) rotate(0); opacity:0.2; }
}
.ac-reveal__ring{
  width:120px; height:120px; border-radius:50%; display:grid; place-items:center;
  background:var(--ac-panel); border:6px solid var(--rar-common);
  animation:ac-scalein 0.45s cubic-bezier(.34,1.6,.64,1);
}
.ac-reveal__ring--rare{ border-color:var(--rar-rare); }
.ac-reveal__ring--epic{ border-color:var(--rar-epic); box-shadow:0 0 0 6px rgba(169,113,245,.25); }
.ac-reveal__ring--legendary{ border-color:var(--rar-legend); box-shadow:0 0 28px rgba(255,201,60,.75); }
.ac-reveal__critter{ font-size:64px; line-height:1; }
@keyframes ac-scalein{ from{ transform:scale(0); } to{ transform:scale(1); } }
.ac-reveal__label{ margin:6px 0 0 !important; }
.ac-reveal__name{ margin:2px 0 6px; font-size:18px; font-weight:800; }
.ac-reveal__rarity{ display:inline-block; margin-bottom:8px; }
.ac-reveal__rarity--rare{ background:var(--ac-tint-blue); }
.ac-reveal__rarity--epic{ background:var(--ac-tint-purple); }
.ac-reveal__rarity--legendary{ background:var(--ac-yellow); }
.ac-reveal__say{ margin:4px auto 2px; max-width:320px; font-size:17px; font-weight:800; line-height:1.35; color:var(--ac-edge); }
.ac-reveal__note{ margin:6px 0 0; font-size:13px; font-weight:800; color:var(--ac-purple-deep); }
.ac-reveal__btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.ac-reveal .ac-btn--inline + .ac-btn--inline{ margin-left:8px; }

/* the level-up beat: silhouettes of what just became findable */
.ac-levelup__beat{ margin:10px 0 6px; font-size:16px; font-weight:800; color:var(--ac-purple-deep); letter-spacing:0.5px; }
.ac-levelup__silhouettes{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:center; margin-bottom:10px; }
.ac-silhouette{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:26px;
  background:var(--ac-panel-2); border:3px solid var(--rar-common);
}
.ac-silhouette{ color:transparent; text-shadow:0 0 0 rgba(30,43,99,.75); }   /* the shape, not the colours */
.ac-silhouette--rare{ border-color:var(--rar-rare); }
.ac-silhouette--epic{ border-color:var(--rar-epic); }
.ac-silhouette--legendary{ border-color:var(--rar-legend); }
.ac-levelup__more{ font-size:12px; font-weight:800; color:var(--ac-text-dim); }

/* =====================================================================
   THE BONUS VAULT (R2B · E4) — three doors, a timing bar, and a payout
   that never goes below the floor.
   ===================================================================== */
.ac-vault__card{ width:min(420px, 92vw); }
.ac-vault__emoji{ font-size:64px; line-height:1.2; }
.ac-vault__doors{ display:flex; gap:14px; justify-content:center; margin:14px 0 18px; }
.ac-vault__door{
  width:74px; height:74px; display:grid; place-items:center; font-size:40px;
  background:linear-gradient(180deg,#FFF4DA,#F0DFB4);
  border:4px solid var(--ac-edge); border-radius:16px;
  box-shadow:0 5px 0 var(--ac-edge);
  animation:ac-vault-shimmer 1.6s ease-in-out infinite;
}
@keyframes ac-vault-shimmer{
  0%,100%{ filter:brightness(1); transform:translateY(0); }
  50%{ filter:brightness(1.18); transform:translateY(-3px); }
}
.ac-vault__door.is-shut{ animation:none; opacity:0.35; filter:grayscale(0.7); transform:scale(0.9); }
.ac-vault__door.is-open{
  animation:none; transform:scale(1.22); background:linear-gradient(180deg,#FFE9A8,var(--ac-yellow));
  box-shadow:0 5px 0 var(--ac-yellow-deep), 0 0 34px rgba(255,201,60,.75);
}
/* THE TIMING BAR — and the bug that broke the whole mini-game.

   AJ, Aug 23 2026: "I never got a green light, and when I just randomly
   clicked it gave me coins." Both halves had the same cause, and it was
   this rule.

   .ac-levelup__card is `display:flex; flex-direction:column;
   align-items:center`. In a column flex container, align-items:center
   makes every child shrink to its own content width — and BOTH of this
   track's children (the green zone and the red marker) are absolutely
   positioned, so they contribute no width at all. The bar was therefore
   about four pixels wide: a sliver, with the green zone and the marker
   squeezed invisibly inside it.

   So there was never a green light to see, and the marker's position
   still swept 0..1 across a bar nobody could read — which is why a tap
   at any moment paid out what looked like a random number of coins. The
   payout maths was right the whole time; the thing it was measuring was
   invisible.

   align-self:stretch opts this one child out of the centring and lets it
   fill the card, which is what every line below always assumed. */
.ac-vault__track{
  position:relative; align-self:stretch; width:auto;
  height:34px; margin:0 4px 12px; overflow:visible;
  background:var(--ac-panel-2); border:4px solid var(--ac-edge); border-radius:999px;
  transition:box-shadow 0.12s;
}
/* IN THE GREEN: the whole bar acknowledges it, not just the marker, so
   the moment to tap is unmissable from across a room. */
.ac-vault__track.is-hot{ box-shadow:0 0 0 4px rgba(99,224,138,0.5); }
/* left/width are set from the run's accuracy in arcade-shell.js */
.ac-vault__zone{
  position:absolute; left:38%; width:24%; top:0; bottom:0; border-radius:999px;
  background:linear-gradient(180deg,#63E08A,#23A354); opacity:0.85;
  transition:left 0.3s ease, width 0.3s ease;
}
.ac-vault__marker{
  position:absolute; top:-5px; bottom:-5px; left:50%; width:12px; margin-left:-6px;
  background:var(--ac-red); border:3px solid var(--ac-edge); border-radius:99px;
  transition:background 0.1s, transform 0.1s;
}
/* THE GREEN LIGHT. Without this the marker looked the same inside the
   target as outside it, so "tap when it's in the green" named a state
   the screen never actually showed. */
.ac-vault__marker.is-hot{
  background:#8CFF9E; transform:scaleX(1.5) scaleY(1.12);
  box-shadow:0 0 14px rgba(140,255,158,0.95);
}
/* The live payout, riding above the bar: what this tap is worth RIGHT
   NOW. It is what makes the green mean something before the tap. */
.ac-vault__live{
  position:absolute; left:0; right:0; top:-26px; text-align:center;
  font-size:15px; font-weight:800; color:var(--ac-edge);
}
.ac-vault__teach{
  margin:0 0 14px; font-size:14px; font-weight:700; line-height:1.45;
  color:var(--ac-text-dim);
}
.ac-vault__tap{ font-size:18px; padding:14px 26px; }
.ac-vault__skip{ display:block; margin:10px auto 0; font-size:13px; }
.ac-vault__prize{
  margin:6px 0 2px; font-size:34px; font-weight:800; color:var(--ac-yellow-deep);
  animation:ac-scalein 0.4s cubic-bezier(.34,1.6,.64,1);
}
@media (prefers-reduced-motion: reduce){
  .ac-vault__door{ animation:none; }
  /* The marker parks in the centre under reduced motion, so the bar is
     "hot" from the moment it appears — keep the colour, drop the pulse. */
  .ac-vault__marker{ transition:none; }
}

/* =====================================================================
   OPEN TRADES (R2B · E5) — two trays, two shelves, and the dot.
   ===================================================================== */
.ac-trays{ display:flex; align-items:stretch; gap:10px; margin:6px 0 4px; }
.ac-trays__swap{ align-self:center; font-size:24px; flex:none; }
.ac-tray{
  flex:1; min-width:0; padding:10px 10px 12px; border-radius:16px;
  background:var(--ac-panel-2); border:3px dashed var(--ac-line);
}
.ac-tray__label{
  display:block; font-size:10px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--ac-text-mute); text-align:center; margin-bottom:6px;
}
.ac-tray__row{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; min-height:64px; align-items:center; }
.ac-tray__empty{ font-size:26px; opacity:0.35; }
.ac-sprite--tray{ min-width:58px; }
.ac-sprite--tray .ac-sprite__glyph{ font-size:22px; }
/* a spare that's all used up, or a tray that's full */
.ac-sprite.is-spent{ opacity:0.4; filter:grayscale(0.75); cursor:default; }

.ac-offer__shape{
  margin:8px 0 2px; text-align:center; font-size:13.5px; font-weight:800;
  color:var(--ac-purple-deep); background:var(--ac-tint-purple);
  border-radius:12px; padding:8px 12px;
}
.ac-offer__row{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
/* Rarity pips: a wordless second read on the shape of a deal. Scoped
   under .ac-offer__dots so they outrank the notification .ac-dot below,
   whose red background would otherwise win on source order. */
.ac-offer__dots{ display:flex; gap:3px; justify-content:center; margin-top:5px; }
.ac-offer__dots .ac-dot{
  position:static; width:8px; height:8px; min-width:0; padding:0; font-size:0;
  border:1px solid var(--ac-edge); border-radius:99px; box-shadow:none; animation:none;
}
.ac-offer__dots .ac-dot--common{ background:var(--rar-common); }
.ac-offer__dots .ac-dot--rare{ background:var(--rar-rare); }
.ac-offer__dots .ac-dot--epic{ background:var(--rar-epic); }
.ac-offer__dots .ac-dot--legendary{ background:var(--rar-legend); }
/* The builder: one panel per child, each with their face and name and its
   own tint (warm = you give, blue = you get), so it is always clear whose
   critters are whose. Side by side on a wide screen, stacked on a phone. */
.ac-trade-sides{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-top:6px; }
@media (min-width:760px){ .ac-trade-sides{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; } }
.ac-trade-sides__swap{ align-self:center; text-align:center; font-size:28px; line-height:1; }
.ac-trade-side{
  min-width:0; padding:12px 12px 14px; border:var(--ac-bd) solid var(--ac-edge); border-radius:var(--ac-radius);
  box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge);
}
.ac-trade-side--give{ background:#FFE9C2; }
.ac-trade-side--get{ background:var(--ac-tint-blue); }
.ac-trade-side__head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; text-align:left; }
.ac-avatar--trade{ width:56px; height:56px; font-size:30px; border-width:3px; }
.ac-trade-side__title{ font-size:20px; font-weight:800; color:var(--ac-edge); line-height:1.1; }
.ac-trade-side__who{ font-size:14px; font-weight:800; color:var(--ac-text-dim); }
.ac-trade-side .ac-tray{ background:rgba(255,255,255,.75); border-color:var(--ac-edge); }
.ac-trade-side .ac-trade-step{ margin:14px 0 8px; }
.ac-tray__hint{ font-size:13px; font-weight:800; color:var(--ac-text-mute); text-align:center; }
/* Send: one big button, always reachable. On a phone it sticks to the
   bottom of the screen, just above the tab bar. */
.ac-trade-send{
  text-align:center; margin-top:16px; padding:8px 10px 10px; border-radius:var(--ac-radius);
  background:var(--ac-panel); border:var(--ac-bd) solid var(--ac-edge); box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge);
  position:sticky; bottom:calc(12px + var(--kidnav-space, 0px)); z-index:20;
}
.ac-trade-send__btn{ width:100%; max-width:420px; margin:0 auto; }
.ac-trade-send__why{ margin:8px 0 0; font-size:14px; font-weight:800; color:var(--ac-purple-deep); }
.ac-trade-send__why.is-ready{ color:#167A3E; }

/* The notification dot — on a bottom-bar button and on the avatar.

   It hangs off the whole button (kid-nav.js setDot), on its trailing
   corner, never off the icon: beside the icon it landed between the
   picture and the word and read as "!CRITTERS". */
.ac-dot{
  /* Far enough out to clear the pill's rounded corner. At -6px it sat
     over the last letter of the label, which is the same complaint at
     the other end of the word. */
  position:absolute; top:-11px; right:-11px; min-width:24px; height:24px; padding:0 6px;
  display:grid; place-items:center; font-size:12px; font-weight:800; color:#FFFFFF;
  background:var(--ac-red); border:3px solid var(--ac-edge); border-radius:999px;
  box-shadow:0 3px 0 var(--ac-edge); z-index:3;
  pointer-events:none;   /* the tab underneath keeps the whole tap target */
}
.ac-dot--avatar{ top:-4px; right:-4px; }
@keyframes ac-dot-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); } }
.ac-dot--pulse{ animation:ac-dot-pulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .ac-dot--pulse{ animation:none; } }
/* how many of this critter are still free to offer (counts down live) */
.ac-sprite__spare{
  position:absolute; top:-8px; right:-8px; min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center; font-size:10px; font-weight:800;
  color:var(--ac-edge); background:var(--ac-yellow);
  border:2px solid var(--ac-edge); border-radius:999px;
}
.ac-sprite.is-spent .ac-sprite__spare{ background:var(--ac-line); color:var(--ac-text-mute); }


/* =====================================================================
   PRACTICE POWER (E7) — the Clubhouse meter. Green while it is being
   built, gold at full, and never red: falling behind is not an error
   state, it is just a smaller number.
   ===================================================================== */
.ac-power{ margin-top:14px; }
.ac-power__top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.ac-power__name{ font-size:11px; font-weight:800; letter-spacing:1.2px; color:var(--ac-text-dim); }
.ac-power__num{ font-size:17px; font-weight:800; color:var(--ac-text); }
.ac-power__bar{
  height:16px; background:var(--ac-panel-2); border:3px solid var(--ac-edge);
  border-radius:999px; overflow:hidden;
}
.ac-power__fill{
  height:100%; border-radius:999px; background:linear-gradient(90deg,#63E08A,#23A354);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.13);
  transition:width 0.7s cubic-bezier(.34,1.3,.64,1);
}
.ac-power__fill.is-full{ background:linear-gradient(90deg,var(--ac-yellow),var(--ac-yellow-deep)); }
.ac-power__hint{ margin:6px 0 0; font-size:12px; font-weight:800; color:var(--ac-text-dim); }

/* =====================================================================
   THE CRITTER TRAIL — the same meter shape, a different colour.

   Deliberately built out of .ac-power rather than beside it: these two
   bars are the same KIND of thing (something you fill by playing well)
   and a child should read them as a pair. Purple, so the two are never
   confused at a glance, and one step brighter when the next good run is
   the one that pays — the only moment this bar is allowed to shout.
   ===================================================================== */
.ac-trail{ margin-top:10px; }
.ac-trail__fill{
  height:100%; border-radius:999px; background:linear-gradient(90deg,#C79BFF,#8B45E0);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.13);
  transition:width 0.7s cubic-bezier(.34,1.3,.64,1);
}
.ac-trail__fill.is-close{
  background:linear-gradient(90deg,var(--ac-yellow),var(--ac-yellow-deep));
  animation:trailPulse 1.1s ease-in-out infinite;
}
@keyframes trailPulse{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.18); } }

/* ---- the focus: the parent's one dial, made visible to the kid ----
   A tile in the focus area wears a target badge and a warm outline. The
   same green as the practice bonus, because it is the same KIND of
   thing — a reason to pick this one — and a third colour would just be
   another thing to learn. */
.ac-badge--focus{ background:var(--ac-good); color:#fff; }
.ac-tile--focus{ border-color:var(--ac-good); box-shadow:0 var(--ac-lift) 0 var(--ac-good); }
.ac-focusline{ border-color:var(--ac-good); }

/* ---- the long-term goal, stated as a goal ---- */
.ac-nextwild{
  display:flex; align-items:center; gap:10px; margin-top:10px;
  background:var(--ac-panel-2); border:3px solid var(--ac-edge);
  border-radius:14px; padding:8px 12px;
}
.ac-nextwild__icon{ font-size:26px; line-height:1; flex:none; }
.ac-nextwild__text{ display:flex; flex-direction:column; min-width:0; }
.ac-nextwild__text b{ font-size:13px; color:var(--ac-text); }
.ac-nextwild__text span{ font-size:12px; font-weight:800; color:var(--ac-text-dim); line-height:1.35; }

@media (prefers-reduced-motion: reduce){
  .ac-trail__fill.is-close{ animation:none; }
}

/* =====================================================================
   THE TRAIL LINE — the same bar, on the end-of-run screen, moving.

   Sits inline with the award line rather than in an overlay: this fires
   after EVERY good run, and a modal that often would stop being a
   reward and start being a door to get past.
   ===================================================================== */
.ac-trailline{
  margin:12px auto 0; max-width:340px; text-align:left;
  background:var(--ac-panel-2); border:3px solid var(--ac-edge);
  border-radius:14px; padding:9px 12px 8px;
}
.ac-trailline__top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.ac-trailline__name{ font-size:10.5px; font-weight:800; letter-spacing:1.1px; color:var(--ac-text-dim); }
.ac-trailline__num{ font-size:15px; font-weight:800; color:var(--ac-text); font-variant-numeric:tabular-nums; }
.ac-trailline__bar{
  height:13px; background:var(--ac-panel); border:3px solid var(--ac-edge);
  border-radius:999px; overflow:hidden;
}
.ac-trailline__fill{
  height:100%; border-radius:999px; background:linear-gradient(90deg,#C79BFF,#8B45E0);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.13);
  /* Slow and springy on purpose — this is the bit the child is meant to
     watch, so it has to be slower than a layout transition. */
  transition:width 1.1s cubic-bezier(.34,1.15,.64,1);
}
.ac-trailline__fill.is-close{ background:linear-gradient(90deg,var(--ac-yellow),var(--ac-yellow-deep)); }
.ac-trailline__fill.is-full{
  background:linear-gradient(90deg,var(--ac-yellow),var(--ac-yellow-deep));
  animation:trailPulse 1.1s ease-in-out infinite;
}
.ac-trailline__note{ margin:6px 0 0; font-size:11.5px; font-weight:800; color:var(--ac-text-dim); }

@media (prefers-reduced-motion: reduce){
  .ac-trailline__fill{ transition:none; }
  .ac-trailline__fill.is-full{ animation:none; }
}

/* =====================================================================
   THE SEGMENTED CONTROL — two views of one thing (CRITTERS: Sets / All).

   Not tabs: tabs are for different content, a segment is for two ways of
   looking at the SAME content. The active half is filled yellow, the
   other outlined, so which one you are in is never a guess.
   ===================================================================== */
.ac-seg{ display:flex; gap:8px; justify-content:center; margin:16px auto 4px; max-width:420px; }
.ac-seg__btn{ flex:1; font-size:13px; padding:9px 14px; margin-top:0; white-space:nowrap; }
.ac-view{ margin-top:4px; }

/* ---- filter chips: All · Owned · Missing. Tap to switch, no typing. ---- */
.ac-filters{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:0 0 12px; }
.ac-filter{
  background:var(--ac-panel); border:3px solid var(--ac-edge); border-radius:999px;
  color:var(--ac-text-dim); font-family:inherit; font-weight:800; font-size:12px;
  letter-spacing:0.5px; padding:6px 16px; cursor:pointer;
  box-shadow:0 3px 0 var(--ac-edge); transition:transform 0.06s, box-shadow 0.06s;
}
.ac-filter:active{ transform:translateY(3px); box-shadow:0 0 0 var(--ac-edge); }
.ac-filter.is-on{ background:var(--ac-accent); color:var(--ac-accent-ink); }

/* =====================================================================
   THE MIRROR — the top of the ME tab: the whole look in one glance.
   ===================================================================== */
.ac-mirror{ display:flex; align-items:center; gap:20px; text-align:left; flex-wrap:wrap; }
.ac-mirror__stage{ margin:6px 0 6px 6px; }
.ac-avatar--big{ width:104px; height:104px; font-size:54px; }
.ac-mirror__id{ flex:1; min-width:150px; }
.ac-mirror__name{ font-size:24px; font-weight:800; letter-spacing:1px; }
.ac-mirror__wearing{ display:flex; flex-direction:column; gap:6px; margin-top:9px; align-items:flex-start; }
.ac-mirror__wearing > span{
  background:var(--ac-panel-2); border:3px solid var(--ac-edge); border-radius:999px;
  padding:4px 14px; font-size:13px; font-weight:800; color:var(--ac-edge);
}
/* The equipped item reads as equipped from across the room. */
.ac-item--equipped{ border-color:var(--ac-accent-deep); box-shadow:0 var(--ac-lift-sm) 0 var(--ac-accent-deep); }

/* A bare shelf gets an encouraging line, never a blank rectangle. */
.ac-shelf-note{ margin:10px 0 0; }
.ac-shelf-link{ display:flex; justify-content:center; margin-top:14px; }
.ac-shelf-link .ac-btn{ font-size:13px; padding:9px 20px; margin-top:0; }

/* =====================================================================
   PHASE 1 REDESIGN (2026-09-29) — the four-verb home.
   See claude/product-review-2026-09.md §3. The header is the avatar in
   its level ring (a button: it opens ME) and the two wallets; the tab
   bar is LEARN · PLAY · BUILD · COLLECT.
   ===================================================================== */

/* ---- the level ring: the XP bar, wrapped round the avatar ---- */
.ac-ring{
  --ring:0%;
  position:relative; flex:none; width:112px; height:112px; padding:0;
  border:none; border-radius:50%; cursor:pointer; font-family:inherit;
  background:conic-gradient(var(--ac-good) var(--ring), var(--ac-line) 0);
  box-shadow:0 0 0 4px var(--ac-edge);
  display:flex; align-items:center; justify-content:center;
  transition:transform .08s;
}
.ac-ring:active{ transform:scale(.96); }
.ac-ring:focus-visible{ outline:4px solid var(--ac-blue); outline-offset:6px; }
.ac-ring__disc{
  width:92px; height:92px; border-radius:50%; background:var(--ac-panel);
  display:flex; align-items:center; justify-content:center;
}
.ac-ring__disc .ac-avatar{ width:84px; height:84px; font-size:42px; border-width:4px; }
.ac-ring__lvl{
  position:absolute; top:-8px; left:-10px; z-index:1;
  background:var(--ac-yellow); color:var(--ac-edge); border:3px solid var(--ac-edge);
  border-radius:999px; padding:2px 10px; font-size:12px; font-weight:800; letter-spacing:.5px;
}
.ac-ring__me{
  position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); z-index:1;
  background:var(--ac-panel); color:var(--ac-edge); border:3px solid var(--ac-edge);
  border-radius:999px; padding:1px 10px; font-size:12px; font-weight:800; white-space:nowrap;
}
.ac-ring .ac-stage__pet{ bottom:4px; right:-12px; }
.ac-home-head.is-me .ac-ring__me{ background:var(--ac-yellow); }

/* ---- the two wallets ---- */
.ac-wallets{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.ac-wallets--center{ justify-content:center; margin:14px 0 4px; }
.ac-wallet{
  display:inline-flex; align-items:baseline; gap:6px;
  border:3px solid var(--ac-edge); border-radius:999px; padding:5px 14px;
  box-shadow:0 4px 0 var(--ac-edge);
}
.ac-wallet b{ font-size:20px; font-weight:800; color:var(--ac-edge); white-space:nowrap; }
/* A big wallet (50,000) stays on one line beside its word on a phone. */
@media (max-width:420px){ .ac-wallet{ padding:5px 10px; gap:4px; } .ac-wallet b{ font-size:18px; } }
.ac-wallet small{ font-size:12px; font-weight:800; color:var(--ac-text-dim); }
.ac-wallet--bricks{ background:#FFE3D6; }
.ac-wallet--sparks{ background:var(--ac-tint-blue); }

/* ---- the one-line intro at the top of LEARN and PLAY ---- */
.ac-verb{
  display:flex; align-items:center; gap:12px; text-align:left;
  max-width:720px; margin:0 auto 14px; padding:10px 14px;
  background:var(--ac-panel); border:3px solid var(--ac-edge); border-radius:var(--ac-radius-sm);
}
.ac-verb__icon{ font-size:30px; line-height:1; flex:none; }
.ac-verb__text{ display:flex; flex-direction:column; min-width:0; }
.ac-verb__text b{ font-size:17px; letter-spacing:1px; }
.ac-verb__text span{ font-size:13.5px; font-weight:700; color:var(--ac-text-dim); line-height:1.35; }

/* ---- BUILD: the honest closed door ---- */
.ac-build{ margin:0 auto; text-align:center; }
.ac-build__sign{
  display:inline-block; background:var(--ac-yellow); color:var(--ac-edge);
  border:3px solid var(--ac-edge); border-radius:10px; padding:4px 14px;
  font-weight:800; letter-spacing:1px; font-size:13px; transform:rotate(-2deg);
}
.ac-build__scene{ font-size:44px; letter-spacing:6px; margin:14px 0 6px; }
.ac-build__rule{
  margin:12px auto 0; max-width:440px; font-weight:800; font-size:14.5px;
  background:var(--ac-panel-2); border:3px solid var(--ac-edge); border-radius:var(--ac-radius-sm); padding:10px 14px;
}

/* ---- COLLECT: trail and next-wild above the sets ---- */
.ac-collect-head{ margin:0 auto 18px; text-align:left; }
.ac-collect-head .ac-power{ margin-top:0; }
.ac-collect-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }

/* The one-time "coins became bricks and sparks" card: a sentence, not a
   LEVEL UP! headline, so it is set at reading size. */
.ac-levelup__card h2.ac-settle__title{ font-size:24px; line-height:1.2; color:var(--ac-edge); text-shadow:none; -webkit-text-stroke:0; margin:6px 0; }

/* Below 720px the tab bar docks at the bottom, so the header card and
   the first panel would touch; give them the gap the tabs used to. */
@media (max-width:720px){ .ac-home .ac-homepanel{ margin-top:14px; } }

/* The BUILD tab's big door into My World (Phase 2). */
.ac-build__go{ margin:14px auto 4px; display:inline-flex; }

/* A link dressed as a button never shows a link's underline. */
a.ac-btn, a.ac-btn:hover{ text-decoration:none; }

/* =====================================================================
   🗺️ THE LAND MAP (LEARN tab) — assets/landmap.js
   ===================================================================== */
.ac-lands{ display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
.ac-lands__strip{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 8px; scrollbar-width:thin; }
.ac-landchip{ flex:none; display:flex; align-items:center; gap:8px; min-height:48px; padding:6px 16px 6px 10px;
  border:var(--ac-bd) solid var(--ac-edge); border-radius:999px; background:var(--sky, var(--ac-panel));
  font:inherit; font-weight:800; font-size:16px; color:var(--ac-edge); cursor:pointer; box-shadow:0 4px 0 var(--ac-edge); }
.ac-landchip.is-on{ transform:translateY(-2px); box-shadow:0 6px 0 var(--ac-edge); outline:4px solid var(--ac-yellow); outline-offset:1px; }
.ac-landchip__emoji{ font-size:26px; line-height:1; }
.ac-landchip--waiting{ cursor:default; opacity:.75; border-style:dashed; box-shadow:none; }
.ac-landchip--waiting .ac-landchip__emoji{ animation:ac-land-bob 2.4s ease-in-out infinite; }
@keyframes ac-land-bob{ 50%{ transform:translateY(-4px); } }
.ac-land{ background:linear-gradient(180deg, var(--sky, #fff), var(--ac-panel) 70%); border:var(--ac-bd) solid var(--ac-edge);
  border-radius:var(--ac-radius); box-shadow:0 6px 0 var(--ac-edge); padding:16px; }
.ac-land__head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.ac-land__title{ text-align:left; min-width:0; }
.ac-land__title h2{ margin:0; font-size:28px; line-height:1.1; }
.ac-land__title p{ margin:4px 0 0; font-weight:700; color:var(--ac-text-dim); }
.ac-land__ring{ flex:none; width:78px; height:78px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--ac-good) var(--p), rgba(30,43,99,.12) 0); border:3px solid var(--ac-edge); }
.ac-land__ringface{ width:60px; height:60px; border-radius:50%; background:var(--ac-panel); display:grid; place-items:center; font-size:34px; }
.ac-land__games{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }
.ac-tile--land{ background:var(--ac-panel); }
.ac-land__next{ margin:14px 0 0; font-weight:800; text-align:center; color:var(--ac-edge); }
/* A land with a painted banner (assets/art.js): the picture runs across the
   top of the card and the title sits on a panel over its foot, so text never
   sits straight on the painting. Phones get the small file. */
.ac-land.has-banner{ padding-top:0; overflow:hidden; }
.ac-land__art{ height:clamp(130px, 26vw, 230px); margin:0 -16px -46px; background:var(--sky) var(--banner) center 45% / cover no-repeat; }
.ac-land.has-banner .ac-land__head{ position:relative; background:var(--ac-panel); background:color-mix(in srgb, var(--ac-panel) 92%, transparent);
  border:3px solid var(--ac-edge); border-radius:calc(var(--ac-radius) - 4px); padding:8px 12px; box-shadow:0 4px 0 var(--ac-edge); }
@media (max-width:600px){ .ac-land__art{ background-image:var(--banner-sm); margin-bottom:-38px; } }
@media (prefers-reduced-motion: reduce){ .ac-landchip--waiting .ac-landchip__emoji{ animation:none; } }
@media (max-width:520px){ .ac-land__title h2{ font-size:22px; } .ac-land__ring{ width:62px; height:62px; } .ac-land__ringface{ width:48px; height:48px; font-size:28px; } }

.ac-badge--land{ background:var(--ac-panel-2); color:var(--ac-edge); }

/* On a phone, a game's bar keeps one row: back, the game, level and
   wallets. Who's playing is the face in the bottom bar (kid-nav.js), and
   switching is holding it (the bar took three rows and ~140px of play
   space). */
@media (max-width:520px){
  .ac-bar--game .ac-bar__who{ display:none; }
}

/* "← Arcade" in every game is a solid button, not a faint dashed link
   (AJ's tester note, 2026-10-01: in My World "there is no clear way for me
   to go back"). Same look as My World's. */
.ac-bar--game .ac-bar__back{
  background:var(--ac-yellow); color:var(--ac-edge); border:3px solid var(--ac-edge); border-style:solid;
  box-shadow:0 4px 0 var(--ac-edge); font-size:15px; padding:7px 16px; min-height:44px;
  display:inline-flex; align-items:center; gap:6px; font-weight:800; text-decoration:none; border-radius:999px;
}
.ac-bar--game .ac-bar__back:active{ transform:translateY(4px); box-shadow:0 0 0 var(--ac-edge); }
.ac-bar--game .ac-bar__back:focus-visible{ outline:4px solid var(--ac-blue); outline-offset:3px; }

/* =====================================================================
   THE BOTTOM BAR — kid-nav.js (WO-045, 2026-10-01)

     🧠 LEARN · 🎮 PLAY · ( avatar ) · 🏗️ BUILD · 🐾 COLLECT

   On every kid page, fixed to the bottom, icon AND word, safe-area
   aware, every target 56px or more. Full width on a phone; a floating
   dock on a tablet or laptop. Content clears it through
   --kidnav-space (set by kid-nav.js from the bar's real height, 0 while
   it is tucked away) and the .kidnav-spacer it adds at the end of the
   page. Below every overlay (modals 50+), above page chrome (40).
   ===================================================================== */
.kidnav{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  font-family:var(--ac-font); pointer-events:none;
  transition:transform .22s cubic-bezier(.3,.7,.4,1);
}
.kidnav-spacer{ height:var(--kidnav-space, 0px); flex:none; }
.kidnav__bar{
  pointer-events:auto; position:relative;
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); align-items:end; gap:2px;
  max-width:640px; margin:0 auto;
  background:var(--ac-panel); border:var(--ac-bd) solid var(--ac-edge); border-bottom:0;
  border-radius:24px 24px 0 0;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -6px 18px rgba(30,43,99,.18);
}
@media (min-width:700px){
  /* A dock on a big screen: lifted off the edge, rounded all round. */
  .kidnav__bar{ border-bottom:var(--ac-bd) solid var(--ac-edge); border-radius:26px;
    margin-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); padding-bottom:6px;
    box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge), 0 12px 24px rgba(30,43,99,.22); }
}
.kidnav__item{
  position:relative; min-height:58px; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border-radius:16px; color:var(--ac-text); text-decoration:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.kidnav__icon{ font-size:24px; line-height:1; }
.kidnav__label{ font-size:11.5px; font-weight:800; letter-spacing:.4px; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.kidnav__item:active{ background:var(--ac-panel-2); transform:translateY(2px); }
.kidnav__item.is-active{ background:var(--ac-accent); color:var(--ac-accent-ink);
  box-shadow:inset 0 0 0 3px var(--ac-edge); }
.kidnav__item:focus-visible, .kidnav__me:focus-visible{
  outline:4px solid var(--ac-blue); outline-offset:2px; }
.kidnav__item .ac-dot{ top:0; right:6px; min-width:22px; height:22px; font-size:11px; }

/* ---- the avatar, raised out of the bar ---- */
.kidnav__mewrap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; min-height:58px; justify-content:flex-end; }
.kidnav__me{
  --hold-ms:500ms;
  position:relative; width:72px; height:72px; margin-top:-30px; padding:0;
  border-radius:50%; border:var(--ac-bd) solid var(--ac-edge); background:var(--ac-panel);
  box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge), 0 8px 16px rgba(30,43,99,.25);
  display:grid; place-items:center; cursor:pointer; font-family:inherit;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.kidnav__me:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--ac-edge); }
.kidnav__me.is-active{ background:var(--ac-accent); }
.kidnav__face{ display:grid; place-items:center; pointer-events:none; }
.kidnav__avatar{ width:58px; height:58px; font-size:31px; border-width:0; }
.kidnav__noone{ font-size:32px; line-height:1; }
/* The hold ring: goes round once while the avatar is held. */
.kidnav__ring{ position:absolute; inset:-9px; width:calc(100% + 18px); height:calc(100% + 18px);
  transform:rotate(-90deg); pointer-events:none; overflow:visible; }
.kidnav__ring circle{ fill:none; stroke:var(--ac-good); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; opacity:0; transition:stroke-dashoffset .12s ease-out, opacity .12s; }
.kidnav__me.is-holding .kidnav__ring circle{ opacity:1; stroke-dashoffset:0; transition:stroke-dashoffset var(--hold-ms) linear, opacity .05s; }
/* ⇅ says "this one switches", so the hold is something to find. */
.kidnav__swap{
  position:absolute; right:-8px; bottom:-4px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-size:15px; font-weight:800; line-height:1;
  background:var(--ac-yellow); color:var(--ac-edge); border:3px solid var(--ac-edge); pointer-events:none;
}
.kidnav__hint{
  position:absolute; bottom:calc(100% + 34px); left:50%; transform:translate(-50%, 6px);
  white-space:nowrap; padding:5px 12px; border-radius:999px;
  background:var(--ac-edge); color:#fff; font-size:13px; font-weight:800;
  opacity:0; pointer-events:none; transition:opacity .1s, transform .1s;
}
.kidnav__mewrap.is-holding .kidnav__hint{ opacity:1; transform:translate(-50%, 0); transition-delay:.12s; }

/* ---- full-screen play: the bar slides away, a tab pulls it back ----
   The tab sits on the RIGHT EDGE, half way down: the bottom of a game's
   screen is where its own buttons live (Turn/Drop, Left/Right, Dash),
   the top is its score and Pause. Tap it for the bar; tap the game (or
   press Escape) and the bar goes away again. */
.kidnav.is-tucked{ transform:translateY(100%); }
/* …and the raised avatar, which pokes out above the bar, goes with it
   once the slide is done. */
.kidnav.is-tucked .kidnav__bar{ visibility:hidden; transition:visibility 0s .22s; }
.kidnav-tab{
  display:none; position:fixed; z-index:46;
  right:env(safe-area-inset-right, 0px); top:calc(56% - 32px);   /* kid-nav.js moves it off any button */
  flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:50px; min-height:64px; padding:6px 0 6px 3px;
  border:3px solid var(--ac-edge); border-right:0; border-radius:16px 0 0 16px;
  background:var(--ac-yellow); color:var(--ac-edge); font-family:var(--ac-font); font-size:12px; font-weight:800;
  box-shadow:-3px 4px 10px rgba(30,43,99,.25); cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.kidnav-tab.is-shown{ display:flex; }
.kidnav-tab[hidden]{ display:none; }
.kidnav-tab__icon{ font-size:14px; line-height:1; }
.kidnav-tab:focus-visible{ outline:4px solid var(--ac-blue); outline-offset:2px; }
@media print{ .kidnav-tab{ display:none !important; } }
@media (prefers-reduced-motion: reduce){
  .kidnav, .kidnav__ring circle{ transition:none !important; }
}
@media print{ .kidnav, .kidnav-spacer{ display:none; } }

/* ---- "Who's playing?" ---- */
.kidsheet{
  position:fixed; inset:0; z-index:95; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(30,43,99,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:16px 16px 0; font-family:var(--ac-font);
}
@media (min-width:700px){ .kidsheet{ align-items:center; padding-bottom:16px; } }
.kidsheet__card{
  position:relative; width:min(560px, 100%); max-height:calc(100dvh - 24px); overflow:auto;
  background:var(--ac-panel); color:var(--ac-text);
  border:var(--ac-bd) solid var(--ac-edge); border-bottom:0; border-radius:26px 26px 0 0;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); text-align:center;
  box-shadow:0 -10px 30px rgba(30,43,99,.35);
  animation:kidsheet-up .2s cubic-bezier(.3,.7,.4,1);
}
@media (min-width:700px){ .kidsheet__card{ border-bottom:var(--ac-bd) solid var(--ac-edge); border-radius:26px; padding-bottom:20px; } }
@keyframes kidsheet-up{ from{ transform:translateY(40px); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .kidsheet__card{ animation:none; } }
.kidsheet__title{ margin:4px 0 2px; font-size:24px; font-weight:800; letter-spacing:.5px; }
/* On a phone the title goes under the Close button, not beside it. */
@media (max-width:519px){ .kidsheet__card{ padding-top:62px; } }
.kidsheet__sub{ margin:0 0 14px; color:var(--ac-text-dim); font-size:15px; font-weight:700; }
.kidsheet__go{ font-size:20px; color:var(--ac-text); padding:20px 0; }
.kidsheet__close{
  position:absolute; top:10px; right:10px; min-height:44px; padding:0 14px;
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; cursor:pointer;
  border:3px solid var(--ac-edge); background:var(--ac-panel-2); color:var(--ac-edge);
  font-family:inherit; font-size:13px; font-weight:800;
}
.kidsheet__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(112px, 150px)); justify-content:center; gap:12px; margin:0 0 14px; }
.kidsheet__who{
  position:relative; min-height:128px; padding:14px 8px 12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border:var(--ac-bd) solid var(--ac-edge); border-radius:20px; background:var(--ac-panel-2);
  color:var(--ac-text); font-family:inherit; text-decoration:none; cursor:pointer;
  box-shadow:0 var(--ac-lift-sm) 0 var(--ac-edge);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.kidsheet__who:active{ transform:translateY(var(--ac-lift-sm)); box-shadow:0 0 0 var(--ac-edge); }
.kidsheet__who:focus-visible, .kidsheet__add:focus-visible, .kidsheet__back:focus-visible, .kidsheet__close:focus-visible{
  outline:4px solid var(--ac-blue); outline-offset:3px; }
.kidsheet__who.is-now{ background:var(--ac-tint-green); }
.kidsheet__who--grown{ background:var(--ac-tint-blue); }
.kidsheet__face{ width:64px; height:64px; font-size:34px; border-width:4px; }
.kidsheet__name{ font-size:17px; font-weight:800; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kidsheet__tag{ font-size:11px; font-weight:800; letter-spacing:.5px; color:var(--ac-text-dim); }
.kidsheet__tag--pin{ color:var(--ac-purple-deep); }
.kidsheet__add, .kidsheet__back{
  min-height:48px; padding:0 18px; border-radius:999px; cursor:pointer;
  border:3px dashed var(--ac-line); background:transparent; color:var(--ac-text-dim);
  font-family:inherit; font-size:14px; font-weight:800;
}
/* "➕ Add an explorer (grown-ups)": a link to the grown-ups' page (WO-069). */
.kidsheet__add{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
/* Nobody playing yet (the hub's first screen): no Close button to clear. */
.kidsheet--first .kidsheet__card{ padding-top:20px; }
.kidsheet__first{ margin:0 0 14px; }
.kidsheet__input{ max-width:300px; margin:0 auto 6px; display:block; }
.kidsheet__err{ min-height:1.2em; margin-bottom:8px; }
.kidsheet__back{ margin-top:12px; }
.kidsheet__row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; }
.kidsheet__row .kidsheet__back{ margin-top:0; }
.kidsheet__pinhead{ display:flex; justify-content:center; margin:4px 0 8px; }
.kidsheet .ac-pin__keys{ max-width:300px; margin:0 auto; }
.kidsheet .ac-pin__keys button{ min-height:56px; font-size:22px; }
body.kidsheet-open{ overflow:hidden; }
/* ME's "⇅ Who's playing?" — the button way to the same sheet. */
.ac-mirror__switch{ margin-top:12px; min-height:48px; font-size:15px; }

/* =====================================================================
   KIPWICK'S HELLO on home (assets/kipwick-hello.js): the waving picture
   in the land's colours and one line, once a day.
   ===================================================================== */
.kw-hello-slot:empty{ display:none; }
.kw-hello{ display:flex; align-items:center; gap:12px; max-width:560px; margin:0 auto 14px;
  text-align:left; animation:kw-hello-in .45s ease-out both; }
.kw-hello__kip{ flex:none; width:76px; height:76px; padding:0; border-radius:50%; overflow:hidden; cursor:pointer;
  background:#FFE3B0; border:4px solid var(--ac-edge); box-shadow:0 5px 0 var(--ac-edge); }
.kw-hello__kip img{ display:block; width:100%; height:100%; object-fit:cover; }
.kw-hello__kip:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--ac-edge); }
.kw-hello__say{ position:relative; flex:1; margin:0; padding:10px 16px; border-radius:18px;
  background:var(--ac-panel); border:3px solid var(--ac-edge); box-shadow:0 4px 0 var(--ac-edge);
  font-size:18px; font-weight:800; line-height:1.3; color:var(--ac-text); }
.kw-hello__say b{ display:block; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--kw-green-deep); }
.kw-hello__say::before{ content:''; position:absolute; left:-11px; top:50%; width:16px; height:16px; margin-top:-8px;
  background:var(--ac-panel); border-left:3px solid var(--ac-edge); border-bottom:3px solid var(--ac-edge); transform:rotate(45deg); }
@keyframes kw-hello-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .kw-hello{ animation:none; } }

/* "…" in a speech bubble while its recorded line is on the way (voice-
   engine.js waits up to ~4 s for a line it knows is recorded, rather
   than letting the device voice take over). Home's hello and land card,
   and a land game's guide bubble. Still dots with reduced motion. */
.kw-waiting::after{ content:''; display:inline-block; width:1.5em; height:.5em; margin-left:.35em; vertical-align:middle;
  background:radial-gradient(circle closest-side, currentColor 70%, transparent 76%) 0 50% / .5em .5em repeat-x;
  opacity:.55; animation:kw-dots 1.2s steps(3, jump-none) infinite; }
@keyframes kw-dots{ from{ width:.5em; } to{ width:1.5em; } }
@media (prefers-reduced-motion: reduce){ .kw-waiting::after{ animation:none; } }

/* AJ, 2026-10-01: the avatar bubble in the bottom bar reads better with
   no word under it. The word stays for screen readers (aria-label). */
.kidnav__label--me{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* THINK TIME (WO-054, assets/think-gate.js): while a question is being
   asked the answers "wake up": dim and soft, brightening over the think
   time, then a small pop when they can be pressed. Not a lock and not a
   clock: no number, no bar running down. The picture and the question
   stay bright (only controls dim). A tap in that time shows the
   "👂 Listen first…" chip, at the bottom edge so it never covers the
   question. Reduced motion: brightens in place, no pulse
   or pop. */
.ac-waking{ position:relative; }
.ac-waking :is(button, [role="button"], [role="slider"], input, select, .lk-line__track){
  animation:ac-wake var(--wake-ms, 1500ms) ease-in forwards; cursor:default; }
@keyframes ac-wake{ from{ opacity:.38; filter:saturate(.35); } 70%{ opacity:.62; filter:saturate(.6); } to{ opacity:.78; filter:saturate(.8); } }
.ac-awake :is(button, [role="button"]){ animation:ac-awake .4s ease-out; }
@keyframes ac-awake{ 0%{ transform:scale(.97); } 60%{ transform:scale(1.03); } 100%{ transform:none; } }
.ac-wake-chip{ position:absolute; left:50%; bottom:0; transform:translate(-50%, 60%); z-index:4; pointer-events:none;
  background:var(--ac-panel, #fff); color:var(--ac-edge, #1E2B63); border:3px solid var(--ac-edge, #1E2B63); border-radius:999px;
  padding:4px 14px; font-weight:800; font-size:17px; white-space:nowrap; box-shadow:0 4px 0 var(--ac-edge, #1E2B63); }
.ac-wake-chip[hidden]{ display:none; }
.ac-wake-chip.is-nudge{ animation:ac-nudge .5s ease-out; }
@keyframes ac-nudge{ 0%{ transform:translate(-50%, 60%) scale(.9); } 50%{ transform:translate(-50%, 60%) scale(1.06) rotate(-2deg); } 100%{ transform:translate(-50%, 60%); } }
.ac-sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){
  .ac-waking :is(button, [role="button"], [role="slider"], input, select, .lk-line__track){ animation:none; opacity:.6; filter:saturate(.6); }
  .ac-awake :is(button, [role="button"]), .ac-wake-chip.is-nudge{ animation:none; }
}