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

   Bright daytime sky, 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 */
  --ac-sky-top:#79D2FF;  --ac-sky-mid:#A8E4FF;  --ac-sky-bot:#D6F3FF;
  --ac-grass:#5FD963;    --ac-grass-deep:#31A84A;
  --ac-panel:#FFFFFF;    --ac-panel-2:#FFF4DA;
  --ac-edge:#1E2B63;     --ac-line:#C8D6F5;

  /* text */
  --ac-text:#1E2B63;  --ac-text-dim:#5C6EA8;  --ac-text-mute:#8E9BC4;

  /* 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;
}

/* 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:linear-gradient(180deg,var(--ac-sky-top),var(--ac-sky-mid) 55%,var(--ac-sky-bot));
  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); }
/* 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--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; }

/* ⭐ One of today's two Games of the Day. A warm ring and a soft glow —
   an invitation, never a demand. Nothing marks the tiles that AREN'T
   featured: they render exactly as they always have. */
.ac-tile--gotd{
  border-color:var(--ac-yellow-deep);
  box-shadow:0 var(--ac-lift) 0 var(--ac-yellow-deep),
             0 13px 14px rgba(30,43,99,0.25),
             0 0 0 4px rgba(255,201,60,0.35);
}
.ac-tile--gotd:hover{
  box-shadow:0 12px 0 var(--ac-yellow-deep), 0 18px 18px rgba(30,43,99,0.25),
             0 0 0 4px rgba(255,201,60,0.35);
}
.ac-tile--gotd:active{ box-shadow:0 0 0 var(--ac-yellow-deep); }

/* 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; }

/* =====================================================================
   ⭐ GAMES OF THE DAY — the banner at the top of PLAY.

   Yellow, because yellow means "reward" everywhere else in this design.
   The countdown never goes red and never counts seconds: it is there to
   say "there's still time", never "you're running out".
   ===================================================================== */
.ac-gotd{
  background:linear-gradient(135deg,#FFE9A8,#FFC93C 62%,#FFB020);
  border:var(--ac-bd) solid var(--ac-edge); border-radius:var(--ac-radius);
  box-shadow:0 var(--ac-lift) 0 var(--ac-edge), 0 13px 14px rgba(30,43,99,0.22);
  padding:16px 18px; margin:0 0 22px;
}
.ac-gotd__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ac-gotd__star{ font-size:32px; animation:ac-breathe 2.2s ease-in-out infinite; }
.ac-gotd__title{ display:flex; flex-direction:column; line-height:1.25; }
.ac-gotd__title b{ font-size:19px; letter-spacing:1.5px; color:var(--ac-edge); }
.ac-gotd__sub{ font-size:13px; font-weight:700; color:var(--ac-edge); opacity:0.78; }
.ac-gotd__clock{
  margin-left:auto; font-size:12px; font-weight:800; color:var(--ac-edge);
  background:rgba(255,255,255,0.6); border-radius:999px; padding:6px 12px;
}
.ac-gotd__picks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:14px; }
.ac-gotd__pick{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:var(--ac-panel); color:var(--ac-text);
  border:3px solid var(--ac-edge); border-radius:var(--ac-radius-sm);
  padding:12px 14px; box-shadow:0 5px 0 var(--ac-edge);
  transition:transform 0.16s cubic-bezier(0.34,1.6,0.64,1), box-shadow 0.16s;
}
.ac-gotd__pick:hover{ transform:translateY(-4px); box-shadow:0 9px 0 var(--ac-edge); }
.ac-gotd__pick:active{ transform:translateY(5px); box-shadow:0 0 0 var(--ac-edge); }
.ac-gotd__pick.is-unavailable{ border-style:dashed; opacity:0.78; box-shadow:none; }
.ac-gotd__pick.is-unavailable:hover{ transform:none; box-shadow:none; }
.ac-gotd__emoji{ font-size:34px; flex:none; }
.ac-gotd__text{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.ac-gotd__kind{ font-size:10px; font-weight:800; letter-spacing:1.2px; color:var(--ac-text-dim); }
.ac-gotd__name{ font-size:16px; font-weight:800; }
.ac-gotd__note{ font-size:11px; font-weight:700; color:var(--ac-text-dim); }
.ac-gotd__pick .ac-badge{ margin-left:auto; flex:none; }

/* The in-game pill on the top bar. */
.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 "150 → 300" line. */
.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; }

@media (max-width:520px){
  .ac-gotd__clock{ margin-left:0; }
}
@media (prefers-reduced-motion: reduce){
  .ac-gotd__star{ animation:none; }
}

.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; }

/* ---- the birthday control: month · day · year ----
   Three selects on one row, sized by how much each has to say. The month
   names are the long ones, so it takes the space; the day never needs
   more than two digits. They wrap to two rows rather than shrinking
   below a thumb-sized target on a narrow phone. */
