@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* Retro-tropical synthwave: sunset coral/orange over a neon blue-violet-magenta night */
  --ink:#0d0a1f;
  --ink-2:#161033;
  --ink-3:#1f1846;
  --thread:#ff8a5b;          /* sunset coral-orange — primary accent, was gold */
  --thread-bright:#ffb37a;   /* warm highlight */
  --thread-dim:#c9683f;
  --spindle:#8b5cf6;         /* neon violet */
  --neon-cyan:#2fe0d0;
  --neon-blue:#4d7cff;
  --neon-magenta:#e63bb0;
  --neon-pink:#ff4fa3;
  --blood:#ff4d6d;
  --moss:#3ddc97;            /* tropical palm green */
  --parchment:#f3ece4;
  --ash:#9d95c9;
  --line:#332a5c;
  --danger:#ff5f7e;
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1100px 550px at 8% -10%, rgba(139,92,246,0.24), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(77,124,255,0.18), transparent 55%),
    radial-gradient(1000px 620px at 50% 118%, rgba(255,111,90,0.20), transparent 62%),
    radial-gradient(700px 400px at 90% 60%, rgba(230,59,176,0.10), transparent 60%),
    var(--ink);
  color:var(--parchment);
  font-family:var(--font-body);
  overflow:hidden;
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--ink-2); }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--thread-dim); }

#starfield{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; display:block;
}

button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }

/* ---------- Shell layout ---------- */
#app{ display:flex; flex-direction:column; height:100vh; position:relative; z-index:1; }

.topbar{
  height:56px; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px;
  background:linear-gradient(180deg, var(--ink-2), var(--ink));
  border-bottom:1px solid var(--line);
  box-shadow: 0 1px 0 0 rgba(0,0,0,0), 0 2px 12px -4px rgba(139,92,246,0.35);
  position:relative;
  z-index:20;
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--neon-cyan), var(--neon-blue), var(--spindle), var(--neon-magenta), var(--thread));
  opacity:0.8;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:26px;height:26px; position:relative; flex-shrink:0;
}
.brand-mark svg{ width:100%; height:100%; }
.brand-name{
  font-family:var(--font-display); font-weight:700; letter-spacing:0.06em;
  font-size:17px; color:var(--parchment);
}
.brand-name em{ font-style:normal; background:linear-gradient(90deg, var(--neon-cyan), var(--neon-blue), var(--spindle), var(--neon-magenta)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-tag{ font-size:10px; color:var(--ash); letter-spacing:0.12em; text-transform:uppercase; margin-left:8px; padding-top:2px;}

.topbar-left{ display:flex; align-items:center; gap:10px; min-width:0; }

.hamburger-btn{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--line);
  background:var(--ink-3); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; flex-shrink:0; transition:all .15s;
}
.hamburger-btn span{ display:block; width:16px; height:2px; border-radius:1px; background:var(--ash); transition:all .15s; }
.hamburger-btn:hover{ border-color:var(--thread-dim); background:var(--ink); }
.hamburger-btn:hover span{ background:var(--parchment); }
.hamburger-btn.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2){ opacity:0; }
.hamburger-btn.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.topbar-actions{ display:flex; align-items:center; gap:8px; }
.pill{
  font-size:11px; padding:5px 10px; border-radius:20px;
  border:1px solid var(--line); background:var(--ink-3); color:var(--ash);
  display:flex; align-items:center; gap:5px;
}
.pill.ok{ color:var(--moss); border-color:rgba(95,143,107,0.4); }
.pill.warn{ color:var(--thread); border-color:rgba(255,138,91,0.4); }
.icon-btn{
  width:34px;height:34px; border-radius:8px; border:1px solid var(--line);
  background:var(--ink-3); color:var(--ash); display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.icon-btn:hover{ color:var(--parchment); border-color:var(--thread-dim); background:var(--ink); }

/* ---------- Tabs (reused elsewhere, e.g. inventory shop sub-nav) ---------- */
.tabbar{
  display:flex; gap:2px; height:42px; flex-shrink:0;
  background:var(--ink); border-bottom:1px solid var(--line); padding:0 12px;
  overflow-x:auto;
}
.tab-btn{
  background:none; border:none; color:var(--ash); font-size:13px; font-weight:500;
  padding:0 16px; height:100%; border-bottom:2px solid transparent; white-space:nowrap;
  display:flex; align-items:center; gap:6px; transition:all .15s;
}
.tab-btn:hover{ color:var(--parchment); }
.tab-btn.active{ color:var(--thread-bright); border-bottom-color:var(--thread); }
.tab-btn .tab-icon{ display:none; }

/* ---------- Nav drawer (hamburger menu) ---------- */
.nav-backdrop{ position:fixed; inset:0; z-index:120; display:none; background:rgba(6,4,16,0.55); backdrop-filter:blur(1px); }
.nav-backdrop.open{ display:block; }
.nav-drawer{
  position:fixed; top:0; left:0; height:100%; width:300px; max-width:86vw;
  background:var(--ink-2); border-right:1px solid var(--line); z-index:121;
  box-shadow:10px 0 34px rgba(0,0,0,0.45);
  transform:translateX(-100%); transition:transform .22s ease;
  display:flex; flex-direction:column; overflow-y:auto;
}
.nav-drawer.open{ transform:translateX(0); }
.nav-drawer-head{
  padding:16px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.nav-drawer-head .brand-name{ font-size:16px; }
.nav-group-label{
  font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ash);
  padding:16px 18px 6px;
}
.nav-link{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:none; color:var(--parchment); font-size:14px; font-weight:500;
  padding:11px 18px; border-left:3px solid transparent; transition:all .15s;
}
.nav-link:hover{ background:rgba(255,255,255,0.03); color:var(--thread-bright); }
.nav-link.active{ background:linear-gradient(90deg, rgba(255,138,91,0.12), transparent); border-left-color:var(--thread); color:var(--thread-bright); }
.nav-link-icon{ font-size:16px; width:18px; text-align:center; flex-shrink:0; }
.nav-drawer-foot{ margin-top:auto; padding:14px 18px; border-top:1px solid var(--line); }

.codex-group-label{
  font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ash);
  padding:14px 16px 4px; position:sticky; top:0; background:var(--ink-2);
}

