/* ============================================================
   TOTO-REX app — extras: themes, text-size, avatars, chess, Play
   Loaded after app.css.
   ============================================================ */

/* ---------- LIGHT (“bright”) THEME ---------- */
[data-theme="light"]{
  --khaki:#ECE4CF; --navy:#E4DAC0;
  --card:#FBF6E8; --card-2:#F5EEDA; --card-3:#F0E7D0;
  --ink:#2A2114; --ink-soft:#4E4636; --muted:#675E46; --faint:#857951;
  --brass:#6B4E12; --gold:#6E520E; --peacock:#176A7C; --magenta:#A82E6E; --mustard:#875A10;
  --line:rgba(70,52,24,.20); --line-2:rgba(70,52,24,.11); --line-3:rgba(150,110,45,.34);
  --serenity:#DCEAE6; --emerald-deep:#E3ECDE; --rose-bg:#F3E6EC;
}
[data-theme="light"] body{
  background-color:#ECE4CF;
  background-image:
    radial-gradient(620px 380px at 88% -6%,rgba(52,178,206,.10),transparent 60%),
    radial-gradient(560px 380px at -8% 8%,rgba(201,140,40,.10),transparent 60%),
    radial-gradient(760px 540px at 50% 118%,rgba(150,110,45,.10),transparent 60%);
}
[data-theme="light"] .statusbar{background:rgba(247,240,222,.95);color:var(--ink)}
[data-theme="light"] .appbar{background:rgba(247,240,222,.86)}
[data-theme="light"] .tabbar{background:rgba(247,240,222,.94)}
[data-theme="light"] .search,[data-theme="light"] .namebox input,[data-theme="light"] .chooser-name input{background:#F4EBD3}
[data-theme="light"] .toast{background:#241B0F;color:#F3E9D2}
[data-theme="light"] .bar{background:rgba(70,52,24,.12)}
[data-theme="light"] .statbox,[data-theme="light"] .wotd,[data-theme="light"] .card,[data-theme="light"] .quiz,[data-theme="light"] .pathcard,[data-theme="light"] .sheet{box-shadow:0 6px 22px rgba(70,52,24,.08)}
[data-theme="light"] .sheet{background:radial-gradient(360px 200px at 50% -8%,rgba(201,162,75,.18),transparent 62%),var(--card)}

/* ---------- READING SIZE (A / A+ / A++) ---------- */
[data-ts="lg"] .hello .hi{font-size:31px} [data-ts="xl"] .hello .hi{font-size:35px}
[data-ts="lg"] .screen-head h2{font-size:34px} [data-ts="xl"] .screen-head h2{font-size:39px}
[data-ts="lg"] .screen-head p{font-size:17px} [data-ts="xl"] .screen-head p{font-size:19px}
[data-ts="lg"] .wotd .def{font-size:18.5px} [data-ts="xl"] .wotd .def{font-size:21px}
[data-ts="lg"] .wotd .note{font-size:17px} [data-ts="xl"] .wotd .note{font-size:19px}
[data-ts="lg"] .wotd .pos{font-size:16px} [data-ts="xl"] .wotd .pos{font-size:18px}
[data-ts="lg"] .wotd .phon{font-size:17px} [data-ts="xl"] .wotd .phon{font-size:19px}
[data-ts="lg"] .lesson .lx .h{font-size:21px} [data-ts="xl"] .lesson .lx .h{font-size:24px}
[data-ts="lg"] .lesson .lx .m{font-size:15px} [data-ts="xl"] .lesson .lx .m{font-size:16.5px}
[data-ts="lg"] .quiz .q{font-size:21px} [data-ts="xl"] .quiz .q{font-size:24px}
[data-ts="lg"] .opt{font-size:17px} [data-ts="xl"] .opt{font-size:19px}
[data-ts="lg"] .quiz .fb{font-size:16px} [data-ts="xl"] .quiz .fb{font-size:18px}
[data-ts="lg"] .brief-item .ttl{font-size:24px} [data-ts="xl"] .brief-item .ttl{font-size:27px}
[data-ts="lg"] .brief-item .dek{font-size:16.5px} [data-ts="xl"] .brief-item .dek{font-size:18.5px}
[data-ts="lg"] .eventcard .ev .n{font-size:20.5px} [data-ts="xl"] .eventcard .ev .n{font-size:23px}
[data-ts="lg"] .pathcard .ph{font-size:25px} [data-ts="xl"] .pathcard .ph{font-size:28px}
[data-ts="lg"] .pathcard .pd{font-size:15.5px} [data-ts="xl"] .pathcard .pd{font-size:17.5px}
[data-ts="lg"] .gloss-item .term{font-size:23px} [data-ts="xl"] .gloss-item .term{font-size:26px}
[data-ts="lg"] .gloss-item .def{font-size:16.5px} [data-ts="xl"] .gloss-item .def{font-size:18.5px}
[data-ts="lg"] .gloss-item .note{font-size:15.5px} [data-ts="xl"] .gloss-item .note{font-size:17.5px}
[data-ts="lg"] .search input{font-size:18.5px} [data-ts="xl"] .search input{font-size:21px}
[data-ts="lg"] .secline h3{font-size:24px} [data-ts="xl"] .secline h3{font-size:27px}
[data-ts="lg"] .mrow .ml .a{font-size:17.5px} [data-ts="xl"] .mrow .ml .a{font-size:19.5px}
[data-ts="lg"] .mrow .ml .b{font-size:14px} [data-ts="xl"] .mrow .ml .b{font-size:16px}
[data-ts="lg"] .plan .pt{font-size:26px} [data-ts="xl"] .plan .pt{font-size:29px}
[data-ts="lg"] .plan .pl{font-size:15.5px} [data-ts="xl"] .plan .pl{font-size:17.5px}
[data-ts="lg"] .cert h3,[data-ts="lg"] .teams h3{font-size:25px} [data-ts="xl"] .cert h3,[data-ts="xl"] .teams h3{font-size:28px}
[data-ts="lg"] .cert p,[data-ts="lg"] .teams p{font-size:15.5px} [data-ts="xl"] .cert p,[data-ts="xl"] .teams p{font-size:17.5px}
[data-ts="lg"] .namebox input{font-size:18.5px} [data-ts="xl"] .namebox input{font-size:21px}
[data-ts="lg"] .profile .pn{font-size:27px} [data-ts="xl"] .profile .pn{font-size:30px}
[data-ts="lg"] .legal-disc .lg-line{font-size:13px} [data-ts="xl"] .legal-disc .lg-line{font-size:14.5px}
[data-ts="lg"] .today-date,[data-ts="lg"] .date{letter-spacing:.1em}

/* ---------- SETTINGS controls (segmented + swatches) ---------- */
.set-row{display:flex;align-items:center;gap:14px;padding:15px 2px;border-bottom:1px solid var(--line-2)}
.set-row .mi{width:34px;height:34px;border-radius:9px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--brass);flex:0 0 auto}
.set-row .mi svg{width:16px;height:16px}
.set-row .ml{flex:1;min-width:0}
.set-row .ml .a{font-size:15.5px;color:var(--ink)}
.set-row .ml .b{font-size:12.5px;color:var(--muted)}
.seg{display:flex;gap:6px;flex:0 0 auto}
.seg button{border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13px;color:var(--ink-soft);font-weight:600;min-width:38px;transition:.15s}
.seg button.on{background:var(--brass);color:var(--night);border-color:var(--brass)}
.seg .ts-s{font-size:12px}.seg .ts-m{font-size:14px}.seg .ts-l{font-size:16.5px}

/* ---------- AVATAR PICKER ---------- */
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:12px;margin-top:4px}
.av-opt{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid var(--line);cursor:pointer;background:var(--card-3);transition:.16s}
.av-opt img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.av-opt.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,200,112,.25)}
.av-opt.on::after{content:"✓";position:absolute;right:4px;bottom:4px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:var(--night);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.av-name{font-size:10px;text-align:center;color:var(--muted);margin-top:4px;line-height:1.2}
.av-wrap{display:flex;flex-direction:column;align-items:center}

/* ---------- PLAY screen ---------- */
#s-play{padding-left:14px;padding-right:14px}
.play-tabs{display:flex;gap:8px;margin:2px 0 16px}
.play-tab{flex:1;border:1px solid var(--line);border-radius:11px;padding:12px 10px;text-align:center;transition:.16s;background:var(--card)}
.play-tab .pt-n{font-family:var(--display);font-size:18px;font-weight:600;color:var(--ink)}
.play-tab .pt-d{font-size:11px;color:var(--muted);margin-top:2px}
.play-tab.on{border-color:var(--gold);background:rgba(232,200,112,.08)}
.play-tab.on .pt-n{color:var(--gold)}
.play-pane{display:none}
.play-pane.on{display:block}
.xw-launch{background:radial-gradient(300px 160px at 85% 0,rgba(52,178,206,.14),transparent 60%),var(--card-2);border:1px solid var(--line-3);border-radius:16px;padding:20px 18px;text-align:center}
.xw-launch h3{font-family:var(--display);font-size:23px;font-weight:600;margin-bottom:6px}
.xw-launch p{font-size:14px;color:var(--ink-soft);line-height:1.5;margin-bottom:15px}

/* ---------- CHESS (ported, mobile-tuned, theme-independent parchment) ---------- */
.chs-paper{position:relative;border-radius:6px;padding:18px 14px 16px;color:#2A2118;border:1px solid #B7A375;
  background:
    radial-gradient(700px 360px at 18% -5%,rgba(120,90,40,.12),transparent 60%),
    repeating-linear-gradient(0deg,rgba(90,70,40,.04) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,#EAE0C6 0%,#E2D5B4 45%,#E8DCC2 100%);
  box-shadow:0 12px 32px rgba(0,0,0,.30),inset 0 0 70px rgba(96,72,38,.18)}
.chs-mast{text-align:center;border-bottom:2px solid #3A2D1A;padding-bottom:10px;margin-bottom:16px}
.chs-kick{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#6B5638;font-weight:600}
.chs-mast h3{font-family:var(--display);font-size:30px;font-weight:700;color:#241B0F;line-height:1;margin:5px 0 0}
.chs-status{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#6B5638;border-top:1px solid rgba(70,52,28,.45);margin-top:9px;padding-top:8px;font-weight:600}
.chs-layout{display:flex;flex-direction:column;gap:18px;align-items:center}
.chs-board-wrap{position:relative;display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}
.chs-toast{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:10;cursor:pointer}
.chs-toast.show{display:flex;animation:chsPop .32s cubic-bezier(.2,.8,.25,1)}
.chs-toast-in{background:rgba(234,224,198,.97);border:2px solid #3A2D1A;border-radius:4px;padding:14px 26px;font-family:var(--display);font-weight:700;font-size:30px;color:#241B0F;box-shadow:0 16px 44px rgba(0,0,0,.55);text-align:center}
@keyframes chsPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.chs-celebrate{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;z-index:20;background:rgba(20,12,4,.86);backdrop-filter:blur(3px);border-radius:6px;cursor:pointer;padding:16px}
.chs-celebrate.show{display:flex;animation:chsPop .4s cubic-bezier(.2,.8,.25,1)}
.chs-vid-circle{width:min(58vw,230px);height:min(58vw,230px);border-radius:8px;overflow:hidden;border:5px solid #C9A24B;box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 3px #3A2D1A;background:#000}
.chs-celebrate.novid .chs-vid-circle{display:none}
.chs-vid-circle video{width:100%;height:100%;object-fit:cover;display:block}
.chs-celebrate-cap{font-family:var(--display);font-weight:700;font-size:24px;color:#F2DA94;margin-top:18px;text-align:center;max-width:18ch;line-height:1.12}
.chs-celebrate.is-win .chs-celebrate-cap{color:#8FE0B0}
.chs-celebrate.is-draw .chs-celebrate-cap{color:#E8D9A8}
.chs-celebrate-sub{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#CFC3A6;margin-top:12px;opacity:.75}
.chs-board{width:min(86vw,440px);height:min(86vw,440px);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  border:3px solid #3A2D1A;box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,250,235,.4);background:#3A2D1A}
.chs-sq{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;overflow:hidden}
.chs-sq.lt{background:#ECE2C7}.chs-sq.dk{background:#C6A974}
.chs-sq.last::after{content:"";position:absolute;inset:0;background:rgba(122,84,23,.20);pointer-events:none}
.chs-sq.sel{box-shadow:inset 0 0 0 4px rgba(122,84,23,.85)}
.chs-sq.chk::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(193,53,53,.55),rgba(193,53,53,0) 70%);pointer-events:none}
.chs-pc{font-size:calc(min(86vw,440px)/8 * .82);line-height:1;position:relative;z-index:2;pointer-events:none}
.chs-pc.w{color:#FBF4DE;text-shadow:0 1px 1px rgba(0,0,0,.35);-webkit-text-stroke:1.4px #3A2D1A}
.chs-pc.b{color:#5A3E22;text-shadow:0 1px 0 rgba(255,250,235,.22)}
.chs-sq.mv::after{content:"";position:absolute;width:26%;height:26%;border-radius:50%;background:rgba(58,45,26,.42);z-index:1;pointer-events:none}
.chs-sq.cap::after{content:"";position:absolute;inset:8%;border:4px solid rgba(58,45,26,.5);border-radius:50%;z-index:1;pointer-events:none}
.chs-rank,.chs-file{position:absolute;font-family:var(--body);font-size:9px;font-weight:700;color:rgba(58,45,26,.6);z-index:3;pointer-events:none}
.chs-rank{top:2px;left:3px}.chs-file{bottom:1px;right:4px}
.chs-side{display:flex;flex-direction:column;gap:16px;width:100%}
.chs-opp{display:flex;gap:12px;align-items:center;border-bottom:1px solid rgba(70,52,28,.4);padding-bottom:13px}
.chs-opp img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid #8A744E;object-position:50% 40%;flex-shrink:0}
.chs-opp .who{font-family:var(--display);font-size:20px;font-weight:700;color:#241B0F;line-height:1.05}
.chs-opp .role{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7A5417;margin-top:3px;font-weight:600}
.chs-say{font-family:var(--display);font-style:italic;font-size:17px;line-height:1.4;color:#3A2F20;min-height:2.4em}
.chs-clocks{display:flex;gap:10px}
.chs-clock{flex:1;border:1px solid rgba(70,52,28,.4);border-radius:3px;padding:8px 12px;text-align:center;background:rgba(58,45,26,.05)}
.chs-clock .lbl{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#7A5417;font-weight:700;margin-bottom:3px}
.chs-clock .t{font-family:var(--display);font-size:26px;font-weight:700;color:#241B0F;line-height:1;font-variant-numeric:tabular-nums}
.chs-clock .t.low{color:#B23A2E}
.chs-block .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7A5417;font-weight:700;margin-bottom:7px}
.chs-cap-row{min-height:28px;display:flex;flex-wrap:wrap;gap:1px;align-items:center;border-bottom:1px dotted rgba(70,52,28,.4);padding-bottom:7px}
.chs-cap-pc{font-size:22px;line-height:1}
.chs-cap-pc.w{color:#FBF4DE;-webkit-text-stroke:1.1px #5B4930}.chs-cap-pc.b{color:#5A3E22}
.chs-seg{display:flex;gap:6px;flex-wrap:wrap}
.chs-seg button{font-family:var(--body);font-size:13px;font-weight:600;color:#3A2F20;background:transparent;border:1px solid #8A744E;border-radius:3px;padding:8px 14px;cursor:pointer;transition:.18s}
.chs-seg button.on{background:#3A2D1A;color:#EFE5CB;border-color:#3A2D1A}
.chs-ctrls{display:flex;gap:8px;flex-wrap:wrap}
.chs-btn{font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:3px;padding:11px 16px;cursor:pointer;transition:.18s;border:1px solid #3A2D1A}
.chs-btn.primary{background:#3A2D1A;color:#EFE5CB}.chs-btn.ghost{background:transparent;color:#3A2D1A}
.chs-btn.sm{padding:9px 14px}
.chs-name-row{display:flex;gap:8px}
.chs-name-row input{flex:1;min-width:0;font-family:var(--body);font-size:15px;padding:9px 12px;border:1px solid #8A744E;border-radius:3px;background:rgba(255,253,243,.6);color:#241B0F}
.chs-name-row input::placeholder{color:#9A875F}
.chs-clock-btn{width:100%}.chs-clock-btn.on{background:#3A2D1A;color:#EFE5CB}
.chs-foot{font-size:12px;font-style:italic;color:#6B5638;border-top:1px solid rgba(70,52,28,.45);padding-top:12px;line-height:1.5}
@media (min-width:680px){
  .chs-layout{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
  .chs-board{width:min(58vw,460px);height:min(58vw,460px)}
  .chs-pc{font-size:calc(min(58vw,460px)/8 * .82)}
  .chs-side{width:auto}
}

/* ---------- CJK reading comfort: looser leading on display lines ---------- */
html[lang^="zh"] .lead-h{line-height:1.5;letter-spacing:.04em;word-spacing:.05em}
html[lang^="zh"] .chs-celebrate-cap{line-height:1.65;letter-spacing:.05em;max-width:16ch}
html[lang^="zh"] .chs-toast-in{line-height:1.6;letter-spacing:.045em}
html[lang^="zh"] .lead-p{line-height:1.85;letter-spacing:.02em}
html[lang^="zh"] .chs-status{line-height:1.65;letter-spacing:.03em}
html[lang^="zh"] .chs-say{line-height:1.7;letter-spacing:.03em}

/* ---------- per-screen background variety (subtle, non-distracting) ---------- */
body[data-screen="today"]{background-image:
  radial-gradient(640px 400px at 88% -6%,rgba(52,178,206,.15),transparent 60%),
  radial-gradient(560px 380px at -8% 10%,rgba(201,162,75,.13),transparent 60%),
  radial-gradient(760px 540px at 50% 120%,rgba(221,84,153,.07),transparent 60%);}
body[data-screen="briefing"]{background-image:
  radial-gradient(640px 420px at 90% -8%,rgba(52,178,206,.18),transparent 60%),
  radial-gradient(560px 400px at -10% 12%,rgba(52,178,206,.09),transparent 60%),
  radial-gradient(760px 560px at 45% 122%,rgba(201,162,75,.08),transparent 60%);}
body[data-screen="learn"]{background-image:
  radial-gradient(620px 420px at 86% -8%,rgba(40,170,120,.16),transparent 60%),
  radial-gradient(560px 400px at -8% 10%,rgba(201,162,75,.12),transparent 60%),
  radial-gradient(800px 560px at 52% 120%,rgba(40,170,120,.08),transparent 60%);}
body[data-screen="glossary"]{background-image:
  radial-gradient(620px 420px at 88% -8%,rgba(221,84,153,.15),transparent 60%),
  radial-gradient(560px 400px at -8% 12%,rgba(150,110,210,.10),transparent 60%),
  radial-gradient(780px 560px at 48% 122%,rgba(201,162,75,.08),transparent 60%);}
body[data-screen="play"]{background-image:
  radial-gradient(620px 420px at 86% -8%,rgba(201,162,75,.16),transparent 60%),
  radial-gradient(560px 400px at -10% 12%,rgba(221,84,153,.09),transparent 60%),
  radial-gradient(800px 560px at 50% 122%,rgba(52,178,206,.08),transparent 60%);}
body[data-screen="me"]{background-image:
  radial-gradient(620px 420px at 88% -8%,rgba(201,162,75,.17),transparent 60%),
  radial-gradient(560px 400px at -8% 12%,rgba(150,110,45,.12),transparent 60%),
  radial-gradient(780px 560px at 50% 122%,rgba(52,178,206,.07),transparent 60%);}


/* ============================================================
   STUDY KIT — per-track tiles + notes reader + flashcards
   ============================================================ */
.sk-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:2px 0 4px}
.sk-tile{position:relative;text-align:left;background:var(--card);border:1px solid var(--line-3);border-radius:13px;padding:12px 12px 11px;display:flex;flex-direction:column;gap:3px;transition:.16s}
.sk-tile:active{transform:scale(.98)}
.sk-tile-ic{width:30px;height:30px;border-radius:8px;background:rgba(201,162,75,.12);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:5px}
.sk-tile-ic svg{width:16px;height:16px}
.sk-tile-t{font-family:var(--display);font-size:17.5px;font-weight:600;color:var(--ink)}
.sk-tile-s{font-size:11.5px;color:var(--muted);line-height:1.35}
.sk-tile-m{font-size:10px;letter-spacing:.05em;color:var(--brass);margin-top:4px;font-weight:600}
.sk-over{position:fixed;inset:0;z-index:70;background:var(--night);display:none;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
[data-theme="light"] .sk-over{background:var(--khaki)}
.sk-over.on{display:flex}
.sk-bar{display:flex;align-items:center;gap:12px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.sk-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);color:var(--ink-soft);font-size:15px;flex:0 0 auto}
.sk-bar-x{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sk-bar-k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:700}
.sk-bar-t{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.05;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-bar-m{font-size:11px;color:var(--muted);flex:0 0 auto}
.sk-depth{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line-2)}
.sk-depth-l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;flex:0 0 auto}
.sk-seg{display:flex;gap:5px;flex:1;overflow-x:auto;scrollbar-width:none}
.sk-seg::-webkit-scrollbar{display:none}
.sk-seg-b{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:20px;padding:6px 11px;font-size:11.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;transition:.15s;flex:0 0 auto}
.sk-seg-b .sk-seg-n{font-size:9px;opacity:.7}
.sk-seg-b.on{background:var(--brass);color:var(--night);border-color:var(--brass)}
.sk-body{flex:1;overflow-y:auto;padding:18px 18px 42px;-webkit-overflow-scrolling:touch}
.sk-h{font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink);margin-bottom:9px}
.sk-h-outline{margin-top:26px}
.sk-sum-p{font-size:14.5px;line-height:1.62;color:var(--ink-soft);margin-bottom:10px;text-wrap:pretty}
.sk-sum-p b{color:var(--ink)}
.sk-facts{margin-top:14px}
.sk-facts-h{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);font-weight:700;margin-bottom:8px}
.sk-facts-g{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sk-fact{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.sk-fact-v{font-family:var(--display);font-size:17px;font-weight:700;color:var(--gold);line-height:1.15}
.sk-fact-k{font-size:10.5px;color:var(--muted);line-height:1.3}
.sk-lvnote{font-size:11.5px;color:var(--faint);font-style:italic;margin:-3px 0 14px}
.sk-unit{border:1px solid var(--line-2);border-radius:14px;background:var(--card);padding:14px 14px 12px;margin-bottom:13px}
.sk-unit-head{display:flex;align-items:baseline;gap:9px;margin-bottom:7px}
.sk-un{font-family:var(--display);font-style:italic;font-size:19px;color:var(--gold);flex:0 0 auto}
.sk-unit-head h4{font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);line-height:1.15}
.sk-goal{font-size:12px;color:var(--peacock);margin-bottom:10px;line-height:1.45}
.sk-goal span{font-weight:700;letter-spacing:.04em}
.sk-pt{padding:9px 0 8px;border-top:1px solid var(--line-2)}
.sk-pt-t{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
.sk-pt-d{font-size:13.5px;line-height:1.58;color:var(--ink-soft);margin-top:3px;text-wrap:pretty}
.sk-pt-d b{color:var(--ink)}
.sk-src{font-size:10.5px;color:var(--faint);margin-top:5px;letter-spacing:.02em}
.sk-lv{font-size:8.5px;font-weight:800;letter-spacing:.1em;border-radius:4px;padding:2px 5px;flex:0 0 auto}
.sk-lv.l1{color:var(--muted);border:1px solid var(--line)}
.sk-lv.l2{color:var(--gold);border:1px solid var(--line-3)}
.sk-lv.l3{color:var(--peacock);border:1px solid rgba(52,178,206,.4)}
.sk-lv.l4{color:var(--magenta);border:1px solid rgba(221,84,153,.4)}
.sk-more{display:block;width:100%;text-align:center;border:1px dashed var(--line);border-radius:9px;padding:8px;font-size:11.5px;color:var(--brass);margin-top:8px}
.sk-note{margin-top:10px;border:1px solid rgba(52,178,206,.25);background:rgba(52,178,206,.07);border-radius:10px;padding:10px 12px}
.sk-note-k{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--peacock);font-weight:800}
.sk-note p{font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin-top:4px}
.sk-disc{font-size:11px;color:var(--faint);font-style:italic;text-align:center;margin-top:20px}
.sk-lvchips{display:flex;gap:6px;padding:12px 16px 4px;overflow-x:auto;scrollbar-width:none}
.sk-lvchips::-webkit-scrollbar{display:none}
.sk-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 18px;min-height:0}
.sk-fc{width:min(100%,430px);height:min(56vh,340px);perspective:1200px;cursor:pointer}
.sk-fc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,.9,.35,1)}
.sk-fc.flipped .sk-fc-in{transform:rotateY(180deg)}
.sk-fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;border:1px solid var(--line-3);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;overflow:hidden}
.sk-fc-front{box-shadow:0 18px 44px rgba(0,0,0,.3)}
.sk-fc-back{transform:rotateY(180deg);background:var(--card-2,var(--card))}
.sk-fc-q{font-family:var(--display);font-size:21px;font-weight:600;line-height:1.28;color:var(--ink);text-wrap:pretty}
.sk-fc-a{font-size:15px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty;overflow-y:auto;max-height:100%}
.sk-fc-hint{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.sk-actions{display:flex;gap:10px;padding:0 18px 12px}
.sk-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:14px;font-size:14.5px;font-weight:700;transition:.15s}
.sk-btn svg{width:16px;height:16px}
.sk-btn.ghost{border:1px solid var(--line);color:var(--ink-soft)}
.sk-btn.em{background:var(--brass);color:var(--night)}
.sk-cfoot{display:flex;align-items:center;justify-content:space-between;padding:0 20px 22px;font-size:11.5px;color:var(--muted)}
.sk-reset{font-size:11.5px;color:var(--faint);text-decoration:underline}
.sk-done{text-align:center;max-width:300px}
.sk-done-badge{font-size:44px;margin-bottom:10px}
.sk-done-h{font-family:var(--display);font-size:26px;font-weight:600;color:var(--ink)}
.sk-done-p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:8px}
.sk-done-stats{margin-top:12px;font-size:12px;color:var(--gold);font-weight:700}

/* ============================================================
   BEAT THE ROBOT — the server room
   ============================================================ */
.play-tabs.four .play-tab{padding:10px 5px}
.play-tabs.four .pt-n{font-size:15px}
.play-tabs.four .pt-d{font-size:9px}
.rg-paper{border-radius:14px;border:1px solid #1e3b34;background:radial-gradient(500px 300px at 80% -10%,rgba(52,178,206,.13),transparent 60%),#0A1B18;padding:16px 14px;color:#DCE9E2;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.rg-mast{text-align:center;border-bottom:1px solid rgba(201,162,75,.25);padding-bottom:10px;margin-bottom:12px}
.rg-kick{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#7FA79A;font-weight:700}
.rg-mast h3{font-family:var(--display);font-size:28px;font-weight:700;color:#F3E9D2;line-height:1;margin-top:4px}
.rg-status{font-family:var(--display);font-style:italic;font-size:14px;color:#9DBFB3;margin-top:7px;min-height:1.3em}
.rg-modes{display:flex;gap:7px;margin-bottom:11px}
.rg-mode{flex:1;border:1px solid #22443C;border-radius:10px;padding:8px 4px;text-align:center;transition:.15s;background:rgba(255,255,255,.02)}
.rg-mode.on{border-color:#E8C870;background:rgba(232,200,112,.1)}
.rg-mode-n{display:block;font-family:var(--display);font-size:15.5px;font-weight:700;color:#F3E9D2}
.rg-mode.on .rg-mode-n{color:#E8C870}
.rg-mode-d{display:block;font-size:9px;color:#7FA79A;margin-top:2px}
.rg-stats{display:flex;gap:7px;margin-bottom:10px}
.rg-stat{flex:1;border:1px solid #1C3830;border-radius:9px;padding:7px 4px;text-align:center;background:rgba(0,0,0,.18)}
.rg-stat .v{display:block;font-family:var(--display);font-size:19px;font-weight:700;color:#EFE3C4;font-variant-numeric:tabular-nums;line-height:1}
.rg-stat .v.low{color:#E8756A}
.rg-stat .k{display:block;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:#7FA79A;margin-top:3px;font-weight:700}
.rg-board-wrap{position:relative;width:100%;max-width:430px;margin:0 auto}
.rg-board{display:grid;border:2px solid #2A4A41;border-radius:8px;overflow:hidden;background:#0D211D;aspect-ratio:1/1}
.rg-sq{position:relative;display:flex;align-items:center;justify-content:center;background:#0F2621;min-height:0}
.rg-sq.dk{background:#0C1F1B}
.rg-sq.wall{background:linear-gradient(160deg,#233F38,#1A2F2A);box-shadow:inset 0 0 0 1px rgba(201,162,75,.28),inset 0 2px 0 rgba(255,255,255,.06)}
.rg-pc{font-size:20px;line-height:1;z-index:2}
.rg-bot.cloak{opacity:.13;filter:blur(1px)}
.rg-chip{color:#E8C870;font-size:13px;text-shadow:0 0 8px rgba(232,200,112,.6)}
.rg-foot{color:#3E6B5F;font-size:20px;line-height:0}
.rg-foot.f0{opacity:.8}.rg-foot.f1{opacity:.5}.rg-foot.f2{opacity:.28}
.rg-flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:.12s;z-index:6}
.rg-flash.show{opacity:1}
.rg-flash span{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:.06em;padding:8px 22px;border-radius:6px}
.rg-flash.gotcha span{background:rgba(38,80,55,.92);color:#B9E8C6;border:2px solid #7FC493}
.rg-flash.zap span{background:rgba(96,42,32,.92);color:#FFC9B8;border:2px solid #E8756A}
.rg-flash.breach span{background:rgba(90,28,60,.92);color:#F5B8D6;border:2px solid #DD5499}
.rg-scrim{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(6,17,14,.88);backdrop-filter:blur(2px);z-index:8;border-radius:8px;padding:18px}
.rg-scrim.show{display:flex}
.rg-intro,.rg-over{text-align:center;max-width:300px}
.rg-emoji{font-size:40px;margin-bottom:10px}
.rg-btn{border-radius:11px;padding:12px 22px;font-size:14.5px;font-weight:800;letter-spacing:.04em}
.rg-btn.primary{background:#E8C870;color:#10231F}
.rg-how{font-size:11.5px;line-height:1.55;color:#9DBFB3;margin-top:14px;text-align:left}
.rg-how b{color:#DCE9E2}
.rg-over-h{font-family:var(--display);font-size:26px;font-weight:700;color:#F3E9D2}
.rg-over-score{font-size:15px;color:#DCE9E2;margin-top:8px}
.rg-over-score b{font-family:var(--display);font-size:26px;color:#E8C870}
.rg-newbest{color:#8FE0B0;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.rg-over-best{font-size:11px;color:#7FA79A;margin-top:3px}
.rg-over-sub{font-family:var(--display);font-style:italic;font-size:13.5px;color:#9DBFB3;margin:10px 0 14px}
.rg-ctrl{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:12px}
.rg-pad{display:grid;grid-template-columns:repeat(3,minmax(64px,88px));grid-template-rows:repeat(2,56px);gap:8px;width:100%;max-width:300px;justify-content:center}
.rg-pad button{width:100%;height:56px;border-radius:13px;border:1px solid #2A4A41;background:rgba(255,255,255,.04);color:#CFE3DA;display:flex;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.rg-pad button:active{background:rgba(232,200,112,.18);border-color:#E8C870}
.rg-pad button svg{width:24px;height:24px}
.rg-pad button:nth-child(1){grid-column:2;grid-row:1}
.rg-pad button:nth-child(2){grid-column:1;grid-row:2}
.rg-pad button:nth-child(3){grid-column:2;grid-row:2}
.rg-pad button:nth-child(4){grid-column:3;grid-row:2}
.rg-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 14px;font-size:10.5px;color:#7FA79A;text-align:center}
.rg-chip-i{color:#E8C870;font-style:normal}

/* ============================================================
   CATCH THE BUG — the midnight arcade
   ============================================================ */
.bg-paper{border-radius:14px;border:1px solid #3A2A3E;background:radial-gradient(480px 280px at 15% -10%,rgba(221,84,153,.14),transparent 60%),#150F1E;padding:16px 14px;color:#E7DFEF;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.bg-mast{text-align:center;border-bottom:1px solid rgba(221,84,153,.3);padding-bottom:10px;margin-bottom:11px}
.bg-kick{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#A98BB8;font-weight:700}
.bg-mast h3{font-family:var(--display);font-size:28px;font-weight:700;color:#F6E8FA;line-height:1;margin-top:4px}
.bg-status{font-family:var(--display);font-style:italic;font-size:14px;color:#BFA3CE;margin-top:7px;min-height:1.3em}
.bg-coinrow{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.bg-coins-l{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:#A98BB8;font-weight:700}
.bg-coins{display:flex;gap:5px}
.bg-coin{width:16px;height:16px;border-radius:50%;background:#2A2135;border:1px solid #4A3A56;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.bg-coin.on{background:radial-gradient(circle at 35% 30%,#F2DA94,#C9A24B 60%,#8A6B28);border-color:#E8C870;box-shadow:0 0 8px rgba(232,200,112,.4)}
.bg-coins-note{font-size:10px;color:#8A7099;margin-left:auto}
.bg-machine{position:relative;border-radius:14px;border:2px solid #5A4363;background:linear-gradient(180deg,#241A30,#1B1226);padding:10px 10px 12px;box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
.bg-marquee{display:flex;align-items:center;justify-content:center;gap:8px;padding:5px 0 9px}
.bg-marquee span{font-size:10px;letter-spacing:.24em;color:#F2DA94;font-weight:800;text-shadow:0 0 10px rgba(232,200,112,.55)}
.bg-marquee i{width:7px;height:7px;border-radius:50%;background:#DD5499;box-shadow:0 0 8px #DD5499;animation:bgBlink 1.1s infinite alternate}
.bg-marquee i:last-child{animation-delay:.55s}
@keyframes bgBlink{from{opacity:.35}to{opacity:1}}
.bg-glass{position:relative;height:215px;border-radius:10px;border:1px solid #6A5378;background:linear-gradient(180deg,rgba(90,70,110,.25),rgba(24,16,34,.6) 55%),#181022;overflow:hidden}
.bg-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.06) 38%,transparent 46%);pointer-events:none;z-index:7}
.bg-rail{position:absolute;top:10px;left:8px;right:8px;height:4px;border-radius:3px;background:#3A2B4A;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.bg-claw{position:absolute;top:12px;left:0;width:26px;display:flex;flex-direction:column;align-items:center;z-index:5;will-change:transform}
.bg-rope{width:2px;height:18px;background:linear-gradient(180deg,#8A7099,#4A3A56)}
.bg-head{position:relative;width:26px;height:20px}
.bg-prong{position:absolute;top:0;width:3px;height:16px;border-radius:2px;background:linear-gradient(180deg,#C9B4D6,#7A6389);transform-origin:top center;transition:transform .22s;z-index:2}
.bg-prong.l{left:5px;transform:rotate(26deg)}
.bg-prong.r{right:5px;transform:rotate(-26deg)}
.bg-head.grab .bg-prong.l{transform:rotate(6deg)}
.bg-head.grab .bg-prong.r{transform:rotate(-6deg)}
.bg-held{position:absolute;top:9px;left:50%;transform:translateX(-50%);font-size:19px;opacity:0;transition:opacity .2s;z-index:1}
.bg-held.show{opacity:1}
.bg-held.fall{transition:transform .5s cubic-bezier(.5,0,.9,.6),opacity .5s;transform:translateX(-50%) translateY(150px);opacity:.9}
.bg-chute{position:absolute;left:0;bottom:0;width:54px;height:64px;border-top:2px solid #6A5378;border-right:2px solid #6A5378;border-radius:0 10px 0 0;background:rgba(10,6,16,.72);display:flex;align-items:center;justify-content:center;z-index:3}
.bg-chute span{color:#DD5499;font-size:13px;opacity:.8;text-shadow:0 0 8px rgba(221,84,153,.5)}
.bg-pit{position:absolute;inset:0;z-index:2}
.bg-bug{position:absolute;font-size:24px;line-height:1;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.bg-floor{position:absolute;left:0;right:0;bottom:0;height:8px;background:#0C0814;border-top:1px solid #3A2B4A}
.bg-drop{display:flex;align-items:baseline;justify-content:center;gap:7px;width:100%;margin-top:11px;border-radius:11px;padding:13px;background:linear-gradient(180deg,#E8C870,#C9A24B);color:#241A30;font-weight:800;font-size:15px;letter-spacing:.04em;box-shadow:0 4px 0 #8A6B28;transition:.12s;touch-action:manipulation}
.bg-drop:active{transform:translateY(2px);box-shadow:0 2px 0 #8A6B28}
.bg-drop:disabled{opacity:.45;box-shadow:none}
.bg-drop span{font-size:10.5px;font-weight:600;opacity:.75}
.bg-banner{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.28s;z-index:80;width:min(320px,86vw)}
.bg-banner.show{opacity:1;transform:translate(-50%,0)}
.bg-banner-in{display:flex;gap:12px;align-items:center;border-radius:13px;padding:12px 14px;background:#241A30;border:1px solid #6A5378;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.bg-banner-in.r-l{border-color:#E8C870;box-shadow:0 0 24px rgba(232,200,112,.25),0 16px 40px rgba(0,0,0,.5)}
.bg-banner-e{font-size:30px}
.bg-banner-x{display:flex;flex-direction:column;gap:1px}
.bg-banner-x b{font-family:var(--display);font-size:17px;color:#F6E8FA}
.bg-banner-x span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#DD5499;font-weight:700}
.bg-banner-x i{font-size:11.5px;color:#BFA3CE}
.bg-shelf{margin-top:14px;border:1px solid #3A2A3E;border-radius:13px;background:rgba(255,255,255,.02);padding:13px 12px}
.bg-shelf-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.bg-shelf-h h4{font-family:var(--display);font-size:19px;font-weight:600;color:#F6E8FA}
.bg-shelf-h span{font-size:10.5px;color:#A98BB8;font-weight:700;letter-spacing:.08em}
.bg-shelf-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px}
.bg-dome{position:relative;border-radius:10px 10px 8px 8px;border:1px solid #4A3A56;background:linear-gradient(180deg,rgba(120,90,140,.16),rgba(20,12,28,.4));padding:9px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.bg-dome.empty{opacity:.45;cursor:default}
.bg-dome .bg-dome-b{font-size:22px;line-height:1}
.bg-dome.empty .bg-dome-b{color:#5A4363;font-weight:700}
.bg-dome-n{font-size:8.5px;color:#CFC0DB;text-align:center;line-height:1.15}
.bg-dome-r{font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A7099;font-weight:700}
.bg-dome-x{position:absolute;top:3px;right:4px;font-size:8.5px;color:#E8C870;font-weight:800}
.bg-dome.r-u{border-color:rgba(52,178,206,.5)}
.bg-dome.r-r{border-color:rgba(221,84,153,.55)}
.bg-dome.r-l{border-color:#E8C870;box-shadow:0 0 12px rgba(232,200,112,.22)}
.bg-dome.new{animation:bgPop .5s cubic-bezier(.3,1.4,.4,1)}
.bg-newtag{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:7.5px;font-weight:800;letter-spacing:.08em;background:#DD5499;color:#fff;border-radius:6px;padding:2px 6px;z-index:2}
@keyframes bgPop{from{transform:scale(.6)}to{transform:scale(1)}}
.bg-shelf-note{font-size:10.5px;color:#8A7099;font-style:italic;margin-top:10px;text-align:center}


/* ---------- GAME ROOM launcher (menu-first, back to room) ---------- */
.play-menu{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 18px}
.play-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:1px solid var(--line);border-radius:14px;padding:14px 13px 12px;background:var(--card);text-align:left;transition:.16s}
.play-card:active{transform:scale(.98);border-color:var(--gold)}
.play-card .pc-glyph{font-size:26px;line-height:1;color:var(--gold)}
.play-card .pc-n{display:block;font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);line-height:1.1}
.play-card .pc-d{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.play-card .pc-go{position:absolute;top:12px;right:10px;color:var(--brass);opacity:.7}
.play-card .pc-go svg{width:16px;height:16px}
.play-backbar{display:flex;align-items:center;gap:8px;margin:0 0 14px;border:1px solid var(--line);border-radius:22px;padding:9px 16px 9px 12px;color:var(--ink-soft);font-size:13px;font-weight:600;background:var(--card)}
.play-backbar svg{width:16px;height:16px;color:var(--brass)}
.play-backbar:active{border-color:var(--gold)}


/* ---------- 100-species shelf: rarity groups ---------- */
.bg-shelf-g{display:block}
.bg-shelf-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px}
.bg-rar-h{display:flex;justify-content:space-between;align-items:baseline;margin:13px 2px 7px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#A98BB8}
.bg-rar-h:first-child{margin-top:0}
.bg-rar-h i{font-style:normal;color:#8A7099;letter-spacing:.05em}
.bg-rar-h.r-u span{color:#5FC6DC}
.bg-rar-h.r-r span{color:#E58CB8}
.bg-rar-h.r-l span{color:#E8C870}
.bg-coin-more{font-size:10px;color:#E8C870;font-weight:800;align-self:center}


/* ---------- quiz-complete arcade-coin reward pill ---------- */
.qz-coin{margin-top:14px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-3);background:rgba(232,200,112,.1);border-radius:20px;padding:8px 14px;font-size:12.5px;color:var(--gold);font-weight:600;line-height:1.35;text-align:left}