/* Holotable: a dark hologram-table world. Amber for actions, cyan for live/hologram state.
   Layout: top bar, then a view; the table view is map + side rail on desktop, tabbed panes on phones. */
:root {
  --bg: #0a1120;
  --panel: #111a2c;
  --panel-2: #172238;
  --line: #26334d;
  --ink: #e2e8f2;
  --mute: #8d9bb4;
  --accent: #f2b33d;
  --accent-ink: #1b1405;
  --holo: #5ccbff;
  --good: #4cc38a;
  --warn: #f0a04b;
  --bad: #ef5d55;
  --font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 8px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font-body); -webkit-font-smoothing: antialiased; }
#app { height: 100%; display: flex; flex-direction: column; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; margin: 0; text-wrap: balance; }
h2 { font-size: 22px; } h3 { font-size: 17px; } h4 { font-size: 14px; text-transform: uppercase; color: var(--mute); letter-spacing: .08em; }
a { color: var(--holo); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--holo); outline-offset: 2px; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mute { color: var(--mute); }
.small { font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.boot { margin: auto; text-align: center; color: var(--mute); }
.boot-mark { font: 700 32px var(--font-display); letter-spacing: .3em; color: var(--holo); }

/* buttons & inputs */
.btn { border: 1px solid var(--line); background: var(--panel-2); border-radius: var(--r); padding: 7px 12px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.btn:hover { border-color: var(--mute); }
.btn.pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.pri:hover { filter: brightness(1.08); }
.btn.holo { border-color: var(--holo); color: var(--holo); background: transparent; }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); }
.btn.sm { padding: 3px 8px; font-size: 13px; }
.btn.on { background: color-mix(in srgb, var(--holo) 20%, var(--panel-2)); border-color: var(--holo); color: var(--holo); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.link { background: none; border: 0; color: var(--holo); padding: 0; text-decoration: underline; text-underline-offset: 2px; }
input[type=text], input[type=number], input[type=search], select, textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 10px; min-width: 0;
}
textarea { width: 100%; min-height: 80px; resize: vertical; }
input[type=number] { width: 70px; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mute); }
.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 12px; background: var(--panel-2); }
.chip.on { border-color: var(--accent); color: var(--accent); }
.chip.holo { border-color: var(--holo); color: var(--holo); }
.chip.bad { border-color: var(--bad); color: var(--bad); }
.chip.good { border-color: var(--good); color: var(--good); }
button.chip { cursor: pointer; }

/* top bar */
.top { display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.brand { font: 700 18px var(--font-display); letter-spacing: .22em; color: var(--holo); }
.brand small { color: var(--mute); letter-spacing: .1em; font-size: 11px; margin-left: 6px; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 6px 12px; border-radius: var(--r); text-decoration: none; color: var(--mute); font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; }
.nav a.on { color: var(--ink); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--accent); }
.status { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--mute); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); display: inline-block; }
.dot.live { background: var(--good); box-shadow: 0 0 8px var(--good); }
.peer { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--panel); margin-left: -6px; display: inline-block; object-fit: cover; }
.banner { padding: 8px 16px; background: color-mix(in srgb, var(--warn) 15%, var(--panel)); border-bottom: 1px solid var(--line); font-size: 14px; }

/* page scaffolds */
.page { flex: 1; overflow: auto; padding: 18px 16px 40px; }
.wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.card.tight { padding: 10px; }
.empty { border: 1px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center; color: var(--mute); }

/* character list */
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.charcard { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; text-align: left; }
.charcard:hover { border-color: var(--accent); }
.avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 20px var(--font-display); color: var(--accent-ink); background-size: cover; background-position: center; border: 2px solid var(--line); }
.avatar.lg { width: 84px; height: 84px; font-size: 32px; }