.view{ flex:1; overflow:hidden; display:none; }
.view.active{ display:flex; }

/* ---------- Cards / panels ---------- */
.panel{
  background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
}
.panel-head{
  padding:12px 16px; border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:0.02em;
  color:var(--thread-bright); display:flex; align-items:center; justify-content:space-between;
}
.panel-body{ padding:16px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border-radius:8px; border:1px solid var(--line);
  background:var(--ink-3); color:var(--parchment); font-size:13px; font-weight:600;
  transition:all .15s;
}
.btn:hover{ border-color:var(--thread-dim); background:var(--ink); }
.btn-primary{ background:linear-gradient(120deg, var(--neon-magenta), var(--thread) 70%); color:#22102a; border:none; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ background:none; border:1px solid var(--line); }
.btn-danger{ background:none; border:1px solid rgba(193,90,74,0.5); color:var(--danger); }
.btn-danger:hover{ background:rgba(193,90,74,0.1); }
.btn-sm{ padding:5px 10px; font-size:12px; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }

input[type=text], input[type=number], input[type=password], select, textarea{
  background:var(--ink); border:1px solid var(--line); border-radius:7px;
  color:var(--parchment); padding:8px 10px; font-size:13px; width:100%;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--thread-dim); }
label{ font-size:11px; color:var(--ash); text-transform:uppercase; letter-spacing:0.06em; display:block; margin-bottom:4px; }
.field{ margin-bottom:12px; }
.field-row{ display:flex; gap:10px; }
.field-row > .field{ flex:1; }

/* ---------- Sheet layout ---------- */
#view-sheet{ overflow:auto; padding:18px; gap:18px; align-items:flex-start; }
.sheet-grid{
  display:grid; grid-template-columns: 280px 1fr 300px; gap:16px; width:100%;
}
@media (max-width: 1100px){ .sheet-grid{ grid-template-columns: 1fr; } }
.sheet-col > .panel{ margin-bottom:16px; }
.sheet-col > .panel:last-child{ margin-bottom:0; }

.stat-block{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.stat-tile{
  background:var(--ink-3); border:1px solid var(--line); border-radius:10px;
  padding:10px 6px; text-align:center; position:relative;
}
.stat-tile .stat-label{ font-size:10px; color:var(--ash); text-transform:uppercase; letter-spacing:.08em; }
.stat-tile .stat-mod{ font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--thread-bright); margin:2px 0; }
.stat-tile input{ text-align:center; width:44px; margin:2px auto 0; padding:3px; font-size:13px; }

