/* elc.css — the one place tokens live.
   Loaded by every page BEFORE its own <style>, so a page can still override any
   token it genuinely needs to. theme.css loads after and wins on light theme via
   html[data-theme="light"] (specificity 0,1,1).

   IMPORTANT: the five games deliberately re-tint --space / --ink / --soft to give
   each its own identity (listening-gap is warm, sentence-builder teal, story-unlock
   violet). Those overrides stay in the page. Only genuine duplicates were removed. */

:root{
  color-scheme:dark;              /* native controls (select, scrollbars) match the theme */

  /* ---- ground + text ---- */
  --space:#06060f;                    /* page ground */
  --bg2:#0a0918;                      /* raised ground */
  --ink:#f5f3ff;                      /* primary text            18.4:1 on --space */
  --soft:#a39fce;                     /* secondary text           8.1:1 */
  --soft2:#8b86b4;                    /* labels, hints            5.9:1 (was #76729e, 4.49:1 = AA fail) */

  /* ---- the four pillars: Read it · Hear it · Practise it · Use it ---- */
  --pink:#f6479a;   --read:#f6479a;
  --coral:#ff8a63;  --hear:#ff8a63;
  --purple:#8b6cff; --practise:#8b6cff;
  --teal:#1fc4b6;   --use:#1fc4b6;

  /* ---- supporting accents ---- */
  --electric:#ff7848; --cyan:#1fc4b6; --magenta:#ff5ca8;
  --gold:#ffd27a; --mint:#57e6c4; --amber:#ffcd46;

  /* ---- surfaces ---- */
  --glass:rgba(255,255,255,.04);
  --glass2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);

  /* ---- type ---- */
  --display:'Clash Display',system-ui,sans-serif;
  --body:'General Sans',system-ui,sans-serif;

  /* Six steps, replacing 22 ad-hoc sizes between 9.5px and 30px. Migrate a rule at a
     time; the old literal it replaces is listed so the swap is mechanical.
       --fs-xs   9.5 10 10.5 11 11.5 12      eyebrows, uppercase labels, footnotes
       --fs-sm   12.5 13 13.5                meta, chips, secondary buttons
       --fs-md   14 14.5 15 15.5             body copy
       --fs-lg   16 17 18                    card headings
       --fs-xl   19 20 22                    section headings
       --fs-2xl  24 26                       page headings
     Hero type stays a clamp() — it is fluid by design, not a scale step. */
  --fs-xs:11.5px;
  --fs-sm:13px;
  --fs-md:15px;
  --fs-lg:17px;
  --fs-xl:20px;
  --fs-2xl:26px;
  --fs-3xl:30px;   /* display only: the focal word in a game, not body copy */

  /* ---- spacing: 4pt grid, replacing ad-hoc 9/11/13/22px values ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* ---- radii ---- */
  --r-sm:13px; --r-md:18px; --r-lg:24px; --r-full:999px;
}

/* Oriva's cheer opener. Was a hard-coded teal that measured 2.1:1 on a light card;
   violet reads as celebratory and works on both grounds (see theme.css for light). */
.ohi{color:#b9a4ff;font-weight:700}

/* ---- the member header (rendered by elc-nav.js) ---------------------------- */
/* Sticks like the home page nav: transparent while at rest, frosted once you scroll.
   The border is always present but transparent, so nothing shifts when it appears. */
.elcnav{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  position:sticky;top:8px;z-index:40;
  padding:var(--sp-3) var(--sp-4);border:1px solid transparent;border-radius:var(--r-lg);
  transition:background .3s,border-color .3s,box-shadow .3s,backdrop-filter .3s}
.elcnav.scrolled{background:rgba(8,8,18,.72);border-color:var(--line);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 14px 34px -20px rgba(0,0,0,.8)}
.elcnav-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:var(--fs-md);white-space:nowrap}
.elcnav-brand .mark{width:30px;height:30px;border-radius:9px;overflow:hidden;display:grid;place-items:center;flex:0 0 30px}
.elcnav-brand .mark img{width:100%;height:100%;object-fit:cover;display:block}
.elcnav-tabs{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-full);
  background:var(--glass2);border:1px solid var(--line);margin-left:auto}
