/* =====================================================================
   CRITTER CARDS — the trading card a kid opens from the Locker.

   A RARITY IS NOTHING BUT A BLOCK OF VARIABLES. To restyle a tier, edit
   only its .cc-card--* block below. To add a fifth tier, copy a block and
   rename it. Nothing in the component rules names a rarity.

   SIZING: the card is a container and every size inside it is in cqw
   (1cqw = 1% of the card's width), so one card looks identical at 300px
   in a grid or full-screen on a tablet — no media queries anywhere.
   Do NOT use cqw on .cc-card itself (its padding/radius): on the
   container those resolve against the VIEWPORT, not the card, and
   silently rescale everything inside.
   ===================================================================== */

:root{
  --cc-foil-blue:linear-gradient(115deg,#7fd3ff 0%,#c9f0ff 18%,#5ab0e8 34%,#dbe9ff 50%,#3f8fd6 66%,#a8dcff 82%,#7fd3ff 100%);
  --cc-foil-prism:linear-gradient(115deg,#a24cf0 0%,#ff9ad6 18%,#7b3fe0 34%,#ffd1f0 50%,#ff5fbf 66%,#c29bff 82%,#a24cf0 100%);
  --cc-foil-gold:linear-gradient(115deg,#ffe27a 0%,#fff6c9 14%,#ffb300 28%,#fff3b0 44%,#d98b00 58%,#ffe9a0 72%,#ffb300 86%,#ffe27a 100%);
}

/* =========================== THE FOUR TIERS ========================== */

.cc-card--common{
  --frame:linear-gradient(135deg,#b3bfd4,#7d8a9e);
  --frame-speed:0s;  --sheen:0;
  --glow:0 14px 30px rgba(30,43,99,.45);
  --paper:#FFFDF6; --paper-2:#FFF4DA;
  --ink:var(--ac-text); --ink-soft:#7a6230; --rule:#9a6a1a;
  --tile-bg:#F3E7C6; --tile-edge:#C6A469; --pip-off:#D8C7A0; --pip-on:var(--rar-common);
  --chip-bg:#fff; --tag-veil:rgba(255,253,246,.88);
  --gem:var(--rar-common); --gem-edge:#5C6EA8; --gem-glow:none; --gem-speed:0s;
  --label:#5C6EA8; --title:#7a6230; --name-shadow:none;
  --fact-bg:linear-gradient(#FFF8E6,#F7E9C6); --fact-edge:dashed; --fact-edge-c:#C6A469;
  --fact-ink:#3b2d12; --fact-label:#b77a14;
  --art-clip:inset(0 round 2.4cqw);   /* stays inside its box */
  --motion:paused;
}
.cc-card--rare{
  --frame:var(--cc-foil-blue);
  --frame-speed:9s; --sheen:1;
  --glow:0 18px 38px rgba(30,43,99,.5), 0 0 0 1px #1e5f86 inset;
  --paper:#FFFDF6; --paper-2:#FFF4DA;
  --ink:var(--ac-text); --ink-soft:#7a6230; --rule:#9a6a1a;
  --tile-bg:#F3E7C6; --tile-edge:#C6A469; --pip-off:#D8C7A0; --pip-on:var(--rar-rare);
  --chip-bg:#fff; --tag-veil:rgba(255,253,246,.88);
  --gem:var(--cc-foil-blue); --gem-edge:#1F5FD6; --gem-glow:0 0 10px #7fd3ff; --gem-speed:6s;
  --label:#1F5FD6; --title:#7a6230; --name-shadow:none;
  --fact-bg:linear-gradient(#FFF8E6,#F7E9C6); --fact-edge:dashed; --fact-edge-c:#C6A469;
  --fact-ink:#3b2d12; --fact-label:#b77a14;
  --art-clip:inset(0 round 2.4cqw);
  --motion:paused;
}
.cc-card--epic{
  --frame:var(--cc-foil-prism);
  --frame-speed:7s; --sheen:1;
  --glow:0 22px 44px rgba(30,43,99,.55), 0 0 26px rgba(169,113,245,.45), 0 0 0 1px #5a1f9a inset;
  --paper:#FFFDF8; --paper-2:#F3E6FF;
  --ink:var(--ac-text); --ink-soft:#6a4a8a; --rule:var(--ac-purple-deep);
  --tile-bg:#EFE4F7; --tile-edge:#A87AD0; --pip-off:#D6C7E6; --pip-on:var(--rar-epic);
  --chip-bg:#fff; --tag-veil:rgba(255,253,248,.88);
  --gem:var(--cc-foil-prism); --gem-edge:#5a1f9a; --gem-glow:0 0 14px #c46cff; --gem-speed:4s;
  --label:#5a1f9a; --title:var(--ac-purple-deep); --name-shadow:none;
  --fact-bg:linear-gradient(#F8F0FF,#EADCF7); --fact-edge:dashed; --fact-edge-c:#A87AD0;
  --fact-ink:#33234a; --fact-label:var(--ac-purple-deep);
  /* the critter breaks OUT of the box — upward and sideways only, so it
     can never cover the stats underneath */
  --art-clip:inset(-7cqw -3cqw 0 -3cqw round 2.4cqw);
  --motion:running;
}
.cc-card--legendary{
  --frame:var(--cc-foil-gold);
  --frame-speed:5s; --sheen:1;
  --glow:0 0 0 1px #7a4b00 inset, 0 0 40px rgba(255,179,0,.55), 0 26px 56px rgba(30,43,99,.6);
  --paper:#12101c; --paper-2:#17132a;
  --ink:#f3e6c8; --ink-soft:#d7b46a; --rule:#ffcc4d;
  --tile-bg:#241e3a; --tile-edge:#a07a2c; --pip-off:#3b3355; --pip-on:var(--rar-legend);
  --chip-bg:#241e3a; --tag-veil:rgba(18,16,28,.84);
  --gem:var(--cc-foil-gold); --gem-edge:#7a4b00; --gem-glow:0 0 16px #ffd166; --gem-speed:3s;
  --label:#ffd166; --title:#ffd166;
  --name-shadow:0 2px 0 #5a3a06, 0 0 14px rgba(255,179,0,.6);
  --fact-bg:linear-gradient(#3a2a12,#2a1d0c); --fact-edge:solid; --fact-edge-c:#ffcc4d;
  --fact-ink:#ffe9b8; --fact-label:#ffd166;
  --art-clip:inset(-7cqw -3cqw 0 -3cqw round 2.4cqw);
  --motion:running;
}

/* ============================ THE CARD ============================== */

.cc-card{
  container-type:inline-size;
  position:relative;
  width:min(92vw, calc(82vh * 5 / 8), 440px);
  aspect-ratio:5 / 8;
  /* NOTE: cqw must not be used on the container itself — on .cc-card it
     resolves against the viewport, not the card. px and % only, here. */
  border-radius:22px; padding:2.8%;
  background:var(--frame); background-size:300% 300%;
  box-shadow:var(--glow);
  font-family:var(--ac-font);
  transform-style:preserve-3d; transition:transform .15s ease-out;
  animation:cc-foil var(--frame-speed) linear infinite;
}
@keyframes cc-foil{ 0%{ background-position:0% 0%; } 100%{ background-position:300% 300%; } }

/* the paper: one surface, everything else lives inside it */
.cc-inner{
  position:absolute; inset:2.8%; border-radius:16px; overflow:hidden;
  background:var(--paper); border:.6cqw solid var(--rule);
  display:flex; flex-direction:column;
}

.cc-card::after{                       /* holo sheen, follows the finger */
  content:''; position:absolute; inset:0; border-radius:22px; z-index:5;
  pointer-events:none; mix-blend-mode:soft-light; opacity:var(--sheen);
  background:radial-gradient(circle at var(--mx,30%) var(--my,20%), rgba(255,255,255,.95), rgba(255,255,255,0) 40%);
}

/* --- name plate --- */
.cc-head{
  flex:none; display:flex; align-items:center; gap:2cqw; z-index:3;
  padding:2.6cqw 3.4cqw 2cqw;
  background:linear-gradient(var(--paper), var(--paper-2));
  border-bottom:.6cqw solid var(--rule);
}
.cc-id{ min-width:0; }
.cc-name{ font-size:6.4cqw; font-weight:800; line-height:1.04; color:var(--ink); text-shadow:var(--name-shadow); text-transform:uppercase; }
.cc-title{ font-size:3cqw; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--title); margin-top:.8cqw; }
.cc-real{ font-size:3.1cqw; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:.8cqw; }
.cc-rarity{ margin-left:auto; display:flex; flex-direction:column; align-items:center; gap:.6cqw; flex-shrink:0; }
.cc-gem{
  width:7.6cqw; height:7.6cqw; transform:rotate(45deg); border-radius:1.4cqw;
  background:var(--gem); background-size:200%; border:.6cqw solid var(--gem-edge);
  box-shadow:var(--gem-glow); animation:cc-foil var(--gem-speed) linear infinite;
}
.cc-rarity span{ font-size:2.5cqw; font-weight:800; letter-spacing:.16em; color:var(--label); }

/* --- art box, with the tagline as a caption band across its foot ---
   The art is the flexible part: it grows into space the text doesn't
   need and yields when a story runs long, so no card ever shows a dead
   gap and no text is ever clipped. */
.cc-art{
  flex:1 1 auto; min-height:32cqw; max-height:74cqw;
  position:relative; margin:2cqw 3cqw 0;
  border:1cqw solid var(--rule); border-radius:3cqw;
  background:#ffd28a;
  overflow:visible; clip-path:var(--art-clip);
}
.cc-art svg, .cc-art img{ display:block; width:100%; height:100%; overflow:visible; }
.cc-art img{ object-fit:cover; }
.cc-art__todo{ width:100%; height:100%; display:flex; flex-direction:column; gap:1cqw; align-items:center; justify-content:center; background:var(--tile-bg); }
.cc-art__emoji{ font-size:16cqw; line-height:1; }
.cc-art__todo small{ font-size:2.6cqw; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }

.cc-tag{
  position:absolute; left:0; right:0; bottom:0; z-index:4; margin:0;
  padding:1.6cqw 2.4cqw; text-align:center;
  font-style:italic; font-weight:800; font-size:3.5cqw; line-height:1.25;
  color:var(--ink); background:var(--tag-veil);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}

/* Art motion: every animated group in an art file uses one of these
   class names; the tier decides whether they run. */
.cc-art .drift  { animation:cc-drift 14s linear infinite alternate; animation-play-state:var(--motion); }
.cc-art .flash  { animation:cc-flash 6s infinite;                   animation-play-state:var(--motion); }
.cc-art .rain   { animation:cc-rain .7s linear infinite;            animation-play-state:var(--motion); }
.cc-art .breath { animation:cc-breath 3.2s ease-in-out infinite;    animation-play-state:var(--motion); }
.cc-art .bob    { animation:cc-bob 3s ease-in-out infinite;         animation-play-state:var(--motion); }
.cc-art .ripple { animation:cc-ripple 4s ease-out infinite;         animation-play-state:var(--motion); }
.cc-art .spin   { animation:cc-spin 18s linear infinite;            animation-play-state:var(--motion); }
.cc-art .twinkle{ animation:cc-twinkle 2.4s ease-in-out infinite;   animation-play-state:var(--motion); }
@keyframes cc-drift { from{ transform:translateX(-10px);} to{ transform:translateX(10px);} }
@keyframes cc-flash { 0%,88%,100%{ opacity:0; } 89%{ opacity:1; } 91%{ opacity:0; } 93%{ opacity:.9; } 95%{ opacity:0; } }
@keyframes cc-rain  { from{ transform:translateY(-10px);} to{ transform:translateY(12px);} }
@keyframes cc-breath{ 50%{ transform:scale(1.025);} }
@keyframes cc-bob   { 50%{ transform:translateY(-6px);} }
@keyframes cc-ripple{ 0%{ transform:scale(.6); opacity:.8; } 100%{ transform:scale(1.6); opacity:0; } }
@keyframes cc-spin  { to{ transform:rotate(360deg);} }
@keyframes cc-twinkle{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* --- stats --- */
.cc-stats{ flex:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6cqw; margin:2cqw 3cqw 0; }
.cc-stat{ background:var(--tile-bg); border:.5cqw solid var(--tile-edge); border-radius:2.2cqw; padding:1.2cqw 1cqw 1.6cqw; text-align:center; }
.cc-stat b{ display:block; font-size:2.5cqw; font-weight:800; letter-spacing:.14em; color:var(--ink-soft); }
.cc-stat__word{ display:block; font-size:3.7cqw; font-weight:800; line-height:1.1; color:var(--ink); margin:.6cqw 0 1cqw; }
.cc-pips{ display:flex; gap:.6cqw; justify-content:center; }
.cc-pips i{ display:block; width:2.5cqw; height:2.5cqw; border-radius:.6cqw; background:var(--pip-off); }
.cc-pips i.on{ background:var(--pip-on); }

/* --- likes --- */
.cc-likes{ flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:1.4cqw; margin:2cqw 3cqw 0; }
.cc-likes b{ font-size:2.6cqw; font-weight:800; letter-spacing:.14em; color:var(--ink-soft); }
.cc-chip{ font-size:3cqw; font-weight:800; padding:.6cqw 2.2cqw; border-radius:99cqw; background:var(--chip-bg); border:.5cqw solid var(--tile-edge); color:var(--ink); }

/* --- story + fact --- */
.cc-story{ flex:none; margin:2cqw 3cqw 0; font-size:3.3cqw; line-height:1.38; font-weight:600; color:var(--ink); }
.cc-fact{ flex:none; margin:2cqw 3cqw 0; padding:2cqw 2.8cqw; border-radius:2.8cqw; background:var(--fact-bg); border:.6cqw var(--fact-edge) var(--fact-edge-c); color:var(--fact-ink); }
.cc-fact b{ display:block; margin-bottom:.6cqw; font-size:3cqw; font-weight:800; letter-spacing:.06em; color:var(--fact-label); }
.cc-fact__text{ margin:0; font-size:3.05cqw; line-height:1.34; font-weight:600; }

.cc-foot{ flex:none; display:flex; justify-content:space-between; gap:2cqw; padding:1.8cqw 3.4cqw 2.2cqw; font-size:2.5cqw; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
.cc-foot span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Critter Club cards: the credit line sits above the usual footer. */
.cc-foot--club{ padding-bottom:0; text-transform:none; letter-spacing:0; color:var(--ink); }

/* =====================================================================
   READ ALOUD
   Every word is a button that looks like a word. Big enough to hit with
   a six-year-old finger, invisible until it's touched.
   ===================================================================== */
.cc-w{
  display:inline; font:inherit; color:inherit; background:none;
  border:0; padding:0 .06em; margin:0; border-radius:.25em;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.cc-w:hover, .cc-w:focus-visible{ background:rgba(76,155,255,.22); outline:none; }
.cc-w:focus-visible{ box-shadow:0 0 0 2px var(--ac-blue); }
.cc-w.is-saying{ background:var(--ac-yellow); color:var(--ac-edge); box-shadow:0 0 0 .2em var(--ac-yellow); }

.is-reading-part{ position:relative; }
.is-reading-part::before{
  content:''; position:absolute; inset:-1cqw -1.4cqw; border-radius:2.4cqw;
  background:rgba(76,155,255,.12); pointer-events:none; z-index:-1;
}

/* =============================== OVERLAY ============================= */
body.cc-open{ overflow:hidden; }

.cc-overlay{
  position:fixed; inset:0; z-index:120;
  background:rgba(30,43,99,.62);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; padding:16px;
  animation:cc-fade .18s ease-out;
}
@keyframes cc-fade{ from{ opacity:0; } to{ opacity:1; } }

.cc-shell{ display:flex; align-items:center; gap:8px; perspective:1400px; }
.cc-column{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.cc-stage{ display:flex; }

/* --- the read-aloud bar: overlay chrome, not part of the card --- */
.cc-toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  /* Wide enough for Read + hint + the ▶ Again button on one row; the
     three stack into a tower at 460px. */
  max-width:min(92vw, 540px);
  background:var(--ac-panel); border:4px solid var(--ac-edge);
  border-radius:999px; padding:8px 16px 8px 8px;
  box-shadow:0 5px 0 var(--ac-edge);
}
.cc-read{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:17px; font-weight:800; line-height:1;
  padding:12px 20px; border-radius:999px; cursor:pointer;
  background:var(--ac-blue); color:#fff;
  border:3px solid var(--ac-edge); box-shadow:0 4px 0 var(--ac-blue-deep);
}
.cc-read:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ac-blue-deep); }
.cc-read.is-on{ background:var(--ac-red); box-shadow:0 4px 0 var(--ac-red-deep); }
.cc-read__icon{ font-size:18px; line-height:1; }
.cc-toolbar__hint{ font-size:13px; font-weight:700; color:var(--ac-text-dim); line-height:1.25; max-width:210px; }

.cc-close{
  position:absolute; top:12px; right:12px;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  font-family:inherit; font-size:22px; font-weight:800; line-height:1;
  background:var(--ac-panel); color:var(--ac-edge);
  border:4px solid var(--ac-edge); box-shadow:0 5px 0 var(--ac-edge);
}
.cc-close:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--ac-edge); }

.cc-nav{
  width:44px; height:64px; border-radius:14px; cursor:pointer; flex:none;
  font-family:inherit; font-size:28px; font-weight:800; line-height:1;
  background:var(--ac-panel); color:var(--ac-edge);
  border:4px solid var(--ac-edge); box-shadow:0 5px 0 var(--ac-edge);
}
.cc-nav:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--ac-edge); }

.cc-card.is-in-right{ animation:cc-in-right .22s ease-out; }
.cc-card.is-in-left{ animation:cc-in-left .22s ease-out; }
@keyframes cc-in-right{ from{ transform:translateX(26px); opacity:0; } }
@keyframes cc-in-left{ from{ transform:translateX(-26px); opacity:0; } }

/* =====================================================================
   THE FIRST-OPEN CEREMONY

   The one time a kid meets a critter, the card turns in from edge-on
   instead of simply being there. Epic adds a prism sweep, legendary a
   gold burst (that one is confetti from arcade-shell, not CSS).

   The foil is re-declared in the shorthand alongside each arrival
   animation on purpose: `animation` is a shorthand, so naming only the
   arrival would cancel the frame's shimmer for the length of it.
   NOTE: px and % only on .cc-card — cqw resolves against the viewport
   here, not the card. See the note on .cc-card above.
   ===================================================================== */
.cc-card.cc-arrive{
  animation:cc-arrive .35s cubic-bezier(.22,1,.36,1) both,
            cc-foil var(--frame-speed) linear infinite;
}
@keyframes cc-arrive{
  from{ transform:perspective(900px) rotateY(84deg) scale(.88); opacity:0; }
  55% { opacity:1; }
  to  { transform:perspective(900px) rotateY(0deg) scale(1); opacity:1; }
}

/* Epic: a prism sweep across the frame. ::after is the holo sheen, so
   this rides ::before, which is content:none until the class lands. */
.cc-card::before{ content:none; }
.cc-card.cc-shimmer::before{
  content:''; position:absolute; inset:0; border-radius:22px; z-index:6;
  pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 38%, rgba(169,113,245,.55) 46%,
    rgba(255,255,255,.92) 50%, rgba(76,155,255,.55) 54%,
    rgba(255,255,255,0) 62%);
  background-size:280% 100%;
  animation:cc-sweep 1.2s ease-out .16s both;
}
@keyframes cc-sweep{ from{ background-position:190% 0; } to{ background-position:-90% 0; } }

/* ▶ Again — the handle for watching an epic or legendary arrive a second
   time. Quiet on purpose: it sits beside the Read button, not instead of
   it, and it is absent entirely on common and rare. */
.cc-replay{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-family:inherit; font-size:14px; font-weight:800; line-height:1;
  padding:10px 16px; border-radius:999px; cursor:pointer;
  background:var(--ac-panel-2); color:var(--ac-edge);
  border:3px solid var(--ac-edge); box-shadow:0 4px 0 var(--ac-edge);
}
.cc-replay:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ac-edge); }

/* Reduced motion keeps the sound and the sparkle, drops the movement. */
@media (prefers-reduced-motion:reduce){
  .cc-card.cc-arrive, .cc-card.cc-shimmer::before{ animation:none !important; }
  .cc-card.cc-shimmer::before{ content:none; }
}

/* Phones: the arrows would crowd the card, so swipe carries paging. */
@media (max-width:560px){
  .cc-nav{ display:none; }
  .cc-card{ width:min(94vw, calc(72vh * 5 / 8)); }
  .cc-toolbar{ padding:6px 12px 6px 6px; gap:8px; }
  .cc-toolbar__hint{ font-size:12px; max-width:150px; }
}

@media (prefers-reduced-motion:reduce){
  .cc-card, .cc-gem, .cc-art *, .cc-overlay, .cc-card.is-in-right, .cc-card.is-in-left{ animation:none !important; }
}

/* =====================================================================
   THE VOICE PICKER — front door, grown-ups only. Uses the shared modal
   shell from arcade.css; only the list and the speed row are new.
   ===================================================================== */
.ac-voice{ width:min(340px, 92vw); }
.ac-voice h2{ margin:0 0 4px; font-size:20px; }
.ac-voice__list{ display:flex; flex-direction:column; gap:6px; max-height:252px; overflow-y:auto; margin:10px 0 14px; padding-right:2px; }
.ac-voice__row{
  font-family:inherit; font-size:15px; font-weight:700; text-align:left;
  padding:10px 12px; border-radius:12px; cursor:pointer;
  background:var(--ac-panel-2); color:var(--ac-text);
  border:3px solid var(--ac-line);
}
.ac-voice__row:hover{ border-color:var(--ac-blue); }
.ac-voice__row.is-on{ background:var(--ac-tint-blue); border-color:var(--ac-blue); }
.ac-voice__row.is-on::after{ content:' ✓'; color:var(--ac-blue-deep); font-weight:800; }
.ac-voice__speed{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.ac-voice__speed b{ font-size:11px; letter-spacing:.14em; color:var(--ac-text-dim); width:100%; }
.ac-voice__speed .is-on{ background:var(--ac-blue); color:#fff; border-color:var(--ac-edge); }