/* Severo Rounds — "Beads & Frost" light design system.
   The color code (every channel has exactly one job):
     hue        = curriculum sphere (structural/physical/social/personal/culture/professional)
     solidity   = mastery (film -> setting -> solid bead); dashed + faded = softening (due)
     blur       = the unknown (fog of war)
     size       = frequency weight
     gold       = NOW (the one action per screen; nothing else may be gold)
   Hue is always redundant: position clusters by meaning and spheres are named in text. */
:root{
  --ga:#dbe9fe; --gb:#d9f4f4; --gc:#fde7f1; --gd:#e6defc;
  --bg:#FDFDFC; --ink:#243044; --soft:#5b6880; --faint:#93a0b4;
  --line:rgba(36,48,68,.16); --card:#FFFFFF;
  --gold:#E8B84B; --gold-deep:#B08A2E; --gold-soft:#F7E8C6; --gold-line:#D9A93C;
  --good:#2f9187; --mid:#B08A2E; --bad:#C4534E;
  --s-structural:#5F8FE8; --s-physical:#3FB5A9; --s-social:#8F74E0;
  --s-personal:#E078A8; --s-culture:#E8875C; --s-professional:#5FAE6E;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.45; min-height:100vh;
  background:linear-gradient(125deg, var(--ga) 0%, var(--gb) 38%, var(--gc) 72%, var(--gd) 100%) fixed}
#app{max-width:640px; margin:0 auto; padding:16px 16px 40px; display:flex; flex-direction:column; min-height:100vh}

/* Desktop: play screens stay a focused column; map-ish screens earn the width.
   homegrid/mapgrid stack naturally on mobile (plain divs) and split at 960px. */
@media (min-width: 960px){
  body[data-screen="home"] #app{max-width:1080px}
  .homegrid{display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:start}
  .homegrid .tmap.home{height:430px}
  /* the map is the world: full-bleed width, viewport-tall canvas, panel at the side */
  body[data-screen="map"] #app{max-width:none; padding:16px 28px 40px}
  .mapgrid{display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start}
  .mapgrid .maparea .tmap{height:calc(100vh - 220px); min-height:480px}
}

.brand{display:flex; align-items:baseline; gap:10px; margin:4px 0 12px}
.brand h1{font-size:15px; margin:0; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); font-weight:700; cursor:pointer}
.brand .tag{color:var(--soft); font-size:12.5px}
.brand .authchip{margin-left:auto; font-size:11.5px; color:var(--soft); background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:3px 10px; cursor:pointer; white-space:nowrap}
.brand .authchip:hover{border-color:var(--gold-line)}

.dots{display:flex; gap:8px; margin:2px 0 16px}
.dot{width:34px; height:7px; border-radius:4px; background:rgba(36,48,68,.10); transition:background .3s}
.dot.cur{outline:2px solid var(--gold); outline-offset:2px}

.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 20px;
  box-shadow:0 14px 40px rgba(36,48,68,.10)}
.kicker{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
.es{font-family:Georgia,'Times New Roman',serif; font-size:34px; line-height:1.2; margin:2px 0 6px; text-wrap:balance}
.es.sent{font-size:26px}
.freq{color:var(--faint); font-size:12.5px; margin-top:8px}
.audio{background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:8px 14px; font-size:14px; cursor:pointer; margin-top:12px}
.audio:active{transform:scale(.97)}
.audio.big{display:block; width:100%; padding:26px 14px; font-size:19px; border-color:var(--gold-line); background:var(--gold-soft); margin-top:4px}

.esinput, textarea{width:100%; min-height:52px; background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--ink);
  font-size:22px; font-family:Georgia,'Times New Roman',serif; padding:12px 14px}
textarea{font-size:17px; font-family:system-ui,sans-serif; resize:vertical}
.esinput:focus, textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold-line)}

.timerbar{height:8px; border-radius:4px; background:rgba(36,48,68,.08); margin:16px 0 4px; overflow:hidden}
.timerbar i{display:block; height:100%; width:100%; background:var(--gold); border-radius:4px}

