/* ================================================================
   Apostle — Global Design System  (teal + orange)
   Fonts: Cinzel (display), Inter (UI) via Google Fonts
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --orange:      #E2693C;
  --orange-dim:  rgba(226, 105, 60, 0.55);
  --orange-glow: rgba(226, 105, 60, 0.15);

  /* Kept aliases so old code still compiles */
  --gold:        #E2693C;
  --gold-dim:    rgba(226, 105, 60, 0.55);
  --gold-glow:   rgba(226, 105, 60, 0.15);

  --cream:       #F2EBDC;
  --cream-muted: rgba(242, 235, 220, 0.62);
  --cream-dim:   rgba(242, 235, 220, 0.32);

  /* Teal surface stack (darkest page → lighter cards) */
  --bg:          #0F3D3A;   /* page bg */
  --surface:     #16524D;   /* card bg */
  --surface-2:   #1C615B;   /* nested card / input bg */
  --surface-3:   #0C3330;   /* deep nested */

  --panel-bg:    #0C3330;   /* footer bar backing */
  --border:      rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.07);

  --success:     #5cbe6c;
  --success-bg:  rgba(92, 190, 108, 0.12);
  --error:       #cf4545;
  --error-bg:    rgba(207, 69, 69, 0.12);
  --warn:        #d4881a;
  --warn-bg:     rgba(212, 136, 26, 0.12);

  /* Layout */
  --footer-h:    86px;
  --panel-w:     98px;      /* main section icon width */
  --max-w:       720px;     /* max content / nav width    */
  --radius:      6px;
  --radius-lg:   10px;
  --transition:  180ms ease;

  --font-display: 'Cinzel', Georgia, serif;
  --font-ui:      'Inter', system-ui, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family:      var(--font-ui);
  font-size:        15px;
  line-height:      1.55;
  color:            var(--cream);
  background-color: var(--bg);
  min-height:    100dvh;
  overflow-x:    hidden;
  /* Pad bottom so footer + section panel never hide content */
  padding-bottom: calc(var(--footer-h) + 16px);
}

img, svg { display: block; }
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: var(--font-ui); }

/* ── Typography ─────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family:    var(--font-display);
  font-weight:    600;
  line-height:    1.2;
  color:          var(--cream);
  letter-spacing: 0.03em;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

.page-title {
  font-family:    var(--font-display);
  font-size:      1.5rem;
  font-weight:    700;
  color:          var(--orange);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom:  20px;
}

.page-head {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   14px;
}
.section-title {
  font-family:    var(--font-display);
  font-size:      0.8rem;
  font-weight:    600;
  color:          var(--orange);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom:  12px;
}

/* ── Layout ─────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   24px 16px calc(var(--footer-h) + 100px);
}

/* ── Footer bar ─────────────────────────────────────────────────────
   Icon-only square buttons on a light bar (matches the light-theme
   rebuild). Three states, all driven by the bare cream/orange SVGs in
   /images/ (nav_*.svg / _null / _ovr) sitting on a CSS-drawn square:
     - default (unlocked, not current page): neutral square, cream icon
     - active (current page):                white square + shadow, orange icon
     - locked:                                same neutral square, very faint icon
   ------------------------------------------------------------------ */
.footer-nav {
  position:        fixed;
  bottom:          0; left: 0; right: 0;
  height:          var(--footer-h);
  background:      #fff;
  box-shadow:      0 -1px 0 rgba(0,0,0,.08);
  z-index:         400;
  display:         flex;
  justify-content: center;
  align-items:     center;
  padding-bottom:  env(safe-area-inset-bottom, 0px);
}
.footer-nav-inner {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       100%;
  max-width:   var(--max-w);
  gap:         10px;
  padding:     8px 14px;
}

/* ── Button base ─────────────────────────────────────────────────── */
.footer-btn {
  display:                     flex;
  align-items:                 center;
  justify-content:             center;
  flex:                        1 1 0;
  max-width:                   64px;
  aspect-ratio:                1;
  background:                  #A9A79E;
  border-radius:               14px;
  border:                      none;
  cursor:                      pointer;
  text-decoration:             none;
  -webkit-tap-highlight-color: transparent;
  transition:                  background 150ms ease, box-shadow 150ms ease;
  position:                    relative;
}
.footer-btn.is-active,
.footer-btn:not(.is-locked):hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }

/* Chosen/Tied Calling vote pending for a linked player — solid red square,
   overrides is-active/hover, matches the Figma exactly. */
