* { box-sizing: border-box; }
html, body {
  margin:0; min-width:0; height:100dvh; display:flex; flex-direction:column; overflow:hidden; color:var(--ink); background:var(--bg); font:1rem/1.55 var(--sans);
}
body {
  margin: 0;
  min-width: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 28rem),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.58;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection { background: color-mix(in srgb,var(--accent) 28%,transparent); color: var(--ink); }
.hidden { display: none !important; }

/* Campaign header */
#gameHeader {
  flex:0 0 auto; display:grid; grid-template-columns:minmax(180px,1fr) auto; align-items:center; gap:.5rem 1.5rem; padding:.8rem 1.3rem; background:var(--panel); border-bottom:1px solid var(--line); z-index:10;
}
#connectionStatus {
  grid-column:1/-1; grid-row:3; min-width:0; overflow-wrap:anywhere;
  padding:.4rem .65rem; border:1px solid var(--line); border-radius:6px;
  background:var(--bg); color:var(--ink); font:.8125rem/1.4 var(--sans);
}
.brandBlock { min-width: 0; }
.brandEyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
#gameHeader h1 {
  font-family:var(--serif);
  margin: 0;
  color: var(--accent-pale);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 400;
  letter-spacing: .025em;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#status {
  grid-column:1/-1; grid-row:2; color:var(--muted); font:.8125rem/1.4 var(--sans); min-width:0;
}
#status .hp { color: var(--ink-soft); }
#status .down { color: var(--blood); }
#status b { color: var(--accent-pale); font-weight: 700; }
.headerActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
#gameHeader button {
  min-height:max(44px,2.75rem); padding:.6rem .85rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel-2); color:var(--ink); font:600 .875rem/1.2 var(--sans); cursor:pointer;
}
#gameHeader button:hover {
  border-color: var(--line-strong);
  background: var(--panel-3);
  color: var(--ink);
  transform: translateY(-1px);
}
#charBtn {
  border-color: color-mix(in srgb,var(--accent) 44%,transparent) !important;
  color: var(--accent-pale) !important;
}
#logoutBtn { color: var(--muted) !important; }

#objectiveBanner {
  flex:0 0 auto; display:flex; gap:.8rem; padding:.55rem 1.3rem; border-bottom:1px solid var(--accent-soft); color:var(--notice-ink); background:var(--notice); font:.8125rem/1.5 var(--sans); overflow-wrap:anywhere;
}
#objectiveBanner::before {
  content: "CURRENT OBJECTIVE";
  flex: 0 0 auto;
  padding-right: 10px;
  border-right: 1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  color: var(--accent);
  font-size: 0.59375rem;
  letter-spacing: .15em;
}

/* Main play area */
#table {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 0;
  overflow: hidden;
  background: var(--bg-soft);
}
#chatWrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#chatTabs {
  flex:none; display:flex; align-items:center; gap:.35rem; padding:.25rem 1rem; border-bottom:1px solid var(--line); background:var(--panel);
}
.chatTab {
  position:relative; min-height:max(44px,2.75rem); padding:.6rem 1.2rem; border:0; border-radius:var(--radius-sm); color:var(--muted); background:transparent; font:700 .8125rem/1.3 var(--sans); cursor:pointer;
}
.chatTab:last-child { border-right: 0; }
.chatTab.active {
  color:var(--accent); background:var(--bg-soft); box-shadow:inset 0 -2px var(--accent);
}
.chatTab.active::after { display: none; }
#panes {
  position:relative; flex:1 1 auto; min-height:0; display:flex; overflow:hidden;
}
.logPane {
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px clamp(22px, 4vw, 64px) 80px;
  font-size: var(--chat-font);
  line-height: 1.72;
}
.logPane::-webkit-scrollbar, #board::-webkit-scrollbar, #charPanel::-webkit-scrollbar, #cmBox::-webkit-scrollbar, #advBox::-webkit-scrollbar { width: 10px; }
.logPane::-webkit-scrollbar-thumb, #board::-webkit-scrollbar-thumb, #charPanel::-webkit-scrollbar-thumb, #cmBox::-webkit-scrollbar-thumb, #advBox::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 20px;
  background: var(--line-strong);
  background-clip: padding-box;
}
#logDm {
  flex:1; min-width:0; background:var(--bg-soft); font-family:var(--serif);
}
#logParty {
  flex:1; min-width:0; padding:1.5rem clamp(1rem,3vw,3rem); background:var(--bg-soft); color:var(--ink); font:var(--chat-font)/1.6 var(--sans);
}
.narration {
  max-width: 78ch;
  margin: 0 0 20px;
  white-space: pre-wrap;
  text-wrap: pretty;
}
.narration:first-letter { color: var(--accent-pale); }
.speaker { color: var(--nc, var(--accent-pale)); font-weight: 750; }
.dice {
  max-width: 72ch;
  margin: 10px 0 18px;
  padding: 9px 12px;
  border-left: 3px solid var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb,var(--accent) 6%,transparent);
  color: var(--dice);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(var(--chat-font) - 1px);
  line-height: 1.45;
}
.info {
  margin: 10px 0;
  color: var(--dim);
  font-family: var(--sans);
  font-size: calc(var(--chat-font) - 2px);
  font-style: italic;
  white-space: pre-wrap;
}
.error {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb,var(--danger) 30%,transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb,var(--danger) 7%,transparent);
  color: var(--danger);
  font-family: var(--sans);
  font-size: calc(var(--chat-font) - 2px);
}
/* Scene-change divider: the moment the world moves should be visible in the
   story pane's permanent record, not just in the header. */
