/* =====================================================================================================
   Modern layer (Oct 2026): less rounded, flatter, crisper. Loaded LAST on every page; works through the
   theme variables so all themes follow. Fantasy display font stays for headings + the logo only; UI chrome
   uses Inter. Tap targets are untouched (mobile.css min-heights still apply).
   ===================================================================================================== */
:root {
  /* radius scale */
  --r-ctl: 6px; --r-card: 10px; --r-sm: 4px;
  --r-pill: var(--r-ctl); --r-lg: var(--r-card); --r-xl: var(--r-card);
  /* spacing scale (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  /* flat surfaces, crisp hairlines, refined shadows, almost no glow */
  --surface: var(--panel);
  --surface-2: var(--panel2);
  --hairline: color-mix(in srgb, var(--line) 60%, transparent);
  --hairline-strong: color-mix(in srgb, var(--line) 85%, transparent);
  --edge-light: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
  --elev-1: 0 1px 2px rgba(0,0,0,.22);
  --elev-2: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.28);
  --accent-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent);
  --ring: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- UI chrome typography (story text keeps the theme's body font) ---------- */
button, .button, input, select, textarea, label, .chip, .badge, .pill, .small, .muted, #topbar, .mnav, #tabs,
.set-tabs, .subtabs, .seg, .tabs, .lg-tabs, .ad-tabs, #adTabs, .mm-item, .hub-tile, .modal-box .row, .kv, table, .toast {
  font-family: var(--font-ui);
}
button, .button { letter-spacing: 0; font-weight: 500; }
#textInput { font-family: var(--font-body); }
h1, h2, h3, .brand, .panel-title, .scr-top h2, .section-title, .lg-h2 { font-family: var(--font-heading); letter-spacing: .02em; }
.section-title { font-size: .78em; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.section-title::after { background: var(--hairline) !important; }

/* ---------- radius ---------- */
button, .button, .choice, .opt, .seg, input, select, textarea, .chip, .badge, .pill, .hub-btn, .mm-item, .toast,
.lg-tabs button, .lg-card input, .lg-go, .ad-tabs button, #adTabs button, .mnav button, .subtabs button, .set-tabs button,
#tabs button, .model-opt, .save-row, .saves li, .hub-tile { border-radius: var(--r-ctl) !important; }
.card, .modal-box, .msg, #dialogueBox, #choices, #pendingRoll, .panel, #right, #left .card, .lg-card, .cr-balance,
.pack-card, .uni-card, .universe-card, .set-sec, section.card, .ad-card, .email-nudge, .lg-rules, details { border-radius: var(--r-card) !important; }
.lg-card::before { border-radius: calc(var(--r-card) - 4px) !important; }
.lg-tabs, .tabs, .ad-tabs, #adTabs { border-radius: var(--r-ctl) !important; }

/* ---------- buttons: flat, crisp ---------- */
button, .button { background: color-mix(in srgb, var(--panel2) 92%, transparent); border: 1px solid var(--hairline-strong); box-shadow: none; transition: background .12s, border-color .12s, color .12s; }
button:hover:not(:disabled), .button:hover { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--panel2)); }
button:active:not(:disabled) { background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); transform: none; }
button.ghost, .button.ghost { background: transparent; }
button.primary, .lg-card .lg-go, .hub-btn.primary {
  background: var(--accent) !important; color: var(--bg) !important; border: 1px solid color-mix(in srgb, var(--accent) 80%, #000) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.25) !important; text-shadow: none !important; font-weight: 600; letter-spacing: .01em;
}
button.primary:hover:not(:disabled), .lg-card .lg-go:hover { background: color-mix(in srgb, var(--accent) 88%, #fff) !important; box-shadow: 0 1px 2px rgba(0,0,0,.25) !important; }
button.primary:active:not(:disabled), .lg-card .lg-go:active { background: color-mix(in srgb, var(--accent) 88%, #000) !important; transform: none !important; }
button:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: none; box-shadow: var(--ring) !important; }
.lg-card .lg-go { font-family: var(--font-ui) !important; text-transform: none; letter-spacing: .01em !important; font-size: 1rem !important; }

/* ---------- inputs ---------- */
input, select, textarea { border: 1px solid var(--hairline-strong); background: color-mix(in srgb, var(--bg) 70%, transparent); box-shadow: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

/* ---------- surfaces: cards, panels, modals ---------- */
.card, .modal-box, #dialogueBox, .cr-balance, .email-nudge { background: var(--panel) !important; border: 1px solid var(--hairline) !important; box-shadow: var(--elev-1) !important; }
.modal-box { box-shadow: var(--elev-2) !important; }
.card { padding: var(--s-4); }
.card + .card { margin-top: var(--s-3); }
#topbar { background: color-mix(in srgb, var(--panel) 94%, transparent) !important; border-bottom: 1px solid var(--hairline) !important; box-shadow: none !important; }
#left { background: transparent !important; }
.msg.dm { background: color-mix(in srgb, var(--dm-bg) 92%, transparent) !important; border: 1px solid var(--hairline) !important; box-shadow: none !important; }
.msg.dm::before { display: none !important; }
.msg.player { background: color-mix(in srgb, var(--player-bg) 90%, transparent) !important; box-shadow: none !important; border-right-width: 2px !important; }
#inputForm .input-row { border-radius: var(--r-card) !important; border: 1px solid var(--hairline-strong) !important; box-shadow: none !important; background: var(--panel) !important; }

/* choices: flat rows with a crisp border, accent edge on hover */
.choice { background: color-mix(in srgb, var(--panel) 92%, transparent) !important; border: 1px solid var(--hairline-strong) !important; box-shadow: none !important; }
.choice:hover:not(:disabled), .choice:focus-visible { background: color-mix(in srgb, var(--accent) 8%, var(--panel)) !important; border-color: color-mix(in srgb, var(--accent) 70%, var(--line)) !important; box-shadow: inset 2px 0 0 var(--accent) !important; }
#choices { box-shadow: none !important; }
#choices .choices-title::after { background: var(--hairline) !important; }

/* hub + menu */
.hub-btn { background: var(--panel2) !important; box-shadow: none !important; border: 1px solid var(--hairline-strong) !important; }
.hub-tile { background: var(--panel) !important; border: 1px solid var(--hairline) !important; box-shadow: none !important; }
.hub-tile::after { display: none !important; }
.hub-tile:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)) !important; background: color-mix(in srgb, var(--accent) 6%, var(--panel)) !important; }
#home .mm-item { background: rgba(22,16,12,.78) !important; border: 1px solid rgba(240,178,78,.22) !important; box-shadow: none !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#home .mm-item:hover, #home .mm-item:focus-visible { background: rgba(38,27,19,.88) !important; border-color: rgba(240,178,78,.6) !important; box-shadow: inset 3px 0 0 var(--accent) !important; transform: none !important; }
#home .mm-item b { font-family: var(--font-ui) !important; font-variant: normal !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; font-size: 1.02em; }
#home .mm-item.primary, #home .mm-item:first-child { box-shadow: inset 3px 0 0 var(--accent) !important; }
.mm-item small, .mm-item .mm-desc { font-family: var(--font-ui); }

/* ---------- tabs: quiet, accent underline when active ---------- */
#tabs button, .set-tabs button, .subtabs button, .ad-tabs button, #adTabs button, .home-tabs button {
  background: transparent !important; box-shadow: none !important; border: 1px solid transparent !important; border-bottom: 2px solid transparent !important;
}
#tabs button:hover, .set-tabs button:hover, .subtabs button:hover, .ad-tabs button:hover, #adTabs button:hover { background: color-mix(in srgb, var(--text) 5%, transparent) !important; }
#tabs button.on, .set-tabs button.on, .subtabs button.on, .ad-tabs button.on, #adTabs button.on, .home-tabs button.active {
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important; border-bottom-color: var(--accent) !important; color: var(--text) !important; border-radius: var(--r-ctl) var(--r-ctl) 0 0 !important;
}
.seg { border: 1px solid var(--hairline-strong) !important; overflow: hidden; }
.seg button { border-radius: 0 !important; border: 0 !important; border-right: 1px solid var(--hairline) !important; }
.seg button.on { background: color-mix(in srgb, var(--accent) 18%, transparent) !important; color: var(--text) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; }

