:root {
  --bg-1: #060a22; --bg-2: #12195a;
  --win-1: #2b41a3; --win-2: #141f66; --edge: #e8edff; --edge-in: #0a1140; --glow: #7186ec;
  --text: #f3f5ff; --dim: #b7c1ef; --cursor: #ffe27a; --select: #ffffff22;
  --action: #ff9466; --bonus: #ffd95e; --reaction: #6fd0ff; --free: #a8ef8a; --passive: #d4c4ff; --info: #c9d2ff;
  --hp: #6be675; --hp-mid: #f5d04a; --hp-low: #ff6b5b;
  --you: #ffe27a; --target: #ff8fd8; --nat20: #7dffa0;
  --radius: 10px;
}
* { box-sizing: border-box; }
html { background: var(--bg-1); }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  font: 19px/1.5 "Atkinson Hyperlegible", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, var(--bg-2), var(--bg-1) 70%) fixed;
}
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cursor); outline-offset: 2px; }

/* ---------- Window chrome ---------- */
.win {
  position: relative; border-radius: var(--radius); padding: 22px 16px 14px;
  background: linear-gradient(180deg, var(--win-1), var(--win-2));
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 2px var(--edge-in), inset 0 0 0 4px #7186ec66, 0 6px 0 #0007, 0 0 24px #0008;
}
.plate {
  position: absolute; top: -13px; left: 14px; padding: 0 10px; border-radius: 6px;
  background: var(--edge-in); border: 2px solid var(--edge); font-size: 14px; font-weight: 700; letter-spacing: .06em;
  white-space: nowrap; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Layout ---------- */
.app {
  max-width: 1320px; margin: 0 auto; padding: 22px 16px 16px; display: grid; gap: 20px;
  grid-template-columns: 240px minmax(0, 1fr) minmax(0, 430px);
  grid-template-areas: "status status status" "commands list detail";
}
.status { grid-area: status; }
.commands { grid-area: commands; align-self: start; }
.list { grid-area: list; min-height: 560px; }
.detail { grid-area: detail; min-height: 560px; display: flex; flex-direction: column; }

/* ---------- Status ---------- */
.status-top { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.portrait { width: 76px; height: 76px; border-radius: 8px; border: 2px solid var(--edge); background: linear-gradient(135deg, #5a3d2a, #2d1d12); display: grid; place-items: center; font-size: 40px; }
.who h1 { margin: 0; font-size: 26px; line-height: 1.2; }
.who div { color: var(--dim); font-size: 17px; }
.hp-line { margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.help { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--edge); background: #0a1140; cursor: pointer; font-weight: 700; padding: 0; flex: none; }
.hp { display: flex; align-items: center; gap: 10px; cursor: pointer; background: none; border: none; padding: 0; text-align: left; }
.hp-bar { width: min(260px, 40vw); height: 12px; border-radius: 6px; background: #000a; border: 1px solid #fff4; overflow: hidden; }
.hp-bar i { display: block; height: 100%; background: var(--hp); transition: width .3s, background .3s; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chip { background: #0006; border: 1px solid #fff4; border-radius: 8px; padding: 4px 10px; cursor: pointer; text-align: center; min-width: 74px; }
.chip small { display: block; color: var(--dim); font-size: 13px; line-height: 1.2; }
.chip b { font-size: 22px; line-height: 1.2; }
.status-row { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid #fff3; }
.status-row > span:first-child { color: var(--dim); font-size: 15px; letter-spacing: .04em; }
.res { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; background: none; border: 1px solid transparent; border-radius: 8px; padding: 2px 6px; cursor: pointer; }
.res:hover { border-color: #fff5; }
/* Resource meters use --res, the resource's own color, everywhere it appears. */
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 16px; height: 16px; border: 2px solid var(--res); background: var(--res); transform: rotate(45deg) scale(.8); border-radius: 2px; }
.pips i.spent { background: transparent; border-color: #ffffff55; }
.res-count { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--res); }
.res-count::before { content: ""; width: 10px; height: 10px; background: var(--res); transform: rotate(45deg); }
.res-count.mini { font-size: 15px; }
.die-track { font-weight: 700; color: var(--res); }
.swatch { display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--res); transform: rotate(45deg); outline: 1px solid #10163f; }
.cond-chip { border: 2px solid #ff8b8b; color: #ffe0da; background: #0006; border-radius: 999px; padding: 1px 12px; cursor: pointer; font-size: 15px; font-weight: 700; }
.cond-chip.effect { border-color: var(--reaction); color: #e0f5ff; }
.none { color: var(--dim); font-size: 15px; }
.turn-slot { border: 2px solid currentColor; border-radius: 999px; padding: 2px 12px; background: #0004; cursor: pointer; font-size: 16px; font-weight: 700; }
.turn-slot.used { opacity: .45; text-decoration: line-through; }
.next-turn { margin-left: auto; border: 2px solid var(--edge); border-radius: 8px; background: #0006; padding: 2px 12px; cursor: pointer; font-size: 16px; }

/* ---------- Commands ---------- */
.commands ul { list-style: none; margin: 0; padding: 0; }
.cmd { white-space: nowrap; width: 100%; display: flex; gap: 10px; align-items: center; background: none; border: none; border-radius: 6px; padding: 6px 8px 6px 28px; position: relative; cursor: pointer; text-align: left; }
.cmd .ico { width: 24px; text-align: center; }
.cmd.on { background: var(--select); }
.cmd.on::before, .row.sel::before { content: "▶"; position: absolute; left: 8px; color: var(--cursor); animation: bob .6s infinite alternate ease-in-out; }
@keyframes bob { to { transform: translateX(4px); } }
.cmd kbd { margin-left: auto; color: var(--dim); font: 13px "Atkinson Hyperlegible", sans-serif; }

/* ---------- List ---------- */
.list-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.back { border: 2px solid var(--edge); background: #0006; border-radius: 8px; padding: 0 12px; cursor: pointer; }
.intro { color: var(--dim); margin: 0 0 8px; }
.group { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding-bottom: 2px; border-bottom: 1px solid #fff3; font-size: 15px; font-weight: 700; letter-spacing: .05em; color: var(--group, var(--dim)); }
.group .state { margin-left: auto; font-weight: 400; letter-spacing: 0; color: var(--dim); }
.row {
  width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  background: none; border: none; border-radius: 6px; padding: 5px 8px 5px 28px; position: relative; text-align: left; cursor: pointer;
  -webkit-touch-callout: none; user-select: none;
}
.row.sel { background: var(--select); }
.row.spent .label { opacity: .5; }
.row .label small { color: var(--dim); margin-left: 6px; }
.row .right { display: flex; align-items: center; gap: 8px; color: var(--dim); }
.row .right b { color: var(--text); }
.row .more { color: var(--cursor); font-weight: 700; }
.type-icon { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; color: #10163f; font-weight: 700; }
.t-action { --c: var(--action); } .t-bonus { --c: var(--bonus); } .t-reaction { --c: var(--reaction); }
.t-free { --c: var(--free); } .t-passive { --c: var(--passive); } .t-info { --c: var(--info); }
.type-icon { background: var(--c); }
.mini-pips { display: inline-flex; gap: 2px; }
.mini-pips i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--res); }
.mini-pips i.spent { background: transparent; outline: 1px solid #fff6; }

/* ---------- Detail ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; background: var(--c); color: #10163f; font-weight: 700; border-radius: 999px; padding: 1px 12px 1px 8px; font-size: 15px; }
.detail h2 { margin: 6px 0 8px; font-size: 24px; line-height: 1.25; }
.summary { margin: 0 0 10px; font-size: 20px; }
.facts { margin: 0 0 10px; padding-left: 20px; color: var(--dim); }
.facts b { color: var(--text); }
.cost { margin: 0 0 10px; display: flex; gap: 8px; align-items: center; background: #0004; border: 1px solid #fff3; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.meter-large { margin: 0 0 10px; transform: scale(1.3); transform-origin: left center; }

/* "You roll" and "Target rolls" always look and sit the same, so players learn the two kinds of roll by sight. */
.check { --who: var(--you); display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; border: 2px solid var(--who); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; background: #0005; }
.check.target { --who: var(--target); }
.check .who { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--who); white-space: nowrap; }
.check .what { flex: 1; min-width: 180px; font-size: 19px; }
.check-buttons { display: flex; gap: 6px; }
.check .btn { padding: 2px 12px; }

/* The latest roll is the loudest thing in Info. */
.roll-card { display: flex; gap: 14px; align-items: center; border: 3px solid var(--cursor); border-radius: 12px; padding: 8px 14px; margin-bottom: 10px; background: linear-gradient(135deg, #ffe27a33, #0006); }
.roll-total { font-size: 46px; font-weight: 700; line-height: 1; min-width: 60px; text-align: center; color: var(--cursor); }
.roll-what { display: flex; flex-direction: column; min-width: 0; }
.roll-what small { color: var(--dim); }
.roll-note { color: var(--cursor); font-weight: 700; }
.roll-card.nat20 { border-color: var(--nat20); } .nat20 .roll-total, .nat20 .roll-note { color: var(--nat20); }
.roll-card.nat1 { border-color: var(--hp-low); } .nat1 .roll-total, .nat1 .roll-note { color: var(--hp-low); }
.roll-card.fresh { animation: pop .35s ease-out; }
@keyframes pop { from { transform: scale(.92); opacity: .3; } }
.roll-history { color: var(--dim); font-size: 15px; margin: -4px 0 12px; }

/* Imported rules text, formatted for scanning. */
.rules { border-top: 1px solid #fff3; padding-top: 10px; font-size: 18px; }
.rules p { margin: 0 0 10px; }
.rules ul { margin: 0 0 10px; padding-left: 22px; }
.hl-dice { color: var(--cursor); font-weight: 700; }
.hl-dc { color: var(--target); font-weight: 700; }
.hl-type { color: var(--c); font-weight: 700; }
.form label { display: block; margin-bottom: 10px; }
.form input[type=text], .form input[type=number] { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 4px 8px; border-radius: 8px; border: 2px solid var(--edge); background: #0a1140; color: var(--text); }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.btn { border: 2px solid var(--edge); background: #0a1140; border-radius: 8px; padding: 6px 14px; cursor: pointer; font-weight: 700; }
.btn.primary { background: var(--cursor); color: #10163f; border-color: var(--cursor); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.hint { color: var(--dim); font-size: 15px; margin: 4px 0 10px; }
.detail-body { flex: 1; overflow: auto; }
.hp-input { width: 90px; font: inherit; font-size: 22px; padding: 4px 8px; border-radius: 8px; border: 2px solid var(--edge); background: #0a1140; color: var(--text); }
.check-label { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }

.lbl-short { display: none; }
.detail-toggle { display: none; position: absolute; top: 8px; right: 10px; border: 2px solid var(--edge); background: #0a1140; border-radius: 8px; padding: 0 12px; cursor: pointer; z-index: 1; font-size: 16px; }
.detail-body { min-height: 0; }
.back { white-space: nowrap; align-self: flex-start; }

/* ---------- Phone: same windows, same order, stacked. Detail docks at the bottom and never covers. ---------- */
@media (max-width: 880px) {
  body { font-size: 18px; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "commands" "list"; gap: 18px; padding: 18px 8px calc(42vh + 20px); }
  .status-top { grid-template-columns: auto 1fr; }
  .portrait { width: 56px; height: 56px; font-size: 30px; }
  .who h1 { font-size: 22px; }
  .chips { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .chip { min-width: 0; padding: 2px 2px; }
  .chip small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chip b { font-size: 19px; }
  .hp-bar { width: 30vw; }
  .hp { white-space: nowrap; }
  .next-turn { margin-left: 0; }
  .commands ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .cmd { flex-direction: column; gap: 0; padding: 6px 4px; text-align: center; font-size: 16px; }
  .cmd.on::before, .cmd kbd { display: none; }
  .cmd.on { outline: 2px solid var(--cursor); }
  .list { min-height: 0; }
  .status-row { gap: 6px 12px; font-size: 15px; }
  .status-row > span:first-child { width: 100%; }
  .res { font-size: 15px; }
  .pip { width: 13px; height: 13px; }
  .turn-slot { padding: 1px 10px; font-size: 15px; }
  .lbl-long { display: none; }
  /* Docked drawer: a one-line title until something is picked, then it opens. It sits below the list, never over the Info text. */
  .app { padding-bottom: 128px; }
  body.detail-open .app { padding-bottom: calc(44vh + 20px); }
  .detail { position: fixed; left: 8px; right: 8px; bottom: 8px; min-height: 0; z-index: 5; padding-top: 16px; height: 104px; transition: height .2s; }
  body.detail-open .detail { height: 44vh; }
  body:not(.detail-open) .detail .roll-history { display: none; }
  .detail-toggle { display: block; }
  .lbl-short { display: inline; }
  .detail h2 { font-size: 21px; margin-top: 2px; }
  .summary { font-size: 18px; }
}

/* ---------- Home: players and characters ---------- */
.home { max-width: 560px; margin: 12vh auto 0; padding: 0 16px; }
.home .win { padding: 28px 22px 22px; }
.home h1 { margin: 0 0 8px; font-size: 26px; }
.home p { color: var(--dim); margin: 0 0 16px; }
.home label.btn { display: inline-block; }
.home input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pick { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.pick button { width: 100%; text-align: left; padding: 10px 14px; border: 2px solid var(--edge); border-radius: 8px; background: #0a1140; cursor: pointer; }
.pick button:hover { background: var(--select); }
.pick small { display: block; color: var(--dim); font-size: 15px; }
.add-player { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.add-player label { flex-basis: 100%; color: var(--dim); }
.add-player input { flex: 1; min-width: 0; padding: 6px 10px; border: 2px solid var(--edge); border-radius: 8px; background: #0a1140; }
.home.wide { max-width: 900px; margin-top: 4vh; }
.home input[type=file] + .btn, .home .btn + .btn { margin-left: 8px; }
.pack-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pack-actions .btn + .btn { margin-left: 0; }
.field { display: block; margin-bottom: 12px; color: var(--dim); }
.field input, .field textarea, .field select { display: block; width: 100%; margin-top: 4px; padding: 6px 10px; border: 2px solid var(--edge); border-radius: 8px; background: #0a1140; color: var(--text); font: inherit; }
.field textarea { font: 15px/1.5 ui-monospace, Consolas, monospace; resize: vertical; }
.pack-result { border-top: 1px solid #fff3; margin-top: 12px; padding-top: 12px; }
.pack-result h2 { margin: 0 0 6px; font-size: 18px; }
.pack-result ul { margin: 0 0 12px; padding-left: 20px; }
.pack-result.problems h2 { color: #ffb4a8; }
.save-error { flex-basis: 100%; margin: 6px 0 0; color: #ffb4a8; font-weight: 700; }
.error { color: #ffb4a8; margin-top: 12px; }
.warnings { margin-top: 10px; font-size: 15px; color: var(--dim); }
.warnings summary { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Additions to the sheet ---------- */
.portrait { font-size: 36px; font-weight: 700; color: var(--cursor); }
.reimport { margin-left: 8px; border: 1px solid #fff4; background: #0006; border-radius: 6px; padding: 0 8px; cursor: pointer; font-size: 14px; color: var(--dim); vertical-align: middle; }
.related { border-top: 1px solid #fff3; margin-top: 8px; padding-top: 8px; }
.related h3 { margin: 0 0 6px; font-size: 15px; letter-spacing: .05em; color: var(--dim); }
.related p { margin: 0 0 8px; }
.notice { margin-top: 16px; color: var(--dim); font-size: 14px; }
.notice a { color: var(--dim); }
.check-notes { flex-basis: 100%; font-size: 15px; font-weight: 700; color: var(--who); }
.choice { margin-bottom: 4px; }
.choice-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--dim); text-transform: uppercase; margin-bottom: 4px; }
.choice .btn { padding: 2px 12px; }

/* ---------- Game log on the sheet ---------- */
.row.struck .label { text-decoration: line-through; opacity: .6; }
.combat-row { border: 2px solid var(--action); border-radius: 8px; padding: 4px 8px; }
.combat-row > span:first-child { color: var(--action); }
.combat-place { font-weight: 700; }

/* ---------- Home: campaigns ---------- */
.home-sub { font-size: 18px; margin: 20px 0 8px; color: var(--dim); letter-spacing: .04em; }

/* ---------- Campaign (the DM's table) ---------- */
.campaign {
  display: grid; gap: 22px 16px; padding: 22px 16px; max-width: 1400px; margin: 0 auto;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "head log" "party log" "combat log" "roll log";
  align-items: start;
}
.campaign-head { grid-area: head; }
.party { grid-area: party; }
.combat { grid-area: combat; }
.dm-roll { grid-area: roll; }
.campaign-log { grid-area: log; position: sticky; top: 22px; }
.log-scroll { max-height: calc(100vh - 110px); overflow-y: auto; }
.campaign h1 { margin: 0 0 6px; font-size: 24px; }
.campaign-description { color: var(--dim); white-space: pre-line; margin: 0 0 8px; }
.party-card {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; cursor: pointer;
  border: 2px solid var(--edge); border-radius: 8px; background: #0a1140; padding: 10px 12px; margin-bottom: 10px;
}
.party-card:hover { background: var(--select); }
.party-name { font-size: 20px; font-weight: 700; }
.party-class, .party-resources { color: var(--dim); font-size: 16px; }
.party-conditions { display: flex; flex-wrap: wrap; gap: 6px; }
.party-stats b, .party-card .hp-line b { color: var(--cursor); }
.initiative { margin: 0 0 8px; padding-left: 28px; font-size: 19px; }
.initiative b { display: inline-block; min-width: 2.2em; color: var(--cursor); }
.initiative-total { flex: 0 0 5.5em !important; }
.roster { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.roster li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.roster small { color: var(--dim); }
.log-session { font-size: 15px; letter-spacing: .06em; color: var(--dim); margin: 14px 0 6px; border-bottom: 1px solid #fff3; }
.log-entry { border-bottom: 1px solid #fff2; padding: 6px 0; }
.log-entry summary { cursor: pointer; }
.log-entry .facts { margin: 6px 0; }
.log-entry.struck summary { text-decoration: line-through; opacity: .6; }
.log-entry.hidden-entry summary { color: var(--passive); }
.log-time { color: var(--dim); font-size: 15px; }
@media (max-width: 880px) {
  .campaign { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "party" "combat" "roll" "log"; }
  .campaign-log { position: static; }
  .log-scroll { max-height: none; }
}