/* ============================================================
   THE SYSTEM — stylesheet
   Original "status window" design language. Dark, holographic,
   bracketed panels, scanline shimmer. Re-skins per hunter theme.
   ============================================================ */

@import url('../fonts/fonts.css');   /* self-hosted (no request to Google: owner 2026-09-30 later 11) */

/* ---------- THEME TOKENS ---------- */
:root {
  --font-ui: 'Chakra Petch', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Chakra Petch', system-ui, sans-serif;

  /* iOS home-indicator inset — referenced app-wide (tour coach, mobile tabbars,
     sheet footers). Defined once here so `var(--safe-b)` is never invalid;
     0 on non-notch devices/desktop, the real inset on notched phones. */
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* default = monarch */
  --bg:        #04070e;
  --bg-2:      #070c17;
  --panel:     rgba(13, 24, 43, 0.85);
  --panel-2:   rgba(8, 15, 29, 0.9);
  --accent:    #36c9ff;
  --accent-2:  #4f7bff;
  --accent-ink:#001019;
  --line:      rgba(86, 198, 255, 0.30);
  --line-soft: rgba(86, 198, 255, 0.14);
  --glow:      rgba(54, 201, 255, 0.55);
  --text:      #e7f3ff;
  --dim:       #7d93ad;
  --dimmer:    #4a5a70;
  --good:      #4fe0b0;
  --warn:      #ffcf5a;
  --bad:       #ff6a6a;
  --fx: 1;            /* FX intensity multiplier (tweakable) */
  --scan: 0.4;        /* scanline opacity */
  --content-max: 1240px;  /* desktop content column cap — centered after the rail */
  --ui-scale: 1.25;       /* default UI scale — 1.00 here renders like browser 125% zoom */
}

/* Legacy per-hunter [data-theme] palettes removed — superseded by the
   World skins below, which re-skin the whole app via [data-skin]. */

/* ============================================================
   WORLD SKINS — the whole app embodies the active World.
   Each sets palette + typography (+ texture tweaks below).
   ============================================================ */
[data-skin='system'] {
  --bg:#04070e; --bg-2:#070c17; --panel:rgba(13,24,43,.85); --panel-2:rgba(8,15,29,.9);
  --accent:#36c9ff; --accent-2:#4f7bff; --accent-ink:#001019;
  --line:rgba(86,198,255,.30); --line-soft:rgba(86,198,255,.14); --glow:rgba(54,201,255,.55);
  --text:#e7f3ff; --dim:#7d93ad; --dimmer:#4a5a70;
  --font-ui:'Chakra Petch',sans-serif; --font-mono:'JetBrains Mono',monospace; --font-display:'Chakra Petch',sans-serif;
}
[data-skin='branded'] {
  --bg:#0a0807; --bg-2:#120c0b; --panel:rgba(24,17,15,.92); --panel-2:rgba(16,11,10,.95);
  --accent:#c5160b; --accent-2:#ff5a2a; --accent-ink:#fbeee6;
  --line:rgba(120,80,70,.32); --line-soft:rgba(120,80,70,.16); --glow:rgba(197,22,11,.5);
  --text:#ece4d6; --dim:#9a8c7d; --dimmer:#6a5e52;
  --font-ui:'EB Garamond',Georgia,serif; --font-mono:'Oswald',sans-serif; --font-display:'Cinzel',serif;
}
[data-skin='dante'] {
  --bg:#0c0504; --bg-2:#160706; --panel:rgba(36,12,9,.92); --panel-2:rgba(24,8,7,.95);
  --accent:#ff3b27; --accent-2:#ff8a3d; --accent-ink:#1a0200;
  --line:rgba(255,90,60,.30); --line-soft:rgba(255,90,60,.15); --glow:rgba(255,59,39,.55);
  --text:#ffe6df; --dim:#c08a80; --dimmer:#7a4a44;
  --font-ui:'EB Garamond',serif; --font-mono:'Oswald',sans-serif; --font-display:'Cinzel',serif;
}
[data-skin='vergil'] {
  --bg:#05070f; --bg-2:#080c18; --panel:rgba(12,19,38,.92); --panel-2:rgba(8,12,26,.95);
  --accent:#4f9bff; --accent-2:#9a86ff; --accent-ink:#020816;
  --line:rgba(110,140,255,.28); --line-soft:rgba(110,140,255,.13); --glow:rgba(90,140,255,.45);
  --text:#eaf1ff; --dim:#93a6cc; --dimmer:#52617f;
  --font-ui:'Cormorant Garamond',serif; --font-mono:'Oswald',sans-serif; --font-display:'Cormorant Garamond',serif;
}
[data-skin='cultivation'] {
  --bg:#05100c; --bg-2:#08170f; --panel:rgba(11,32,23,.92); --panel-2:rgba(8,22,15,.95);
  --accent:#3fd99a; --accent-2:#b8965a; --accent-ink:#021a12;
  --line:rgba(63,217,154,.28); --line-soft:rgba(63,217,154,.13); --glow:rgba(63,217,154,.4);
  --text:#e6fff2; --dim:#86b8a0; --dimmer:#4e6e60;
  --font-ui:'EB Garamond',serif; --font-mono:'Oswald',sans-serif; --font-display:'Cinzel',serif;
}
[data-skin='saga'] {
  --bg:#0d0a05; --bg-2:#15100a; --panel:rgba(29,21,11,.92); --panel-2:rgba(20,15,9,.95);
  --accent:#ffb627; --accent-2:#ff6a3d; --accent-ink:#1c1400;
  --line:rgba(255,182,39,.28); --line-soft:rgba(255,182,39,.14); --glow:rgba(255,182,39,.45);
  --text:#fff4e0; --dim:#b8a472; --dimmer:#6e6244;
  --font-ui:'EB Garamond',serif; --font-mono:'Oswald',sans-serif; --font-display:'Cinzel Decorative','Cinzel',serif;
}
/* VIOLET — Amethyst Monarch: the base System look in violet (Feel: Violet) */
[data-skin='monarchviolet'] {
  --bg:#070512; --bg-2:#0c0a1c; --panel:rgba(20,14,42,.9); --panel-2:rgba(14,10,30,.94);
  --accent:#9a6bff; --accent-2:#6b7bff; --accent-ink:#0a0518;
  --line:rgba(150,110,255,.30); --line-soft:rgba(150,110,255,.14); --glow:rgba(150,107,255,.5);
  --text:#ece8ff; --dim:#9089c8; --dimmer:#5d5690; --good:#5fd6a0; --bad:#ff5a6a;
  --font-ui:'Chakra Petch',sans-serif; --font-mono:'JetBrains Mono',monospace; --font-display:'Chakra Petch',sans-serif;
}
/* ONYX — monochrome black variant of the base System look (Feel: Onyx) */
[data-skin='onyxblack'] {
  --bg:#050506; --bg-2:#0b0c0e; --panel:rgba(18,19,22,.9); --panel-2:rgba(12,13,15,.94);
  --accent:#c9cfda; --accent-2:#7f8794; --accent-ink:#0a0b0d;
  --line:rgba(200,208,220,.26); --line-soft:rgba(200,208,220,.12); --glow:rgba(200,208,220,.42);
  --text:#eef0f4; --dim:#9aa0ab; --dimmer:#5c626c; --good:#5fd6a0; --bad:#ff5a6a;
  --font-ui:'Chakra Petch',sans-serif; --font-mono:'JetBrains Mono',monospace; --font-display:'Chakra Petch',sans-serif;
}
/* MURIM — light scroll/papyrus; overrides dark assumptions */
[data-skin='murim'] {
  --bg:#e7dabb; --bg-2:#e0d1ac; --panel:rgba(243,233,206,.94); --panel-2:rgba(233,219,182,.96);
  --accent:#b3331d; --accent-2:#8a2414; --accent-ink:#f3e6c8;
  --line:rgba(150,110,60,.40); --line-soft:rgba(150,110,60,.20); --glow:rgba(179,51,29,.22);
  --text:#241a10; --dim:#6e5a3c; --dimmer:#9c8a64;
  --good:#3f7d2f; --warn:#a9701a; --bad:#9a2418;
  --font-ui:'Noto Serif',serif; --font-mono:'Noto Serif',serif; --font-display:'Noto Serif',serif;
}