.sceneBreak {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 20px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sceneBreak::before, .sceneBreak::after {
  content: "";
  flex: 1;
  border-top: 1px solid color-mix(in srgb,var(--accent) 30%,transparent);
}
.you {
  margin: 18px 0 10px;
  color: var(--accent-pale);
  font-family: var(--sans);
  font-weight: 650;
}
.newPill {
  position: absolute;
  bottom: 18px;
  z-index: 6;
  display: none;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  border-radius: 999px;
  background: color-mix(in srgb,var(--panel-2) 96%,transparent);
  box-shadow: 0 8px 24px var(--shadow-color);
  color: var(--accent-pale);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
}

/* Tactical board */
#board {
  flex:0 0 clamp(270px,27vw,390px); width:clamp(270px,27vw,390px); min-height:0; display:none; overflow-y:auto; padding:1rem; border-left:1px solid var(--line); background:var(--panel);
}
#board.show { display: block; }
#board .sec {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 8px 24px var(--shadow-color);
}
#board h3 {
  margin:0 0 .75rem; color:var(--ink-soft); font:700 .75rem/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase;
}
#mapSvg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  background: var(--map-paper);
}
.initRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 7px 8px;
  border-left: 3px solid transparent;
  border-radius: 0 7px 7px 0;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.75rem;
}
.initRow.active { border-left-color: var(--accent); background: color-mix(in srgb,var(--accent) 9%,transparent); }
.initRow.you .nm { color: var(--accent-pale); font-weight: 750; }
.initRow.foe .nm { color: var(--danger); }
.initRow.down { color:var(--muted); }
.initRow .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpbarSm {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--bar-track);
}
.hpbarSm > div { height: 100%; background: var(--hp-fill); border-radius: inherit; }
.hpbarSm.ally > div { background: var(--hp-fill); }
.wounds { color: var(--danger); font-size: 0.65625rem; font-style: italic; white-space: nowrap; }
.hpTxt { flex: 0 0 auto; width: 45px; color: var(--dim); font-size: 0.65625rem; text-align: right; }
.cond { color: var(--dim); font-size: 0.5625rem; font-style: italic; }
.exitRow, .flagRow {
  padding: 4px 0;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 0.71875rem;
}
.exitRow b { color: var(--ink-soft); font-weight: 650; }
.flagRow { color: var(--ok); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Action composer */
#thinking {
  flex: 0 0 auto;
  display: none;
  margin: 0;
  padding: 7px 20px 0;
  background: var(--panel);
  color: var(--dim);
  font-family: var(--sans);
  font-size: 0.71875rem;
  font-style: italic;
}
/* Mobile initiative strip. At ≤900px the board is display:none, which used
   to take the turn order with it — mobile players fought blind. The strip
   shows the same engine truth in one scrollable chip row, combat only. */
#initStrip {
  flex: 0 0 auto;
  display: none;
  gap: 6px;
  padding: 7px 12px 0;
  overflow-x: auto;
  background: var(--panel);
  scrollbar-width: none;
}
#initStrip::-webkit-scrollbar { display: none; }
#initStrip .chip {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.6875rem;
  white-space: nowrap;
}
#initStrip .chip.active {
  border-color: var(--accent);
  background: color-mix(in srgb,var(--accent) 10%,transparent);
  color: var(--accent-pale);
}
#initStrip .chip.foe { color: var(--danger); }
#initStrip .chip.down { color:var(--muted); text-decoration:line-through; }
#initStrip .chip .sub { color: var(--dim); font-size: 0.59375rem; }
@media (max-width: 900px) {
  #initStrip.show { display: flex; }
}
#composer {
  flex:none; display:flex; flex-direction:column; gap:.6rem; padding:.8rem 1.25rem; border-top:1px solid var(--line); background:var(--panel); z-index:9;
}
#widgetDock {
  display:flex; gap:.5rem; align-items:center; max-width:100%; overflow-x:auto; padding:3px; scrollbar-width:thin;
}
#input {
  flex:1; min-width:0; min-height:2.875rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:.7rem 1rem; background:var(--field); color:var(--ink); font:1rem/1.4 var(--sans);
}
#input::placeholder { color: var(--muted); }
#input:focus {
  outline: none;
  border-color: color-mix(in srgb,var(--accent) 75%,transparent);
  background: var(--field);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);
}
#send {
  flex:none; min-width:6rem; border:1px solid var(--accent); border-radius:var(--radius-sm); padding:.7rem 1.5rem; background:var(--accent); color:var(--button-ink); font:750 .875rem var(--sans); cursor:pointer;
}
#send:hover { filter: brightness(1.06); transform: translateY(-1px); }
#send:disabled {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--muted);
  cursor: wait;
  filter: none;
  transform: none;
}

