/* ════════════════════════════════════════════════════════════════
   Pixel Crawlers — "Stone & Ember" design system
   Dark theme = :root default. Light theme = additive html.light.
   Loaded only by base_dungeon.html (the migrated logged-out / auth
   / profile pages). The ExForce system + base.html are untouched.
   ════════════════════════════════════════════════════════════════ */

:root {
  --bg-0:#07080C; --bg-1:#0E1018; --bg-2:#161924; --bg-3:#1F2330; --bg-4:#2A2F40;
  --b-dark:#06070A; --b-mid:#2D3242; --b-light:#525972;
  --ink:#E8E2D0; --ink-dim:#A39A85; --ink-faint:#6A6452; --ink-mute:#4A4636;
  --gold:#E8B547; --gold-bright:#FFD56B; --gold-dark:#8E681F;
  --ember:#E85A1A; --crimson:#C73A45; --herbal:#7AAE5A; --mana:#5A87D8;
}
html.light {
  --bg-0:#E2D9C2; --bg-1:#EBE3CF; --bg-2:#F3ECDB; --bg-3:#FAF4E6; --bg-4:#FFFBF0;
  --b-dark:#BCAF8C; --b-mid:#D0C4A2; --b-light:#FFFDF4;
  --ink:#2A2418; --ink-dim:#595139; --ink-faint:#877C5C; --ink-mute:#A99E7E;
  --gold:#7A5A0E; --gold-bright:#9A6C12; --gold-dark:#5A420A;
  --ember:#BC4711; --crimson:#AE2F39; --herbal:#46702F; --mana:#3C62AE;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--bg-0); }
body {
  color:var(--ink);
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img { image-rendering:pixelated; }
a { color:var(--gold); text-decoration:none; }
a:hover { color:var(--gold-bright); }
strong { font-weight:700; }

/* ---- dungeon-wall backdrop ---- */
body {
  background-color:var(--bg-1);
  background-image:
    linear-gradient(to right, rgba(0,0,0,.55) 0 1px, transparent 1px 64px),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, transparent 0 16px, rgba(0,0,0,.35) 16px 48px, transparent 48px 128px);
  background-size:64px 64px, 64px 64px, 128px 128px;
}
html.light body {
  background-image:
    linear-gradient(to right, rgba(108,90,52,.16) 0 1px, transparent 1px 64px),
    linear-gradient(to bottom, rgba(108,90,52,.16) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, transparent 0 16px, rgba(108,90,52,.11) 16px 48px, transparent 48px 128px);
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 50% 30% at 12% 4%, rgba(232,90,26,.18), transparent 70%),
    radial-gradient(ellipse 50% 30% at 88% 4%, rgba(232,90,26,.18), transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,.25), transparent 28%, transparent 72%, rgba(0,0,0,.55));
}
html.light body::before {
  background:
    radial-gradient(ellipse 50% 30% at 12% 4%, rgba(232,90,26,.12), transparent 70%),
    radial-gradient(ellipse 50% 30% at 88% 4%, rgba(232,90,26,.12), transparent 70%),
    linear-gradient(to bottom, rgba(70,56,28,.05), transparent 28%, transparent 72%, rgba(70,56,28,.10));
}

/* ---- page shell ---- */
.shell { position:relative; z-index:1; display:flex; flex-direction:column; min-height:100vh; }
.main { flex:1; }
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
.page-wrap { max-width:660px; margin:0 auto; padding:40px 24px 64px; }
.auth-wrap { max-width:460px; margin:0 auto; padding:44px 24px 64px; }