/* mobile bottom nav: underline-style active state */
.mnav { box-shadow: none !important; border-top: 1px solid var(--hairline) !important; }
.mnav button.on { background: transparent !important; box-shadow: inset 0 2px 0 var(--accent) !important; border-radius: 0 !important; }
.mnav button.on .mn-ic { transform: none !important; }

/* chips / badges */
.chip, .badge, .pill { border: 1px solid var(--hairline-strong) !important; box-shadow: none !important; }

/* ---------- login / reset ---------- */
.lg-card { background: color-mix(in srgb, #17110c 90%, transparent) !important; border: 1px solid rgba(240,178,78,.22) !important; box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.45) !important; padding: 28px 28px 22px !important; }
.lg-card::before { display: none; }
.lg-tabs { padding: 0 !important; gap: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(199,128,31,.3) !important; border-radius: 0 !important; margin-bottom: 18px !important; }
.lg-card .lg-tabs button { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px; color: #b7a07c !important; font-family: var(--font-ui) !important; font-weight: 500 !important; }
.lg-card .lg-tabs button:hover { color: #f1e3c6 !important; background: rgba(240,178,78,.05) !important; }
.lg-card .lg-tabs button.on { color: #f1e3c6 !important; border-bottom-color: #f0b24e !important; font-weight: 600 !important; }
.lg-card label { font-family: var(--font-ui); font-weight: 500 !important; letter-spacing: 0 !important; font-size: .86rem !important; }
.lg-card input { font-family: var(--font-ui) !important; background: rgba(8,6,4,.55) !important; border: 1px solid rgba(160,112,60,.45) !important; border-radius: var(--r-ctl) !important; }
.lg-card input:focus { border-color: #f0b24e !important; box-shadow: 0 0 0 2px rgba(240,178,78,.35) !important; }
.lg-rules { background: transparent !important; border: 0 !important; padding: 4px 2px !important; font-family: var(--font-ui); }
.lg-rules li::before { box-shadow: none !important; }
.lg-foot, .lg-note, .lg-msg, .lg-forgot { font-family: var(--font-ui); }
.lg-brand img, .lg-emblem img { animation-duration: 7s; }

/* ---------- admin ---------- */
body.admin { background: #15100c !important; }
.ad-table { border-collapse: collapse; }
.ad-table th, .ad-table td { border-bottom: 1px solid var(--hairline) !important; }

/* ---------- whitespace ---------- */
.modal-box { padding: var(--s-5) !important; }
.row { gap: var(--s-2); }
.lg-card .lg-go { border-radius: var(--r-ctl) !important; } .lg-card .lg-tabs button { border-radius: 0 !important; }

/* ---------- main-menu windows: Load / Gallery / Global meta and Create-your-adventure open OVER the menu ---------- */
body.win-open[data-view="setup"] #home::after, body.win-open[data-view="home"] .mm-wrap::before { content: ''; position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 55%, rgba(0,0,0,.5)); backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); }
#home .home-screen.win, #setup.win {
  position: fixed !important; z-index: 45; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1100px, calc(100vw - 48px)); max-height: calc(100vh - 48px); height: auto;
  background: var(--panel) !important; border: 1px solid var(--hairline) !important; border-radius: var(--r-card) !important; box-shadow: var(--elev-2) !important;
  padding: 0 !important; overflow: hidden; animation: winIn .22s var(--ease, ease) both;
}
#home .home-screen.win:not(.hidden) { display: flex; flex-direction: column; }
#home .home-screen.win > #homeBody { overflow: auto; padding: var(--s-4) var(--s-5) var(--s-5); min-height: 0; flex: 1; }
#setup.win { height: min(900px, calc(100vh - 48px)); max-width: 1280px; width: min(1280px, calc(100vw - 48px)); }
.win-bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5) !important; margin: 0 !important; border-bottom: 1px solid var(--hairline) !important; background: var(--panel) !important; position: relative; }
.win-bar h1, .win-bar h2 { margin: 0 !important; font-size: 1.2em; flex: 0 1 auto; }
#homeScreen .win-bar h2 { flex: 1; }
.win-close { width: 36px; height: 36px; min-width: 36px; padding: 0 !important; display: inline-grid; place-items: center; font-size: 1.4em; line-height: 1; background: transparent !important; border: 1px solid transparent !important; color: var(--muted); margin-left: auto; }
.win-close:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent) !important; border-color: var(--hairline) !important; }
#setup.win .setup-top .grow { flex: 1; }
@media (max-width: 860px), (pointer: coarse) and (max-width: 1180px) {
  #home .home-screen.win, #setup.win { left: 0; top: 0; transform: none; width: 100vw; max-width: none; height: var(--app-h, 100dvh); max-height: none; border-radius: 0 !important; border: 0 !important; z-index: 86; animation: none; }
  .win-bar { padding: calc(var(--sat, 0px) + 6px) 6px 6px 14px !important; position: sticky; top: 0; z-index: 3; }
  .win-close { width: 44px; height: 44px; min-width: 44px; }
  #home .home-screen.win > #homeBody { padding: 12px 12px calc(var(--sab, 0px) + 16px); }
}
@keyframes winIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ===== Touch devices: no keyboard-shortcut UI ===== */
body.no-kbd kbd, body.no-kbd .kbd-hint, body.no-kbd .shortcut-grid, body.no-kbd [data-stab="controls"] { display: none !important; }

/* ===== Form controls (themed through CSS variables) ===== */
:root { --ctl-bg: color-mix(in srgb, var(--bg, #14100c) 70%, #000 30%); --ctl-border: var(--line); --ctl-on: var(--accent, #e8b04a); --ctl-ink: var(--bg); --focus: 0 0 0 2px var(--bg, #14100c), 0 0 0 4px var(--ctl-on); }
input[type=checkbox], input[type=radio] { -webkit-appearance: none; appearance: none; margin: 0 .5em 0 0; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--ctl-border); background: var(--ctl-bg); display: inline-grid; place-content: center; vertical-align: -4px; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
input[type=checkbox] { border-radius: var(--r-ctl, 6px); }
input[type=checkbox]::before { content: ''; width: 11px; height: 11px; transform: scale(0); transition: transform .12s; background: var(--ctl-ink); clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 40% 70%); }
input[type=checkbox]:checked { background: var(--ctl-on); border-color: var(--ctl-on); }
input[type=checkbox]:checked::before { transform: scale(1); }
input[type=radio] { border-radius: 50%; }
input[type=radio]::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ctl-on); transform: scale(0); transition: transform .12s; }
input[type=radio]:checked { border-color: var(--ctl-on); }
input[type=radio]:checked::before { transform: scale(1); }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--ctl-on); }
input[type=checkbox]:disabled, input[type=radio]:disabled, input[type=range]:disabled { opacity: .45; cursor: not-allowed; }
/* toggle switches: on/off settings rows */
.settings-win label.toggle > input[type=checkbox], input[type=checkbox].switch { width: 38px; height: 22px; border-radius: 999px; place-content: center start; padding: 0 2px; }
.settings-win label.toggle > input[type=checkbox]::before, input[type=checkbox].switch::before { clip-path: none; width: 16px; height: 16px; border-radius: 50%; transform: none; background: var(--muted, #9a8f80); transition: transform .15s, background .15s; }
.settings-win label.toggle > input[type=checkbox]:checked::before, input[type=checkbox].switch:checked::before { transform: translateX(16px); background: var(--ctl-ink); }
/* range sliders: custom track + thumb with gold fill (--fill set by ui.js) */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 22px; min-width: 80px; cursor: pointer; vertical-align: middle; --fill: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--ctl-on) 0 var(--fill), var(--ctl-border) var(--fill) 100%); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--ctl-border); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--ctl-on); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--ctl-on); border: 2px solid var(--bg, #14100c); box-shadow: 0 1px 4px rgba(0,0,0,.5); transition: transform .12s; }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ctl-on); border: 2px solid var(--bg, #14100c); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.pct, label.slider > span:last-child { font-variant-numeric: tabular-nums; min-width: 3.2em; display: inline-block; text-align: right; }
/* text, number, select */
select, input[type=text], input[type=number], input[type=email], input[type=password], input[type=search], input:not([type]), textarea { background-color: var(--ctl-bg); color: var(--text, inherit); border: 1px solid var(--ctl-border); border-radius: var(--r-ctl, 6px); padding: 8px 10px; font: inherit; transition: border-color .15s, box-shadow .15s; }
select { -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ctl-on) 50%), linear-gradient(135deg, var(--ctl-on) 50%, transparent 50%); background-position: right 15px center, right 10px center; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: var(--panel, #1d1712); color: var(--text, #eee); }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button { opacity: .5; }
select:hover, input[type=text]:hover, input[type=number]:hover, textarea:hover { border-color: color-mix(in srgb, var(--ctl-on) 50%, var(--ctl-border)); }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--ctl-on); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .seg button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--focus); }
input[type=range]:focus-visible { box-shadow: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
/* segmented controls */
.seg { display: inline-flex; border: 1px solid var(--ctl-border); border-radius: var(--r-ctl, 6px); padding: 2px; gap: 2px; background: var(--ctl-bg); }
.seg > button, .seg > label { border: 0; background: transparent; border-radius: calc(var(--r-ctl, 6px) - 2px); padding: 6px 12px; }
.seg > button.on, .seg > button[aria-pressed="true"], .seg > label:has(input:checked) { background: var(--ctl-on); color: var(--ctl-ink); }
/* mobile: 44px tap areas */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1180px) {
  label.toggle, label:has(> input[type=checkbox]), label:has(> input[type=radio]) { min-height: 44px; display: flex; align-items: center; }
  select, input[type=text], input[type=number], input[type=email], input[type=password], input[type=search] { min-height: 44px; font-size: 16px; }
  input[type=range] { height: 44px; }
  input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; }
  .seg > button, .seg > label { min-height: 40px; }
}
.cr-test { background: repeating-linear-gradient(135deg, rgba(240,178,78,.18) 0 12px, rgba(240,178,78,.08) 12px 24px); border: 1px dashed var(--accent); color: var(--text); border-radius: var(--r-ctl, 6px); padding: 8px 12px; margin: 0 0 10px; }
.cr-test b { color: var(--accent); letter-spacing: .08em; }
.cr-soon { border: 1px solid var(--line); background: var(--panel2); border-radius: var(--r-ctl, 6px); padding: 8px 12px; margin: 0 0 10px; }
input[type=range] { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none; min-height: 0; }
label.slider { display: flex; align-items: center; gap: 10px; }
label.slider > input[type=range] { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; }
label.slider > span:last-child { flex: none; }
@media (max-width: 860px), (pointer: coarse) and (max-width: 1180px) {
  .row.snd { flex-wrap: wrap; gap: 0 10px; }
  .row.snd > label.toggle { flex: 1 1 100%; }
  .row.snd > label.slider { flex: 1 1 100%; padding-left: 48px; }
}
.cr-tabs { margin: 14px 0 10px; }
.cr-big2 { font-family: var(--font-heading); font-size: 1.15em; color: var(--accent); }
.cr-sub { padding: 10px 14px; margin: 10px 0 0; } .cr-sub.warn { border-color: var(--danger); }
.cr-pack.mine { border-color: var(--accent); }
.mm-legal a { color: inherit; text-decoration: none; } .mm-legal a:hover { color: var(--accent); text-decoration: underline; }
/* content filter: mature passages behind a tap-to-reveal cover */
.mature-wrap { position: relative; border-radius: var(--r-ctl, 6px); overflow: hidden; }
.mature-text { filter: blur(9px); user-select: none; pointer-events: none; max-height: 9em; overflow: hidden; }
.mature-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px dashed var(--line); color: var(--text); cursor: pointer; min-height: 44px; }
.mature-cover span { color: var(--muted); font-size: .85em; }