:root {
  --navy: #0f2f4b;
  --bg: #0a1624;
  --surface: #0f2136;
  --surface-2: #152c46;
  --border: #234465;
  --edge: #e9dfbf;
  --text: #f1e8cb;
  --muted: #9fb0c2;
  --accent: #da5130;
  --accent-ink: #fbf3dc;
  --accent-soft: rgba(218, 81, 48, 0.16);
  --cream: #efe4bf;
  --cream-soft: rgba(239, 228, 191, 0.08);
  --danger: #ff6b55;
  --warn: #e8a33c;
  --ok: #8fcf9a;
  --radius: 4px;
  --chamfer: 14px;
  --serif: 'Russo One', 'Eurostile', system-ui, sans-serif;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, Menlo, monospace;
  --tabbar-h: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }

.icon { width: 20px; height: 20px; flex: none; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

/* ---------- shell ---------- */
.shell { min-height: 100dvh; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); }
.shell.full { padding-bottom: 0; }
.boot { min-height: 100dvh; display: grid; place-items: center; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.brand { font-family: var(--serif); font-weight: 650; font-size: 1.15rem; letter-spacing: 0.01em; color: var(--accent); }
.topbar-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn { background: none; border: 0; padding: 6px; margin-left: -6px; border-radius: 10px; display: grid; place-items: center; }
.icon-btn:active { background: var(--surface-2); }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font-size: 0.72rem; color: var(--muted); border-radius: 10px; }
.tab.on { color: var(--accent); }
.tab .icon { width: 22px; height: 22px; }
@media (min-width: 760px) {
  .tabbar { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); width: 520px; border: 1px solid var(--border); border-radius: 18px; padding-bottom: 6px; }
}

