/* Campaign HQ — dark fantasy theme (ported from validated mockup) */
:root {
  --bg: #14100e;
  --panel: #1f1813;
  --panel-2: #262019;
  --border: #3a2f24;
  --gold: #c9a227;
  --gold-dim: #8a6d1f;
  --gold-fill: #7a5f16;      /* button/badge fills: cream text on this is >= 5:1 */
  --gold-text: #e0bb4a;      /* gold used as text on dark panels: >= 8:1 */
  --font-display: 'Palatino Linotype', Palatino, 'Book Antiqua', 'URW Palladio L', Georgia, serif;
  --text: #e8ddc7;
  --muted: #ad9e82;
  --danger: #c0533f;
  --ok: #6fa05a;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, 'Times New Roman', serif;
  min-height: 100vh;
}
h1, h2, h3 { font-weight: normal; letter-spacing: 0.5px; }
h1, h2 { font-family: var(--font-display); }
h1 { font-size: 1.8rem; margin: 0 0 .5rem; color: var(--gold-text); }
h2 { font-size: 1.25rem; margin: 0 0 .75rem; border-bottom: 1px solid var(--border); padding-bottom: .4rem; }
h3 { font-size: 1.02rem; margin: .9rem 0 .4rem; color: var(--gold-text); letter-spacing: .3px; }

/* --- layout --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; background: var(--panel); border-bottom: 2px solid var(--gold-dim);
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand { color: var(--gold); font-size: 1.15rem; }
.tabs-nav { display: flex; gap: .25rem; margin-left: 1.5rem; }
.navtab { background: none; border: none; border-radius: 0; border-bottom: 2px solid transparent; padding: .3rem .7rem; color: var(--muted); font-size: .95rem; text-transform: uppercase; letter-spacing: .5px; }
.navtab:hover { color: var(--text); border-color: var(--border); }
.navtab.active { color: var(--gold-text); border-bottom-color: var(--gold); }
.topbar .userbox { display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: var(--muted); margin-left: auto; }
main { max-width: 960px; margin: 0 auto; padding: 1rem; }

/* --- cards & panels --- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }

/* --- forms --- */
label { display: block; font-size: .85rem; color: var(--muted); margin: .6rem 0 .2rem; }
input, select, textarea {
  width: 100%; padding: .45rem .6rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: .95rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-dim); }
textarea { min-height: 80px; resize: vertical; }