.ceil{color:var(--gold-deep); font-variant-numeric:tabular-nums; font-weight:700}
.radar{display:block; width:100%; height:230px; margin-top:14px; background:radial-gradient(circle at center, rgba(219,233,254,.5), transparent 74%); border-radius:14px}
.radarhint{color:var(--faint); font-size:12px; text-align:center; margin-top:4px}
.pct{color:var(--soft); font-size:12.5px; font-variant-numeric:tabular-nums; margin-left:6px}

.anslang{color:var(--soft); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin:14px 0 6px}
.ipa{color:var(--soft); font-size:15px; font-family:Georgia,'Times New Roman',serif; margin:2px 0 0}
.ipa.inline{font-size:14px; margin:0}
/* pinyin sits between characters and IPA (the app's focus-card stack) */
.pinyin{color:var(--ink); opacity:.75; font-size:17px; margin:2px 0 0; letter-spacing:.02em}
.pinyin.inline{font-size:14.5px; margin:0; opacity:.75}
.spherechip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--soft); vertical-align:2px}
.spherechip i{width:10px; height:10px; border-radius:50%; display:inline-block; border:1px solid #fff; box-shadow:0 1px 3px rgba(36,48,68,.3)}
/* a sentence announces which face of a polysemous word it shows */
.sensechip{font-size:11px; letter-spacing:.04em; color:var(--soft); background:rgba(36,48,68,.06);
  border:1px solid var(--line); border-radius:999px; padding:2px 8px; font-family:system-ui,sans-serif;
  font-style:normal; white-space:nowrap; vertical-align:2px}
/* the reveal spread: every face of a polysemous word with its own sentence */
.spread{border:1px solid var(--line); border-radius:12px; background:var(--bg); padding:11px 14px; margin-top:10px}
.spreadrow{padding:7px 0; border-bottom:1px dashed rgba(36,48,68,.10); font-family:Georgia,serif; font-size:16px}
.spreadrow:last-child{border-bottom:none}
.spreadsense{display:inline-block; color:var(--gold-deep); font-family:system-ui,sans-serif; font-size:12.5px;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-right:6px; min-width:52px}
/* the tap payoff under the territory map */
.wdetail{border:1px dashed var(--line); border-radius:12px; padding:11px 14px; margin-top:10px; font-size:13.5px; min-height:52px}
.wdetail .serifword{font-family:Georgia,serif; font-size:19px}
.wdetail .sub-muted{color:var(--faint); font-size:12.5px; margin-top:3px}
.wdetail .cue{color:var(--gold-deep)}

@keyframes clue-in{ 0%{opacity:0; transform:translateY(-6px); border-color:var(--gold-line)}
  60%{opacity:1; border-color:var(--gold-line)} 100%{transform:none; border-color:var(--line)} }
.cluecard{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:10px;
  font-family:Georgia,serif; font-size:17px}
.cluecard.new{animation:clue-in 1.1s ease-out}
.es.new{animation:clue-in 1.1s ease-out}
.answers.new{animation:clue-in 1.1s ease-out}

.audio.mini{padding:2px 8px; font-size:12px; margin:0 0 0 6px; vertical-align:middle}
.ctxen{color:var(--soft); font-size:13.5px; font-family:system-ui,sans-serif; font-style:italic; margin-top:8px}
.senses{background:rgba(47,145,135,.08); border:1px solid var(--good); border-radius:10px;
  padding:10px 14px; margin-top:10px; font-size:14.5px}
.senses b{color:var(--good)}
.verdictnote{color:var(--soft); font-size:14px; margin-top:4px}
.meaning.big{font-size:19px; margin-top:10px}
.meaning .cue{color:var(--gold-deep)}
.sevlabel{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:3px}
.sev{display:flex; gap:10px; margin-top:14px; background:var(--bg); border-radius:12px; padding:12px 14px; border:1px solid var(--line)}
.sev p{line-height:1.55; margin:0; font-size:14.5px}
.sev .face{font-size:22px}

/* the bead ladder: film -> setting -> solid; softening = due.
   Matte, no specular highlight (playtest verdict: the white speck read as noise). */
.bead{display:inline-block; border-radius:50%; vertical-align:middle;
  background:var(--bc,#5F8FE8);
  border:1.5px solid rgba(36,48,68,.25); box-shadow:0 2px 6px rgba(36,48,68,.16)}
.bead.setting{opacity:.72}
.bead.softening{opacity:.5; border-style:dashed}
.film{display:inline-block; border-radius:50%; vertical-align:middle; border:1px solid rgba(36,48,68,.22);
  background:conic-gradient(from 210deg, rgba(95,143,232,.30), rgba(224,120,168,.32), rgba(63,181,169,.30), rgba(143,116,224,.32), rgba(95,143,232,.30));
  box-shadow:0 2px 6px rgba(36,48,68,.10)}
.beadrow{display:flex; align-items:center; justify-content:center; gap:12px; margin:10px 0 2px}
.beadrow .arr{color:var(--faint)}
.beadrow .lbl{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); text-align:center}

/* buttons: gold = the one action */
button{font-family:inherit}
.primary{display:block; width:100%; margin-top:14px; padding:14px; font-size:16px; font-weight:700; cursor:pointer;
  background:linear-gradient(120deg, #F3D98B, var(--gold)); color:#4a3608; border:1px solid var(--gold-line); border-radius:13px;
  box-shadow:0 6px 16px rgba(232,184,75,.35)}
.primary:active{transform:scale(.99)}
.ghost{display:block; width:100%; margin-top:10px; padding:11px; font-size:14px; cursor:pointer;
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; text-align:center}
.ghost:hover{border-color:var(--faint)}

.answers{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.opt{padding:13px 14px; font-size:16px; text-align:left; cursor:pointer; position:relative;
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px}
.opt:hover:not(:disabled){border-color:var(--faint)}
.opt.correct{border-color:var(--good); background:rgba(47,145,135,.08)}
.opt.wrong{border-color:var(--bad); background:rgba(196,83,78,.07)}
.opt.dim{opacity:.55}
.opt .pts{position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--faint); font-variant-numeric:tabular-nums}

.reveal{margin-top:16px; border-top:1px dashed var(--line); padding-top:14px}
.score-line{display:flex; align-items:baseline; gap:6px}
.score-big{font-size:34px; font-weight:800; font-variant-numeric:tabular-nums}
.score-max{color:var(--faint); font-size:14px}
.scorebar{height:8px; border-radius:4px; background:rgba(36,48,68,.08); margin:6px 0 4px; overflow:hidden}
.scorebar i{display:block; height:100%; width:0; border-radius:4px; transition:width .7s cubic-bezier(.2,.7,.2,1)}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{font-size:12.5px; border:1px solid var(--line); border-radius:999px; padding:4px 10px; color:var(--soft); background:var(--card)}
.chip.hit{border-color:var(--good); color:var(--good)}
.chip.miss{border-color:var(--bad); color:var(--bad)}

.qhint{color:var(--soft); font-size:13.5px; margin-top:10px}
.footer{color:var(--faint); font-size:12.5px; margin-top:14px; text-align:center}
.notice{background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:10px; color:#6b5514;
  font-size:13px; padding:10px 12px; margin-top:12px}

.langrow{display:flex; gap:8px; margin:2px 0 12px}
.langchip{font-size:13px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--soft); cursor:pointer}
.langchip.cur{border-color:var(--ink); color:var(--ink); font-weight:700}
/* language code badge (the "ALL" chip) + local flag SVGs (Windows can't draw flag emoji) */
.langchip .lc{font-style:normal; font-size:10px; font-weight:700; letter-spacing:.08em; padding:1.5px 5px; border:1px solid currentColor; border-radius:4px; opacity:.75; vertical-align:1px}
.flg{width:18px; height:12px; border-radius:2.5px; vertical-align:-1.5px; box-shadow:0 0 0 1px rgba(36,48,68,.15)}
.nudge{color:var(--mid); font-size:13.5px; margin:6px 0 2px; min-height:0}
.nudge b{color:var(--ink)}
/* the input shakes its head no (guidance, not judgment); stilled for reduced motion */
@keyframes headshake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px)} 30%{transform:translateX(6px)}
  45%{transform:translateX(-4px)} 60%{transform:translateX(3px)} 75%{transform:translateX(-1px)}
}
.shake{animation:headshake .4s cubic-bezier(.36,.07,.19,.97)}
@media (prefers-reduced-motion: reduce){ .shake{animation:none} }