/* ---- type ---- */
.t-display { font-family:"Press Start 2P", monospace; line-height:1.1; }
.t-head { font-family:"Jersey 25", sans-serif; line-height:1; }
.eyebrow {
  display:inline-block; font-family:"IBM Plex Mono", monospace; font-weight:600;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ember);
}
.lead { font-size:18px; color:var(--ink-dim); }
.section-title, .page-title, .auth-title {
  font-family:"Jersey 25", sans-serif; line-height:1; color:var(--gold);
  text-shadow:0 2px 0 #5A3A0A;
}
.section-title { font-size:clamp(34px, 5vw, 52px); }
.page-title, .auth-title { font-size:clamp(30px, 4vw, 40px); }
html.light .section-title, html.light .page-title, html.light .auth-title {
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.c-gold { color:var(--gold); }
.c-dim  { color:var(--ink-dim); }

/* ---- topbar (no menu bar beneath) ---- */
.topbar {
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(7,8,12,.95), rgba(7,8,12,.80));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--b-mid);
  box-shadow:0 1px 0 rgba(0,0,0,.6);
}
html.light .topbar {
  background:linear-gradient(180deg, rgba(239,232,214,.96), rgba(239,232,214,.82));
  box-shadow:0 1px 0 rgba(0,0,0,.10), inset 0 -1px 0 rgba(255,255,255,.55);
}
.topbar-inner {
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 24px;
}
.brand { display:flex; align-items:center; }
.brand-logo-frame {
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 10px;
  border-radius:8px;
  background:linear-gradient(180deg, #1F2330, #161924);
  border:1px solid #2D3242;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.04),
             inset -1px -1px 0 rgba(0,0,0,.5),
             0 1px 0 rgba(0,0,0,.4);
  transition:filter 120ms ease;
}
html.light .brand-logo-frame {
  background:linear-gradient(180deg, #2A2418, #1F1A12);
  border-color:#5A4A2E;
  box-shadow:inset 1px 1px 0 rgba(255,238,200,.06),
             inset -1px -1px 0 rgba(0,0,0,.5),
             0 1px 0 rgba(0,0,0,.2);
}
.brand-logo {
  display:block; height:32px; width:auto;
  image-rendering:auto;
}
.brand:hover .brand-logo-frame { filter:brightness(1.12); }
.spacer { flex:1; }
.topbar form { margin:0; }

/* ---- user-menu dropdown (Stone & Ember mirror of ef-user-menu) ---- */
.pc-user-menu { position:relative; }
.pc-user-trigger { display:inline-flex; align-items:center; }
.pc-user-trigger[aria-expanded="true"] svg { transform:rotate(180deg); }
.pc-user-trigger svg { transition:transform 150ms ease; }
.pc-user-menu-panel {
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:180px;
  background:var(--bg-2); border:1px solid var(--b-mid);
  box-shadow:inset 1px 1px 0 var(--b-light), inset -1px -1px 0 var(--b-dark),
             0 6px 18px rgba(0,0,0,.55);
  padding:4px; z-index:60;
  display:flex; flex-direction:column; gap:1px;
}
.pc-user-menu-panel[hidden] { display:none; }
html.light .pc-user-menu-panel {
  box-shadow:inset 1px 1px 0 var(--b-light), inset -1px -1px 0 var(--b-dark),
             0 6px 18px rgba(54,44,24,.18);
}
.pc-user-menu-item {
  display:flex; align-items:center; gap:6px;
  width:100%; box-sizing:border-box;
  padding:8px 12px;
  font-family:"IBM Plex Mono", monospace; font-size:13px;
  color:var(--ink); background:transparent; border:0;
  text-align:left; cursor:pointer; text-decoration:none;
}
.pc-user-menu-item:hover { background:var(--bg-3); color:var(--gold); }
.pc-user-menu-item .pc-user-menu-icon { color:var(--gold); flex:none; }
.pc-user-menu-signout { color:var(--crimson); }
.pc-user-menu-signout:hover { background:var(--bg-3); color:var(--crimson); }

/* ---- theme switch ---- */
.theme-switch {
  display:flex; padding:2px;
  background:var(--bg-1); border:1px solid var(--b-dark);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.35);
}
.theme-switch button {
  all:unset; cursor:pointer; width:30px; height:24px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint);
}
.theme-switch button.on {
  color:var(--gold); background:var(--bg-3);
  box-shadow:inset 1px 1px 0 var(--b-light), inset -1px -1px 0 var(--b-dark);
}