.footer-btn.is-alert,
.footer-btn.is-alert.is-active,
.footer-btn.is-alert:hover { background: #FF0000; box-shadow: none; }
/* Force the icon glyph to pure white regardless of the source asset's own
   color (it's an <img>, not inline SVG, so recolor via filter). */
.footer-btn.is-alert img { filter: brightness(0) invert(1); }
.footer-btn.is-alert .footer-badge { background: #000; box-shadow: 0 0 0 2px #FF0000; }

/* Apostle icon, game selected but no Apostle linked to it yet — same red
   square treatment as is-alert, but clickable straight through to
   create-apostle.html instead of carrying a count badge. */
.footer-btn.is-needs-link,
.footer-btn.is-needs-link.is-active,
.footer-btn.is-needs-link:hover { background: #FF0000; box-shadow: none; cursor: pointer; }
.footer-btn.is-needs-link img { filter: brightness(0) invert(1); }

/* Locked state — visible but not yet selectable (no Game/Apostle chosen,
   or — for Loop — the page doesn't exist yet). Same square, faint icon
   (baked into the _null asset itself via 25% fill-opacity), no hover. */
.footer-btn.is-locked { cursor: default; }

/* Icon images — SVGs scale cleanly, bare (transparent-bg) icons only.
   .icon-hover (the _ovr asset) sits on top, invisible until hovered, so
   every unlocked icon previews its active/orange look on mouse-over. */
.footer-btn img {
  width:          58%;
  height:         58%;
  display:        block;
  user-select:    none;
  pointer-events: none;
  object-fit:     contain;
}
.footer-btn .icon-hover {
  position:   absolute;
  top:        50%; left: 50%;
  transform:  translate(-50%, -50%);
  opacity:    0;
  transition: opacity 150ms ease;
}
.footer-btn:not(.is-locked):hover .icon-default { opacity: 0; }
.footer-btn:not(.is-locked):hover .icon-hover { opacity: 1; }

/* Outstanding-vote count badge — Loop icon only, mirrors the red alert
   banners shown on the Loop pages themselves. */
.footer-badge {
  position:      absolute;
  top:           -4px; right: -4px;
  min-width:     18px;
  height:        18px;
  border-radius: 999px;
  background:    #FB652A;
  color:         #fff;
  font-size:     11px;
  font-weight:   800;
  display:       flex;
  align-items:   center;
  justify-content: center;
  padding:       0 4px;
  box-shadow:    0 0 0 2px #fff;
  pointer-events: none;
}

/* ── Global Chosen/Tied Calling vote takeover (js/drawer.js) — a plain DOM
   overlay injected from a vanilla-JS script that runs on every page, so it
   can't rely on any page's own React tree. Same overlay/card shape as
   .ap-confirm-overlay/.ap-confirm-card below, kept separate since this one
   needs its own eyebrow/title/single-button layout. ── */
.ap-vote-takeover-overlay{position:fixed;inset:0;z-index:960;background:rgba(1,1,1,.33);display:flex;align-items:center;justify-content:center;padding:20px;}
.ap-vote-takeover-card{position:relative;width:min(92vw,356px);background:#fff;border:1px solid rgba(1,1,1,.15);border-radius:12px;box-shadow:0 0 8px rgba(0,0,0,.25);padding:32px 24px;box-sizing:border-box;text-align:center;font-family:var(--font-ui),Inter,Arial,sans-serif;}
.ap-vote-takeover-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:6px;background:#fff;border:1px solid rgba(1,1,1,.33);font-size:18px;line-height:1;cursor:pointer;color:#000;}
.ap-vote-takeover-eyebrow{margin:0;font-size:14px;color:rgba(12,43,42,.5);}
.ap-vote-takeover-title{margin:2px 0 20px;font-size:20px;font-weight:800;color:#000;}
.ap-vote-takeover-btn{width:100%;padding:14px 20px;border:0;border-radius:100px;background:#FB652A;color:#fff;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;}
.ap-vote-takeover-btn:hover{background:#e5551e;}

/* ── Site nav (hamburger menu: Account / Create / End game / Loop) ── */

/* ── Icon buttons — one shared component for every square icon button in the
   app (close, sign-out, manage/gear, lock, edit, add, roll, copy, unlink,
   link, delete, burger). Lives here rather than css/light-theme.css so it
   works on the handful of dark-theme pages that still use it without that
   stylesheet loaded (same reasoning as the Drawer block below). Spec pulled
   from Figma "Icons" frame (node 343:6937): 30x30, 6px radius, 3 states —
     default: white bg, border rgba(0,0,0,.33)
     active/hover: orange bg, border rgba(0,0,0,.2), icon inverted white
     disabled: #d9d9d9 bg, border rgba(0,0,0,.15), icon faded
   No per-state icon assets were exported, so hover/disabled recolor the
   existing single glyph via CSS filter instead of asset-swapping.
   Icons that already ship as self-contained multi-state art with their own
   baked-in box (Rules "?" pop-up_*.svg, Roll dice-std/null/ovr.svg) use the
   .icon-fill modifier instead — it drops the button's own border/background
   and lets the icon bleed to fill the full 30x30, since re-boxing an
   already-boxed asset would double the border. */
.icon-btn{width:30px;height:30px;border:1px solid rgba(0,0,0,.33);border-radius:6px;background:#fff;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;position:relative;color:#0d0d0d;transition:background .15s ease,border-color .15s ease,color .15s ease;}
.icon-btn img{max-width:18px;max-height:18px;display:block;transition:filter .15s ease;}
.icon-btn svg{width:18px;height:18px;display:block;}
.icon-btn:hover:not(:disabled):not(.icon-fill),.icon-btn.is-active:not(.icon-fill){background:#fb652a;border-color:rgba(0,0,0,.2);color:#FDFAE1;}
.icon-btn:hover:not(:disabled):not(.icon-fill) img,.icon-btn.is-active:not(.icon-fill) img{filter:brightness(0) invert(91%) sepia(27%) saturate(115%) hue-rotate(14deg) brightness(94%) contrast(122%);}
.icon-btn:disabled:not(.icon-fill),.icon-btn.is-disabled:not(.icon-fill){background:#d9d9d9;border-color:rgba(0,0,0,.15);color:#9a9a9a;cursor:default;}
.icon-btn:disabled:not(.icon-fill) img,.icon-btn.is-disabled:not(.icon-fill) img{filter:grayscale(1) opacity(.5);}
.icon-btn.icon-fill{border:0;background:transparent;}
.icon-btn.icon-fill img{max-width:none;max-height:none;width:100%;height:100%;}
.icon-btn.icon-fill .icon-hover{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .15s ease;width:100%;height:100%;}
.icon-btn.icon-fill .icon-default{transition:opacity .15s ease;}
.icon-btn.icon-fill:hover:not(:disabled) .icon-default{opacity:0;}
.icon-btn.icon-fill:hover:not(:disabled) .icon-hover{opacity:1;}
.icon-btn.icon-fill:disabled{cursor:not-allowed;opacity:.35;}
/* Lightly dimmed but still clickable — distinct from .is-disabled/:disabled
   (opacity .35 above), which also blocks the click. Used for a Roll button
   once a value is already set, signalling "secondary action now" without
   looking as inert as an actually-disabled/locked button. */
.icon-btn.is-null{opacity:.7;}

/* ── Drawer (hamburger panel) ───────────────────────────────────────
   Always renders in the light palette regardless of the underlying
   page's theme, same way .footer-nav always renders dark. Self-contained
   (doesn't rely on css/light-theme.css) so it works on dark-theme pages too. */
.ap-drawer-overlay{position:fixed;inset:0;z-index:900;background:#fff;overflow-y:auto;font-family:var(--font-ui),Inter,Arial,sans-serif;color:#0d0d0d;}
.ap-drawer-inner{max-width:520px;margin:0 auto;padding:24px 24px calc(var(--footer-h) + 40px);box-sizing:border-box;}
/* flex-start, not center — matches .lt-header's own alignment (see
   light-theme.css) so the close button lands at the same height as the
   hamburger button it replaces, instead of centering against the full
   height of the logo beside it and sitting noticeably lower. */
.ap-drawer-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;}
.ap-drawer-header-left{display:flex;flex-direction:column;gap:6px;}
.ap-drawer-logo{width:120px;height:auto;display:block;}
.ap-drawer-breadcrumb{display:flex;align-items:center;gap:6px;align-self:flex-start;font-size:15px;}
.ap-drawer-breadcrumb-home{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;text-decoration:underline;color:#fb652a;transition:color .15s ease;}
.ap-drawer-breadcrumb-home:hover{color:#e0551f;}
.ap-drawer-breadcrumb-sep{color:#8a8a8a;}
.ap-drawer-breadcrumb-current{color:#8a8a8a;}
.ap-drawer-close{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;font-size:15px;color:#0d0d0d;font-family:inherit;transition:color .15s ease;}
.ap-drawer-close:hover{color:#fb652a;}
/* Hovering anywhere on the button highlights the icon box too, not just when
   the cursor is literally over it. */
.ap-drawer-close:hover .icon-btn{background:#fb652a;border-color:rgba(0,0,0,.2);color:#fff;}

.ap-drawer-loading{color:#8a8a8a;font-size:14px;}

.ap-drawer-welcome{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:12px;}
.ap-drawer-welcome h2{font-family:var(--font-ui),Inter,Arial,sans-serif;font-size:20px;font-weight:800;margin:0;color:#0d0d0d;letter-spacing:normal;text-transform:none;}
.ap-drawer-welcome .name{color:#fb652a;}

.ap-drawer-section{margin-bottom:22px;}
.ap-drawer-section h3{font-family:var(--font-ui),Inter,Arial,sans-serif;font-size:17px;font-weight:800;margin:0 0 10px;color:#0d0d0d;letter-spacing:normal;text-transform:none;}

.ap-drawer-footer{margin-top:48px;text-align:center;color:#8a8a8a;font-size:13px;line-height:1.7;}
.ap-drawer-footer a{color:#8a8a8a;text-decoration:underline;transition:color .15s ease;}
.ap-drawer-footer a:hover{color:#fb652a;}

/* Settings sub-view */
.ap-drawer-field{margin-bottom:18px;}
.ap-drawer-field label{display:block;font-weight:700;font-size:15px;margin:0 0 8px;color:#0f3d3a;text-transform:none;letter-spacing:normal;}
.ap-drawer-input{width:100%;box-sizing:border-box;background:#e9e9e9;border:1px solid #cfcfcf;border-radius:4px;padding:13px 14px;font-size:16px;color:#0d0d0d;font-family:inherit;}
.ap-drawer-input[readonly]{color:#6f6f6f;}
.ap-drawer-btn{width:100%;box-sizing:border-box;border-radius:999px;padding:14px 20px;font-size:16px;font-weight:800;cursor:pointer;border:1.5px solid #fb652a;font-family:inherit;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.ap-drawer-btn:disabled{opacity:.4;cursor:default;}
.ap-drawer-btn-solid{background:#fb652a;color:#fff;}
.ap-drawer-btn-solid:hover:not(:disabled){background:#e0551f;border-color:#e0551f;}
.ap-drawer-btn-outline{background:#fff;color:#fb652a;margin-top:14px;}
.ap-drawer-btn-outline:hover:not(:disabled){background:#fb652a;color:#fff;}
.ap-drawer-inline-row{display:flex;gap:10px;align-items:stretch;}
.ap-drawer-inline-row .ap-drawer-input{flex:1 1 auto;min-width:0;}
.ap-drawer-btn-inline{width:auto;flex:0 0 auto;white-space:nowrap;margin-top:0;padding:14px 36px;}
.ap-drawer-label-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.ap-drawer-label-row label{margin-bottom:0;}
.ap-drawer-tooltip-btn{width:26px;height:26px;border:1px solid #0d0d0d;border-radius:4px;background:transparent;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;cursor:pointer;flex:none;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.ap-drawer-tooltip-btn:hover{background:#fb652a;border-color:#fb652a;color:#fff;}

/* ── Confirm takeover (AP.confirm(), see app.js) — a general-purpose
   yes/no takeover any page or script can call, styled to match the app's
   other full-screen modal takeovers. ─────────────────────────────────── */
.ap-confirm-overlay{position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px;}
.ap-confirm-card{width:min(92vw,356px);background:#fff;border:1px solid rgba(1,1,1,.15);border-radius:12px;box-shadow:0 0 8px rgba(0,0,0,.25);padding:32px 24px;box-sizing:border-box;text-align:center;font-family:var(--font-ui),Inter,Arial,sans-serif;}
.ap-confirm-title{font-size:20px;font-weight:800;color:#0d0d0d;margin:0 0 28px;line-height:1.3;}

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.card + .card { margin-top: 14px; }

.card-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 18px;
  border-bottom:   1px solid var(--border);
  gap:             10px;
}
.card-head h2 {
  font-family:    var(--font-display);
  font-size:      0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--cream);
}
.card-body { padding: 18px; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  padding:         10px 20px;
  border-radius:   var(--radius);
  font-family:     var(--font-display);
  font-size:       0.78rem;
  font-weight:     600;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  border:          none;
  cursor:          pointer;
  transition:      opacity var(--transition), background var(--transition), transform 80ms;
  white-space:     nowrap;
}
.btn:active   { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; pointer-events: none; }

.btn-primary { background: var(--orange); color: #002222; }
.btn-primary:hover { opacity: 0.88; }

.btn-ghost {
  background: transparent;
  color:      var(--cream-muted);
  border:     1px solid var(--border-soft);
}
.btn-ghost:hover { color: var(--cream); border-color: var(--orange-dim); }

.btn-danger {
  background: var(--error-bg);
  color:      var(--error);
  border:     1px solid rgba(207, 69, 69, 0.25);
}
.btn-danger:hover { background: rgba(207, 69, 69, 0.22); }

.btn-sm   { padding: 6px 12px; font-size: 0.7rem; }
.btn-full { width: 100%; }


/* ── Inputs ─────────────────────────────────────────────────────── */
.input {
  display:       block;
  width:         100%;
  padding:       10px 14px;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--cream);
  font-family:   var(--font-ui);
  font-size:     0.95rem;
  outline:       none;
  transition:    border-color var(--transition);
  appearance:    none;
}
.input::placeholder { color: var(--cream-dim); }
.input:focus         { border-color: var(--orange-dim); }
.input:disabled      { opacity: 0.5; }
select.input         { cursor: pointer; }

label {
  display:        block;
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  color:          var(--cream-muted);
  text-transform: uppercase;
  margin-bottom:  6px;
  margin-top:     18px;
}
label:first-child { margin-top: 0; }
.field            { margin-bottom: 16px; }
.field label      { margin-top: 0; margin-bottom: 6px; }

/* ── Notice / flash messages ────────────────────────────────────── */
.notice {
  display:       none;
  padding:       10px 14px;
  border-radius: var(--radius);
  font-size:     0.85rem;
  line-height:   1.4;
  border:        1px solid transparent;
  margin-bottom: 16px;
}
.notice.error   { display: block; background: var(--error-bg);   color: var(--error);   border-color: rgba(207,69,69,0.25); }
.notice.success { display: block; background: var(--success-bg); color: var(--success); border-color: rgba(92,190,108,0.25); }
.notice.info    { display: block; background: var(--orange-glow);color: var(--orange);  border-color: var(--border); }

/* ── Badges / status pills ──────────────────────────────────────── */
.badge {
  display:        inline-block;
  padding:        2px 9px;
  border-radius:  99px;
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-active   { background: var(--success-bg); color: var(--success); }
.badge-inactive { background: var(--surface-3);  color: var(--cream-dim); }
.badge-creator  { background: var(--orange-glow);color: var(--orange); }

/* ── Empty state ────────────────────────────────────────────────── */
.empty-state {
  text-align:  center;
  padding:     40px 20px;
  color:       var(--cream-dim);
  font-size:   0.9rem;
}
.empty-state p + p { margin-top: 6px; }


/* ── Character cards ────────────────────────────────────────────── */

.char-card-name {
  font-family:   var(--font-display);
  font-size:     1rem;
  font-weight:   600;
  color:         var(--cream);
  margin-bottom: 5px;
}
.char-card-meta    { font-size: 0.8rem; color: var(--cream-muted); margin-bottom: 12px; }
.char-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Invite cards ───────────────────────────────────────────────── */
.invite-card {
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       14px 16px;
}
.invite-card + .invite-card { margin-top: 10px; }
.invite-card-title { font-size: 0.9rem; font-weight: 500; color: var(--cream); margin-bottom: 4px; }
.invite-card-sub   { font-size: 0.78rem; color: var(--cream-muted); margin-bottom: 12px; }
.invite-actions    { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Player row ─────────────────────────────────────────────────── */
.player-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         10px 0;
  border-bottom:   1px solid var(--border-soft);
}
.player-row:last-child { border-bottom: none; }
.player-info { flex: 1; min-width: 0; }
.player-name { font-weight: 500; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-sub  { font-size: 0.75rem; color: var(--cream-muted); }

/* ── Inline form ────────────────────────────────────────────────── */
.inline-form {
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       16px 18px;
  margin-top:    14px;
}
.inline-form.hidden { display: none; }
.form-row           { display: flex; gap: 10px; align-items: flex-end; }
.form-row .input    { flex: 1; }

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.70);
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    16px;
  z-index:    500;
}
.modal-overlay.hidden { display: none; }

.modal {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  width:         100%;
  max-width:     420px;
  max-height:    90dvh;
  overflow-y:    auto;
}
.modal-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  border-bottom:   1px solid var(--border);
}
.modal-head h3 {
  font-family:    var(--font-display);
  font-size:      0.88rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--orange);
}
.modal-body    { padding: 20px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ── Close button ───────────────────────────────────────────────── */
.close-btn {
  background:    transparent;
  border:        none;
  color:         var(--cream-muted);
  font-size:     1.5rem;
  line-height:   1;
  padding:       4px 8px;
  border-radius: var(--radius);
  transition:    color var(--transition), background var(--transition);
}
.close-btn:hover { color: var(--cream); background: var(--orange-glow); }

/* ── Named-segment clocks ────────────────────────────────────────── */
.clock-tabs       { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.clock-tab-group  { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.clock-tab-label  {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cream-dim); min-width: 68px; flex-shrink: 0;
}
.clock-tab {
  padding: 5px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--cream-muted);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.clock-tab:hover   { background: var(--surface-3); color: var(--cream); }
.clock-tab.is-active { background: var(--orange-glow); border-color: var(--orange-dim); color: var(--orange); font-weight: 600; }

.clock-viewer     { display: flex; flex-direction: column; align-items: center; }
.clock-display-row { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 380px; }
.clock-nav-btn {
  flex-shrink: 0; width: 44px; min-height: 88px;
  background: var(--surface-3); border: none; border-radius: var(--radius);
  color: var(--cream); font-size: 2rem; font-weight: 300; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.clock-nav-btn:hover:not(:disabled) { background: var(--orange); color: var(--bg); }
.clock-nav-btn:disabled { opacity: 0.22; cursor: not-allowed; }
.clock-svg-wrap { flex: 1; display: flex; justify-content: center; align-items: center; }

.clock-legend { margin-top: 28px; width: 100%; max-width: 380px; }
.clock-legend-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 4px 14px;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft); align-items: baseline;
}
.clock-legend-row:last-child { border-bottom: none; }
.clock-legend-name { font-weight: 600; font-size: 0.9rem; color: var(--cream-muted); }
.clock-legend-row.is-active .clock-legend-name { color: var(--orange); }
.clock-legend-desc { font-size: 0.875rem; line-height: 1.45; color: var(--cream-dim); }
.clock-legend-row.is-active .clock-legend-desc { color: var(--orange-dim); }

/* Smaller clock grid widgets */
.clocks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.clock-widget {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.clock-face    { width: 90px; height: 90px; cursor: default; }
.clock-name    { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; color: var(--cream); text-align: center; }
.clock-controls { display: flex; align-items: center; gap: 10px; }
.clock-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--cream-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.clock-btn:hover { border-color: var(--orange-dim); color: var(--orange); background: var(--orange-glow); }
.clock-btn:disabled { opacity: 0.35; pointer-events: none; }
.clock-count { font-family: var(--font-display); font-size: 0.82rem; color: var(--cream-muted); min-width: 28px; text-align: center; }

#dice-canvas-container { position: absolute; inset: 0; }

/* ── Spinner ────────────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border); border-top-color: var(--orange);
  border-radius: 50%; animation: spin 700ms linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px; color: var(--cream-dim); font-size: 0.85rem; }

/* ── Utilities ──────────────────────────────────────────────────── */
.hidden         { display: none !important; }
.text-muted     { color: var(--cream-muted); }
.text-gold      { color: var(--orange); }
.text-sm        { font-size: 0.82rem; }
.text-xs        { font-size: 0.72rem; }
.flex           { display: flex; }
.items-center   { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm         { gap: 8px; }
.divider        { height: 1px; background: var(--border); margin: 20px 0; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .card-body  { padding: 14px; }
}



    .demo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px; }
    .demo h3 { font-family: var(--font-display); color: var(--orange); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
    .demo .row { margin: 10px 0; }
    .demo .cap { font-size: 0.78rem; color: var(--cream-muted); margin-bottom: 6px; }


    .field { margin-bottom: 14px; }
    .field label { display:block; font-size:0.78rem; color:var(--cream-muted); margin-bottom:5px; letter-spacing:0.04em; }
    .field .hint { font-size:0.74rem; color:var(--cream-dim); margin-top:4px; }
    .field-readonly { font-size:0.95rem; color:var(--cream); padding:10px 0; }
    .row2 { display:flex; gap:10px; }
    .row2 .field { flex:1; }

    .apostle-card-fields { font-size:0.82rem; color:var(--cream-muted); margin-bottom:12px; line-height:1.6; }
    .apostle-card-fields strong { color:var(--cream); font-weight:600; }