.ac-dob{ display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; margin-bottom:10px; }
.ac-dob .ac-select{ margin-bottom:0; padding-left:10px; padding-right:6px; }
.ac-dob__m{ flex:3 1 8.5em; }
.ac-dob__d{ flex:1 1 4.5em; }
.ac-dob__y{ flex:2 1 5.5em; }
.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__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-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);
}

/* =====================================================================
   THE TAB BAR — six cells, every one an icon AND a word.

   Icon-only tabs are a trap at this age: a 1st grader taps pictures at
   random. The picture is the landmark, the word is the meaning, and the
   two together are what makes the bar navigable without reading skill.

   Two layouts, one markup:
     phone / tablet (<= 720px)  fixed to the bottom, icon above label,
                                six equal cells, thumb-reachable
     desktop (> 720px)          a strip under the character header, icon
                                left of label, cells sized to content
   ===================================================================== */
.ac-navtabs{
  display:flex; gap:12px; max-width:760px; margin:22px auto 24px;
  flex-wrap:wrap; justify-content:center;
}
.ac-navtab{
  /* Content-sized, never equal-width: with flex-basis:0 the longest
     label (CRITTERS) got the same sliver as the trophy and spilled past
     its own border. flex:0 0 auto + nowrap lets a cell that cannot fit
     wrap to the next row instead of overflowing. */
  flex:0 0 auto; display:flex; align-items:center; gap:7px;
  position:relative;   /* the notification .ac-dot anchors to the pill */
  border:3px solid var(--ac-edge); background:var(--ac-panel);
  color:var(--ac-text); font-weight:800; font-size:13px; letter-spacing:0.5px;
  padding:9px 15px; border-radius:999px; white-space:nowrap;
  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-navtab__icon{ position:relative; font-size:17px; line-height:1; }
.ac-navtab__label{ line-height:1; }
.ac-navtab:active{ transform:translateY(var(--ac-lift-sm)); box-shadow:0 0 0 var(--ac-edge); }
.ac-navtab.is-active{ background:var(--ac-accent); color:var(--ac-accent-ink); }

/* ---- phone & tablet: the bar goes to the thumb ---- */
@media (max-width:720px){
  .ac-navtabs{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    max-width:none; margin:0; gap:0; flex-wrap:nowrap;
    background:var(--ac-panel); border-top:var(--ac-bd) solid var(--ac-edge);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -6px 18px rgba(30,43,99,0.16);
  }
  .ac-navtab{
    /* Six equal cells here — every label is short enough to fit, and an
       even grid is what makes a bottom bar tappable without looking. */
    flex:1 1 0; min-width:0; flex-direction:column; gap:3px;
    padding:6px 2px; border:0; border-radius:14px; box-shadow:none;
    font-size:11px; text-transform:uppercase; letter-spacing:0.3px;
  }
  .ac-navtab__icon{ font-size:21px; }
  .ac-navtab__label{ overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  /* Borderless cells here, so the badge tucks inside the cell rather
     than hanging off an edge that isn't drawn. */
  .ac-navtab .ac-dot{ top:0; right:2px; min-width:20px; height:20px; font-size:11px; }
  .ac-navtab:active{ transform:none; background:var(--ac-panel-2); }
  .ac-navtab.is-active{ background:var(--ac-accent); color:var(--ac-accent-ink); }
  /* Content has to clear the fixed bar — otherwise the last row of a
     grid sits under it and reads as missing. */
  .ac-home{ padding-bottom:96px; }
}

/* ---- ── 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; }
/* Critter Club 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{
  margin:4px 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__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); }
.ac-trade-send{ text-align:center; margin-top:18px; }

/* The notification dot — on a nav TAB and on the avatar.

   The nav-tab anchor is the whole .ac-navtab pill (see home.js setDot).
   It used to hang off .ac-navtab__icon, which on the desktop layout puts
   the icon to the LEFT of the label — so the badge landed between the
   picture and the word and read as "!CRITTERS". On the pill's trailing
   corner it reads as a badge on the tab, in both layouts. */
.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-tile--focus.ac-tile--gotd{ border-color:var(--ac-yellow-deep); box-shadow:0 var(--ac-lift) 0 var(--ac-yellow-deep); }
.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); }
.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); }

/* ---- four tabs that always fit on one row, even at 320px ---- */
.ac-navtabs--four{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; max-width:640px; }
.ac-navtabs--four .ac-navtab{ justify-content:center; padding:10px 6px; }
@media (max-width:520px){
  .ac-navtabs--four .ac-navtab{ flex-direction:column; gap:4px; font-size:12px; padding:8px 4px; }
  .ac-navtabs--four .ac-navtab__icon{ font-size:22px; }
}

/* ---- 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; }
.ac-gotd--one .ac-gotd__picks{ grid-template-columns:1fr; }

/* ---- 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 and "Switch profile" live on the Arcade home,
   one tap away (the bar took three rows and ~140px of play space). */
@media (max-width:520px){
  .ac-bar--game .ac-bar__who, .ac-bar--game .ac-bar__switch{ display:none; }
}