/* Login */
#login {
  /* Bound the content to 1,200px at default text size, not the full-bleed art. */
  position:fixed; inset:0; z-index:100; display:grid;
  grid-template-columns:minmax(0,640px) minmax(320px,480px);
  justify-content:center; align-content:safe center; align-items:center; gap:clamp(2rem,4vw,5rem);
  padding:clamp(1.5rem,5vw,5rem); overflow-y:auto;
  background:linear-gradient(90deg,#090e1088,#090e10dd),url('/api/media/first-lantern-refuge/1/image') center/cover,var(--bg);
}
.loginCard {
  width:100%; min-width:0; max-width:480px; justify-self:center; padding:clamp(1.5rem,3vw,2.75rem); border:1px solid var(--accent-soft); border-radius:var(--radius-lg); background:var(--panel); box-shadow:var(--shadow); text-align:center;
}
.loginSigil {
  display:block; width:4rem; height:4rem; margin:0 auto 1.25rem;
}
#login h1 {
  margin:.65rem 0 .8rem; color:var(--ink); font:400 clamp(2rem,3.5vw,2.6rem)/1.08 var(--serif); letter-spacing:-.015em;
}
#login p {
  margin: 0 0 26px;
  color: var(--dim);
  font-size: 0.875rem;
  font-style: italic;
}
.loginFields { display: grid; gap: 11px; }
#login input {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.875rem;
}
#login input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }
#loginBtn {
  width: 100%;
  min-height: 46px;
  margin-top: 3px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--accent), var(--accent));
  color: var(--button-ink);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}
#loginError { min-height: 20px; margin-top: 10px; color: var(--blood); font-family: var(--sans); font-size: 0.78125rem; }
    .loginAlt { margin-top: 10px; font-size: 0.8125rem; opacity: 0.85; }
    .loginAlt a { color: var(--accent); text-decoration: none; }
    .loginAlt a:hover { text-decoration: underline; }