/* ---- buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:"Jersey 25", sans-serif; font-size:20px;
  color:var(--ink); background:var(--bg-3);
  border:1px solid var(--b-mid); padding:9px 16px; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  box-shadow:inset 1px 1px 0 var(--b-light), inset -1px -1px 0 var(--b-dark), 0 3px 0 var(--b-dark);
  transition:transform 80ms ease, filter 120ms ease;
}
.btn:hover { filter:brightness(1.12); color:var(--ink); }
.btn:active { transform:translateY(2px); box-shadow:inset 1px 1px 0 var(--b-light), inset -1px -1px 0 var(--b-dark), 0 1px 0 var(--b-dark); }
.btn-gold {
  background:linear-gradient(180deg, #E8B547, #A57A20); color:#1A1206; border-color:#5A3A0A;
  box-shadow:inset 1px 1px 0 #FFE090, inset -1px -1px 0 #2A1A04, 0 3px 0 #2A1A04;
}
.btn-gold:hover { color:#1A1206; }
.btn-ghost { background:var(--bg-2); color:var(--ink-dim); }
.btn-ghost:hover { color:var(--ink); border-color:var(--b-light); }
.btn-sm { font-size:14px; padding:6px 12px; }
.btn-lg { font-size:24px; padding:13px 24px; }
.btn-xl { font-size:30px; padding:17px 36px; }

/* ---- panels ---- */
.stone {
  background:var(--bg-2); border:1px solid var(--b-mid);
  box-shadow:inset 1px 1px 0 var(--b-light), inset -1px -1px 0 var(--b-dark), 0 4px 0 var(--b-dark), 0 6px 18px rgba(0,0,0,.55);
}
html.light .stone { box-shadow:inset 1px 1px 0 var(--b-light), inset -1px -1px 0 var(--b-dark), 0 4px 0 var(--b-dark), 0 6px 18px rgba(54,44,24,.16); }
.stone-flat {
  background:var(--bg-2); border:1px solid var(--b-mid);
  box-shadow:inset 1px 1px 0 var(--b-light), inset -1px -1px 0 var(--b-dark);
}
.hr { height:1px; border:0; margin:18px 0; background:linear-gradient(to right, transparent, var(--b-light), transparent); }

/* ---- chips ---- */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-family:"IBM Plex Mono", monospace; font-weight:600;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; background:var(--bg-3); border:1px solid var(--b-mid); color:var(--ink-dim);
}
.chip.on   { color:var(--gold); border-color:var(--gold-dark); background:rgba(232,181,71,.08); }
.chip.crim { color:var(--crimson); border-color:var(--crimson); background:rgba(199,58,69,.08); }
.chip.herb { color:var(--herbal); border-color:var(--herbal); background:rgba(122,174,90,.08); }
.chip.mana { color:var(--mana); border-color:var(--mana); background:rgba(90,135,216,.08); }

/* ---- form fields ---- */
.field { display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
.field label, .label {
  font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
}
.input {
  width:100%; font-family:"IBM Plex Mono", monospace; font-size:16px;
  color:var(--ink); background:var(--bg-1); border:1px solid var(--b-dark);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.5), inset -1px -1px 0 var(--b-mid);
  padding:10px 12px; outline:none;
}
.input::placeholder { color:var(--ink-mute); }
.input:focus {
  border-color:var(--gold-dark);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.5), inset -1px -1px 0 var(--gold-dark), 0 0 0 2px rgba(232,181,71,.18);
}
.input.has-error { border-color:var(--crimson); }
.help { font-size:13px; color:var(--ink-faint); }
.help-error { font-size:13px; color:var(--crimson); }
.field-static { display:flex; flex-direction:column; gap:4px; }
.field-static > div:last-child { font-size:15px; color:var(--ink); }

/* ---- alerts (Django messages + form errors) ---- */
.msg-tray { max-width:460px; margin:0 auto; width:100%; padding:16px 24px 0; }
.alert {
  padding:11px 14px; margin-bottom:10px; font-size:14px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--b-mid); border-left-width:3px;
  box-shadow:inset 1px 1px 0 var(--b-light), inset -1px -1px 0 var(--b-dark);
}
.alert-success { border-left-color:var(--herbal); }
.alert-error, .alert-danger { border-left-color:var(--crimson); }
.alert-warning { border-left-color:var(--gold); }
.alert-info, .alert-debug { border-left-color:var(--mana); }