/* world typography hooks */
.big-num, .rank { font-family: var(--font-display); }

/* Murim (light) — tame the dark-built ambient backdrop */
[data-skin='murim'] .app-bg {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(179,51,29,.08), transparent 55%),
    radial-gradient(140% 120% at 50% 60%, transparent 60%, rgba(120,90,40,.20) 100%),
    linear-gradient(180deg, #efe4c8, #e2d3ad);
  opacity: 1;
}
[data-skin='murim'] .app-bg::before { opacity: .14; }
[data-skin='murim'] .app-bg::after { opacity: .05; }
[data-skin='murim'] .rank { box-shadow: 0 0 0 2px #e7dabb, 0 0 0 3px var(--accent); }

/* ---------- RESET / BASE ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* a tap draws nothing of its own (his 2026-10-25: "this weird cyan square on top of it, instead of just being clicked normally"): no Android tap
   highlight, and the words on a control are not selected by a tap or a double tap. Fields keep their selection. */
* { -webkit-tap-highlight-color: transparent; }
html[data-mode="mobile"] button, html[data-mode="mobile"] [role="button"], html[data-mode="mobile"] [data-tour-nav], html[data-mode="mobile"] a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* the Android app's keyboard (shell.jsx, MainActivity): the body leaves the keyboard's room and holds every fixed layer inside it */
html[data-kb] body { height: calc(100% - var(--kb, 0px)); contain: layout; overflow: clip; overflow-clip-margin: var(--kb); }
/* contained, the body clips its own box (its overflow no longer passes to the page), so it too paints past its foot by the keyboard's height
   (52: a black band for one frame between the body's foot and the rising keyboard) */
/* the first run's window never shows a scrollbar: the app's styled one took an 8 px gutter once the content overflowed, and the step's title
   wrapped to two lines while the keyboard was up (52) */
[data-first-run] *::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* for one synchronous measure (shell.jsx coverTop): every element takes the hit test, so boxes that let taps through are seen */
html[data-hit] * { pointer-events: auto !important; }
/* the first run's scene keeps the whole screen under the keyboard (only its window's room leaves it, wayin.jsx): shrunk with the body, the sky
   squashed and the window, held at its old place by the glide, was cut at the new foot for 6–7 frames (52 on film) */
html[data-kb] [data-way-in] { bottom: calc(-1 * var(--kb)) !important; }
/* while the keyboard is up, the phone's shell, its frame and the page paint past their new foot by the keyboard's height: a panel the glide
   still holds at its old place is not cut there (52: a black band for 3 frames under the maker as the keyboard rose) */
html[data-kb] [data-shell="mobile"], html[data-kb] [data-shell="mobile"] > div, html[data-kb] [data-shell="mobile"] [data-tab] { overflow: clip !important; overflow-clip-margin: var(--kb); }
/* the tab bar steps out while typing (tracker-m/polish.css); the event sheet keeps the bar's room, so its own ground fills it (52: a strip of the
   page showed between the sheet's foot and the keyboard) */
html[data-typing] [data-sv-sheet="open"] { box-shadow: 0 -26px 50px -18px #000, 0 80px 0 0 var(--bg-2, var(--bg)) !important; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .6s ease, color .6s ease;
}
#root { height: 100vh; color: var(--text); }

/* Default UI scale: the DESKTOP build renders at 1.00 browser zoom the way it
   looked at 125%. `zoom` scales AND reflows layout (unlike transform), matching
   real zoom; the full-height elements divide 100vh by the same factor so the
   app still fits the viewport exactly with no overflow.
   Scoped to :not(.m-body) so the mobile build (which loads this same file but
   does its own device-frame scaling) is never zoomed. */
body:not(.m-body):not(.login-body) { zoom: var(--ui-scale); }
body:not(.m-body):not(.login-body) #root { height: calc(100vh / var(--ui-scale)); }
button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- AMBIENT BACKDROP ---------- */
.app-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 78% -10%, var(--glow), transparent 60%),
    radial-gradient(900px 600px at 8% 110%, color-mix(in srgb, var(--accent-2) 40%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  opacity: calc(0.55 * var(--fx) + 0.45);
  transition: background .6s ease;
}
.app-bg::before { /* grid */
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 80%);
  opacity: calc(0.5 * var(--fx));
}
.app-bg::after { /* scanlines */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  opacity: var(--scan);
  mix-blend-mode: overlay;
}