.page { max-width: 920px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-left)) 24px; }
.page.narrow { max-width: 680px; }
.page.wide { max-width: 1100px; }
.page-title { font-family: var(--serif); font-weight: 650; font-size: 1.8rem; line-height: 1.15; margin: 6px 0 14px; }
.group-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; margin: 26px 0 10px; }
section:first-of-type > .group-title { margin-top: 14px; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border); font-weight: 600;
}
.btn.small { min-height: 36px; padding: 0 12px; font-size: 0.9rem; }
.btn.small .icon { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.link { background: none; border: 0; padding: 4px 2px; color: var(--accent); font-weight: 500; }
.link.danger { color: var(--danger); }

.input, select, .auth input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  font: inherit; font-size: 16px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.input:focus, select:focus, .auth input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.input { resize: vertical; min-height: 96px; line-height: 1.5; }
textarea.input.tall { min-height: 46vh; }
.input.big { font-family: var(--serif); font-size: 1.5rem; text-align: center; font-weight: 650; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.inline { flex-direction: row; align-items: center; gap: 10px; }
.label { font-size: 0.8rem; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.row { display: flex; gap: 10px; align-items: flex-end; }
.row > * { flex: 1; }
.row > .btn { flex: none; }
.stack { display: flex; flex-direction: column; gap: 16px; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 12px; margin: 0 -16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.tag .icon { width: 12px; height: 12px; }
.tag.gold { background: var(--accent-soft); color: var(--accent); }
.tag.warn { background: rgba(201, 138, 58, 0.14); color: var(--warn); }
.tag.ghost { background: transparent; border: 1px solid var(--border); }
.chip .tag { margin-left: 4px; padding: 0 6px; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
a.card:active { background: var(--surface-2); }
@media (hover: hover) { a.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } }
.card-title { font-weight: 600; font-size: 1.02rem; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.char-card { display: flex; gap: 12px; align-items: flex-start; }
.char-avatar { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-family: var(--serif); font-weight: 650; font-size: 1.35rem; color: var(--accent); background: radial-gradient(circle at 30% 25%, #3a2c1d, #231b14); border: 1px solid #4a3a28; }
.char-body { min-width: 0; flex: 1; }
.hp { font-size: 0.8rem; font-weight: 600; color: #e0866f; }

.timeline { display: flex; flex-direction: column; gap: 10px; }
.recap-card .card-title { font-family: var(--serif); font-size: 1.2rem; margin: 2px 0 4px; }
.recap-date { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.empty { text-align: center; padding: 48px 16px; border: 1px dashed var(--border); border-radius: var(--radius); }
.empty-title { font-family: var(--serif); font-size: 1.25rem; margin-bottom: 4px; }
.notice { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-size: 0.9rem; margin-bottom: 14px; }
.notice.gold { background: var(--accent-soft); color: var(--accent); }

/* ---------- character sheet ---------- */
.sheet-head { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.sheet-meta { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.meta-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 1; max-width: 260px; }
.meta-field select { min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 15px; }
.save-state { font-size: 0.78rem; color: var(--muted); }
.save-state.saving { color: var(--accent); }
.save-state.error { color: var(--danger); font-weight: 600; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; padding: 6px 14px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; color: var(--muted); }
.seg button.on { background: var(--surface-2); color: var(--text); }

.sheet-list { display: flex; flex-direction: column; gap: 14px; }
.sheet-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.section-title { font-family: var(--serif); font-weight: 650; font-size: 1.15rem; margin: 0 0 12px; }
.field-grid { display: grid; gap: 12px; align-items: end; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.field-grid.one { grid-template-columns: 1fr; }
.field.span { grid-column: 1 / -1; }


.ability { background: var(--surface-2); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.ability .label { font-size: 0.72rem; }
.ability-row { display: flex; align-items: center; gap: 6px; }
.ability-row .input { min-height: 34px; padding: 4px 6px; text-align: center; }
.ability .check { width: 22px; height: 22px; }
.skill-list { display: flex; flex-direction: column; gap: 6px; }
.skill { display: flex; align-items: center; gap: 10px; }
.skill-name { flex: 1; font-size: 0.92rem; }
.skill .input { width: 72px; flex: none; min-height: 36px; text-align: center; padding: 4px; }
.skill-list .field { margin-top: 8px; }
.check { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); display: grid; place-items: center; padding: 0; font-size: 12px; color: var(--accent); }
.check.on { border-color: var(--accent); background: var(--accent-soft); }
.flash { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 3px var(--accent); border-color: var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.danger-zone { margin-top: 28px; display: flex; justify-content: center; }

/* PNG overlay sheet */
.sheet-page.wide .panzoom { height: calc(100dvh - 210px); min-height: 420px; }
.sheet-art { position: relative; width: 100%; container-type: inline-size; user-select: none; }
.sheet-art img { display: block; width: 100%; height: auto; pointer-events: none; }
.ov { position: absolute; display: flex; }
.ov-input { width: 100%; height: 100%; border: 0; background: rgba(255, 255, 255, 0); color: #1d1610; font: inherit; font-family: var(--sans); padding: 0 0.3em; outline: none; border-radius: 3px; resize: none; text-align: inherit; line-height: 1.25; }
textarea.ov-input { padding: 0.2em 0.3em; overflow: auto; }
.ov-input:focus { background: rgba(217, 165, 74, 0.22); box-shadow: 0 0 0 1px rgba(150, 100, 20, 0.6); }
.ov-input.big { text-align: center; font-weight: 600; }
.ov-check { width: 100%; height: 100%; border: 0; background: none; padding: 0; color: #1d1610; font-size: inherit; line-height: 1; display: grid; place-items: center; }

/* ---------- pan / zoom ---------- */
.panzoom { position: relative; overflow: hidden; touch-action: none; border-radius: var(--radius); background: #0d0a08; border: 1px solid var(--border); }
.panzoom-inner { width: 100%; transform-origin: 0 0; will-change: transform; }
.panzoom-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 0.72rem; color: var(--muted); background: rgba(0, 0, 0, 0.55); padding: 4px 10px; border-radius: 999px; pointer-events: none; white-space: nowrap; animation: fade 4s forwards; }
@keyframes fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.map-stage { position: relative; height: calc(100dvh - 58px - env(safe-area-inset-top)); }
.map-stage .panzoom { height: 100%; border-radius: 0; border: 0; }
.map-content img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.sheet-panel { position: absolute; top: 12px; right: 12px; width: min(360px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); z-index: 5; }

/* ---------- maps ---------- */
.map-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.map-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.map-thumb { aspect-ratio: 4 / 3; background: var(--surface-2); }
.map-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-label { padding: 10px 12px; display: flex; flex-direction: column; }
.dropzone { position: relative; display: grid; place-items: center; min-height: 200px; border: 1.5px dashed var(--border); border-radius: var(--radius); text-align: center; color: var(--muted); overflow: hidden; background: var(--surface); }
.dropzone .icon { width: 32px; height: 32px; }
.dropzone img { width: 100%; max-height: 360px; object-fit: contain; }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- recaps ---------- */
.recap-title { font-family: var(--serif); font-weight: 650; font-size: 2rem; line-height: 1.15; margin: 6px 0 18px; }
.prose { font-size: 1.04rem; line-height: 1.7; }
.prose p { margin: 0 0 1em; }
.prose h2, .prose h3, .prose h4 { font-family: var(--serif); font-weight: 650; margin: 1.5em 0 0.4em; line-height: 1.25; }
.prose blockquote { margin: 1em 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); color: var(--muted); font-style: italic; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.comments { margin-top: 36px; border-top: 1px solid var(--border); }
.comment { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.comment-head { display: flex; gap: 8px; align-items: baseline; }
.comment-head .link { margin-left: auto; color: var(--muted); }
.comment-body { white-space: pre-wrap; margin-top: 2px; }
.comment-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 14px; }
.comment-form textarea { min-height: 48px; }

/* ---------- access ticks ---------- */
.access { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.access-head { display: flex; justify-content: space-between; align-items: center; }
.access-quick { font-size: 0.85rem; color: var(--muted); }
.access-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tick { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 0.92rem; font-weight: 500; cursor: pointer; user-select: none; }
.tick input { position: absolute; opacity: 0; pointer-events: none; }
.tickbox { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--muted); display: grid; place-items: center; }
.tick.on { border-color: var(--accent); background: var(--accent-soft); }
.tick.on .tickbox { background: var(--accent); border-color: var(--accent); }
.tick.on .tickbox::after { content: ''; width: 5px; height: 9px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.tick:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- party ---------- */
.game-card { margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.game-head .card-title { font-family: var(--serif); font-size: 1.2rem; margin-bottom: 4px; }
.game-actions { display: flex; gap: 10px; }
.new-game { display: flex; flex-direction: column; gap: 10px; border-style: dashed; }
.new-game select { width: 150px; flex: none; }
.player-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.install { display: flex; flex-direction: column; gap: 8px; }

/* ---------- auth ---------- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(ellipse at 50% 0%, #2c2116 0%, var(--bg) 60%); }
.auth-card { width: 100%; max-width: 380px; text-align: center; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 14px; text-align: left; }
.auth-mark { font-size: 2.4rem; color: var(--accent); line-height: 1; }
.auth h1 { font-family: var(--serif); font-weight: 650; font-size: 2.1rem; margin: 10px 0 4px; }
.form-msg { font-size: 0.9rem; color: var(--accent); background: var(--accent-soft); padding: 10px 12px; border-radius: 10px; }
.auth-foot { margin-top: 12px; }

/* ---------- misc ---------- */
.spinner { width: 28px; height: 28px; margin: 40px auto; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: calc(100% - 32px); }
.toast { background: #f1e8da; color: #1b1308; padding: 10px 16px; border-radius: 12px; font-weight: 500; font-size: 0.92rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); animation: rise 0.2s ease-out; max-width: 480px; }
.toast.error { background: var(--danger); color: #fff; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition: none !important; } }


/* =========================================================
   ACDF colonist terminal layer
   ========================================================= */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 110% 55% at 50% -8%, rgba(218, 81, 48, 0.1), transparent 60%),
    radial-gradient(rgba(239, 228, 191, 0.06) 1px, transparent 1.4px);
  background-size: 100% 100%, 22px 22px;
}
::selection { background: var(--accent); color: var(--accent-ink); }

/* Type */
.page-title, .recap-title, .section-title, .empty-title, .auth h1, .card-title, .topbar-title, .btn {
  font-family: var(--serif); font-weight: 400; letter-spacing: 0.02em;
}
.page-title { font-size: 1.7rem; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.page-title::after { content: ''; flex: 1; height: 4px; background: repeating-linear-gradient(-55deg, var(--edge) 0 3px, transparent 3px 8px); opacity: 0.35; }
.recap-title { text-transform: uppercase; font-size: 1.75rem; }
.section-title { text-transform: uppercase; font-size: 1rem; display: flex; align-items: center; gap: 10px; color: var(--cream); }
.section-title::after { content: ''; flex: 1; height: 2px; background: var(--border); }
.label, .group-title, .recap-date, .tag, .save-state, .access-quick, .panzoom-hint, .tab span, .seg button, .chip, .tick, .notice {
  font-family: var(--mono);
}
.label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.group-title { color: var(--accent); font-size: 0.72rem; letter-spacing: 0.14em; display: flex; align-items: center; gap: 8px; }
.group-title::before { content: ''; width: 18px; height: 4px; background: var(--accent); transform: skewX(-30deg); }
.recap-date { color: var(--accent); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tag { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 2px; background: var(--cream-soft); color: var(--cream); }
.tag.gold { background: var(--accent-soft); color: #ff9c80; }
.tab span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; }
code { font-family: var(--mono); }

/* Top bar & brand */
.topbar { background: rgba(10, 22, 36, 0.9); border-bottom: 3px solid var(--edge); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.brand img { height: 30px; width: auto; }
.topbar-title { text-transform: uppercase; font-size: 1.02rem; }

/* Chamfered panels (like the colonist profile sheet) */
.card, .sheet-section, .access, .map-card, .sheet-panel, .empty {
  position: relative; border-radius: 0; border: 0;
  background: var(--surface);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--border), inset 0 3px 0 var(--edge);
}
.card::after, .sheet-section::after, .access::after, .map-card::after, .sheet-panel::after {
  content: ''; position: absolute; top: -2px; left: calc(100% - var(--chamfer) - 1px); width: calc(var(--chamfer) * 1.5); height: 5px; background: var(--edge);
  transform-origin: 0 0; transform: rotate(45deg); pointer-events: none;
}
.sheet-section { padding-top: 16px; }
.card { padding-top: 16px; }
a.card:active { background: var(--surface-2); }
@media (hover: hover) { a.card:hover, a.map-card:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px #2f5a85, inset 0 3px 0 var(--accent); } }
.empty { box-shadow: inset 0 0 0 1px var(--border); background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(239, 228, 191, 0.025) 12px 24px), var(--surface); }
.empty-title { text-transform: uppercase; }
.notice { border-radius: 0; font-size: 0.8rem; background: var(--cream-soft); border-left: 4px solid var(--cream); }
.notice.gold { background: var(--accent-soft); border-left-color: var(--accent); color: #ffb39e; }
.sheet-panel { background: var(--surface); }
.map-card { overflow: hidden; }

/* Character cards */
.char-avatar { border-radius: 0; border: 0; color: var(--accent-ink); background: var(--accent); font-family: var(--serif); font-weight: 400;
  clip-path: polygon(0 0, 72% 0, 100% 28%, 100% 100%, 0 100%); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.2); }
.card-title { font-size: 1.05rem; }
.recap-card .card-title, .game-head .card-title { font-size: 1.15rem; text-transform: uppercase; }
.hp { color: var(--ok); font-family: var(--mono); font-size: 0.74rem; }

/* Controls */
.btn { border-radius: 2px; text-transform: uppercase; font-size: 0.92rem; letter-spacing: 0.05em; border-color: var(--border); }
.btn.small { font-size: 0.8rem; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
.btn.primary:hover:not(:disabled) { background: #e8603e; }
.btn.danger { color: var(--danger); }
.input, select, .auth input { border-radius: 2px; background: #081320; border-color: var(--border); color: var(--text); }
.input:focus, select:focus, .auth input:focus { border-color: var(--cream); box-shadow: 0 0 0 3px var(--cream-soft); }
.input.big { font-family: var(--serif); font-weight: 400; color: var(--cream); font-size: 1.55rem; }
.ability { border-radius: 0; background: #081320; box-shadow: inset 0 0 0 1px var(--border); position: relative; }
.ability::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; pointer-events: none; }
.ability .label { color: var(--cream); }
.check { border-radius: 1px; width: 20px; height: 20px; border: 2px solid var(--muted); background: transparent; }
.check.on { background: var(--accent); border-color: var(--accent); color: transparent; }
.seg { border-radius: 2px; background: #081320; }
.seg button { border-radius: 1px; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.page-tabs { margin-bottom: 12px; }
.chip { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; padding: 8px 14px; background: transparent; }
.chip.on { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.chip.on .tag { background: rgba(15, 47, 75, 0.15); color: var(--navy); }
.tick { border-radius: 2px; font-size: 0.8rem; }
.tick.on { border-color: var(--accent); background: var(--accent-soft); }
.tick.on .tickbox { background: var(--accent); border-color: var(--accent); }
.tick.on .tickbox::after { border-color: var(--accent-ink); }
.tickbox { border-radius: 1px; }
.link { color: #ff9c80; }
.flash { animation: flash-acdf 2.4s ease-out; }
@keyframes flash-acdf { 0%, 30% { box-shadow: 0 0 0 3px var(--cream); border-color: var(--cream); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Tab bar */
.tabbar { background: rgba(9, 19, 32, 0.96); border-top: 3px solid var(--edge); }
.tab { position: relative; border-radius: 0; }
.tab.on { color: var(--cream); }
.tab.on::before { content: ''; position: absolute; top: -9px; left: 28%; right: 28%; height: 5px; background: var(--accent); clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 100%, 0 100%); }
@media (min-width: 760px) { .tabbar { border-radius: 0; border: 0; border-top: 3px solid var(--edge); box-shadow: inset 0 0 0 1px var(--border); } }

/* Recaps */
.prose h2, .prose h3, .prose h4 { font-family: var(--serif); font-weight: 400; text-transform: uppercase; color: var(--cream); }
.prose strong { color: var(--cream); }
.prose blockquote { border-left: 4px solid var(--accent); color: var(--muted); }
.comment-head strong { font-family: var(--mono); color: var(--accent); font-size: 0.85rem; text-transform: uppercase; }
.comments { border-top: 3px solid var(--edge); }

/* Maps */
.map-thumb { background: #081320; }
.panzoom { background: #060e18; border-radius: 0; border-color: var(--border); }
.dropzone { border-radius: 0; border-color: var(--border); background: var(--surface); }

/* Auth */
.auth { background:
  radial-gradient(ellipse at 50% 0%, rgba(218, 81, 48, 0.22), transparent 55%),
  radial-gradient(rgba(239, 228, 191, 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px,
  var(--bg); }
.auth-mark { width: auto; height: auto; margin: 0 auto 6px; }
.auth-mark img { height: 120px; width: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5)); }
.auth h1 { font-size: 2.3rem; text-transform: uppercase; letter-spacing: 0.16em; margin: 12px -0.16em 2px 0; }
.auth-sub { font-family: var(--mono); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent); margin: 0 0 8px; }
.auth-tagline { margin-top: 26px; opacity: 0.85; }
.auth-tagline img { width: 160px; height: auto; }
.form-msg { border-radius: 0; font-family: var(--mono); font-size: 0.8rem; background: var(--accent-soft); color: #ffb39e; }
.remember { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--muted); cursor: pointer; user-select: none; }
.remember input { position: absolute; opacity: 0; pointer-events: none; }
.remember .tickbox { border-color: var(--muted); }
.remember.on { color: var(--text); }
.remember.on .tickbox { background: var(--accent); border-color: var(--accent); }
.remember.on .tickbox::after { content: ''; width: 5px; height: 9px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }

/* Toasts & spinner */
.toast { background: var(--cream); color: var(--navy); border-radius: 0; font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.toast.error { background: var(--accent); color: var(--accent-ink); }
.spinner { border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); border-right-color: var(--cream); }
.sheet-panel { position: absolute; }
.panzoom-hint { font-size: 0.6rem; white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 24px); }



/* ---------- Colonist profile: header, tabs, lists ---------- */
.icon { vertical-align: -0.15em; }
.label .icon { width: 12px; height: 12px; opacity: 0.8; }
.notice .icon { width: 14px; height: 14px; }
.center { text-align: center; }
.char-head { display: flex; gap: 16px; align-items: center; margin: 4px 0 16px; }
.char-head .portrait { width: 92px; flex: none; }
.char-name { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: 1.6rem; line-height: 1.1; margin: 4px 0 2px; }
.humanity { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 10px; background: var(--accent-soft); border-left: 3px solid var(--accent); }
.humanity strong { font-family: var(--serif); font-weight: 400; color: var(--cream); font-size: 1.1rem; }
.portrait { aspect-ratio: 3 / 4; background: #081320; box-shadow: inset 0 0 0 1px var(--border), inset 0 3px 0 var(--edge); display: grid; place-items: center; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-initial { font-family: var(--serif); font-size: 2.4rem; color: var(--border); }
.portrait.large { width: min(260px, 70%); margin: 0 auto 12px; }
.portrait.large .portrait-initial { font-size: 5rem; }
.portrait-panel { display: flex; flex-direction: column; }
.portrait-actions { justify-content: center; }
.portrait-actions > * { flex: none; }
.sheet-meta { margin-bottom: 14px; }
.char-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px 10px; scrollbar-width: none; border-bottom: 1px solid var(--border); position: sticky; top: calc(env(safe-area-inset-top) + 56px); z-index: 10; background: linear-gradient(var(--bg) 85%, transparent); }
.char-tabs::-webkit-scrollbar { display: none; }
.char-tab { flex: none; border: 0; background: transparent; color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; padding: 9px 12px; border-radius: 0; position: relative; }
.char-tab.on { color: var(--cream); background: var(--surface-2); }
.char-tab.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; background: var(--accent); }
.tab-body { display: flex; flex-direction: column; gap: 14px; }
.input.locked { background: transparent; border-style: dashed; color: var(--cream); cursor: not-allowed; }
.input.locked:focus { box-shadow: none; border-color: var(--border); }
.check:disabled { opacity: 0.6; cursor: not-allowed; }
.setup-head { display: flex; gap: 14px; align-items: center; margin: 6px 0 14px; }
.setup-head img { height: 64px; }
.setup-head .page-title { margin: 2px 0 0; }

.list-editor { display: flex; flex-direction: column; gap: 10px; }
.list-empty { padding: 18px 4px; text-align: center; }
.entry { display: flex; flex-direction: column; gap: 8px; }
.entry.blank { box-shadow: inset 0 0 0 1px var(--accent), inset 0 3px 0 var(--accent); }
.entry-row { display: flex; gap: 8px; align-items: center; }
.entry-row > .input, .entry-row > select { flex: 1; min-width: 0; }
.entry-name { font-weight: 600; }
.entry-row select { flex: 0 0 40%; }
.entry .qty { flex: 0 0 64px !important; text-align: center; }
.entry-del { color: var(--muted); flex: none; margin: 0; }
.entry-del:hover { color: var(--danger); }
.equip { flex: none; border: 1px solid var(--border); background: transparent; color: var(--muted); font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 12px; min-height: 40px; border-radius: 2px; }
.equip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.entry.equipped { box-shadow: inset 0 0 0 1px var(--border), inset 0 3px 0 var(--accent); }
.entry.counter { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; background: var(--surface); padding: 12px;
  box-shadow: inset 0 0 0 1px var(--border), inset 0 3px 0 var(--edge); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.entry.counter.blank { box-shadow: inset 0 0 0 1px var(--accent), inset 0 3px 0 var(--accent); }
.entry-type { min-width: 0; }
.stepper { display: flex; align-items: stretch; }
.step { width: 44px; min-height: 44px; border: 1px solid var(--border); background: var(--surface-2); color: var(--cream); font-family: var(--serif); font-size: 1.3rem; border-radius: 0; }
.step:active { background: var(--accent); color: var(--accent-ink); }
.step-val { width: 64px; border-radius: 0; border-left: 0; border-right: 0; text-align: center; font-family: var(--serif); font-size: 1.15rem; }
@media (max-width: 420px) { .entry.counter { grid-template-columns: 1fr auto; } .entry.counter .entry-type { grid-column: 1 / -1; } .entry.counter .stepper { justify-self: start; } }
.add-entry { border-style: dashed; background: transparent; color: var(--cream); }
.flash-list { animation: flash-acdf 2.4s ease-out; }
.type-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.type-card { display: flex; flex-direction: column; gap: 6px; }
.type-card form { margin-top: 6px; }
.input.num { text-align: center; }

/* ---------- Stats tab (compact) ---------- */
.sheet-section { padding: 14px; }
.section-title { margin-bottom: 10px; }
.field-grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.input { min-height: 40px; padding: 8px 10px; }
.input.big { font-size: 1.35rem; padding: 4px 6px; }

.vitals { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .vitals { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.stat { background: #081320; box-shadow: inset 0 0 0 1px var(--border); padding: 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; min-width: 0; }
.stat .label { font-size: 0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stat .input { width: 100%; text-align: center; min-height: 38px; }
.stat.hp { grid-column: span 2; }
.stat.death { grid-column: span 2; align-items: stretch; }
@media (min-width: 640px) { .stat.hp, .stat.death { grid-column: span 2; } }
.hp-row { display: flex; align-items: center; gap: 6px; width: 100%; }
.hp-row .input { flex: 1; min-width: 0; }
.slash { color: var(--muted); font-family: var(--serif); }
.hp-temp { display: flex; align-items: center; gap: 8px; width: 100%; }
.hp-temp .input { flex: 1; min-height: 32px; padding: 4px; }
.auto-val { font-family: var(--serif); font-size: 1.45rem; color: var(--cream); line-height: 38px; }
.auto-val.small-val { font-size: 1.05rem; }
.auto-val.prof, .prof { color: #ff8a66; }
.stat.auto { background: transparent; box-shadow: none; border: 1px dashed var(--border); }
.death-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pips { display: flex; gap: 6px; }
.pip { width: 20px; height: 20px; border: 2px solid var(--muted); background: transparent; padding: 0; border-radius: 1px; }
.pips { gap: 8px; }
.pip.on { background: var(--accent); border-color: var(--accent); }
.death-row:last-child .pip.on { background: var(--danger); border-color: var(--danger); }

.ability-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .ability-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ability { padding: 8px 6px; gap: 4px; align-items: center; }
.ability > .label { font-family: var(--serif); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--cream); }
.ability .input.big { width: 64px; margin: 0 auto; }
.mod-badge { font-family: var(--serif); font-size: 1.25rem; color: var(--accent-ink); background: var(--accent); padding: 0 10px; min-width: 52px; text-align: center;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.save-row { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; }
.save-row .check { width: 16px; height: 16px; }
.save-val { font-family: var(--mono); }
.prof-add { font-family: var(--mono); font-weight: 700; color: #ff8a66; font-size: 0.85rem; min-width: 26px; }

.skill-grid { display: grid; gap: 2px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.skill-grid .skill { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 28px; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid rgba(35, 68, 101, 0.6); }
.skill-grid .check { width: 16px; height: 16px; }
.skill-name { font-size: 0.84rem; line-height: 1.15; overflow-wrap: anywhere; }
.skill-ab { display: block; font-family: var(--mono); font-size: 0.58rem; color: var(--muted); letter-spacing: 0.06em; }
.skill-val { font-family: var(--mono); font-size: 0.9rem; color: var(--cream); text-align: right; }
.skill.prof .skill-name { color: var(--cream); }
.legend { margin-top: 10px; }

/* ---------- Attacks ---------- */
.attack-list { display: grid; gap: 8px; }
.attack { background: #081320; box-shadow: inset 0 0 0 1px var(--border), inset 3px 0 0 var(--accent); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.attack-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.attack-name { font-family: var(--serif); text-transform: uppercase; color: var(--cream); }
.attack-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.attack-stats > div { display: flex; flex-direction: column; }
.attack-stats strong { font-family: var(--mono); font-size: 0.95rem; }
.ammo-left { color: var(--ok); font-size: 0.8rem; }
.ammo-left.none { color: var(--danger); }
.uses-row { flex-wrap: wrap; }
.uses-row .label { flex: none; }
.uses-max { flex: 0 0 56px !important; }
.uses-row select { flex: 1 1 120px !important; }

/* ---------- Inventory ---------- */
.carry { display: flex; flex-direction: column; gap: 6px; }
.carry-nums { display: flex; gap: 8px; align-items: baseline; }
.carry-nums strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; color: var(--cream); }
.carry-bar { height: 10px; background: #081320; box-shadow: inset 0 0 0 1px var(--border); }
.carry-fill { height: 100%; background: var(--cream); transition: width 0.3s; }
.carry-fill.over, .over { background-color: transparent; color: var(--danger) !important; }
.carry-fill.over { background: var(--danger); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.slot { background: #081320; box-shadow: inset 0 0 0 1px var(--border); padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.slot .label { font-size: 0.6rem; }
.slot strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--cream); }
.slot.full strong { color: #ff8a66; }
.slot-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.slot-btn { width: 28px; height: 28px; border: 1px solid var(--border); background: var(--surface-2); color: var(--cream); padding: 0; }
.inv-cols { display: grid; gap: 14px; }
@media (min-width: 860px) { .inv-cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.inv-col { display: flex; flex-direction: column; gap: 10px; }
.inv-col .group-title { margin: 4px 0 0; }
.item-meta { display: grid; grid-template-columns: 64px 76px minmax(0, 1fr); gap: 8px; }
.item-meta label, .weapon-stats label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.item-meta .label, .weapon-stats .label { font-size: 0.58rem; }
.weapon-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; background: #081320; box-shadow: inset 3px 0 0 var(--accent); }
.weapon-stats .span { grid-column: 1 / -1; }
@media (min-width: 520px) { .weapon-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
select:disabled { opacity: 0.75; cursor: not-allowed; }
.equip:disabled { opacity: 0.5; cursor: not-allowed; }
.slot strong { white-space: nowrap; }
.slot-row { gap: 4px; }
.slot-btn { width: 24px; height: 24px; flex: none; font-size: 0.9rem; line-height: 1; }
.attack-stats strong { overflow-wrap: anywhere; }

/* ---------- Catalogue ---------- */
.cat-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; background: #081320; box-shadow: inset 0 0 0 1px var(--border); color: var(--cream); }
.cat-icon .icon { width: 18px; height: 18px; }
.cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cat-tab-wrap { position: relative; }
.cat-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; border-radius: 2px; }
.cat-tab .icon { width: 18px; height: 18px; }
.cat-tab.on { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.cat-count { font-size: 0.62rem; padding: 0 5px; background: rgba(15, 47, 75, 0.18); border-radius: 2px; }
.cat-tab:not(.on) .cat-count { background: var(--surface-2); }
.caret { font-size: 0.7rem; opacity: 0.7; }
.cat-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 200px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), inset 0 3px 0 var(--edge), 0 16px 40px rgba(0, 0, 0, 0.5); padding: 6px; display: flex; flex-direction: column; }
.cat-menu button { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border: 0; background: transparent; text-align: left; color: var(--text); font-size: 0.92rem; }
.cat-menu button .icon { width: 18px; height: 18px; color: var(--muted); }
.cat-menu button.on, .cat-menu button:hover { background: var(--surface-2); color: var(--cream); }
.cat-menu button.on .icon { color: var(--accent); }
.cat-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cat-crumb { display: flex; align-items: center; gap: 8px; font-family: var(--serif); text-transform: uppercase; font-size: 1.05rem; color: var(--cream); margin-right: auto; }
.cat-crumb .icon { color: var(--accent); }
.cat-search { width: 200px; flex: 0 1 200px; min-height: 38px; }
.table-wrap { overflow-x: auto; box-shadow: inset 0 0 0 1px var(--border); background: var(--surface); }
.cat-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cat-table th { text-align: left; font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; padding: 10px 12px; border-bottom: 3px solid var(--edge); white-space: nowrap; background: #0c1a2b; }
.cat-table td { padding: 9px 12px; border-bottom: 1px solid rgba(35, 68, 101, 0.7); vertical-align: middle; white-space: nowrap; }
.cat-table td.sum-cell { white-space: normal; min-width: 220px; color: var(--muted); font-size: 0.85rem; }
.cat-table tbody tr { cursor: pointer; }
.cat-table tbody tr:hover { background: var(--surface-2); }
.name-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--cream); min-width: 200px; position: sticky; left: 0; background: var(--surface); }
.cat-table tbody tr:hover .name-cell { background: var(--surface-2); }
.name-cell span { white-space: normal; line-height: 1.2; }
.pub-col { text-align: center; width: 60px; }
.pub-btn { border: 1px solid var(--border); background: transparent; color: var(--muted); width: 34px; height: 30px; padding: 0; display: inline-grid; place-items: center; }
.pub-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.item-page .item-head { display: flex; gap: 12px; align-items: center; margin: 6px 0 8px; }
.item-head .cat-icon { width: 48px; height: 48px; }
.item-head .cat-icon .icon { width: 28px; height: 28px; color: var(--accent); }
.item-head .recap-title { margin: 2px 0 0; font-size: 1.5rem; }
.pub-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px dashed var(--border); background: transparent; color: var(--muted); padding: 8px 12px; margin-bottom: 12px; font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }
.pub-toggle.on { border-style: solid; border-color: var(--accent); color: #ffb39e; background: var(--accent-soft); }
.item-image { margin-bottom: 14px; background: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--border); }
.item-image img { max-width: 100%; max-height: 360px; display: block; object-fit: contain; }
.stat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; margin: 0; }
.stat-list dt { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.stat-list dd { margin: 2px 0 0; color: var(--cream); font-size: 0.95rem; }
.effect-list { margin: 0 0 8px; padding-left: 1.1em; display: flex; flex-direction: column; gap: 4px; }
.effect-list li::marker { color: var(--accent); }
.md-table { overflow-x: auto; margin: 0 0 1em; }
.md-table table { border-collapse: collapse; font-size: 0.88rem; width: 100%; }
.md-table th, .md-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.md-table th { background: #0c1a2b; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; }
.add-to .row select { flex: 1; }
.effect-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 64px minmax(0, 1.3fr) auto; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(35, 68, 101, 0.6); }
@media (max-width: 620px) { .effect-row { grid-template-columns: 1fr 1fr; } .effect-row .fx-val { width: 100%; } }
.effect-row select { min-height: 38px; font-size: 14px; padding-top: 6px; padding-bottom: 6px; }
.fx-val { min-height: 38px; }

/* picker modal */
.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(3, 8, 14, 0.72); display: grid; place-items: end center; padding: 0; }
@media (min-width: 640px) { .modal-back { place-items: center; padding: 24px; } }
.modal { width: min(560px, 100%); max-height: 86dvh; display: flex; flex-direction: column; gap: 10px; background: var(--surface); padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: inset 0 0 0 1px var(--border), inset 0 3px 0 var(--edge), 0 -10px 40px rgba(0, 0, 0, 0.5); }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head .section-title { margin: 0; }
.modal .chips { padding-bottom: 4px; }
.chip .icon { width: 14px; height: 14px; }
.pick-list { overflow-y: auto; display: flex; flex-direction: column; min-height: 120px; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border: 0; border-bottom: 1px solid rgba(35, 68, 101, 0.6); background: transparent; text-align: left; color: var(--text); }
.pick-row:hover { background: var(--surface-2); }
.pick-name { flex: 1; display: flex; flex-direction: column; font-weight: 600; color: var(--cream); line-height: 1.2; }
.pick-name .muted { font-weight: 400; }

/* inventory: linked items */
.item.linked .entry-row:first-child { gap: 10px; }
.item-title { flex: 1; font-family: var(--serif); text-transform: uppercase; color: var(--cream); font-size: 0.98rem; line-height: 1.2; }
.ro-val { min-height: 40px; display: flex; align-items: center; justify-content: center; color: var(--cream); font-family: var(--mono); font-size: 0.85rem; border: 1px dashed var(--border); padding: 0 6px; text-align: center; }
.weapon-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px; background: #081320; box-shadow: inset 3px 0 0 var(--accent); font-size: 0.85rem; }
.weapon-sum .label { font-size: 0.58rem; }
.weapon-sum strong { font-family: var(--mono); }
.mode-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.small-chip { padding: 5px 10px; font-size: 0.66rem; }
.add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.add-cat { clip-path: none; }
.entry.counter.no-qty { grid-template-columns: 1fr auto; }

/* stats: effects */
.eff { font-family: var(--mono); font-size: 0.75rem; color: #ffb39e; }
.eff-line { font-size: 0.7rem; color: #ffb39e; }
.ability.changed { box-shadow: inset 0 0 0 1px var(--accent); }
.roll-tag { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 3px; font-family: var(--mono); font-size: 0.58rem; font-weight: 700; vertical-align: 1px; border-radius: 1px; }
.roll-tag.adv { background: var(--ok); color: #0a1624; }
.roll-tag.dis { background: var(--danger); color: #fff; }
.skill.impossible .skill-name, .skill.impossible .skill-val { color: var(--danger); text-decoration: line-through; }
.skill-grid .skill { grid-template-columns: 18px minmax(0, 1fr) auto 30px; }
.effects-panel { box-shadow: inset 0 0 0 1px var(--accent), inset 0 3px 0 var(--accent); }
.fx-source { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid rgba(35, 68, 101, 0.6); font-size: 0.86rem; }
.fx-source strong { font-family: var(--serif); font-weight: 400; text-transform: uppercase; color: var(--cream); }
.ac-breakdown { margin-top: 10px; font-family: var(--mono); font-size: 0.72rem; }
.row-tags { display: flex; gap: 6px; }

/* DM log */
.log-link { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.log-link .icon { width: 26px; height: 26px; color: var(--accent); }
.log-filters { margin-bottom: 10px; }
.log-filters select { flex: 1; }
.log-list { display: flex; flex-direction: column; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.log-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-bottom: 1px solid rgba(35, 68, 101, 0.6); }
.log-icon .icon { width: 18px; height: 18px; color: var(--muted); margin-top: 2px; }
.k-item_add .log-icon .icon, .k-prof .log-icon .icon { color: var(--ok); }
.k-item_remove .log-icon .icon { color: var(--danger); }
.k-money .log-icon .icon, .k-ammo .log-icon .icon { color: var(--warn); }
.log-body strong { color: var(--cream); }
.log-msg { font-family: var(--mono); font-size: 0.82rem; margin-top: 2px; }
.log-time { white-space: nowrap; font-family: var(--mono); }
.modal-back { display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .modal-back { align-items: center; } }
.modal { min-width: 0; overflow: hidden; }
.modal .chips { margin: 0; padding: 2px 0 6px; }
.pick-row { min-width: 0; }
.pick-name { min-width: 0; overflow-wrap: anywhere; }
.skill-name { overflow-wrap: normal; word-break: normal; hyphens: auto; -webkit-hyphens: auto; font-size: 0.8rem; }
.skill-grid { column-gap: 10px; }
.entry.counter.no-qty .entry-type { grid-column: auto; }
@media (max-width: 420px) { .entry.counter.no-qty { grid-template-columns: 1fr auto; } }
.attack-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.attack-stats strong { font-size: 0.82rem; line-height: 1.35; overflow-wrap: break-word; }