/* ---- divider ---- */
.divider {
  display:flex; align-items:center; gap:14px;
  font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
}
.divider::before, .divider::after {
  content:""; flex:1; height:1px;
  background:linear-gradient(to right, transparent, var(--b-mid), transparent);
}

/* ---- torches ---- */
.torch { position:relative; width:28px; height:56px; }
.torch .stick {
  position:absolute; left:10px; bottom:0; width:8px; height:28px;
  background:linear-gradient(180deg, #6A4A22, #2A1A0A);
}
.torch .flame {
  position:absolute; left:4px; top:0; width:20px; height:32px;
  background:
    radial-gradient(circle at 50% 70%, #FFE48A 0 4px, transparent 5px),
    radial-gradient(circle at 50% 55%, #F5A23A 0 7px, transparent 8px),
    radial-gradient(circle at 50% 40%, #E85A1A 0 10px, transparent 11px);
  animation:flicker 380ms steps(2) infinite, flameMove 1.3s ease-in-out infinite;
}
.torch .halo {
  position:absolute; left:-30px; top:-20px; width:88px; height:88px;
  background:radial-gradient(circle, rgba(232,90,26,.5) 0%, rgba(232,181,71,.16) 35%, transparent 70%);
  filter:blur(2px); animation:halo 1.3s ease-in-out infinite;
}
@keyframes flicker { 0%,100%{transform:translateX(0) scaleY(1);opacity:1} 50%{transform:translateX(.5px) scaleY(.95);opacity:.92} }
@keyframes flameMove { 0%,100%{transform:scale(1,1)} 50%{transform:scale(1.08,.94)} }
@keyframes halo { 0%,100%{opacity:.8} 50%{opacity:1} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ---- landing: hero ---- */
.hero { position:relative; text-align:center; padding:84px 0 52px; overflow:hidden; }
.hero .torch { position:absolute; top:40px; }
.hero .t-l1 { left:9%; } .hero .t-r1 { right:9%; }
.hero .t-l2 { left:3%; top:150px; } .hero .t-r2 { right:3%; top:150px; }
.hero-title-stage {
  position:relative; display:inline-block; margin:18px 0 10px;
}
.hero-title-stage::before {
  content:""; position:absolute; inset:-40px;
  background:radial-gradient(circle, rgba(232,181,71,.28), transparent 65%);
  pointer-events:none;
}
.hero-title {
  position:relative; display:block;
  width:min(640px, 92%); height:auto; margin:0 auto;
  image-rendering:pixelated;
  border-radius:18px;
  filter:drop-shadow(0 14px 36px rgba(0,0,0,.65))
         drop-shadow(0 0 22px rgba(232,181,71,.38));
  animation:float 4.2s ease-in-out infinite;
}
.hero-h1 { font-size:clamp(22px, 3.4vw, 34px); color:var(--ink); margin:18px auto 10px; max-width:760px; line-height:1.3; }
.hero-sub { font-size:18px; color:var(--ink-dim); max-width:620px; margin:0 auto 30px; }
.cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-note { margin-top:22px; font-size:13px; color:var(--ink-faint); letter-spacing:.04em; }

/* ---- landing: sections ---- */
.section { padding:60px 0; }
.divider-wide {
  display:flex; align-items:center; gap:14px; margin-bottom:30px;
  font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
}
.divider-wide::before, .divider-wide::after {
  content:""; flex:1; height:1px;
  background:linear-gradient(to right, transparent, var(--b-mid), transparent);
}

/* lineage strata */
.strata { display:flex; flex-direction:column; }
.stratum { position:relative; display:grid; grid-template-columns:96px 1fr; gap:22px; padding:24px 0; }
.stratum + .stratum { border-top:1px dashed var(--b-mid); }
.depth { display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:4px; }
.depth .glyph {
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  font-family:"Press Start 2P", monospace; font-size:20px; color:var(--gold);
  background:var(--bg-3); border:1px solid var(--b-mid);
  box-shadow:inset 1px 1px 0 var(--b-light), inset -1px -1px 0 var(--b-dark);
}
.depth.is-us .glyph {
  background:linear-gradient(180deg, #E8B547, #A57A20); color:#1A1206; border-color:#5A3A0A;
  box-shadow:inset 1px 1px 0 #FFE090, inset -1px -1px 0 #2A1A04;
}
.depth .year { font-weight:600; font-size:11px; letter-spacing:.12em; color:var(--ink-faint); }
.stratum h3 { font-family:"Jersey 25", sans-serif; font-size:30px; color:var(--ink); line-height:1; }
.stratum.is-us h3 { color:var(--gold); }
.stratum .by { font-size:13px; color:var(--ink-faint); letter-spacing:.04em; margin:3px 0 10px; }
.stratum p { color:var(--ink-dim); max-width:680px; }
.stratum .links { display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; }
.stratum .links a { font-weight:600; font-size:13px; }

/* two-up cards */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.card { padding:24px; }
.card h3 { font-family:"Jersey 25", sans-serif; font-size:26px; color:var(--ink); margin:12px 0 8px; }
.card p { color:var(--ink-dim); }
.card .links { margin-top:14px; display:flex; gap:14px; flex-wrap:wrap; }
.card .links a { font-weight:600; font-size:14px; }
.playlist { list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:8px; }
.playlist li { display:flex; gap:10px; color:var(--ink); }
.playlist li::before { content:"\2726"; color:var(--gold); }
.note-soon { margin-top:20px; padding:16px 18px; border-left:3px solid var(--ember); background:rgba(232,90,26,.06); }
.note-soon .ui { font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember); }
.note-soon p { color:var(--ink-dim); margin-top:4px; }

/* finale */
.finale { text-align:center; padding:64px 24px; }
.finale .stone { display:inline-block; padding:46px 52px; max-width:680px; }

/* ---- footer ---- */
.foot { border-top:1px solid var(--b-mid); background:rgba(0,0,0,.25); }
html.light .foot { background:rgba(0,0,0,.03); }
.foot-inner { max-width:1180px; margin:0 auto; padding:30px 24px; }
.foot-links { display:flex; gap:24px; flex-wrap:wrap; margin-bottom:14px; }
.foot-links a { font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.foot-links a:hover { color:var(--gold); }
.foot-credit { font-size:13px; color:var(--ink-faint); max-width:780px; line-height:1.7; }
.foot-credit a { color:var(--ink-dim); }
.foot-credit a:hover { color:var(--gold); }

@media (max-width:720px) {
  body { font-size:15px; }
  .hero { padding:52px 0 40px; }
  .hero .torch { display:none; }
  .section { padding:40px 0; }
  .duo { grid-template-columns:1fr; }
  .stratum { grid-template-columns:1fr; gap:12px; }
  .depth { flex-direction:row; align-items:center; gap:12px; }
  .cta-row .btn { width:100%; max-width:360px; }
  .finale .stone { padding:30px 22px; }
  .topbar-inner { padding:9px 14px; }
  .brand-logo { height:26px; }
  .brand-logo-frame { padding:3px 8px; border-radius:6px; }
  .hero-title { width:min(420px, 92%); }
  .hero-title-stage::before { inset:-28px; }
}

/* ════════════════════════════════════════════════════════════════
   PCModal — reusable confirm / alert dialog (static/js/pc-modal.js).
   A carved slab that drops into place over a blurred dungeon, in the
   Stone & Ember language. Replaces the browser's native confirm() /
   alert(). Theme-aware through the design-token vars.
   ════════════════════════════════════════════════════════════════ */

/* a destructive-action button — the gold button's crimson sibling */
.btn-danger {
  background:linear-gradient(180deg, #D8454F, #8E2630); color:#FFEDED;
  border-color:#4A1418;
  box-shadow:inset 1px 1px 0 #EE8F97, inset -1px -1px 0 #240608, 0 3px 0 #240608;
}
.btn-danger:hover { color:#FFEDED; }

.pc-overlay {
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(4,5,8,.66);
  backdrop-filter:blur(5px) saturate(.7);
  animation:pcOverlayIn 140ms ease-out;
}
html.light .pc-overlay { background:rgba(40,33,18,.5); }
.pc-overlay.pc-closing { animation:pcOverlayOut 130ms ease-in forwards; }

.pc-modal {
  position:relative; width:clamp(280px, 92vw, 416px);
  background:var(--bg-2); border:1px solid var(--b-mid);
  box-shadow:
    inset 1px 1px 0 var(--b-light), inset -1px -1px 0 var(--b-dark),
    0 8px 0 var(--b-dark), 0 16px 36px rgba(0,0,0,.62);
  animation:pcModalIn 220ms cubic-bezier(.2,.9,.3,1.16);
}
html.light .pc-modal {
  box-shadow:
    inset 1px 1px 0 var(--b-light), inset -1px -1px 0 var(--b-dark),
    0 8px 0 var(--b-dark), 0 16px 32px rgba(54,44,24,.24);
}
.pc-overlay.pc-closing .pc-modal { animation:pcModalOut 130ms ease-in forwards; }

/* the accent strip — gold by default, crimson for a destructive modal */
.pc-modal-strip {
  height:4px;
  background:linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
}
.pc-modal.pc-danger .pc-modal-strip {
  background:linear-gradient(90deg, #4A1418, var(--crimson), #4A1418);
}

.pc-modal-body { padding:22px 24px 4px; }

.pc-modal-kicker {
  display:inline-flex; align-items:center; gap:7px;
  font-family:"IBM Plex Mono", monospace; font-weight:600;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
}
.pc-modal.pc-danger .pc-modal-kicker { color:var(--crimson); }
.pc-modal-kicker::before {
  content:""; width:8px; height:8px; background:var(--gold);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -1px 0 rgba(0,0,0,.55);
}
.pc-modal.pc-danger .pc-modal-kicker::before { background:var(--crimson); }

.pc-modal-title {
  font-family:"Jersey 25", sans-serif; font-weight:400;
  font-size:30px; line-height:1.04; color:var(--ink); margin:9px 0 7px;
}
.pc-modal-text { font-size:14px; line-height:1.62; color:var(--ink-dim); }
.pc-modal-text strong { color:var(--ink); font-weight:700; }

/* PCModal.prompt input — 28px font keeps it above the iOS 16px
   auto-zoom threshold AND meets the owner's "minimum 20pt, preferably
   larger" ask. Centered + monospaced for room-code legibility. */
.pc-modal-input {
  display:block;
  width:calc(100% - 32px);
  margin:14px 16px 4px;
  padding:14px 16px;
  font-family:ui-monospace, "JetBrains Mono", monospace;
  font-size:28px;
  font-weight:700;
  letter-spacing:0.12em;
  text-align:center;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--bg-1);
  border:1px solid var(--b-dark);
  border-radius:5px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.45);
  outline:none;
}
.pc-modal-input:focus {
  border-color:var(--gold);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.45),
    0 0 0 2px rgba(255,213,90,0.35);
}
.pc-modal-input::placeholder {
  color:var(--ink-dim);
  opacity:0.55;
  letter-spacing:0.10em;
  font-weight:500;
}

.pc-modal-actions {
  display:flex; justify-content:flex-end; gap:10px;
  padding:18px 24px 20px; margin-top:16px;
  border-top:1px solid var(--b-dark);
  box-shadow:inset 0 1px 0 var(--b-light);
}

@keyframes pcOverlayIn  { from{opacity:0} to{opacity:1} }
@keyframes pcOverlayOut { from{opacity:1} to{opacity:0} }
@keyframes pcModalIn {
  0%   { opacity:0; transform:translateY(-16px) scale(.96); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes pcModalOut {
  from { opacity:1; transform:translateY(0) scale(1); }
  to   { opacity:0; transform:translateY(-8px) scale(.98); }
}

@media (prefers-reduced-motion:reduce) {
  .pc-overlay, .pc-modal,
  .pc-overlay.pc-closing, .pc-overlay.pc-closing .pc-modal {
    animation-duration:1ms;
  }
}
@media (max-width:560px) {
  .pc-modal-actions { flex-direction:column-reverse; }
  .pc-modal-actions .btn { width:100%; }

  .topbar-inner { flex-wrap:nowrap; gap:6px; padding:8px 10px; }
  .topbar .brand { flex-shrink:0; }
  .topbar .btn-sm { font-size:13px; padding:5px 10px; }
  .theme-switch button { width:26px; height:22px; }
}