/* header mute toggle */
.sndbtn{margin-left:auto; background:none; border:none; font-size:15px; cursor:pointer; opacity:.55; padding:2px 4px}
.sndbtn:hover{opacity:1}
.brand .authchip{margin-left:8px}

/* the quick compare: your letters vs the truth's, LCS-aligned */
.chardiff{margin:8px 0 2px; font-family:Georgia,serif; font-size:19px}
.chardiff .dr{display:flex; align-items:baseline; gap:8px; padding:1px 0}
.chardiff .dl{font-family:system-ui,sans-serif; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); width:38px; text-align:right}
.chardiff .dc.hit{color:var(--good)}
.chardiff .dc.soft{color:var(--mid); text-decoration:underline dotted}
.chardiff .dc.miss{color:var(--bad); opacity:.85}

/* the cross-language link: quiet gold left edge — a bridge, not an alarm */
.crossline{font-size:13.5px; color:var(--soft); border-left:3px solid #E8B84B; padding:6px 10px; margin:8px 0; background:rgba(232,184,75,.07); border-radius:0 8px 8px 0; text-align:left}
.crossline b{color:var(--ink); font-size:15px}
.crossmat{font-size:11px; letter-spacing:.05em; text-transform:uppercase; opacity:.65}

.guessrow{display:flex; justify-content:space-between; gap:8px; font-size:14px; padding:7px 2px; border-bottom:1px dashed rgba(36,48,68,.10)}
.guessrow span:first-child{font-family:Georgia,serif}
.guessrow.scorching span:last-child{color:var(--bad)}
.guessrow.warm span:last-child{color:var(--mid)}
.guessrow.cool span:last-child{color:#5f7fb0}
.guessrow.cold span:last-child{color:var(--faint)}
.ghist{margin-top:12px}

/* the pane: home map. Canvas draws beads/blurs; the CSS just frames it. */
/* word-class chip (the app's analytics palette) */
.poschip{font-size:10px; padding:1.5px 7px; text-transform:uppercase; letter-spacing:.06em; vertical-align:2px}
/* legend chips double as filters */
.fchip{cursor:pointer}
.fchip.off{opacity:.3; text-decoration:line-through}
/* map search */
.mapsearchrow{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.mapsearch{flex:1; font-size:14px; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); outline:none}
.mapsearch:focus{border-color:var(--ink)}
/* hover tooltip */
.maptip{display:none; position:absolute; pointer-events:none; z-index:5; background:var(--card); border:1px solid var(--line);
  border-radius:9px; padding:5px 9px; font-size:12.5px; color:var(--ink); box-shadow:0 3px 10px rgba(36,48,68,.14); max-width:220px}
/* stacked-tap pick list + anchor card */
.stackrow{display:flex; flex-wrap:wrap; gap:6px}
.stackrow .stackpick{width:auto; padding:6px 10px; font-size:14px}
.anchorrow{padding:4px 0; font-size:15px}
.anchorrow .saytap{cursor:pointer}
/* weak-words tour nav */
.tournav{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; padding-bottom:6px; border-bottom:1px dashed var(--line)}
.tournav .tourbtns{display:flex; gap:6px}
.tournav button{width:auto; padding:5px 12px; font-size:13px; margin:0}
.maparea{position:relative}
.maparea .tmap{touch-action:none; height:min(58vh, 480px)}  /* pan/pinch belong to the canvas, not the page */
.zoomui{position:absolute; right:10px; bottom:10px; display:flex; flex-direction:column; gap:6px}
.zoomui button{width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--card);
  color:var(--ink); font-size:17px; line-height:1; cursor:pointer; box-shadow:0 2px 6px rgba(36,48,68,.12)}
.zoomui button:hover{border-color:var(--ink)}
.tmap{display:block; width:100%; height:340px; border-radius:14px; border:1px solid var(--line); cursor:pointer;
  background:linear-gradient(115deg, #FEFEFD 0 55%, #F4F7FB 78%, #EDF2F9 100%)}
.tmap.home{height:250px; cursor:pointer}
.covwrap{margin-top:14px}
.covbar{height:8px; border-radius:4px; background:rgba(36,48,68,.08); overflow:hidden}
.covbar i{display:block; height:100%; background:linear-gradient(90deg, var(--s-structural), var(--s-physical)); border-radius:4px}
.covlabel{color:var(--soft); font-size:13px; margin-top:6px}
.covlabel b{color:var(--good)}

/* today's case card: the only gold surface on home */
.casecard{border:1px solid var(--gold-line); border-radius:14px; background:var(--gold-soft); padding:13px 14px; margin-top:14px}
.casecard .kicker{color:#8a6a1d; margin-bottom:4px}
.casecard p{margin:0 0 4px; font-size:14px}

.stat{display:flex; justify-content:space-between; font-size:14px; padding:7px 2px; border-bottom:1px dashed rgba(36,48,68,.10)}
.stat b{font-variant-numeric:tabular-nums}
.muted{color:var(--faint)}

/* end screen: report + tray */
.total{font-size:44px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px}
.of{color:var(--faint); font-size:13px; margin-bottom:10px}
.sumwrap{margin:8px 0 4px}
.sumrow{display:flex; align-items:center; gap:8px; font-size:13.5px; padding:6px 2px; border-bottom:1px dashed rgba(36,48,68,.10)}
.sumrow .sdot{width:11px; height:11px; border-radius:50%; flex:none; border:1px solid #fff; box-shadow:0 1px 4px rgba(36,48,68,.28)}
.sumword{font-family:Georgia,serif; min-width:86px}
.sumans{flex:1; color:var(--soft); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sumrow b{font-variant-numeric:tabular-nums}
.fbbtn{border:none; background:none; cursor:pointer; font-size:14px; opacity:.4; padding:2px}
.fbbtn:hover{opacity:.9}
.fbbtn.picked{opacity:1}

.tray{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:10px 14px; margin-top:12px}
.trow{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--soft); padding:3px 0}
.trow .bar{height:9px; border-radius:5px; flex:none; min-width:4px}
.trow .n{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600}
.trow .note{font-size:10.5px}

.histwrap{margin-top:12px}
.hist{width:100%; height:56px; display:block}

.bars{display:flex; gap:5px; align-items:flex-end; height:70px; margin:10px 0}
.bars .b{flex:1; background:rgba(36,48,68,.06); border-radius:4px; display:flex; align-items:flex-end; overflow:hidden}
.bars .b i{display:block; width:100%; border-radius:4px}

.cal{display:flex; gap:6px; justify-content:center; margin-top:14px}
.cal i{width:15px; height:15px; border-radius:5px; background:rgba(36,48,68,.08); display:block}
.cal i.lit{background:var(--gold)}
.cal i.today{outline:2px solid var(--gold); outline-offset:1.5px}

/* frontier finder */
.wchips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 6px}
.wchip{border:1px solid var(--line); border-radius:999px; padding:7px 13px; font-size:14.5px; background:var(--card); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; font-family:Georgia,serif}
.wchip .bdot{width:13px; height:13px; border-radius:50%; display:inline-block; border:1px solid #fff; box-shadow:0 2px 4px rgba(36,48,68,.25); background:rgba(36,48,68,.12)}
.wchip.know{border-color:var(--ink)}
.wchip.no{opacity:.45}
.wchip:disabled{cursor:default}
.frontierline{border-left:2px dashed var(--gold); margin:0 4px}

@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }

/* Arabic is written right to left. The game stamps lang="<code>" on every element that
   holds target-language text, so one rule covers the word display, the clue cards, the
   sense spread and the map labels without touching any per-item markup. Arabic script
   also sits small at Latin sizes, so it gets a modest bump. */
[lang="ar"] {
  direction: rtl;
  unicode-bidi: isolate;
  font-size: 1.12em;
  line-height: 1.7;
}