.elcnav-tabs a{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 15px;
  border-radius:var(--r-full);font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  color:var(--soft);text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
.elcnav-tabs a svg{width:17px;height:17px;flex:0 0 17px}
.elcnav-tabs a:hover{color:var(--ink)}
.elcnav-tabs a.on{background:linear-gradient(100deg,var(--teal),var(--purple));color:#fff}
.elcnav-acct{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--soft)}
/* Scoped to the control itself, never descendants: the card is inside .elcnav-acct, so
   a bare `.elcnav-acct a` also hit every row in the menu and boxed them in a pill. */
.elcnav-login{color:var(--soft);text-decoration:none;font-weight:600;
  border:1px solid var(--line);background:var(--glass2);border-radius:var(--r-full);
  padding:8px 14px;min-height:38px;display:inline-flex;align-items:center}
.elcnav-login:hover{color:var(--ink);border-color:rgba(255,255,255,.24)}
/* ---- notice strip -------------------------------------------------------------
   State, not decoration: rendered only while something is true about this member, and
   dismissible. `--nc` carries the tone so one rule set serves them all. */
.elcnotice{display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4);
  border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--nc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--nc) 30%,transparent);
  --nc:var(--teal)}
.elcnotice.warn{--nc:var(--gold)}
.elcnotice.good{--nc:var(--teal)}
.elcnotice .ni{font-size:17px/* emoji glyph, not type */;line-height:1.3;flex:0 0 auto}
.elcnotice .nt{flex:1;min-width:0;font-size:var(--fs-sm);line-height:1.55;color:var(--ink)}
.elcnotice .nt b{font-family:var(--display);font-weight:600}
.elcnotice .nt a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.elcnotice .nx{flex:0 0 26px;width:26px;height:26px;border-radius:50%;padding:0;cursor:pointer;
  display:grid;place-items:center;background:transparent;border:1px solid transparent;
  color:var(--soft2);transition:color .15s,background .15s,border-color .15s}
.elcnotice .nx svg{width:13px;height:13px}
.elcnotice .nx:hover{color:var(--ink);background:color-mix(in srgb,var(--nc) 18%,transparent);
  border-color:color-mix(in srgb,var(--nc) 34%,transparent)}

/* Contextual back link: sits under the header, above the page title, and names its
   PARENT — it is a breadcrumb step, not browser history, so it goes to the same place
   however the member arrived. The member header has no global back button on purpose;
   only the two pages one level below the Arcade need this. */
.elcback{display:inline-flex;align-items:center;gap:6px;margin:var(--sp-4) 0 var(--sp-2);
  color:var(--soft);text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  transition:color .15s}
.elcback svg{width:15px;height:15px;flex:0 0 15px;transition:transform .15s}
.elcback:hover{color:var(--ink)}
.elcback:hover svg{transform:translateX(-3px)}

/* the account control: an initials avatar that opens a card (see ELCAccount in elc-nav.js) */
.elcnav-acct{position:relative}
/* Born hidden. The account card owns the theme choice and the tour for a signed-in member,
   and these two elements are created by other scripts at unpredictable times — so the
   decision lives on <html> where it applies whenever they appear, rather than depending on
   script order. See the hint in elc-nav.js. */
html.elc-nolaunch .elct-launch{display:none !important}
.elcnav-av{width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-full);cursor:pointer;
  display:grid;place-items:center;padding:0;
  font-family:var(--display);font-weight:600;font-size:var(--fs-sm);letter-spacing:.02em;color:#fff;
  background:linear-gradient(135deg,var(--teal),var(--purple));border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 18px -10px rgba(0,0,0,.9);transition:transform .15s,box-shadow .15s}
.elcnav-av:hover,.elcnav-av.on{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(31,196,182,.55)}
.elcnav-av.on{outline:2px solid color-mix(in srgb,var(--teal) 60%,transparent);outline-offset:2px}
/* signed out: the same circle, quieter, carrying a person glyph instead of initials */
.elcnav-av.anon{background:var(--glass2);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.elcnav-av.anon svg{width:18px;height:18px}
.elcnav-av.lg.anon svg{width:22px;height:22px}
.elcnav-card-sub{font-size:var(--fs-xs);color:var(--soft2)}
.elcnav-card-row.r-signin{--rc:var(--teal);color:var(--ink)}
.elcnav-card-row.r-help{--rc:var(--coral)}
.elcnav-av.lg{width:44px;height:44px;flex:0 0 44px;font-size:var(--fs-md);cursor:default;transform:none}
.elcnav-card{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:246px;
  /* The card hangs off a FIXED/STICKY header, so page scroll cannot bring its bottom into
     view. At ~290px it overran a landscape phone and Sign out became unreachable. */
  max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-2);border-radius:var(--r-lg);border:1px solid var(--line);
  background:rgba(14,13,28,.94);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.92);animation:elcpop .16s ease-out}