/* ---------- LAYOUT SHELL ---------- */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: 84px 1fr; height: calc(100vh / var(--ui-scale)); }
.rail {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 0; border-right: 1px solid var(--line-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 80%, transparent), transparent);
}

/* a KEYBOARD focus is always visible (the safety list, 15 — D446): the fields and a few controls set outline:none inline, which
   beat this rule, so a Tab landed on an input that drew nothing; !important is the one honest way past an inline reset */
.input:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 1px solid var(--accent) !important; outline-offset: 2px; }
/* a control's ring is drawn by focusring.js: one hairline 2 px outside, following its cut corners (his ruling 2026-10-23 later 11) */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: none !important; }
/* J (Motion System): the ring sits 2 px outside a control and just inside a field */
.input:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: -1px; }

.stage { overflow: hidden; display: flex; flex-direction: column; }

.scroll {
  flex: 1; overflow-y: auto; scrollbar-gutter: stable;
  /* Centered content column on desktop; normal 28px gutter on narrow widths. */
  padding: 26px max(28px, calc((100% - var(--content-max)) / 2)) 60px;
}

/* ---------- PANEL (the status window) ---------- */
.panel {
  position: relative; background: var(--panel);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset,
              0 24px 60px -30px #000;
}
.panel.flat { clip-path: none; }
.panel .corner { position: absolute; width: 11px; height: 11px; border: 2px solid var(--accent); opacity: .85; }
.panel .corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel .corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.panel-h {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
}
.panel-h > span { white-space: nowrap; }
.panel-h > span:not(.tick):not(.sub) { overflow: visible; }
.panel-h .tick { width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 10px var(--glow);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); flex: none; }
.panel-h .sub { margin-left: auto; color: var(--dim); letter-spacing: .14em; font-size: 10px; white-space: nowrap; }
.panel-b { padding: 16px; }

.mono { font-family: var(--font-mono); }
.label { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }

/* ---------- EXP BAR ---------- */
.expbar { position: relative; height: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); overflow: hidden; }
.expbar > i {   /* D4: a full-width fill scaled from the left (the page sets scaleX), never a width */
  display: block; height: 100%; width: 100%; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 14px var(--glow);
}
.expbar.thin { height: 7px; }
.expbar > .gloss { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 8px); opacity: .5; pointer-events: none; }

/* ---------- RANK EMBLEM ---------- */
.rank {
  display: inline-grid; place-items: center; font-weight: 700; color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px var(--glow); position: relative;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ---------- STAT ROW ---------- */
.statrow { display: grid; grid-template-columns: 30px 64px 1fr 46px; align-items: center; gap: 10px; padding: 7px 0; }
.statrow .g { font-size: 16px; color: var(--accent); text-align: center; }
.statrow .nm { font-size: 11px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.statrow .track { height: 6px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.statrow .track > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 8px var(--glow); }
.statrow .v { font-family: var(--font-mono); font-weight: 700; text-align: right; font-size: 15px; }
.statrow .stars { color: var(--accent); font-size: 9px; margin-left: 6px; letter-spacing: 1px; vertical-align: middle; text-shadow: 0 0 8px var(--glow); }
.statrow.ascended .nm { color: var(--accent); }
.statrow.ascended .track > i { background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)); }

/* ---------- QUEST ITEM ---------- */
.quest { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line-soft); background: var(--panel-2); margin-bottom: 8px; transition: color .2s,background-color .2s,border-color .2s,opacity .2s,transform .2s; }
.quest:hover { border-color: var(--line); }
.quest .box { width: 22px; height: 22px; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--accent); flex: none; transition: color .2s,background-color .2s,border-color .2s,opacity .2s,transform .2s; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.quest.done .box { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 14px var(--glow); }
.quest .nm { flex: 1; font-size: 14px; }
.quest.done .nm { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--line); }
.quest .exp { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
/* per-quest mastery-rank badge — so a hunter sees where each skill stands (and where it's going) */
.q-rank { flex: none; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--dim); border: 1px solid var(--line-soft); padding: 1px 6px; letter-spacing: .04em; }
.quest.done .q-rank { opacity: .55; }

/* ---------- CHIPS / BUTTONS ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); background: var(--panel-2); transition: color .2s,background-color .2s,border-color .2s,opacity .2s,transform .2s; white-space: nowrap; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 14px var(--glow); }
.btn { padding: 10px 18px; border: 1px solid var(--accent); color: var(--accent); letter-spacing: .16em; text-transform: uppercase; font-size: 12px; transition: color .2s,background-color .2s,border-color .2s,opacity .2s,transform .2s; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.btn:hover { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { border-color: var(--line); color: var(--dim); }
.btn.ghost:hover { color: var(--text); border-color: var(--accent); background: transparent; box-shadow: none; }

 

/* ---------- LEVEL-UP / NOTICE FX (cinematic, world-themed) ---------- */

@keyframes rays { 0%{opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-12deg)} 30%{opacity:.7} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.1) rotate(14deg)} }

 

@keyframes pop { from { opacity:0; transform: scale(.6) translateY(10px) } to { opacity:1; transform:none } }

