/* Project Moon: The City web app - sheets and log cards (adapted from the rulebook design).
   Same design language as the rulebook: dark title band, gold rule, paper tone, red condensed headings, Sin colors. */
:root {
  --pm-ink: #1c1a17; --pm-paper: #f7f3ea; --pm-paper2: #efe8d6; --pm-red: #7a1f2b; --pm-gold: #c9a227; --pm-gold-d: #a8861c;
  --pm-blue: #1f3a5f; --pm-mute: #6d6558; --pm-rule: #cfc6b2; --pm-dark: #14151b; --pm-ok: #2c6e49; --pm-warn: #b5651d;
  --pm-head: "Barlow Condensed", "Bahnschrift", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  --pm-body: "Source Serif 4", "Sitka Text", Constantia, Georgia, serif;
  --pm-ui: "IBM Plex Sans", "Segoe UI", system-ui, Arial, sans-serif;
}
.sin-wrath { --sc: #d63031; } .sin-lust { --sc: #f08c28; } .sin-sloth { --sc: #c9aa1e; } .sin-gluttony { --sc: #46aa5a; }
.sin-gloom { --sc: #2fa9bd; } .sin-pride { --sc: #4664dc; } .sin-envy { --sc: #9650c8; }

/* ---- the window ---- */
.pm-sheet { display: flex; flex-direction: column; height: 100%; }
#main input, #main select, #main textarea { color: var(--pm-ink); font-family: var(--pm-ui); }

/* ---- the title band ---- */
#main .pm-head { background: var(--pm-dark); color: #eceff4; padding: 10px 16px 9px; border-bottom: 4px solid var(--pm-gold); display: flex; flex-direction: column; gap: 7px; }
#main .pm-name { font-family: var(--pm-head); font-weight: 800; font-size: 28px; letter-spacing: .04em; text-transform: uppercase; background: transparent; border: none; border-bottom: 1px solid #3a3d4a; color: #fff; width: 100%; height: auto; padding: 0 0 2px; line-height: 1.1; }
#main .pm-name::placeholder { color: #5a5f70; }
#main .pm-name:focus { box-shadow: none; border-bottom-color: var(--pm-gold); outline: none; }
#main .pm-badges { display: flex; flex-wrap: wrap; gap: 5px; }
#main .pm-badge { font: 600 10.5px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; background: #22242e; border: 1px solid #3a3d4a; color: #cfd6e6; border-radius: 2px; padding: 2px 8px; }
#main .pm-badge.sin { background: #3b1a22; border-color: var(--pm-red); color: #f0c3c9; }
#main .pm-badge.warn { background: #4a3210; border-color: var(--pm-warn); color: #f6cf9b; }
#main .pm-meters { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
#main .pm-meter { display: flex; align-items: center; gap: 5px; }
#main .pm-meter b { font: 700 11px var(--pm-head); letter-spacing: .2em; text-transform: uppercase; color: #8aa0c8; margin-right: 2px; }
#main .pip { display: inline-block; width: 12px; height: 12px; border: 1.5px solid #8a8fa3; border-radius: 50%; background: transparent; }
#main .pip.on { background: var(--pm-gold); border-color: var(--pm-gold); }
#main .pip.stress.on { background: #d4495a; border-color: #d4495a; }
#main .pm-head input[type=number], #main .pm-head select { background: #22242e; border: 1px solid #3a3d4a; color: #eceff4; height: 24px; }
#main .pm-small { width: 40px; text-align: center; }
#main .pm-head button { background: #22242e; border-color: #3a3d4a; color: #cfd6e6; }
#main .pm-head button:hover { background: #2d3040; border-color: var(--pm-gold); color: #fff; }
#main .pm-actions { display: flex; gap: 6px; }
#main .pm-actions button[data-action="hailMary"] { background: var(--pm-red); border-color: #a33142; color: #fff; }
#main .pm-actions button[data-action="hailMary"]:hover { background: #962436; }

/* ---- buttons ---- */
#main button { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--pm-rule); background: var(--pm-paper2); color: var(--pm-ink); border-radius: 2px; padding: 3px 10px; line-height: 1.4; height: auto; width: auto; }
#main button:hover { background: #e4dac0; border-color: var(--pm-gold-d); }
#main button.active { background: var(--pm-red); color: #fff; border-color: var(--pm-red); }
#main button[disabled] { opacity: .4; cursor: default; }

/* ---- tabs ---- */
#main .pm-tabs { display: flex; gap: 0; padding: 0 12px; border-bottom: 1px solid var(--pm-rule); background: var(--pm-paper2); }
#main .pm-tabs button { border: none; border-bottom: 3px solid transparent; background: transparent; font-size: 12.5px; letter-spacing: .16em; padding: 8px 14px 6px; border-radius: 0; color: var(--pm-mute); }
#main .pm-tabs button:hover { color: var(--pm-ink); background: transparent; }
#main .pm-tabs button.active { background: transparent; color: var(--pm-red); border-bottom-color: var(--pm-red); }
#main .pm-body { padding: 12px 16px 16px; overflow-y: auto; flex: 1; }

/* ---- headings and fields ---- */
#main h3 { font: 800 14px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; color: var(--pm-red); border: none; border-top: 2px solid var(--pm-gold); padding-top: 5px; margin: 14px 0 8px; display: flex; align-items: center; gap: 10px; }
#main h3:first-child { margin-top: 0; }
#main h3 small, #main .hint { color: var(--pm-mute); font: 400 11.5px var(--pm-ui); letter-spacing: 0; text-transform: none; }
#main .pm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
#main .pm-grid2 label { display: flex; flex-direction: column; gap: 1px; font: 700 10px var(--pm-head); letter-spacing: .16em; text-transform: uppercase; color: var(--pm-red); }
#main .pm-grid2 label.wide { grid-column: 1 / -1; }
#main .pm-grid2 input[type=text], #main .pm-grid2 input[type=number], #main .pm-grid2 select, #main .pm-grid2 textarea { font: 400 13px var(--pm-body); background: transparent; border: none; border-bottom: 1px solid var(--pm-rule); border-radius: 0; color: var(--pm-ink); padding: 2px 0; height: auto; box-shadow: none; }
#main .pm-grid2 input:focus, #main .pm-grid2 select:focus, #main .pm-grid2 textarea:focus { border-bottom-color: var(--pm-gold-d); box-shadow: none; outline: none; }
#main .pm-grid2 textarea { border: 1px solid var(--pm-rule); padding: 3px 5px; background: rgba(255,255,255,.4); }
#main .pm-grid2 label input[type=checkbox] { align-self: flex-start; }
#main .inline-row { display: flex; gap: 6px; align-items: center; } #main .inline-row input { flex: 1; }

/* ---- attributes and skills ---- */
#main .pm-attrs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#main .pm-attr { text-align: center; border: 1px solid var(--pm-ink); background: rgba(255,255,255,.4); padding: 4px 4px 6px; }
#main .pm-attr button { border: none; background: transparent; color: var(--pm-red); font-size: 11px; letter-spacing: .2em; padding: 0; }
#main .pm-attr button:hover { background: transparent; color: var(--pm-ink); }
#main .pm-attr input { width: 60px; text-align: center; font: 800 28px var(--pm-head); border: none; background: transparent; display: block; margin: 2px auto 0; height: 34px; }
#main .pm-skills { width: 100%; border-collapse: collapse; }
#main .pm-skills td { padding: 2px 6px; border-bottom: 1px dotted var(--pm-rule); }
#main .pm-skills button { border: none; background: transparent; font: 600 12.5px var(--pm-ui); letter-spacing: 0; text-transform: none; padding: 0; text-align: left; color: var(--pm-ink); }
#main .pm-skills button:hover { color: var(--pm-red); background: transparent; }
#main .pm-skills input { width: 40px; text-align: center; background: transparent; border: none; border-bottom: 1px solid var(--pm-rule); font-weight: 700; }
#main .pm-skills .hint { width: 80px; }
#main .pm-skills tr.fit-up .fit { color: var(--pm-ok); font-weight: 700; } #main .pm-skills tr.fit-down .fit { color: var(--pm-red); font-weight: 700; }

/* ---- the Sins ---- */
#main .pm-sins { width: 100%; border-collapse: collapse; font-size: 11.5px; }
#main .pm-sins th { font: 700 10px var(--pm-head); letter-spacing: .16em; text-transform: uppercase; color: var(--pm-red); text-align: left; border-bottom: 2px solid var(--pm-ink); padding: 2px 6px; }
#main .pm-sins td { padding: 4px 6px; vertical-align: top; border-bottom: 1px dotted var(--pm-rule); }
#main .pm-sins tr[class*="sin-"] > td:first-child { border-left: 5px solid var(--sc); }
#main .pm-sins tr[class*="sin-"] > td:first-child b { font: 800 15px var(--pm-head); letter-spacing: .08em; text-transform: uppercase; color: var(--sc); filter: brightness(.82); }
#main .pm-sins tr.alignment > td:first-child { background: color-mix(in srgb, var(--sc) 14%, transparent); }
#main .pm-sins input { width: 46px; text-align: center; font: 800 16px var(--pm-head); border: 2px solid var(--sc, var(--pm-rule)); border-radius: 2px; background: rgba(255,255,255,.55); height: 28px; }
#main .pm-sins input[name*="tally"] { border: 1px solid var(--pm-rule); font: 600 12px var(--pm-ui); height: 22px; }
#main .pm-sins tr.tech td { color: var(--pm-mute); font-size: 11px; border-bottom: 1px solid var(--pm-rule); }
#main .pm-sins small { color: var(--pm-mute); }

/* ---- lists ---- */
#main .pm-list { list-style: none; margin: 0; padding: 0; }
#main .pm-list li { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dotted var(--pm-rule); }
#main .pm-list li.spent b { text-decoration: line-through; color: var(--pm-mute); }
#main .pm-list .ctl { margin-left: auto; display: flex; gap: 4px; }
#main .pm-list .wear { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--pm-mute); }
#main .pm-list .wear .pip { border-color: var(--pm-mute); } #main .pm-list .wear .pip.on { background: var(--pm-red); border-color: var(--pm-red); }
#main .badge-spent { color: #fff; background: var(--pm-red); font: 700 10px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; }
#main .pm-notes-area { width: 100%; margin-top: 8px; background: rgba(255,255,255,.4); border: 1px solid var(--pm-rule); font: 13px var(--pm-body); }

/* ---- crew ---- */
#main .pm-clocks { display: flex; flex-wrap: wrap; gap: 10px; }
#main .pm-clockcard { width: 104px; text-align: center; border: 1px solid var(--pm-ink); background: rgba(255,255,255,.4); padding: 6px 4px; }
#main .pm-clock .seg { fill: var(--pm-paper2); stroke: var(--pm-ink); stroke-width: 1; }
#main .pm-clock .seg.on { fill: var(--pm-red); }
#main .pm-clockcard .nm { font: 700 12px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; }
#main .pm-clockcard .ct { font-size: 11px; color: var(--pm-mute); }
#main .pm-clockcard .ctl { display: flex; justify-content: center; gap: 2px; margin-top: 3px; }
#main .pm-clockcard .ctl button { padding: 0 7px; }
#main .pm-ledger { width: 100%; border-collapse: collapse; font-size: 12px; }
#main .pm-ledger th { font: 700 10px var(--pm-head); letter-spacing: .16em; text-transform: uppercase; color: var(--pm-red); text-align: left; border-bottom: 2px solid var(--pm-ink); padding: 2px 6px; }
#main .pm-ledger td { border-bottom: 1px dotted var(--pm-rule); padding: 3px 6px; }

/* ---- chat cards ---- */
.pm-card { border: 1px solid var(--pm-rule); border-left: 5px solid var(--pm-blue); background: var(--pm-paper); border-radius: 2px; padding: 6px 9px 7px; font: 13px var(--pm-body); color: var(--pm-ink); }
.pm-card-head { font: 800 15px var(--pm-head); letter-spacing: .08em; text-transform: uppercase; color: var(--pm-red); border-bottom: 2px solid var(--pm-gold); margin-bottom: 4px; padding-bottom: 1px; }
.pm-card-head small { color: var(--pm-mute); font-weight: 600; letter-spacing: .06em; }
.pm-card-lines div { font: 11.5px var(--pm-ui); color: var(--pm-mute); }
.pm-dice { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.pm-die { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border: 1.5px solid var(--pm-ink); border-radius: 4px; background: #fff; font: 800 14px var(--pm-head); }
.pm-die.hit { background: var(--pm-ok); border-color: var(--pm-ok); color: #fff; }
.pm-die.one { background: #f4d6d2; border-color: var(--pm-red); color: var(--pm-red); }
.pm-die.ego { box-shadow: 0 0 0 2px var(--pm-gold); }
.pm-die.rerolled { outline: 2px dashed #1f5f8b; outline-offset: 1px; }
.pm-result { font: 800 15px var(--pm-head); letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-band { margin-left: auto; padding: 1px 10px; border-radius: 2px; color: #fff; background: var(--pm-mute); font-size: 13px; letter-spacing: .12em; }
.pm-band.critical { background: #1f5f8b; } .pm-band.success { background: var(--pm-ok); } .pm-band.partial { background: var(--pm-warn); }
.pm-band.failure { background: #8a2a1f; } .pm-band.criticalFailure { background: #4a1410; }
.pm-notes p { margin: 4px 0 0; font: 12px/1.35 var(--pm-ui); }
.pm-verdict { border-left-color: var(--pm-red); background: #f3e6e2; }
.pm-voice { font: italic 14px var(--pm-body); margin: 4px 0; }
.pm-voicecard { border-style: dashed; border-left-style: solid; border-left-color: var(--pm-mute); }
.pm-voicecard.loud { border-left-color: var(--pm-red); background: #f3e6e2; } .pm-voicecard.loud .pm-voice { font-weight: 700; }


/* ================= app shell ================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #1b1d22; color: var(--pm-ink); font-family: var(--pm-ui); font-size: 14px; display: flex; flex-direction: column; }
button { font-family: var(--pm-head); }
#top { background: var(--pm-dark); color: #eceff4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 4px solid var(--pm-gold); flex: 0 0 auto; }
#top h1 { margin: 0; font: 800 22px var(--pm-head); letter-spacing: .08em; text-transform: uppercase; }
#top p { margin: 0; font-size: 11.5px; color: #9aa3b5; }
.top-actions { display: flex; gap: 6px; }
.top-actions button, .side-actions button, .side-foot button, .log-head button { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; border: 1px solid #3a3d4a; background: #22242e; color: #cfd6e6; border-radius: 2px; padding: 5px 11px; }
.top-actions button:hover, .side-actions button:hover, .side-foot button:hover, .log-head button:hover { border-color: var(--pm-gold); color: #fff; background: #2d3040; }
.top-actions .lang { color: var(--pm-gold); }
#app { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 230px minmax(0, 1fr) 360px; }
#side { background: #20222a; color: #cfd6e6; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #0c0d10; }
.side-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 10px; }
.side-actions button { padding: 5px 2px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-actions .gold { grid-column: 1 / -1; background: var(--pm-gold); color: #14151b; border-color: var(--pm-gold-d); }
.side-actions .gold:hover { background: #dcb633; color: #14151b; }
.actor-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.actor { display: grid; grid-template-columns: 32px 18px 1fr; align-items: center; grid-template-rows: auto auto; width: 100%; text-align: left; background: transparent; border: none; border-left: 4px solid transparent; color: #e6e9f0; padding: 8px 10px; cursor: pointer; font-family: var(--pm-ui); }
.actor:hover { background: #292c37; }
.actor.sel { background: #2f3342; border-left-color: var(--pm-gold); }
.actor .ic { grid-row: 1 / 3; color: var(--pm-gold); font-size: 12px; padding-top: 3px; }
.actor.npc .ic { color: #d4495a; }
.actor.crew .ic { color: #8aa0c8; }
.actor .nm { font: 700 15px var(--pm-head); letter-spacing: .05em; text-transform: uppercase; }
.actor small { color: #8d94a8; font-size: 11px; }
.side-foot { padding: 10px; display: grid; gap: 5px; border-top: 1px solid #0c0d10; }
.hint.pad, .pad { padding: 12px; color: #8d94a8; }
#main { background: var(--pm-paper); min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#main .pm-sheet { flex: 1; min-height: 0; }
#main .empty { padding: 40px 28px; max-width: 520px; }
#main .empty h2 { font: 800 28px var(--pm-head); letter-spacing: .06em; text-transform: uppercase; color: var(--pm-red); margin: 0 0 10px; }
#main .empty button, button.primary { cursor: pointer; font: 800 13px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; background: var(--pm-red); color: #fff; border: 1px solid #a33142; padding: 8px 18px; border-radius: 2px; }
#main .empty button:hover, button.primary:hover { background: #962436; }
#main .pm-head { position: relative; }
#main .pm-tools { position: absolute; right: 14px; top: 10px; display: flex; gap: 5px; }
#main .pm-name { padding-right: 160px; }
#main .pm-small { width: 44px; }
#main .scroll-x { overflow-x: auto; }
#main .pm-sheet { display: flex; flex-direction: column; }
#log { background: #1b1d22; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid #0c0d10; }
.log-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #14151b; color: #eceff4; font: 800 13px var(--pm-head); letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid #0c0d10; }
#log-list { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
#log.ping .log-head { animation: ping .8s; }
@keyframes ping { 0% { background: var(--pm-gold-d); } 100% { background: #14151b; } }
.msg .pm-card { animation: drop .25s ease-out; }
@keyframes drop { from { transform: translateY(6px); opacity: 0; } }
#phone-tabs { display: none; }
#toast { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 20px); background: var(--pm-dark); color: #fff; border: 1px solid var(--pm-gold); padding: 9px 16px; border-radius: 3px; opacity: 0; pointer-events: none; transition: .2s; max-width: min(92vw, 560px); z-index: 50; font-size: 13px; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#log .hint { color: #8d94a8; }

/* ================= dialogs ================= */
dialog.pm-modal { border: 1px solid var(--pm-ink); border-top: 4px solid var(--pm-gold); padding: 0; background: var(--pm-paper); color: var(--pm-ink); width: min(520px, 94vw); max-height: 92vh; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
dialog.pm-modal.wide { width: min(680px, 96vw); }
dialog.pm-modal::backdrop { background: rgba(10,11,15,.7); }
.pm-modal form.pm-dialog { margin: 0; display: flex; flex-direction: column; max-height: 92vh; gap: 0; }
.pm-modal header { background: var(--pm-dark); color: #fff; padding: 8px 14px; }
.pm-modal header h2 { margin: 0; font: 800 18px var(--pm-head); letter-spacing: .08em; text-transform: uppercase; }
.pm-dlg-body { padding: 12px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.pm-dlg-body p { margin: 0; font-size: 13px; line-height: 1.4; }
.pm-modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--pm-rule); background: var(--pm-paper2); }
.pm-modal footer .ghost { cursor: pointer; font: 700 12px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--pm-rule); background: transparent; padding: 7px 16px; border-radius: 2px; color: var(--pm-ink); }
.pm-modal .pm-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pm-modal .pm-row label { font: 700 10px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; color: var(--pm-red); }
.pm-modal .pm-row label.full { flex: 1 1 100%; }
.pm-modal .pm-row label.chk { font: 400 13px var(--pm-ui); letter-spacing: 0; text-transform: none; color: var(--pm-ink); display: flex; gap: 6px; align-items: flex-start; }
.pm-modal input[type=text], .pm-modal input[type=number], .pm-modal select, .pm-modal textarea { font: 14px var(--pm-ui); padding: 4px 6px; border: 1px solid var(--pm-rule); background: #fff; color: var(--pm-ink); border-radius: 2px; }
.pm-modal input[type=number] { width: 62px; }
.pm-modal input[type=text] { flex: 1 1 140px; min-width: 0; }
.pm-modal textarea { width: 100%; font-family: var(--pm-body); }
.pm-modal select { max-width: 100%; }
.pm-modal .pm-note { font-size: 11.5px; color: var(--pm-mute); border-left: 3px solid var(--pm-gold); padding-left: 7px; }
.pm-modal .pm-note:empty { display: none; }
.pm-modal .checks { display: flex; flex-direction: column; gap: 5px; }
.pm-modal table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pm-modal th { font: 700 10px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; color: var(--pm-red); text-align: left; border-bottom: 2px solid var(--pm-ink); padding: 2px 6px; }
.pm-modal td { border-bottom: 1px dotted var(--pm-rule); padding: 3px 6px; }
.help { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--pm-gold); outline-offset: 1px; }

/* ================= phone and tablet ================= */
@media (max-width: 1100px) { #app { grid-template-columns: 200px minmax(0, 1fr) 300px; } }
@media (max-width: 820px) {
  #top { padding: 6px 12px; }
  #top p { display: none; }
  #top h1 { font-size: 17px; }
  #app { display: block; flex: 1 1 auto; position: relative; }
  #side, #main, #log { position: absolute; inset: 0; display: none; border: none; }
  body[data-view="people"] #side, body[data-view="sheet"] #main, body[data-view="log"] #log { display: flex; }
  #phone-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--pm-dark); border-top: 2px solid var(--pm-gold); flex: 0 0 auto; }
  #phone-tabs button { background: transparent; border: none; color: #9aa3b5; font: 800 14px var(--pm-head); letter-spacing: .16em; text-transform: uppercase; padding: 12px 0; cursor: pointer; }
  #phone-tabs button.active { color: var(--pm-gold); box-shadow: inset 0 3px 0 var(--pm-gold); }
  #main .pm-grid2 { grid-template-columns: 1fr; }
  #main .pm-attrs { grid-template-columns: repeat(2, 1fr); }
  #main .pm-name { padding-right: 0; font-size: 24px; }
  #main .pm-tools { position: static; }
  #main .pm-sheet { display: block; overflow-y: auto; }
  #main .pm-body { overflow: visible; }
  #main .pm-tabs { position: sticky; top: 0; z-index: 2; }
  #main .pm-head { gap: 5px; padding: 8px 12px; }
  #top h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
  #main .pm-body { padding: 10px 12px 18px; }
  #main .pm-tabs { overflow-x: auto; }
  #main .pm-tabs button { white-space: nowrap; padding: 10px 12px 8px; }
  .top-actions button { padding: 5px 8px; }
  #main button, .pm-modal button { min-height: 32px; }
}
@media print { #top, #side, #log, #phone-tabs, .pm-tools, .pm-actions, .pm-tabs { display: none !important; } #app { display: block; } #main { display: block; } body { background: #fff; } }

/* ================= shared rooms ================= */
.top-actions .room.live { background: #1f4a33; border-color: #46aa5a; color: #d8f5e2; }
.side-room { padding: 8px 12px 4px; border-top: 1px solid #0c0d10; font: 800 12px var(--pm-head); letter-spacing: .2em; text-transform: uppercase; color: var(--pm-gold); }
.side-room small { color: #8d94a8; letter-spacing: .1em; }
.remote-list { flex: 0 1 auto; max-height: 40%; }
.actor.remote .ic { color: #46aa5a; }
#main .ro-note { font: 700 10.5px var(--pm-head); letter-spacing: .18em; text-transform: uppercase; color: #46aa5a; }
#main.readonly input, #main.readonly select, #main.readonly textarea { pointer-events: none; opacity: .85; }
#main.readonly button:not([data-action="tab"]) { display: none; }
#chat { display: flex; gap: 6px; padding: 8px; background: #14151b; border-top: 1px solid #0c0d10; }
#chat[hidden], #chat-to[hidden] { display: none; }
#chat input, #chat select { background: #22242e; color: #eceff4; border: 1px solid #3a3d4a; border-radius: 2px; padding: 5px 7px; font: 13px var(--pm-ui); min-width: 0; }
#chat input { flex: 1; }
#chat select { max-width: 110px; }
#chat button { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--pm-gold-d); background: var(--pm-gold); color: #14151b; padding: 5px 12px; border-radius: 2px; }
.pm-card.chat { border-left-color: var(--pm-gold); }
.pm-modal input.big { font: 800 20px var(--pm-head); letter-spacing: .2em; text-transform: uppercase; }

/* ================= right pane: tabs, Exchange tracker, map ================= */
.pane { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.pane[hidden] { display: none !important; }
#rtabs { display: flex; gap: 2px; }
#rtabs button { cursor: pointer; font: 800 12px var(--pm-head); letter-spacing: .16em; text-transform: uppercase; background: transparent; color: #8d94a8; border: none; border-bottom: 3px solid transparent; padding: 3px 9px 4px; }
#rtabs button.active { color: var(--pm-gold); border-bottom-color: var(--pm-gold); }
#rtabs button:hover { color: #fff; }
.log-head { padding-top: 4px; padding-bottom: 4px; }
#pane-xchg, #pane-map { color: #e6e9f0; overflow-y: auto; }
.x-head { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #0c0d10; }
.x-title b { font: 800 22px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; color: var(--pm-gold); }
.x-title small, .x-hint { color: #8d94a8; font-size: 11.5px; }
.x-hint { padding: 8px 12px; margin: 0; line-height: 1.4; }
.x-btns { display: flex; flex-wrap: wrap; gap: 6px; }
#pane-xchg button, #pane-map button { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; border: 1px solid #3a3d4a; background: #22242e; color: #cfd6e6; border-radius: 2px; padding: 5px 10px; }
#pane-xchg button:hover, #pane-map button:hover { border-color: var(--pm-gold); color: #fff; }
#pane-xchg button.primary { background: var(--pm-red); border-color: #a33142; color: #fff; }
#pane-xchg button[disabled] { opacity: .3; cursor: default; }
.slots { list-style: none; margin: 0; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.slot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #20222a; border-left: 5px solid #4664dc; }
.slot.threat { border-left-color: #d4495a; }
.slot.named { border-left-color: #c9a227; }
.slot.other { border-left-color: #8d94a8; }
.slot.now { background: #343a4d; outline: 2px solid var(--pm-gold); }
.slot.acted { opacity: .5; }
.slot .who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.slot .who b { font: 700 15px var(--pm-head); letter-spacing: .05em; text-transform: uppercase; }
.slot .who small { color: #8d94a8; font-size: 11px; }
.slot .mv { display: flex; flex-direction: column; gap: 1px; }
.slot .mv button { padding: 0 6px; line-height: 1.1; }
.slot .act.on { background: #1f4a33; border-color: #46aa5a; }
.slot .state { font: 700 11px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; color: var(--pm-gold); }
.x-add { display: flex; gap: 5px; padding: 8px; }
.x-add select, .x-add input { background: #22242e; color: #eceff4; border: 1px solid #3a3d4a; border-radius: 2px; padding: 4px 6px; font: 12px var(--pm-ui); min-width: 0; }
.x-add select { flex: 1.2; } .x-add input { flex: 1; }
.m-bar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 8px; background: #14151b; border-bottom: 1px solid #0c0d10; }
.m-bar select, .m-bar input[type=number] { background: #22242e; color: #eceff4; border: 1px solid #3a3d4a; border-radius: 2px; padding: 4px 6px; font: 12px var(--pm-ui); max-width: 100%; }
.m-bar input[type=number] { width: 56px; }
.m-bar .chk { font: 12px var(--pm-ui); color: #cfd6e6; display: inline-flex; align-items: center; gap: 4px; }
.m-stage { position: relative; flex: 1; min-height: 240px; background: #0c0d10; }
#mapsvg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; }
#mapsvg .tk { cursor: pointer; }
#mapsvg .tk.hid { opacity: .45; }
#mapsvg .lbl { fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 5px; font-family: var(--pm-head); font-weight: 700; letter-spacing: .04em; }
#mapsvg .ini { fill: #14151b; font-family: var(--pm-head); font-weight: 800; }
.m-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.m-zoom button { background: rgba(20,21,27,.85); }
.m-name { position: absolute; left: 8px; top: 8px; background: rgba(20,21,27,.8); padding: 2px 8px; font: 700 11px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; color: var(--pm-gold); pointer-events: none; }
@media (max-width: 820px) { #log .log-head { gap: 4px; } #rtabs button { padding: 6px 8px; } }

/* ================= handouts ================= */
#pane-ho { color: #e6e9f0; overflow-y: auto; }
#pane-ho button { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; border: 1px solid #3a3d4a; background: #22242e; color: #cfd6e6; border-radius: 2px; padding: 5px 10px; }
#pane-ho button:hover { border-color: var(--pm-gold); color: #fff; }
#pane-ho button.on { background: #1f4a33; border-color: #46aa5a; }
.ho-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.ho { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #20222a; border-left: 5px solid #8d94a8; }
.ho.shown { border-left-color: #46aa5a; }
.ho img, .ho .ph { width: 44px; height: 44px; object-fit: cover; border: 1px solid #3a3d4a; background: #14151b; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #8d94a8; font-size: 22px; }
.ho .who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ho .who b { font: 700 15px var(--pm-head); letter-spacing: .05em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.ho .who small { color: #8d94a8; font-size: 11px; }
.ho .btns { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; max-width: 150px; }
.ho .ho-open { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; padding: 0; color: #e6e9f0; }
.handout-paper { background: #f1e9d2; color: #2b2418; border: 1px solid #cfc6b2; padding: 16px 20px; font: 15px/1.5 var(--pm-body); box-shadow: inset 0 0 30px rgba(120,90,30,.15); max-height: 62vh; overflow-y: auto; }
.handout-paper p { margin: 0 0 .8em; }
.handout-paper .ho-img { display: block; max-width: 100%; margin: 0 auto 12px; border: 1px solid #cfc6b2; }
.pm-modal input[type=file] { font: 12px var(--pm-ui); max-width: 100%; }
.pm-modal [data-clearimg] { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--pm-rule); background: transparent; padding: 4px 8px; }

/* ================= fog of war and measuring ================= */
.m-bar button.on { background: var(--pm-gold); border-color: var(--pm-gold-d); color: #14151b; }
.fogbar { border-top: 1px solid #0c0d10; }
.m-stage.tool-measure #mapsvg { cursor: crosshair; }
.m-stage.tool-reveal #mapsvg, .m-stage.tool-cover #mapsvg { cursor: cell; }

/* ================= turn timer and sound ================= */
#timer-chip { cursor: pointer; font: 800 15px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; background: #1f4a33; border: 1px solid #46aa5a; color: #d8f5e2; padding: 3px 12px; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
#timer-chip[hidden] { display: none; }
#timer-chip.paused { background: #22242e; border-color: #3a3d4a; color: #cfd6e6; }
#timer-chip.low { background: #5a1a22; border-color: #d4495a; color: #fff; animation: pulse .8s infinite alternate; }
@keyframes pulse { to { background: #7a1f2b; } }
.sound { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.sound button.off { color: #8d94a8; text-decoration: line-through; }
.sound input[type=range] { width: 72px; accent-color: var(--pm-gold); }
.x-timer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.x-timer .clk { font: 800 34px var(--pm-head); letter-spacing: .06em; color: #fff; min-width: 84px; }
.x-timer small { color: var(--pm-gold); font: 700 13px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; }
.x-timer.low .clk { color: #ff7a85; animation: pulse2 .8s infinite alternate; }
@keyframes pulse2 { to { opacity: .55; } }
.x-timer .tctl { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-left: auto; }
.x-timer .tctl select { background: #22242e; color: #eceff4; border: 1px solid #3a3d4a; border-radius: 2px; padding: 4px 6px; font: 12px var(--pm-ui); }
.x-timer .chk { font: 12px var(--pm-ui); color: #cfd6e6; display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 820px) { .sound input[type=range] { display: none; } #timer-chip { max-width: 30vw; font-size: 13px; padding: 3px 7px; } }

/* ================= conditions on the tracker ================= */
.slot { flex-wrap: wrap; }
.slot .conds { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; order: 5; }
.cond { display: inline-flex; align-items: center; gap: 2px; background: color-mix(in srgb, var(--sc, #8d94a8) 28%, #14151b); border: 1px solid var(--sc, #8d94a8); border-radius: 2px; padding: 0 2px 0 7px; }
.cond b { font: 800 12px var(--pm-head); letter-spacing: .08em; text-transform: uppercase; color: #fff; padding-right: 3px; }
#pane-xchg .cond button { padding: 0 6px; border: none; background: transparent; line-height: 1.5; font-size: 13px; }
#pane-xchg .cond button:hover { background: rgba(255,255,255,.15); }
#pane-xchg button.condadd { padding: 1px 8px; border-style: dashed; color: #8d94a8; }
.pm-conditions { border-left-color: #d63031; }

/* ================= Apply Hurt ================= */
.gm-only { display: none !important; }
body.is-gm .gm-only { display: inline-block !important; }
.hurtbtn, #pane-xchg .hurtdue { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; background: #7a1f2b; border: 1px solid #a33142; color: #fff; border-radius: 2px; padding: 1px 9px; margin-left: 4px; }
.hurtbtn:hover, #pane-xchg .hurtdue:hover { background: #962436; border-color: #d4495a; }
#pane-xchg .hurtdue { padding: 4px 9px; }

/* ================= handouts in two languages ================= */
.ho-langs { display: flex; justify-content: flex-end; }
.ho-langs button { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--pm-gold-d); background: var(--pm-gold); color: #14151b; border-radius: 2px; padding: 4px 12px; }
.ho-note:empty { display: none; }
.pm-modal .ho-other { border-top: 2px solid var(--pm-gold); padding-top: 6px; }

/* a card written in both languages shows only the reader's */
html[lang="es"] [data-bi] [lang="en"], html[lang="en"] [data-bi] [lang="es"] { display: none; }
.pm-modal [data-swap] { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--pm-rule); background: transparent; padding: 3px 9px; border-radius: 2px; margin-left: auto; }

/* a log card built in both languages (data-bi2 wraps an English and a Spanish copy): show the reader's */
html[lang="es"] [data-bi2] > [lang="en"], html[lang="en"] [data-bi2] > [lang="es"] { display: none; }

/* the character's words in the other language */
details.altlang { margin: 8px 0 4px; border: 1px dashed var(--pm-rule); padding: 4px 10px 8px; background: rgba(255,255,255,.3); }
details.altlang summary { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; color: var(--pm-red); padding: 3px 0; }

/* ================= map pings ================= */
#mapsvg .ping circle { fill: none; stroke: #c9a227; stroke-width: 7; transform-origin: 0 0; opacity: 0; animation: pingring 1.1s ease-out 3 both; }
#mapsvg .ping circle.dot { fill: #fff; stroke: #c9a227; stroke-width: 4; animation: pingdot 3.4s ease-out 1 both; }
@keyframes pingring { 0% { transform: scale(.15); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes pingdot { 0% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.m-stage.tool-ping #mapsvg { cursor: crosshair; }

#mapsvg .ping .plbl { font-family: var(--pm-head); font-weight: 800; letter-spacing: .06em; paint-order: stroke; stroke: #000; stroke-width: 6px; text-transform: uppercase; animation: pingdot 3.4s ease-out 1 both; }

/* ================= staying connected ================= */
#netbar { display: flex; align-items: center; justify-content: center; gap: 12px; background: #5a3a10; color: #ffe2b0; border-bottom: 2px solid var(--pm-warn); padding: 5px 12px; font: 700 13px var(--pm-head); letter-spacing: .08em; text-transform: uppercase; }
#netbar[hidden] { display: none; }
#netbar small { opacity: .75; }
#netbar button { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; border: 1px solid #ffe2b0; background: transparent; color: #ffe2b0; border-radius: 2px; padding: 3px 10px; }
.top-actions .room.warn { background: #5a3a10; border-color: var(--pm-warn); color: #ffe2b0; animation: pulse 1s infinite alternate; }
.who-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.who-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border: 1px solid var(--pm-rule); background: rgba(255,255,255,.5); }
.who-list button, .pm-modal [data-nettest] { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--pm-red); background: transparent; color: var(--pm-red); padding: 2px 9px; border-radius: 2px; }
.pm-modal [data-nettest] { border-color: var(--pm-ink); color: var(--pm-ink); padding: 4px 12px; }
.net-result div { margin: 2px 0; }

/* ================= data safety ================= */
#warnbar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 5px 12px; font: 700 13px var(--pm-head); letter-spacing: .06em; border-bottom: 2px solid; }
#warnbar[hidden] { display: none; }
#warnbar.warn { background: #3a3414; border-color: var(--pm-gold-d); color: #f3e3a0; }
#warnbar.bad { background: #5a1a22; border-color: #d4495a; color: #fff; }
#warnbar button { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 2px; padding: 3px 10px; }
.pm-modal h3 { font: 800 14px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; color: var(--pm-red); border-top: 2px solid var(--pm-gold); padding-top: 5px; margin: 10px 0 4px; }
.pm-modal [data-do], .who-list [data-restore] { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--pm-ink); background: transparent; color: var(--pm-ink); padding: 4px 12px; border-radius: 2px; }
.who-list [data-restore] { border-color: var(--pm-red); color: var(--pm-red); padding: 2px 9px; }
@media (max-width: 820px) { #b-export, #b-import { display: none; } }

/* ================= the character builder ================= */
dialog.wizard { width: min(720px, 98vw); }
.wizard .pm-dialog header h2 small { display: block; font: 600 12px var(--pm-ui); letter-spacing: .04em; text-transform: none; color: #c9d0e0; margin-top: 2px; }
.wz-bar { display: flex; gap: 6px; margin-top: 6px; }
.wz-bar .dot { width: 26px; height: 7px; border: none; border-radius: 4px; background: #3a3d4a; cursor: pointer; padding: 0; }
.wz-bar .dot.past { background: #8aa0c8; } .wz-bar .dot.now { background: var(--pm-gold); } .wz-bar .dot.bad { background: #d4495a; }
.wizard .pm-dlg-body { min-height: 300px; max-height: 66vh; }
.wz-lead { font: italic 14px var(--pm-body); color: var(--pm-mute); margin: 0 0 4px; }
.wz-field { display: flex; flex-direction: column; gap: 2px; }
.wz-field > span { font: 700 10px var(--pm-head); letter-spacing: .16em; text-transform: uppercase; color: var(--pm-red); }
.wz-field small { color: var(--pm-mute); font-size: 11.5px; }
.wz-field input, .wz-field textarea, .wz-field select { flex: 0 0 auto; font: 14px var(--pm-body); padding: 5px 7px; border: 1px solid var(--pm-rule); background: #fff; width: 100%; border-radius: 2px; }
.wz-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.wz-chk { font: 13px var(--pm-ui); display: flex; gap: 6px; align-items: flex-start; }
.wz-count { font: 700 13px var(--pm-head); letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; background: var(--pm-paper2); border-left: 4px solid var(--pm-gold); }
.wz-count b { font-size: 20px; } .wz-count.ok { border-left-color: var(--pm-ok); } .wz-count.bad { border-left-color: var(--pm-red); color: var(--pm-red); }
.wz-count small { text-transform: none; letter-spacing: 0; font: 11.5px var(--pm-ui); color: var(--pm-mute); }
.wz-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 10px; }
.wz-skills label { font: 13px var(--pm-ui); padding: 3px 6px; border: 1px solid var(--pm-rule); display: flex; gap: 6px; align-items: center; background: rgba(255,255,255,.5); }
.wz-skills label.on { border-color: var(--pm-gold-d); background: rgba(201,162,39,.18); }
.wz-row { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-bottom: 1px dotted var(--pm-rule); }
.wz-row .nm { flex: 1; font: 600 14px var(--pm-ui); } .wz-row small { color: var(--pm-mute); flex: 0 0 38%; font-size: 11.5px; }
.wz-row .ctl { display: inline-flex; align-items: center; gap: 8px; }
.wz-row .ctl b { min-width: 26px; text-align: center; font: 800 22px var(--pm-head); }
.wz-row .ctl button { width: 30px; height: 30px; border: 1px solid var(--pm-ink); background: transparent; font: 800 18px var(--pm-head); cursor: pointer; border-radius: 2px; line-height: 1; }
.wz-sins .wz-row { border-left: 5px solid var(--sc); padding-left: 8px; }
.wz-sins .nm b { font: 800 15px var(--pm-head); letter-spacing: .08em; text-transform: uppercase; color: var(--sc); filter: brightness(.8); }
.wz-issues { list-style: none; margin: 0; padding: 0; font: 12.5px var(--pm-ui); }
.wz-issues li { padding: 2px 0 2px 16px; position: relative; color: var(--pm-mute); }
.wz-issues li::before { content: "○"; position: absolute; left: 0; }
.wz-issues li.error { color: var(--pm-red); font-weight: 700; } .wz-issues li.error::before { content: "✖"; }
.wz-issues.soft:empty { display: none; }
.wz-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 14px var(--pm-ui); }
.wz-done { color: var(--pm-ok); font-weight: 700; }
.wizard footer .spacer { flex: 1; }
.wizard h4 { font: 800 14px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; color: var(--pm-red); margin: 6px 0 2px; }
.wizard hr { border: none; border-top: 1px solid var(--pm-rule); margin: 6px 0; }
@media (max-width: 560px) { .wz-two { grid-template-columns: 1fr; } .wz-row small { display: none; } dialog.wizard { max-height: 98vh; } }

.pm-modal.wizard .wz-field input[type=text], .pm-modal.wizard .wz-field select, .pm-modal.wizard .wz-field textarea { flex: 0 0 auto; width: 100%; }

/* ================= scenes and token info ================= */
.scenebar select { min-width: 150px; max-width: 100%; }
.scenebar .prep { color: #f3c47a; font: 700 12px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; }
.scenebar .live { color: #8fe0a8; font: 700 12px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; }
.scenebar .primary { background: var(--pm-red); border-color: #a33142; color: #fff; }
.tk-info { position: absolute; left: 8px; bottom: 8px; max-width: min(70%, 320px); background: rgba(20,21,27,.92); border: 1px solid #3a3d4a; border-left: 4px solid var(--pm-gold); padding: 6px 10px; font: 12.5px var(--pm-ui); color: #e6e9f0; z-index: 3; }
.tk-info > b { font: 800 16px var(--pm-head); letter-spacing: .08em; text-transform: uppercase; display: block; }
.tk-info .btns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.tk-info select { background: #22242e; color: #eceff4; border: 1px solid #3a3d4a; padding: 3px 5px; font: 12px var(--pm-ui); max-width: 100%; }
.tk-info button { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; border: 1px solid #3a3d4a; background: #22242e; color: #cfd6e6; border-radius: 2px; padding: 4px 9px; }
.tk-info button:hover { border-color: var(--pm-gold); color: #fff; }

/* ================= the journal ================= */
#pane-jr { color: #e6e9f0; overflow-y: auto; }
.jr-tabs { display: flex; border-bottom: 1px solid #0c0d10; }
.jr-tabs button { flex: 1; cursor: pointer; font: 800 12px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; background: transparent; color: #8d94a8; border: none; border-bottom: 3px solid transparent; padding: 7px 4px; }
.jr-tabs button.on { color: var(--pm-gold); border-bottom-color: var(--pm-gold); }
#pane-jr .m-bar button { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; border: 1px solid #3a3d4a; background: #22242e; color: #cfd6e6; border-radius: 2px; padding: 5px 10px; }
.jr-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.jr { background: #20222a; border-left: 5px solid #4664dc; }
.jr.recap { border-left-color: var(--pm-gold); } .jr.pinned { background: #2b2d38; }
.jr-open { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; background: transparent; border: none; color: #e6e9f0; padding: 7px 10px; cursor: pointer; }
.jr-open b { font: 700 15px var(--pm-head); letter-spacing: .05em; text-transform: uppercase; }
.jr-open small { color: #8d94a8; font-size: 11px; }
.jr-open .ex { color: #b9c0d0; font-size: 12px; }
.jr-acts button { cursor: pointer; font: 700 11px var(--pm-head); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--pm-ink); background: transparent; color: var(--pm-ink); padding: 4px 12px; border-radius: 2px; }

/* ---- Threat library ---- */
#pane-thr { color: #e6e9f0; overflow-y: auto; padding: 8px; }
#pane-thr h3 { margin: 4px 0; font: 700 12px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; }
.thr-top { background: #1c1e26; border: 1px solid #343744; border-radius: 3px; padding: 6px 10px; margin-bottom: 8px; }
.thr-enc, .thr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.thr-enc li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.thr-enc li > small { color: #aab; }
.thr-n { font-weight: 700; min-width: 2em; }
.thr-step { margin-left: auto; display: inline-flex; gap: 4px; }
.thr-step button, .thr-add { cursor: pointer; min-width: 28px; height: 28px; border: 1px solid #3a3d4a; background: #22242e; color: #cfd6e6; border-radius: 2px; font-weight: 700; }
.thr-sum { margin: 6px 0 2px; }
.thr-go { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 6px; }
.thr-go button { cursor: pointer; border: 1px solid #3a3d4a; background: #22242e; color: #cfd6e6; border-radius: 2px; padding: 5px 10px; }
.thr-go button.primary { background: #4664dc; border-color: #4664dc; color: #fff; font-weight: 700; }
.thr-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.thr-filters input[type=search] { flex: 1 1 140px; min-width: 0; }
.thr-filters select { flex: 1 1 110px; min-width: 0; }
.thr { background: #20222a; border-left: 5px solid #5a5f73; padding: 4px 6px; }
.thr-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.thr-name { flex: 1 1 160px; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; display: flex; flex-direction: column; padding: 2px; }
.thr-name small { color: #9aa; }
.thr-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.thr-more { padding: 4px 6px 8px; font-size: 13px; }
.thr-more p, .thr-more ul { margin: 4px 0; }
.thr-more ul { padding-left: 18px; }

/* ---- Random tables ---- */
#pane-tb { color: #e6e9f0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.tb { background: #1c1e26; border: 1px solid #343744; border-radius: 3px; padding: 6px 10px; }
.tb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tb h3 { margin: 4px 0; font: 700 12px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; }
.tb button { cursor: pointer; border: 1px solid #3a3d4a; background: #22242e; color: #cfd6e6; border-radius: 2px; padding: 4px 10px; }
.tb button.primary { background: #4664dc; border-color: #4664dc; color: #fff; font-weight: 700; }
.tb-res { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tb-res li { display: flex; gap: 8px; align-items: baseline; }
.tb-k { flex: 0 0 8.5em; color: #9aa; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.tb-v { flex: 1; }
.tb-res button { padding: 1px 6px; }
.tb-acts { display: flex; gap: 8px; }

/* ---- Clocks board ---- */
#pane-ck { color: #e6e9f0; overflow-y: auto; }
.ck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 8px; }
.ck-grid .pm-clockcard { background: #20222a; border: 1px solid #343744; border-radius: 3px; padding: 8px; text-align: center; }
.ck-grid .pm-clockcard.full { border-color: #d9453d; }
.ck-grid .pm-clockcard.hidden-clock { opacity: .6; border-style: dashed; }
.ck-grid .cq { font-size: 12px; color: #aab; margin-top: 4px; }
.ck-acts { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.ck-acts button { cursor: pointer; border: 1px solid #3a3d4a; background: #22242e; color: #cfd6e6; border-radius: 2px; padding: 2px 8px; }
.ck-acts button.on { background: #2c4a3a; }

/* ---- GM screen ---- */
#pane-sc { color: #e6e9f0; overflow-y: auto; padding: 8px; }
.sc-top input[type=search] { width: 100%; box-sizing: border-box; }
.sc { background: #1c1e26; border: 1px solid #343744; border-radius: 3px; margin: 8px 0; }
.sc-head { width: 100%; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; padding: 6px 10px; }
.sc-head h3 { margin: 0; font: 700 12px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; }
.sc-head h3::before { content: "\25B8  "; }
.sc.open .sc-head h3::before { content: "\25BE  "; }
.sc-body { padding: 0 10px 8px; font-size: 13px; }
.sc-body p { margin: 6px 0; }
.sc-table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12.5px; }
.sc-table th { text-align: left; color: #9aa; font-weight: 700; border-bottom: 1px solid #343744; padding: 3px 6px; }
.sc-table td { border-bottom: 1px solid #2a2d38; padding: 3px 6px; vertical-align: top; }
.sc-table td.k { font-weight: 700; }
.sc-table td, .sc-table th { overflow-wrap: anywhere; }

/* ---- Printing: only #print-area is printed, as black on white pages ---- */
#print-area { display: none; }
@media print {
  @page { size: A4; margin: 14mm; }
  body.printing > *:not(#print-area) { display: none !important; }
  body.printing { background: #fff !important; color: #000 !important; }
  body.printing #print-area { display: block !important; font: 11pt/1.4 Georgia, "Times New Roman", serif; color: #000; }
  .pr-page { page-break-after: always; break-after: page; }
  .pr-page:last-child { page-break-after: auto; break-after: auto; }
  .pr-page h1 { font: 700 20pt Georgia, serif; margin: 0 0 8pt; border-bottom: 2px solid #000; padding-bottom: 4pt; }
  .pr-page h2 { font: 700 10pt Georgia, serif; text-transform: uppercase; letter-spacing: .08em; margin: 10pt 0 4pt; border-bottom: 1px solid #888; }
  .pr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3pt 14pt; }
  .pr-f { display: flex; gap: 6pt; border-bottom: 1px solid #aaa; min-height: 15pt; align-items: baseline; }
  .pr-f b { font-size: 9pt; text-transform: uppercase; white-space: nowrap; }
  .pr-cols { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 14pt; }
  .pr-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14pt; }
  .pr-row { display: flex; justify-content: space-between; gap: 6pt; font-size: 10pt; }
  .pr-dots { letter-spacing: .15em; white-space: nowrap; }
  .pr-page ul { margin: 2pt 0; padding-left: 14pt; }
  .pr-paper { font-size: 12.5pt; line-height: 1.55; }
  .pr-img img { max-width: 100%; max-height: 120mm; }
  .pr-entry { break-inside: avoid; margin-bottom: 10pt; }
  .pr-by { margin: 0; font-size: 9pt; color: #444; }
  .pr-table { width: 100%; border-collapse: collapse; margin: 4pt 0; font-size: 9.5pt; }
  .pr-table th, .pr-table td { border: 1px solid #888; padding: 2pt 4pt; text-align: left; vertical-align: top; }
  .pr-screen .pr-sec { break-inside: avoid-page; }
  .pr-screen p { margin: 3pt 0; font-size: 9.5pt; }
}

/* ---- secret rolls ---- */
.msg.secret { border-left: 3px dashed #a77bd6; padding-left: 4px; }
.msg-acts { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 11px; color: #a77bd6; margin: 2px 0 6px; }
.msg-acts button { cursor: pointer; border: 1px solid #3a3d4a; background: #22242e; color: #cfd6e6; border-radius: 2px; padding: 2px 8px; }
#b-undo:disabled { opacity: .45; cursor: default; }

/* ---- Growth (Marks) ---- */
.pm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .pm-cols { grid-template-columns: 1fr; } }
.unlocks { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.unlocks li.dim { opacity: .55; }
.unlocks button, .pm-skills button[data-action=marksRaise] { cursor: pointer; }
.pm-skills button[data-action=marksRaise]:disabled { opacity: .5; cursor: default; }

/* ---- map drawings and notes ---- */
.markbar .swatches { display: inline-flex; gap: 4px; align-items: center; }
.markbar .sw { width: 18px; height: 18px; padding: 0; border: 2px solid #3a3d4a; border-radius: 50%; cursor: pointer; }
.markbar .sw.on { border-color: #fff; box-shadow: 0 0 0 2px #c9a227; }
.m-stage.tool-draw svg, .m-stage.tool-pin svg { cursor: crosshair; }
.m-stage.tool-erase svg { cursor: not-allowed; }
.mk.pn { cursor: pointer; }
.mk.pn .lbl { fill: #fff; stroke: #000; stroke-width: 5px; paint-order: stroke; font-weight: 700; }

/* ---- walls and automatic vision ---- */
.m-stage.tool-wall svg, .m-stage.tool-door svg { cursor: crosshair; }
.wl.door { cursor: pointer; }
.visbar input[type=number] { width: 4em; }
.m-stage.tool-area svg { cursor: crosshair; }
.markbar input[type=number], .markbar select { max-width: 6em; }
.side-foot .finish { background: #2c4a3a; border-color: #46aa5a; }

/* ================= wide screens: the map is the centre, the sheet floats above it ================= */
#stage { display: none; }
.win-bar { display: none; }
@media (min-width: 821px) {
  #stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #0c0d10; }
  #stage .pane { flex: 1; }
  #main.win { position: fixed; z-index: 30; left: var(--wx, 250px); top: var(--wy, 70px); width: var(--ww, 560px); height: var(--wh, 70vh);
    min-width: 340px; min-height: 200px; max-width: 98vw; max-height: 96vh; resize: both; overflow: hidden; display: flex; flex-direction: column;
    border: 2px solid var(--pm-gold); border-radius: 6px; box-shadow: 0 12px 44px rgba(0, 0, 0, .6); }
  #main.win.min { height: auto; min-height: 0; resize: none; width: min(var(--ww, 560px), 360px); }
  #main.win.moving { box-shadow: 0 18px 60px rgba(0, 0, 0, .75); opacity: .96; }
  .win-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; background: var(--pm-dark); color: #eceff4; cursor: grab; user-select: none; touch-action: none; flex: 0 0 auto; border-bottom: 2px solid var(--pm-gold); min-height: 40px; }
  #main.win.moving .win-bar { cursor: grabbing; }
  .win-av { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; background: #33364a center top / cover no-repeat; }
  .win-av:empty { display: block; }
  .win-title { font: 800 15px var(--pm-head); letter-spacing: .08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .win-sub { color: #aab3c8; font: 600 11px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
  .win-btns { margin-left: auto; display: inline-flex; gap: 4px; }
  .win-btn { cursor: pointer; width: 28px; height: 28px; padding: 0; border: 1px solid #3a3d4a; background: #22242e; color: #cfd6e6; border-radius: 3px; font: 700 15px/1 var(--pm-ui); }
  .win-btn:hover { background: #2d3040; border-color: var(--pm-gold); color: #fff; }
  #main.win .win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--pm-paper); }
  #main.win.min .win-body { display: none; }
  #main.win .win-body > .pm-sheet, #main.win .win-body > .empty { flex: 1; min-height: 0; overflow: auto; }
}
@media print { #stage, .win-bar { display: none !important; } #main.win { position: static; width: auto; height: auto; resize: none; box-shadow: none; border: none; } }

/* ---- pictures ---- */
.av { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: #33364a; color: #cfd6e6; font: 800 10px var(--pm-head); }
.av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.actor .av { margin-right: 6px; }
.slot .av { width: 30px; height: 30px; }
.pm-card-head .av { width: 22px; height: 22px; margin-right: 6px; vertical-align: middle; }
.pm-card-head .av:empty { display: none; }
#main .pm-hrow { display: flex; gap: 12px; align-items: flex-start; }
#main .pm-hcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
#main .pm-portrait { width: 84px; height: 104px; flex: 0 0 auto; padding: 0; overflow: hidden; border: 2px solid var(--pm-gold); border-radius: 4px; background: #22242e; cursor: pointer; display: block; }
#main .pm-portrait.ro { cursor: default; }
#main .pm-portrait.ro:empty { display: none; }
#main .pm-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
#main .pm-portrait .ph { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #8d94a8; font: 800 26px var(--pm-head); }
#main .pm-portrait .ph small { font: 600 9px var(--pm-head); letter-spacing: .12em; text-transform: uppercase; }
.art { display: flex; flex-wrap: wrap; gap: 6px; }
.art-pick { cursor: pointer; border: 2px solid transparent; border-radius: 4px; }
.art-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.art-pick img { width: 54px; height: 54px; object-fit: cover; display: block; border-radius: 3px; background: #22242e; }
.art-pick:has(input:checked) { border-color: var(--pm-gold); }
.art-pick:has(input:focus-visible) { outline: 3px solid var(--pm-gold); }
.pr-portrait img { float: right; width: 34mm; height: 44mm; object-fit: cover; border: 1px solid #000; margin: 0 0 4mm 6mm; }
@media (max-width: 820px) { #main .pm-portrait { width: 64px; height: 80px; } }
.actor .av { grid-row: 1 / 3; width: 28px; height: 28px; margin-right: 4px; }
.actor .ic { align-self: start; }

.cropper { margin: 6px 0 10px; }
.cropper canvas { display: block; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto 8px; border: 1px solid #3a3d4a; border-radius: 4px; cursor: grab; touch-action: none; background: #14151b; }
.cropper canvas:active { cursor: grabbing; }
.cropper input[type=range] { flex: 1; min-width: 120px; }
.thr-pic { width: 34px; height: 42px; object-fit: cover; border-radius: 3px; border: 1px solid #3a3d4a; flex: 0 0 auto; background: #22242e; }
.thr-pic.sm { width: 26px; height: 32px; }
/* ================= right-hand tabs wrap instead of being cut off ================= */
.log-head { flex-wrap: wrap; gap: 4px 8px; }
#rtabs { flex: 1 1 100%; flex-wrap: wrap; row-gap: 2px; }
#rtabs button { padding: 3px 7px 4px; letter-spacing: .1em; }

/* ================= the manual reader ================= */
#manual { position: fixed; top: 61px; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 40; display: flex; flex-direction: column; background: var(--pm-paper); color: var(--pm-ink); border-left: 4px solid var(--pm-gold); box-shadow: -8px 0 28px rgba(0,0,0,.5); font-family: var(--pm-ui); }
#manual[hidden] { display: none; }
.man-head { display: flex; gap: 6px; align-items: center; padding: 8px 10px; background: var(--pm-dark); flex: 0 0 auto; }
.man-head .man-home { font: 800 12px var(--pm-head); letter-spacing: .16em; text-transform: uppercase; color: var(--pm-gold); background: transparent; border: 1px solid var(--pm-gold); padding: 6px 10px; cursor: pointer; }
.man-head .man-q { flex: 1 1 auto; min-width: 0; padding: 6px 8px; font: 14px var(--pm-ui); border: 1px solid #555; background: #fff; color: #111; }
.man-head .man-x { font-size: 22px; line-height: 1; background: transparent; color: #eceff4; border: none; cursor: pointer; padding: 2px 8px; }
.man-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px 28px; line-height: 1.5; font-size: 15px; }
.man-title { margin: 4px 0 8px; font: 800 20px var(--pm-head); letter-spacing: .08em; text-transform: uppercase; }
.man-jump { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.man-jump button, .man-nav button { font: 12.5px var(--pm-ui); padding: 4px 8px; border: 1px solid var(--pm-rule); background: var(--pm-paper2); color: var(--pm-ink); cursor: pointer; }
.man-jump button.on { border-color: var(--pm-red); color: var(--pm-red); }
.man-jump button:hover, .man-nav button:hover:not(:disabled) { border-color: var(--pm-gold); }
.man-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }
.man-nav button:disabled { visibility: hidden; }
.man-text h3.man-sec { margin: 22px 0 6px; padding-top: 6px; border-top: 2px solid var(--pm-rule); font: 800 16px var(--pm-head); letter-spacing: .06em; scroll-margin-top: 6px; }
.man-text h3.man-sec.flash { animation: manflash 1.8s ease-out; }
@keyframes manflash { 0% { background: rgba(201,162,39,.45); } 100% { background: transparent; } }
.man-text h2, .man-text h4, .man-text h5 { margin: 14px 0 4px; font-family: var(--pm-head); }
.man-text p { margin: 8px 0; }
.man-text ul, .man-text ol { margin: 8px 0; padding-left: 22px; }
.man-text li { margin: 3px 0; }
.man-text blockquote { margin: 10px 0; padding: 6px 12px; border-left: 4px solid var(--pm-gold); background: var(--pm-paper2); }
.man-text blockquote p { margin: 4px 0; }
.man-table { overflow-x: auto; margin: 10px 0; }
.man-table table { border-collapse: collapse; font-size: 13.5px; min-width: 100%; }
.man-table th, .man-table td { border: 1px solid var(--pm-rule); padding: 4px 7px; text-align: left; vertical-align: top; }
.man-table th { background: var(--pm-paper2); }
.man-text code { background: var(--pm-paper2); padding: 0 3px; }
.man-link { font: inherit; color: var(--pm-red); background: none; border: none; border-bottom: 1px dotted var(--pm-red); padding: 0; cursor: pointer; }
.man-toc, .man-secs { list-style: none; margin: 0; padding: 0; }
.man-toc > li { margin: 6px 0; }
.man-part { width: 100%; text-align: left; font: 800 14px var(--pm-head); letter-spacing: .06em; padding: 8px 10px; border: 1px solid var(--pm-rule); background: var(--pm-paper2); color: var(--pm-ink); cursor: pointer; }
.man-secs { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px 0 0 10px; }
.man-secs button { font: 12px var(--pm-ui); padding: 2px 7px; border: 1px solid var(--pm-rule); background: transparent; color: var(--pm-mute); cursor: pointer; }
.man-secs button:hover, .man-part:hover { border-color: var(--pm-gold); color: var(--pm-ink); }
.man-hits { list-style: none; margin: 0; padding: 0; }
.man-hits button { display: block; width: 100%; text-align: left; padding: 8px 10px; margin: 0 0 6px; border: 1px solid var(--pm-rule); background: var(--pm-paper2); color: var(--pm-ink); cursor: pointer; font: 14px var(--pm-ui); }
.man-hits button:hover { border-color: var(--pm-gold); }
.man-hits small { color: var(--pm-mute); margin-left: 6px; }
.man-hits span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--pm-mute); }
.man-body .hint { color: var(--pm-mute); font-size: 13px; }
/* the "?" on the sheet */
.man-ref { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 5px; padding: 0; vertical-align: middle; font: 800 11px var(--pm-ui); letter-spacing: 0; border-radius: 50%; border: 1px solid var(--pm-mute); background: transparent; color: var(--pm-mute); cursor: pointer; text-transform: none; }
.man-ref:hover { border-color: var(--pm-red); color: var(--pm-red); }
@media (max-width: 820px) { #manual { top: 0; width: 100vw; border-left: none; } }
@media print { #manual { display: none !important; } }
#log .man-ref, #pane-xchg .man-ref { width: 17px; height: 17px; padding: 0; margin-left: 6px; font: 800 11px var(--pm-ui); letter-spacing: 0; border-radius: 50%; border: 1px solid #8d94a8; background: transparent; color: #8d94a8; }
#log .man-ref:hover, #pane-xchg .man-ref:hover { border-color: var(--pm-gold); color: #fff; background: transparent; }
.sc { position: relative; }
.sc-head { padding-right: 36px; }
.sc > .man-ref { position: absolute; top: 6px; right: 8px; margin: 0; }
.rowref { display: flex; gap: 4px; align-items: center; }
.rowref > button:first-child { flex: 1 1 auto; }
.rowref .man-ref { flex: 0 0 auto; border-color: #8d94a8; color: #8d94a8; margin: 0; }
.rowref .man-ref:hover { border-color: var(--pm-gold); color: #fff; }
.wizard .man-ref { vertical-align: middle; }
.side-foot .man-ref, #stage .man-ref { width: 17px; height: 17px; padding: 0; border-radius: 50%; font: 800 11px var(--pm-ui); letter-spacing: 0; background: transparent; }
#stage .man-ref { border: 1px solid #8d94a8; color: #8d94a8; margin-left: 6px; }

/* ================= the City panel ================= */
#manual, #city { position: fixed; top: 61px; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 40; display: flex; flex-direction: column; background: var(--pm-paper); color: var(--pm-ink); border-left: 4px solid var(--pm-gold); box-shadow: -8px 0 28px rgba(0,0,0,.5); font-family: var(--pm-ui); }
#city[hidden] { display: none; }
@media (max-width: 820px) { #city { top: 0; width: 100vw; border-left: none; } }
@media print { #city { display: none !important; } }
.man-head span.man-home { font: 800 12px var(--pm-head); letter-spacing: .16em; text-transform: uppercase; color: var(--pm-gold); padding: 6px 10px; border: 1px solid var(--pm-gold); }
.city-card { border: 1px solid var(--pm-rule); border-left: 4px solid var(--pm-gold); background: var(--pm-paper2); padding: 8px 12px; margin-bottom: 12px; }
.city-card h2 { margin: 0 0 2px; font: 800 18px var(--pm-head); letter-spacing: .06em; text-transform: uppercase; }
.city-card h2 small { font: 600 12px var(--pm-ui); letter-spacing: 0; color: var(--pm-mute); text-transform: none; margin-left: 6px; }
.city-card p { margin: 6px 0; }
.city-card .city-meta { color: var(--pm-mute); font-size: 13px; }
.city-card button { font: 12.5px var(--pm-ui); padding: 4px 9px; border: 1px solid var(--pm-rule); background: var(--pm-paper); color: var(--pm-ink); cursor: pointer; }
.city-card button:hover { border-color: var(--pm-gold); }
.city-map { display: grid; grid-template-columns: 1fr 1.2fr 1fr; grid-template-areas: ". n ." "w c e" ". s ." "x x x"; gap: 8px; }
.city-n { grid-area: n; } .city-w { grid-area: w; } .city-c { grid-area: c; } .city-e { grid-area: e; } .city-s { grid-area: s; } .city-x { grid-area: x; }
.city-zone { border: 1px solid var(--pm-rule); background: var(--pm-paper); padding: 4px 6px 8px; height: 100%; box-sizing: border-box; }
.city-c .city-zone { border-color: var(--pm-gold); background: var(--pm-paper2); }
.city-zone h3 { margin: 2px 0 6px; font: 700 11px var(--pm-head); letter-spacing: .16em; text-transform: uppercase; color: var(--pm-mute); }
.city-tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.city-tile { width: 42px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--pm-rule); background: var(--pm-paper2); color: var(--pm-ink); cursor: pointer; padding: 0; }
.city-tile b { font: 800 19px var(--pm-head); line-height: 1; }
.city-tile small { font: 10px var(--pm-ui); color: var(--pm-mute); }
.city-tile:hover { border-color: var(--pm-gold); }
.city-tile.on { background: var(--pm-dark); border-color: var(--pm-gold); color: var(--pm-gold); }
.city-tile.on small { color: #cfd6e6; }
.city-tile.fallen { border-style: dashed; border-color: var(--pm-red); }
.city-tile.unknown { border-style: dotted; }
.city-tile.dim { opacity: .25; }
@media (max-width: 480px) { .city-map { grid-template-columns: 1fr 1fr; grid-template-areas: "c c" "n n" "w e" "s s" "x x"; } }

/* ================= the Moon look (default; the header's Look button switches back to the classic paper one) =================
   Dark panels, sodium-lamp gold, red for danger, cut corners and wide capitals: nearer the games' own interface than the rulebook's paper. */
html:not([data-skin="classic"]) {
  --pm-ink: #ece7d8; --pm-paper: #14151a; --pm-paper2: #1c1e25; --pm-rule: #363a4d; --pm-mute: #a09a8a;
  --pm-red: #e0495a; --pm-gold: #f2b632; --pm-gold-d: #b9830f; --pm-blue: #7a98e0; --pm-dark: #07080b; --pm-ok: #4fbf7f; --pm-warn: #e39a45;
  color-scheme: dark;
}
html:not([data-skin="classic"]) body { background: #0b0c10 repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); }
html:not([data-skin="classic"]) #top { background: #060709; border-bottom: 2px solid var(--pm-gold); box-shadow: 0 2px 18px rgba(242,182,50,.25); }
html:not([data-skin="classic"]) #top h1 { letter-spacing: .22em; color: #f4efe0; }
html:not([data-skin="classic"]) #top h1::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .5em; background: var(--pm-gold); transform: rotate(45deg); }
html:not([data-skin="classic"]) #top p { color: #8d8a7e; }
html:not([data-skin="classic"]) #side, html:not([data-skin="classic"]) #log { background: #0f1015; }
html:not([data-skin="classic"]) #side { border-right: 1px solid #262936; }
html:not([data-skin="classic"]) #log { border-left: 1px solid #262936; }
html:not([data-skin="classic"]) .log-head { background: #08090c; border-bottom: 1px solid #262936; }
html:not([data-skin="classic"]) #stage { background: #0b0c10; }
/* cut corners on the controls */
html:not([data-skin="classic"]) .top-actions button, html:not([data-skin="classic"]) .side-actions button, html:not([data-skin="classic"]) .side-foot button, html:not([data-skin="classic"]) .log-head button,
html:not([data-skin="classic"]) #main button:not(.man-ref):not(.pm-portrait), html:not([data-skin="classic"]) .pm-modal button {
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); border-radius: 0;
}
html:not([data-skin="classic"]) .top-actions button, html:not([data-skin="classic"]) .side-actions button, html:not([data-skin="classic"]) .side-foot button, html:not([data-skin="classic"]) .log-head button { background: #14161d; border-color: #2e3242; color: #d8d3c4; }
html:not([data-skin="classic"]) .top-actions button:hover, html:not([data-skin="classic"]) .side-actions button:hover, html:not([data-skin="classic"]) .side-foot button:hover, html:not([data-skin="classic"]) .log-head button:hover { background: #20232e; border-color: var(--pm-gold); color: var(--pm-gold); }
html:not([data-skin="classic"]) #rtabs button.active { color: var(--pm-gold); border-bottom-color: var(--pm-gold); }
/* the sheet window */
html:not([data-skin="classic"]) #main.win { border-color: var(--pm-gold); box-shadow: 0 10px 40px rgba(0,0,0,.7), 0 0 0 1px #000; }
html:not([data-skin="classic"]) #main .pm-head { background: #0b0c10; }
html:not([data-skin="classic"]) #main .pm-name { color: #f4efe0; }
html:not([data-skin="classic"]) #main button { background: #1c1e25; color: var(--pm-ink); border-color: var(--pm-rule); }
html:not([data-skin="classic"]) #main button:hover { border-color: var(--pm-gold); color: var(--pm-gold); background: #232632; }
html:not([data-skin="classic"]) #main .pm-tabs button.active { color: var(--pm-gold); border-bottom-color: var(--pm-gold); background: transparent; }
html:not([data-skin="classic"]) #main h3 { color: var(--pm-gold); }
html:not([data-skin="classic"]) #main input, html:not([data-skin="classic"]) #main select, html:not([data-skin="classic"]) #main textarea,
html:not([data-skin="classic"]) .pm-modal input[type=text], html:not([data-skin="classic"]) .pm-modal input[type=number], html:not([data-skin="classic"]) .pm-modal select, html:not([data-skin="classic"]) .pm-modal textarea,
html:not([data-skin="classic"]) .wz-field input, html:not([data-skin="classic"]) .wz-field textarea, html:not([data-skin="classic"]) .wz-field select, html:not([data-skin="classic"]) .man-head .man-q {
  background: #0d0e13; color: var(--pm-ink); border-color: var(--pm-rule); color-scheme: dark;
}
html:not([data-skin="classic"]) #main .pm-grid2 textarea, html:not([data-skin="classic"]) #main .pm-notes-area, html:not([data-skin="classic"]) #main .pm-attr, html:not([data-skin="classic"]) #main .pm-clockcard,
html:not([data-skin="classic"]) details.altlang, html:not([data-skin="classic"]) .wz-skills label { background: rgba(255,255,255,.04); }
html:not([data-skin="classic"]) #main .pm-attr { border-color: var(--pm-rule); }
html:not([data-skin="classic"]) .pm-die { background: #1c1e25; }
html:not([data-skin="classic"]) .pm-die.one { background: #3a1519; }
html:not([data-skin="classic"]) .pm-verdict, html:not([data-skin="classic"]) .pm-voicecard.loud { background: #2a1519; }
html:not([data-skin="classic"]) dialog.pm-modal { border-color: var(--pm-gold); }
html:not([data-skin="classic"]) .man-text blockquote, html:not([data-skin="classic"]) .city-card { background: #1c1e25; }
html:not([data-skin="classic"]) .city-tile.on small { color: #14151a; }
html:not([data-skin="classic"]) .city-tile.on { background: var(--pm-gold); color: #14151a; }
html:not([data-skin="classic"]) .man-ref { border-color: var(--pm-mute); }
html:not([data-skin="classic"]) ::selection { background: var(--pm-gold); color: #000; }
html:not([data-skin="classic"]) * { scrollbar-color: #3a3d4f #0f1015; }
@media print { html:not([data-skin="classic"]) body { background: #fff; } }

.city-svg { width: 100%; height: auto; display: block; background: #07080b; border: 1px solid var(--pm-rule); }
.city-cell path { fill: rgba(120, 22, 32, .55); stroke: #c2394a; stroke-width: 2; cursor: pointer; transition: fill .15s; }
.city-cell:hover path, .city-cell:focus path { fill: rgba(170, 36, 50, .75); outline: none; }
.city-cell text { text-anchor: middle; fill: #f1b8bd; pointer-events: none; font-family: var(--pm-head); }
.city-cell .l { font-size: 48px; font-weight: 700; } .city-cell .n { font-size: 17px; letter-spacing: .04em; text-transform: uppercase; fill: #d98a92; }
.city-cell.fallen path { stroke-dasharray: 8 6; }
.city-cell.on path { fill: rgba(242, 182, 50, .85); stroke: #fff2c4; stroke-width: 3; }
.city-cell.on text { fill: #14151a; }
.city-cell.dim { opacity: .3; }
.city-z { margin: 10px 0 4px; color: var(--pm-mute); font-size: 13px; display: flex; align-items: center; gap: 8px; }

/* the map's own picture carries the letters; the cells above it only catch clicks and show the chosen District */
.city-svg { background: #000; }
.city-cell path { fill: transparent; stroke: none; }
.city-cell:hover path, .city-cell:focus path { fill: rgba(242, 182, 50, .16); }
.city-cell.on path { fill: rgba(242, 182, 50, .30); stroke: #f2b632; stroke-width: 4; }
.city-cell.fallen path { stroke-dasharray: none; }
.city-cell.dim path { fill: rgba(0, 0, 0, .65); }
.city-cell.dim { opacity: 1; }

/* the "?" is always a small round button, even inside the sheet's own button and label rules (which are more specific) */
#main button.man-ref, #log button.man-ref, #side button.man-ref, dialog button.man-ref {
  width: 17px; height: 17px; min-width: 17px; min-height: 17px; padding: 0; margin-left: 5px; border-radius: 50%; clip-path: none; align-self: flex-start; flex: 0 0 17px;
  display: inline-flex; align-items: center; justify-content: center; font: 800 11px var(--pm-ui); letter-spacing: 0; text-transform: none; line-height: 1;
}
#main label > button.man-ref { align-self: flex-start; }

/* on a phone the header buttons wrap onto more rows instead of running off the screen */
@media (max-width: 820px) {
  #top { flex-wrap: wrap; row-gap: 6px; }
  #top h1 { max-width: none; }
  .top-actions { flex-wrap: wrap; gap: 4px; width: 100%; }
  .top-actions .sound { flex: 1 1 100%; }
}

/* phone: one Menu button instead of a wall of header buttons */
.menu-btn { display: none; }
@media (max-width: 820px) {
  #top { flex-wrap: wrap; row-gap: 4px; }
  #top h1 { flex: 1 1 auto; min-width: 0; }
  .menu-btn { display: inline-block; cursor: pointer; font: 800 12px var(--pm-head); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--pm-gold); background: transparent; color: var(--pm-gold); padding: 6px 12px; }
  body.menu-open .menu-btn { background: var(--pm-gold); color: #14151a; }
  .top-actions { display: none; }
  body.menu-open .top-actions { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
}
@media (max-width: 820px) { #top .brand { flex: 1 1 0; min-width: 0; } #top h1 { flex: none; max-width: 100%; font-size: 15px; letter-spacing: .12em; } #top { flex-wrap: wrap; align-items: center; } }

/* the header keeps the title on one line; the buttons wrap among themselves when the window is narrow */
@media (min-width: 821px) {
  #top .brand { flex: 0 1 auto; min-width: 0; }
  #top h1 { white-space: nowrap; }
  #top p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
  .top-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
}
@media (min-width: 821px) {
  .top-actions { gap: 4px; }
  .top-actions button { padding: 5px 8px; letter-spacing: .08em; }
  #vol { width: 56px; }
  html:not([data-skin="classic"]) #top h1 { letter-spacing: .14em; }
  #top h1 { font-size: 20px; }
}