/* builder */
.steps { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.step { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 12px; white-space: nowrap; font-size: 13px; color: var(--mute); }
.step.on { border-color: var(--accent); color: var(--ink); }
.step.done { color: var(--good); }
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.pickitem { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.pickitem:hover { border-color: var(--mute); }
.pickitem.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pickitem b { font-family: var(--font-display); font-size: 15px; }
.detail { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; max-height: 60vh; overflow: auto; }
.rules { max-width: 72ch; }
.rules p { margin: 0 0 .6em; }
.rules h3, .rules h4, .rules h5 { margin: .9em 0 .3em; color: var(--accent); font-size: 15px; text-transform: none; letter-spacing: .02em; }
.rules table { border-collapse: collapse; font-size: 13px; margin: .5em 0; display: block; overflow-x: auto; }
.rules td, .rules th { border: 1px solid var(--line); padding: 3px 6px; vertical-align: top; }
.rules ul { padding-left: 20px; margin: 0 0 .6em; }
.rl { color: var(--holo); border-bottom: 1px dotted var(--holo); cursor: pointer; font-family: var(--font-mono); }
.abil-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .abil-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.abil { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.abil .k { font: 600 12px var(--font-display); letter-spacing: .1em; color: var(--mute); }
.abil .m { font: 600 24px var(--font-mono); }
.abil .s { font: 500 13px var(--font-mono); color: var(--mute); }
.pending { border-left: 3px solid var(--warn); padding: 6px 10px; background: color-mix(in srgb, var(--warn) 8%, var(--panel)); border-radius: 0 8px 8px 0; font-size: 14px; }

/* sheet */
.sheet { display: flex; flex-direction: column; gap: 12px; }
.sheet-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.vitals { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.vital { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; }
.vital .k { font: 600 11px var(--font-display); letter-spacing: .1em; color: var(--mute); text-transform: uppercase; }
.vital .v { font: 600 22px var(--font-mono); }
button.vital:hover, button.abil:hover { border-color: var(--accent); }
.hpbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--good); }
.bar.mid > i { background: var(--warn); } .bar.low > i { background: var(--bad); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 8px 12px; color: var(--mute); font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.tabs button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.list { display: flex; flex-direction: column; }
.li { display: flex; gap: 8px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.li:last-child { border-bottom: 0; }
.li.click { cursor: pointer; } .li.click:hover { background: var(--panel-2); }
.rollbtn { font-family: var(--font-mono); font-weight: 600; min-width: 46px; justify-content: center; }
.skills { columns: 2 220px; column-gap: 16px; }
.skills .li { break-inside: avoid; padding: 4px; }
.pdot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--mute); display: inline-block; flex: none; }
.pdot.p { background: var(--accent); border-color: var(--accent); }
.pdot.e { background: var(--holo); border-color: var(--holo); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--holo); }
details.feat { border-bottom: 1px solid var(--line); padding: 6px 2px; }
details.feat summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
details.feat summary::-webkit-details-marker { display: none; }
details.feat[open] summary { color: var(--accent); }

/* table view */
.table { flex: 1; display: grid; grid-template-columns: 1fr 380px; min-height: 0; }
.mapwrap { position: relative; overflow: hidden; background: #060b15; touch-action: none; min-height: 0; }
.mapworld { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mapbg { position: absolute; left: 0; top: 0; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.mapgrid { position: absolute; inset: 0; pointer-events: none; }
.fog { position: absolute; left: 0; top: 0; pointer-events: none; }
.tok { position: absolute; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--font-display); color: #fff; background-size: cover; background-position: center; border: 2px solid var(--holo); box-shadow: 0 2px 8px #0009; touch-action: none; user-select: none; }
.tok.mine { border-color: var(--accent); }
.tok.hidden { opacity: .45; border-style: dashed; }
.tok.turn { box-shadow: 0 0 0 3px var(--accent), 0 0 18px var(--accent); }
.tok.bloodied { border-color: var(--bad); }
.tok .hp { position: absolute; left: 6%; right: 6%; bottom: -7px; height: 5px; border-radius: 3px; background: #000a; overflow: hidden; }
.tok .hp i { display: block; height: 100%; background: var(--good); }
.tok .lbl { position: absolute; top: 100%; margin-top: 7px; font: 600 11px var(--font-body); white-space: nowrap; background: #000b; padding: 0 5px; border-radius: 4px; pointer-events: none; }
.tok.ghost { opacity: .6; pointer-events: none; border-style: dotted; }
.maptools { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 5; max-width: calc(100% - 20px); }
.maptools .btn:not(.pri):not(.on) { background: color-mix(in srgb, var(--panel) 92%, transparent); }
.mapzoom { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 5; }
.ping { position: absolute; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 3px solid var(--accent); animation: ping 1.4s ease-out forwards; pointer-events: none; }
@keyframes ping { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ping { animation: none; opacity: .8; } }
.ruler { position: absolute; pointer-events: none; }
.selrect { position: absolute; border: 2px dashed var(--holo); background: color-mix(in srgb, var(--holo) 12%, transparent); pointer-events: none; }
.rail { border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.rail .tabs { padding: 0 8px; flex: none; }
.railbody { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.popover { position: absolute; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; width: 270px; box-shadow: 0 12px 32px #000a; display: flex; flex-direction: column; gap: 8px; }
.mobtabs { display: none; }
@media (max-width: 900px) {
  .table { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .rail { border-left: 0; }
  .table[data-pane="map"] .rail { display: none; }
  .table:not([data-pane="map"]) .mapwrap { display: none; }
  .rail .tabs { display: none; }
  .mobtabs { display: flex; border-top: 1px solid var(--line); background: var(--panel); }
  .mobtabs button { flex: 1; background: none; border: 0; padding: 10px 4px; color: var(--mute); font: 600 12px var(--font-display); letter-spacing: .05em; }
  .mobtabs button.on { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
}

/* log */
.log { display: flex; flex-direction: column-reverse; gap: 8px; }
.msg { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.msg.secret { border-style: dashed; border-color: var(--holo); }
.msg .who { font: 600 13px var(--font-display); color: var(--accent); }
.msg .tot { font: 600 22px var(--font-mono); }
.msg .tot.crit { color: var(--good); } .msg .tot.fumble { color: var(--bad); }
.msg .brk { font: 500 12px var(--font-mono); color: var(--mute); word-break: break-all; }
.dicetray { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding: 10px 12px; flex: none; }
.dice { display: flex; gap: 4px; flex-wrap: wrap; }
.dice .btn { padding: 4px 8px; font-family: var(--font-mono); font-size: 13px; }

/* initiative */
.init .li { gap: 10px; }
.init .li.cur { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.init .ini { font: 600 18px var(--font-mono); width: 34px; text-align: center; }

/* statblock */
.stat { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.stat .ab { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); text-align: center; gap: 3px; font-family: var(--font-mono); font-size: 12px; }
.stat .ab .btn { padding: 3px 0; min-width: 0; justify-content: center; font-size: 12px; white-space: normal; }
.stat .ab b { display: block; font-family: var(--font-display); color: var(--mute); font-size: 11px; }
.stat hr { border: 0; border-top: 1px solid var(--accent); opacity: .5; margin: 4px 0; width: 100%; }

/* compendium */
.comp { display: grid; grid-template-columns: 200px 320px 1fr; gap: 12px; min-height: 0; }
.comp .cats { display: flex; flex-direction: column; gap: 2px; }
.comp .cats button { text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 8px; color: var(--mute); }
.comp .cats button.on { background: var(--panel-2); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.comp .results { max-height: 75vh; overflow: auto; }
@media (max-width: 900px) { .comp { grid-template-columns: 1fr; } .comp .cats { flex-direction: row; overflow-x: auto; } .comp .results { max-height: 40vh; } }

/* modal */
.modal-bg { position: fixed; inset: 0; background: #000b; display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; width: min(720px, 100%); max-height: 88vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.toast { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 14px; z-index: 60; max-width: 90vw; box-shadow: 0 8px 24px #000a; }
.ctable { border-collapse: collapse; font-size: 13px; width: 100%; }
.ctable th, .ctable td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
.ctable th { font: 600 11px var(--font-display); letter-spacing: .06em; color: var(--mute); text-transform: uppercase; white-space: nowrap; }
.dice3d { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 70; }
.maptint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
.mapsvg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.tok.sel { outline: 2px dashed var(--holo); outline-offset: 3px; }
.tok.intpl { box-shadow: 0 0 0 3px #f2b33d88, 0 2px 8px #0009; }
.tok.turn { animation: turnpulse 1.6s ease-in-out infinite; }
@keyframes turnpulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 0 10px var(--accent); } 50% { box-shadow: 0 0 0 5px var(--accent), 0 0 26px var(--accent); } }
.tok .badges { position: absolute; top: -6px; right: -8px; display: flex; flex-direction: column; gap: 1px; }
.tok .badges span { font: 700 9px var(--font-mono); background: var(--bad); color: #fff; border-radius: 6px; padding: 0 3px; line-height: 13px; box-shadow: 0 1px 3px #0008; }
.tok .target { position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed var(--holo); pointer-events: none; }
.tok .target.mine { border: 3px solid var(--bad); }
.tok .target.mine::before, .tok .target.mine::after { content: ""; position: absolute; background: var(--bad); }
.tok .target.mine::before { left: 50%; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; opacity: .7; }
.tok .target.mine::after { top: 50%; left: -8px; right: -8px; height: 2px; margin-top: -1px; opacity: .7; }
.tok .dist { position: absolute; bottom: 100%; margin-bottom: 6px; font: 700 13px var(--font-mono); color: var(--accent); background: #000c; padding: 1px 6px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.float { position: absolute; transform: translate(-50%, -100%); font: 700 22px var(--font-mono); color: var(--bad); text-shadow: 0 2px 4px #000, 0 0 2px #000; pointer-events: none; animation: floatup 1.6s ease-out forwards; z-index: 6; }
.float.good { color: var(--good); }
@keyframes floatup { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -46px; } }
@media (prefers-reduced-motion: reduce) { .float, .tok.turn { animation: none; } }
.maphint { position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%); background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--holo); color: var(--ink); border-radius: 10px; padding: 6px 12px; font-size: 13px; z-index: 5; max-width: 90%; text-align: center; }
.maptools select { padding: 3px 6px; font-size: 13px; }
.applyrow { border-top: 1px dashed var(--line); padding-top: 4px; }
.fog { z-index: 2; }
.ping, .ruler, .selrect { z-index: 4; }
.pagegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 420px; overflow: auto; }
.pagethumb { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 12px; }
.pagethumb:hover { border-color: var(--accent); }
.pagethumb img { width: 100%; border-radius: 4px; }
.tokmenu { position: absolute; left: 10px; top: 52px; z-index: 12; width: min(340px, calc(100% - 20px)); max-height: calc(100% - 110px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 12px 32px #000a; }
.tokmenu-list { overflow: auto; min-height: 60px; }
.tokmenu .li[draggable="true"] { cursor: grab; }
.actionbar { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 9; display: flex; gap: 10px; align-items: center; background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid var(--accent); border-radius: 12px; padding: 8px 10px; max-width: calc(100% - 20px); box-shadow: 0 10px 28px #000a; }
.turnbanner { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 10px; align-items: center; background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 14px; white-space: nowrap; }
.turnbanner.mine { border-color: var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.pin { position: absolute; z-index: 5; width: 26px; height: 32px; border: 0; padding: 0; background: none; cursor: pointer; transform-origin: 50% 100%; }
.pin span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: var(--holo); color: #04121c; font: 700 12px var(--font-display); box-shadow: 0 2px 6px #000a; }
.pin.secret span { background: var(--warn); border: 2px dashed #fff8; }
.dropzone { position: absolute; inset: 10px; border: 3px dashed var(--holo); border-radius: 16px; display: grid; place-items: center; font: 600 20px var(--font-display); color: var(--holo); background: #05101e99; z-index: 20; pointer-events: none; }
@media (max-width: 900px) { .actionbar { bottom: 52px; } .turnbanner { top: auto; bottom: 6px; } .maptools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .maptools > * { flex: none; } .tokmenu { top: 48px; } }
/* overrides & badges */
.ovr { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: var(--holo); color: #04121c; font: 700 10px var(--font-mono); margin-left: 4px; vertical-align: middle; }
.good-t { color: var(--good); } .bad-t { color: var(--bad); }
.levelready { border-left-color: var(--accent); display: flex; gap: 10px; align-items: center; }
.saverow { border-top: 1px dashed var(--line); padding-top: 4px; gap: 4px; }
.applyrow-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.sndpop { right: 12px; top: 46px; position: fixed; width: 240px; }
/* game inventory */
.slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.slot { background: var(--panel); border: 1px dashed var(--line); border-radius: 12px; padding: 8px; min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: var(--mute); }
.slot.filled { border-style: solid; border-color: var(--accent); color: var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel)); }
.slot.stat { border-style: solid; color: var(--ink); }
.slot-k { font: 600 10px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.slot-n { font-size: 12px; line-height: 1.2; }
.bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.itemcard { position: relative; aspect-ratio: 1; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rar) 22%, var(--panel-2)), var(--panel)); border: 1.5px solid var(--rar); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; color: var(--ink); }
.itemcard:hover, .itemcard.sel { box-shadow: 0 0 0 2px var(--accent); }
.itemcard-n { font-size: 11px; line-height: 1.15; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.itemcard-q { position: absolute; right: 6px; bottom: 4px; font-size: 11px; color: var(--accent); }
.itemcard-eq { position: absolute; left: 6px; top: 4px; font: 700 10px var(--font-mono); background: var(--accent); color: var(--accent-ink); border-radius: 4px; padding: 0 4px; }
.itemdetail { background: var(--panel-2); border: 1.5px solid var(--rar); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.itemdetail-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--rar); color: var(--rar); background: var(--panel); }
.lootbox { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
/* level up */
.levelup { position: relative; }
.levelup-head { text-align: center; }
.levelup-head h2 { font-size: 44px; color: var(--accent); text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent); }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* phone play mode */
.playwrap { overflow: auto; padding: 12px; }
.play { gap: 10px; }
.play .big { font-size: 17px; padding: 14px; justify-content: space-between; width: 100%; }
.play-atk { display: flex; }
.play-turn { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 600 16px var(--font-display); }
.play-turn.mine { border-color: var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.play-hp { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.play-hpnum { font-size: 26px; }
.play-hpctl input { width: 100px; font-size: 18px; padding: 10px; }
.play-hpctl .btn { flex: 1; }
.play-last { display: flex; justify-content: space-between; background: var(--panel); border-radius: 8px; padding: 6px 10px; }
@media (max-width: 900px) { .table[data-pane="play"] .rail { display: none; } }
/* modification workbench */
.workbench{border-color:color-mix(in srgb,var(--holo) 40%,var(--line))}
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.modslot{border:1px dashed var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:64px}
.modslot.full{border-style:solid;border-color:var(--rar,var(--line));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rar,transparent) 25%,transparent)}
.modslot.sel{outline:2px solid var(--accent)}
.modslot-n{font-weight:600;cursor:pointer;color:var(--rar,inherit)}
.modslot .slot-k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.itemcard-att,.itemcard-mods{position:absolute;bottom:4px;font-size:11px;color:var(--holo)}
.itemcard-att{left:6px}.itemcard-mods{right:6px}
.li.on{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.rulebook mark{background:color-mix(in srgb,var(--accent) 45%,transparent);color:inherit;border-radius:3px}
.rulebook table{border-collapse:collapse;margin:8px 0}.rulebook td,.rulebook th{border:1px solid var(--line);padding:3px 8px}

/* =====================================================================
   HOLOTABLE DESIGN SYSTEM v4 — "Holo Glass"
   A modern Star Wars datapad: deep-space depth, frosted glass panels,
   luminous holographic accents, clean sentence-case typography.
   ===================================================================== */
@font-face { font-family: "Orbitron"; src: url(../fonts/orbitron-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url(../fonts/orbitron-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #05070c;
  --glass: rgba(17, 23, 36, .62);
  --glass-2: rgba(28, 36, 54, .62);
  --glass-3: rgba(40, 50, 74, .66);
  --solid: #0e1320;
  --edge: rgba(150, 190, 255, .10);
  --edge-2: rgba(150, 190, 255, .18);
  --edge-3: rgba(160, 205, 255, .30);
  --ink: #eef2fb;
  --ink-2: #b9c3d8;
  --mute: #8390aa;
  --dim: #5d6a84;
  --cyan: #5ad1ff;
  --blue: #6b8cff;
  --violet: #a77bff;
  --holo: var(--cyan);
  --holo-grad: linear-gradient(120deg, #5ad1ff 0%, #6b8cff 55%, #a77bff 100%);
  --holo-soft: linear-gradient(120deg, rgba(90, 209, 255, .16), rgba(107, 140, 255, .12) 55%, rgba(167, 123, 255, .14));
  --amber: #ffb648; --amber-bg: rgba(255, 182, 72, .12);
  --red: #ff5a6a; --red-bg: rgba(255, 90, 106, .12);
  --green: #46e0a0; --green-bg: rgba(70, 224, 160, .11);
  --cyan-bg: rgba(90, 209, 255, .12);
  /* legacy aliases */
  --panel: var(--glass); --panel-2: var(--glass-2); --line: var(--edge-2); --accent: var(--cyan); --accent-ink: #061018;
  --good: var(--green); --warn: var(--amber); --bad: var(--red);
  --font-display: "Orbitron", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Inter", system-ui, sans-serif;  /* numbers use tabular figures, not a terminal face */
  --r: 10px; --r-lg: 16px; --r-xl: 20px;
  --blur: blur(18px) saturate(140%);
  --shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 12px 40px rgba(0, 0, 0, .35);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
  --glow: 0 0 0 1px rgba(90, 209, 255, .35), 0 8px 28px rgba(90, 160, 255, .28);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --side-w: 248px;
  color-scheme: dark;
}

/* ---------- base ---------- */
body {
  font: 14.5px/1.55 var(--font-body); color: var(--ink); letter-spacing: -.006em; font-feature-settings: "cv11", "ss01";
  background:
    radial-gradient(900px 600px at 92% -8%, rgba(90, 160, 255, .20), transparent 62%),
    radial-gradient(800px 600px at -6% 108%, rgba(167, 123, 255, .16), transparent 60%),
    radial-gradient(600px 400px at 55% 115%, rgba(90, 209, 255, .08), transparent 60%),
    linear-gradient(180deg, #060912, #04060b 70%);
  background-attachment: fixed;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .35;
  background-image: radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 78% 14%, #cfe3ff, transparent), radial-gradient(1px 1px at 42% 66%, #fff, transparent), radial-gradient(1px 1px at 88% 72%, #e6d9ff, transparent), radial-gradient(1px 1px at 24% 88%, #fff, transparent), radial-gradient(1px 1px at 62% 38%, #cfe3ff, transparent); }
#app { height: 100%; }
h1, h2, h3, h4 { text-transform: none; letter-spacing: -.01em; text-wrap: balance; }
h1 { font: 600 18px/1.2 var(--font-body); }
h2 { font: 700 21px/1.25 var(--font-body); letter-spacing: -.02em; }
h3 { font: 600 15.5px/1.35 var(--font-body); }
h4 { font: 600 13px/1.4 var(--font-body); color: var(--ink-2); display: block; }
h4::before { content: none; }
p { margin: 0 0 .6em; }
a { color: var(--cyan); text-decoration: none; }
.small { font-size: 13px; } .mute { color: var(--mute); }
.micro { font: 500 12px/1.3 var(--font-body); color: var(--mute); letter-spacing: 0; text-transform: none; }
.eyebrow { display: inline-block; font: 600 12.5px var(--font-body); background: var(--holo-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 600; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ico { flex: none; display: block; }
::selection { background: rgba(107, 140, 255, .4); }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(90, 209, 255, .7); border-radius: var(--r); }
* { scrollbar-width: thin; scrollbar-color: rgba(150, 190, 255, .2) transparent; }

/* glass surface helper: gradient hairline border + frosted fill */
.card, .charcard, .pickitem, .vital, .abil, .detail, .msg, .modal, .popover, .unit, .qa, .deck-hero, .sheet-head, .itemdetail, .tokmenu, .actionbar, .turnbanner, .side-char, .steps, .ta-list, .readout {
  background: linear-gradient(var(--glass), var(--glass)) padding-box, linear-gradient(150deg, rgba(160, 205, 255, .26), rgba(160, 205, 255, .05) 38%, rgba(167, 123, 255, .16)) border-box;
  border: 1px solid transparent; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}

/* ---------- shell ---------- */
.shell { height: 100%; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
.shell.side-min { --side-w: 76px; }
.side { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 14px 14px; background: rgba(8, 11, 19, .55); backdrop-filter: var(--blur); border-right: 1px solid var(--edge); min-height: 0; overflow: hidden; }
.side-brand { display: flex; align-items: center; gap: 12px; padding: 2px 6px 18px; min-height: 48px; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; color: #061018; border-radius: 12px; background: var(--holo-grad); box-shadow: 0 6px 20px rgba(107, 140, 255, .45); flex: none; }
.brand { font: 700 15px var(--font-display); letter-spacing: .18em; color: var(--ink); white-space: nowrap; }
.brand small { font: 600 10px var(--font-body); letter-spacing: .04em; margin-left: 6px; background: var(--holo-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 12px; color: var(--ink-2); font-weight: 500; white-space: nowrap; position: relative; transition: background .2s var(--ease), color .2s; }
.side-nav a:hover { background: rgba(150, 190, 255, .06); color: var(--ink); text-decoration: none; }
.side-nav a.on { color: var(--ink); background: var(--holo-soft); box-shadow: inset 0 0 0 1px rgba(150, 190, 255, .16); }
.side-nav a.on::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--holo-grad); box-shadow: 0 0 12px rgba(90, 209, 255, .8); }
.side-nav a.on .ico { color: var(--cyan); filter: drop-shadow(0 0 6px rgba(90, 209, 255, .6)); }
.side-char { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; color: var(--ink); min-width: 0; }
.side-char:hover { text-decoration: none; box-shadow: var(--glow); }
.side-char .avatar { width: 36px; height: 36px; font-size: 15px; }
.side-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 4px 0; }
.side-nav + .side-foot { margin-top: auto; }
.side-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.side-toggle { width: 30px; height: 30px; display: grid; place-items: center; background: rgba(150, 190, 255, .06); border: 1px solid var(--edge-2); border-radius: 10px; color: var(--mute); }
.side-toggle:hover { color: var(--ink); border-color: var(--edge-3); }
.side-min .side-brand .brand, .side-min .side-nav a span, .side-min .side-char > .col, .side-min .side-status span:last-child { display: none; }
.side-min .side-nav a { justify-content: center; padding: 0; }
.side-min .side-char { justify-content: center; padding: 8px; }
.side-min .side-foot { flex-direction: column; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.hdr { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 28px; flex: none; z-index: 10; position: relative; }
.hdr-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hdr-sub { font-size: 12.5px; color: var(--mute); }
.hdr-brand, .hdr-nav { display: none; }
.status { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--mute); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(150, 190, 255, .06); border: 1px solid var(--edge-2); color: var(--ink-2); white-space: nowrap; font-size: 12.5px; font-weight: 500; }
.pill.dm { color: #ffd896; border-color: rgba(255, 182, 72, .35); background: var(--amber-bg); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); display: inline-block; flex: none; }
.dot.live { background: var(--green); box-shadow: 0 0 0 4px rgba(70, 224, 160, .16), 0 0 10px rgba(70, 224, 160, .6); }
.iconbtn { width: 38px; height: 38px; display: grid; place-items: center; background: rgba(150, 190, 255, .06); border: 1px solid var(--edge-2); border-radius: 12px; color: var(--ink-2); transition: all .2s var(--ease); }
.iconbtn:hover { color: var(--ink); border-color: var(--edge-3); box-shadow: var(--glow); }
.banner { margin: 0 28px 10px; padding: 10px 14px; border-radius: 12px; font-size: 13px; color: var(--ink-2); background: linear-gradient(90deg, var(--amber-bg), rgba(255, 182, 72, .03)); border: 1px solid rgba(255, 182, 72, .22); flex: none; }
.page { padding: 8px 28px 56px; }
.wrap { gap: 20px; }

/* ---------- components ---------- */
.card { border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); position: relative; }
.card.tight { padding: 12px 14px; border-radius: 14px; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-h h4 { font-size: 15px; color: var(--ink); font-weight: 600; }
.detail { border-radius: 14px; padding: 16px; }
.empty { border: 1px dashed var(--edge-3); border-radius: var(--r-lg); padding: 28px; color: var(--mute); background: rgba(150, 190, 255, .03); }
.pending { border: 1px solid rgba(255, 182, 72, .25); border-radius: 12px; background: var(--amber-bg); padding: 9px 14px; font-size: 13.5px; }
/* buttons */
.btn { height: 36px; padding: 0 15px; border-radius: var(--r); border: 1px solid var(--edge-2); background: rgba(150, 190, 255, .07); color: var(--ink); font: 500 13.5px var(--font-body); gap: 8px; justify-content: center; text-decoration: none; transition: all .2s var(--ease); }
.btn:hover { background: rgba(150, 190, 255, .12); border-color: var(--edge-3); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 9px; gap: 6px; }
.btn.pri { background: var(--holo-grad); border-color: transparent; color: #050b16; font-weight: 600; box-shadow: 0 8px 24px -6px rgba(107, 140, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn.pri:hover { filter: brightness(1.08) saturate(1.1); box-shadow: 0 10px 30px -6px rgba(107, 140, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn.holo { background: var(--holo-soft); border-color: rgba(90, 209, 255, .35); color: #d6efff; }
.btn.holo:hover { box-shadow: var(--glow); }
.btn.on { background: var(--holo-soft); border-color: rgba(90, 209, 255, .55); color: #e3f4ff; box-shadow: 0 0 0 1px rgba(90, 209, 255, .25) inset, 0 0 18px rgba(90, 209, 255, .15); }
.btn.danger { color: #ffb3ba; border-color: rgba(255, 90, 106, .38); background: var(--red-bg); }
.btn.danger:hover { border-color: var(--red); box-shadow: 0 0 18px rgba(255, 90, 106, .25); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.link { color: var(--cyan); font-weight: 500; text-decoration: none; } .link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* fields */
input[type=text], input[type=number], input[type=search], select, textarea {
  height: 38px; background: rgba(6, 9, 16, .55); border: 1px solid var(--edge-2); border-radius: var(--r); padding: 0 12px; color: var(--ink); font-size: 14px; transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea { height: auto; padding: 10px 12px; }
input[type=search] { padding-left: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238390aa' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px 50%; }
select { padding-right: 32px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238390aa' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 12px) 50%; }
select[size] { height: auto; padding: 4px; background-image: none; }
select option { background: var(--solid); }
input:hover, select:hover, textarea:hover { border-color: var(--edge-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(90, 209, 255, .7); background-color: rgba(6, 9, 16, .75); box-shadow: 0 0 0 4px rgba(90, 209, 255, .14); }
input::placeholder, textarea::placeholder { color: var(--dim); }
input[type=checkbox] { accent-color: var(--blue); width: 16px; height: 16px; }
input[type=range] { accent-color: var(--blue); }
input[type=file] { color: var(--mute); font-size: 13px; }
input[type=file]::file-selector-button { height: 32px; margin-right: 10px; padding: 0 14px; border: 1px solid var(--edge-2); border-radius: 9px; background: rgba(150, 190, 255, .08); color: var(--ink); font: 500 13px var(--font-body); cursor: pointer; }
label.f { font-size: 12.5px; color: var(--mute); gap: 6px; font-weight: 500; }
/* typeahead */
.ta { position: relative; min-width: 0; flex: 1 1 200px; display: flex; }
.ta > input { width: 100%; }
.ta-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); max-height: 320px; overflow: auto; background: linear-gradient(rgba(14, 19, 31, .97), rgba(14, 19, 31, .97)) padding-box, linear-gradient(150deg, rgba(160, 205, 255, .3), rgba(167, 123, 255, .2)) border-box; }
.ta-opt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 11px; border: 0; background: none; border-radius: 9px; text-align: left; color: var(--ink); font-size: 14px; }
.ta-opt.hi { background: var(--holo-soft); box-shadow: inset 0 0 0 1px rgba(90, 209, 255, .25); }
.ta-sub { font-size: 12px; color: var(--mute); white-space: nowrap; }
.tokens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tokens .chip .link { margin-left: 4px; font-size: 11px; color: inherit; opacity: .7; }
/* chips & tags */
.chip { border-radius: 999px; border: 1px solid var(--edge-2); background: rgba(150, 190, 255, .06); color: var(--ink-2); padding: 4px 11px; font-size: 12.5px; font-weight: 500; transition: all .2s var(--ease); }
button.chip:hover { border-color: var(--edge-3); color: var(--ink); background: rgba(150, 190, 255, .1); }
.chip.on { background: var(--holo-soft); border-color: rgba(90, 209, 255, .5); color: #e3f4ff; box-shadow: 0 0 14px rgba(90, 209, 255, .14); }
.chip.holo { background: rgba(107, 140, 255, .12); border-color: rgba(107, 140, 255, .35); color: #cdd7ff; }
.chip.good { background: var(--green-bg); border-color: rgba(70, 224, 160, .38); color: #a9f1d1; }
.chip.bad { background: var(--red-bg); border-color: rgba(255, 90, 106, .38); color: #ffb3ba; }
.tag { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--font-body); padding: 5px 9px; border-radius: 999px; border: 1px solid var(--edge-2); color: var(--ink-2); background: rgba(150, 190, 255, .06); }
.tag.live { color: #ffc0c6; border-color: rgba(255, 90, 106, .4); background: var(--red-bg); }
.tag.warn { color: #ffd896; border-color: rgba(255, 182, 72, .35); background: var(--amber-bg); }
/* tabs: segmented control */
.tabs { gap: 4px; border: 0; padding: 4px; background: rgba(6, 9, 16, .45); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--edge); width: max-content; max-width: 100%; }
.tabs button { padding: 7px 14px; font: 500 13px var(--font-body); color: var(--mute); border-radius: 9px; text-transform: none; letter-spacing: 0; transition: all .2s var(--ease); }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); background: var(--holo-soft); box-shadow: inset 0 0 0 1px rgba(90, 209, 255, .3), 0 4px 14px rgba(90, 160, 255, .15); }
.tabs button.on::after { content: none; }
.rail .tabs { width: auto; margin: 10px 10px 0; }
/* lists */
.li { padding: 9px 8px; border-bottom: 1px solid var(--edge); }
.li.click { border-radius: 10px; border-bottom-color: transparent; }
.li.click:hover, .li.on { background: rgba(150, 190, 255, .07); }
.li.cur { background: var(--holo-soft); box-shadow: inset 0 0 0 1px rgba(90, 209, 255, .25); }
details.feat { border-bottom: 1px solid var(--edge); padding: 10px 2px; }
details.feat[open] summary { color: var(--cyan); }
.rules { color: var(--ink-2); }
.rules h3, .rules h4, .rules h5 { font-family: var(--font-body); color: #bcd4ff; font-size: 14.5px; }
.rl { color: var(--cyan); border-bottom: 1px dotted rgba(90, 209, 255, .6); font-family: var(--font-body); font-weight: 600; }
/* bars */
.bar { height: 8px; border-radius: 999px; background: rgba(150, 190, 255, .08); box-shadow: none; overflow: hidden; }
.bar > i { border-radius: 999px; background: linear-gradient(90deg, #2fc98a, #6ff0bf); box-shadow: 0 0 12px rgba(70, 224, 160, .55); }
.bar.mid > i { background: linear-gradient(90deg, #ff9f2e, #ffd27a); box-shadow: 0 0 12px rgba(255, 182, 72, .5); }
.bar.low > i { background: linear-gradient(90deg, #ff3b5c, #ff8a8f); box-shadow: 0 0 12px rgba(255, 90, 106, .6); }
/* overlays */
.modal-bg { background: rgba(3, 5, 10, .6); backdrop-filter: blur(8px); }
.modal { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 24px; background: linear-gradient(rgba(14, 19, 31, .94), rgba(14, 19, 31, .94)) padding-box, linear-gradient(150deg, rgba(160, 205, 255, .3), rgba(167, 123, 255, .2)) border-box; }
.popover { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); background: linear-gradient(rgba(14, 19, 31, .96), rgba(14, 19, 31, .96)) padding-box, linear-gradient(150deg, rgba(160, 205, 255, .3), rgba(167, 123, 255, .2)) border-box; }
.sndpop { top: 66px; right: 24px; }
.toast { background: rgba(18, 24, 38, .95); backdrop-filter: var(--blur); border: 1px solid var(--edge-3); border-radius: 14px; box-shadow: var(--shadow-lg), 0 0 24px rgba(90, 160, 255, .2); font-weight: 500; }
.avatar { font-family: var(--font-body); font-weight: 700; box-shadow: 0 0 0 2px rgba(5, 7, 12, .9), 0 0 0 3.5px rgba(90, 209, 255, .55), 0 6px 18px rgba(90, 160, 255, .3); }

/* ---------- home ---------- */
.deck-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding: 28px; border-radius: var(--r-xl); position: relative; overflow: hidden; box-shadow: var(--shadow); }
.deck-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px 240px at 88% 0%, rgba(90, 209, 255, .22), transparent 70%), radial-gradient(420px 240px at 60% 120%, rgba(167, 123, 255, .18), transparent 70%); }
.deck-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(160, 205, 255, .14); box-shadow: 0 0 0 30px rgba(160, 205, 255, .03), 0 0 0 60px rgba(160, 205, 255, .02); pointer-events: none; }
.deck-hero > * { position: relative; z-index: 1; }
.deck-hero h2 { font-size: 26px; margin: 4px 0 6px; }
.deck-hero p { margin: 0; }
.deck-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-areas: "squad status" "comms quick"; gap: 18px; align-items: start; }
.panel-squad { grid-area: squad; } .panel-table { grid-area: status; } .panel-comms { grid-area: comms; } .panel-actions { grid-area: quick; }
.units { display: flex; flex-direction: column; gap: 10px; }
.unit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; transition: box-shadow .2s var(--ease); }
.unit:hover { box-shadow: var(--glow); }
.unit-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.unit-stats { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font: 600 12.5px var(--font-body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.unit-stats span { display: inline-flex; gap: 5px; align-items: center; }
.unit-stats .ico { color: var(--cyan); opacity: .8; }
.unit-act { display: flex; flex-direction: column; gap: 6px; }
.readout { margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 14px; overflow: hidden; }
.readout > div { padding: 12px 14px; border-bottom: 1px solid var(--edge); }
.readout > div:nth-child(odd) { border-right: 1px solid var(--edge); }
.readout > div:nth-last-child(-n+2) { border-bottom: 0; }
.readout dt { font: 500 12px var(--font-body); color: var(--mute); margin-bottom: 2px; }
.readout dd { margin: 0; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.qa { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 14px; color: var(--ink); transition: all .25s var(--ease); }
.qa .ico { width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: var(--cyan); background: var(--holo-soft); box-shadow: inset 0 0 0 1px rgba(90, 209, 255, .2); margin-bottom: 8px; }
.qa b { font-weight: 600; font-size: 14px; }
.qa span { font-size: 12.5px; color: var(--mute); }
.qa:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--glow); }
.feed { display: flex; flex-direction: column; }
.feed-row { display: flex; gap: 12px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--edge); font-size: 13.5px; }
.feed-row:last-child { border-bottom: 0; }
.feed-num { min-width: 34px; text-align: center; padding: 3px 8px; border-radius: 8px; background: var(--holo-soft); color: #e3f4ff; }
.panel-table > .btn { width: 100%; margin-bottom: 14px; }

/* ---------- characters / builder ---------- */
.chars { gap: 14px; }
.charcard { border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); transition: all .25s var(--ease); }
.charcard:hover { transform: translateY(-2px); box-shadow: var(--shadow), var(--glow); }
.steps { gap: 4px; border-radius: 14px; padding: 5px; }
.step { border: 0; background: none; border-radius: 10px; padding: 8px 13px; font: 500 13px var(--font-body); color: var(--mute); text-transform: none; letter-spacing: 0; }
.step:hover { color: var(--ink); background: rgba(150, 190, 255, .06); }
.step.on { background: var(--holo-soft); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(90, 209, 255, .3); }
.step.done { color: var(--green); }
.pick { gap: 10px; }
.pickitem { border-radius: 14px; padding: 13px 14px; transition: all .2s var(--ease); }
.pickitem:hover { box-shadow: var(--glow); }
.pickitem.on { background: var(--holo-soft) padding-box, var(--holo-grad) border-box; box-shadow: 0 0 22px rgba(90, 160, 255, .25); }
.pickitem b { font: 600 14.5px var(--font-body); }
h3.sect { font: 600 16px var(--font-body); color: var(--ink); margin-top: 10px; }
.pickrow.scrolly { max-height: 240px; overflow: auto; padding: 8px; border-radius: 12px; background: rgba(6, 9, 16, .4); box-shadow: inset 0 0 0 1px var(--edge); }

/* ---------- sheet ---------- */
.sheet { gap: 16px; }
.sheet-head { padding: 20px; border-radius: var(--r-xl); position: relative; overflow: hidden; box-shadow: var(--shadow); }
.sheet-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 200px at 0% 0%, rgba(90, 209, 255, .16), transparent 70%), radial-gradient(360px 200px at 100% 100%, rgba(167, 123, 255, .12), transparent 70%); }
.sheet-head > * { position: relative; }
.sheet-head h2 { font-size: 24px; }
.avatar.lg { box-shadow: 0 0 0 3px rgba(5, 7, 12, .9), 0 0 0 5px rgba(90, 209, 255, .6), 0 10px 30px rgba(90, 160, 255, .35); }
.vitals { gap: 10px; }
.vital, .abil { border-radius: 14px; transition: all .2s var(--ease); box-shadow: var(--shadow); }
.vital .k, .abil .k { font: 500 11.5px var(--font-body); color: var(--mute); text-transform: none; letter-spacing: 0; }
.vital .v, .abil .m { font: 700 24px var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.abil .s { font: 500 13px var(--font-body); }
button.vital:hover, button.abil:hover { box-shadow: var(--glow); }
.rollbtn { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 600; }
.pdot { border-color: var(--edge-3); }
.pdot.p { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 8px rgba(90, 209, 255, .6); }
.pdot.e { background: var(--violet); border-color: var(--violet); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--violet); }
.ovr { font: 700 9px var(--font-body); }

/* ---------- inventory & workbench ---------- */
.itemcard { border-radius: 14px; background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--rar) 22%, rgba(28, 36, 54, .7)), rgba(14, 19, 31, .7)); border: 1px solid color-mix(in srgb, var(--rar) 60%, transparent); backdrop-filter: var(--blur); }
.itemcard:hover { box-shadow: 0 0 22px color-mix(in srgb, var(--rar) 40%, transparent); }
.itemdetail { background: linear-gradient(var(--glass), var(--glass)) padding-box, linear-gradient(150deg, var(--rar), transparent 60%) border-box; border-radius: var(--r-lg); }
.slots .slot { border-radius: 14px; background: rgba(6, 9, 16, .45); border-color: var(--edge-2); }
.modslot { border-color: var(--edge-3); border-radius: 12px; background: rgba(6, 9, 16, .45); }

/* ---------- holotable ---------- */
.table { min-height: 0; flex: 1; margin: 0 16px 16px; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--edge-2); box-shadow: var(--shadow); }
.mapwrap { background: radial-gradient(900px 600px at 50% 40%, #0d1424, #04060b); }
.rail { background: rgba(10, 14, 23, .78); backdrop-filter: var(--blur); border-left: 1px solid var(--edge); }
.railbody { padding: 14px; }
.maptools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.maptools::-webkit-scrollbar { display: none; }
.maptools > * { flex: none; }
.maptools .btn:not(.pri):not(.on) { background: rgba(12, 17, 28, .82); backdrop-filter: var(--blur); }
.msg { border-radius: 14px; }
.msg .who { color: #bcd4ff; font-family: var(--font-body); font-weight: 600; }
.msg .tot { font: 700 22px var(--font-body); font-variant-numeric: tabular-nums; }
.msg .tot.crit { color: var(--green); text-shadow: 0 0 14px rgba(70, 224, 160, .6); }
.msg .tot.fumble { color: var(--red); text-shadow: 0 0 14px rgba(255, 90, 106, .6); }
.msg .brk { font-family: var(--font-body); }
.msg.secret { box-shadow: inset 0 0 0 1px rgba(167, 123, 255, .4); }
.tok.turn { box-shadow: 0 0 0 3px var(--cyan), 0 0 20px rgba(90, 209, 255, .8); }
.tok.mine { border-color: var(--cyan); }
.actionbar, .turnbanner { border-radius: 16px; }
.dice .btn { font-family: var(--font-body); }
.mobtabs { background: rgba(8, 11, 19, .9); backdrop-filter: var(--blur); border-top: 1px solid var(--edge); padding-bottom: env(safe-area-inset-bottom); }
.mobtabs button { font: 500 11.5px var(--font-body); text-transform: none; letter-spacing: 0; }
.mobtabs button.on { color: var(--cyan); box-shadow: inset 0 2px 0 var(--cyan); }
.comp .cats button { border-radius: 10px; color: var(--ink-2); }
.comp .cats button:hover { background: rgba(150, 190, 255, .06); color: var(--ink); }
.comp .cats button.on { background: var(--holo-soft); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(90, 209, 255, .25); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .deck-grid { grid-template-columns: 1fr; grid-template-areas: "squad" "status" "comms" "quick"; } }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .hdr { height: 58px; padding: 0 12px; gap: 10px; background: rgba(8, 11, 19, .7); backdrop-filter: var(--blur); border-bottom: 1px solid var(--edge); }
  .hdr-brand { display: block; font-size: 12px; letter-spacing: .14em; }
  .hdr-title { display: none; }
  .hdr-nav { display: flex; gap: 4px; margin-left: auto; }
  .hdr-nav a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--mute); }
  .hdr-nav a.on { color: var(--cyan); background: var(--holo-soft); box-shadow: inset 0 0 0 1px rgba(90, 209, 255, .25); }
  .status { margin-left: 4px; } .status .pill { display: none; }
  .banner { margin: 10px 12px 0; }
  .page { padding: 12px 12px 44px; }
  .table { margin: 0; border-radius: 0; border: 0; }
  .deck-hero { padding: 20px; } .deck-hero h2 { font-size: 22px; }
  .unit { grid-template-columns: auto minmax(0, 1fr); }
  .unit-act { grid-column: 1 / -1; flex-direction: row; } .unit-act .btn { flex: 1; }
  .sndpop { top: 62px; right: 8px; }
  .tabs { width: 100%; overflow-x: auto; }
}
@media (max-width: 520px) { .readout { grid-template-columns: 1fr; } .readout > div { border-right: 0 !important; border-bottom: 1px solid var(--edge) !important; } .quick { grid-template-columns: 1fr 1fr; } .hdr-brand { display: none; } .hdr-nav { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .qa:hover, .charcard:hover { transform: none; } }
@supports not (backdrop-filter: blur(1px)) { :root { --glass: rgba(17, 23, 36, .95); } }
.railbody .tabs, .modal .tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
/* ---------- dice locker ---------- */
.dice3d { position: fixed; inset: 0; pointer-events: none; z-index: 70; display: none; }
.die-sw { position: relative; flex: none; display: inline-grid; place-items: center; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55), transparent 32%), linear-gradient(160deg, color-mix(in srgb, var(--b) 85%, #fff) 0%, var(--b) 45%, color-mix(in srgb, var(--b) 55%, #000) 100%);
  filter: drop-shadow(0 0 10px var(--g)); }
.die-sw span { font: 700 15px var(--font-body); color: var(--n); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.die-sw.mini { width: 16px; height: 16px; }
.locker { gap: 16px; }
.locker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.die-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(150, 190, 255, .05); border: 1px solid var(--edge-2); transition: all .2s var(--ease); }
.die-card:hover { border-color: var(--edge-3); }
.die-card.on { background: var(--holo-soft); border-color: rgba(90, 209, 255, .55); box-shadow: 0 0 22px rgba(90, 160, 255, .2); }
.die-pick { display: flex; gap: 12px; align-items: center; background: none; border: 0; padding: 0; color: var(--ink); text-align: left; }
.tiny { font-size: 11.5px; color: var(--dim); }
.jail { padding: 14px; border-radius: 16px; border: 1px solid rgba(255, 90, 106, .25); background: linear-gradient(180deg, rgba(255, 90, 106, .07), transparent); display: flex; flex-direction: column; gap: 10px; }
.jail-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cell { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(6, 9, 16, .55); border: 1px solid var(--edge-2); }
.cell-bars { position: relative; display: grid; place-items: center; width: 56px; height: 56px; }
.cell-bars::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(200, 210, 230, .75) 8px 11px); box-shadow: inset 0 3px 0 rgba(200, 210, 230, .75), inset 0 -3px 0 rgba(200, 210, 230, .75); }
.cell-bars .die-sw { filter: grayscale(.6) brightness(.8); }
.col > .ta, .detail > .ta, .card > .ta { flex: none; }

/* ---------- v5: new-player guide (quick start, checklist, review, level-up wizard) ---------- */
.step { position: relative; }
.todo-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #ff5a6a; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 0 10px rgba(255, 90, 106, .55); }
.progress-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.progress { flex: 1 1 200px; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .07); overflow: hidden; border: 1px solid var(--line); }
.progress > span { display: block; height: 100%; background: var(--holo-grad, linear-gradient(90deg, #39c6ff, #9b7bff)); box-shadow: 0 0 12px rgba(80, 200, 255, .6); transition: width .4s var(--ease, ease); }
.pending .link { font: inherit; color: inherit; text-decoration: underline dotted; padding: 0; }
.savecheck { border-color: rgba(255, 182, 72, .45) !important; box-shadow: 0 0 0 1px rgba(255, 182, 72, .25), 0 10px 40px rgba(0, 0, 0, .35); }
.flag, .tick { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 800; flex: none; }
.flag { background: rgba(255, 90, 106, .18); color: #ff8a96; border: 1px solid rgba(255, 90, 106, .45); }
.flag.warn { background: rgba(255, 182, 72, .15); color: #ffd896; border-color: rgba(255, 182, 72, .45); }
.tick { background: rgba(70, 224, 160, .15); color: #8cf0c6; border: 1px solid rgba(70, 224, 160, .4); }
.li.ok .grow { color: var(--mute); }
.tldr { color: var(--mute); font-weight: 400; font-size: .9em; margin-left: 6px; }
.rec { color: #ffd166; margin-right: 4px; text-shadow: 0 0 8px rgba(255, 209, 102, .55); }
.term { border-bottom: 1px dotted currentColor; cursor: help; position: relative; outline: none; }
.term:hover::after, .term:focus::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 10px; background: rgba(12, 18, 32, .97); border: 1px solid rgba(110, 200, 255, .35); color: #e6eefc; font: 400 12.5px/1.4 var(--font-body, Inter, sans-serif); text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; z-index: 60; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); pointer-events: none; }
.chip.sm { padding: 1px 7px; font-size: 11px; }
.diff-easy { color: #8cf0c6 !important; border-color: rgba(70, 224, 160, .45) !important; background: rgba(70, 224, 160, .1) !important; }
.diff-medium { color: #9fdcff !important; border-color: rgba(90, 190, 255, .45) !important; background: rgba(90, 190, 255, .1) !important; }
.diff-complex { color: #e2b8ff !important; border-color: rgba(180, 120, 255, .45) !important; background: rgba(180, 120, 255, .1) !important; }
.classtag { margin: 0 0 6px; }
.abil-what { display: block; font-size: 11px; line-height: 1.2; margin-top: 2px; }
.recabil { gap: 6px; }
.startchoice { gap: 14px; }
.startbtn { text-align: left; cursor: pointer; font: inherit; color: inherit; }
.startbtn:hover, .tpl:hover { border-color: rgba(110, 200, 255, .55); transform: translateY(-1px); }
.tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tpl { display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: transform .15s, border-color .15s; }
.hero-pick { max-width: 640px; }
.statrow { display: flex; flex-wrap: wrap; gap: 8px; }
.stat { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.stat .k { font-size: 11px; color: var(--mute); letter-spacing: .06em; }
.stat b { font-size: 18px; }
.stepchoices { margin-top: 6px; }
.showall { align-self: flex-start; }
.attn { margin-bottom: 14px; }
.attn .li { align-items: center; }
.lvwiz { max-width: 860px; }
.lvwiz .archpick { text-align: left; font: inherit; color: inherit; width: 100%; }
.lvfinish { position: sticky; bottom: 0; z-index: 5; backdrop-filter: blur(14px); }
.gloss { display: grid; gap: 8px; margin: 0; } .gloss dt { font-weight: 600; } .gloss dd { margin: 0; color: var(--mute); font-size: 13px; }
@media (max-width: 640px) { .progress-row { gap: 8px; } .term:hover::after, .term:focus::after { max-width: 200px; } }

/* ---------- v6: item browser ---------- */
.shop { gap: 12px; }
.shelves { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.shelf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .15s, background .15s; min-width: 0; }
.shelf:hover { border-color: rgba(110, 200, 255, .45); }
.shelf.on { border-color: rgba(110, 200, 255, .7); background: rgba(70, 170, 255, .12); box-shadow: 0 0 0 1px rgba(110, 200, 255, .25) inset; }
.shelf svg { flex: none; color: #8fd3ff; }
.shopfilters { gap: 8px; }
.filt-k { min-width: 64px; }
.rarchip .rdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rc); margin-right: 6px; box-shadow: 0 0 6px var(--rc); }
.rarchip.on { border-color: var(--rc) !important; color: var(--ink) !important; background: color-mix(in srgb, var(--rc) 18%, transparent) !important; }
.shopbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .shopbody:has(.shopdetail) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .shopdetail { position: sticky; top: 8px; align-self: start; max-height: 80vh; overflow: auto; } }
.shoplist { display: flex; flex-direction: column; gap: 4px; max-height: 520px; overflow: auto; padding-right: 2px; }
.shoprow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; border-left: 3px solid var(--rar); background: rgba(255, 255, 255, .025); cursor: pointer; min-width: 0; }
.shoprow:hover { background: rgba(255, 255, 255, .05); }
.shoprow.sel { border-color: rgba(110, 200, 255, .5); border-left-color: var(--rar); background: rgba(70, 170, 255, .08); }
.shop-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .05); color: #9fdcff; flex: none; }
.shop-ic.lg { width: 46px; height: 46px; }
.shopdetail { border-top: 3px solid var(--rar); }
.shopbuy { align-items: center; }
.qty { display: inline-flex; align-items: center; gap: 8px; }
.btn.good { background: rgba(70, 224, 160, .18) !important; border-color: rgba(70, 224, 160, .5) !important; color: #a9f1d1 !important; }
.packsearch { max-width: 260px; }
.shopcard { border-color: rgba(110, 200, 255, .35); }
@media (max-width: 640px) { .shelves { grid-template-columns: 1fr 1fr; } .shelf { padding: 8px; } .shoplist { max-height: 60vh; } }

/* ---------- v7: sessions, turns, reminders, effects ---------- */
.sessionbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px dashed rgba(255, 182, 72, .45); background: rgba(255, 182, 72, .06); }
.sessionbar.on { border-style: solid; border-color: rgba(70, 224, 160, .4); background: rgba(70, 224, 160, .06); }
body.upnext .shell::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 70; border: 3px solid rgba(90, 200, 255, .9); border-radius: 6px; animation: upnext 1.4s ease-in-out infinite; box-shadow: inset 0 0 40px rgba(90, 200, 255, .45); }
@keyframes upnext { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
body.myturn .shell::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 70; border: 3px solid rgba(255, 196, 80, .85); border-radius: 6px; box-shadow: inset 0 0 50px rgba(255, 196, 80, .25); animation: myturn 3s ease-in-out infinite; }
@keyframes myturn { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.upnext .shell::after, body.myturn .shell::after { animation: none; opacity: .8; } }
.turnlayer { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.turnlayer > * { pointer-events: auto; }
.upnext-pill { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(12, 30, 50, .92); border: 1px solid rgba(90, 200, 255, .7); color: #cfeeff; font-weight: 600; box-shadow: 0 0 24px rgba(90, 200, 255, .45); animation: upnext 1.4s ease-in-out infinite alternate; }
.turnpanel { width: min(440px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(12, 17, 29, .95); backdrop-filter: blur(16px); border: 1px solid rgba(255, 196, 80, .55); box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 30px rgba(255, 196, 80, .15); animation: slidein .35s var(--ease, ease); }
@keyframes slidein { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.turnpanel h3 { margin: 0; }
.turnpanel-min { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 196, 80, .6); background: rgba(40, 30, 10, .92); color: #ffe2a3; font: inherit; font-weight: 600; cursor: pointer; }
.pips { gap: 6px; align-items: center; }
.pip { padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(70, 224, 160, .5); background: rgba(70, 224, 160, .12); color: #b6f5d8; font: inherit; font-size: 13px; cursor: pointer; }
.pip.used { border-color: var(--line); background: transparent; color: var(--mute); text-decoration: line-through; }
.move { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.tp-sec { gap: 6px; }
.tp-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.tp-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.tp-opt:hover:not(:disabled) { border-color: rgba(110, 200, 255, .55); }
.tp-opt.atk { border-color: rgba(255, 90, 106, .4); }
.tp-opt:disabled { opacity: .45; }
.tp-opt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.reminders { display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 24px)); }
.remind { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(12, 17, 29, .95); border: 1px solid rgba(110, 200, 255, .45); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); animation: slidein .3s ease; }
.remind.init { border-color: rgba(255, 90, 106, .7); box-shadow: 0 0 30px rgba(255, 90, 106, .3); }
.playmode .turnlayer .turnpanel, .playmode .turnlayer .turnpanel-min { display: none; }
.play .turnpanel { width: 100%; max-height: none; animation: none; }
.play-turn.next { border-color: rgba(90, 200, 255, .8) !important; animation: upnext 1.4s ease-in-out infinite alternate; }
.badges { gap: 4px; }
.badge { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; color: #ffe2a3; background: rgba(255, 196, 80, .1); border: 1px solid rgba(255, 196, 80, .35); }
.explain .li.total { border-top: 1px solid var(--line); }
.explain .big { font-size: 22px; }
.ppgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.pp { padding: 0; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 1; }
.pp img { width: 100%; height: 100%; display: block; }
.pp.on { border-color: #5ccbff; box-shadow: 0 0 12px rgba(90, 200, 255, .5); }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); cursor: pointer; padding: 0; }
.swatch.on { border-color: #fff; }
/* effects */
.fxlayer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.fxbanner { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%) scale(.6); font: 800 clamp(34px, 7vw, 72px)/1 var(--font-display, Orbitron, sans-serif); letter-spacing: .06em; opacity: 0; animation: fxban 1.8s cubic-bezier(.2, .9, .2, 1) forwards; text-align: center; white-space: nowrap; }
.fxbanner.crit { color: #ffd166; text-shadow: 0 0 24px rgba(255, 196, 80, .9), 0 0 60px rgba(255, 140, 40, .6); }
.fxbanner.fumble { color: #ff8a96; font-size: clamp(26px, 5vw, 48px); text-shadow: 0 0 20px rgba(255, 90, 106, .7); }
.fxbanner.down { color: #ff5a6a; text-shadow: 0 0 30px rgba(255, 0, 40, .8); }
.fxbanner.kill { color: #e6eefc; font-size: clamp(24px, 4.5vw, 44px); text-shadow: 0 0 20px rgba(90, 200, 255, .7); }
@keyframes fxban { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.fxbolt { position: absolute; height: 4px; transform-origin: 0 50%; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--c) 30%, #fff 50%, var(--c) 70%, transparent); box-shadow: 0 0 12px var(--c), 0 0 24px var(--c); animation: fxbolt .42s ease-out forwards; }
@keyframes fxbolt { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 55% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 100%); opacity: 0; } }
.fx-shake .shell { animation: shake .45s; } .fx-shake2 .shell { animation: shake2 .55s; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, 1px); } }
@keyframes shake2 { 0%, 100% { transform: none; } 20% { transform: translate(-9px, 4px) rotate(-.4deg); } 40% { transform: translate(8px, -5px) rotate(.4deg); } 60% { transform: translate(-6px, 3px); } 80% { transform: translate(4px, -2px); } }
.tok.tok-hit { animation: tokhit .7s; } .tok.tok-crit { animation: tokcrit .8s; } .tok.tok-miss { animation: tokmiss .6s; } .tok.tok-down { animation: tokdown 1.4s; }
@keyframes tokhit { 0%, 100% { filter: none; } 20% { filter: drop-shadow(0 0 10px #ff2a3c) brightness(1.8) saturate(2); transform: translateX(-3px); } 40% { transform: translateX(3px); } }
@keyframes tokcrit { 0%, 100% { filter: none; } 15% { filter: drop-shadow(0 0 16px #ffd166) brightness(2.2); transform: scale(1.15); } 40% { transform: scale(.95) translateX(-4px); } 60% { transform: translateX(4px); } }
@keyframes tokmiss { 0%, 100% { filter: none; } 30% { filter: drop-shadow(0 0 10px #5ccbff); transform: translateX(6px); } }
@keyframes tokdown { 0% { filter: none; } 30% { filter: drop-shadow(0 0 18px #ff2a3c) grayscale(.5); transform: rotate(-8deg) scale(1.05); } 100% { filter: grayscale(1); transform: none; } }
@media (prefers-reduced-motion: reduce) { .fxbanner { animation-duration: 1.2s; } .tok.tok-hit, .tok.tok-crit, .tok.tok-miss, .tok.tok-down { animation: none; } }
@media (max-width: 700px) { .turnlayer { right: 8px; left: 8px; bottom: 64px; align-items: stretch; max-width: none; } .turnpanel, .reminders { width: 100%; } }
@media (min-width: 701px) { .turnlayer { right: auto; left: calc(var(--side-w, 248px) + 28px); bottom: 24px; align-items: flex-start; } .side-min .turnlayer { left: 96px; } }
.recapmsg { border-color: rgba(255, 196, 80, .45) !important; background: linear-gradient(180deg, rgba(255, 196, 80, .08), transparent) !important; }
.badgemsg b { color: #ffe2a3; }

/* ---------- standalone join screen ---------- */
.joinwrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.joincard { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 18px; background: rgba(14, 19, 31, .85); border: 1px solid rgba(110, 200, 255, .3); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.joincard .boot-mark { text-align: center; }
.joincard p { margin: 0; }
.ctable tr.curlvl td { background: rgba(90, 200, 255, .14); color: #e6f6ff; font-weight: 600; }
.ctable tr.curlvl td:first-child { box-shadow: inset 3px 0 0 #5ccbff; }
.gearfx .li { align-items: flex-start; }
/* v8 loot rolls */
.lootbtn { border-color: rgba(242, 179, 61, .35); }
.lootbtn:disabled { opacity: .45; filter: grayscale(.8); cursor: not-allowed; }
.lootbtn.ready { background: linear-gradient(135deg, rgba(242, 179, 61, .35), rgba(242, 179, 61, .12)); border-color: #f2b33d; color: #ffe2a3; animation: lootglow 1.6s ease-in-out infinite; }
.lootbtn.done { border-color: rgba(76, 195, 138, .5); }
@keyframes lootglow { 0%, 100% { box-shadow: 0 0 0 rgba(242, 179, 61, 0); } 50% { box-shadow: 0 0 18px rgba(242, 179, 61, .65); } }
.remind.loot { border-color: rgba(242, 179, 61, .7); box-shadow: 0 0 30px rgba(242, 179, 61, .3); }
.lootreveal { min-width: min(420px, 86vw); }
.lootdie { align-self: center; width: 96px; height: 96px; display: grid; place-items: center; font-size: 42px; font-weight: 800; color: #ffe2a3; background: radial-gradient(circle at 35% 30%, rgba(242, 179, 61, .4), rgba(20, 26, 40, .95)); clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); }
.lootdie.spin { animation: lootspin .9s cubic-bezier(.2, .9, .3, 1.2); }
.lootdie.nat20 { color: #fff; background: radial-gradient(circle at 35% 30%, #ffd36b, #a8700f); filter: drop-shadow(0 0 18px #f2b33d); }
.lootdie.nat1 { color: #ffb0b0; background: radial-gradient(circle at 35% 30%, rgba(239, 93, 85, .5), rgba(20, 26, 40, .95)); }
@keyframes lootspin { 0% { transform: rotate(-540deg) scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.lootitem { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--rc, rgba(255, 255, 255, .15)); background: rgba(255, 255, 255, .03); animation: slidein .4s ease both; }
.lootitem:nth-child(2) { animation-delay: .15s; } .lootitem:nth-child(3) { animation-delay: .3s; }
.lootitem.cr { --rc: #f2b33d; }
.lootcr { width: 26px; text-align: center; font-size: 20px; color: #f2b33d; }
.tierchip { border-color: var(--rc); }
.tierchip.on { background: var(--rc); color: #0b0f18; }
/* v9 DM assistant */
.assist { display: flex; flex-direction: column; gap: 12px; max-width: 1100px; }
.moddrop { border: 2px dashed var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; transition: .15s; }
.moddrop.over { border-color: var(--holo); background: color-mix(in srgb, var(--holo) 8%, transparent); }
.assist-busy { align-items: center; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--holo); animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.story-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--holo) 12%, var(--panel)), var(--panel)); }
.acts { display: flex; flex-direction: column; gap: 8px; }
.act.here { border-color: var(--holo); box-shadow: 0 0 0 1px var(--holo) inset; }
.act.past { opacity: .7; }
.beat { align-items: flex-start; cursor: pointer; }
.beat input { margin-top: 4px; }
.beat.done b { text-decoration: line-through; opacity: .7; }
.mustkeep { border-left: 3px solid #f2b33d; padding: 6px 10px; background: rgba(242, 179, 61, .07); border-radius: 0 10px 10px 0; }
.mustkeep ul { margin: 4px 0 0; padding-left: 18px; }
.small.bad, .bad { color: var(--bad, #ef5d55); }
.small.good, .good { color: var(--good, #4cc38a); }
.answer { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(255, 255, 255, .02); }
.md p { margin: 4px 0; } .md ul { margin: 4px 0; padding-left: 20px; } .md li { margin: 2px 0; }
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; }
.bubble { padding: 10px 12px; border-radius: 14px; max-width: 85%; white-space: pre-wrap; }
.bubble .md { white-space: normal; }
.bubble.user { align-self: flex-end; background: color-mix(in srgb, var(--holo) 18%, var(--panel-2)); }
.bubble.assistant { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); }
.chips { flex-wrap: wrap; gap: 6px; }
.chip.click { cursor: pointer; }
.glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.glancecard.low { border-color: #f2b33d; } .glancecard.down { border-color: var(--bad, #ef5d55); opacity: .85; }
.big-ac { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 2px 10px; }
.big-ac b { font-size: 22px; }
.hpbar { position: relative; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.hpbar > div { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2f9e6a, #4cc38a); }
.glancecard.low .hpbar > div { background: linear-gradient(90deg, #c98a1c, #f2b33d); } .glancecard.down .hpbar > div { background: #ef5d55; }
.hpbar span { position: relative; display: block; text-align: center; font-size: 12px; line-height: 20px; font-weight: 700; }
.gl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gl-grid > span { display: flex; flex-direction: column; background: rgba(255, 255, 255, .03); border-radius: 8px; padding: 4px 6px; }
.gl-grid .k { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
.partystrip { flex-wrap: wrap; gap: 14px; }
.diffchip { padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; background: var(--dc); color: #0b0f18; }
.diffbtn { border-color: var(--dc); } .diffbtn.on { background: var(--dc); color: #0b0f18; }
.diffmeter { position: relative; padding-top: 6px; }
.dm-bands { display: flex; border-radius: 8px; overflow: hidden; }
.dm-bands span { flex: 1; text-align: center; font-size: 11px; font-weight: 700; color: #0b0f18; padding: 3px 0; opacity: .85; }
.dm-pin { position: absolute; top: 0; width: 4px; height: 32px; background: #fff; border-radius: 2px; transform: translateX(-2px); box-shadow: 0 0 8px #fff; transition: left .3s; }
.scaleopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.li.on { border-color: var(--holo); }
.cluewarn { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid #f2b33d; background: rgba(242, 179, 61, .08); }
.npcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-top: 8px; }
.npcf { display: grid; grid-template-columns: 72px 1fr; gap: 6px; align-items: center; }
.npcf .k { font-size: 11px; opacity: .7; }
.npcf input { padding: 4px 8px; font-size: 13px; }
.pacer.late { border-color: #f2b33d; } .pacer.over { border-color: #ef5d55; }
.pill.pace.late { border-color: #f2b33d; color: #ffd27a; } .pill.pace.over { border-color: #ef5d55; color: #ff9b94; animation: lootglow 1.6s infinite; }
.pill.warn { border-color: #f2b33d; color: #ffd27a; text-decoration: none; }
.dmdock { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 40; display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 999px; background: rgba(12, 17, 29, .9); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0, 0, 0, .45); }
.quickbtn { justify-content: flex-start; white-space: normal; text-align: left; }
.bstep { display: flex; gap: 10px; align-items: center; }
.setupsteps { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
@media print { .dmdock { display: none; } }
/* v10 ADHD-friendly flow: phases, steps, Tonight, briefing */
.phases, .dmgroups { display: flex; gap: 6px; }
.phase { flex: 1; padding: 10px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); font-weight: 700; }
.phase.on { border-color: var(--holo); background: color-mix(in srgb, var(--holo) 18%, var(--panel-2)); color: var(--holo); }
.dmgroups .phase { padding: 7px 6px; font-size: 13px; }
.btn.big { padding: 12px 16px; font-size: 15px; border-radius: 12px; }
.steps { display: flex; flex-direction: column; gap: 8px; }
.step { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.step.open { border-color: var(--holo); }
.step-h { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; background: none; border: 0; text-align: left; color: inherit; cursor: pointer; }
.step-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); font-weight: 800; flex: none; }
.step.done .step-dot { background: #4cc38a; border-color: #4cc38a; color: #0b0f18; }
.step.done .step-h b { opacity: .7; }
.step-b { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px 56px; }
.small.warn { color: #ffd27a; }
.tonight { gap: 14px; }
.tn-head { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--holo) 14%, var(--panel)), var(--panel)); border: 1px solid var(--line); }
.tn-head b { font-size: 18px; }
.tn-beat { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--panel); }
.tn-beat input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.tn-beat.done { opacity: .55; } .tn-beat.done b { text-decoration: line-through; }
.tn-beat.on { border-color: var(--holo); }
.tn-npc { padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.tn-fight { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; }
.tonightdrawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 45; background: var(--bg, #0a0f1a); border-left: 1px solid var(--line); box-shadow: -10px 0 40px rgba(0, 0, 0, .5); padding: 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; animation: slidein .25s ease; }
.briefing h1 { font-size: 20px; margin: 0 0 8px; }
.bsec h2 { display: flex; gap: 8px; align-items: center; font-size: 16px; margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.bnum { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: color-mix(in srgb, var(--holo) 25%, var(--panel-2)); flex: none; }
.bsec ul, .bsec ol { margin: 4px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.bnpcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.bnpc { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.briefread { max-width: 760px; font-size: 15px; line-height: 1.55; }
.modal:has(.briefread) { max-height: 92vh; overflow: auto; }
/* v10.1 layering + phone placement fixes */
.modal-bg { z-index: 100; }
.tonightdrawer { z-index: 85; }
@media (max-width: 700px) {
  .dmdock { bottom: calc(58px + env(safe-area-inset-bottom)); max-width: calc(100vw - 16px); }
  body.hasdock .turnlayer { bottom: 116px; }
  .tonightdrawer { padding-bottom: 80px; }
}
.toast { z-index: 110; }
@media (max-width: 700px) { body.hasdock .toast { bottom: 112px; } }
/* v11 map: working templates, explosions, lights, auras */
.tplcard { width: min(300px, calc(100vw - 16px)); }
.tplform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tplform label { display: flex; gap: 4px; align-items: center; }
.tok.intpl { box-shadow: 0 0 0 3px #fff, 0 0 18px 4px rgba(255, 140, 60, .85); }
.boomlayer { z-index: 2; pointer-events: none; }
.boom .b-flash { animation: bflash 1.1s ease-out forwards; }
.boom .b-ring { animation: bring 0.9s ease-out forwards; opacity: 0; }
.boom .b-spark { animation: bspark 1s ease-out forwards; }
.boom .b-cloud { animation: bcloud 2.4s ease-out forwards; opacity: 0; }
.boom .b-bolt { animation: bbolt 0.9s steps(6) forwards; filter: drop-shadow(0 0 6px #fff); }
@keyframes bflash { 0% { transform: scale(.1); opacity: 1; } 35% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes bring { 0% { transform: scale(.05); opacity: .9; } 100% { transform: scale(1.05); opacity: 0; } }
@keyframes bspark { 0% { transform: translate(calc(var(--dx) * -3), calc(var(--dy) * -3)); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes bcloud { 0% { transform: scale(.2); opacity: 0; } 25% { opacity: .55; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes bbolt { 0%, 100% { opacity: 0; } 10%, 30%, 55% { opacity: 1; } 20%, 45%, 70% { opacity: .2; } }
.glowlayer { pointer-events: none; }
.bulb { position: absolute; z-index: 4; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--lc); background: rgba(10, 14, 24, .85); box-shadow: 0 0 14px var(--lc); font-size: 14px; display: grid; place-items: center; padding: 0; cursor: grab; }
.bulb.off { opacity: .45; box-shadow: none; filter: grayscale(1); }
.aurapulse { animation: aurapulse 3s ease-in-out infinite; }
@keyframes aurapulse { 50% { stroke-opacity: .35; } }
.auraed { border-top: 1px solid var(--line); padding-top: 6px; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .boom * { animation-duration: .01s !important; } .aurapulse { animation: none; } }
/* v11.1 tappable online counter */
button.side-status { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
button.pill { font: inherit; color: inherit; cursor: pointer; }
button.pill.live:hover, button.side-status:hover span:last-child { text-decoration: underline; }
/* v11.2 keep the map usable during your turn */
.turnpanel { max-height: min(62vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 700px) { .turnpanel { max-height: 44vh; } .play .turnpanel { max-height: none; } }
/* v12 long option lists: grouped, scrollable, always visible */
.optbox { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.optgrp { display: flex; flex-direction: column; gap: 4px; }
.featlist { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.featrow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: inherit; cursor: pointer; }
.featrow:hover { border-color: var(--holo); }
.keystats { color: var(--text, #dfe6f3); opacity: .9; }
.profdot { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; margin-left: 4px; vertical-align: middle; }
.profdot.good { background: rgba(76, 195, 138, .25); color: #4cc38a; } .profdot.bad { background: rgba(239, 93, 85, .25); color: #ef5d55; }
.credwrap { position: relative; display: inline-block; }
.credpop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(360px, 86vw); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.cargo summary { cursor: pointer; }

/* v13: unified action list, main page layout, campaign + custom items */
.sheetmain { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.sheetmain.wide { grid-template-columns: 360px minmax(0, 1fr); }
.sidecol, .maincol { min-width: 0; }
.sidecol { position: sticky; top: 8px; }
.sheetmain.wide .abil-grid { grid-template-columns: repeat(3, 1fr); }
.condbar { border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; background: rgba(255, 255, 255, .02); }
.condbar > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; list-style: none; }
.condbar > summary::-webkit-details-marker { display: none; }
.condbar[open] > summary { margin-bottom: 8px; }
.portraitbtn { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; }
.portraitbtn:hover .avatar, .portraitbtn:focus-visible .avatar { border-color: var(--holo); }
.portraitedit { position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; }
.actlist { gap: 8px; }
.actfilters { gap: 6px; align-items: center; }
.actsearch { flex: 1 1 120px; min-width: 100px; max-width: 220px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); }
.mainhand select { max-width: 220px; }
.acthead { font: 600 12px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 6px 2px 0; }
.actgroup { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.actrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
.actgroup > .actrow:last-of-type { border-bottom: 0; }
.actrow.atk { box-shadow: inset 3px 0 0 rgba(255, 90, 106, .55); }
.actrow.dim .actmain { opacity: .5; }
.actrow.dim .actgo { opacity: .6; }
.actmain { gap: 2px; cursor: pointer; min-width: 0; }
.actname { gap: 6px; align-items: center; flex-wrap: wrap; }
.actline { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.actgo { min-width: 58px; font-family: var(--font-mono); font-weight: 600; }
.actpin { background: none; border: 0; color: var(--mute); font-size: 18px; padding: 2px 4px; line-height: 1; flex: none; }
.actpin.on { color: var(--accent); }
.acttag { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); }
.acttag.action { border-color: rgba(242, 179, 61, .5); color: var(--accent); }
.acttag.bonus { border-color: rgba(92, 203, 255, .5); color: var(--holo); }
.acttag.reaction { border-color: rgba(180, 131, 255, .5); color: #b483ff; }
.acttag.conc { border-color: rgba(240, 160, 75, .6); color: var(--warn); }
.acttag.live { border-color: rgba(76, 195, 138, .6); color: var(--good); }
.upcast { max-width: 96px; padding: 3px 4px; }
.actdetail { padding: 8px 12px 10px 40px; border-bottom: 1px solid var(--line); background: rgba(92, 203, 255, .04); }
.rollnote { color: var(--holo); }
.campbox { gap: 6px; padding: 8px; border: 1px dashed rgba(92, 203, 255, .4); border-radius: var(--r); }
.customitem textarea { width: 100%; }
.turnpanel .actlist .actgroup { max-height: 40vh; overflow-y: auto; }
@media (max-width: 600px) {
  .actrow { padding: 8px 6px; gap: 6px; }
  .actdetail { padding-left: 12px; }
  .upcast { max-width: 72px; }
}
.modesel { display: none; align-items: center; gap: 6px; }
@media (max-width: 600px) {
  .sheet-head { padding: 12px; gap: 10px; }
  .sheet-head .avatar.lg { width: 60px; height: 60px; font-size: 24px; }
  .modesel { display: flex; }
  .sheettools .modebtn { display: none; }
  .sheettools .btn { padding: 4px 9px; font-size: 13px; }
  .sheet-head > .row:last-child { width: 100%; }
  .sheet-head > .row:last-child .btn { padding: 6px 10px; }
  .vitals { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .vital { padding: 6px 2px; }
  .vital .k { font-size: 10px; line-height: 1.15; }
  .vital .v { font-size: 19px; }
  .vital .small { font-size: 10px; line-height: 1.2; }
  .vital .row .btn.sm { padding: 2px 7px; }
}
.turnpanel .actfilters .chip { padding: 3px 9px; font-size: 12.5px; }
.turnpanel .actrow { padding: 6px 8px; }
@media (max-width: 700px) { .turnpanel .tp-tip { display: none; } .turnpanel .actline { -webkit-line-clamp: 1; } }
.charcard.locked { cursor: default; opacity: .85; }
.charcard.locked:hover { transform: none; border-color: var(--line); }

/* =====================================================================
   v14 · HOLO DATAPAD — flat cyan hologram panels with corner brackets
   ===================================================================== */
:root {
  --dp: #5ccbff; --dp-2: #2a7fa6; --dp-ink: #d8f3ff; --dp-dim: #7fb8d0; --dp-bg: rgba(5, 15, 26, .9); --dp-bg-2: rgba(10, 30, 46, .85);
  --dp-line: rgba(92, 203, 255, .26); --dp-line-2: rgba(92, 203, 255, .5);
  --holo-grad: linear-gradient(120deg, #5ccbff, #5ccbff); --holo-soft: rgba(92, 203, 255, .12);
  --accent: #5ccbff; --accent-ink: #04121c; --cyan: #5ccbff;
  --r: 6px; --r-lg: 8px; --r-xl: 10px;
  --brk-c: rgba(92, 203, 255, .9);
  --brk: linear-gradient(var(--brk-c), var(--brk-c)) top left / 12px 1.5px no-repeat, linear-gradient(var(--brk-c), var(--brk-c)) top left / 1.5px 12px no-repeat,
    linear-gradient(var(--brk-c), var(--brk-c)) top right / 12px 1.5px no-repeat, linear-gradient(var(--brk-c), var(--brk-c)) top right / 1.5px 12px no-repeat,
    linear-gradient(var(--brk-c), var(--brk-c)) bottom left / 12px 1.5px no-repeat, linear-gradient(var(--brk-c), var(--brk-c)) bottom left / 1.5px 12px no-repeat,
    linear-gradient(var(--brk-c), var(--brk-c)) bottom right / 12px 1.5px no-repeat, linear-gradient(var(--brk-c), var(--brk-c)) bottom right / 1.5px 12px no-repeat;
}
body { background: radial-gradient(1000px 700px at 85% -10%, rgba(92, 203, 255, .12), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(42, 127, 166, .14), transparent 60%), linear-gradient(180deg, #030a12, #02060b 70%); background-attachment: fixed; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5; background: repeating-linear-gradient(180deg, rgba(92, 203, 255, .025) 0 1px, transparent 1px 3px); }
/* panels: flat datapad glass + corner brackets */
.card, .sheet-head, .deck-hero, .modal, .itemdetail, .turnpanel, .dp-panel, .popover, .tokmenu {
  background: var(--brk), var(--dp-bg); border: 1px solid var(--dp-line); border-radius: var(--r); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
}
.charcard, .pickitem, .vital, .abil, .detail, .msg, .unit, .qa, .side-char, .steps, .ta-list, .readout, .actionbar, .turnbanner {
  background: var(--dp-bg); border: 1px solid var(--dp-line); border-radius: var(--r); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.charcard:hover, .unit:hover { border-color: var(--dp-line-2); }
.sheet-head::before, .deck-hero::before { content: none; }
.side { background: rgba(3, 10, 18, .82); border-right: 1px solid var(--dp-line); }
.brand-mark { background: var(--dp); border-radius: 6px; box-shadow: 0 0 16px rgba(92, 203, 255, .45); color: #04121c; }
.brand { color: var(--dp-ink); text-shadow: 0 0 12px rgba(92, 203, 255, .45); }
.brand small, .eyebrow { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--dp); }
.side-nav a { border-radius: 6px; }
.side-nav a.on { background: rgba(92, 203, 255, .1); box-shadow: inset 0 0 0 1px rgba(92, 203, 255, .3); }
.side-nav a.on::before { background: var(--dp); border-radius: 0; }
/* controls */
.btn { border-radius: 5px; border-color: rgba(92, 203, 255, .3); background: rgba(92, 203, 255, .06); color: var(--dp-ink); }
.btn:hover { background: rgba(92, 203, 255, .13); border-color: rgba(92, 203, 255, .6); }
.btn.sm { border-radius: 4px; }
.btn.pri { background: var(--dp); color: #04121c; border-color: var(--dp); box-shadow: 0 0 14px rgba(92, 203, 255, .35); }
.btn.pri:hover { filter: brightness(1.08); box-shadow: 0 0 20px rgba(92, 203, 255, .55); }
.btn.on { background: rgba(92, 203, 255, .2); border-color: var(--dp); color: #fff; box-shadow: none; }
.btn.good { color: #8ff0c4; border-color: rgba(70, 224, 160, .45); background: rgba(70, 224, 160, .1); }
.btn.holo { background: rgba(92, 203, 255, .1); border-color: rgba(92, 203, 255, .5); }
input[type=text], input[type=number], input[type=search], select, textarea { background-color: rgba(2, 10, 18, .85); border-color: rgba(92, 203, 255, .28); border-radius: 5px; }
input:focus, select:focus, textarea:focus { border-color: var(--dp); box-shadow: 0 0 0 3px rgba(92, 203, 255, .18); }
.chip { border-color: rgba(92, 203, 255, .28); background: rgba(92, 203, 255, .05); border-radius: 4px; }
.chip.on { border-color: var(--dp); color: var(--dp); background: rgba(92, 203, 255, .14); }
.tabs { border-bottom: 1px solid var(--dp-line); gap: 0; }
.tabs button { font: 600 11.5px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--dp-dim); padding: 10px 12px; border-radius: 0; background: none; }
.tabs button.on { color: var(--dp); background: rgba(92, 203, 255, .08); box-shadow: inset 0 -2px 0 var(--dp); }
.bar, .hpbar { border-radius: 2px; }
h4 { font: 600 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--dp); }
/* ---------- character sheet (datapad layout) ---------- */
.dp { gap: 12px; }
.dp-label { font: 600 10.5px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--dp); margin-bottom: 8px; }
.dp-k { font: 600 10px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--dp-dim); }
.dp-panel { padding: 12px 14px; }
.dp-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 14px 18px; }
.dp-ident h2 { font: 700 24px var(--font-display); letter-spacing: .04em; color: var(--dp-ink); text-shadow: 0 0 14px rgba(92, 203, 255, .35); }
.dp-line { color: var(--dp-dim); font-size: 13.5px; }
.dp-lvl { font: 600 11px var(--font-display); letter-spacing: .12em; color: var(--dp); text-transform: uppercase; }
.dp-headact { gap: 8px; align-items: flex-end; margin-left: auto; }
.dp-tools { justify-content: flex-end; gap: 6px; }
.dp-head .avatar.lg { width: 86px; height: 86px; border-radius: 8px; border: 1px solid var(--dp); box-shadow: 0 0 18px rgba(92, 203, 255, .35); }
.dp-head .portraitedit { border-radius: 4px; }
.dp-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dp-abils { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.dp-abil { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 0; background: var(--brk), var(--dp-bg); border: 1px solid var(--dp-line); border-radius: var(--r); --brk-c: rgba(92, 203, 255, .7); }
.dp-abil .dp-k { font-size: 9.5px; text-align: center; }
.dp-mod { background: none; border: 0; color: var(--dp-ink); font: 700 26px var(--font-body); font-variant-numeric: tabular-nums; padding: 0 6px; line-height: 1.2; cursor: pointer; border-radius: 4px; }
.dp-mod:hover { color: #fff; text-shadow: 0 0 12px rgba(92, 203, 255, .8); background: rgba(92, 203, 255, .08); }
.dp-score { min-width: 34px; text-align: center; font: 600 12px var(--font-body); color: var(--dp); border: 1px solid var(--dp-line-2); border-radius: 999px; padding: 0 8px; margin-bottom: -9px; background: #04101b; }
.dp-abil { margin-bottom: 9px; }
.dp-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dp-stat { padding: 8px 6px; text-align: center; cursor: pointer; color: var(--dp-ink); }
.dp-stat .k { font: 600 10px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--dp-dim); }
.dp-stat .v { font: 700 26px var(--font-body); font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--dp-ink); }
.dp-stat:hover { border-color: var(--dp-line-2); }
.dp-static { cursor: default; }
.dp-shield { clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); padding-bottom: 18px; border-color: var(--dp-line-2); }
.dp-hp { padding: 10px 14px; }
.dp-hpmain { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.dp-hpctl { display: grid; grid-template-rows: auto auto auto; gap: 4px; width: 92px; }
.dp-hpctl input { width: 100%; text-align: center; height: 30px; }
.dp-hpctl .btn { width: 100%; justify-content: center; }
.dp-hpnums { display: flex; align-items: flex-end; gap: 12px; text-align: center; }
.dp-hpnums > div { display: flex; flex-direction: column; align-items: center; }
.dp-big { font: 700 32px var(--font-body); line-height: 1.1; color: var(--dp-ink); }
.dp-temp { color: var(--dp-dim); font-size: 24px; }
.dp-slash { font: 300 30px var(--font-body); color: var(--dp-dim); padding-bottom: 2px; }
.dp-more { margin-top: 6px; }
.dp-more > summary { cursor: pointer; }
.dp-more[open] > summary { margin-bottom: 6px; }
.dp-savegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dp-saverow, .dp-skill { display: flex; align-items: center; gap: 8px; }
.dp-saverow { border: 1px solid var(--dp-line); border-radius: 4px; padding: 3px 4px 3px 8px; }
.dp-ab { font: 600 10.5px var(--font-display); letter-spacing: .08em; color: var(--dp-dim); min-width: 30px; }
.dp-saverow .dp-ab { flex: 1; }
.dp-bonus { margin-left: auto; min-width: 44px; height: 26px; border: 1px solid var(--dp-line-2); background: rgba(92, 203, 255, .06); color: var(--dp-ink); border-radius: 4px; font: 600 13.5px var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 6px; }
.dp-bonus:hover { background: rgba(92, 203, 255, .18); border-color: var(--dp); }
.dp-skills { display: flex; flex-direction: column; gap: 0; }
.dp-skill { padding: 4px 0; border-bottom: 1px solid rgba(92, 203, 255, .1); }
.dp-skill:last-child { border-bottom: 0; }
.dp-senses { display: flex; flex-direction: column; gap: 5px; }
.dp-sense { display: flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--dp-line); border-radius: 4px; padding: 4px 8px; color: var(--dp-ink); font-size: 12.5px; text-align: left; }
.dp-sense b { min-width: 24px; text-align: center; font-size: 15px; color: var(--dp); }
button.dp-sense { cursor: pointer; }
.dp-profs > div { font-size: 12.5px; color: var(--dp-ink); margin-bottom: 6px; }
.dp-sub { display: block; font: 600 9.5px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--dp-dim); }
.dp-combat { display: grid; grid-template-columns: 110px 110px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.dp-defcond { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; padding: 10px 12px; }
.dp-defcond .dp-label { margin-bottom: 4px; }
.dp .condbar { border: 0; padding: 0; background: none; }
.dp-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.dp-meter { background: var(--dp-bg); border: 1px solid var(--dp-line); border-radius: var(--r); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.dp-track { height: 6px; background: rgba(92, 203, 255, .1); border-radius: 1px; overflow: hidden; }
.dp-track span { display: block; height: 100%; background: var(--dp); box-shadow: 0 0 8px rgba(92, 203, 255, .7); }
.dp-tabs { padding: 4px 12px 12px; }
.dp-tabs > .tabs { margin: 0 -12px 12px; padding: 0 6px; }
.dp-body { gap: 10px; }
.dp-body.wide { grid-template-columns: 236px 250px minmax(0, 1fr); }
.dp-col1, .dp-col2 { gap: 10px; }
.dp .actgroup { border-color: var(--dp-line); }
.dp .actrow { background: rgba(92, 203, 255, .025); border-bottom-color: rgba(92, 203, 255, .12); }
.dp .actrow.atk { box-shadow: inset 2px 0 0 var(--dp); }
.dp .acthead { font-family: var(--font-display); color: var(--dp); letter-spacing: .14em; }
.dp .actgo.pri { min-width: 56px; }
@media (max-width: 700px) {
  .dp-head { padding: 12px; gap: 10px; }
  .dp-head .avatar.lg { width: 60px; height: 60px; }
  .dp-ident h2 { font-size: 19px; }
  .dp-headact { margin-left: 0; align-items: stretch; width: 100%; }
  .dp-tools, .dp-headact > .row { justify-content: flex-start; }
  .dp-abils { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dp-mod { font-size: 22px; }
  .dp-combat { grid-template-columns: 1fr 1fr; }
  .dp-defcond { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .dp-big { font-size: 28px; }
}
.dp-compact .dp-abils { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dp-compact .dp-top { grid-template-columns: minmax(0, 1fr); }
.dp-compact .dp-mini { grid-template-columns: 1fr 1fr; }
.dp-compact .dp-combat { grid-template-columns: 1fr 1fr; }
.dp-compact .dp-defcond { grid-column: 1 / -1; grid-template-columns: 1fr; }
.dp-compact .dp-headact { margin-left: 0; align-items: stretch; }
.dp-compact .dp-tools, .dp-compact .dp-headact > .row { justify-content: flex-start; }
.dp-top { align-items: start; }
.dp-abil { padding: 10px 4px 0; min-height: 96px; justify-content: center; }
.dp-abbr { display: none; }
@media (max-width: 1500px) { .dp-wide .dp-full { display: none; } .dp-wide .dp-abbr { display: block; font-size: 11px; } }
@media (max-width: 1239px) { .dp-full { display: none; } .dp-abbr { display: block; font-size: 11px; } }
.dp-shield { padding-bottom: 26px; }
.dp-shield .small { font-size: 11px; line-height: 1.2; }
.dp-extra { position: relative; }
.dp-extra > summary { list-style: none; cursor: pointer; }
.dp-extra > summary::-webkit-details-marker { display: none; }
.dp-extramenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; display: flex; flex-direction: column; gap: 6px; padding: 10px; min-width: 200px; background: var(--brk), #061321; border: 1px solid var(--dp-line-2); border-radius: var(--r); box-shadow: 0 14px 40px rgba(0, 0, 0, .6); }
.dp-extramenu .btn { justify-content: flex-start; }
@media (max-width: 700px) { .dp-extramenu { right: auto; left: 0; } }
.dp-compact .dp-top { align-items: start; }

.dp { container-type: inline-size; }
.dp-ident { min-width: 220px; }
@container (max-width: 619px) { .dp-hp { order: -1; } .dp-abils { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dp-combat { grid-template-columns: 1fr 1fr; } .dp-defcond { grid-column: 1 / -1; grid-template-columns: 1fr; } }
@container (min-width: 620px) { .dp-top { grid-template-columns: 180px minmax(0, 1fr); } .dp-abils { grid-column: 1 / -1; } .dp-mini { grid-template-columns: 1fr; } }
@container (min-width: 1000px) { .dp-top { grid-template-columns: minmax(0, 1fr) 180px minmax(280px, 340px); align-items: stretch; } .dp-abils { grid-column: auto; height: 100%; } .dp-abil { margin-bottom: 9px; } }

/* =====================================================================
   v15 · DATAPAD+ — scene backdrops, class color, hex badges, readouts
   ===================================================================== */
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }
:root { --am: #ffb648; --hpg: #46e0a0; --mono: "JetBrains Mono", ui-monospace, monospace; }
.dp { --cls: #5ccbff; position: relative; isolation: isolate; }
.dp > * { position: relative; z-index: 1; }
.dp > .dp-backdrop { position: absolute; z-index: 0; left: -28px; right: -28px; top: -18px; height: max(100%, 980px); max-height: 1600px; background-size: cover; background-position: center top; border-radius: 14px; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 100%); }
.dp > .dp-backdrop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 50% 25%, transparent 35%, rgba(2, 6, 11, .55) 80%, rgba(2, 6, 11, .9) 100%), repeating-linear-gradient(180deg, rgba(92, 203, 255, .03) 0 1px, transparent 1px 3px); }
/* translucent panels so the scene shows through; brackets only on .br panels */
.dp .dp-panel, .dp .sheet-head, .dp .vital, .dp .dp-meter { background: linear-gradient(180deg, rgba(14, 34, 52, .56), rgba(5, 14, 24, .7)); border: 1px solid rgba(92, 203, 255, .2); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.dp .dp-panel:not(.br), .dp .vital:not(.br) { --brk: none; }
.dp .br { background: var(--brk), linear-gradient(180deg, rgba(14, 34, 52, .56), rgba(5, 14, 24, .7)); }
.dp-serial { position: absolute; top: 6px; right: 10px; font: 500 9px var(--mono); letter-spacing: .12em; color: rgba(134, 180, 201, .55); pointer-events: none; }
.dp .dp-label { font-size: 10px; letter-spacing: .18em; }
/* header */
.dp-head .avatar.lg { border: 2px solid var(--cls); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cls) 14%, transparent), 0 0 26px color-mix(in srgb, var(--cls) 40%, transparent); border-radius: 10px; }
.dp-namerow { gap: 10px; align-items: center; flex-wrap: nowrap; }
.dp-emblem { display: inline-flex; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cls) 60%, transparent)); }
.dp-ident h2 { font-size: 28px; letter-spacing: .06em; text-transform: uppercase; }
.dp-id { font: 600 11px var(--mono); letter-spacing: .16em; color: var(--cls); }
.dp .btn.pri { background: var(--am); border-color: var(--am); color: #1d1203; box-shadow: 0 0 16px rgba(255, 182, 72, .35); }
.dp .btn.pri:hover { box-shadow: 0 0 22px rgba(255, 182, 72, .55); }
/* hex ability badges */
.dp-abils { padding: 16px 12px 20px; gap: 6px; }
.dp .dp-abil { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; margin-bottom: 0; gap: 6px; }
.dp-abil .dp-k { color: var(--dp); font-size: 9.5px; letter-spacing: .14em; }
.dp-mod { position: relative; width: 82px; height: 92px; display: grid; place-items: center; padding: 0; background: none; }
.dp-mod:hover { background: none; }
.dp-hexsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dp-hexsvg polygon { fill: rgba(92, 203, 255, .06); stroke: rgba(92, 203, 255, .7); stroke-width: 1.2; transition: fill .15s, stroke .15s; }
.dp-hexsvg polygon.in { fill: none; stroke: rgba(92, 203, 255, .2); }
.dp-modv { position: relative; font: 700 29px var(--mono); color: #fff; text-shadow: 0 0 14px rgba(92, 203, 255, .6); }
.dp-mod:hover .dp-modv { color: var(--am); text-shadow: 0 0 14px rgba(255, 182, 72, .7); }
.dp-mod:hover .dp-hexsvg polygon:not(.in) { fill: rgba(255, 182, 72, .1); stroke: var(--am); }
.dp-abil.top .dp-hexsvg polygon:not(.in) { stroke: var(--cls); fill: color-mix(in srgb, var(--cls) 12%, transparent); }
.dp-abil.top .dp-hexsvg polygon.in { stroke: color-mix(in srgb, var(--cls) 40%, transparent); }
.dp-abil.top .dp-score { color: var(--cls); border-color: color-mix(in srgb, var(--cls) 60%, transparent); }
.dp-mod .chip { position: absolute; top: 2px; right: -4px; }
.dp .dp-score { font: 700 11px var(--mono); margin-top: -18px; margin-bottom: 0; position: relative; }
@container (min-width: 1000px) { .dp-abils { align-content: center; } }
/* mini stats */
.dp-stat .v { font-family: var(--mono); font-weight: 700; }
.dp-amber { color: var(--am); text-shadow: 0 0 12px rgba(255, 182, 72, .45); }
/* HP readout */
.dp-hp { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 14px; }
.dp-hp .dp-label { margin: 0; }
.dp-hpmain { justify-content: flex-start; gap: 16px; flex-wrap: nowrap; }
.dp-hpread { display: flex; flex-direction: column; gap: 2px; }
.dp-hpn { display: flex; align-items: flex-end; gap: 8px; }
.dp-hpcur { font: 700 54px/1 var(--mono); color: #c9ffe8; text-shadow: 0 0 22px rgba(70, 224, 160, .55); }
.dp-hpmax { font: 700 24px var(--mono); color: var(--dp-dim); padding-bottom: 5px; }
.dp-hpsub { font: 500 11px var(--mono); letter-spacing: .08em; color: var(--dp-dim); }
.dp-seg { display: flex; gap: 3px; }
.dp-seg i { flex: 1; height: 9px; background: var(--hpg); box-shadow: 0 0 8px rgba(70, 224, 160, .55); border-radius: 1px; }
.dp-seg i.off { background: rgba(70, 224, 160, .1); box-shadow: none; }
.dp-seg i.tmp { flex: 0 0 18px; background: #8fd7ff; box-shadow: 0 0 8px rgba(143, 215, 255, .6); }
.hp-hurt .dp-hpcur { color: #ffe1a6; text-shadow: 0 0 22px rgba(255, 182, 72, .55); }
.hp-hurt .dp-seg i:not(.off):not(.tmp) { background: var(--am); box-shadow: 0 0 8px rgba(255, 182, 72, .6); }
.hp-crit .dp-hpcur, .hp-down .dp-hpcur { color: #ffc0c6; text-shadow: 0 0 22px rgba(255, 90, 106, .6); }
.hp-crit .dp-seg i:not(.off):not(.tmp) { background: var(--red); box-shadow: 0 0 8px rgba(255, 90, 106, .7); }
.dp-hp .btn.good { color: #9ff3cf; }
.dp-hp .btn.danger { color: #ffb1b9; background: rgba(255, 90, 106, .1); border-color: rgba(255, 90, 106, .5); }
/* rows instead of boxes */
.dp-rows { display: flex; flex-direction: column; }
.dp .dp-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border: 0; border-bottom: 1px solid rgba(92, 203, 255, .09); border-radius: 0; background: none; color: var(--dp-ink); font-size: 13.5px; text-align: left; width: 100%; }
.dp .dp-row:last-child { border-bottom: 0; }
.dp .dp-row .dp-ab { min-width: 32px; flex: none; }
.dp-sv { min-width: 26px; font: 700 15px var(--mono); color: var(--dp); }
.dp-sense { cursor: default; } button.dp-sense { cursor: pointer; }
.dp .pdot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--dp-dim); background: none; flex: none; }
.dp .pdot.p { background: var(--dp); border-color: var(--dp); box-shadow: 0 0 8px var(--dp); }
.dp .pdot.e { background: var(--cls); border-color: var(--cls); box-shadow: 0 0 8px var(--cls); }
.dp .dp-bonus { color: var(--am); border-color: rgba(255, 182, 72, .35); background: rgba(255, 182, 72, .07); font-family: var(--mono); }
.dp .dp-bonus:hover { background: rgba(255, 182, 72, .18); border-color: var(--am); }
/* AC shield */
.dp .dp-shield { clip-path: none; background: none; border: 0; box-shadow: none; padding: 16px 8px 30px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; }
.dp-shieldsvg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.dp-shieldsvg path { fill: rgba(10, 28, 44, .85); stroke: var(--dp); stroke-width: 1.5; }
.dp-shieldsvg path.in { fill: none; stroke: rgba(92, 203, 255, .25); stroke-width: 1; }
.dp .dp-shield .v { font-size: 38px; color: #fff; text-shadow: 0 0 16px rgba(92, 203, 255, .6); }
.dp .dp-shield .small { max-width: 90px; font-size: 10px; line-height: 1.2; }
.dp .dp-shield:hover .dp-shieldsvg path:not(.in) { stroke: var(--am); }
.dp-combat { grid-template-columns: 116px 130px minmax(0, 1fr); }
/* force points */
.dp-fseg { display: flex; gap: 3px; }
.dp-fseg i { flex: 1; height: 12px; background: linear-gradient(180deg, #9ce4ff, var(--dp)); box-shadow: 0 0 8px rgba(92, 203, 255, .55); border-radius: 1px; }
.dp-fseg i.off { background: rgba(92, 203, 255, .1); box-shadow: none; }
.dp-meter .num { font-family: var(--mono); font-size: 17px; }
/* tabs + actions pick up amber for rolls */
.dp .actgo.pri { background: var(--am); border-color: var(--am); color: #1d1203; font-family: var(--mono); box-shadow: 0 0 12px rgba(255, 182, 72, .3); }
.dp .acthead { color: var(--dp); }
/* background picker */
.bdpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.bdopt { display: flex; flex-direction: column; gap: 4px; align-items: stretch; background: none; border: 1px solid rgba(92, 203, 255, .2); border-radius: 6px; padding: 5px; color: var(--dp-ink); font-size: 11.5px; cursor: pointer; text-align: center; }
.bdopt.on { border-color: var(--am); box-shadow: 0 0 0 1px var(--am); }
.bdthumb { display: grid; place-items: center; height: 54px; border-radius: 4px; background-size: cover; background-position: center; background-color: #061321; font-size: 18px; color: var(--dp); }
.bdthumb.none { background: repeating-linear-gradient(45deg, #061321 0 6px, #0a1d2e 6px 12px); }
@container (max-width: 619px) { .dp-mod { width: 72px; height: 80px; } .dp-modv { font-size: 24px; } .dp-hpcur { font-size: 44px; } .dp-combat { grid-template-columns: 1fr 1fr; } }
.dp-compact .dp-mod { width: 66px; height: 74px; } .dp-compact .dp-modv { font-size: 22px; } .dp-compact .dp-hpcur { font-size: 40px; }
@media (max-width: 700px) { .dp > .dp-backdrop { left: -8px; right: -8px; } }

/* =====================================================================
   v16 · HOLO DECK — location backdrop, holograms, transmissions
   ===================================================================== */
.appbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.appbg-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .9; }
.appbg-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 35%, transparent 30%, rgba(2, 6, 11, .55) 78%, rgba(2, 6, 11, .95) 100%), linear-gradient(180deg, rgba(2, 6, 11, .1), rgba(2, 6, 11, .45)); }
.appbg-dust i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #bfe9ff; opacity: .35; animation: hdrift 18s linear infinite; }
@keyframes hdrift { from { transform: translateY(20px); } to { transform: translateY(-140px); opacity: 0; } }
.shell > .side, .shell > .main { position: relative; z-index: 1; }
.side { background: linear-gradient(180deg, rgba(4, 14, 24, .88), rgba(3, 9, 16, .92)); }
/* all panels translucent like the sheet */
.card, .deck-hero, .itemdetail, .charcard, .unit, .msg, .detail, .qa { background: var(--brk), linear-gradient(180deg, rgba(14, 34, 52, .6), rgba(5, 14, 24, .74)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.charcard, .unit, .msg, .detail, .qa { --brk: none; }
.cmd .card, .cmd .deck-hero { animation: holoboot .7s ease both; }
.cmd .card:nth-child(2) { animation-delay: .05s; } .cmd .card:nth-child(3) { animation-delay: .1s; } .cmd .card:nth-child(4) { animation-delay: .15s; }
@keyframes holoboot { 0% { opacity: 0; filter: brightness(2); } 20% { opacity: .6; } 30% { opacity: .2; } 60% { opacity: 1; filter: none; } 100% { opacity: 1; } }
.nofx .cmd .card, .nofx .cmd .deck-hero { animation: none; }
.nofx body::after, body.nofx::after { display: none; }
@media (prefers-reduced-motion: reduce) { .page .card, .page .deck-hero, .page .charcard, .hcube.spin .hcube-c, .hfig, .hglobe-s::before, .hglobe-r, .appbg-dust i, .txwrap { animation: none !important; } }
.card { position: relative; }
.card > .dp-serial, .deck-hero > .dp-serial { z-index: 2; }
/* holocron cube */
.hcube { --hc: var(--dp); display: inline-block; perspective: 220px; flex: none; }
.hcube-c { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(35deg); transition: transform .7s var(--ease); }
.hcube.spin .hcube-c { animation: hspin 9s linear infinite; }
.nofx .hcube.spin .hcube-c { animation: none; }
.hcube-f { position: absolute; inset: 0; border: 1.5px solid var(--hc); background: color-mix(in srgb, var(--hc) 12%, transparent); box-shadow: inset 0 0 10px color-mix(in srgb, var(--hc) 45%, transparent); }
@keyframes hspin { from { transform: rotateX(-20deg) rotateY(0); } to { transform: rotateX(-20deg) rotateY(360deg); } }
.qa:hover .hcube-c { transform: rotateX(-22deg) rotateY(215deg); }
.side-brand .brand small { display: block; margin: 2px 0 0; font: 600 9px var(--mono); letter-spacing: .12em; }
.side-brand { gap: 14px; }
/* nav codes + status lights */
.side-nav a { position: relative; }
.navcode { margin-left: auto; font: 500 9px var(--mono); letter-spacing: .1em; color: rgba(134, 180, 201, .5); }
.navled { width: 7px; height: 7px; border-radius: 50%; background: #17303e; flex: none; }
.navled.g { background: var(--green); box-shadow: 0 0 8px var(--green); }
.navled.a { background: var(--am); box-shadow: 0 0 8px var(--am); }
.navled.blink { animation: hblink 1.2s infinite; }
@keyframes hblink { 50% { opacity: .25; } }
.side-min .navcode, .side-min .navled { display: none; }
/* command hero + party hologram */
.cmd-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); align-items: center; gap: 14px; padding: 24px 28px; min-height: 290px; }
.cmd-hero::before, .cmd-hero::after { content: none; }
.cmd-hello { display: flex; flex-direction: column; gap: 6px; }
.cmd-hello .eyebrow { font: 600 11px var(--mono); letter-spacing: .16em; color: var(--dp); }
.cmd-hello h2 { font: 700 30px var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--dp-ink); text-shadow: 0 0 18px rgba(92, 203, 255, .35); margin: 2px 0; }
.cmd-hello .row { margin-top: 10px; }
.cmd-hero .btn.pri, .cmd .btn.pri { background: var(--am); border-color: var(--am); color: #1d1203; box-shadow: 0 0 16px rgba(255, 182, 72, .35); }
.cmd-loc { color: var(--dp-ink); }
.partyholo { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 250px; padding-bottom: 30px; }
.ph-base { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: min(460px, 96%); height: 46px; border-radius: 50%; background: radial-gradient(ellipse, rgba(92, 203, 255, .55), rgba(92, 203, 255, .08) 60%, transparent 70%); box-shadow: 0 0 40px rgba(92, 203, 255, .3); }
.ph-base::after { content: ""; position: absolute; inset: 14px 15%; border-radius: 50%; border: 1px solid rgba(92, 203, 255, .7); }
.ph-cone { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: min(460px, 96%); height: 240px; background: linear-gradient(0deg, rgba(92, 203, 255, .2), transparent 85%); clip-path: polygon(10% 100%, 90% 100%, 100% 0, 0 0); pointer-events: none; }
.ph-figs { position: relative; display: flex; gap: 22px; align-items: flex-end; justify-content: center; flex-wrap: nowrap; }
.hfig { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; animation: hflick 6s infinite; --cls: var(--dp); }
.hfig:nth-child(2) { animation-delay: 1.7s; } .hfig:nth-child(3) { animation-delay: 3.1s; } .hfig:nth-child(4) { animation-delay: 4.4s; }
.nofx .hfig { animation: none; }
@keyframes hflick { 0%, 92%, 100% { opacity: .95; } 93% { opacity: .35; } 94% { opacity: .9; } 96% { opacity: .55; } 97% { opacity: .95; } }
.hsil { width: 80px; height: 108px; filter: drop-shadow(0 0 10px rgba(92, 203, 255, .8)); }
.hsil circle, .hsil path { fill: rgba(92, 203, 255, .3); stroke: #7fd9ff; stroke-width: 1.3; }
.hfig-img { position: relative; width: 78px; height: 104px; display: block; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); filter: drop-shadow(0 0 10px rgba(92, 203, 255, .7)); }
.hfig-img span { position: absolute; inset: 0; background-size: cover; background-position: center top; filter: grayscale(1) sepia(1) hue-rotate(160deg) saturate(3.2) brightness(1.05) contrast(1.1); opacity: .85; border-radius: 40% 40% 6px 6px; }
.hfig-img::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(200, 240, 255, .18) 0 1px, transparent 1px 3px); border-radius: 40% 40% 6px 6px; }
.hfig-n { font: 700 11.5px var(--font-display); letter-spacing: .12em; color: #dff6ff; text-shadow: 0 0 8px var(--dp); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.hfig-c { font: 500 9.5px var(--mono); color: var(--cls); letter-spacing: .1em; white-space: nowrap; }
.hfig-hp { width: 78px; height: 4px; background: rgba(70, 224, 160, .15); }
.hfig-hp span { display: block; height: 100%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.hfig-hp span.hurt { background: var(--am); box-shadow: 0 0 6px var(--am); } .hfig-hp span.crit { background: var(--red); box-shadow: 0 0 6px var(--red); }
.hfig.down .hsil circle, .hfig.down .hsil path { fill: rgba(255, 90, 106, .3); stroke: var(--red); }
.hfig.down .hfig-img span { filter: grayscale(1) sepia(1) hue-rotate(-30deg) saturate(4); }
.hfig.down { animation-duration: 1.6s; }
.hfig.ghost { opacity: .35; animation: none; }
.hfig.ghost .hsil { filter: none; } .hfig.ghost .hsil circle, .hfig.ghost .hsil path { fill: none; stroke-dasharray: 4 4; }
/* crew ID cards */
.idgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.idcard { position: relative; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; overflow: hidden; border-radius: 8px; padding: 12px 12px 12px 16px; }
.idcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cls); box-shadow: 0 0 12px var(--cls); }
.idcard.party { opacity: .8; }
.idph { position: relative; width: 58px; height: 72px; border-radius: 6px; border: 1px solid var(--cls); overflow: hidden; display: grid; place-items: center; background: linear-gradient(180deg, rgba(92, 203, 255, .25), rgba(92, 203, 255, .05)); }
.idph span { position: absolute; inset: 0; background-size: cover; background-position: center top; filter: saturate(.85) contrast(1.05); }
.idph::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 3px); }
.idph b { font: 700 24px var(--font-display); color: var(--cls); }
.idname { font: 700 14px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.idtag { font: 500 10px var(--mono); color: var(--cls); letter-spacing: .1em; }
.idstats { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font: 600 12px var(--mono); color: var(--dp-dim); }
.idstats em { font-style: normal; color: var(--dp-ink); }
.idcard .unit-act { flex-direction: row; margin-top: 6px; }
/* status panel */
.cmd-status { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 12px; }
.cmd .readout { margin: 0; background: none; }
.cmd .readout dt { font: 600 9.5px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--dp-dim); }
.cmd .readout dd { font: 700 14px var(--mono); }
.cmd-warn { color: var(--am); }
.hglobe { --gt: var(--dp); position: relative; width: 124px; height: 124px; }
.hglobe-s { position: absolute; inset: 8px; border-radius: 50%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gt) 75%, transparent); background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--gt) 55%, white 10%), color-mix(in srgb, var(--gt) 14%, transparent) 55%, transparent 78%); box-shadow: 0 0 30px color-mix(in srgb, var(--gt) 35%, transparent), inset 0 0 20px color-mix(in srgb, var(--gt) 40%, transparent); }
.hglobe-s::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 12px, color-mix(in srgb, var(--gt) 40%, transparent) 12px 13px); animation: hglobe 7s linear infinite; }
.hglobe-s::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 15px, color-mix(in srgb, var(--gt) 25%, transparent) 15px 16px); }
@keyframes hglobe { from { background-position: 0 0; } to { background-position: 124px 0; } }
.hglobe-r { position: absolute; inset: -2px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--gt) 45%, transparent); animation: hring 20s linear infinite; }
@keyframes hring { to { transform: rotate(360deg); } }
.nofx .hglobe-s::before, .nofx .hglobe-r { animation: none; }
/* ship's log */
.cmd .feed-row { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(92, 203, 255, .09); background: none; align-items: center; }
.cmd .feed-row:last-child { border-bottom: 0; }
.cmd .feed-row time { font: 500 11px var(--mono); color: var(--dp-dim); }
.cmd .feed-num { font: 700 12px var(--mono); color: var(--am); border: 1px solid rgba(255, 182, 72, .4); border-radius: 4px; padding: 0 6px; background: none; }
/* quick access */
.cmd .qa { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 0; border: 1px solid rgba(92, 203, 255, .2); border-radius: 8px; }
.cmd .qa .hcube { grid-row: span 2; margin-right: 2px; }
.cmd .qa b { flex: 1 1 60%; }
.cmd .qa span:not(.hcube):not(.hcube-c):not(.hcube-f) { flex: 1 0 100%; padding-left: 44px; font-size: 12px; color: var(--dp-dim); margin-top: -2px; }
.cmd .qa:hover { border-color: var(--dp); }
/* transmissions */
.txwrap { position: fixed; right: 24px; bottom: 24px; z-index: 120; width: min(360px, calc(100vw - 32px)); animation: txin .9s ease both; --tx: var(--dp); }
.txwrap.amber { --tx: var(--am); }
@keyframes txin { 0% { opacity: 0; transform: scaleY(.02); } 25% { opacity: 1; transform: scaleY(.02); } 45% { transform: scaleY(1); } 55% { opacity: .4; } 62% { opacity: 1; } }
.nofx .txwrap { animation: none; }
.txcard { position: relative; padding: 14px 16px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--tx, var(--am)) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--tx, var(--am)) 16%, rgba(6, 14, 24, .9)), rgba(5, 10, 18, .94)); box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 26px color-mix(in srgb, var(--tx, var(--am)) 22%, transparent); display: flex; flex-direction: column; gap: 6px; }
.txrow { gap: 12px; align-items: center; flex-wrap: nowrap; }
.txfig .hsil { width: 54px; height: 72px; }
.txwrap.amber .txfig .hsil circle, .txwrap.amber .txfig .hsil path { fill: rgba(255, 182, 72, .3); stroke: var(--am); }
.txwrap.amber .txfig .hsil { filter: drop-shadow(0 0 10px rgba(255, 182, 72, .8)); }
.tx-img { width: 54px; height: 72px; }
.txwrap.amber .tx-img span { filter: grayscale(1) sepia(1) hue-rotate(-10deg) saturate(3) brightness(1.05); }
.txst { font: 600 10px var(--mono); letter-spacing: .16em; color: var(--tx, var(--am)); }
.txh { font: 700 17px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--dp-ink); }
.txsub { color: var(--dp-dim); }
.txstatic { height: 3px; background: repeating-linear-gradient(90deg, var(--tx, var(--am)) 0 6px, transparent 6px 10px); opacity: .6; animation: txstat .3s steps(3) infinite; margin: 4px 0; }
@keyframes txstat { to { background-position: 10px 0; } }
.nofx .txstatic { animation: none; }
.remind.init.txcard { --tx: var(--am); }
.remind.init.txcard .txh { font-size: 15px; }
/* empty states get a little holocron */
.empty::before { content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 10px; border: 1.5px solid var(--dp); transform: rotate(45deg); box-shadow: 0 0 12px rgba(92, 203, 255, .5), inset 0 0 8px rgba(92, 203, 255, .4); opacity: .7; }
.locpick { gap: 8px; }
@media (max-width: 900px) {
  .cmd-hero { grid-template-columns: 1fr; padding: 18px; }
  .partyholo { min-height: 210px; }
  .ph-figs { gap: 10px; } .hfig { width: 74px; } .hsil { width: 64px; height: 86px; } .hfig-img { width: 62px; height: 84px; }
  .cmd-hello h2 { font-size: 22px; }
  .cmd-status { grid-template-columns: 96px minmax(0, 1fr); } .hglobe { width: 92px; height: 92px; }
  .txwrap { right: 12px; bottom: 76px; }
}
.txcard { background: linear-gradient(180deg, color-mix(in srgb, var(--tx, var(--am)) 14%, #071019), #050a12); }
.remind.init.txcard { background: linear-gradient(180deg, color-mix(in srgb, var(--am) 14%, #071019), #050a12); }
@media (max-width: 900px) { .hfig-n { font-size: 9.5px; max-width: 74px; } .hfig.ghost .hfig-c { display: none; } .hfig-c { font-size: 8.5px; } }
/* performance: no live blur behind panels (the animated backdrop would force constant re-blurring) */
.card, .deck-hero, .itemdetail, .charcard, .unit, .msg, .detail, .qa, .dp .dp-panel, .dp .sheet-head, .turnpanel, .modal, .popover, .tokmenu { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* on the busy map screen the decorative motion rests (saves battery; the map and dice animate instead) */
.route-table .appbg-dust, .route-table .appbg { display: none; }
.route-table .hcube.spin .hcube-c { animation: none; }
.secureprompt { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 115; width: min(460px, calc(100vw - 24px)); animation: txin .8s ease both; --tx: var(--dp); }
.secureprompt .txcard { gap: 8px; }
.joinstep { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid rgba(92, 203, 255, .15); }
.joinstep:first-of-type { border-top: 0; }
.joinstep > b { font: 600 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--dp); }

/* =====================================================================
   v17 · SECTIONS, ICONS, BUILDER TERMINAL, COMPENDIUM CARDS
   ===================================================================== */
body { --sec: #5ccbff; }
body[data-sec="home"] { --sec: #ffb648; } body[data-sec="characters"] { --sec: #e8c66a; } body[data-sec="table"] { --sec: #5ccbff; }
body[data-sec="compendium"] { --sec: #7fd66b; } body[data-sec="assistant"] { --sec: #ff6a5a; }
.main { --brk-c: color-mix(in srgb, var(--sec) 85%, white 0%); }
.side-nav a.on { background: color-mix(in srgb, var(--sec) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec) 40%, transparent); }
.side-nav a.on::before { background: var(--sec); box-shadow: 0 0 12px var(--sec); }
.side-nav a.on .ico { color: var(--sec); filter: drop-shadow(0 0 6px var(--sec)); }
.navled.g { background: var(--sec); box-shadow: 0 0 8px var(--sec); }
/* big page titles */
.hdr-title h1 { font: 700 21px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--dp-ink); display: flex; align-items: baseline; gap: 10px; position: relative; padding-bottom: 4px; }
.hdr-title h1::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 120px; height: 2px; background: linear-gradient(90deg, var(--sec), transparent); box-shadow: 0 0 8px var(--sec); }
.hdr-code { font: 600 11px var(--mono); letter-spacing: .14em; color: var(--sec); }
.hdr-sub { color: var(--dp-dim); }
/* panel title bars */
.card > .card-h, .cmd .card-h { margin: -16px -18px 12px; padding: 10px 18px 9px; border-bottom: 1px solid color-mix(in srgb, var(--sec) 22%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--sec) 12%, transparent), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 5px); border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; }
.card > .card-h h4 { color: var(--sec); }
.card > .card-h::after { content: ""; position: absolute; left: 18px; bottom: -1px; width: 40px; height: 2px; background: var(--sec); box-shadow: 0 0 8px var(--sec); }
.dmgroups { position: relative; padding-top: 6px; }
.dmgroups::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: repeating-linear-gradient(135deg, var(--am) 0 6px, transparent 6px 12px); opacity: .7; }
/* holo icons */
.holoicon { --hi: var(--dp); position: relative; display: inline-grid; place-items: center; color: var(--hi); flex: none; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--hi) 70%, transparent)); }
.holoicon svg { width: 100%; height: 100%; overflow: visible; }
.holoicon::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); pointer-events: none; mix-blend-mode: multiply; }
.qa .holoicon, .cats .holoicon { animation: hflick 7s infinite; }
.qa:nth-child(2n) .holoicon { animation-delay: 2.3s; } .qa:nth-child(3n) .holoicon { animation-delay: 4.1s; }
.nofx .holoicon { animation: none !important; }
.cmd .qa { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; }
.cmd .qa .holoicon { grid-row: span 2; width: 38px !important; height: 38px !important; }
.cmd .qa b { align-self: end; }
.cmd .qa span:not(.holoicon) { padding-left: 0 !important; margin: 0; font-size: 12px; color: var(--dp-dim); align-self: start; flex: none; }
.cmd .qa:hover .holoicon { transform: scale(1.08); transition: transform .2s; }
/* recruit empty state */
.recruit { display: flex; align-items: center; gap: 20px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--sec) 35%, transparent); border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--sec) 8%, transparent), transparent); }
.recruit-fig { position: relative; width: 70px; height: 96px; flex: none; animation: hflick 4s infinite; }
.recruit-fig .hsil { width: 70px; height: 94px; }
.recruit-fig .hsil circle, .recruit-fig .hsil path { fill: color-mix(in srgb, var(--sec) 22%, transparent); stroke: var(--sec); stroke-dasharray: 5 3; }
.recruit-scan { position: absolute; left: -6px; right: -6px; height: 2px; background: var(--sec); box-shadow: 0 0 10px var(--sec); animation: rscan 2.4s ease-in-out infinite; }
@keyframes rscan { 0%, 100% { top: 4px; } 50% { top: 88px; } }
.nofx .recruit-scan, .nofx .recruit-fig { animation: none; }
.recruit-h { font: 700 17px var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.recruit .btn.pri { background: var(--am); border-color: var(--am); color: #1d1203; }
/* holotable projector (no scene) */
.projector { position: relative; width: min(560px, 92%); aspect-ratio: 1.4; display: grid; place-items: center; }
.proj-galaxy { position: absolute; inset: 6% 12% 22%; border-radius: 50%; animation: hring 60s linear infinite; }
.proj-galaxy i { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #bfe9ff; box-shadow: 0 0 6px #5ccbff; transform: rotate(var(--a)) translateX(var(--r)); opacity: .8; }
.pg-core { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: radial-gradient(circle, rgba(220, 245, 255, .9), rgba(92, 203, 255, .35) 45%, transparent 70%); }
.pg-arm { position: absolute; inset: 18%; border-radius: 50%; border: 2px solid transparent; border-top-color: rgba(92, 203, 255, .45); border-left-color: rgba(92, 203, 255, .15); }
.pg-arm.a2 { inset: 8%; transform: rotate(160deg); border-top-color: rgba(185, 140, 255, .35); }
.proj-rim { position: absolute; left: 8%; right: 8%; bottom: 6%; height: 18%; border-radius: 50%; border: 1px solid rgba(92, 203, 255, .6); background: radial-gradient(ellipse, rgba(92, 203, 255, .3), transparent 70%); box-shadow: 0 0 40px rgba(92, 203, 255, .25); }
.proj-body { position: relative; z-index: 1; }
.proj-panel { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; padding: 16px 22px; max-width: 340px; border: 1px solid rgba(92, 203, 255, .45); border-radius: 8px; background: rgba(4, 14, 24, .78); box-shadow: 0 0 30px rgba(92, 203, 255, .2); }
.proj-panel .txst { color: var(--dp); }
.nofx .proj-galaxy { animation: none; }
/* compendium */
.cats button { display: flex; align-items: center; gap: 10px; }
.cats button.on { color: var(--cc); background: color-mix(in srgb, var(--cc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 40%, transparent); }
.cats button:not(.on) .holoicon { opacity: .75; filter: none; }
.results .li.click { display: flex; align-items: center; gap: 10px; }
.compdot { width: 6px; height: 6px; border-radius: 1px; background: var(--cc); box-shadow: 0 0 6px var(--cc); flex: none; opacity: .7; }
.results .li.cur { background: color-mix(in srgb, var(--cc) 12%, transparent); box-shadow: inset 2px 0 0 var(--cc); }
.compdetail { --brk-c: var(--cc); }
.comphead { display: flex; align-items: center; gap: 12px; margin: -16px -18px 14px; padding: 12px 18px; border-bottom: 1px solid color-mix(in srgb, var(--cc) 30%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 16%, transparent), transparent 75%); border-radius: 8px 8px 0 0; }
.comphead .txst { color: var(--cc); }
.compdetail h2 { font: 700 22px var(--font-display); letter-spacing: .04em; color: var(--dp-ink); }
/* ---------- character builder: recruitment terminal ---------- */
.recterm { position: relative; isolation: isolate; }
.recterm > * { position: relative; z-index: 1; }
.recterm > .rec-bg { position: absolute; z-index: 0; inset: -18px -28px auto; height: 900px; background-size: cover; background-position: center top; border-radius: 14px; pointer-events: none; opacity: .75; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.rec-top h2 { font: 700 26px var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--dp-ink); text-shadow: 0 0 16px color-mix(in srgb, var(--cls) 45%, transparent); }
.rec-top .txst { color: var(--cls); }
.recterm .btn.pri { background: var(--am); border-color: var(--am); color: #1d1203; box-shadow: 0 0 14px rgba(255, 182, 72, .3); }
/* steps as a glowing rail */
.recterm .steps { display: flex; gap: 0; overflow-x: auto; padding: 18px 4px 6px; background: none; border: 0; position: relative; }
.recterm .steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 28px; height: 2px; background: rgba(92, 203, 255, .18); }
.recterm .step { position: relative; flex: 1 1 0; min-width: 88px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: var(--dp-dim); font: 600 10.5px var(--font-display); letter-spacing: .1em; text-transform: uppercase; padding: 22px 4px 4px; border-radius: 0; box-shadow: none; }
.recterm .step::before { content: ""; position: absolute; top: 4px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid rgba(92, 203, 255, .45); background: #061321; }
.recterm .step.done { color: var(--dp); }
.recterm .step.done::before { background: var(--dp); border-color: var(--dp); box-shadow: 0 0 10px var(--dp); }
.recterm .step.on { color: #fff; }
.recterm .step.on::before { background: var(--am); border-color: var(--am); box-shadow: 0 0 14px var(--am); width: 18px; height: 18px; margin-left: -9px; top: 2px; }
.recterm .step .todo-dot { position: absolute; top: -2px; left: calc(50% + 8px); }
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.rec-main { min-width: 0; }
.rec-prev { position: sticky; top: 10px; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--cls) 40%, transparent); border-radius: 8px; background: var(--brk), linear-gradient(180deg, rgba(14, 34, 52, .7), rgba(5, 14, 24, .82)); --brk-c: var(--cls); }
.rec-prev .txst { color: var(--cls); }
.rec-holo { position: relative; height: 190px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 26px; }
.rec-holo .ph-base { width: 220px; height: 36px; } .rec-holo .ph-cone { width: 220px; height: 170px; bottom: 20px; }
.rec-fig { position: relative; }
.rec-namerow { gap: 8px; align-items: center; flex-wrap: nowrap; }
.rec-name { font: 700 16px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.rec-facts { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rec-facts > div:not(.rec-stats) { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(92, 203, 255, .09); padding-bottom: 4px; }
.rec-facts dt { font: 600 9.5px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--dp-dim); }
.rec-facts dd { margin: 0; font-size: 13px; text-align: right; }
.rec-stats { display: flex; gap: 14px; font: 600 12px var(--mono); color: var(--dp-dim); }
.rec-stats b { color: var(--dp-ink); }
.rec-abils { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.rec-abils span { display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(92, 203, 255, .2); border-radius: 4px; padding: 3px 0; }
.rec-abils i { font: 600 8.5px var(--font-display); letter-spacing: .08em; color: var(--dp-dim); font-style: normal; }
.rec-abils b { font: 700 14px var(--mono); }
.rec-prog { display: flex; flex-direction: column; gap: 4px; }
/* species and class cards */
.recterm .pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.recterm .pickitem { border-radius: 8px; padding: 10px 12px; text-align: left; transition: border-color .15s, box-shadow .15s; }
.recterm .pickitem:hover { border-color: color-mix(in srgb, var(--dp) 60%, transparent); }
.recterm .pickitem.on { border-color: var(--am); box-shadow: 0 0 0 1px var(--am), 0 0 18px rgba(255, 182, 72, .2); }
.pk-sp, .pk-cls { display: flex; gap: 10px; align-items: center; min-width: 0; }
.pk-mono { width: 40px; height: 44px; flex: none; display: grid; place-items: center; font: 700 14px var(--font-display); color: var(--dp); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(92, 203, 255, .14); text-shadow: 0 0 8px var(--dp); }
.pk-mono.droid { color: var(--am); background: rgba(255, 182, 72, .14); text-shadow: 0 0 8px var(--am); }
.pk-cls { position: relative; padding-left: 8px; }
.pk-cls::before { content: ""; position: absolute; left: -12px; top: -10px; bottom: -10px; width: 4px; background: var(--cls); box-shadow: 0 0 10px var(--cls); border-radius: 8px 0 0 8px; }
.pk-emb svg { width: 36px; height: 36px; filter: drop-shadow(0 0 6px var(--cls)); }
.recterm .detail { border-color: color-mix(in srgb, var(--cls) 30%, transparent); }
@media (max-width: 1100px) { .rec-grid { grid-template-columns: 1fr; } .rec-prev { position: relative; top: 0; order: -1; } .rec-holo { height: 150px; } }
@media (max-width: 700px) { .recterm .step { min-width: 70px; font-size: 9px; } .recterm > .rec-bg { inset: -10px -10px auto; } .rec-prev { display: none; } }
.recterm .steps { flex-direction: row; background: none; border: 0; border-radius: 0; }
.recterm .step { overflow: visible; border: 0; background: none; white-space: nowrap; }
.recterm .step:hover { background: none; color: #fff; }
.cmd .qa .holoicon { padding: 0 !important; margin: 0 !important; flex: none !important; }
.card > .dp-serial { top: auto; bottom: 5px; right: 10px; }
.comp > * { min-width: 0; }
.compdetail { overflow-wrap: anywhere; }
.comp { grid-template-columns: 220px 320px minmax(0, 1fr); }
@media (max-width: 1100px) { .comp { grid-template-columns: 1fr; } }

/* ===== v18: guided recruitment wizard ===== */
.wiz-rail { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 2px; scrollbar-width: none; }
.wiz-rail::-webkit-scrollbar { display: none; }
.wr { flex: 1 1 0; min-width: 86px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px; background: rgba(6, 18, 30, .7); border: 1px solid rgba(92, 203, 255, .16); border-radius: 6px; color: var(--dp-dim); font: 600 10px var(--font-display); letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); box-shadow: none; }
.wr:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.wr .wr-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(92, 203, 255, .4); font: 600 10px var(--mono); }
.wr.done { color: var(--dp); }
.wr.done .wr-n { background: var(--dp); color: #04121d; border-color: var(--dp); box-shadow: 0 0 8px var(--dp); }
.wr.on { color: #fff; background: color-mix(in srgb, var(--cls) 22%, rgba(6, 18, 30, .9)); border-color: color-mix(in srgb, var(--cls) 70%, transparent); }
.wr.on .wr-n { background: var(--am); color: #1d1203; border-color: var(--am); box-shadow: 0 0 12px var(--am); }
.wr.locked { opacity: .45; cursor: not-allowed; }
.wr:hover:not(:disabled) { color: #fff; }
.wr-dots { display: flex; gap: 3px; }
.wr-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.wr-dots i.done { background: var(--dp); }
.wr-dots i.on { background: var(--am); box-shadow: 0 0 6px var(--am); }
.wiz-xp { position: relative; height: 8px; border-radius: 4px; background: rgba(92, 203, 255, .1); border: 1px solid rgba(92, 203, 255, .2); margin: 2px 0 4px; }
.wiz-xp > span { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(90deg, var(--dp), var(--am)); box-shadow: 0 0 10px rgba(255, 182, 72, .5); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.wiz-xp > b { position: absolute; right: 0; top: -17px; font: 600 10px var(--mono); color: var(--am); }
.wiz-title h2 { font: 700 30px var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; margin: 0; text-shadow: 0 0 18px color-mix(in srgb, var(--cls) 55%, transparent); }
.rec-main { animation: wizin .35s ease-out; }
@keyframes wizin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.droid { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; background: linear-gradient(90deg, rgba(92, 203, 255, .12), rgba(92, 203, 255, .03)); border: 1px solid rgba(92, 203, 255, .25); border-left: 3px solid var(--dp); border-radius: 8px; }
.droid-bot { flex: none; width: 46px; height: 46px; animation: droidbob 3s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(92, 203, 255, .6)); }
.droid-bot svg { width: 100%; height: 100%; }
.droid-body { fill: rgba(92, 203, 255, .18); stroke: var(--dp); stroke-width: 1.6; }
.droid-band { stroke: var(--dp); stroke-width: 1.2; opacity: .6; }
.droid-lens { fill: #04121d; stroke: var(--dp); stroke-width: 1.4; }
.droid-eye { fill: var(--am); animation: droideye 4s infinite; }
.droid-fin { stroke: var(--dp); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.droid-sh { fill: rgba(92, 203, 255, .25); animation: droidsh 3s ease-in-out infinite; }
@keyframes droidbob { 50% { transform: translateY(-3px); } }
@keyframes droidsh { 50% { opacity: .4; } }
@keyframes droideye { 0%, 92%, 100% { opacity: 1; } 95% { opacity: .1; } }
.droid-say { display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; line-height: 1.45; color: var(--dp-ink); }
.droid-say .txst { color: var(--dp); font-size: 10px; }
.nofx .droid-bot, .nofx .droid-eye, .nofx .rec-main { animation: none; }
.wiz-foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 6px -4px 0; background: rgba(4, 12, 22, .94); border: 1px solid rgba(92, 203, 255, .22); border-radius: 10px; box-shadow: 0 -8px 24px rgba(0, 0, 0, .45); }
.wiz-foot .wiz-hint { color: var(--dp-dim); }
.wiz-foot .wiz-next, .wiz-foot .deploy { min-width: 150px; font: 700 13px var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.wiz-foot .wiz-next:disabled { opacity: .45; box-shadow: none; }
.wiz-foot .deploy { animation: deploypulse 2s infinite; }
@keyframes deploypulse { 50% { box-shadow: 0 0 26px rgba(255, 182, 72, .7); } }
.wiz-keys .stepchoices > .spread:first-child { display: none; }
.wiz .stepchoices .card > h3 { font-size: 15px; }
/* level */
.lvl-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.lvl-tile { aspect-ratio: 1; display: grid; place-items: center; font: 700 18px var(--font-display); border-radius: 6px; background: rgba(6, 18, 30, .8); border: 1px solid rgba(92, 203, 255, .22); color: var(--dp-dim); padding: 0; }
.lvl-tile.on { background: color-mix(in srgb, var(--cls) 35%, #061321); border-color: var(--am); color: #fff; box-shadow: 0 0 14px rgba(255, 182, 72, .45); }
@media (max-width: 640px) { .lvl-grid { grid-template-columns: repeat(5, 1fr); } }
/* background skills */
.skill-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.skill-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: 8px; background: rgba(6, 18, 30, .8); border: 1px solid rgba(92, 203, 255, .2); text-align: left; }
.skill-tile.on { border-color: var(--am); background: rgba(255, 182, 72, .1); box-shadow: inset 3px 0 0 var(--am); }
/* mode tabs (loadout + abilities) */
.lo-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.lo-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: 8px; background: rgba(6, 18, 30, .8); border: 1px solid rgba(92, 203, 255, .2); text-align: left; color: var(--dp-ink); }
.lo-tab .small { color: var(--dp-dim); }
.lo-tab.on { border-color: var(--am); background: linear-gradient(180deg, rgba(255, 182, 72, .16), rgba(255, 182, 72, .04)); box-shadow: 0 0 14px rgba(255, 182, 72, .2); }
/* loadout */
.lo-line { display: flex; flex-direction: column; gap: 6px; }
.lo-line > .txst { color: var(--dp); }
.lo-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.lo-opt { position: relative; display: flex; gap: 12px; padding: 12px 14px; border-radius: 8px; background: rgba(6, 18, 30, .78); border: 1px solid rgba(92, 203, 255, .18); transition: border-color .15s, background .15s; }
.lo-opt.pickable { cursor: pointer; }
.lo-opt.pickable:not(.on) { opacity: .62; }
.lo-opt.pickable:not(.on):hover { opacity: .9; border-color: rgba(92, 203, 255, .5); }
.lo-opt.on { border-color: color-mix(in srgb, var(--cls) 75%, var(--am)); background: color-mix(in srgb, var(--cls) 14%, rgba(6, 18, 30, .9)); box-shadow: 0 0 16px color-mix(in srgb, var(--cls) 30%, transparent); }
.lo-letter { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 4px; border: 1.5px solid rgba(92, 203, 255, .4); font: 700 12px var(--font-display); color: var(--dp-dim); }
.lo-opt.on .lo-letter { background: var(--am); border-color: var(--am); color: #1d1203; }
.lo-item { display: flex; align-items: center; gap: 8px; }
.lo-ic { width: 20px; text-align: center; color: var(--dp); }
.lo-pick { display: flex; flex-direction: column; gap: 3px; }
.lo-pick select { max-width: 100%; }
.lo-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lo-big { font: 700 34px var(--font-display); color: var(--am); letter-spacing: .04em; }
.lo-stats { display: flex; flex-wrap: wrap; gap: 14px; font: 500 12px var(--mono); color: var(--dp-dim); margin: 4px 0 8px; }
.lo-stats b { color: #fff; font-size: 14px; }
.lo-sum > .spread .txst { color: var(--dp); }
/* abilities */
.dice-pool .txst { color: var(--am); }
.pool-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pool-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 8px; background: rgba(6, 18, 30, .9); border: 1.5px solid rgba(92, 203, 255, .35); color: #fff; cursor: grab; }
.pool-chip b { font: 700 26px var(--font-display); }
.pool-chip.sel { border-color: var(--am); box-shadow: 0 0 16px rgba(255, 182, 72, .55); transform: translateY(-3px); }
.pool-chip.used { opacity: .5; }
.pool-chip.tumbling b { color: var(--am); }
.pool-chip.tumbling { animation: tumble .14s infinite alternate; }
@keyframes tumble { to { transform: rotate(3deg) translateY(-2px); } }
.dice4 { display: flex; gap: 3px; }
.dice4 i { font: 600 10px var(--mono); font-style: normal; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 3px; background: rgba(92, 203, 255, .15); color: var(--dp-ink); }
.dice4 i.low { text-decoration: line-through; opacity: .4; }
.pool-on { position: absolute; top: 3px; right: 4px; font: 600 9px var(--mono); color: var(--am); }
.abil-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.abil-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 10px; border-radius: 10px; background: rgba(6, 18, 30, .85); border: 1px solid rgba(92, 203, 255, .22); text-align: center; transition: border-color .15s, box-shadow .15s; }
.abil-slot .k { font: 600 11px var(--font-display); letter-spacing: .12em; color: var(--dp-dim); }
.abil-slot.star { border-color: color-mix(in srgb, var(--cls) 55%, transparent); }
.abil-slot.empty { border-style: dashed; }
.abil-slot.target { cursor: pointer; border-color: var(--am); box-shadow: 0 0 0 1px rgba(255, 182, 72, .4), 0 0 14px rgba(255, 182, 72, .25); }
.abil-slot .big { font: 700 30px var(--font-display); color: #fff; }
.abil-slot input { width: 70px; text-align: center; }
.abil-fin { font-size: 13px; }
@media (max-width: 640px) { .abil-slots { grid-template-columns: repeat(2, 1fr); } .pool-row { grid-template-columns: repeat(3, 1fr); } .wiz-title h2 { font-size: 22px; } .wiz-foot .wiz-hint { display: none; } }
.wiz-foot { background: #050d18 !important; backdrop-filter: none; }
.rec-grid:has(.pk-drawer) { z-index: 8; }
.pk-drawer-bg { position: fixed; inset: 0; z-index: 60; background: rgba(2, 6, 12, .55); animation: fadein .2s; }
.pk-drawer { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); margin: 0; border-radius: 0; border: 0; border-left: 1px solid color-mix(in srgb, var(--cls) 60%, var(--dp)); background: linear-gradient(180deg, rgba(8, 22, 36, .98), rgba(4, 11, 20, .99)) !important; box-shadow: -20px 0 50px rgba(0, 0, 0, .6); padding: 18px 20px 0; gap: 10px; animation: drawerin .25s cubic-bezier(.2, .8, .2, 1); overflow: hidden; }
.pk-drawer .txst { color: var(--dp); }
.pk-drawer-t { font: 700 26px var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; margin: 0; text-shadow: 0 0 16px color-mix(in srgb, var(--cls) 50%, transparent); }
.pk-drawer-body { flex: 1; overflow-y: auto; padding-right: 4px; }
.pk-drawer-f { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0 16px; border-top: 1px solid rgba(92, 203, 255, .2); }
.pk-drawer-f .btn.pri { background: var(--am); border-color: var(--am); color: #1d1203; font-weight: 700; }
@keyframes drawerin { from { transform: translateX(40px); opacity: 0; } }
@keyframes fadein { from { opacity: 0; } }
.page:has(.pk-drawer), .recterm:has(.pk-drawer) { position: relative; z-index: 40; }
.lo-opt:not(.on) select { pointer-events: none; }
@media (max-width: 640px) {
  .wiz-foot { gap: 6px; padding: 8px; margin: 6px 0 0; }
  .wiz-foot .wiz-back span { display: none; }
  .wiz-foot .wiz-next, .wiz-foot .deploy { min-width: 0; flex: 1; padding-left: 10px; padding-right: 10px; }
  .wiz-foot .btn.holo { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wiz-head { flex-wrap: wrap; }
}
.assist > * { flex-shrink: 0; }

/* ===== v19: DM pass ===== */
.assist { max-width: 1180px; }
.ast-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(220px, .9fr); gap: 18px; align-items: center; padding: 18px 20px; overflow: hidden; background: radial-gradient(ellipse at 85% 110%, color-mix(in srgb, var(--sec) 22%, transparent), transparent 60%), linear-gradient(135deg, rgba(14, 26, 42, .92), rgba(6, 12, 22, .95)) !important; border-color: color-mix(in srgb, var(--sec) 45%, transparent) !important; }
.ast-hero .txst { color: var(--sec); }
.ast-title { font: 700 28px var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; margin: 2px 0 6px; text-shadow: 0 0 18px color-mix(in srgb, var(--sec) 50%, transparent); }
.ast-hero-l { gap: 6px; min-width: 0; }
.ast-acts { display: flex; gap: 4px; max-width: 420px; }
.ast-act { flex: 1; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12); }
.ast-act.past { background: color-mix(in srgb, var(--sec) 45%, transparent); }
.ast-act.here { background: var(--sec); box-shadow: 0 0 10px var(--sec); animation: actpulse 2.2s infinite; }
@keyframes actpulse { 50% { opacity: .55; } }
.ast-btns { margin-top: 6px; }
.ast-stats { display: grid; grid-template-columns: repeat(2, minmax(92px, 1fr)); gap: 6px; }
.ast-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .1); border-left: 2px solid var(--sec); background: rgba(4, 10, 18, .6); border-radius: 4px; }
.ast-stats .k { font: 600 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dp-dim); }
.ast-stats b { font: 700 22px var(--font-display); color: #fff; }
.ast-stats .warn { border-left-color: var(--am); } .ast-stats .warn b { color: var(--am); }
.ast-holo { position: relative; height: 170px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; }
.ast-holo .ph-base { width: 240px; height: 34px; } .ast-holo .ph-cone { width: 240px; height: 150px; bottom: 18px; }
.ast-holo .ph-figs { gap: 8px; } .ast-holo .hfig { width: 62px; } .ast-holo .hsil { width: 50px; height: 68px; } .ast-holo .hfig-img { width: 50px; height: 68px; } .ast-holo .hfig-c { display: none; } .ast-holo .hfig-n { font-size: 9px; }
@media (max-width: 900px) { .ast-hero { grid-template-columns: 1fr; } .ast-holo { display: none; } .ast-stats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .ast-stats { grid-template-columns: repeat(2, 1fr); } .ast-title { font-size: 22px; } }
/* console tabs */
.ast-tabs .tabs { width: 100%; display: flex; gap: 4px; padding: 4px; background: rgba(4, 10, 18, .75); border: 1px solid color-mix(in srgb, var(--sec) 30%, transparent); border-radius: 8px; overflow-x: auto; }
.ast-tabs .tabs button { flex: 1; min-width: 92px; padding: 9px 10px; border-radius: 5px; }
.ast-tabs .tabs button.on { background: color-mix(in srgb, var(--sec) 18%, transparent); color: #fff; box-shadow: inset 0 -2px 0 var(--sec); }
.ast-tab { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.ast-tab .holoicon { --hi: currentColor; }
.ast-tabs .tabs button.on .holoicon { color: var(--sec); }
/* generic card titles on DM screens */
.assist .card > b:first-child, .assist .card > h3:first-child, .assist .card > h4:first-child, .rail .card > h4:first-child, .dmpanel .card > h4:first-child { display: block; margin: -16px -18px 10px; padding: 9px 18px 8px; font: 700 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--sec); border-bottom: 1px solid color-mix(in srgb, var(--sec) 22%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--sec) 12%, transparent), transparent 70%); border-radius: 8px 8px 0 0; }
.rail .card > h4:first-child { margin: -12px -12px 8px; padding: 7px 12px 6px; font-size: 11px; }
.assist .card > .card-h h4 { font: 700 13px var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.ast-sect { font: 700 13px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--sec); margin: 10px 0 2px; }
/* sensor strip + party cards */
.partystrip { align-items: center; border-left: 3px solid var(--sec) !important; }
.partystrip .txst { color: var(--sec); }
.glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.glancecard { position: relative; overflow: hidden; border-top: 2px solid var(--cls, var(--sec)) !important; background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--cls, var(--sec)) 16%, transparent), transparent 55%), rgba(8, 18, 30, .9) !important; }
.gl-head { display: flex; align-items: center; gap: 12px; }
.gl-port { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 2px solid var(--cls, var(--sec)); box-shadow: 0 0 14px color-mix(in srgb, var(--cls, var(--sec)) 55%, transparent); background: #061321; font: 700 22px var(--font-display); color: var(--cls); }
.gl-port > span { position: absolute; inset: 0; background-size: cover; background-position: center top; filter: saturate(.7) contrast(1.05); }
.gl-port::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(92, 203, 255, .14) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--cls, var(--dp)) 35%, transparent)); mix-blend-mode: screen; }
.gl-name { font: 700 16px var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.gl-cls { color: var(--cls, var(--dp-dim)); font-family: var(--mono); letter-spacing: .06em; }
.glancecard .big-ac { width: 50px; height: 56px; padding: 0; justify-content: center; border: 0; border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: color-mix(in srgb, var(--cls, var(--dp)) 30%, #061321); }
.glancecard .big-ac .small { font: 600 8px var(--mono); color: var(--dp-ink); }
.glancecard .big-ac b { font: 700 20px var(--font-display); line-height: 1; color: #fff; }
.glancecard .hpbar { height: 16px; border-radius: 3px; }
.glancecard .gl-grid .k { font-family: var(--mono); letter-spacing: .08em; }
/* tactical display (combat planner) */
.ast-tac { position: relative; }
.ast-tac > .card { background: linear-gradient(rgba(255, 106, 90, .045) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(255, 106, 90, .045) 1px, transparent 1px) 0 0 / 22px 22px, rgba(8, 14, 24, .92) !important; }
.ast-tac .li.click.on { border-color: var(--sec); background: color-mix(in srgb, var(--sec) 14%, transparent); box-shadow: inset 3px 0 0 var(--sec); }
.ast-tac .list .li { border-left: 2px solid transparent; }
.ast-tac .card-h .txst { color: var(--sec); font-size: 9.5px; }
/* story map */
.assist .story-hero { border-left: 3px solid var(--sec) !important; }
.assist .story-hero .txst { color: var(--sec); margin-bottom: 4px; }
.assist .acts { position: relative; padding-left: 30px; gap: 10px; }
.assist .acts::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(180deg, var(--sec), color-mix(in srgb, var(--sec) 15%, transparent)); }
.assist .act { position: relative; }
.assist .act::before { content: ""; position: absolute; left: -25px; top: 16px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--sec) 60%, transparent); background: #0a121e; }
.assist .act.past::before { background: color-mix(in srgb, var(--sec) 60%, transparent); }
.assist .act.here { border-color: var(--sec) !important; box-shadow: 0 0 0 1px var(--sec) inset, 0 0 22px color-mix(in srgb, var(--sec) 20%, transparent) !important; }
.assist .act.here::before { background: var(--sec); border-color: var(--sec); box-shadow: 0 0 12px var(--sec); width: 16px; height: 16px; left: -27px; top: 14px; }
.assist .act .chip.on { background: var(--sec); border-color: var(--sec); color: #1a0705; }
/* session flow */
.assist .phases { padding: 4px; background: rgba(4, 10, 18, .7); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; }
.assist .phase { border-radius: 5px; font: 700 12px var(--font-display); letter-spacing: .1em; text-transform: uppercase; background: transparent; border-color: transparent; }
.assist .phase.on { background: color-mix(in srgb, var(--sec) 18%, transparent); border-color: color-mix(in srgb, var(--sec) 60%, transparent); color: #fff; box-shadow: inset 0 -2px 0 var(--sec); }
.assist .step { border-left: 2px solid rgba(255, 255, 255, .08); }
.assist .step.open { border-color: color-mix(in srgb, var(--sec) 70%, transparent) !important; box-shadow: 0 0 20px color-mix(in srgb, var(--sec) 12%, transparent); }
.assist .step-dot { font-family: var(--font-display); border-radius: 4px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border: 0; background: rgba(255, 255, 255, .1); }
.assist .step.open .step-dot { background: var(--sec); color: #1a0705; }
.assist .step.done .step-dot { background: #4cc38a; }
.assist .step-b .btn.pri { background: var(--sec); border-color: var(--sec); color: #1a0705; }
/* DM panel on the holotable */
.dmgroups .phase.on { box-shadow: inset 0 -2px 0 var(--am); }
.dmcon { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--am) 40%, transparent); border-left: 3px solid var(--am); border-radius: 6px; background: linear-gradient(90deg, rgba(255, 182, 72, .12), rgba(255, 182, 72, .02)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 5px); }
.dmcon .txst { color: var(--am); font-size: 9.5px; }
.dmcon-t { font: 700 15px var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail .tabs button, .dmpanel .tabs button { padding: 7px 8px; letter-spacing: .06em; font-size: 11px; white-space: nowrap; }
.dmpanel .tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }

/* ===== v20: modification workshop ===== */
.modal:has(> .workshop) { width: min(1200px, 97vw); max-width: none; max-height: 95vh; padding: 0; overflow: auto; background: #050c16; border: 1px solid color-mix(in srgb, var(--rar) 50%, rgba(92, 203, 255, .3)); }
.workshop { --rar: #9aa7b8; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; min-height: 70vh; background: radial-gradient(ellipse at 30% 0, color-mix(in srgb, var(--rar) 14%, transparent), transparent 55%), linear-gradient(rgba(92, 203, 255, .035) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(92, 203, 255, .035) 1px, transparent 1px) 0 0 / 24px 24px; }
.ws-head { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(92, 203, 255, .2); }
.ws-head .txst { color: var(--dp); }
.ws-head h2 { font: 700 24px var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; margin: 0; text-shadow: 0 0 16px color-mix(in srgb, var(--rar) 60%, transparent); overflow-wrap: anywhere; }
.ws-ic { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--rar) 60%, transparent); border-radius: 10px; background: rgba(4, 10, 18, .8); }
.ws-att { align-items: flex-end; gap: 4px; }
.att-pips { display: inline-flex; align-items: center; gap: 4px; font: 600 10px var(--mono); letter-spacing: .08em; color: var(--dp-dim); text-transform: uppercase; }
.att-pips i { width: 10px; height: 10px; transform: rotate(45deg); border: 1.5px solid rgba(180, 131, 255, .7); background: transparent; }
.att-pips i.on { background: #b483ff; box-shadow: 0 0 8px #b483ff; }
.att-pips span { margin-left: 4px; }
.ws-banner { gap: 10px; padding: 9px 12px; border-radius: 6px; border: 1px solid rgba(180, 131, 255, .5); background: rgba(180, 131, 255, .1); font-size: 13.5px; }
.ws-banner.warn { border-color: rgba(255, 182, 72, .55); background: rgba(255, 182, 72, .08); }
.ws-banner.bad { border-color: rgba(239, 93, 85, .6); background: rgba(239, 93, 85, .1); }
.ws-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .ws-body { grid-template-columns: 1fr; } .ws-head { flex-wrap: wrap; } }
.ws-left, .ws-right { gap: 12px; min-width: 0; }
.ws-right { position: sticky; top: 0; }
/* schematic */
.ws-schem { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 70px 12px; padding: 14px 4px; }
.ws-schem::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; height: 62%; transform: translate(-50%, -50%); border: 1px dashed color-mix(in srgb, var(--rar) 45%, transparent); border-radius: 14px; pointer-events: none; }
.ws-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 118px; height: 118px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: radial-gradient(circle, color-mix(in srgb, var(--rar) 26%, #061321), #040a12 70%); border: 1px solid color-mix(in srgb, var(--rar) 70%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--rar) 35%, transparent), inset 0 0 20px color-mix(in srgb, var(--rar) 25%, transparent); z-index: 1; }
.ws-core .txst { color: var(--rar); font-size: 10px; }
.ws-core .holoicon { animation: wscore 4s ease-in-out infinite; }
@keyframes wscore { 50% { filter: brightness(1.4); } }
.nofx .ws-core .holoicon { animation: none; }
.ws-pos { position: relative; z-index: 2; }
.ws-pos.p0, .ws-pos.p2 { padding-right: 34px; } .ws-pos.p1, .ws-pos.p3 { padding-left: 34px; }
.ws-slot { width: 100%; min-height: 84px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 10px 12px; text-align: left; border-radius: 8px; background: rgba(6, 16, 28, .92); border: 1.5px dashed rgba(92, 203, 255, .35); color: var(--dp-ink); transition: border-color .15s, box-shadow .15s, transform .1s; }
.ws-slot:hover { border-color: rgba(92, 203, 255, .7); }
.ws-slot.full { border-style: solid; border-color: color-mix(in srgb, var(--rc) 70%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 16%, transparent), rgba(6, 16, 28, .92)); box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 22%, transparent); }
.ws-slot.sel { border-color: var(--am) !important; box-shadow: 0 0 0 1px var(--am), 0 0 18px rgba(255, 182, 72, .35) !important; transform: translateY(-1px); }
.ws-slot.locked { opacity: .55; border-style: dotted; cursor: default; }
.ws-slot b { font-size: 13.5px; line-height: 1.25; }
.ws-slot-k { font: 600 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dp-dim); }
.ws-plus { font: 700 22px var(--font-display); color: var(--dp); line-height: 1; }
.ws-slot.aug .ws-slot-k { color: #b483ff; }
.ws-augs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .ws-schem { grid-template-columns: 1fr; gap: 10px; } .ws-schem::before, .ws-core { display: none; } .ws-pos.p0, .ws-pos.p1, .ws-pos.p2, .ws-pos.p3 { padding: 0; } }
/* ladder */
.ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.rung { display: flex; flex-direction: column; gap: 1px; padding: 7px 6px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(4, 10, 18, .7); opacity: .55; }
.rung-n { font: 700 11px var(--font-display); letter-spacing: .06em; color: var(--rc); text-transform: uppercase; }
.rung.past { opacity: .8; }
.rung.here { opacity: 1; border-color: var(--rc); box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 35%, transparent); background: color-mix(in srgb, var(--rc) 12%, #040a12); }
.rung.next { opacity: 1; border-style: dashed; border-color: color-mix(in srgb, var(--rc) 70%, transparent); }
@media (max-width: 600px) { .ladder { grid-template-columns: repeat(3, 1fr); } }
/* parts + actions */
.ws-plist { max-height: 300px; overflow: auto; }
.ws-part { width: 100%; text-align: left; display: flex; gap: 10px; align-items: center; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); padding: 8px 6px; color: var(--ink); }
.ws-part:hover:not(:disabled) { background: rgba(92, 203, 255, .07); }
.ws-part.on { background: rgba(255, 182, 72, .1); box-shadow: inset 3px 0 0 var(--am); }
.ws-part.nofit { opacity: .55; cursor: not-allowed; }
.ws-part .tag { font-size: 10.5px; }
.tag.ok { color: #4cc38a; border-color: rgba(76, 195, 138, .5); }
.ws-confirm { gap: 8px; padding-top: 8px; border-top: 1px solid rgba(92, 203, 255, .2); }
.ws-diff { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ws-act { gap: 8px; }
.ws-crafter { gap: 8px; align-items: center; flex-wrap: wrap; }
.ws-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ws-irolled input { width: 92px; }
.ws-mod summary { cursor: pointer; padding: 4px 0; }
/* inline summary */
.ws-sum { gap: 8px; border-left: 3px solid var(--rar, var(--dp)) !important; }
.ws-pips { display: flex; gap: 5px; }
.ws-pips i { width: 22px; height: 8px; border-radius: 2px; border: 1px solid rgba(92, 203, 255, .45); }
.ws-pips i.on { background: var(--rar, var(--dp)); border-color: var(--rar, var(--dp)); box-shadow: 0 0 6px var(--rar, var(--dp)); }
.ws-pips i.aug { border-color: rgba(180, 131, 255, .6); } .ws-pips i.aug.on { background: #b483ff; }
.ws-open { align-self: flex-start; }
.toolrolls { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.toolroll b { color: var(--am); margin-left: 3px; }
@media (max-width: 860px) {
  .ws-head > .col.grow { flex: 1 1 calc(100% - 130px); }
  .ws-head h2 { font-size: 19px; }
  .ws-att { flex-direction: row; align-items: center; order: 3; flex: 1 1 100%; justify-content: flex-start; gap: 10px; }
  .workshop { padding: 12px; }
  .modal:has(> .workshop) { width: 100vw; max-height: 100vh; border-radius: 0; }
}

/* ===== v21: force weapons ===== */
.pwep .txst { color: #b483ff; }
.pwep-lv { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.pwep-l { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 6px; background: rgba(6, 16, 28, .85); border: 1px solid rgba(180, 131, 255, .3); color: var(--dp-ink); }
.pwep-l b { font: 700 14px var(--font-display); color: #fff; }
.pwep-l.on { border-color: #b483ff; background: rgba(180, 131, 255, .16); box-shadow: 0 0 12px rgba(180, 131, 255, .35); }
.pwep-l.cant { opacity: .45; }
.modal:has(> .pwep) { width: min(560px, 96vw); }
.actdmg { border-color: rgba(239, 93, 85, .5); color: #ffb3ad; white-space: nowrap; }
.actdmg:hover:not(:disabled) { background: rgba(239, 93, 85, .14); }
.actdmgrow { align-items: center; gap: 8px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.actdmg.fx { border-color: rgba(180, 131, 255, .55); color: #d9c4ff; }
.actdmg.fx:hover:not(:disabled) { background: rgba(180, 131, 255, .14); }
@media (max-width: 560px) { .actrow .actdmg { padding: 4px 6px; font-size: 11px; } }
.grant-choices { gap: 8px; padding: 10px; border: 1px solid rgba(180, 131, 255, .3); border-radius: 8px; background: rgba(180, 131, 255, .05); }

/* ===== v22: datapad boot / access granted ===== */
.bt { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; justify-content: space-between; padding: max(18px, env(safe-area-inset-top)) 22px max(18px, env(safe-area-inset-bottom)); margin: 0; text-align: left; color: #8a9aa8; background: radial-gradient(ellipse at 50% 42%, rgba(92, 203, 255, .08), transparent 55%), #04070b; font: 400 11px var(--mono, "JetBrains Mono", ui-monospace, monospace); letter-spacing: .06em; transition: opacity .55s ease, transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s; }
.bt::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px); }
.bt-top, .bt-foot { display: flex; justify-content: space-between; gap: 12px; color: #4f5f6c; position: relative; }
.bt-core { position: relative; align-self: center; width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; }
.bt-holo { position: relative; width: 150px; height: 150px; margin-bottom: 18px; perspective: 520px; }
.bt-scene { position: absolute; left: 50%; top: 42%; transform-style: preserve-3d; }
.bt-cube { position: absolute; width: 64px; height: 64px; margin: -32px; transform-style: preserve-3d; animation: btspin 9s linear infinite; }
.bt-cube i { position: absolute; inset: 0; border: 1px solid rgba(143, 211, 244, .75); background: rgba(143, 211, 244, .035); box-shadow: inset 0 0 14px rgba(143, 211, 244, .12); }
.bt-cube i:nth-child(1) { transform: translateZ(32px); } .bt-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(32px); }
.bt-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(32px); } .bt-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(32px); }
.bt-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(32px); } .bt-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(32px); }
.bt-cube.in { width: 30px; height: 30px; margin: -15px; animation-direction: reverse; animation-duration: 6s; }
.bt-cube.in i { border-color: rgba(226, 166, 75, .7); background: rgba(226, 166, 75, .05); }
.bt-cube.in i:nth-child(1) { transform: translateZ(15px); } .bt-cube.in i:nth-child(2) { transform: rotateY(180deg) translateZ(15px); }
.bt-cube.in i:nth-child(3) { transform: rotateY(90deg) translateZ(15px); } .bt-cube.in i:nth-child(4) { transform: rotateY(-90deg) translateZ(15px); }
.bt-cube.in i:nth-child(5) { transform: rotateX(90deg) translateZ(15px); } .bt-cube.in i:nth-child(6) { transform: rotateX(-90deg) translateZ(15px); }
@keyframes btspin { from { transform: rotateX(-24deg) rotateY(0); } to { transform: rotateX(-24deg) rotateY(360deg); } }
.bt-cone { position: absolute; left: 50%; bottom: 14px; width: 120px; height: 120px; transform: translateX(-50%); background: linear-gradient(0deg, rgba(92, 203, 255, .22), transparent 80%); clip-path: polygon(38% 100%, 0 0, 100% 0, 62% 100%); animation: btflick 5s infinite; }
@keyframes btflick { 0%, 93%, 100% { opacity: 1; } 95% { opacity: .5; } 97% { opacity: .9; } }
.bt-ring { position: absolute; left: 50%; bottom: 6px; width: 110px; height: 18px; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(143, 211, 244, .55); box-shadow: 0 0 18px rgba(92, 203, 255, .35), inset 0 0 10px rgba(92, 203, 255, .25); }
.bt-ring.r2 { width: 150px; height: 26px; bottom: 2px; border-color: rgba(143, 211, 244, .16); box-shadow: none; animation: btring 3s ease-in-out infinite; }
@keyframes btring { 50% { opacity: .3; transform: translateX(-50%) scale(1.06); } }
.bt-scan { position: absolute; left: 10%; right: 10%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(143, 211, 244, .9), transparent); opacity: 0; }
.bt-word { font: 600 19px var(--font-display); letter-spacing: .52em; margin-right: -.52em; color: #dcebf5; }
.bt-sub { margin-top: 6px; color: #5c6d7a; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; }
.bt-steps { list-style: none; margin: 26px 0 12px; padding: 0; width: 100%; display: grid; gap: 7px; }
.bt-steps li { display: flex; align-items: baseline; gap: 8px; color: #3e4d59; transition: color .25s; }
.bt-steps li span { white-space: nowrap; }
.bt-steps li::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted rgba(140, 170, 190, .18); transform: translateY(-3px); }
.bt-steps li b { order: 2; font-weight: 500; min-width: 64px; text-align: right; }
.bt-steps li.run { color: #9fb2c0; } .bt-steps li.run b { color: #e2a64b; }
.bt-steps li.ok { color: #9fb2c0; } .bt-steps li.ok b { color: #7fd0f2; }
.bt-bar { width: 100%; height: 2px; background: rgba(143, 211, 244, .1); overflow: hidden; }
.bt-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(143, 211, 244, .4), #8fd3f4); box-shadow: 0 0 8px #5ccbff; transition: width .25s ease; }
.bt-granted { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 10px 16px; border: 1px solid rgba(143, 211, 244, .45); color: #8fd3f4; background: rgba(92, 203, 255, .07); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.bt-granted b { display: block; font: 600 14px var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: #dff3fd; }
.bt-granted span { display: block; margin-top: 2px; font-size: 11px; color: #8aa3b3; letter-spacing: .04em; }
.bt-shackle { transition: transform .4s .15s; transform-origin: 15.5px 6px; }
.bt-msg { min-height: 1em; margin: 12px 0 0; color: #5c6d7a; }
.bt.granted .bt-granted { opacity: 1; transform: none; }
.bt.granted .bt-shackle { transform: translate(3px, -2px) rotate(18deg); }
.bt.granted .bt-scan { animation: btscan .9s ease-out forwards; }
.bt.granted .bt-ring { border-color: #bfe9fb; box-shadow: 0 0 30px rgba(92, 203, 255, .7), inset 0 0 14px rgba(92, 203, 255, .5); }
.bt.granted .bt-cube i { border-color: #cdeffd; }
@keyframes btscan { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 0; } }
.bt.out { opacity: 0; transform: scale(1.04); filter: blur(2px); pointer-events: none; }
body.app-in #app { animation: appin .7s .15s both cubic-bezier(.2, .8, .2, 1); }
@keyframes appin { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bt-cube, .bt-cone, .bt-ring.r2 { animation: none; } .bt { transition: opacity .2s; } body.app-in #app { animation: none; } }


/* ===== v23: Datapad skin (html.skin-dp). Look only; Classic = no class. ===== */
/* Datapad skin: look only. No layout, order or sizing of sections changes. */
@font-face { font-family: "Saira Condensed"; font-weight: 400; font-display: swap; src: url(../fonts/saira-condensed-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-weight: 500; font-display: swap; src: url(../fonts/saira-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-weight: 600; font-display: swap; src: url(../fonts/saira-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
html.skin-dp {
  --bg: #05080c; --solid: #0a1017;
  --glass: rgba(10, 16, 23, .86); --glass-2: rgba(14, 22, 31, .86); --glass-3: rgba(20, 30, 42, .9);
  --edge: rgba(140, 190, 220, .10); --edge-2: rgba(140, 190, 220, .17); --edge-3: rgba(140, 190, 220, .28);
  --ink: #d9e4ec; --ink-2: #aebcc7; --mute: #7d8f9c; --dim: #55646f;
  --cyan: #8fd3f4; --holo: #8fd3f4; --amber: #e2a64b; --am: #e2a64b; --red: #e06a5f; --green: #7cc4a4;
  --holo-grad: linear-gradient(90deg, #8fd3f4, #8fd3f4); --holo-soft: rgba(143, 211, 244, .07);
  --dp: #8fd3f4; --dp-2: #4f88a3; --dp-ink: #e3eef5; --dp-dim: #7d8f9c; --dp-bg: rgba(8, 13, 19, .94); --dp-bg-2: rgba(12, 20, 28, .9);
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace; --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r: 3px; --r-lg: 4px; --r-xl: 5px;
  --glow: 0 0 0 1px rgba(143, 211, 244, .4); --shadow: none; --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);
}
html.skin-dp body { --sec: #8fd3f4; background: #05080c; }
html.skin-dp body[data-sec] { --sec: #8fd3f4; }
html.skin-dp body::before, html.skin-dp body::after { opacity: .12 !important; }
/* quieter type: condensed, sentence case, no glow */
html.skin-dp :is(h1, h2, h3, .wiz-title h2, .hdr-title h1, .ast-title) { text-shadow: none !important; letter-spacing: .02em !important; }
html.skin-dp .wiz-title h2 { font: 500 26px/1.1 var(--font-display) !important; text-transform: none; color: #eef4f8; }
html.skin-dp :is(.dp-head h1, .dp-head h2, .sheet-head h1, .sheet-head h2, .dp-ident h1, .dp-ident h2) { font-family: var(--font-display) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: .02em !important; }
html.skin-dp :is(.dp-k, .dp-sub, .dp-stat .k, .dp-ab, .dp-label, .tabs button, .txst, .eyebrow, .hdr-code, .wiz-foot .wiz-next, .wiz-foot .deploy, .card > .card-h h4, h4) { font-family: var(--font-display) !important; font-weight: 500 !important; letter-spacing: .14em !important; }
html.skin-dp :is(.num, .dp-score, .dp-hpcur, .big-ac, .dp-stat .v, .v, .tot) { font-family: var(--mono) !important; font-weight: 500 !important; text-shadow: none !important; font-variant-numeric: tabular-nums; }
/* hairlines and squared corners on panels, cards, inputs */
html.skin-dp :is(.card, .dp-panel, .dp-stat, .pickitem, .lo-opt, .lo-tab, .abil-slot, .modal, .pk-drawer, .wiz-foot, .chip, .pill, .tag, input, select, textarea, .steps, .step, .itemcard, .actrow, .glancecard, .txcard, .readout, .recterm, .bubble, .vital, .dp-meter, .wiz-xp, .wiz-xp > span, .acttag, .modslot) { border-radius: 3px !important; }
html.skin-dp :is(.card, .dp-panel, .pickitem, .lo-opt, .abil-slot, .itemcard, .glancecard, .txcard, .bubble) { box-shadow: none !important; border-color: var(--edge-2) !important; background-color: rgba(10, 16, 23, .88) !important; backdrop-filter: none !important; }
html.skin-dp .card > .card-h, html.skin-dp .card > .card-h::after { box-shadow: none !important; }
html.skin-dp .card > .card-h { background: none !important; border-radius: 0 !important; }
html.skin-dp .card > .card-h::after { height: 1px !important; }
/* buttons: chamfered, outline; amber reserved for the primary */
html.skin-dp .btn { border-radius: 0 !important; box-shadow: none !important; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); background: rgba(143, 211, 244, .04); border-color: var(--edge-3); font-family: var(--font-display); font-weight: 500; letter-spacing: .08em; font-size: 14px; }
html.skin-dp .btn.pri, html.skin-dp .wiz-foot .wiz-next, html.skin-dp .wiz-foot .deploy { background: rgba(226, 166, 75, .09) !important; color: #e8b260 !important; border: 1px solid #e2a64b !important; animation: none !important; text-shadow: none !important; }
html.skin-dp .btn.pri:disabled, html.skin-dp .wiz-foot .wiz-next:disabled { opacity: .4; }
html.skin-dp .btn.holo, html.skin-dp .btn.on { color: var(--cyan) !important; border-color: rgba(143, 211, 244, .55) !important; background: rgba(143, 211, 244, .06) !important; }
html.skin-dp .btn.danger { color: var(--red) !important; border-color: rgba(224, 106, 95, .5) !important; background: transparent !important; }
/* selected states: thin cyan edge instead of gold glow */
html.skin-dp :is(.pickitem.sel, .pickitem.on, .lo-opt.on, .lo-opt.sel, .lo-tab.on, .abil-slot.on) { border-color: rgba(143, 211, 244, .6) !important; background: rgba(143, 211, 244, .06) !important; box-shadow: inset 2px 0 #8fd3f4 !important; }
html.skin-dp .chip.on { border-color: rgba(143, 211, 244, .6) !important; background: rgba(143, 211, 244, .07) !important; color: var(--cyan) !important; box-shadow: none !important; }
/* builder: progress and rail */
html.skin-dp .wiz-xp { height: 3px !important; border: 0 !important; background: rgba(255, 255, 255, .07) !important; }
html.skin-dp .wiz-xp > span { background: #8fd3f4 !important; box-shadow: none !important; }
html.skin-dp .wiz-xp > b { color: var(--mute) !important; font-weight: 400 !important; }
html.skin-dp .wiz-rail > * { box-shadow: none !important; filter: none !important; }
html.skin-dp .wiz, html.skin-dp .wiz * { --cls: #8fd3f4; }
html.skin-dp .wiz-foot { background: #060a0f !important; border-color: var(--edge-2) !important; border-radius: 0 !important; box-shadow: none !important; }
/* section washes muted to near-black */
html.skin-dp :is(.main, .page, .shell, .wiz) { background-image: none !important; }
/* glows off across the board, except live dots */
html.skin-dp :is(.dp-shield, .dp-hexsvg, .dp-shieldsvg, .holoicon, .ico, .navled, .side-nav a.on::before) { filter: none !important; }
html.skin-dp :is(.hpbar, .dp-meter, .cell-bars) * { box-shadow: none !important; }
html.skin-dp .banner { border-radius: 0 !important; }
/* background art kept, pushed far back */
html.skin-dp .appbg-img { opacity: .16 !important; filter: saturate(.3) brightness(.75); }
html.skin-dp .appbg-dust i { opacity: .15 !important; }
/* sheet instruments: same shapes, finer lines */
html.skin-dp { --dp-line: rgba(140, 190, 220, .17); --brk-c: rgba(143, 211, 244, .45); --hpg: #7cc4a4; }
html.skin-dp .dp-hexsvg polygon { stroke-width: 1 !important; fill: rgba(143, 211, 244, .03) !important; stroke: rgba(143, 211, 244, .5) !important; }
html.skin-dp .dp-hexsvg polygon.in { stroke: rgba(143, 211, 244, .12) !important; fill: none !important; }
html.skin-dp .dp-abil.top .dp-hexsvg polygon:not(.in) { stroke: #e2a64b !important; fill: rgba(226, 166, 75, .05) !important; }
html.skin-dp .dp-abil.top .dp-score { color: #e2a64b !important; }
html.skin-dp .dp-shieldsvg path { fill: rgba(8, 13, 19, .9) !important; stroke-width: 1 !important; stroke: rgba(143, 211, 244, .6) !important; }
html.skin-dp .dp-fseg { gap: 2px !important; }
html.skin-dp .dp-fseg i { height: 7px !important; background: #8fd3f4 !important; box-shadow: none !important; border-radius: 0 !important; opacity: .85; }
html.skin-dp .dp-fseg i.off { background: #8fd3f4 !important; opacity: .12; }
html.skin-dp :is(.dp-abil, .dp-meter, .dp-panel, .dp-stat) { background-color: rgba(8, 13, 19, .9) !important; }
html.skin-dp [class*="hpbar"] i, html.skin-dp .dp-hp i { box-shadow: none !important; }
html.skin-dp .rec-bg { opacity: .14 !important; filter: saturate(.25) brightness(.7); }
/* v23b: area finishes — Command, Holotable, Archives, Workshop, GM console */
html.skin-dp :is(h1, h2, .ast-title, .cmd-hello h2, .hdr-title h1) { text-transform: none !important; font-family: var(--font-display) !important; font-weight: 500 !important; }
html.skin-dp .cmd-hello h2 { font-size: 26px !important; color: #eef4f8; }
html.skin-dp .ast-title { font-size: 26px !important; }
html.skin-dp .hdr-title h1 { font-size: 20px !important; letter-spacing: .06em !important; }
html.skin-dp .hdr-title h1::after { height: 1px !important; box-shadow: none !important; background: linear-gradient(90deg, #8fd3f4, transparent) !important; }
html.skin-dp :is(.avatar, .idph) { box-shadow: none !important; }
html.skin-dp .avatar:not([style*="url"]) { background: rgba(226, 166, 75, .08) !important; color: #e2a64b !important; border: 1px solid rgba(226, 166, 75, .55) !important; }
html.skin-dp .idph b { color: #e2a64b; }
html.skin-dp .side-nav a.on { background: rgba(143, 211, 244, .06) !important; box-shadow: inset 0 0 0 1px rgba(143, 211, 244, .3) !important; border-radius: 0 !important; }
html.skin-dp .side-nav a.on::before { box-shadow: none !important; }
html.skin-dp .side-nav a.on .ico { filter: none !important; }
/* holotable: projection floor behind the map, crisper tools */
html.skin-dp .mapwrap { background: radial-gradient(ellipse at 50% 60%, rgba(30, 70, 100, .35), transparent 70%), linear-gradient(rgba(143, 211, 244, .05) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(143, 211, 244, .05) 1px, transparent 1px) 0 0 / 32px 32px, #04090e !important; }
html.skin-dp .maptools .btn { height: 32px; font-size: 13px; }
/* archives and workshop: record-style entries */
html.skin-dp :is(.compdetail, .itemdetail) { border-left: 1px solid rgba(143, 211, 244, .6) !important; }
html.skin-dp .workshop { background: #050b11 !important; }
html.skin-dp :is(.ws-slot, .ws-part, .modslot) { border-radius: 0 !important; box-shadow: none !important; }
html.skin-dp .ws-pips i, html.skin-dp .att-pips i { box-shadow: none !important; }
/* GM console */
html.skin-dp .ast-hero { background: linear-gradient(135deg, rgba(10, 16, 23, .95), rgba(5, 9, 14, .97)) !important; border-color: var(--edge-2) !important; }
html.skin-dp .ast-act.here { box-shadow: none !important; animation: none !important; background: #e2a64b !important; }
html.skin-dp .ast-stats > div { border-radius: 0 !important; border-left-color: rgba(143, 211, 244, .6) !important; }
html.skin-dp .ast-tabs .tabs { border-radius: 0 !important; }

/* ===== v24: crew projections ===== */
button.crewfig { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; }
button.crewfig:focus-visible { outline: 1px solid var(--cy, #8fd3f4); outline-offset: 4px; }
.hfig-cv { display: block; width: 78px; height: 104px; }
.crewfig.picked .hfig-n { color: #e2a64b; text-shadow: none; }
.crewfig.off .hfig-c { color: var(--mute); }
.crewfig.down .hfig-c { color: var(--red, #e06a5f); }
.crewfig.down .hfig-hp, .crewfig.off .hfig-hp { opacity: .6; }
.partyholo .crewcard, .ast-holo .crewcard { position: absolute; z-index: 3; left: 50%; top: 4px; transform: translateX(-50%); width: min(260px, 92%); }
.crewcard { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: rgba(6, 11, 17, .96); border: 1px solid rgba(143, 211, 244, .4); text-align: left; }
.crewcard b { font: 500 16px var(--font-display); letter-spacing: .03em; }
.crewcard-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.crewcard-stats span { font: 400 9.5px var(--mono); color: var(--mute); border-left: 1px solid rgba(143, 211, 244, .25); padding-left: 6px; }
.crewcard-stats em { display: block; font: 500 14px var(--mono); font-style: normal; color: var(--ink); }
.ast-holo { position: relative; }
@media (max-width: 900px) { .hfig-cv { width: 62px; height: 84px; } }
.ast-holo .hfig-cv { width: 50px; height: 68px; }

/* ===== v24: GM transmissions ===== */
.commswrap { position: fixed; z-index: 9000; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(460px, calc(100vw - 24px)); animation: commsin .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes commsin { from { opacity: 0; transform: translate(-50%, 12px); } }
.commscard { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: rgba(6, 10, 15, .97); border: 1px solid rgba(226, 166, 75, .5); box-shadow: 0 20px 50px rgba(0, 0, 0, .6); background-image: linear-gradient(90deg, rgba(226, 166, 75, .08), transparent 60%); }
.commscard .txst { color: #e2a64b; }
.commshead { gap: 12px; align-items: center; flex-wrap: nowrap; }
.commscard .wave { display: flex; gap: 2px; align-items: center; height: 24px; flex: none; }
.commscard .wave i { width: 2px; background: #e2a64b; animation: commswave 1.1s ease-in-out infinite; }
@keyframes commswave { 50% { transform: scaleY(.3); } }
.txmsg { margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.5; color: var(--ink); max-height: 40vh; overflow-y: auto; }
.txthumb { display: inline-block; width: 44px; height: 44px; background: center / cover no-repeat; border: 1px solid rgba(143, 211, 244, .35); padding: 0; cursor: pointer; flex: none; }
.txthumb.lg { width: 100%; height: 160px; }
.txbig { max-width: min(90vw, 900px); max-height: 75vh; display: block; }
.txcomp { min-width: min(440px, 86vw); gap: 10px; }
.txcomp textarea { width: 100%; font-size: 16px; }
.txattach { align-items: center; gap: 8px; flex-wrap: wrap; }
.commslist { display: flex; flex-direction: column; margin-bottom: 10px; }
.commsrow { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 0 9px 10px; border: 0; border-bottom: 1px solid var(--edge, rgba(140, 190, 220, .12)); border-left: 2px solid transparent; background: none; color: inherit; font: inherit; cursor: pointer; }
.commsrow.unread { border-left-color: #e2a64b; }
.commsrow:hover { background: rgba(143, 211, 244, .04); }
.commsmeta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--mute); }
.commsmeta b { font-weight: 600; color: var(--ink-2, #b9c7d1); }
.commsmeta time { font-family: var(--mono); white-space: nowrap; }
.commstext { font-size: 14px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.commsread { font-size: 11.5px; color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .commswrap, .commscard .wave i { animation: none; } }

/* ===== v25: Datapad skin everywhere — one set of rules for every remaining component ===== */
html.skin-dp { accent-color: #8fd3f4; }
/* 1. Square corners on everything, except things that are truly round (dots, tokens, rings, globes, holograms, dice) */
html.skin-dp body *:not(:is(.dot, .pdot, .live-dot, .navled, .tok, .tok *, .mapwrap *, .hglobe, .hglobe *, .ph-base, .ph-base *, .proj-galaxy, .proj-galaxy *, .proj-rim, .pg-arm, .pg-core, .bt-ring, .hcube, .hcube *, .wave i, .spin, .spinner, .knob, .dice, .dice *, .die-sw, .ring, .hsil, .hsil *, .step-dot, .ast-act, .wr-dots *, input[type=radio], input[type=checkbox], input[type=range], svg, svg *, canvas, .appbg-dust i, .bt-cube *, .tokmenu *)) { border-radius: 2px !important; }
html.skin-dp .avatar { border-radius: 2px !important; }
/* 2. No glows or drop shadows on controls and panels; text without halos */
html.skin-dp :is(.btn, .iconbtn, .pill, .chip, .tag, .card, .unit, .charcard, .pending, .remind, .vital, .msg, .detail, .qa, .li, .slot, .stat, .tabs, .tabs button, .side-char, .play-turn, .play-hp, .sessionbar, .proj-panel, .popover, .toast, .modal, .itemcard, .pickitem, .feat, .avatar, .idph, .bar, .bar > i, .hpbar, .hpbar *, .side-nav a, .mobtabs, .mobtabs button, .comphead, .readout, .turnbanner, .actionbar, .txcard, .glancecard) { box-shadow: none !important; text-shadow: none !important; }
html.skin-dp :is(.hfig-n, .dp-amber, .dp-modv, .dp-score, .num, .txh, .brand, .side-brand *) { text-shadow: none !important; }
html.skin-dp :is(.charcard, .unit):hover { transform: none !important; }
html.skin-dp .modal { box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important; border: 1px solid var(--edge-3) !important; background: #070c12 !important; }
html.skin-dp .modal-bg { backdrop-filter: blur(2px) !important; background: rgba(2, 4, 7, .72) !important; }
html.skin-dp :is(.popover, .toast) { background: #070c12 !important; border: 1px solid var(--edge-3) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .55) !important; }
/* 3. Bars: thin, flat, muted status colours */
html.skin-dp .bar { height: 4px !important; background: rgba(255, 255, 255, .07) !important; }
html.skin-dp .bar > i { background: #7cc4a4 !important; }
html.skin-dp .bar.mid > i { background: #e2a64b !important; }
html.skin-dp .bar.low > i { background: #e06a5f !important; }
html.skin-dp .hfig-hp { height: 2px !important; }
html.skin-dp .hfig-hp span { background: #7cc4a4 !important; box-shadow: none !important; }
html.skin-dp .hfig-hp span.hurt { background: #e2a64b !important; } html.skin-dp .hfig-hp span.crit { background: #e06a5f !important; }
/* 4. Chips, tags and pills: flat labels */
html.skin-dp :is(.chip, .tag, .pill) { font-family: var(--mono) !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: .02em; background: transparent !important; border-color: var(--edge-3) !important; color: var(--ink-2) !important; }
html.skin-dp :is(.chip.on, .chip.holo) { color: #8fd3f4 !important; border-color: rgba(143, 211, 244, .55) !important; background: rgba(143, 211, 244, .06) !important; }
html.skin-dp :is(.chip.good, .tag.ok) { color: #7cc4a4 !important; border-color: rgba(124, 196, 164, .5) !important; }
html.skin-dp :is(.chip.bad, .tag.live) { color: #e06a5f !important; border-color: rgba(224, 106, 95, .5) !important; }
html.skin-dp .tag.warn { color: #e2a64b !important; border-color: rgba(226, 166, 75, .5) !important; }
/* 5. Panels: one dark surface, hairline edge */
html.skin-dp :is(.charcard, .unit, .play-turn, .play-hp, .sessionbar, .proj-panel, .li.click, .slot, .stat, .vital, .msg, .detail, .qa, .side-char, .readout, .turnbanner, .actionbar, .feat, .itemcard) { background: rgba(9, 14, 20, .9) !important; border-color: var(--edge-2) !important; backdrop-filter: none !important; }
html.skin-dp :is(.charcard, .unit, .qa):hover { border-color: rgba(143, 211, 244, .4) !important; }
/* banners that used gold or class-coloured washes */
html.skin-dp .pending { background: rgba(226, 166, 75, .05) !important; border: 1px solid rgba(226, 166, 75, .25) !important; border-left: 2px solid #e2a64b !important; color: var(--ink) !important; }
html.skin-dp .dp > .dp-backdrop { opacity: .14 !important; filter: saturate(.3) brightness(.7); }
html.skin-dp .comphead { background: none !important; border-bottom-color: var(--edge-2) !important; }
html.skin-dp .comphead .txst { color: var(--mute) !important; }
/* 6. Attack and action rows: outlined, amber numbers, not filled slabs */
html.skin-dp .btn.pri.play-atk { background: rgba(9, 14, 20, .9) !important; border: 1px solid var(--edge-3) !important; border-left: 2px solid #e2a64b !important; color: var(--ink) !important; justify-content: space-between; clip-path: none !important; }
html.skin-dp .btn.pri.play-atk .num { color: #e8b260 !important; }
html.skin-dp .btn.big { font-size: 15px; letter-spacing: .1em; }
/* 7. Navigation */
html.skin-dp .iconbtn { background: transparent !important; border-color: var(--edge-2) !important; }
html.skin-dp :is(.iconbtn.on, .hdr-nav a.on, .hdr-nav .on) { border-color: rgba(143, 211, 244, .55) !important; background: rgba(143, 211, 244, .07) !important; color: #8fd3f4 !important; }
html.skin-dp .mobtabs { background: #060a0f !important; border-top: 1px solid var(--edge-2) !important; }
html.skin-dp .mobtabs button { font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: .06em; text-transform: uppercase; }
html.skin-dp .tabs { background: transparent !important; }
/* 8. Titles that were wide caps */
html.skin-dp .txh { font: 500 19px var(--font-display) !important; text-transform: none !important; letter-spacing: .02em !important; }
html.skin-dp :is(.recruit-h, .idname) { font-family: var(--font-display) !important; font-weight: 500 !important; letter-spacing: .03em !important; }
/* 9. Inputs */
html.skin-dp :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { background-color: rgba(4, 8, 12, .8) !important; border-color: var(--edge-3) !important; box-shadow: none !important; }
html.skin-dp :is(input, select, textarea):focus { border-color: rgba(143, 211, 244, .7) !important; outline: none; }

/* v25b: compendium categories and page headers on phones */
html.skin-dp .cats button { white-space: nowrap; flex: none; }
html.skin-dp .cats button.on { color: #8fd3f4 !important; background: rgba(143, 211, 244, .06) !important; box-shadow: inset 0 -1px 0 #8fd3f4 !important; }
html.skin-dp .proj-panel { border-radius: 2px !important; box-shadow: none !important; }
@media (max-width: 600px) {
  html.skin-dp .page > .wrap > .spread:first-child:has(> div > h2) { flex-wrap: wrap; gap: 12px; }
  html.skin-dp .page > .wrap > .spread:first-child:has(> div > h2) > .row { flex-direction: row !important; flex-wrap: wrap; width: 100%; }
}