/* materialize-in for panels — resting state is always VISIBLE
   (only a subtle rise animates in; never hides content if frozen) */
/* .enter kept as a hook; resting state is always fully visible so
   captures/exports never catch hidden content. Subtle rise added via
   .is-in (JS) only as enhancement — absence leaves content visible. */
.enter { opacity: 1; }
@media (prefers-reduced-motion: no-preference), (scripting: enabled) {   /* always, the same motion for everyone (his 2026-10-25) */
  .enter.anim { opacity: 0; transform: translateY(10px); transition: opacity 280ms var(--e-arrive), transform 280ms var(--e-arrive); }   /* the Motion System: a screen arrives 280 Arrive (M7) */
  
}

/* ---------- MISC ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.row { display: flex; align-items: center; gap: 12px; }
.wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.spacer { flex: 1; }
.big-num { font-family: var(--font-mono); font-weight: 700; line-height: 1; }
.muted { color: var(--dim); }
.input { width: 100%; padding: 9px 12px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-family: var(--font-ui); font-size: 14px; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 10px -2px var(--glow); }
/* native <select> never inherits the app's face — normalize to .input's metrics
   (same height/font as the bars around it) + a themed chevron */
select.input {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  line-height: 1.35; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
select.input option, select.input optgroup { background: var(--panel-2); color: var(--text); font-family: var(--font-ui); }
image-slot { display: block; }

/* ---------- TRAIN BUTTON (topbar) ---------- */
.train-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border:1px solid var(--accent); color:var(--accent-ink); background:linear-gradient(180deg,var(--accent),var(--accent-2)); font-family:var(--font-ui); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:12px; box-shadow:0 0 18px -4px var(--glow); transition:color .2s,background-color .2s,border-color .2s,opacity .2s,transform .2s; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px)); }

/* ---------- WORKOUT SESSION OVERLAY ---------- */
.session-bg { position:fixed; inset:0; z-index:80; background:
  radial-gradient(1100px 700px at 78% -10%, var(--glow), transparent 58%),
  linear-gradient(180deg, var(--bg-2), var(--bg)); display:flex; flex-direction:column; animation:fadein .3s both; }
.session-bg::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px); opacity:var(--scan); mix-blend-mode:overlay; }
.session-shell { position:relative; z-index:1; width:100%; max-width:760px; margin:0 auto; flex:1; display:flex; flex-direction:column; padding:22px 24px 24px; overflow:hidden; }
.session-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line-soft); }
.session-head .ttl { flex:1; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.session-head .ttl b { color:var(--text); }
.session-x { width:40px; height:40px; flex:none; border:1px solid var(--line); color:var(--dim); font-size:18px; display:grid; place-items:center; transition:color .2s,background-color .2s,border-color .2s,opacity .2s,transform .2s; }
.session-x:hover { border-color:var(--accent); color:var(--accent); }
.session-scroll { flex:1; overflow-y:auto; padding:22px 2px 12px; }

/* World Select chooser chrome stays neutral & stable (only cards preview per-world) */
.session-bg.ws { --font-ui:'Chakra Petch',system-ui,sans-serif; --font-display:'Chakra Petch',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace; }
.session-bg.ws .session-shell { font-family:var(--font-ui); }

.seg { display:inline-flex; border:1px solid var(--line); padding:3px; gap:3px; background:var(--panel-2); }
.seg-b { padding:9px 18px; font-family:var(--font-ui); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); transition:color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s; }
.seg-b.on { background:var(--accent); color:var(--accent-ink); box-shadow:0 0 14px -2px var(--glow); }

.stp-l { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:5px; }
.stp-c { display:inline-flex; align-items:center; gap:0; border:1px solid var(--line); background:var(--panel-2); user-select:none; }
.stp-b { width:34px; height:38px; display:grid; place-items:center; font-size:18px; color:var(--accent); transition:color .14s,background-color .14s,border-color .14s,opacity .14s,transform .14s; }
.stp-b:hover { background:var(--accent); color:var(--accent-ink); }
.stp-v { min-width:62px; text-align:center; font-family:var(--font-mono); font-weight:700; font-size:18px; cursor:ns-resize; }
.stp-u { font-style:normal; font-size:11px; color:var(--dim); margin-left:3px; }

.overdue { margin-top:9px; padding:9px 12px; border-left:3px solid var(--warn); background:var(--panel-2); font-size:12px; color:var(--text); }

/* ============================================================
   PER-WORLD ORNAMENT — structure & texture, applied app-wide
   so every screen (incl. Records) embodies its world, not just
   its colours. Techy worlds keep the notched/bracketed chrome;
   others become paper, ledger, jade, etc.
   ============================================================ */
/* Non-techy worlds: square panels, drop the sci-fi notch + brackets */
[data-skin='murim'] .panel, [data-skin='branded'] .panel,
[data-skin='cultivation'] .panel, [data-skin='saga'] .panel { clip-path: none; }
[data-skin='murim'] .panel > .corner, [data-skin='branded'] .panel > .corner,
[data-skin='cultivation'] .panel > .corner, [data-skin='saga'] .panel > .corner { display: none; }

/* MURIM — pressed-paper scroll: inner rule frame, flat seal ticks, warm shadow */
[data-skin='murim'] .panel { box-shadow: inset 0 0 0 1px var(--line-soft), inset 0 0 50px rgba(150,110,50,.10), 0 18px 44px -30px rgba(70,45,18,.55); }
[data-skin='murim'] .panel::after { content:''; position:absolute; inset:5px; border:1px solid var(--line-soft); pointer-events:none; }
[data-skin='murim'] .panel-h .tick { clip-path:none; box-shadow:none; border-radius:1px; }
[data-skin='murim'] .panel-h { letter-spacing:.22em; }
[data-skin='murim'] .expbar, [data-skin='murim'] .statrow .track { border-radius:1px; }