/* --- buttons --- */
button, .btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  padding: .5rem .9rem; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: .9rem;
}
button:hover, .btn:hover { border-color: var(--gold-dim); }
button.primary, .btn.primary { background: var(--gold-fill); color: #fff8e7; border-color: var(--gold-dim); }
button.primary:hover, .btn.primary:hover { background: #8f7019; border-color: var(--gold); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
button:disabled:hover { border-color: var(--border); }
button.danger { color: #e8826c; border-color: rgba(192, 83, 63, .55); background: rgba(192, 83, 63, .08); }
button.danger:hover { background: rgba(192, 83, 63, .2); border-color: var(--danger); }
button.small { padding: .25rem .5rem; font-size: .8rem; }

/* --- tables --- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: normal; text-transform: uppercase; font-size: .75rem; letter-spacing: .5px; }

/* --- lists & badges --- */
.badge { display: inline-block; padding: .1rem .45rem; border-radius: 3px; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; }
.badge.gold { background: var(--gold-fill); color: #fff8e7; }
.badge.muted { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.badge.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.saved-flash { display: inline-block; padding: .25rem .6rem; border-radius: 3px; font-size: .8rem; color: var(--ok); border: 1px solid var(--ok); background: rgba(111,160,90,.08); animation: saved-fade 2s ease forwards; }
@keyframes saved-fade { 0%,70% { opacity: 1; } 100% { opacity: .35; } }
.unsaved-bar { padding: .4rem .6rem; margin-bottom: .5rem; border-radius: 3px; font-size: .85rem; color: var(--gold-text); border: 1px solid var(--gold); background: rgba(201,162,39,.08); }
.list-item { padding: .6rem 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.list-item:last-child { border-bottom: none; }

/* --- auth screen --- */
.auth-wrap { max-width: 420px; margin: 3rem auto; padding: 0 1rem; }
.tabs { display: flex; gap: 0; margin-bottom: 1rem; }
.tabs button { flex: 1; border-radius: 4px 4px 0 0; }
.tabs button.active { background: var(--gold-fill); color: #fff8e7; }

/* --- misc --- */
.muted { color: var(--muted); font-size: .875rem; }
.error-box { background: rgba(192, 83, 63, .12); border: 1px solid var(--danger); color: #e0a497; padding: .6rem .8rem; border-radius: 4px; margin-bottom: .75rem; font-size: .9rem; }
.ok-box { background: rgba(111, 160, 90, .12); border: 1px solid var(--ok); color: #b8d8a8; padding: .6rem .8rem; border-radius: 4px; margin-bottom: .75rem; font-size: .9rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: .5rem; margin: .5rem 0; }
.stat-box { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: .3rem; text-align: center; font-size: .8rem; color: var(--muted); }
.stat-box b { display: block; font-size: 1.2rem; color: var(--text); }

/* --- character sheet (Phase 2) --- */
.sheet-sec { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: .75rem 1rem; margin-bottom: .9rem; }
.sheet-sec h3 { margin-top: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem .75rem; }
@media (max-width: 700px) { .grid3 { grid-template-columns: repeat(2, 1fr); } }
/* Stat grids (Saving Throws / Skills): every unit gets an equal-width cell in a shared
   column grid, so name/value columns line up vertically across rows regardless of how
   long each label is. auto-fill keeps as many 130px+ columns as fit the width — one row
   on wide screens, more (narrower) rows on phones. */
.stat-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .4rem 1rem; align-items: start; }
.stat-wrap > .fld { margin-bottom: 0; }
.stat-wrap .save-row, .stat-wrap .skill-row { display: flex; justify-content: space-between; border-bottom: none; padding: 0; gap: .5rem; }
.stat-wrap .save-row > span.lbl, .stat-wrap .skill-row > span.lbl { display: inline; margin-bottom: 0; text-align: left; }
.fld { margin-bottom: .4rem; }
.fld > span.lbl, .fld > .lbl { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: .1rem; }
.req { color: var(--danger); font-weight: 700; margin-left: .2rem; }
.form-legend { margin: -.3rem 0 .6rem; font-size: .78rem; text-transform: none; letter-spacing: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: start; }
@media (max-width: 700px) { .row2 { grid-template-columns: 1fr; } }
.val { font-size: .95rem; color: var(--text); padding: .3rem 0; display: inline-block; }
.calcbox { background: rgba(201, 162, 39, .1); border: 1px solid var(--gold-dim); border-radius: 3px; padding: .15rem .45rem; color: var(--gold); font-size: .85rem; white-space: nowrap; }
.chk { display: inline-flex; align-items: center; gap: .4rem; text-transform: none; letter-spacing: 0; cursor: pointer; }
.chk input { width: auto; }
.skill-row, .save-row, .slot-row, .atk-row, .cf-row, .money-row { display: flex; gap: .5rem; align-items: center; justify-content: space-between; padding: .25rem 0; border-bottom: 1px dashed var(--border); font-size: .9rem; }
.skill-row input[type="number"], .save-row input[type="checkbox"] { width: auto; }
.slot-row b, .atk-row b { color: var(--gold-text); min-width: 2.5em; }
.pre { white-space: pre-wrap; font-size: .85rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: .5rem; max-height: 200px; overflow-y: auto; }
.flash { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--ok); color: #fff; padding: .5rem 1rem; border-radius: 4px; z-index: 100; font-size: .9rem; }
.combatant.current-turn { background: rgba(201, 162, 39, .12); border-left: 3px solid var(--gold); padding-left: .5rem; margin: .25rem 0; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- character portraits (Phase 3) --- */
.char-top { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 700px) { .char-top { grid-template-columns: 1fr; } }
.portrait-current img { max-width: 180px; width: 100%; border-radius: 4px; border: 1px solid var(--border); background: #fff; display: block; margin-bottom: .5rem; }
.portrait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .5rem; margin: .5rem 0; }
.portrait-thumb { padding: 0; border: 1px solid var(--border); border-radius: 4px; background: #fff; cursor: pointer; overflow: hidden; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.portrait-thumb:hover { border-color: var(--gold-dim); box-shadow: 0 0 0 2px rgba(201,162,39,.25); }
.portrait-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.btn-upload { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: .9rem; background: var(--panel-2); color: var(--text); }
.btn-upload:hover { border-color: var(--gold-dim); }

/* --- search pickers (spells / cantrips / equipment) --- */
.picker { margin: .5rem 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sec-head h3 { margin-bottom: 0; }
.sec-edit-actions { display: inline-flex; gap: .35rem; }
.picker input[data-picker] { width: 100%; box-sizing: border-box; padding: .4rem .6rem; font-size: .9rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
.picker-results { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; margin-top: .35rem; background: var(--bg); }
.picker-hit { padding: .3rem .6rem; font-size: .85rem; cursor: pointer; border-bottom: 1px solid var(--border); }
.picker-hit:hover { background: rgba(201, 162, 39, .15); }
.picker-empty { padding: .4rem .6rem; font-size: .85rem; }

/* --- toasts & modals (Phase 5) --- */
.toast-stack { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: .5rem; width: min(92vw, 420px); pointer-events: none; }
.toast { pointer-events: auto; cursor: pointer; padding: .6rem .9rem; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.5); font-size: .9rem; transition: opacity .25s; }
.toast-error { border-color: var(--danger); color: #f0b4a8; }
.toast-ok { border-color: var(--ok); color: #c4e0b8; }
.toast-out { opacity: 0; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal { background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 6px; padding: 1.25rem; width: min(100%, 420px); box-shadow: 0 8px 32px rgba(0,0,0,.6); }
.modal p { margin: 0 0 1rem; line-height: 1.4; }
.modal h3 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
button.danger-fill, button.primary.danger-fill { background: #a8402d; border-color: var(--danger); color: #fff; }
button.danger-fill:hover, button.primary.danger-fill:hover { background: #bd4b37; }

/* --- campaign sub-tabs (Phase 5) --- */
.subtabs { display: flex; gap: .25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.subtab { padding: .5rem .9rem; color: var(--muted); text-decoration: none; text-transform: uppercase; letter-spacing: .5px; font-size: .85rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.subtab:hover { color: var(--text); }
.subtab.active { color: var(--gold); border-bottom-color: var(--gold); }

/* --- Phase 6: focus, empty states, mobile / table use --- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
summary { cursor: pointer; }
.empty { padding: .5rem 0 .25rem; }
.empty p { margin: 0 0 .5rem; }
.btn { display: inline-block; text-decoration: none; }
.btn:hover { text-decoration: none; }
.bottom-nav { display: none; }
.combatant { gap: .5rem; flex-wrap: wrap; }

@media (max-width: 700px) {
  /* nav: tabs move to a fixed bottom bar; topbar keeps brand + sign out */
  .tabs-nav { display: none; }
  .topbar { padding: .5rem .75rem; }
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--panel); border-top: 2px solid var(--gold-dim); padding-bottom: env(safe-area-inset-bottom); }
  .bnav { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; min-height: 56px; padding: .4rem 0; background: none; border: none; border-radius: 0; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; }
  .bnav .bnav-ico { font-size: 1.25rem; line-height: 1; }
  .bnav.active { color: var(--gold); background: rgba(201, 162, 39, .08); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  main { padding: .75rem; }
  .card { padding: .8rem; }
  .toast-stack { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .subtab { padding: .65rem .8rem; }
  .list-item { flex-wrap: wrap; }
  .tbl-wrap, table { font-size: .85rem; }
}

/* touch devices and phones: 44px targets, 16px inputs (iOS won't zoom on focus) */
@media (pointer: coarse), (max-width: 700px) {
  button, .btn { min-height: 44px; padding: .55rem 1rem; }
  button.small { min-height: 40px; padding: .4rem .8rem; font-size: .85rem; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: 1.3rem; height: 1.3rem; }
  .chk { min-height: 44px; }
  /* combat rows: name/HP on top, controls on their own full-width row */
  .combatant > .row { width: 100%; justify-content: flex-start; gap: .4rem; }
  .combatant input[type="number"] { width: 5rem !important; }
  .row2 { grid-template-columns: 1fr; }
}

.subtabs { scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }

/* --- Phase 7: live combat --- */
.live-pill { font-size: .7rem; letter-spacing: .5px; text-transform: uppercase; padding: .1rem .5rem; border-radius: 10px; vertical-align: middle; margin-left: .4rem; border: 1px solid var(--border); }
.live-pill.on { color: var(--ok); border-color: var(--ok); }
.live-pill.off { color: var(--muted); }
.conds { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; align-items: center; }
.cond-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .5rem; min-height: 0; border-radius: 10px; font-size: .75rem; background: rgba(192, 83, 63, .15); border: 1px solid var(--danger); color: #f0b4a8; font-family: inherit; }
button.cond-chip { cursor: pointer; }
.cond-add { width: auto; min-height: 0; padding: .1rem .4rem; font-size: .75rem; }
.hp-status { font-weight: bold; }
.hp-healthy { color: var(--ok); }
.hp-bloodied { color: #d9a441; }
.hp-down { color: var(--danger); }
@media (pointer: coarse), (max-width: 700px) {
  .cond-chip { min-height: 32px; padding: .2rem .7rem; font-size: .85rem; }
  .cond-add { min-height: 36px; font-size: 16px; }
}

/* --- Phase 8: sessions, RSVP, pinned updates --- */
.stack { display: flex; flex-direction: column; gap: .15rem; margin-top: .4rem; }
.small-link { cursor: pointer; font-size: .8rem; color: var(--gold); padding: .3rem .1rem; }
.next-session .when { font-size: 1.05rem; }
.rsvp-row { margin: .5rem 0 .25rem; }
.rsvp-btn.on { color: #fff8e7; }
.rsvp-btn.on.rsvp-yes { background: #4f7a3f; border-color: var(--ok); }
.rsvp-btn.on.rsvp-maybe { background: var(--gold-fill); border-color: var(--gold-dim); }
.rsvp-btn.on.rsvp-no { background: #8a3a2c; border-color: var(--danger); }
.rsvp-summary { font-size: .8rem; margin-top: .25rem; }
.list-item.pinned { border-left: 3px solid var(--gold); padding-left: .6rem; background: rgba(201, 162, 39, .05); }
.session-card { margin-bottom: .75rem; }

/* --- Phase 9: dice, handouts, party, lightbox --- */
.roll { border-left: 3px solid transparent; padding-left: .6rem; }
.roll-crit { border-left-color: var(--gold); background: rgba(201, 162, 39, .08); }
.roll-fumble { border-left-color: var(--danger); background: rgba(192, 83, 63, .08); }
.roll-total { font-size: 1.4rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.roll-fumble .roll-total { color: var(--danger); }
.roll-detail { font-size: .8rem; }
.roll code { background: var(--bg); padding: .05rem .35rem; border-radius: 3px; border: 1px solid var(--border); }
.roll-detail s { opacity: .55; }
.handout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.handout-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.handout-thumb { display: block; aspect-ratio: 4 / 3; background: #000; }
.handout-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.handout-pdf { display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.1rem; text-decoration: none; background: var(--bg); }
.handout-meta { padding: .5rem .6rem .6rem; }
.party-table td, .party-table th { white-space: nowrap; }
.party-table .hp-low { color: var(--danger); font-weight: bold; }
.party-table .hp-mid { color: #d9a441; }
.modal.lightbox { width: min(96vw, 1100px); max-height: 94vh; padding: .6rem; display: flex; flex-direction: column; gap: .5rem; }
.modal.lightbox img { max-width: 100%; max-height: calc(94vh - 4rem); object-fit: contain; cursor: zoom-out; margin: 0 auto; }
.lightbox-bar { justify-content: space-between; }
.rest-row { margin: .25rem 0 .6rem; }

/* --- Phase 10: design pass (hierarchy, account menu, dashboard, campaign header) --- */
.topbar .brand { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .6px; background: none; border: 0; padding: 0; min-height: 0; color: var(--gold-text); cursor: pointer; }
.topbar .brand:hover { border: 0; color: var(--gold); }
.page-head { margin: .25rem 0 1rem; }
.page-head h1 { margin-bottom: .15rem; }
.page-head .muted { margin: 0; }
.page-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.page-actions h2 { margin: 0; border: 0; padding: 0; }

.usermenu { position: relative; }
.usermenu-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .6rem .25rem .3rem; border-radius: 999px; background: var(--panel-2); }
.avatar { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--gold-fill); color: #fff8e7; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: .95rem; text-transform: uppercase; }
.usermenu-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: .9rem; }
.usermenu-pop { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 12rem; background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 6px; box-shadow: 0 8px 28px rgba(0,0,0,.6); padding: .35rem; z-index: 50; display: none; }
.usermenu.open .usermenu-pop { display: block; }
.usermenu-pop .who-line { padding: .4rem .6rem .5rem; border-bottom: 1px solid var(--border); margin-bottom: .25rem; }
.usermenu-pop button { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 4px; }
.usermenu-pop button:hover { background: var(--panel-2); }
.about-list { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: .5rem 0 1rem; }
.about-list dt { color: var(--muted); }
.about-list dd { margin: 0; overflow-wrap: anywhere; }

.dash-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 700px) { .dash-hero { grid-template-columns: 1fr; } }
.dash-hero .card { margin-bottom: 0; }
.hero-session { border-color: var(--gold-dim); background: linear-gradient(160deg, rgba(201,162,39,.10), var(--panel) 60%); }
.hero-session .when { font-size: 1.1rem; margin: .2rem 0; }
.hero-session .countdown { color: var(--gold-text); font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; }
.attn-list { margin: 0; padding: 0; list-style: none; }
.attn-list li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.attn-list li:last-child { border-bottom: 0; }
.attn-count { min-width: 1.6rem; text-align: center; }

.char-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.char-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.char-card:hover { border-color: var(--gold-dim); text-decoration: none; }
.char-card-img { aspect-ratio: 1 / 1; background: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.4rem; color: var(--gold-dim); }
.char-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.char-card-body { padding: .5rem .65rem .65rem; }
.char-card-body b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-card-add { border-style: dashed; align-items: center; justify-content: center; text-align: center; min-height: 150px; color: var(--gold-text); cursor: pointer; background: none; font-family: inherit; }

.camp-head { padding-bottom: .75rem; }
.camp-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.camp-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .5rem; }
.subtab-group { display: flex; align-items: center; gap: .1rem; }
.subtab-group + .subtab-group { margin-left: .6rem; padding-left: .6rem; border-left: 1px solid var(--border); }
.subtab-glabel { font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); opacity: .75; margin-right: .3rem; white-space: nowrap; }
.subtab.active { color: var(--gold-text); }
.subtab .badge.live { animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,39,.55); } 50% { box-shadow: 0 0 0 5px rgba(201,162,39,0); } }
@media (prefers-reduced-motion: reduce) { .subtab .badge.live { animation: none; } }
@media (max-width: 700px) { .subtab-glabel { display: none; } .usermenu-name { display: none; } .usermenu-btn { padding: .2rem; } }
body { font-variant-numeric: lining-nums; }  /* Georgia's default old-style numerals make "0" look like "o" */
.subtab { padding: .5rem .7rem; }
@media (max-width: 900px) { .subtab-glabel { display: none; } }

/* --- Admin panel: scrolling tables and phone "cards" (2026-10-22, plan admin-mobile-nav) --- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.card { min-width: 0; }
.admin-summary { color: var(--muted); font-size: .85rem; margin: -.25rem 0 .75rem; }
@media (max-width: 700px) {
  /* record lists become one card per row; wide editors (spells, equipment, portraits) keep a scrolling table */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr:first-child { display: none; }                     /* header row; each cell carries its own label */
  table.stack tr { border: 1px solid var(--border); border-radius: 6px; padding: .5rem .65rem; margin-bottom: .6rem; background: rgba(255, 255, 255, .02); }
  table.stack td { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: none; padding: .3rem 0; }
  table.stack td::before { content: attr(data-label); flex: 0 0 5.5rem; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; }
  table.stack td[colspan] { display: block; }
  table.stack td[colspan]::before { content: none; }
  table.stack td select, table.stack td input:not([type="checkbox"]):not([type="file"]) { flex: 1 1 auto; min-width: 0 !important; }
  /* wide editors (spells, equipment, portrait files): give columns room and let the wrapper scroll */
  .tbl-wrap table:not(.stack) { min-width: 640px; }
  .tbl-wrap table:not(.stack) td:nth-child(2) input { min-width: 11rem; }          /* name column (column 1 is the select checkbox) */
  .tbl-wrap table:not(.stack) td:first-child input[type="checkbox"] { min-width: 0; }
  .tbl-wrap table:not(.stack) td select { min-width: 5.5rem; }
  table.stack td > b, table.stack td { overflow-wrap: anywhere; min-width: 0; }
  table.stack td > b { text-align: right; }
  table.stack td.actions { flex-wrap: wrap; justify-content: flex-start; padding-top: .55rem; }
  table.stack td.actions::before { display: none; }
  table.stack td.actions button, table.stack td.actions a { flex: 1 1 auto; text-align: center; }
}

/* --- Admin panel: search/filter bar, count line, bulk-action bar (2026-10-22, plan admin-followups) --- */
.admin-filters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .6rem; }
.admin-filters input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.admin-filters select { flex: 0 1 auto; }
.admin-count { font-size: .85rem; margin: .25rem 0 .5rem; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; margin: 0 0 .6rem; background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 6px; position: sticky; top: .5rem; z-index: 5; }
.tbl-wrap th:first-child, .tbl-wrap td:first-child > input[type="checkbox"] { vertical-align: middle; }
@media (max-width: 700px) {
  .admin-filters select { flex: 1 1 40%; min-width: 0; }
  /* on a phone the bar floats above the bottom nav so Show / Hide stay under the thumb */
  .bulk-bar { top: auto; bottom: calc(64px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(0, 0, 0, .45); }
}

/* --- Admin Rules library: type switcher, compact rows, groups, chips, edit panel (2026-10-22, plan rules-data-v2 Phase A) --- */
.rl-types { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .75rem; }
.rl-type { padding: .35rem .95rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); }
.rl-type[aria-pressed="true"] { background: var(--gold-fill); color: #fff8e7; border-color: var(--gold-dim); }
.rl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .5rem; }
.rl-chips:empty { display: none; }
.chip, .rl-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); font-size: .82rem; min-height: 0; }
.rl-chip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.rl-n { color: var(--muted); font-size: .75rem; }
.rl-ghead { display: flex; align-items: baseline; gap: .5rem; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: .5rem .25rem; margin-top: .6rem; color: var(--text); }
.rl-ghead::before { content: '▾'; color: var(--muted); width: 1rem; flex: 0 0 1rem; }
.rl-ghead[aria-expanded="false"]::before { content: '▸'; }
.rl-gbody[hidden] { display: none; }
.rl-selall { margin: .25rem 0; font-size: .85rem; color: var(--muted); }
.rl-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .4rem; border-bottom: 1px solid var(--border); cursor: pointer; min-height: 44px; }
.rl-row:hover, .rl-row:focus-visible { background: rgba(201, 162, 39, .07); }
.rl-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.rl-name { overflow-wrap: anywhere; }
.rl-meta { font-size: .82rem; }
.rl-hidden { opacity: .72; }
.rl-hidden .rl-name { color: var(--muted); }
.badge-hidden { color: var(--danger); border: 1px solid var(--danger); }
.badge-btn { cursor: pointer; background: none; border: 1px solid var(--danger); color: var(--danger); border-radius: 10px; padding: .05rem .5rem; font-size: .75rem; min-height: 0; }
.rl-toggle { flex: 0 0 auto; }
.rl-toggle input[type="checkbox"], .rl-row > .rl-sel { width: 1.3rem; height: 1.3rem; }
.rl-panel[hidden] { display: none; }
.rl-panel { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.rl-panel-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
.rl-panel-head h3 { margin: 0; overflow-wrap: anywhere; }
.rl-close { background: none; border: none; font-size: 1.5rem; line-height: 1; padding: .1rem .5rem; min-height: 0; }
.rl-panel-body { padding: .8rem; overflow: auto; display: flex; flex-direction: column; gap: .7rem; }
.rl-panel-foot { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .6rem .8rem; border-top: 1px solid var(--border); }
.rl-panel-foot .muted { margin-right: auto; font-size: .82rem; }
.rl-fld .lbl { display: block; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .2rem; }
.rl-fld input:not([type="checkbox"]), .rl-fld select { width: 100%; }
.rl-help { display: block; font-size: .78rem; margin-top: .2rem; }
.toast-action { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
@media (min-width: 1000px) {
  .rl-layout.has-panel { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: 1rem; align-items: start; }
  .rl-layout.has-panel .rl-panel { position: sticky; top: .5rem; max-height: calc(100vh - 1rem); }
}
@media (max-width: 999.98px) {
  /* phones/tablets: the panel is a full-screen sheet above the bottom nav */
  .rl-panel:not([hidden]) { position: fixed; inset: 0; z-index: 60; border-radius: 0; border: none; }
  .rl-panel-body { flex: 1; }
  .rl-panel-foot { padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
  body.rl-sheet-open { overflow: hidden; }
}
.admin-filters select { width: auto; max-width: 100%; }          /* the global select{width:100%} made every filter its own row */
.admin-filters > input[type="search"] { width: auto; }

/* Rules library toolbar: on desktop the filter dropdowns are always visible; on phones they sit behind a Filters button */
.rl-filters { display: contents; }
.rl-filters-btn { display: none; }
@media (max-width: 999.98px) {
  .rl-filters-btn { display: inline-flex; }
  .rl-filters { display: none; flex: 1 1 100%; flex-wrap: wrap; gap: .4rem; }
  .rl-filters.open { display: flex; }
}

/* --- Rules library v2: sectioned edit panel, Sources tab (2026-10-22, plan rules-data-v2 Phase C + S1) --- */
.rl-sec { border: 1px solid var(--border); border-radius: 6px; padding: .5rem .7rem .8rem; margin: 0; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.rl-sec > legend { padding: 0 .4rem; color: var(--gold); text-transform: uppercase; letter-spacing: .5px; font-size: .75rem; }
.rl-inline { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.rl-fld textarea { width: 100%; min-height: 5rem; resize: vertical; }
.src-edition { margin: 1.1rem 0 .4rem; }
.badge { white-space: nowrap; }
table.stack td .badge { flex: 0 0 auto; margin-left: .4rem; }

/* S2: rulesets */
.warn-box { background: color-mix(in srgb, var(--gold, #c9a227) 14%, transparent); border: 1px solid var(--gold, #c9a227); border-radius: 6px; padding: .5rem .75rem; margin: .5rem 0; }
.warn-text { color: var(--gold-text); font-size: .9em; }
.checks-list { display: flex; flex-direction: column; gap: .35rem; margin: .25rem 0 .5rem; max-height: 14rem; overflow-y: auto; }
.check-row { display: flex; align-items: center; gap: .5rem; font-weight: normal; }
.check-row input { width: auto; margin: 0; }
.rules-pick { margin-top: .5rem; }
.rules-line { margin: .25rem 0 0; }

/* Phase E: cards and chips */
.chip-s { display: inline-block; font-size: .72rem; padding: 0 .4rem; margin-left: .25rem; border: 1px solid var(--gold-dim); border-radius: 999px; color: var(--muted); white-space: nowrap; }
.card-info { margin-left: .4rem; padding: 0 .45rem; }
.card-link { color: var(--text); text-decoration: underline dotted; }
.rule-card h3 { margin: 0 0 .15rem; }
.rule-card .card-row { display: flex; gap: .6rem; padding: .15rem 0; }
.rule-card .card-row .lbl { min-width: 7.5rem; color: var(--muted); }
.rule-card .card-text { margin: .6rem 0 0; }
.carried { margin: .35rem 0 0; }
#rules-lookup .row { align-items: center; gap: .4rem; flex-wrap: wrap; }
#rules-lookup input[type=search] { flex: 1 1 10rem; }
#rules-lookup button[aria-pressed=true] { background: var(--gold-fill); }

.monster-card .abil-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem; margin: .5rem 0; text-align: center; }
.monster-card .abil { font-size: .85rem; }
.monster-card h4 { margin: .6rem 0 .1rem; }

/* Phase B */
.rl-chipset { display: flex; flex-wrap: wrap; gap: .25rem; margin: .15rem 0 .35rem; }
.rl-chip { padding: .05rem .55rem; font-size: .8rem; border-radius: 999px; border: 1px solid var(--gold-dim); background: transparent; color: var(--muted); cursor: pointer; }
.rl-chip[aria-pressed=true] { background: var(--gold-fill); color: var(--text); border-color: var(--gold); }

.modal p { white-space: pre-line; }

.spell-over { color: var(--danger); }
.limit-line { margin: .1rem 0 .35rem; }