:root {
  --bg: #0a0c0e;
  --panel: #111417;
  --panel2: #171b1f;
  --panel3: #1e2328;
  --line: #242a30;
  --line2: #323a42;
  --fg: #dde3e7;
  --muted: #7c8891;
  --accent: #3bff7a;
  --accent-soft: #2fd365;
  --accent-ink: #04210d;
  --danger: #ff5a4e;
  --warn: #ffb22e;
  --player: #6cb8ff;
  --warden: #b892ff;
  --roll: #ffd23f;
  --entity: #9fd3ff;
  --radius: 8px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font: 13px/1.5 var(--mono); display: flex; flex-direction: column; }

button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="checkbox"], input[type="radio"] { width: auto; flex: none; padding: 0; margin: 0 4px 0 0; accent-color: var(--accent); }
input:hover, select:hover, textarea:hover { border-color: var(--line2); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
textarea { resize: vertical; }
textarea.code { font-family: var(--mono); font-size: 12.5px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
button {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
button:hover { background: var(--panel3); border-color: var(--line2); }
button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
button.primary { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
button.primary:hover { background: var(--accent); }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
button.danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--panel2)); border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover { color: var(--fg); background: var(--panel2); }
button:disabled { opacity: 0.4; cursor: default; }

.top { display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.top h1 { font: 600 14px var(--mono); letter-spacing: 0.2em; margin: 0; color: var(--accent); text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.grow { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.err { color: var(--danger); font-size: 12px; }
code { font-family: var(--mono); background: var(--panel2); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; }
.pill { font-size: 11.5px; padding: 1px 9px; border-radius: 99px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 10%, transparent); }
.pill.ok { color: var(--accent); }
.pill.bad { color: var(--danger); }

.agent { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.agent select { width: auto; padding: 5px 7px; }
.agent select:disabled { display: none; }

.seg { display: inline-flex; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; }
.seg button { border: 0; border-radius: 6px; background: transparent; padding: 5px 14px; color: var(--muted); }
.seg button:hover { color: var(--fg); background: var(--panel3); }
.seg button.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

.grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(360px, 1fr); }
.col { padding: 14px 16px; border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.col:last-child { border-right: 0; }
h2 { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin: 8px 0 0; display: flex; align-items: center; gap: 10px; }
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.col > h2:first-child { margin-top: 0; }
h3 { font-size: 12px; color: var(--muted); margin: 0; font-weight: 500; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.wrap > label.grow { flex: 1 1 9em; min-width: 9em; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 12px; color: var(--muted); }
.check { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.check input { width: auto; accent-color: var(--accent-soft); }

.log { flex: 1; min-height: 200px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.entry { --c: var(--muted); position: relative; padding: 7px 10px 8px; border-radius: var(--radius); background: var(--panel2); border: 1px solid transparent; }
.entry .who { font-size: 11px; letter-spacing: 0.06em; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 2px; padding-right: 18px; }
.entry .tag { display: inline-flex; align-items: center; gap: 6px; color: var(--c); font-weight: 600; text-transform: uppercase; }
.entry .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px color-mix(in srgb, var(--c) 70%, transparent); }
.entry .by { opacity: 0.8; }
.entry .by::before { content: "· "; }
.entry .time { margin-left: auto; font-variant-numeric: tabular-nums; opacity: 0.7; }
.entry .txt { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 13px; }
.entry.player { background: color-mix(in srgb, var(--player) 7%, var(--panel2)); border-color: color-mix(in srgb, var(--player) 18%, transparent); }
.entry.warden { background: color-mix(in srgb, var(--warden) 8%, var(--panel2)); border-color: color-mix(in srgb, var(--warden) 28%, transparent); }
.entry.warden .txt { font-family: inherit; font-size: 13.5px; }
.entry.roll { background: color-mix(in srgb, var(--roll) 6%, var(--panel2)); }
.entry.note { display: flex; align-items: baseline; gap: 8px; background: transparent; padding: 1px 10px; font-size: 12px; color: var(--muted); }
.entry.note .txt { flex: 1; font-family: inherit; font-size: 12px; }
.entry.note .txt::before { content: "› "; opacity: 0.6; }
.entry.note .time { font-size: 11px; padding-right: 18px; }
.entry.hidden-on-player { opacity: 0.5; }
.entry .del { position: absolute; top: 4px; right: 4px; padding: 0 6px; font-size: 12px; opacity: 0; background: transparent; border: 0; color: var(--muted); }
.entry.note .del { top: 0; }
.entry .del:hover { color: var(--danger); background: transparent; }
.entry:hover .del { opacity: 1; }
.compose { display: flex; flex-direction: column; gap: 8px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.card.empty { color: var(--muted); font-style: italic; }
.card.generating { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.card.ready { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent); }
.card.error { border-color: color-mix(in srgb, var(--danger) 60%, var(--line)); }
.card .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.card .note { font-size: 12.5px; color: var(--muted); font-style: italic; background: var(--panel2); padding: 7px 9px; border-radius: 6px; }
.card textarea { font-family: var(--mono); font-size: 13px; }
.card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.card li label { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12.5px; }
.card li input { width: auto; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--warn); border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

.fxopts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.fxopts label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.fxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.fxgrid button { padding: 9px 8px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; line-height: 1.2; background: var(--panel); border-radius: var(--radius); }
.fxgrid button:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.fxgrid button .ico { display: inline-flex; flex: none; }
.fxgrid button .fxi { width: 16px; height: 16px; }
.fxi { width: 1.05em; height: 1.05em; vertical-align: -0.17em; flex: none; }
.fxlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fxlist li { display: flex; align-items: center; gap: 8px; background: var(--panel2); border-radius: 6px; padding: 4px 4px 4px 10px; font-size: 13px; }
.fxlist li .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxlist li.none { background: transparent; color: var(--muted); font-style: italic; padding-left: 2px; }

body.starting > header.top, body.starting > .grid { display: none; }
.start { max-width: 640px; width: 100%; margin: 0 auto; padding: 40px 16px 48px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.start h1 { font: 600 18px var(--mono); letter-spacing: 0.2em; color: var(--accent); margin: 0; text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.start .card { padding: 16px; }
.start .card h2 { margin: 0 0 4px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.field a { margin-left: 6px; color: var(--accent); }
.mine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mine li { display: flex; align-items: center; gap: 8px; background: var(--panel2); border-radius: 6px; padding: 6px 6px 6px 10px; }
.mine code { font-size: 14px; letter-spacing: 0.15em; }
a.btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; color: var(--fg); text-decoration: none; }
a.btn:hover { background: var(--panel3); }
#linkForm input { flex: 1; }
.code { font: 600 14px var(--mono); letter-spacing: 0.25em; color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel2)); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
#codeInline { font-family: var(--mono); letter-spacing: 0.15em; color: var(--accent); }
dialog { background: var(--panel); color: var(--fg); border: 1px solid var(--line2); border-radius: 12px; padding: 18px; width: min(460px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); }
dialog h2 { margin: 0; font-size: 13px; color: var(--fg); }
dialog h2::after { display: none; }
#askDialog p { margin: 0; line-height: 1.5; color: color-mix(in srgb, var(--fg) 85%, var(--muted)); }
#askButtons { flex-wrap: wrap; margin-top: 4px; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10; background: var(--panel3); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); max-width: calc(100vw - 32px); }
.toast.error { border-color: var(--danger); color: var(--danger); }
#keywarn { cursor: pointer; }

.card.outcome { border-color: color-mix(in srgb, var(--warden) 55%, var(--line)); background: color-mix(in srgb, var(--warden) 5%, var(--panel)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warden) 10%, transparent); }
.card.outcome .attempt { font-size: 15px; font-weight: 600; }
.rollgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.rollgrid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
#rollStatus { gap: 6px; }
#rollStatus .res { font-family: var(--mono); white-space: pre-wrap; font-size: 13px; }
#rollStatus .res.ok { color: var(--accent); }
#rollStatus .res.bad { color: var(--danger); }
#rollStatus .rollres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#rollStatus .rollres li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#rollStatus .rollres button { padding: 2px 8px; font-size: 12px; }
#rollTarget { line-height: 1.5; }

#draftLines { display: flex; flex-direction: column; gap: 6px; }
.dline { display: grid; grid-template-columns: minmax(90px, 9em) 1fr auto; gap: 6px; align-items: start; }
.dline select { padding: 5px 6px; }
.dline button { padding: 4px 8px; }
.dline .dfx { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.dline .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-family: var(--mono); background: color-mix(in srgb, var(--warn) 12%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 99px; padding: 2px 9px; }
.dline .chip input { width: auto; accent-color: var(--warn); }

.sendas { display: inline-flex; gap: 0; min-width: 12em; }
.sendas select { flex: 1; min-width: 0; border-radius: 6px 0 0 6px; border-right: 0; }
.sendas select + select { border-radius: 0; }
.sendas button { border-radius: 0 6px 6px 0; }
.sendas select.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.keyhint { margin-top: -4px; }
#compose[data-mode="note"] { border-color: color-mix(in srgb, var(--aside, var(--warden)) 45%, var(--line)); }
#compose[data-mode="command"] { border-color: color-mix(in srgb, var(--warden) 45%, var(--line)); }
.vcard { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.vcard .vname { font-weight: 600; flex: 1; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 10px; }
.vgrid label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.vgrid label output { float: right; color: var(--fg); font-family: var(--mono); font-size: 11px; }
.vgrid input[type="range"] { padding: 0; accent-color: var(--accent-soft); border: 0; background: transparent; }
.vgrid input[type="color"] { width: 44px; height: 28px; padding: 2px; }
.vgrid .check { margin: 0; font-size: 12px; }
.fxd { background: transparent; border: 0; padding: 0; }
.fxd summary { font-weight: 500; font-size: 13px; color: var(--muted); }

details { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
details[open] { padding-bottom: 12px; }
details > *:not(summary) { margin-top: 8px; }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: baseline; gap: 6px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform 0.15s; display: inline-block; width: 10px; }
details[open] > summary::before { transform: rotate(90deg); }
summary:hover::before { color: var(--fg); }
summary .muted { font-weight: 400; font-size: 12px; }

@media (max-width: 1000px) {
  .grid { display: block; overflow-y: auto; }
  .col { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .log { max-height: 50vh; }
}
.entry.note.fx .txt::before { content: none; }
.entry.note.fx .txt { color: color-mix(in srgb, var(--warn) 70%, var(--muted)); }

.drop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: 10px; background: var(--panel); transition: border-color 0.15s, background 0.15s; }
.drop.over { border-color: var(--accent-soft); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.soundlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.soundlist li { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 4px; align-items: center; background: var(--panel2); border-radius: 6px; padding: 4px 4px 4px 6px; }
.soundlist li.none { display: block; background: transparent; color: var(--muted); font-style: italic; padding-left: 2px; }
.soundlist .sname { background: transparent; border-color: transparent; padding: 4px 6px; min-width: 0; }
.soundlist .sname:hover { border-color: var(--line); }
.soundlist .sname:focus { background: var(--panel); }
.soundlist button { padding: 4px 8px; font-size: 12.5px; }
.soundlist input[type="range"], .fxlist input[type="range"] { padding: 0; border: 0; background: transparent; accent-color: var(--accent-soft); box-shadow: none; }
.volctl { display: inline-flex; align-items: center; gap: 4px; }
.volctl input[type="range"] { width: 80px; }
.volctl .volpct { width: 52px; padding: 3px 4px; text-align: right; font-size: 12.5px; }

:root { --aside: #5fd3c6; }
.entry.aside, .entry.aside_reply { background: color-mix(in srgb, var(--aside) 7%, var(--panel2)); border-color: color-mix(in srgb, var(--aside) 25%, transparent); border-style: dashed; }
.entry.aside .txt, .entry.aside_reply .txt { font-family: inherit; font-size: 13.5px; }
.entry .chg { margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--aside); }
.dwho { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dchar { padding: 4px 6px; font-size: 12.5px; }
.castm { display: flex; gap: 10px; align-items: flex-start; background: var(--panel2); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px; }
.castm .pick { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 6px; overflow: hidden; display: grid; place-items: center; font-weight: 600; color: var(--muted); }
.castm .pick img, .pc .pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc .pick { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 5px; overflow: hidden; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--muted); align-self: center; }
.castbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.castbody .cname { flex: 1; min-width: 8em; font-weight: 600; }
.castbody .where { display: inline-flex; align-items: baseline; gap: 4px; margin-left: auto; }
.castbody .where select { width: auto; max-width: 200px; padding: 1px 4px; }
.castm .pick.big { width: 64px; height: 64px; }
.advm .check { display: inline-flex; align-items: center; gap: 4px; }
.advm input[type="color"] { width: 40px; height: 26px; padding: 1px; }
.advm [data-aact="show"] { padding: 2px 8px; font-size: 12px; }
.advm .advinfo { white-space: pre-wrap; overflow-wrap: anywhere; color: color-mix(in srgb, var(--fg) 82%, var(--muted)); line-height: 1.45; }
.castbody .mood { display: inline-flex; align-items: baseline; gap: 4px; }
.castbody .mood select { width: auto; padding: 1px 4px; }
.castbody select[data-m="engine"], .castbody select[data-m="voice"] { width: auto; flex: 1 1 10em; min-width: 0; }
.castbody .mood select.up { color: var(--accent); }
.castbody .mood select.down { color: #e07a72; }
.castbody .why { font-size: 12.5px; padding: 3px 6px; }
.castbody .stress { display: inline-flex; align-items: baseline; gap: 4px; }
.castbody .stress input { width: 3.6em; padding: 1px 4px; }
.castbody [data-mact="panic"] { padding: 2px 8px; font-size: 12px; }
.castbody textarea { font-size: 12.5px; }
.castchip { display: inline-block; border: 1px dashed var(--line); border-radius: 99px; padding: 2px 9px; font-size: 12px; margin: 0 4px 4px 0; }

#mapExpand { padding: 2px 8px; font-weight: 400; font-size: 12px; }
.smap { display: flex; flex-direction: column; gap: 10px; }
.smap .iso { height: clamp(420px, 62vh, 680px); }
.smap.compact .msystems { grid-template-columns: 1fr 1fr; }
.smap.compact .mrooms { grid-template-columns: 1fr 1fr; }
.mapdlg { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.mapdlg .smap { margin-top: 12px; }
.mapdlg h2 { font-size: 14px; }
.maplayout { margin-top: 12px; }

.mapview { margin-left: auto; }
.mapview button { padding: 2px 10px; font-size: 12px; font-weight: 500; }
.mapdlg .row .mapview { margin-left: 8px; }

.roomdlg { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 40px); display: none; }
.roomdlg[open] { display: flex; flex-direction: column; gap: 10px; }
.roomdlg h2 { font-size: 14px; }
.roomgrid { display: grid; grid-template-columns: minmax(300px, 1.5fr) minmax(240px, 1fr); gap: 14px; min-height: 0; overflow-y: auto; }
@media (max-width: 760px) { .roomgrid { grid-template-columns: 1fr; } }
.roomplanbox { background: #070a0c; border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.roomplanbox .roomplan { width: 100%; max-height: 52vh; }
.roomplanbox .rpempty { margin: auto; text-align: center; padding: 30px 10px; }
.rptools { display: flex; flex-wrap: wrap; gap: 4px; }
.rptools button { padding: 3px 7px; font-family: var(--mono); font-size: 12px; }
.rptools button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.roomplan { color: var(--accent-soft); }
.roomplan .rp-wall { fill: color-mix(in srgb, currentColor 32%, #000); }
.roomplan .rp-floor { fill: color-mix(in srgb, currentColor 7%, #000); stroke: color-mix(in srgb, currentColor 12%, transparent); stroke-width: 0.5; }
.roomplan .rp-glass { fill: color-mix(in srgb, #9fd3ff 60%, transparent); }
.roomplan .rp-door { fill: var(--warn); }
.roomplan .rp-door.hatch { fill: color-mix(in srgb, var(--warn) 70%, #fff); }
.roomplan .rp-thing { fill: color-mix(in srgb, currentColor 35%, #000); stroke: currentColor; stroke-width: 1; }
.roomplan .rp-thing.hollow { fill: none; }
.roomplan .rp-screen { fill: currentColor; opacity: 0.8; }
.roomplan .rp-soft { fill: color-mix(in srgb, currentColor 60%, #000); }
.roomplan .rp-line { stroke: currentColor; stroke-width: 1; fill: none; }
.roomplan .rp-pipe { stroke: color-mix(in srgb, currentColor 70%, #000); stroke-width: 2; }
.roomplan .rp-core { fill: color-mix(in srgb, var(--danger) 35%, #000); stroke: var(--danger); stroke-width: 1.5; }
.roomplan .rp-debris { stroke: color-mix(in srgb, currentColor 80%, #000); stroke-width: 2; fill: none; stroke-linejoin: round; }
.roomplan .rp-hit { fill: transparent; }
.roomplan.editing .rp-hit { cursor: crosshair; }
.roomplan.editing .rp-hit:hover { fill: color-mix(in srgb, var(--accent) 25%, transparent); }
.rplegend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.rplegend b { font-family: var(--mono); color: var(--fg); }
.roomside { display: flex; flex-direction: column; gap: 10px; }
.roomside .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.roomside .pcchip { background: color-mix(in srgb, var(--player) 14%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--player) 40%, var(--line)); border-radius: 999px; padding: 1px 9px; font-size: 12.5px; }

#crew { display: flex; flex-direction: column; gap: 6px; }
.pc { background: var(--panel2); padding: 7px 10px; }
.pc summary { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 500; }
.pc .pcname { font-weight: 600; }
.pcgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; }
.pcgrid label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); min-width: 0; }
.pcgrid label.wide { grid-column: 1 / -1; }
.pcgrid input[type="number"] { padding: 4px 6px; }

.builderdlg { width: min(1280px, calc(100vw - 32px)); height: calc(100vh - 40px); max-height: none; display: none; }
.builderdlg[open] { display: flex; flex-direction: column; gap: 10px; }
.builderdlg h2 { font-size: 14px; }
.bgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.3fr); gap: 14px; }
.bchat { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.bmsgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.bmsg { max-width: 92%; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); white-space: pre-wrap; line-height: 1.5; }
.bmsg > b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 2px; }
.bmsg.warden { align-self: flex-end; background: color-mix(in srgb, var(--warden) 9%, var(--panel)); border-color: color-mix(in srgb, var(--warden) 28%, var(--line)); }
.bmsg.agent { align-self: flex-start; background: color-mix(in srgb, var(--aside) 6%, var(--panel)); }
.bmsg.err { border-color: var(--danger); }
.bdraft { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.bdraft p { margin: 0; }
.bempty { margin: auto; text-align: center; max-width: 28em; }
.btitle { font-size: 17px; font-weight: 700; }
.bpre { white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px; margin: 0; }
.bcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.bcard + .bcard { margin-top: 6px; }
.mono { font-family: var(--mono); }
@media (max-width: 900px) { .bgrid { grid-template-columns: 1fr; overflow-y: auto; } .bmsgs { min-height: 300px; } }
@media (max-width: 700px) {
  .builderdlg[open] > .row { flex-wrap: wrap; }
  .builderdlg[open] > .row .muted { order: 3; flex: 1 1 100%; }
  .bgrid { display: flex; flex-direction: column; gap: 14px; }
  .bchat, .bdraft { flex: none; min-height: auto; }
  .bmsgs { flex: none; min-height: 160px; max-height: 38vh; }
  #bInput { min-height: 5.5em; flex: none; }
  .bchat > .row { flex: none; }
  .bdraft { overflow: visible; padding-right: 0; }
  .bdraft #bApply { position: sticky; bottom: 0; }
  .bdraft > .row { flex-wrap: wrap; }
}

.panictable { margin: 4px 0 10px; padding-left: 26px; font-size: 12.5px; }
.panictable li { margin: 3px 0; }
.portraitdlg { width: min(760px, calc(100vw - 32px)); height: calc(100vh - 60px); max-height: none; display: none; }
.portraitdlg[open] { display: flex; flex-direction: column; gap: 8px; }
.portraitdlg p { margin: 0; }
.portraitgrid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; padding: 2px; }
.portraitgrid button { padding: 0; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #0b0f0d; }
.portraitgrid button img { width: 100%; height: 100%; display: block; }
.portraitgrid button.on { outline: 3px solid var(--accent); outline-offset: 1px; }
.synopsisdlg { width: min(860px, calc(100vw - 32px)); height: calc(100vh - 40px); max-height: none; display: none; }
.synopsisdlg[open] { display: flex; flex-direction: column; gap: 10px; }
.synopsisdlg h2 { font-size: 14px; }
.synbody { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.synempty { margin: auto; text-align: center; max-width: 30em; line-height: 1.5; }
.synsec { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.synsec h3 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-soft); }
.syntext { white-space: pre-wrap; line-height: 1.55; }
.synsec.warden { background: color-mix(in srgb, var(--warden) 8%, var(--panel)); border: 1px dashed color-mix(in srgb, var(--warden) 55%, var(--line)); }
.synsec.warden h3 { color: var(--warden); }
.synlabel { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--warden); border: 1px solid color-mix(in srgb, var(--warden) 55%, transparent); border-radius: 4px; padding: 1px 6px; margin-bottom: 6px; }

.entry .var { margin-top: 5px; padding: 4px 0 0 10px; border-top: 1px dashed var(--line2); white-space: pre-wrap; }
.entry .vfor { font-size: 11px; letter-spacing: 0.04em; color: var(--warden); text-transform: uppercase; }
.dline .dvars { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.dvar { display: grid; grid-template-columns: minmax(110px, 0.35fr) 1fr auto; gap: 4px; width: 100%; padding: 4px; border-radius: 6px; background: color-mix(in srgb, var(--warden) 8%, transparent); }
.dvar input, .dvar textarea { font-size: 12.5px; padding: 4px 6px; }
.dvars .small { padding: 2px 6px; font-size: 12px; }

.settingsdlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.settingsdlg > .tabs { margin: 12px 0 2px; }
.settingsdlg .tabpanel { gap: 6px; min-height: min(510px, 70vh); }
.settingsdlg .tabpanel > .sethead:first-child, .settingsdlg #discordOn > .sethead:first-child { margin-top: 6px; }
.settingsdlg .tabpanel > p.muted:first-child, .settingsdlg #discordOn > p.muted:first-child { margin: 10px 0 0; }
.sethead { margin: 14px 0 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; }
.settingsdlg .check { align-items: flex-start; margin: 8px 0 0; }
.settingsdlg .check input { margin-top: 5px; }
.settingsdlg .check em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }

#terminals { display: flex; flex-direction: column; gap: 6px; }
.conns { width: 100%; border-collapse: collapse; font-size: 12px; }
.conns th, .conns td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: center; }
.conns th:first-child, .conns td:first-child { text-align: left; }
.conns thead th { color: var(--muted); font-weight: 500; }
.conns input { width: auto; }
.conns td.off input:not(:checked) { opacity: .35; }
.tcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.tcard .tname { font-weight: 600; flex: 1; }
.tcard .check { margin: 0; }
.tcard label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.tcard select { width: auto; padding: 4px 6px; }
.tcard .looks { display: flex; flex-wrap: wrap; gap: 4px; }
.tcard .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; color: var(--fg); }
.tcard .chip input { width: auto; }
.pc .pcname.online { color: var(--accent); }
.pc .pcname.offline { color: var(--muted); }

.pc .where { display: inline-flex; align-items: baseline; gap: 4px; margin-left: auto; }
.pc select[data-move] { width: auto; max-width: 220px; padding: 1px 4px; font: inherit; color: var(--fg); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.pc select[data-move]:hover, .pc select[data-move]:focus-visible { border-color: var(--line); background: var(--panel3); }

.entry.cut { opacity: 0.45; }
.entry.cut .txt { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.settingsdlg .talkrow { margin-top: 10px; }

.tabs { display: flex; width: 100%; }
.tabs button { flex: 1; }
.tabpanel { display: flex; flex-direction: column; gap: 10px; }
.col > .sidehead { position: sticky; top: 0; z-index: 5; flex-shrink: 0; display: flex; gap: 8px; align-items: stretch; background: var(--bg); box-shadow: 0 0 0 8px var(--bg), 0 -16px 0 8px var(--bg); }
.sidehead .tabs { flex: 1; width: auto; min-width: 0; }
.sidehead .tabs button { padding-left: 6px; padding-right: 6px; }
.editmode { flex-shrink: 0; white-space: nowrap; }
.lockbtn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; line-height: 0; }
.lockbtn .icon { display: block; }
.editmode[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }

.tray { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; flex-shrink: 0; }
.tray:not(:has(> :not([hidden]))) { display: none; }
.ocroll:not(:empty) { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
:root { --heard: #e8b04a; }
.entry.heard { background: color-mix(in srgb, var(--heard) 7%, var(--panel2)); border-color: color-mix(in srgb, var(--heard) 28%, transparent); }
:root { --table: #7fa8d6; }
.entry.table { background: color-mix(in srgb, var(--table) 6%, var(--panel2)); border-color: color-mix(in srgb, var(--table) 24%, transparent); }
#discordCmd { font-size: 13px; }
.voicesrow { align-items: center; margin-top: 8px; gap: 10px; }
#voicesNote { margin: 4px 0 0; }
:root { --discord: #5865f2; }
.dlogo { display: inline-flex; color: var(--discord); margin-left: 6px; vertical-align: -2px; }
.dlogo svg { width: 14px; height: 14px; }
#micBtn.discord { position: relative; display: inline-grid; place-items: center; width: 32px; height: 24px; padding: 0; color: var(--muted); }
#micBtn.discord svg { width: 16px; height: 16px; display: block; }
#micBtn.discord:hover { color: var(--discord); border-color: var(--discord); }
#micBtn.discord[aria-pressed="true"] { color: var(--discord); border-color: var(--discord); background: color-mix(in srgb, var(--discord) 14%, transparent); }
#micBtn.discord[aria-pressed="true"]::before,
#micBtn.discord[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: -1px; width: auto; height: auto; margin: 0; border-radius: inherit;
  border: 2px solid var(--discord); background: none; pointer-events: none;
  animation: dcwave 1.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
#micBtn.discord[aria-pressed="true"]::after { animation-delay: .9s; }
@keyframes dcwave { from { transform: scale(1); opacity: .75; } to { transform: scale(1.9, 2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #micBtn.discord[aria-pressed="true"]::before, #micBtn.discord[aria-pressed="true"]::after { animation: none; opacity: 0; }
}
.roster { margin: 2px 0 0; padding-left: 18px; }
#micBtn { padding: 2px 8px; font-size: 12px; border: 1px solid var(--muted); }
#micBtn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
#micBtn[aria-pressed="true"]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); animation: micpulse 1.2s ease-in-out infinite; vertical-align: 1px; }
@keyframes micpulse { 50% { opacity: 0.25; } }
.miclive { font-size: 12px; color: var(--muted); font-style: italic; border-left: 2px solid color-mix(in srgb, var(--heard) 60%, transparent); padding: 2px 8px; user-select: none; overflow-wrap: anywhere; }
.keyrow #retcon { padding: 2px 8px; font-size: 12px; color: #c96a63; border-color: color-mix(in srgb, #c96a63 35%, var(--line)); }
.keyrow #retcon:hover:not(:disabled) { color: #e07a72; background: color-mix(in srgb, #c96a63 12%, transparent); }

.outcome .stakes { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin: 2px 0 4px; }
.outcome .stakes label { display: flex; align-items: center; gap: 8px; }
.outcome .stakes label span { width: 7.5em; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.outcome .stakes input { flex: 1; min-width: 0; padding: 4px 8px; }
.outcome .ok { color: var(--accent); }
.outcome .bad { color: var(--danger); }
.outcome .ocbtn { width: 40px; height: 34px; padding: 0; font-size: 18px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.outcome .ocbtn.ok { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.outcome .ocbtn.ok:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.outcome .ocbtn.bad { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.outcome .ocbtn.bad:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); }

.col.side:not(.editing) .edit-only, .col.side.editing .play-only { display: none !important; }

.pcsheet { display: flex; flex-direction: column; gap: 6px; font-size: 13px; padding: 4px 2px 2px; }
.pcsheet .nums { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pcsheet .nums span { white-space: nowrap; }
.pcsheet .nums b { color: var(--fg); }
.pcsheet .vitals { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pcsheet .vitals label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.pcsheet .vitals input { width: 56px; padding: 2px 6px; }
.pcsheet .k { color: var(--muted); }
.pcsheet .items { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pcsheet .items .chip { display: inline-flex; align-items: center; gap: 2px; background: var(--panel2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 4px 1px 9px; font-size: 12px; }
.pcsheet .items .chip button { border: 0; background: none; padding: 0 4px; font-size: 11px; color: var(--muted); }
.pcsheet .items .chip button:hover { color: var(--danger); }
.pcsheet .items input { width: auto; padding: 1px 8px; font-size: 12px; border-radius: 99px; }
.tplay { display: flex; flex-direction: column; gap: 4px; }
.tplay > div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 6px 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.tplay b { font-weight: 600; }
.tplay .here { margin-left: auto; color: var(--accent); }
.castv { margin: 4px 0 8px; }
.castv b { font-size: 13px; }

.mnav { display: none; }
@media (max-width: 760px) {
  body { height: 100dvh; }
  header.top { flex-wrap: wrap; gap: 4px; padding: 6px 8px; }
  header.top h1 { display: none; }
  header.top #conn { font-size: 0; width: 10px; height: 10px; padding: 0; flex-shrink: 0; background: currentColor; }
  header.top .code { letter-spacing: 0.12em; padding: 4px 8px; }
  header.top > * { flex-shrink: 0; }
  header.top .grow { flex: 1 1 0; min-width: 0; }
  header.top #keywarn { order: 9; }
  .keyhint { display: none; }
  .compose .sendas { flex: 1 1 100%; order: 3; }
  .compose .sendas select { min-width: 5em; }
  header.top button[data-short] { font-size: 0; padding: 5px 8px; }
  header.top button[data-short]::after { content: attr(data-short); font-size: 13px; }
  header.top #mode button { padding: 5px 7px; }
  header.top #settingsBtn { padding: 5px 7px; }
  .grid { display: block; flex: 1; min-height: 0; overflow: hidden; }
  .grid > .col { height: 100%; overflow-y: auto; border: 0; padding: 10px 12px; }
  body[data-mview="comms"] .grid > .col.side, body:not([data-mview="comms"]) .grid > .col:not(.side) { display: none; }
  .grid > .col:not(.side) > h2:first-child { display: none; }
  .log { max-height: none; min-height: 0; flex: 1; }
  .sidehead .tabs { display: none; }
  .sidehead { justify-content: flex-end; }
  .mnav { display: flex; flex-shrink: 0; border-top: 1px solid var(--line); background: var(--panel); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); gap: 2px; }
  .mnav button { flex: 1; min-width: 0; border: 0; background: none; color: var(--muted); padding: 9px 2px; font-size: 13px; border-radius: 8px; position: relative; }
  .mnav button.on { color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; }
  .mnav .tabdot { position: absolute; top: 5px; right: 8px; }
  .tray { max-height: 45vh; }
}
@media (pointer: coarse) and (max-width: 760px) {
  header.top .code, header.top #settingsBtn, header.top #mode button, header.top button[data-short], #micBtn, #retcon { min-height: 44px; min-width: 44px; }
  .entry .del { opacity: 1; min-width: 44px; min-height: 44px; font-size: 16px; top: 0; right: 0; }
  .entry { padding-right: 44px; }
  .entry.note { min-height: 44px; align-items: center; }
}

#lore, #secrets, #standingOrders { overflow-y: hidden; resize: none; min-height: 4em; }

.stationrow { gap: 8px 16px; }
.stationrow label { display: inline-flex; align-items: center; gap: 6px; }
.stationrow #stationName { width: 12em; }
.stationrow select { width: auto; }

.clockform input#clockLabel { flex: 1; min-width: 140px; }
.clockform input#clockMins { width: 64px; }
#clockList .ctime { font-family: var(--mono); color: var(--accent); }
#clockList .ctime.low { color: var(--danger); }
#clockList li { gap: 4px; }
#clockList li.paused .ctime { color: var(--muted); }
#clockList button { padding: 2px 7px; font-size: 12px; }
#clockList button.danger { color: var(--danger); }

.rules h2 { margin: 6px 0 0; }
.rules a { color: var(--accent); }
.rules ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.rulesdl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 4px 0 0; font-size: 13px; }
.rulesdl dt { font-weight: 600; }
.rulesdl dd { margin: 0; color: var(--muted); }
.tabs.seg { position: relative; }
.tabs.seg button { position: relative; z-index: 1; transition: color .18s ease; }
.tabs.seg.slider button.on { background: transparent; }
.tabs.seg.slider::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: var(--x, 2px); width: var(--w, 0); border-radius: 6px; background: var(--accent-soft); }
.tabs.seg.slider.ready::before { transition: left .22s cubic-bezier(.3, .7, .2, 1), width .22s cubic-bezier(.3, .7, .2, 1); }
@keyframes tabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tabpanel.enter { animation: tabIn .2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .tabs.seg.slider.ready::before { transition: none; }
  .tabpanel.enter { animation: none; }
}
.tabdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-left: 6px; vertical-align: 1px; box-shadow: 0 0 6px var(--warn); }
.hint { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line2); color: var(--muted); font-size: 10px; font-weight: 600; cursor: help; letter-spacing: 0; text-transform: none; }
.hint:hover { color: var(--fg); border-color: var(--muted); }
h2 .hint { margin-left: -4px; }
h2 .h2btn { order: 2; padding: 1px 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; }
details.sec { background: none; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
details.sec[open] { padding-bottom: 0; }
details.sec > *:not(summary) { margin-top: 0; }
details.sec > summary { display: block; }
details.sec > summary::before { display: none; }
details.sec > summary h2::before { content: "▸"; font-size: 10px; transition: transform 0.15s; display: inline-block; width: 8px; margin-right: -4px; }
details.sec[open] > summary h2::before { transform: rotate(90deg); }
details.sec > summary:hover h2 { color: var(--fg); }
.top .ghost { color: var(--fg); }

.campaigndlg { width: min(1360px, calc(100vw - 32px)); height: calc(100vh - 40px); max-height: none; display: none; }
.campaigndlg[open] { display: flex; flex-direction: column; gap: 10px; }
.campaigndlg h2 { font-size: 14px; }
.cmpbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cmplist { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.cmplist p, .cmpcard p { margin: 0; }
.cmpcard { gap: 8px; padding: 14px; }
.cmpgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(420px, 1.55fr) minmax(340px, 1fr); gap: 14px; }
.cmpmapcol { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
.cmpside { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.cmpside p { margin: 0; }
.cmpside details > summary { cursor: pointer; }
.cmpside .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cmph { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.cmpacts { margin: 4px 0 0; padding-left: 20px; }
.cmpacts li { margin: 4px 0; }
.cmpnow { gap: 6px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cmplink { display: block; width: 100%; text-align: left; white-space: normal; background: transparent; border-color: transparent; padding: 4px 6px; }
.cmplink + .cmplink { margin-top: 2px; }
.cmplink.current { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.sector { width: 100%; height: auto; display: block; flex: none; background: radial-gradient(ellipse at 30% 40%, #0f1a1f 0%, #070a0c 70%); border: 1px solid var(--line); border-radius: 10px; }
.sector .stars circle { fill: #c8d6e0; }
.sector .lane { stroke: #3a4752; stroke-width: 2.5; }
.sector .lane.dark { stroke: #5a3a44; stroke-dasharray: 7 7; }
.sector [role=button] { cursor: pointer; outline: none; }
.sector .loc .halo { fill: rgba(10, 14, 16, 0.85); stroke-width: 2.5; }
.sector .loc .name { fill: var(--fg); font: 600 13px var(--mono); letter-spacing: 0.08em; text-anchor: middle; paint-order: stroke; stroke: #070a0c; stroke-width: 4px; }
.sector .loc.sel .halo, .sector [data-loc]:focus-visible .halo { stroke-width: 4; filter: drop-shadow(0 0 6px currentColor); }
.sector .loc .stand { font: 700 12px var(--mono); fill: var(--muted); paint-order: stroke; stroke: #070a0c; stroke-width: 3px; }
.sector .loc .stand.s1 { fill: #7bd88f; }
.sector .loc .stand.s-1 { fill: #ff6b6b; }
.stand-pill { font: 600 11px var(--mono); padding: 1px 6px; border: 1px solid var(--line); border-radius: 8px; white-space: nowrap; }
.stand-pill.s1 { color: #7bd88f; border-color: #7bd88f; }
.stand-pill.s-1 { color: #ff6b6b; border-color: #ff6b6b; }
.cmpfx { display: flex; gap: 6px; align-items: baseline; margin: 2px 0; }
.cmpfx input { align-self: flex-start; margin-top: 3px; }
.ledger { width: 100%; border-collapse: collapse; margin-top: 4px; }
.ledger td { padding: 2px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.ledger .num { text-align: right; white-space: nowrap; }
.sector .story rect { fill: #1b2329; stroke: #8fa3b0; stroke-width: 1.5; }
.sector .story text { fill: var(--fg); font: 700 11px var(--mono); text-anchor: middle; pointer-events: none; }
.sector .story:hover rect, .sector .story:focus-visible rect { stroke: var(--fg); fill: #26313a; }
.sector .story.done rect { fill: #0f1417; stroke: #4a5560; stroke-dasharray: 3 2; }
.sector .story.done text { fill: var(--muted); }
.sector .story.current rect { fill: var(--accent-ink); stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--accent)); }
.sector .story.sel rect { stroke: var(--warn); stroke-width: 2.5; }
.sector .story.busy rect { stroke: var(--warn); animation: cmpblink 1s ease-in-out infinite; }
@keyframes cmpblink { 50% { stroke-opacity: 0.2; } }
.sector .ship path { fill: #7fe0ff; filter: drop-shadow(0 0 4px #7fe0ff); }
.sector .ship text { fill: #7fe0ff; font: 700 10px var(--mono); text-anchor: middle; }
.cmplegend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.cmplegend span { display: inline-flex; align-items: center; gap: 6px; }
.cmplegend .lg { display: inline-block; width: 12px; height: 12px; border: 1.5px solid #8fa3b0; background: #1b2329; }
.cmplegend .lg.loc { border-radius: 50%; border-color: var(--warn); }
.cmplegend .lg.pill { border-radius: 6px; width: 16px; }
.cmplegend .lg.dia { transform: rotate(45deg) scale(0.8); }
.cmplegend .lg.done { border-style: dashed; border-color: #4a5560; background: #0f1417; }
.cmplegend .lg.cur { border-color: var(--accent); background: var(--accent-ink); }
.cmplegend .lg.ship { border: none; background: none; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #7fe0ff; }
@media (max-width: 900px) { .cmpgrid { display: flex; flex-direction: column; overflow-y: auto; } .cmpmapcol, .cmpside { overflow: visible; min-height: auto; flex: none; } }

.pcsheet .combatline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pcsheet .combatline button, .advstats button { padding: 1px 8px; font-size: 12px; }
.bad { color: var(--danger); }
.advstats { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.advstats.dead { opacity: 0.7; }
.advstats .inl { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.advstats .inl input { width: 56px; padding: 2px 6px; }
.advstats .advedit { display: flex; flex-direction: column; gap: 6px; }
.wtrack { display: inline-flex; gap: 3px; }
.wtrack i { width: 10px; height: 10px; border: 1px solid var(--muted); border-radius: 2px; }
.wtrack i.on { background: var(--danger); border-color: var(--danger); }
.pcsheet .conds { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pcsheet .conds .chip { background: color-mix(in srgb, var(--warn) 12%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 99px; padding: 1px 9px; font-size: 12px; }
.pcsheet .conds select { width: auto; max-width: 14em; padding: 1px 6px; font-size: 12px; }
#hazardList li .grow { white-space: normal; }

.sector .story.offered rect { stroke: var(--accent); stroke-width: 2.5; }
.sector .story .vote { fill: var(--warn); font-size: 12px; }

.shipui .bad, .shiprig .bad { color: var(--danger); }
.shipui .house, .shiprig .house { font-size: 10.5px; padding: 0 6px; border: 1px solid var(--warn); border-radius: 99px; color: var(--warn); white-space: nowrap; }
.shipui select.inl, .shipui input.inl { width: auto; display: inline-block; padding: 2px 6px; }
.shipui .shipcrew { border-color: color-mix(in srgb, var(--player) 55%, var(--line)); }
.shipui .shipfoe { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.shipui .shiplog { margin: 4px 0 0; padding-left: 16px; }

/* ux-flows: campaign window log tail, offered legend, build chip */
.cmplast { border-top: 1px solid var(--line); padding-top: 6px; max-height: 5.4em; overflow: hidden; color: var(--muted); }
.cmplegend .lg.off { border-color: var(--accent); border-width: 2.5px; border-style: dashed; border-radius: 6px; width: 16px; }
.sector .story.offered rect { stroke-dasharray: 4 2; }
.buildchip { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--warn); order: 1; }
.tabs [data-tab].waiting, .mnav [data-mview].waiting { color: var(--warn); font-weight: 700; }
#settingsBtn svg { display: block; }
.firstrun { font-size: 13px; }
.firstrun code { word-break: break-all; }

.touchtip { position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 16px)); padding: 7px 10px; background: var(--panel3); color: var(--fg); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); font-size: 13px; white-space: pre-line; pointer-events: none; }
.touchtip[hidden] { display: none; }
#rollStatus.folded { padding: 8px 12px; }
@media (max-height: 700px) {
  .tray { max-height: 34vh; }
  .log { min-height: 110px; }
}

/* gfx-polish: crew-message hold row, phone send row, campaign dialog on phones, downtime names */
#msgCard .row.wrap label { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
#msgHoldSecs { width: 5em; flex: none; }
.cmpside .bcard > .row.wrap > b.grow { flex: 1 1 9em; }
@media (max-width: 760px) {
  .compose .sendas { flex-wrap: wrap; gap: 6px; }
  .compose .sendas select, .compose .sendas select + select { flex: 1 1 100%; border: 1px solid var(--line); border-radius: 6px; }
  .compose .sendas select.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .compose .sendas button { flex: 1 1 100%; border-radius: 6px; }
}
@media (max-width: 600px) {
  .campaigndlg > .row > h2 { flex: 1 1 0; min-width: 0; }
  #campaignClose { order: 1; }
  #cmpStatus { order: 2; flex: 1 1 100%; }
  #cmpLeave { order: 3; flex: 1 1 100%; }
  .cmplast { max-height: 2.7em; }
  .cmpmapcol { overflow-x: auto; }
  .sector { min-width: 700px; }
  .sector .loc .name { font-size: 17px; stroke-width: 5px; }
  .sector .loc .stand, .sector .story text { font-size: 15px; }
}