/* BRANDED — inked ledger on charcoal: heavy top rule, grain backdrop, no grid */
[data-skin='branded'] .panel { box-shadow: inset 0 2px 0 0 color-mix(in srgb, var(--accent) 60%, transparent), 0 24px 60px -34px #000; }
[data-skin='branded'] .panel-h { border-bottom:1px solid var(--line); }
[data-skin='branded'] .app-bg::before { display:none; }
[data-skin='branded'] .app-bg { background:
  radial-gradient(1100px 700px at 78% -12%, var(--glow), transparent 58%),
  radial-gradient(800px 520px at 8% 112%, rgba(120,11,5,.22), transparent 62%),
  linear-gradient(180deg, var(--bg-2), var(--bg)); opacity:1; }
[data-skin='branded'] .app-bg::after { opacity:.10; mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* CULTIVATION — jade ink wash: soft inner luminance */
[data-skin='cultivation'] .panel { box-shadow: inset 0 0 44px rgba(63,217,154,.07), 0 24px 60px -34px #000; }
/* SAGA — bold shōnen: thick accent top edge on every panel */
[data-skin='saga'] .panel { box-shadow: inset 0 3px 0 0 var(--accent), 0 24px 60px -34px #000; }
[data-skin='saga'] .panel-h .tick { clip-path:polygon(50% 0,100% 100%,0 100%); }
/* DANTE — diagonal scarlet wash across headers */
[data-skin='dante'] .panel-h { background: linear-gradient(100deg, transparent 60%, color-mix(in srgb, var(--accent) 12%, transparent)); }
/* VERGIL — precise thin double-rule headers */
[data-skin='vergil'] .panel-h { border-bottom:1px solid var(--line); box-shadow: inset 0 -3px 0 -2px var(--line-soft); }

/* ============================================================
   SYSTEM FEELS — SPATIAL CONSTANCY (owner rule): a Feel restyles the
   System (colour, type, detail) but must NOT move things around.
   Scoped to the System World only (data-world, set by both shells) so
   other Worlds keep their native layout behaviour. Root cause fixed
   here: serif display faces at small tracking have far wider/taller
   metrics than the base look — nowrap panel-header chrome then blows
   min-content past its grid track and the whole column overlaps its
   neighbour (the "Ember bug"; the Design master handoff's own rule 6:
   small uppercase chrome uses --font-mono, never the display serifs).
   ============================================================ */
/* 1 · small uppercase chrome in condensed mono on the non-default Feels
   (Monarch keeps today's exact look — rule scoped :not(system)) */
body[data-world='system']:not([data-skin='system']) .panel-h { font-family: var(--font-mono); }
/* 2 · header geometry pinned so every Feel's header is the same height */
body[data-world='system'] .panel-h { line-height: 16px; }
body[data-world='system'] .panel-h > span:not(.tick):not(.sub) {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;   /* a long title truncates — it never widens the panel */
}
/* 3 · panels can never dictate their grid track's width */
body[data-world='system'] .panel { min-width: 0; }
/* 4 · shared chrome line-heights pinned (labels/mono metadata drift ±2px per face) */
body[data-world='system'] .label { line-height: 14px; }
body[data-world='system'] .muted.mono { line-height: 15px; }

   /* mobile quest hint: 2-line reserve */

/* 7 · one inherited line-height for the whole System world: 'normal' differs
   per face (Chakra ≈1.52 · Garamond ≈1.30 · Cormorant ≈1.20), which drifted
   every text block ±1px per line between Feels. 1.5 matches the base look
   (imperceptible on Monarch) and lifts the serif Feels onto the same rhythm.
   Explicit line-heights declared on components still win over this inherit. */
body[data-world='system'] { line-height: 1.5; }

/* ===== world atmosphere: giant faint watermark glyph behind the UI ===== */
body[data-skin]::after { content:''; position:fixed; right:-2vw; bottom:-8vh; z-index:0; pointer-events:none;
  font-weight:800; line-height:.8; opacity:.05; color:var(--accent); }
body[data-skin='murim']::after      { content:'武'; font-family:'Ma Shan Zheng','Noto Serif',serif; font-size:64vh; opacity:.07; }
body[data-skin='cultivation']::after { content:'道'; font-family:'Ma Shan Zheng','Noto Serif',serif; font-size:64vh; opacity:.07; }
body[data-skin='saga']::after        { content:'⚡'; font-size:54vh; opacity:.05; }
body[data-skin='dante']::after       { content:'†'; font-family:'Cinzel',serif; font-size:60vh; opacity:.06; transform:skewX(-8deg); }
body[data-skin='vergil']::after      { content:'⌶'; font-family:'Cinzel',serif; font-size:56vh; opacity:.05; }
body[data-skin='branded']::after     { content:'†'; font-family:'Cinzel',serif; font-size:60vh; opacity:.055; }
body[data-skin='system']::after      { content:none; }

/* ===== dramatic per-world panel headers (non-System worlds) ===== */
[data-skin='murim'] .panel-h, [data-skin='cultivation'] .panel-h,
[data-skin='branded'] .panel-h, [data-skin='dante'] .panel-h,
[data-skin='vergil'] .panel-h, [data-skin='saga'] .panel-h {
  font-family: var(--font-display); font-size: 15px; letter-spacing: .12em; font-weight: 600;
  padding-top: 13px; padding-bottom: 12px;
}
[data-skin='murim'] .panel-h .tick, [data-skin='cultivation'] .panel-h .tick { width:10px; height:10px; }
/* a trailing rule that fades — gives headers a composed, editorial feel */
[data-skin='murim'] .panel-h::after, [data-skin='cultivation'] .panel-h::after,
[data-skin='branded'] .panel-h::after, [data-skin='dante'] .panel-h::after,
[data-skin='vergil'] .panel-h::after, [data-skin='saga'] .panel-h::after {
  content:''; flex:1; height:1px; margin:0 4px 0 14px; order:1;
  background:linear-gradient(90deg, var(--line), transparent);
}
[data-skin='murim'] .panel-h > .sub, [data-skin='cultivation'] .panel-h > .sub,
[data-skin='branded'] .panel-h > .sub, [data-skin='dante'] .panel-h > .sub,
[data-skin='vergil'] .panel-h > .sub, [data-skin='saga'] .panel-h > .sub { order:2; margin-left:0; }

/* The pre-pivot `* { transition-property: … !important }` freeze that lived here (a guard against
   parchment→dark world swaps tweening mid-fade) is gone: the live shell has no light world, and
   the rule silenced every design transition that was not on its list — max-height, padding,
   margin, background, color, flex-grow — on every page at once (2026-09-11, the side-by-side pass). */

.bigbtn { flex:1; padding:18px; border:1px solid var(--accent); color:var(--accent-ink); background:linear-gradient(180deg,var(--accent),var(--accent-2)); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:15px; box-shadow:0 0 22px -6px var(--glow); transition:color .2s,background-color .2s,border-color .2s,opacity .2s,transform .2s; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }
.bigbtn.ghost { background:transparent; color:var(--dim); border-color:var(--line); box-shadow:none; flex:0 0 auto; padding:18px 26px; }
.bigbtn.ghost:hover { color:var(--text); border-color:var(--accent); }
.bigbtn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }

/* ---------- WORLD SELECT + IMMERSIVE LAUNCH ---------- */

.aura { display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--line-soft); background:var(--panel-2); cursor:pointer; transition:color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s; }
.aura:hover { border-color:var(--line); }
.aura.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.aura .dot { width:20px; height:20px; flex:none; background:var(--accent); box-shadow:0 0 12px var(--glow); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.aura .an { font-size:12px; letter-spacing:.04em; }

.modal-bg { position: fixed; inset: 0; z-index: 50; background: rgba(2,5,10,.72); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 24px; animation: fadein .25s both; }
@keyframes fadein { from {opacity:0} to {opacity:1} }

/* ============================================================
   ONBOARDING · CALIBRATION — first-run attribute self-assessment
   (AllocOverlay in screens2.jsx). A required, non-dismissable modal;
   the panel body scrolls internally so it always fits the phone frame.
   ============================================================ */

/* remaining pool — sticky, opaque so scrolled content passes cleanly beneath it */

/* ============================================================
   TRAIN SESSION v2 — racecar: one control per set, focus timers,
   focused live layout, build & history.
   ============================================================ */

/* ----- routine cards (Today hero + Library grid) ----- */
.rgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:680px){ .rgrid { grid-template-columns:repeat(3,1fr); } }
.rcard { position:relative; text-align:left; padding:16px 16px 15px; border:1px solid var(--line-soft); background:var(--panel-2); color:var(--text); font-family:var(--font-ui); transition:color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s; cursor:pointer; overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }
.rcard:hover { border-color:var(--accent); }
.rcard .ic { font-size:23px; color:var(--accent); }
.rcard .rn { font-size:20px; font-weight:600; margin-top:7px; line-height:1.1; }
.rcard .rt { font-size:11px; letter-spacing:.05em; margin-top:3px; }
.rcard .rt.accent { color:var(--accent); }
.rcard .rt.dim { color:var(--dim); }
.rcard .rcard-go { position:absolute; right:14px; bottom:12px; color:var(--accent); font-size:13px; opacity:.5; transition:color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s; }
.rcard:hover .rcard-go { opacity:1; text-shadow:0 0 10px var(--glow); }
.rcard .rcard-x { position:absolute; top:10px; right:12px; color:var(--dimmer); font-size:12px; padding:2px 5px; transition:color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s; }
.rcard .rcard-x:hover { color:var(--bad); }
.rcard.big { padding:26px 24px; }
.rcard.big .ic { font-size:34px; }
.rcard.big .rn { font-size:30px; margin-top:10px; }
.rcard.big .rt { font-size:12px; }

.today-wrap { max-width:460px; }
.today-list { margin:16px 0 4px; }
.tl-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 2px; border-bottom:1px solid var(--line-soft); }
.tl-n { font-size:15px; } .tl-s { font-size:12px; color:var(--accent); }
.today-go { margin-top:18px; width:100%; }

.lib-group { margin-bottom:20px; }
.lib-h { display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--line-soft); padding-bottom:7px; margin-bottom:12px; }
.lib-h .g { color:var(--accent); font-size:15px; }