/* Character drawer */
#charPanel {
  position:fixed; inset:0 0 0 auto; margin:0; width:min(680px,100vw); max-width:100vw; height:100dvh; max-height:100dvh; padding:1.5rem clamp(1rem,3vw,2rem) 2rem; border:0; border-left:1px solid var(--accent-soft); background:var(--panel); color:var(--ink); box-shadow:var(--shadow); overflow-y:auto; font:1rem/1.5 var(--sans);
}
#charPanel.open { transform: translateX(0); }
#charPanel h2 { margin: 0 42px 3px 0; color: var(--accent-pale); font-family: var(--serif); font-size: 1.6875rem; font-weight: 400; }
#charPanel .lvl { margin-bottom: 16px; color: var(--dim); font-size: 0.75rem; }
#charPanel .sheetProfile {
  margin:.75rem 0; color:var(--muted); font:.875rem/1.5 var(--sans);
}
#charClose {
  position:static; align-self:start; flex:none; width:2.75rem; height:2.75rem; padding:.5rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel-2); color:var(--ink); cursor:pointer;
}
.seclabel {
  margin: 18px 0 7px;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 0.59375rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
/* Live consumable counts (spell power, ammo, healing charges) — the green
   of "you still have this", next to the name of the thing it buys. */
.chargenum { color: var(--ok); font-weight: 700; }
.bar {
  position: relative;
  height: 1.65rem;
  margin: 4px 0 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bar-track);
}
.bar > div { height: 100%; border-radius: inherit; }
.bar span {
  position: absolute;
  inset: 0;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 750;
  line-height: 1.55rem;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.hpbar > div { background: linear-gradient(90deg, var(--hp-fill), var(--hp-fill)); }
.xpbar > div { background: linear-gradient(90deg, var(--xp-fill), var(--xp-fill)); }
.statgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.statgrid div {
  padding: 10px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--dim);
  font-size: 0.625rem;
  text-align: center;
  text-transform: uppercase;
}
.statgrid b { display: block; margin-bottom: 2px; color: var(--accent-pale); font-size: 1.0625rem; }
.statgrid small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.4375rem; letter-spacing: .08em; }
.sheetResources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sheetResource {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:var(--bg-soft);
}
.sheetResource > span { display: block; color: var(--dim); font-size: 0.5625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sheetResource b { display: block; margin: 2px 0; color: var(--accent-pale); font-family: var(--serif); font-size: 1.3125rem; font-weight: 400; }
.sheetResource small { display:block; color:var(--muted); font-size:.75rem; white-space:normal; overflow-wrap:anywhere; }
.sheetSpells { display: grid; gap: 7px; }
.sheetSpell { padding: 10px 12px; border-left: 2px solid var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--bg-soft); }
.sheetSpell > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sheetSpell b { color: var(--accent-pale); }
.sheetSpell span { color: var(--ok); font-size: 0.625rem; font-weight: 750; white-space: nowrap; }
.sheetSpell p, .sheetItem p { margin: 5px 0 0; color: var(--dim); font-size: 0.71875rem; line-height: 1.45; }
.sheetEffects { display: grid; gap: 7px; }
.sheetEffect { padding:10px 12px; border:1px solid var(--success-soft); border-radius:var(--radius-sm); background:var(--bg-soft); }
.sheetEffect header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sheetEffect b { color: var(--accent-2); font-family: var(--serif); font-weight: 400; }
.sheetEffect header span { color: var(--accent-2); font-size: 0.625rem; text-align: right; }
.sheetEffect p { margin: 5px 0 0; color: var(--dim); font-size: 0.71875rem; line-height: 1.45; }
.effectActions { display: flex; justify-content: flex-end; margin-top: 8px; }
.effectActions button { padding: 5px 8px; border: 1px solid color-mix(in srgb,var(--accent-2) 35%,transparent); border-radius: 7px; background: var(--panel-2); color: var(--accent-2); font: 10.5px var(--sans); cursor: pointer; }
.effectActions button:hover { border-color: var(--accent-2); color: var(--ink); }
.effectActions button:disabled { opacity: .5; cursor: wait; }
.skillList { display: flex; flex-wrap: wrap; gap: 6px; }
.skillChip, .itemBadge { padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--ink-soft); font-size: 0.5625rem; font-weight: 750; text-transform: capitalize; }
.inventorySummary { margin: -2px 0 9px; color: var(--dim); font-size: 0.6875rem; }
.inventoryGroup { margin-top: 13px; }
.inventoryGroup > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; color: var(--ink-soft); font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; }
.inventoryGroup > h3::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.inventoryGroup > h3 small { order: 3; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--panel-2); color: var(--dim); font-size: 0.5625rem; }
.sheetItem { margin-bottom: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); }
.sheetItem.isEquipped { border-color:var(--accent-soft); background:var(--panel-2); }
.sheetItem header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheetItem h4 { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 0.9375rem; font-weight: 400; }
.itemBadges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.itemBadge.equipped { border-color: color-mix(in srgb,var(--accent) 38%,transparent); color: var(--accent-pale); }
.itemBadge.minor { color: var(--rarity); }
.itemBadge.major { border-color: color-mix(in srgb,var(--accent) 45%,transparent); color: var(--dice); }
.itemBadge.live { color: var(--ok); }
.itemValue { flex: 0 0 auto; color: var(--dim); font-size: 0.625rem; white-space: nowrap; }
.itemEffects { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.itemEffects span { padding: 3px 6px; border-radius: 5px; background: color-mix(in srgb,var(--accent-2) 9%,transparent); color: var(--accent-2); font-size: 0.625rem; }
.itemActions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.itemActions button, .itemActions select {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.65625rem;
}
.itemActions button { cursor: pointer; }
.itemActions button:hover { border-color: var(--accent-soft); color: var(--ink); }
.itemActions button.primary { border-color:var(--accent); background:var(--accent); color:var(--button-ink); }
.itemActions button.danger { margin-left: auto; color: var(--danger); }
.itemActions button:disabled, .itemActions select:disabled { opacity: .5; cursor: wait; }
.sheetEmpty { display: block; padding: 9px 0; color: var(--dim); font-size: 0.71875rem; font-style: italic; }
#cSheet { padding: 11px 12px; border-left: 2px solid var(--line-strong); background: var(--bg-soft); color: var(--ink-soft); white-space: pre-wrap; }
#cSheetStatus { min-height: 18px; margin-top: 8px; color: var(--ok); font-size: 0.6875rem; }

/* Modal screens */
#charMaker, #advPicker, #mapModal {
  position:fixed; inset:0; margin:0; width:100vw; max-width:none; height:100dvh; max-height:none; display:none; align-items:center; justify-content:center; padding:1.5rem; border:0; color:var(--ink); background:transparent;
}
#charMaker[open], #advPicker[open], #mapModal[open] { display: flex; }
/* The map lightbox: same overlay pattern as the other modals. The sidebar
   map is a thumbnail; #mapBox is the table map, drawn big enough to read. */