.skills-list{ display:flex; flex-direction:column; gap:4px; }
.skill-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; padding:3px 4px; border-radius:6px; }
.skill-row:hover{ background:var(--ink-3); }
.skill-row .dot{ width:9px;height:9px;border-radius:50%; border:1.5px solid var(--ash); flex-shrink:0; cursor:pointer; }
.skill-row .dot.on{ background:var(--thread); border-color:var(--thread); }
.skill-row .name{ flex:1; color:var(--parchment); }
.skill-row .ab{ color:var(--ash); font-size:10px; width:26px; }
.skill-row .val{ font-family:var(--font-mono); width:28px; text-align:right; color:var(--thread-bright); }

.hp-box{ display:flex; align-items:center; gap:10px; }
.hp-num{ font-family:var(--font-display); font-size:30px; font-weight:700; }
.hp-num input{ width:56px; text-align:center; font-size:18px; font-family:var(--font-mono); }
.big-stat{ text-align:center; }
.big-stat .stat-label{ font-size:10px; color:var(--ash); text-transform:uppercase; letter-spacing:.08em; }
.big-stat .stat-val{ font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--thread-bright); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

table.data-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.data-table th{ text-align:left; color:var(--ash); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
table.data-table td{ padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
table.data-table tr:hover td{ background:rgba(255,255,255,0.02); }
table.data-table input, table.data-table select{ padding:4px 6px; font-size:12.5px; }

.tag{ display:inline-block; font-size:10px; padding:2px 7px; border-radius:20px; background:var(--ink-3); color:var(--ash); border:1px solid var(--line); }

.divider{ height:1px; background:var(--line); margin:14px 0; }

/* ---------- Chat / Game view ---------- */
.game-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.game-side{ width:300px; border-left:1px solid var(--line); background:var(--ink-2); display:flex; flex-direction:column; flex-shrink:0; }

.chat-log{ flex:1; overflow-y:auto; padding:18px 22px; display:flex; flex-direction:column; gap:14px; }
.msg{ max-width:78%; }
.msg.gm{ align-self:flex-start; }
.msg.player{ align-self:flex-end; }
.msg.system{ align-self:center; max-width:90%; }
.msg-bubble{
  padding:12px 15px; border-radius:12px; font-size:14px; line-height:1.55; white-space:pre-wrap;
}
.msg.gm .msg-bubble{ background:var(--ink-2); border:1px solid var(--line); border-top-left-radius:2px; font-family:var(--font-body); }
.msg.gm .msg-bubble p{ margin:0 0 8px; }
.msg.gm .msg-bubble p:last-child{ margin-bottom:0; }
.msg.player .msg-bubble{ background:linear-gradient(160deg, #2e1f52, #201640); border:1px solid rgba(139,92,246,0.4); border-top-right-radius:2px; }
.msg.system .msg-bubble{ background:none; border:1px dashed var(--line); color:var(--ash); font-size:12px; text-align:center; font-family:var(--font-mono); }
.msg-label{ font-size:10px; color:var(--ash); text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
.msg.player .msg-label{ text-align:right; }

.chat-input-bar{ border-top:1px solid var(--line); padding:14px 18px; display:flex; gap:10px; align-items:flex-end; background:var(--ink-2); }
.chat-input-bar textarea{ flex:1; resize:none; min-height:44px; max-height:140px; }

.dice-tray{ padding:14px 16px; border-bottom:1px solid var(--line); }
.dice-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.die-btn{ width:38px; height:34px; border-radius:7px; border:1px solid var(--line); background:var(--ink-3); color:var(--parchment); font-family:var(--font-mono); font-size:12px; }
.die-btn:hover{ border-color:var(--thread-dim); }
.roll-result{ margin-top:10px; padding:10px; background:var(--ink-3); border-radius:8px; font-family:var(--font-mono); font-size:13px; min-height:20px; }
.roll-result .total{ color:var(--thread-bright); font-size:20px; font-weight:700; }

/* ---------- Wizard ---------- */
#view-wizard{ overflow:auto; padding:30px 18px; justify-content:center; }
.wizard-shell{ max-width:760px; width:100%; margin:0 auto; }
.wizard-steps{ display:flex; gap:6px; margin-bottom:22px; }
.wizard-steps .step{ flex:1; height:4px; border-radius:2px; background:var(--line); }
.wizard-steps .step.done{ background:var(--thread); }
.wizard-steps .step.current{ background:var(--spindle); }
.option-card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:14px 16px; cursor:pointer;
  transition:all .15s; margin-bottom:8px;
}
.option-card:hover{ border-color:var(--thread-dim); }
.option-card.selected{ border-color:var(--thread); background:linear-gradient(135deg, rgba(255,138,91,0.10), rgba(139,92,246,0.08)); }
.option-card h4{ margin:0 0 4px; font-family:var(--font-display); font-size:15px; color:var(--parchment); }
.option-card p{ margin:0; font-size:12.5px; color:var(--ash); line-height:1.5; }
.option-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:640px){ .option-grid{ grid-template-columns:1fr; } }

/* ---------- Codex / Handbook (shared master-detail "split view") ---------- */
.codex-list{ width:280px; border-right:1px solid var(--line); background:var(--ink-2); overflow-y:auto; flex-shrink:0; }
.codex-search{ padding:12px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--ink-2); }
.codex-item{ padding:10px 16px; font-size:13px; border-bottom:1px solid var(--line); color:var(--ash); }
.codex-item .fname{ color:var(--thread-bright); font-weight:600; font-size:12px; margin-bottom:4px; }
.codex-item .snippet{ font-size:11.5px; line-height:1.4; }
.codex-item mark{ background:rgba(201,162,75,0.35); color:var(--parchment); }
.codex-item.current{ background:rgba(255,138,91,0.08); border-left:2px solid var(--thread); }
.codex-item.current .fname{ color:var(--thread-bright); }
.codex-body{ flex:1; overflow-y:auto; padding:24px 30px; font-size:13.5px; line-height:1.7; white-space:pre-wrap; font-family:var(--font-mono); color:var(--parchment); }

/* ---------- Info Panel (character-creation & in-play explainers) ---------- */
.info-panel-backdrop{ position:fixed; inset:0; z-index:90; display:none; }
.info-panel{
  position:fixed; top:0; right:0; height:100%; width:380px; max-width:92vw;
  background:var(--ink-2); border-left:1px solid var(--line); z-index:95;
  transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column;
  box-shadow:-10px 0 34px rgba(0,0,0,0.4);
}
.info-panel.open{ transform:translateX(0); }
.info-panel-head{ padding:14px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.info-panel-head h3{ margin:0; font-family:var(--font-display); font-size:16px; color:var(--thread-bright); }
.info-panel-body{ padding:18px; overflow-y:auto; flex:1; font-size:13px; line-height:1.65; }
.info-panel-body h4{ font-family:var(--font-display); color:var(--thread-bright); margin:16px 0 6px; font-size:13.5px; }
.info-panel-body h4:first-child{ margin-top:0; }
.info-panel-body p{ margin:0 0 10px; color:var(--parchment); }
.info-panel-body .info-meta{ font-size:11px; color:var(--ash); margin-bottom:14px; text-transform:uppercase; letter-spacing:.04em; }

.info-btn{
  width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:var(--ink-3);
  color:var(--ash); font-size:12px; font-family:var(--font-display); display:inline-flex; align-items:center;
  justify-content:center; flex-shrink:0; transition:all .15s;
}
.info-btn:hover{ color:var(--ink); background:var(--thread-bright); border-color:var(--thread-bright); }
.option-card{ position:relative; }
.option-card .info-btn{ position:absolute; top:10px; right:10px; }
.card-label-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

@media (max-width: 720px){
  .info-panel{
    top:auto; bottom:0; left:0; right:0; width:100%; max-width:none; height:80vh;
    border-left:none; border-top:1px solid var(--line); border-radius:16px 16px 0 0;
    transform:translateY(100%);
  }
  .info-panel.open{ transform:translateY(0); }
  .info-panel-backdrop.open{ display:block; background:rgba(10,10,14,0.62); backdrop-filter:blur(2px); }
}


.empty-state{ text-align:center; padding:60px 20px; color:var(--ash); }
.empty-state h3{ font-family:var(--font-display); color:var(--parchment); font-size:20px; margin-bottom:8px; }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,10,14,0.72); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--ink-2); border:1px solid var(--line); border-radius:14px; max-width:480px; width:100%;
  max-height:86vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.modal-head{ padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal-head h3{ margin:0; font-family:var(--font-display); font-size:17px; }
.modal-body{ padding:20px; }
.modal.wide{ max-width:720px; }

/* ---------- Credits ---------- */
#view-credits{ overflow-y:auto; }
.credits-box{ max-width:640px; margin:0 auto; padding:40px 20px; }
.credits-box .attribution{ background:var(--ink-3); border:1px solid var(--line); border-radius:10px; padding:16px; font-size:12.5px; line-height:1.6; color:var(--ash); font-family:var(--font-mono); margin:16px 0; }

/* thread signature divider */
.thread-rule{ height:1px; background:linear-gradient(90deg, transparent, var(--thread-dim), transparent); margin:20px 0; }

.small-note{ font-size:11.5px; color:var(--ash); line-height:1.5; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.flex-gap{ display:flex; align-items:center; gap:8px; }

/* ---------- Table scroll wrapper (mobile-safe wide tables) ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- Sheet mobile sub-tabs ---------- */
.sheet-subtabs{ display:none; }

/* ---------- Codex mobile back button ---------- */
.codex-back-btn{ display:none; }

/* ---------- Game tools FAB (mobile dice & reference launcher) ---------- */
.game-tools-fab{ display:none; }

/* =====================================================================
   MOBILE LAYOUT — reorganized for small screens.
   Same visual language (colors, fonts, borders) as desktop; components
   are regrouped into segmented sub-tabs, a bottom nav, and slide-up
   sheets rather than side-by-side columns, following the patterns
   mobile games use for dense stat/inventory screens.
   ===================================================================== */
@media (max-width: 720px){

  /* ----- Top bar: trim to essentials so it never wraps ----- */
  .topbar{ height:50px; padding:0 10px; }
  .brand-tag{ display:none; }
  .brand-name{ font-size:15px; }
  .brand-mark{ width:22px; height:22px; }
  .topbar-actions{ gap:5px; }
  .pill{ font-size:10px; padding:4px 8px; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .icon-btn{ width:30px; height:30px; }

  /* ----- Character sheet: segmented sub-tabs instead of 3 columns ----- */
  .sheet-subtabs{
    display:flex; gap:6px; padding:12px 12px 10px; margin:-12px -12px 12px;
    position:sticky; top:0; z-index:5; background:var(--ink);
  }
  .sheet-subtabs button{
    flex:1; padding:8px 4px; border-radius:8px; border:1px solid var(--line);
    background:var(--ink-3); color:var(--ash); font-size:12px; font-weight:600;
  }
  .sheet-subtabs button.active{ color:var(--thread-bright); border-color:var(--thread-dim); background:linear-gradient(135deg, rgba(255,138,91,0.14), rgba(139,92,246,0.10)); }
  #view-sheet{ padding:12px; }
  .sheet-grid{ display:block; }
  .sheet-col{ display:none; }
  .sheet-col.active{ display:block; }

  /* ----- Inventory / Spells: let wide tables scroll instead of squeezing ----- */
  .table-scroll table.data-table{ min-width:520px; }
  #view-inventory, #view-spells{ padding:12px; }

  /* ----- Game / Table view: dice tray + reference collapse into a FAB + sheet ----- */
  .game-side{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:95;
    width:auto; height:72vh; border-left:none; border-top:1px solid var(--line);
    border-radius:16px 16px 0 0; box-shadow:-10px 0 34px rgba(0,0,0,0.45);
    transform:translateY(105%); transition:transform .22s ease;
  }
  .game-side.open{ transform:translateY(0); }
  .game-tools-fab{
    display:flex; align-items:center; justify-content:center; gap:6px;
    position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:96;
    width:auto; padding:0 16px; height:44px; border-radius:22px; border:none;
    background:linear-gradient(120deg, var(--neon-magenta), var(--thread) 70%); color:#22102a;
    font-weight:700; font-size:13px; box-shadow:0 8px 22px -6px rgba(230,59,176,0.55);
  }
  .chat-input-bar{ padding:10px 12px; }

  /* ----- Codex / Handbook: master/detail becomes a single-pane push navigation ----- */
  .split-view{ position:relative; flex-direction:column; }
  .codex-list{ width:100%; border-right:none; }
  .codex-body-wrap{ display:none; padding:14px 14px 0; }
  .codex-body{ padding:0; }
  .split-view.showing-detail .codex-list{ display:none; }
  .split-view.showing-detail .codex-body-wrap{ display:flex; width:100%; }
  .codex-back-btn{ display:inline-flex; margin-bottom:12px; align-self:flex-start; }
}