/* ----- exercise card ----- */

.xn { font-size:17px; font-weight:600; line-height:1.15; }

.xs { font-family:var(--font-mono); font-size:11.5px; color:var(--accent); letter-spacing:.02em; }

.chips { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:13px; }

/* ----- practice (focus) session ----- */
.practice { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:18px 8px; text-align:center; }

/* ----- completion summary ----- */

 

.dt { flex:1; min-width:96px; padding:14px 10px; border:1px solid var(--line-soft); background:var(--panel-2); }
.dt.accent { border-color:var(--accent); box-shadow:0 0 22px -10px var(--glow); }

 

/* ----- build a routine ----- */
.build { max-width:560px; }

.forge { margin-top:8px; padding:12px 13px; border:1px solid var(--line-soft); background:var(--panel-2); }

 
 

.build optgroup { color:var(--dim); } .build option { color:var(--text); background:var(--panel); }

/* ----- Records: Training Log ----- */
.train-2col { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
@media (max-width:760px){ .train-2col { grid-template-columns:1fr; } }
.seslist { display:flex; flex-direction:column; }
.sesrow { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.sesrow:last-child { border-bottom:0; }
.ses-ic { width:26px; text-align:center; color:var(--accent); font-size:16px; flex:none; }
.ses-mid { flex:1; min-width:0; }
.ses-n { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ses-d { font-size:11px; color:var(--dim); }
.ses-r { text-align:right; flex:none; }
.ses-vol { font-size:12px; color:var(--text); }
.ses-exp { font-size:11px; color:var(--accent); }
.pb-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 18px; }
@media (max-width:760px){ .pb-grid { grid-template-columns:1fr; } }
.pb { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line-soft); }
.pb-n { font-size:13px; color:var(--text); } .pb-v { font-size:12px; color:var(--accent); white-space:nowrap; }

/* ============================================================
   TRAIN SESSION v3 — current-set control, timers, continuity
   ============================================================ */
/* resume banner */
.resume-card { display:flex; align-items:center; gap:12px; padding:14px 16px; margin-bottom:18px; border:1px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, var(--panel-2)); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }
.rsm-l { flex:1; min-width:0; }
.rsm-t { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.rsm-s { font-size:13px; color:var(--text); margin-top:3px; }
.rsm-go { flex:0 0 auto; padding:13px 22px; }

/* set status chips (record of done/upcoming sets on the active card) */
.chips { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:13px; }

/* focused current-set control */

.stp-c.big .stp-b { width:46px; height:54px; font-size:22px; }
.stp-c.big .stp-v { font-size:28px; min-width:84px; }

/* difficulty picker */

.build-link { width:100%; margin-top:8px; }

/* two-step discard confirm */
.confirm-wrap { position:absolute; inset:0; z-index:8; display:grid; place-items:center; padding:24px; background:rgba(2,5,10,.72); backdrop-filter:blur(3px); animation:fadein .2s both; }
.confirm { width:420px; max-width:100%; padding:22px; border:1px solid var(--accent); background:var(--panel);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); }
.cf-t { font-family:var(--font-display); font-size:21px; font-weight:700; }
.cf-s { color:var(--dim); font-size:13px; margin:8px 0 18px; line-height:1.5; }
.cf-row { display:flex; gap:12px; }
.bigbtn.ghost.danger:hover { border-color:var(--bad); color:var(--bad); }
.bigbtn.danger-solid { flex:1; background:linear-gradient(180deg,var(--bad),color-mix(in srgb,var(--bad) 65%, #000)); border-color:var(--bad); color:#fff; box-shadow:0 0 22px -8px var(--bad); }

/* ===== v4: concurrent resume stack, effort pick, structured programs ===== */
.resume-stack { margin-bottom:20px; }
.rsm-disc { flex:none; width:34px; height:34px; border:1px solid var(--line); color:var(--dim); font-size:12px; display:grid; place-items:center; transition:color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s; }
.rsm-disc:hover { border-color:var(--bad); color:var(--bad); }

/* active-routine state (no duplicate sessions) */
.rcard.active { border-color:var(--good); }
.rcard.active .rcard-go { color:var(--good); }
.rcard-active { position:absolute; top:0; left:0; right:0; padding:4px 8px; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); background:var(--good); text-align:center; }
.rcard.active .ic { margin-top:16px; }

/* ============================================================
   TIER MARKS — class-tier attribute emblems (derived, all worlds)
   The stat glyph is constant; the FRAME escalates by mastery tier,
   so a skill's mark reads its OWN tier, never the owner's overall one.
   ============================================================ */
.tmark { --ts:18px; position:relative; flex:none; display:inline-grid; place-items:center;
  width:calc(var(--ts) + 9px); height:calc(var(--ts) + 9px); color:var(--accent); vertical-align:-.28em; }
.tmark .tm-g { position:relative; z-index:1; font-size:var(--ts); line-height:1; }
.tmark::before { content:''; position:absolute; inset:0; pointer-events:none; }
/* T1 — nascent: muted glyph in a hairline notched square */
.tmark.t1 { color:color-mix(in srgb, var(--accent) 52%, var(--dim)); }
.tmark.t1::before { inset:11%; border:1px solid var(--line-soft); opacity:.75;
  clip-path:polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); }
/* T2 — forged: accent glyph in a notched frame with a faint inner fill */
.tmark.t2::before { inset:4%; border:1px solid var(--line);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow:0 0 10px -5px var(--glow) inset;
  clip-path:polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
/* T3 — mastered: hex emblem, brighter fill, glow + a soft pulse */

.tmark-row { display:inline-flex; align-items:center; gap:5px; }
/* routine cards: composition row sits where the single icon did */
.rcard .tmark-row { margin-bottom:1px; }
.rcard.active .tmark-row, .rcard.active .ic { margin-top:16px; }
/* a goal's Growth fields (board 8, his yes 2026-10-23 later 11): the empty field's example reads as an example, not a number */
[data-gfield]::placeholder{font-style:italic;color:var(--dimmer);opacity:1}
/* THE FIRST RUN COVERS THE WHOLE SCREEN WITH ITS OWN OPAQUE SKY (wayin.jsx bg), so the app's sky and page behind it are never seen. Kept
   drawing, they were three spinning star charts (1400, 1100, 560 px) and two twinkling layers at the phone's 2.6x density; the keyboard's
   resize re-drew them all and the phone ran out of tile memory, so the first-run window drew empty (Stella Systema 52, Pixel 8, 2026-10-23). */
[data-shell]:has([data-first-run]) [data-sky] { display: none !important; }
[data-shell]:has([data-first-run]) [data-tab] { visibility: hidden !important; }

/* THE FIRST FRAME IS THE SKY (his rulings 2026-10-23 later 14 and 16: "a thematized whole screen transition … into the app", not "a weird
   thing icon that then disappeared"). Until the app draws, the whole screen is the sky the daily welcome starts from (wayin.jsx bg: its
   gradient and three nebulae, a few stars); then it fades into the app (shell.jsx) or under the sign-in page (cloud.js). No icon, no words. */
[data-boot-sky] { position: fixed; inset: 0; z-index: 4400; pointer-events: none; transition: opacity 600ms cubic-bezier(.2,0,0,1);
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(231,243,255,.55), transparent), radial-gradient(1px 1px at 71% 14%, rgba(231,243,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 83% 61%, rgba(231,243,255,.5), transparent), radial-gradient(1px 1px at 34% 78%, rgba(231,243,255,.4), transparent),
    radial-gradient(1.2px 1.2px at 56% 43%, rgba(231,243,255,.35), transparent), radial-gradient(1px 1px at 9% 57%, rgba(231,243,255,.4), transparent),
    radial-gradient(1px 1px at 92% 88%, rgba(231,243,255,.35), transparent), radial-gradient(1.3px 1.3px at 44% 9%, rgba(231,243,255,.45), transparent),
    radial-gradient(55vmax circle at calc(50% - 260px) calc(50% - 200px), rgba(79,123,255,.09), transparent),
    radial-gradient(55vmax circle at calc(50% + 240px) calc(50% + 160px), rgba(154,107,255,.06), transparent),
    radial-gradient(55vmax circle at calc(50% + 40px) calc(50% - 40px), rgba(54,201,255,.05), transparent),
    radial-gradient(80vmax circle at 50% 50%, #0b1528, #03060c); }
@media (max-width: 760px) { [data-boot-sky] { background:
    radial-gradient(1px 1px at 18% 22%, rgba(231,243,255,.55), transparent), radial-gradient(1px 1px at 71% 14%, rgba(231,243,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 83% 61%, rgba(231,243,255,.5), transparent), radial-gradient(1px 1px at 34% 78%, rgba(231,243,255,.4), transparent),
    radial-gradient(1.2px 1.2px at 56% 43%, rgba(231,243,255,.35), transparent), radial-gradient(1px 1px at 9% 57%, rgba(231,243,255,.4), transparent),
    radial-gradient(55vmax circle at calc(50% - 156px) calc(50% - 120px), rgba(79,123,255,.09), transparent),
    radial-gradient(55vmax circle at calc(50% + 144px) calc(50% + 96px), rgba(154,107,255,.06), transparent),
    radial-gradient(55vmax circle at calc(50% + 24px) calc(50% - 24px), rgba(54,201,255,.05), transparent),
    radial-gradient(80vmax circle at 50% 50%, #0b1528, #03060c); } }
[data-boot-sky][data-out] { opacity: 0; }
/* THE SAME ON THE PHONE WHILE TYPING OR UNDER A SHEET (Stella Systema 52, build 12: Scheduling's event sheet froze on screen, 7839 "tile memory"
   lines): the app's sky (its spinning star charts at 1400, 1100, 560 px and its star layers, at 2.6x) and the warm-up's page copies step out of the
   drawing; the page's dark background stays (build 14 still froze with the charts alone gone). */
html[data-mode="mobile"][data-typing] [data-sky],
html[data-mode="mobile"] [data-shell]:has([data-sv-sheet="open"], [data-cmsheet], [data-ws-drain-editor]) [data-sky] { display: none !important; }
html[data-typing] [data-warm], [data-shell]:has([data-first-run]) [data-warm] { display: none !important; }
/* THE SKY'S CHARTS HOLD STILL ON THE PHONE (Stella Systema 52, the test copy: Workshop ~130 "tile memory" lines a second; paused, 4 in 5 s): one
   turn in 10–15 minutes cannot be seen, but at 2.6x it re-drew a 1310 px and a 728 px layer every frame. The desktop keeps the turn. */
html[data-motion="lite"] [data-sky-chart] > div { animation: none !important; }
/* AND THE WHOLE-SCREEN LOOPS (Stella Systema 52 on the Pixel: Workshop flooded the tile memory in bursts, 75–487 warnings in 5 s, and a tab change
   from it went black for 3 frames). Each of these is a layer the size of the screen kept in memory for its loop, and the field's scan redraws every
   frame: the far sky's twinkle and drift, Workshop's field scan, drift and twinkle hold still on the phone. The small stars' spins and blooms keep
   moving. The desktop keeps them all. */
html[data-motion="lite"] [data-sky] [style*="wa-twinkle"], html[data-motion="lite"] [data-sky] [style*="wa-drift"],
html[data-motion="lite"] [style*="dl-scan"], html[data-motion="lite"] [style*="dl-driftA"],
html[data-motion="lite"] [style*="dl-driftB"], html[data-motion="lite"] [style*="dl-twinkle"] { animation: none !important; }
/* THE PHONE'S BARS, LARGER (his 2026-10-24: "they feel horribly small … accessibility is horrible"): the header's buttons 34 → 44 px (the touch
   target minimum), their icons with them; the tab bar 48 → 60 px (shell.jsx mobItem), its icons 20 → 26 px. The page measures the bar's height. */
html[data-mode="mobile"] [data-hbtn] { width: 50px !important; height: 50px !important; }   /* 44 → 50 once the page name left the header (his later 12) */
html[data-mode="mobile"] [data-hbtn] > svg, html[data-mode="mobile"] [data-hbtn] > span:not([data-new-mark]):first-child { transform: scale(1.36); }
html[data-mode="mobile"] [data-mob-bar] [data-tour-nav] > span:first-child { transform: scale(1.3); }
/* UNDER THE FIRST RUN'S OPAQUE SKY NOTHING IS DRAWN (Stella Systema 52's trace: ~12 full-screen layers at 9.5 MB each under it, the step change's
   commit 10–35 ms): the app's own screen and the phone's backdrop step out until the first run ends. */
[data-shell]:has([data-first-run="way-in"]) > :not([data-way-in]), body:has([data-first-run="way-in"]) .m-backdrop { visibility: hidden !important; }
/* the quest window never shows a scrollbar, the older engines' way too (his 2026-10-25 later 3: a sideways bar at the bottom and one to the right) */
[data-quest-window]::-webkit-scrollbar { width: 0; height: 0; }

/* DROPDOWNS DRAWN DARK (his 2026-10-26: the sign-up's month and year "flash white before displaying … and are unstylized" on the website):
   the browser draws an open <select>'s list itself, white unless told the page is dark; its options take the app's ground and text */
select { color-scheme: dark; }
select option, select optgroup { background-color: var(--bg-2, #070c17); color: var(--text, #e7f3ff); }