#mapBox {
  width:min(1380px,100%); height:min(94dvh,1100px); max-height:94dvh; min-height:0; display:flex; flex-direction:column; padding:1rem; border:1px solid var(--accent-soft); border-radius:var(--radius-lg); background:var(--panel); box-shadow:var(--shadow); overflow:auto;
}
#mapBoxHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#mapBoxHead h2 { margin: 0; color: var(--accent-pale); font-family: var(--serif); font-size: 1.3125rem; font-weight: 650; }
#mapCloseBtn {
  width: 34px; height: 34px;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: none; color: var(--ink-soft); font-size: 1.0625rem; cursor: pointer;
}
#mapCloseBtn:hover { color: var(--ink); border-color: var(--accent-soft); }
#mapSvgLarge {
  display:block; flex:none; max-width:none; max-height:none; margin:auto; border-radius:4px; background:var(--map-paper);
}
#mapHint { margin: 10px 2px 0; color: var(--dim); font-family: var(--sans); font-size: 0.71875rem; }
#mapActionBar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--field);
}
#mapActionBar[hidden] { display: none; }
.mapActionBtn, #mapSpellSelect, #mapConfirmSelect {
  min-height: 34px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel-2); color: var(--ink-soft); font: 12px var(--sans); padding: 6px 11px;
}
.mapActionBtn { cursor: pointer; }
.mapActionBtn:hover:not(:disabled), .mapActionBtn.on { border-color: var(--accent); color: var(--accent-pale); }
.mapActionBtn:disabled, #mapSpellSelect:disabled { opacity: .45; cursor: default; }
#mapActionStatus { flex: 1 1 220px; color: var(--dim); font: 11.5px var(--sans); }
#mapObjectActions { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
#mapObjectActions:empty { display: none; }
#mapConfirmSelect { margin-left: auto; }
/* The sidebar map is itself a button to the big one. */
#mapSec { cursor: zoom-in; }
#mapSec svg { transition: filter .15s; }
#mapSec:hover svg { filter: brightness(1.18); }
#mapExpandHint { float: right; color: var(--dim); font-size: 0.625rem; letter-spacing: .04em; text-transform: none; }
/* Roads: the big map draws the ways between places as a cased, dashed
   centre-line path — the convention every hand-drawn vector map uses. */
/* Tier 2: the dungeon room view */
#mapViewBtns { display: flex; gap: 8px; align-items: center; }
.mapViewBtn {
  border: 1px solid var(--line-strong); background: none; color: var(--ink-soft);
  border-radius: 9px; padding: 6px 11px; font-family: var(--sans); font-size: 0.71875rem; cursor: pointer;
}
.mapViewBtn:hover { color: var(--ink); border-color: var(--accent-soft); }
.mapViewBtn.on { border-color: var(--accent); color: var(--accent-pale); }
#cmBox, #advBox {
  width: min(820px, 100%);
  max-height: min(88dvh, 900px);
  overflow-y: auto;
  padding: 28px;
  border: 1px solid color-mix(in srgb,var(--accent) 27%,transparent);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
}
#advBox { width: min(650px, 100%); }
#cmBox h2, #advBox h2 {
  margin: 0 0 6px;
  color: var(--accent-pale);
  font-size: 1.75rem;
  font-weight: 400;
}
#cmBox .cmHint { margin-bottom: 20px; color: var(--dim); font-family: var(--sans); font-size: 0.8125rem; }
#cmContinue {
  margin: 4px 0 20px;
  padding: 13px;
  border: 1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb,var(--accent) 6%,transparent);
}
#cmContinueBtn {
  width: 100%;
  min-height: 44px;
  border: 1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  border-radius: var(--radius-sm);
  background: var(--notice);
  color: var(--accent-pale);
  font-family: var(--sans);
  cursor: pointer;
}
#cmContinueBtn:hover { background: var(--notice); }
#cmContinueBtn:disabled { opacity: .5; cursor: default; }
.cmRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 9px;
  margin-bottom: 5px;
}
.cmOpt {
  min-height: 70px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.cmOpt:hover { border-color: var(--line-strong); background: var(--panel); transform: translateY(-1px); }
.cmOpt.sel { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 10%,transparent); color: var(--accent-pale); }
.cmOpt small { display: block; margin-top: 5px; color: var(--dim); font-size: 0.6875rem; line-height: 1.35; }
.cmOpt.dim { opacity: .38; cursor: not-allowed; transform: none; }
#cmGo {
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--accent), var(--accent));
  color: var(--button-ink);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}
#cmGo:disabled { border-color: var(--line); background: var(--line); color: var(--muted); cursor: default; }
#cmErr { min-height: 18px; margin-top: 8px; color: var(--danger); font-family: var(--sans); font-size: 0.75rem; }
.cmIdentity { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmIdentity input, .cmIdentity select, #cmAppearance { width: 100%; box-sizing: border-box; min-height: 39px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--field); color: var(--ink); font: 12px var(--sans); }
#cmAppearance { min-height: 66px; resize: vertical; }
#cmRoster, #cmReview { margin: 8px 0; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); color: var(--dim); font-size: 0.71875rem; line-height: 1.45; }
.advItem {
  width:100%; text-align:left;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 15px;
  align-items: stretch;
  margin-bottom: 10px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.advItem:hover { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 7%,transparent); transform: translateY(-1px); }
.advItem b { color: var(--accent-pale); font-size: 1.0625rem; font-weight: 400; }
.advItem .meta { margin: 3px 0 6px; color: var(--dim); font-family: var(--sans); font-size: 0.59375rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.advItem .blurb { color: var(--ink-soft); font-size: 0.875rem; }
.advVisual {
  position: relative;
  min-height: 86px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: radial-gradient(circle at 36% 28%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 42%), var(--panel-2);
}
.advVisual img { width: 100%; height: 100%; min-height: 86px; object-fit: cover; display: block; }
.advVisual span { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb,var(--accent) 74%,transparent); font-size: 2rem; }
.advVisual.hasImage span { display: none; }
.advCopy { min-width: 0; align-self: center; }
#advCancel {
  margin-top: 14px !important;
  padding: 9px 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: var(--dim) !important;
  font-family: var(--sans) !important;
  cursor: pointer;
}