@keyframes elcpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.elcnav-card-id{display:flex;align-items:center;gap:11px;padding:var(--sp-3);
  border-bottom:1px solid var(--line);margin-bottom:var(--sp-2)}
.elcnav-card-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.elcnav-card-who b{font-family:var(--display);font-weight:600;font-size:var(--fs-md);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The tier badge. Three shadows imply one light source above — a highlight on the top
   edge, a shade on the bottom, and a drop shadow lifting the whole thing off the card —
   with a gradient running light-to-dark downward to match. Uppercase with tracking so it
   reads as a badge rather than a sentence.
   Each tier's ink is chosen against the DARK end of its gradient (the worst case): at
   12px bold this is normal-sized text and needs 4.5:1 there, not just at the top. */
.elcnav-card-plan{
  align-self:flex-start; margin-top:3px;
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:var(--r-full);
  font-family:var(--display); font-weight:700;
  font-size:10.5px/* badge, not body type */; letter-spacing:.07em; text-transform:uppercase;
  background:linear-gradient(180deg,var(--t1),var(--t2));
  color:var(--ti);
  border:1px solid rgba(0,0,0,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 2px 5px -1px rgba(0,0,0,.34);
  --t1:#5fd9cd; --t2:#14a89c; --ti:#06302d;          /* default / free trial */
}
.elcnav-card-plan.plan-fluency{--t1:#ffd98a; --t2:#e3a02f; --ti:#4a2f00}
.elcnav-card-plan.plan-transcript{--t1:#b9a6ff; --t2:#9a7ff5; --ti:#2a1170}
.elcnav-card-row{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;
  padding:0 var(--sp-3);border:0;border-radius:var(--r-md);background:transparent;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:var(--fs-sm);color:var(--soft);
  text-decoration:none;text-align:left;transition:background .15s,color .15s}
.elcnav-card-row svg{width:17px;height:17px;flex:0 0 17px;color:var(--rc);transition:transform .15s}
.elcnav-card-row{--rc:var(--teal)}
.elcnav-card-row.r-progress{--rc:var(--purple)}
.elcnav-card-row.r-tour{--rc:var(--teal)}
.elcnav-card-row.out{--rc:#ff8f8f}
.elcnav-card-row:hover{background:color-mix(in srgb,var(--rc) 16%,transparent);color:var(--ink)}
.elcnav-card-row:hover svg{transform:scale(1.12)}
.elcnav-card-row.out:hover{color:var(--rc)}
@media (prefers-reduced-motion:reduce){.elcnav-card-row:hover svg{transform:none}}
.elcnav-card-theme{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);margin:var(--sp-1) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.elcnav-card-theme-lbl{font-family:var(--display);font-weight:600;font-size:var(--fs-sm);color:var(--soft)}
.elcnav-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-full);
  background:var(--glass2);border:1px solid var(--line)}
.elcnav-seg button{min-width:32px;height:26px;padding:0 9px;border:0;border-radius:var(--r-full);
  background:transparent;cursor:pointer;color:var(--soft);
  font-family:var(--display);font-weight:600;font-size:var(--fs-xs);line-height:1;
  transition:background .15s,color .15s}
.elcnav-seg button:hover{color:var(--ink)}
.elcnav-seg button.on{background:linear-gradient(100deg,var(--teal),var(--purple));color:#fff}
.elcnav-login{display:inline-flex;align-items:center;gap:8px}
.elcnav-login svg{width:16px;height:16px}
/* phones: brand on its own line, tabs full width and evenly split */
@media(max-width:720px){
  .elcnav{gap:var(--sp-3)}
  .elcnav-tabs{margin-left:0;order:3;width:100%;justify-content:space-between}
  .elcnav-tabs a{flex:1;justify-content:center;padding:0 8px}
  .elcnav-acct{margin-left:auto}
}
@media(max-width:420px){ .elcnav-tabs a span{display:none} .elcnav-tabs a{min-height:42px}
  .elcnav-card{width:min(246px,calc(100vw - 32px))} }