/* Shared responsive shell. No hidden account controls on phones. */
.composerEntry { display:flex; gap:.65rem; min-width:0; }
#panes.show-dm #logParty, #panes.show-party #logDm,
#panes.show-dm .newPill.party, #panes.show-party .newPill.dm { display:none !important; }
#widgetDock > * { flex:none; }
#widgetDock :is(button,.gp-launch) { min-height:max(44px,2.75rem); display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.5rem .85rem; font:600 .8125rem var(--sans); color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); white-space:nowrap; }
#widgetDock #gp-launch { border-color:var(--accent-soft); color:var(--accent); }
.tableMenu { position:relative; font-family:var(--sans); }
.tableMenu > summary { list-style:none; display:flex; gap:.5rem; align-items:center; padding:.65rem .8rem; min-height:max(44px,2.75rem); border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; font-size:.875rem; }
.tableMenu > summary::-webkit-details-marker { display:none; }
.tableMenu[open] > summary { color:var(--accent); border-color:var(--accent); }
.tableMenuContent { position:absolute; top:calc(100% + .5rem); right:0; z-index:20; width:230px; padding:.6rem; display:grid; gap:.35rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); max-height:70dvh; overflow:auto; }
#gameHeader .tableMenuContent button { justify-content:start; }
.loginAtmosphere { align-self:end; padding:2rem 0; color:#fff4da; font:400 clamp(2rem,4.5vw,4.6rem)/1.15 var(--serif); text-shadow:0 2px 12px #000; letter-spacing:-.02em; }
#login .loginFields { gap:.55rem; }
.loginFields > label { text-align:left; margin-top:.4rem; color:var(--ink-soft); font:600 .8125rem var(--sans); }
#login :is(input,button) { min-height:2.875rem; font-size:1rem; }
#login input[type=checkbox] { width:1.1rem; min-height:1.1rem; margin:.2rem .4rem 0 0; flex:none; }
#signupConsent label { display:flex; align-items:baseline; flex-wrap:wrap; text-align:left; margin:.6rem 0; font:.8125rem/1.6 var(--sans); }
#login .loginAlt { font:.8125rem/1.6 var(--sans); opacity:1; }
#login .loginAlt a { color:var(--accent); padding:.4rem 0; display:inline-block; text-decoration:underline; }
#login p.loginAlt { margin:.5rem 0 0; }
#login :is(input,button):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.location-art { position:relative; flex:none; border-bottom:1px solid var(--line); background:var(--panel); min-width:0; }
.location-figure { margin:0; height:clamp(130px,20vh,220px); position:relative; overflow:hidden; }
.location-figure img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%; }
.location-figure::after { position:absolute; inset:0; content:""; background:linear-gradient(0deg,#060c0ded,transparent 95%); pointer-events:none; }
.location-copy { position:absolute; bottom:1rem; left:1.5rem; right:1rem; z-index:1; color:#fff5df; padding-right:8rem; }
.location-copy .eyebrow { color:#eed6a0; }
.location-copy h2 { margin:.15rem 0; font:400 clamp(1.25rem,2.4vw,2rem)/1.15 var(--serif); }
.location-note { font:.7rem/1.4 var(--sans); color:#f3ead9; }
.location-toggle { position:absolute; top:.6rem; right:.6rem; z-index:2; min-height:max(44px,2.75rem); font-size:.75rem; background:var(--panel); color:var(--ink); }
.location-art.collapsed .location-figure, .location-figure.art-unavailable { height:auto; min-height:4rem; }
.location-art.collapsed .location-copy,.art-unavailable .location-copy { position:relative; inset:auto; padding:1rem 10rem 1rem 1rem; color:var(--ink); }
.location-art.collapsed .location-copy h2 { font-size:1rem; }
.location-art.collapsed .eyebrow,.location-art.collapsed .location-note { display:none; }
.location-art.collapsed .location-figure::after,.art-unavailable::after { display:none; }
.art-unavailable .eyebrow,.art-unavailable .location-note { color:var(--muted); }
#charPanel:not([open]),#charMaker:not([open]),#advPicker:not([open]),#mapModal:not([open]) { display:none; }
#charPanel::backdrop,#charMaker::backdrop,#advPicker::backdrop,#mapModal::backdrop { background:var(--backdrop); backdrop-filter:blur(3px); }
.sheetHeading { display:flex; align-items:center; gap:1rem; }
.sheetHeading > div:nth-child(2) { flex:1; min-width:0; }
#charPanel h2 { margin:.25rem 0; font:400 1.8rem/1.15 var(--serif); overflow-wrap:anywhere; }
#charPanel .lvl { margin:0; font-size:.875rem; }
.sheetHeading .portrait { width:88px; height:88px; border-radius:50%; border:2px solid var(--accent-soft); }
.appearanceLink { display:inline-flex; align-items:center; min-height:max(44px,2.75rem); margin-bottom:.5rem; font-size:.875rem; }
.sheetVitals { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.sheetVitals .seclabel { margin:0 0 .5rem; }
.sheetResources { grid-template-columns:repeat(2,minmax(0,1fr)); margin:1rem 0; }
.expeditionResource { grid-column:1/-1; display:grid; grid-template-columns:1fr auto; align-items:baseline; }
.expeditionResource small { grid-column:1/-1; }
.sheetResource > span { overflow-wrap:anywhere; }
.sheetResource b { font:700 1.15rem/1.4 var(--sans); font-variant-numeric:tabular-nums; }
.sheetResource span,.sheetResource small { font-size:.75rem; }
.sheetNav { display:flex; gap:.4rem; flex-wrap:wrap; border-block:1px solid var(--line); padding:.5rem 0; margin-top:1rem; }
.sheetNav a { display:inline-flex; align-items:center; min-height:max(44px,2.75rem); padding:.45rem .7rem; border-radius:var(--radius-sm); background:var(--bg-soft); font-size:.8125rem; text-decoration:none; }
.sheetSection { padding:1.2rem 0; border-bottom:1px solid var(--line); scroll-margin-top:1rem; }
.sheetSection h3 { margin:0 0 1rem; font:400 1.3rem var(--serif); color:var(--ink); }
.sheetSection > summary { min-height:max(44px,2.75rem); cursor:pointer; font:400 1.3rem var(--serif); }
#cAbilities { grid-template-columns:repeat(6,minmax(0,1fr)); }
.statgrid.combatStats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.statgrid div { font-size:.75rem; }
.statgrid b { font-size:1.1rem; font-variant-numeric:tabular-nums; }
.statgrid small { font-size:.625rem; }
#cItems .inventoryGroup > h3 { font:700 .875rem var(--sans); }
.sheetItem { padding:1rem; border-radius:var(--radius); }
.sheetItem h4 { font:650 1rem/1.4 var(--sans); margin:0; }
.sheetItem p,.sheetSpell p,.sheetEffect p { font-size:.875rem; line-height:1.6; }
.itemValue,.inventorySummary,.skillChip,.sheetEmpty { font-size:.8125rem; }
.itemBadge,.itemEffects span { font-size:.7rem; }
.itemActions :is(button,select),.effectActions button,.mapActionBtn,#mapSpellSelect,#mapConfirmSelect,.mapViewBtn,#mapCloseBtn { min-height:max(44px,2.75rem); font-size:.8125rem; }
.sheetItem header > div { min-width:0; overflow-wrap:anywhere; }
.sheetItem.isEquipped { border-left:3px solid var(--accent); }
.itemValue { white-space:nowrap; }
.itemValue small { display:block; color:var(--muted); font-size:.625rem; }
#cSheet { margin-top:1rem; font-size:.875rem; line-height:1.65; }
.bar span { color:var(--bar-ink); text-shadow:0 1px 2px #000; }
#mapBoxHead { gap:1rem; flex-wrap:wrap; flex:none; }
#mapViewBtns { flex-wrap:wrap; }
#mapCloseBtn { min-width:2.75rem; }
#mapActionBar { flex:none; }
#mapViewport { flex:1 1 auto; min-height:160px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-soft); }
.mapCameraBar { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:0 0 .6rem; flex:none; }
.mapCameraBar button { min-height:max(44px,2.75rem); font-size:.8125rem; }
.mapCameraBar output { min-width:3.5rem; text-align:center; font:600 .8rem var(--sans); }
.mapLegend { display:flex; gap:.8rem; flex:1; flex-wrap:wrap; font:.75rem var(--sans); }
.mapLegend span { display:inline-flex; align-items:center; gap:.3rem; }
.mapLegend i { width:.8rem; height:.8rem; border:1px solid var(--line-strong); }
.legend-visible { background:#f2e9d2; }
.legend-remembered { background:repeating-linear-gradient(45deg,#807d71 0 2px,#aba594 2px 4px); }
.legend-unknown { background:#11191d; }
#mapHint { flex:none; margin-bottom:0; }
.playerName { color:var(--nc,var(--ink)); }
body[data-theme="parchment"] :is(.speaker,.playerName) { color:color-mix(in srgb,var(--nc,var(--accent)) 40%,#151a19); }
body[data-theme="high-contrast"] :is(.speaker,.playerName) { color:var(--ink); }
body[data-theme="high-contrast"] .location-copy,body[data-theme="high-contrast"] .loginAtmosphere { background:#000; color:#fff; }
.skipLink { position:fixed; left:12px; top:-80px; z-index:200; padding:10px; background:var(--accent); color:var(--button-ink); }
.skipLink:focus { top:12px; }
#verifyActions { margin-top:.6rem; color:var(--ok); font-size:.875rem; }
@media(max-width:900px) {
  #gameHeader { padding:.65rem .8rem; gap:.4rem; }
  #gameHeader h1 { font-size:1.15rem; white-space:normal; }
  .brandEyebrow { display:none; }
  #board { display:none !important; }
  #initStrip.show { display:flex; }
  #login { grid-template-columns:minmax(0,1fr); padding:1rem; }
  .loginAtmosphere { display:none; }
  .loginCard { margin:auto; }
  #composer { padding:.7rem .8rem; }
  .logPane,#logParty { padding:1.25rem 1rem 3rem; }
  #objectiveBanner::before { display:none; }
  .newPill { left:50% !important; right:auto !important; }
}
@media(max-width:560px) {
  #gameHeader { grid-template-columns:1fr; }
  #gameHeader .brandBlock { display:none; }
  .headerActions { grid-row:1; }
  .headerActions { justify-content:stretch; width:100%; gap:.4rem; flex-wrap:wrap; }
  .headerActions > button,.tableMenu { flex:1 1 auto; min-width:0; }
  .tableMenu summary { justify-content:center; }
  #status { font-size:.75rem; max-height:3.2rem; overflow:auto; }
}
/* On a phone the four header controls share one row at ordinary text sizes, leaving more room for the story. */
@media(min-width:380px) and (max-width:560px) {
  /* No icons and tighter sides, so the four fit; they still wrap when the reader's text is very large. */
  .headerActions .ui-icon { display:none; }
  .headerActions > button,.tableMenu summary { padding-inline:.3rem; white-space:nowrap; }
}
@media(max-width:560px) {
  #gameHeader button,.tableMenu summary { font-size:.8rem; }
  #objectiveBanner { padding:.4rem .8rem; font-size:.75rem; }
  #send { min-width:4.5rem; padding:.7rem 1rem; }
  #widgetDock :is(button,.gp-launch) { font-size:.75rem; padding:.5rem .65rem; }
  #gj-panel,#gv-stage,#gv-err { bottom:140px !important; }
  #charMaker,#advPicker,#mapModal { padding:.5rem; }
  #mapBox { padding:.7rem; height:97dvh; max-height:97dvh; }
  #mapBoxHead h2 { font-size:1.15rem; }
  .mapLegend { flex-basis:100%; }
  .location-figure { height:120px; }
  .location-copy { left:.9rem; bottom:.6rem; padding-right:0; }
  .location-copy h2 { font-size:1.3rem; }
  .location-copy .eyebrow,.location-note { display:none; }
  .location-toggle { top:.35rem; right:.35rem; font-size:.7rem; }
  .sheetHeading { gap:.7rem; }
  .sheetHeading .portrait { width:64px; height:64px; }
  #charPanel h2 { font-size:1.5rem; }
  #cAbilities { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .statgrid.combatStats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cmRow { grid-template-columns:1fr; }
  #cmBox,#advBox { padding:1.25rem; }
}
@media(max-height:650px) {
  .location-figure { height:95px; }
  .location-note,.location-copy .eyebrow { display:none; }
  #gameHeader { padding-block:.35rem; }
  #objectiveBanner { padding-block:.25rem; }
}
.loginFields label:has(+ input.hidden) { display:none; }
.cmOpt { display:block; }
#input:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.adventureDetails { width:min(38rem,calc(100vw - 24px)); max-height:85dvh; overflow:auto; padding:1.25rem; color:var(--ink); background:var(--panel); border:1px solid var(--accent); border-radius:1rem; }
.adventureDetails .dialog-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.adventureDetails h2 { margin:0; min-width:0; font-size:1.5rem; overflow-wrap:anywhere; }
.adventureDetails .dialog-head button { flex-shrink:0; }
.adventureDetails dl { display:grid; grid-template-columns:minmax(7rem,1fr) 2fr; gap:.5rem 1rem; }
.adventureDetails dt { color:var(--muted); }
.adventureDetails dd { margin:0; overflow-wrap:anywhere; }
.adventureDetails li { margin-block:.5rem; overflow-wrap:anywhere; }
.adventureDetails section + section { border-top:1px solid var(--line); padding-top:.8rem; }
@media(max-width:420px) {
  .adventureDetails { padding:1rem; }
  .adventureDetails .dialog-head { gap:.5rem; align-items:flex-start; }
  .adventureDetails .dialog-head button { width:44px; height:44px; padding:0; }
  .adventureDetails h2 { font-size:1.25rem; }
  .adventureDetails dl { grid-template-columns:1fr; gap:.2rem; }
  .adventureDetails dd { margin-bottom:.5rem; }
}
#login input { min-width:0; }
@media(max-width:900px) {
  /* A scrollable document is preferable to a zero-height story at high zoom. */
  body { overflow-y:auto; }
  #table { min-height:20rem; flex:1 0 20rem; }
}