/* Look A, "Candlelit": today's green-black grounds and candle gold, cleaned up.
   One type scale (13 small print and labels, 16 body and buttons, 18 lead, 20 and 28 headings),
   Alegreya for headings and names, Alegreya Sans for everything read at a glance, soft surfaces
   instead of ruled boxes, and one gold primary per screen. Chosen from the 2026-09-27 design review;
   every rule sits under html[data-look="candlelit"], which index.html sets, so removing that one
   attribute returns the older look. */
@font-face { font-family:'Alegreya'; src:url('/assets/fonts/alegreya-latin.woff2') format('woff2'); font-weight:400 800; font-style:normal; font-display:swap; }
@font-face { font-family:'Alegreya'; src:url('/assets/fonts/alegreya-italic-latin.woff2') format('woff2'); font-weight:400 800; font-style:italic; font-display:swap; }
@font-face { font-family:'Alegreya Sans'; src:url('/assets/fonts/alegreya-sans-400-latin.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Alegreya Sans'; src:url('/assets/fonts/alegreya-sans-400-italic-latin.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Alegreya Sans'; src:url('/assets/fonts/alegreya-sans-500-latin.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Alegreya Sans'; src:url('/assets/fonts/alegreya-sans-700-latin.woff2') format('woff2'); font-weight:600 700; font-display:swap; }

html[data-look="candlelit"] {
  --lk-ground:#121815; --lk-surface:#1d2521; --lk-raised:#28322c; --lk-field:#141a17;
  --lk-line:#33403a; --lk-line-strong:#4d5c50;
  --lk-text:#f1e9d8; --lk-text-2:#cfcdb9; --lk-text-3:#b3b4a2;
  --lk-gold:#deba7a; --lk-gold-bright:#f0d496; --lk-ember:#e4977a; --lk-sage:#a9c29a;
  --lk-hud:#121a16e8; --lk-hud-line:#ffffff1c;
  --lk-serif:'Alegreya', Georgia, serif; --lk-sans:'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --fs-small:13px; --fs-body:16px; --fs-button:16px; --fs-lead:18px; --fs-h3:20px; --fs-h2:28px;
  /* The game's own variables, so every rule that uses them follows the look. */
  --serif:var(--lk-serif); --gold:var(--lk-gold); --text:var(--lk-text); --muted:var(--lk-text-3); --text-soft:var(--lk-text-2); --focus-ring:var(--lk-gold-bright);
  font-family:var(--lk-sans); background:var(--lk-ground);
  /* Lining figures where the font has them (font-feature-settings survives the game's font shorthands).
     Alegreya Sans has only old-style figures, so counts and clocks are set in Alegreya. */
  font-feature-settings:'lnum' 1;
}
html[data-look="candlelit"] :is(kbd, #battle-panel p, .council-battle-warning, .recipe span, .ballot-voters small) { font-family:var(--lk-sans)!important; }

/* ---------- Dialogs ---------- */
/* The council chamber and the passage panel keep their own grounds; the passage overlay stays see-through. */
html[data-look="candlelit"] .overlay:not(:has(.passage-dialog, .event-card)) { background:#090d0bde; }
html[data-look="candlelit"] .dialog { border-radius:18px; color:var(--lk-text); }
html[data-look="candlelit"] .dialog:not(.meeting-dialog, .passage-dialog) {
  background:radial-gradient(120% 220px at 50% 0, #deba7a12, transparent 70%), var(--lk-surface);
  border:1px solid #deba7a33; box-shadow:0 24px 70px #000000a6, inset 0 1px 0 #ffffff0a;
}
html[data-look="candlelit"] .dialog h2 { font:600 var(--fs-h2)/1.15 var(--lk-serif); color:var(--lk-text); letter-spacing:-.005em; }
html[data-look="candlelit"] .dialog h3 { font-family:var(--lk-serif); font-weight:600; }
html[data-look="candlelit"] .dialog .lead { font:italic var(--fs-lead)/1.5 var(--lk-serif); color:#d9d1bb; }
html[data-look="candlelit"] .dialog p { font-size:var(--fs-body); line-height:1.55; color:var(--lk-text-2); }
html[data-look="candlelit"] .small-note { font-size:var(--fs-small)!important; line-height:1.5!important; color:var(--lk-text-3)!important; letter-spacing:.01em; }
html[data-look="candlelit"] .small-note a { color:var(--lk-gold); text-underline-offset:2px; }
html[data-look="candlelit"] .dialog .crest { color:var(--lk-gold); }
html[data-look="candlelit"] .dialog .error { font-size:14px; color:#f0ab93!important; }
html[data-look="candlelit"] label { font:500 var(--fs-small)/1.4 var(--lk-sans); color:var(--lk-text-2); letter-spacing:.02em; }
html[data-look="candlelit"] .dialog :is(input:not([type=checkbox],[type=range]), select) {
  min-height:48px; margin-top:6px; padding:11px 14px; font:400 16px var(--lk-sans); color:var(--lk-text);
  background:var(--lk-field); border:1px solid var(--lk-line-strong); border-radius:10px;
}
html[data-look="candlelit"] .dialog select { padding-right:10px; }
html[data-look="candlelit"] .dialog :is(input, select):focus-visible { outline:2px solid var(--lk-gold-bright); outline-offset:2px; border-color:var(--lk-gold); }
html[data-look="candlelit"] .form-row { gap:12px; margin-bottom:14px; }
html[data-look="candlelit"] .mode-picker { margin-bottom:6px; }
html[data-look="candlelit"] .dialog .mode-explanation { font-size:15px; line-height:1.45; margin:6px 0 16px; color:var(--lk-text-3); }

/* Buttons: one gold primary, soft raised secondaries, gold text for quiet links. */
html[data-look="candlelit"] :is(.primary, .secondary) { font:600 var(--fs-button)/1.2 var(--lk-sans); letter-spacing:.01em; border-radius:12px; }
html[data-look="candlelit"] .primary {
  min-height:52px; padding:14px 20px; color:#1a1e16; border:0;
  background:linear-gradient(#e8c98c, #d5b06f); box-shadow:inset 0 1px 0 #fff4d266, 0 6px 18px #d9b16624;
}
html[data-look="candlelit"] .primary:disabled { opacity:.45; box-shadow:none; }
html[data-look="candlelit"] .secondary {
  min-height:48px; padding:12px 18px; color:var(--lk-text); border:1px solid #ffffff0f;
  background:var(--lk-raised); box-shadow:inset 0 1px 0 #ffffff0a;
}
html[data-look="candlelit"] .secondary:disabled { opacity:.45; }
html[data-look="candlelit"] .dialog .quiet-button { min-height:44px; padding:10px 4px; font:500 var(--fs-body) var(--lk-sans); color:var(--lk-gold); background:none; border:0; }
html[data-look="candlelit"] .dialog .quiet-button.wide { text-decoration:underline; text-decoration-color:#deba7a66; text-underline-offset:4px; }
html[data-look="candlelit"] .dialog .close { color:var(--lk-text-2); font-size:28px; }
html[data-look="candlelit"] .dialog-actions { gap:10px; }

/* ---------- Entry ---------- */
html[data-look="candlelit"] .entry-dialog .crest { width:30px; height:32px; margin-bottom:12px; }
html[data-look="candlelit"] .entry-dialog .entry-title { font:600 clamp(31px, 8.8vw, 42px)/1.08 var(--lk-serif)!important; letter-spacing:-.012em; color:var(--lk-text); }
html[data-look="candlelit"] .entry-dialog .entry-title::first-line { color:var(--lk-gold); }
html[data-look="candlelit"] .entry-dialog .lead { font-size:var(--fs-lead); line-height:1.45; margin:12px 0 20px; }
/* Tabs become one segmented control. */
html[data-look="candlelit"] .dialog .entry-tabs {
  display:flex; gap:4px; margin:0 0 18px; padding:4px; border:1px solid var(--lk-line); border-radius:14px; background:var(--lk-field);
}
html[data-look="candlelit"] .dialog .entry-tabs button {
  flex:1 1 auto; min-height:44px; padding:8px 8px; border:0; border-radius:10px; background:none;
  font:500 15px/1.15 var(--lk-sans); color:var(--lk-text-2); white-space:normal;
}
html[data-look="candlelit"] .dialog .entry-tabs button.active { background:var(--lk-raised); color:var(--lk-gold-bright); box-shadow:inset 0 1px 0 #ffffff12, 0 2px 8px #0000004d; }
html[data-look="candlelit"] #rejoin-abbey { font-size:var(--fs-button); }
html[data-look="candlelit"] .vigil-card {
  gap:12px; padding:16px; border:1px solid #deba7a4d; border-radius:14px;
  background:radial-gradient(90% 120% at 0 0, #deba7a1f, transparent 60%), #25241b; color:var(--lk-text);
}
html[data-look="candlelit"] .vigil-card h3 { font:600 20px/1.2 var(--lk-serif); color:var(--lk-gold-bright); letter-spacing:0; margin:0 0 6px; }
html[data-look="candlelit"] .vigil-card p { font-size:15px; line-height:1.45; color:var(--lk-text); }
html[data-look="candlelit"] .vigil-card small { font-size:var(--fs-small); color:var(--lk-text-2); }
html[data-look="candlelit"] .casebook-entry { gap:14px; padding:12px 16px; min-height:60px; border-radius:14px; }
html[data-look="candlelit"] .casebook-entry > svg { width:24px; height:24px; color:var(--lk-gold); }
html[data-look="candlelit"] .casebook-entry strong { font:600 17px var(--lk-serif); color:var(--lk-text); }
html[data-look="candlelit"] .casebook-entry small { font-size:var(--fs-small); font-weight:400; color:var(--lk-text-3); }
html[data-look="candlelit"] .install-guide { border-top-color:var(--lk-line); }
html[data-look="candlelit"] .install-guide summary { font-size:var(--fs-body); color:var(--lk-gold); }
html[data-look="candlelit"] .install-guide summary small { font-size:var(--fs-small); color:var(--lk-text-3); }
html[data-look="candlelit"] .install-content li { font-size:15px; color:var(--lk-text-2); }

/* ---------- Role card ---------- */
html[data-look="candlelit"] .dialog:has(#accept-role) .crest { width:40px; height:44px; margin-bottom:16px; }
html[data-look="candlelit"] .dialog:has(#accept-role) h2 { font-size:30px; }
html[data-look="candlelit"] .dialog:has(#accept-role) .lead { font-size:19px; margin:12px 0 18px; }
html[data-look="candlelit"] .dialog:has(#accept-role) p:not(.lead, .small-note) { color:var(--lk-text); }
html[data-look="candlelit"] .dialog:has(#accept-role) .small-note { padding:12px 14px; border-radius:12px; background:#ffffff08; }
html[data-look="candlelit"] .partner-note { border-radius:12px; font-size:15px; }

/* ---------- Lobby ---------- */
html[data-look="candlelit"] .dialog .quiet-button.lobby-help { font-size:var(--fs-body); color:var(--lk-gold); padding:10px 0; }
html[data-look="candlelit"] .lobby-dialog .lead { margin:18px 0 6px; }
html[data-look="candlelit"] .room-code { font:600 44px/1.1 var(--lk-serif); letter-spacing:.16em; color:var(--lk-gold-bright); margin:12px 0 2px; }
html[data-look="candlelit"] .room-code + .small-note { letter-spacing:.1em!important; }
html[data-look="candlelit"] .lobby-share { gap:10px; }
html[data-look="candlelit"] .lobby-list { gap:0 16px; margin:16px 0 8px; }
html[data-look="candlelit"] .lobby-person { font:600 16px var(--lk-serif); color:var(--lk-text); border-bottom-color:var(--lk-line); padding:10px 0; }
html[data-look="candlelit"] .lobby-person small, html[data-look="candlelit"].touch-layout .lobby-person small { font:600 var(--fs-small) var(--lk-sans); letter-spacing:.06em; color:var(--lk-gold); }
html[data-look="candlelit"] .dialog p.room-tally { font-size:15px; color:var(--lk-gold); }
html[data-look="candlelit"] .look-picker { margin:14px 0 6px; }
html[data-look="candlelit"] #look-choices { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
html[data-look="candlelit"] .look-choice { min-height:56px; border-radius:12px; border-color:var(--lk-line); background:var(--lk-field); }
html[data-look="candlelit"] .look-choice .monk-badge { width:34px; height:46px; }
html[data-look="candlelit"] .look-choice[aria-pressed="true"] { border-color:var(--lk-gold); background:#3a3421; box-shadow:0 0 0 1px var(--lk-gold); }
html[data-look="candlelit"] #bot-controls { gap:10px; }
html[data-look="candlelit"] #bot-controls button { font-size:var(--fs-button); }
html[data-look="candlelit"] .lobby-settings { border:1px solid var(--lk-line); border-radius:14px; background:#ffffff05; padding:6px 14px; }
html[data-look="candlelit"] .lobby-settings summary { font:600 17px var(--lk-serif); color:var(--lk-text); min-height:44px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
html[data-look="candlelit"] .lobby-settings summary .small-note { font-family:var(--lk-sans); font-weight:500; }
html[data-look="candlelit"] .lobby-settings summary::after { content:""; width:8px; height:8px; margin-left:auto; border-right:1.5px solid var(--lk-gold); border-bottom:1.5px solid var(--lk-gold); transform:rotate(45deg) translateY(-3px); }
html[data-look="candlelit"] .lobby-settings[open] summary::after { transform:rotate(225deg); }
html[data-look="candlelit"] .settings-grid label { font-size:15px; }
html[data-look="candlelit"] .music-control { font-size:15px; color:var(--lk-text-2); }
html[data-look="candlelit"] .music-control output { font:500 14px var(--lk-serif); color:var(--lk-text-3); }
html[data-look="candlelit"] #lobby-music label { font-size:15px; }
html[data-look="candlelit"] .chat-log { border-color:var(--lk-line); }
html[data-look="candlelit"] .chat-message { font-size:15px; color:var(--lk-text-2); }
html[data-look="candlelit"] .chat-message strong { font:600 15px var(--lk-serif); color:var(--lk-gold); }
html[data-look="candlelit"] .chat-log:empty::before, html[data-look="candlelit"] .chat-log > p { font-size:15px; color:var(--lk-text-3); }
html[data-look="candlelit"] .chat-form { gap:10px; }
html[data-look="candlelit"] .dialog .chat-form input, html[data-look="candlelit"] .chat-pane .chat-form input { margin:0; font-size:16px; }
html[data-look="candlelit"] .chat-form button, html[data-look="candlelit"].touch-layout .chat-form button { min-height:48px; font-size:var(--fs-button); padding:10px 16px; }
html[data-look="candlelit"] .quick-only { font-size:15px; color:var(--lk-text-2); min-height:44px; }
html[data-look="candlelit"] :is(.lobby-quick, .chat-pane) .quick-line { min-height:40px; font-size:15px; border-color:var(--lk-line-strong); background:var(--lk-raised); color:var(--lk-text); }
html[data-look="candlelit"] .lobby-footer { background:var(--lk-surface); }
html[data-look="candlelit"] .lobby-footer::before { background:linear-gradient(color-mix(in srgb, var(--lk-surface) 0%, transparent), var(--lk-surface)); }

/* ---------- Other dialogs: duties list, help, menu ---------- */
html[data-look="candlelit"] .dialog .duty-item { min-height:56px; border-bottom-color:var(--lk-line); }
html[data-look="candlelit"] .dialog .duty-item strong { font:500 var(--fs-body)/1.35 var(--lk-sans); color:var(--lk-text); }
html[data-look="candlelit"] .dialog .duty-item small { font-size:var(--fs-small); color:var(--lk-text-3); }
html[data-look="candlelit"] .help-steps li { font-size:var(--fs-body); line-height:1.6; color:var(--lk-text-2); }
html[data-look="candlelit"] .phone-view-controls { font-size:15px; color:var(--lk-text-2); }

/* ---------- Night HUD (phones) ---------- */
html[data-look="candlelit"].touch-layout .statusbar {
  height:38px; min-height:38px; padding:0 12px; border:1px solid var(--lk-hud-line); border-radius:12px; background:var(--lk-hud);
  display:flex; align-items:center;
}
html[data-look="candlelit"].touch-layout .faith-title { width:100%; height:auto; font:600 var(--fs-small)/1 var(--lk-sans)!important; letter-spacing:.01em; color:var(--lk-text); }
html[data-look="candlelit"].touch-layout .faith-title > span { text-transform:lowercase; }
html[data-look="candlelit"].touch-layout .faith-title > span::first-letter { text-transform:uppercase; }
html[data-look="candlelit"].touch-layout .faith-title strong { font:700 14px var(--lk-serif)!important; color:var(--lk-gold); }
html[data-look="candlelit"].touch-layout .faith-track { inset:auto 12px 5px; height:3px; opacity:1; background:#ffffff17; border-radius:2px; overflow:hidden; }
html[data-look="candlelit"].touch-layout .faith-track > div { background:var(--lk-gold); }
html[data-look="candlelit"].touch-layout .calling { top:46px; padding:6px 10px; gap:6px; border-radius:10px; background:var(--lk-hud); border:1px solid var(--lk-hud-line); }
html[data-look="candlelit"].touch-layout .calling strong { font:600 16px/1 var(--lk-serif); color:var(--lk-gold-bright); }
html[data-look="candlelit"].touch-layout .header-actions :is(#mobile-duties, #phone-map, #pause-button) {
  width:54px; min-width:54px; height:54px; min-height:54px; padding:4px 2px; gap:3px;
  border:1px solid var(--lk-hud-line); border-radius:14px; background:var(--lk-hud); color:var(--lk-text);
  font:600 var(--fs-small)/1 var(--lk-sans);
}
html[data-look="candlelit"].touch-layout .header-actions svg { width:22px; height:22px; color:var(--lk-gold); }
html[data-look="candlelit"].touch-layout #phone-duty-count { top:-7px; right:-6px; padding:2px 6px; border-radius:8px; font:700 14px/1.1 var(--lk-serif); background:var(--lk-gold); color:#1a1e16; }
html[data-look="candlelit"].touch-layout #phone-map[aria-pressed="true"] { background:#3a3421; border-color:var(--lk-gold); }
html[data-look="candlelit"].touch-layout .statusbar { width:min(340px, calc(100% - 214px)); }
html[data-look="candlelit"].touch-layout .world-hint { font:500 15px/1.4 var(--lk-sans); color:var(--lk-text); padding:8px 12px; border-radius:12px; background:var(--lk-hud); }
html[data-look="candlelit"].touch-layout .map-heading { font:700 var(--fs-small)/1.2 var(--lk-sans); letter-spacing:.12em; color:var(--lk-gold); padding:7px 12px; border-radius:10px; background:var(--lk-hud); }
html[data-look="candlelit"].touch-layout .touch-joystick { border:1.5px solid #deba7a59; background:radial-gradient(circle, #1d2521b3 55%, #121a16cc); }
html[data-look="candlelit"].touch-layout .touch-joystick.is-held { border-color:var(--lk-gold); }
html[data-look="candlelit"] .joystick-stick { border:0; background:radial-gradient(circle at 40% 35%, #f3e6c6, #cdb989 70%, #b39f6f); box-shadow:0 4px 12px #0008; }
html[data-look="candlelit"].touch-layout .actions .action-button {
  gap:4px; padding:6px 4px; border:1px solid var(--lk-hud-line); border-radius:20px; background:var(--lk-hud); color:var(--lk-text);
  font:700 var(--fs-small)/1.1 var(--lk-sans);
}
html[data-look="candlelit"].touch-layout .actions .action-button svg { width:26px; height:26px; color:var(--lk-gold); }
html[data-look="candlelit"].touch-layout .actions .action-button:disabled { background:#101713e6; border-color:#ffffff12; color:#a3a797; }
html[data-look="candlelit"].touch-layout .actions .action-button:disabled svg { color:#a3a797; }
html[data-look="candlelit"].touch-layout .actions #interact-label { font:700 17px/1.1 var(--lk-sans); }
html[data-look="candlelit"].touch-layout .actions #interact-detail { font:500 var(--fs-small)/1.2 var(--lk-sans); }
html[data-look="candlelit"].touch-layout .actions #ability-label small { font:500 var(--fs-small)/1.2 var(--lk-sans); }
/* A size down and a touch tighter, so a long word ("Confession") keeps clear of its rounded edge. */
html[data-look="candlelit"].touch-layout .actions #ability-label { font-size:12px; letter-spacing:-.02em; }
html[data-look="candlelit"].touch-layout .actions #interact-button { border-radius:26px; gap:3px; }
html[data-look="candlelit"].touch-layout .actions #interact-button svg { width:28px; height:28px; }
html[data-look="candlelit"].touch-layout .actions #interact-button:enabled { background:linear-gradient(#e8c98c, #cfa966); color:#1a1e16; border:0; box-shadow:0 6px 20px #00000080, inset 0 1px 0 #fff4d266; }
html[data-look="candlelit"].touch-layout .actions #interact-button:enabled svg { color:#1a1e16; }
html[data-look="candlelit"].touch-layout #app[data-role="heretic"] #interact-button:enabled { background:linear-gradient(#b8634a, #8f4533); color:#fff1e8; }
html[data-look="candlelit"].touch-layout #app[data-role="heretic"] #interact-button:enabled svg { color:#fff1e8; }
html[data-look="candlelit"].touch-layout .actions #report-button:enabled { background:#5b2e23f0; border-color:#e4977a99; color:#fbe3d8; }
html[data-look="candlelit"].touch-layout .actions #report-button:enabled svg { color:#f2b39b; }
html[data-look="candlelit"].touch-layout .toast { font:500 15px/1.45 var(--lk-sans); padding:12px 16px; border:1px solid #deba7a55; border-radius:14px; background:#1d2521f5; color:var(--lk-text); }
html[data-look="candlelit"].touch-layout :is(.route-status, .alert-banner) { min-height:48px; padding:6px 8px 6px 12px; border-radius:12px; font:500 14px/1.35 var(--lk-sans); }
html[data-look="candlelit"].touch-layout :is(.route-status, .alert-banner) button { min-height:40px; min-width:64px; padding:6px 12px; border-radius:10px; font:600 14px var(--lk-sans); flex:none; white-space:nowrap; }
/* The role chip is taller in this look, so banners start below it rather than over its lower edge. */
html[data-look="candlelit"].touch-layout .journey-bar { top:100px; }
@media (orientation:portrait) {
  html[data-look="candlelit"].touch-layout .world-hint { bottom:162px; }
  /* The place name sits in the middle of the gap between the joystick and the Go button, not the screen, so a two-line name never runs under the joystick. */
  html[data-look="candlelit"].touch-layout .map-heading { left:calc(50% + (var(--thumb-stick) - var(--thumb-main)) / 2); max-width:calc(100% - 52px - var(--thumb-stick) - var(--thumb-main)); }
}
/* Too narrow for the role chip on one line (a boss night's countdown, a long role name): the cross stays beside its words,
   which take two close lines, and the chip sits in the middle of the gap between the status bar and the route bar (where
   one line always sat), so it grows into that gap rather than down over the bar. */
@media (max-width:389px) and (orientation:portrait) {
  html[data-look="candlelit"].touch-layout .calling { top:63.5px; transform:translateY(-50%); display:grid; grid-template-columns:auto auto; align-content:center; min-height:35px; padding:4px 10px; row-gap:2px; }
  html[data-look="candlelit"].touch-layout .calling strong { white-space:normal; line-height:.9; }
}
@media (max-width:360px) and (orientation:portrait) {
  html[data-look="candlelit"].touch-layout .header-actions { gap:5px; }
  html[data-look="candlelit"].touch-layout .header-actions :is(#mobile-duties, #phone-map, #pause-button) { width:50px; min-width:50px; }
  /* The buttons are smaller here, so the role chip has their room: "The Faithful" stays on one line at 320. */
  html[data-look="candlelit"].touch-layout .calling { max-width:calc(100% - 166px); }
  html[data-look="candlelit"].touch-layout .statusbar { width:calc(100% - 196px); padding:0 9px; }
  html[data-look="candlelit"].touch-layout .faith-track { inset:auto 9px 5px; }
}

/* ---------- Full-screen council call ---------- */
html[data-look="candlelit"] .event-card h2 { font-family:var(--lk-serif); font-weight:600; }
html[data-look="candlelit"] .event-card p { font:italic 19px/1.5 var(--lk-serif); }
html[data-look="candlelit"] .event-card small { font-size:var(--fs-small); }
html[data-look="candlelit"] .event-card .quiet-button { min-height:52px; padding:12px 24px; border-radius:12px; font:600 var(--fs-button) var(--lk-sans); border-color:#deba7a80; color:var(--lk-gold-bright); }

/* ---------- Council (the chamber art stays; type, tabs and buttons follow the look) ---------- */
html[data-look="candlelit"] .meeting-dialog { border-radius:18px; border-color:#8a765099; }
/* The clock drops under the title rather than squeezing it onto two lines. */
html[data-look="candlelit"] .council-heading { flex-wrap:wrap; row-gap:2px; }
html[data-look="candlelit"] .council-heading h2 { font:600 26px/1.15 var(--lk-serif); }
html[data-look="candlelit"] .meeting-dialog .meeting-clock { font:700 15px var(--lk-serif); color:var(--lk-gold); }
html[data-look="candlelit"] .council-discovery { font-size:15px!important; color:var(--lk-text-2); border-bottom-color:var(--lk-line)!important; }
html[data-look="candlelit"] .council-discovery strong { font-family:var(--lk-serif); color:var(--lk-text); }
html[data-look="candlelit"] .meeting-dialog .vote-card { color:var(--lk-text); font:600 15px/1.2 var(--lk-serif); }
html[data-look="candlelit"] .meeting-dialog .vote-card small,
html[data-look="candlelit"].touch-layout .meeting-dialog .vote-card small { font:500 var(--fs-small)/1.2 var(--lk-sans)!important; letter-spacing:.01em!important; text-transform:lowercase; color:var(--lk-text-3); }
html[data-look="candlelit"] .meeting-dialog .vote-card small::first-letter { text-transform:uppercase; }
html[data-look="candlelit"] .meeting-dialog .vote-card.fallen small { color:#e8b3a0; }
html[data-look="candlelit"] .council-tabs {
  display:flex; gap:4px; padding:4px; border:1px solid var(--lk-line); border-radius:14px; background:#0f1512cc;
}
html[data-look="candlelit"] .council-tabs button, html[data-look="candlelit"] .meeting-dialog .council-tabs button {
  flex:1 1 auto; min-height:44px; padding:8px 6px; border:0; border-radius:10px; font:500 15px var(--lk-sans); color:var(--lk-text-2);
}
html[data-look="candlelit"] .council-tabs button[aria-pressed=true] { background:var(--lk-raised); color:var(--lk-gold-bright); border:0; box-shadow:inset 0 1px 0 #ffffff12, 0 2px 8px #0000004d; }
html[data-look="candlelit"] .council-pane h3 { font:600 22px/1.2 var(--lk-serif); color:var(--lk-text); }
html[data-look="candlelit"] .council-pane p { font-size:var(--fs-body); line-height:1.5; color:var(--lk-text-2); }
html[data-look="candlelit"] .council-pane .testimony { border-bottom-color:var(--lk-line); }
html[data-look="candlelit"] .council-pane .testimony strong, html[data-look="candlelit"] .testimony strong { font:600 17px/1.3 var(--lk-serif); color:var(--lk-gold); }
html[data-look="candlelit"] .testimony strong small { font:500 var(--fs-small) var(--lk-sans); color:var(--lk-text-3); margin-top:2px; }
html[data-look="candlelit"] .council-pane .testimony p { color:var(--lk-text); }
html[data-look="candlelit"] .council-pane .question-row label { font-size:var(--fs-small); }
html[data-look="candlelit"] .council-pane :is(select, button) { font-size:15px; }
html[data-look="candlelit"] .meeting-dialog .council-ballot { border-top-color:var(--lk-line); }
html[data-look="candlelit"] .council-ballot #vote-status { font:500 15px/1.35 var(--lk-sans); color:var(--lk-text); }
html[data-look="candlelit"] .council-ballot button { min-height:52px; font-size:var(--fs-button); }
html[data-look="candlelit"] .council-ballot .abstain[aria-pressed=true] { border:1px solid var(--lk-gold); background:#3a3421; }
html[data-look="candlelit"] .council-ballot small { font:500 var(--fs-small) var(--lk-sans)!important; color:var(--lk-text-3); }
html[data-look="candlelit"] .council-spectator p { font-size:15px; }

/* ---------- Screens added after the mockup ---------- */
/* The role reveal keeps its own candle, ember or violet glow, and its coloured title. */
html[data-look="candlelit"] .dialog.role-dialog { background:radial-gradient(120% 340px at 50% 0, var(--role-glow), transparent 72%), var(--lk-surface); border-color:color-mix(in srgb, var(--role) 45%, transparent); }
html[data-look="candlelit"] .dialog.role-dialog.role-heretic { background:radial-gradient(120% 340px at 50% 0, var(--role-glow), transparent 72%), #1d1a18; }
html[data-look="candlelit"] .dialog h2.role-title { font-size:44px; color:var(--role-ink); text-shadow:0 0 22px var(--role-glow); }
html[data-look="candlelit"] .role-kicker { font:500 var(--fs-small)/1.3 var(--lk-sans); letter-spacing:.14em; }
/* Full-screen sheets on phones meet the screen's edges. */
@media (max-width:600px) { html[data-look="candlelit"] .dialog:is(.role-dialog, .help-dialog) { border:0; border-radius:0; box-shadow:none; } }
/* How to play and Family night take the look's softer surfaces. */
html[data-look="candlelit"] .help-art { border-radius:14px; border-color:var(--lk-line); background:radial-gradient(70% 90% at 50% 100%, #deba7a2e, transparent 72%), var(--lk-field); }
html[data-look="candlelit"] .help-mark { background:var(--lk-raised); border-color:#deba7a55; }
html[data-look="candlelit"] .help-dialog .help-kicker { font:500 var(--fs-small)/1.3 var(--lk-sans); }
html[data-look="candlelit"] .help-card h3 { font:600 26px/1.15 var(--lk-serif); }
html[data-look="candlelit"] .help-dialog .help-card p { font-size:var(--fs-body); color:var(--lk-text-2); }
html[data-look="candlelit"] .help-links a { border-radius:12px; border-color:var(--lk-line-strong); background:var(--lk-raised); font:600 var(--fs-button) var(--lk-sans); }
html[data-look="candlelit"] .dialog .family-night { border-radius:14px; background:var(--lk-raised); border-color:var(--lk-line-strong); }
html[data-look="candlelit"] .dialog .family-night.on { background:#3a3322; border-color:var(--lk-gold); }
html[data-look="candlelit"] .family-night strong { font:600 17px/1.2 var(--lk-serif); }
html[data-look="candlelit"] .family-night small { font:var(--fs-small)/1.45 var(--lk-sans); color:var(--lk-text-2); }
html[data-look="candlelit"] .practice-options { border-radius:12px; }
html[data-look="candlelit"] .entry-more { font:600 var(--fs-h3)/1.2 var(--lk-serif); }
/* Friends type the room code, so its figures stand level and unmistakable. */
html[data-look="candlelit"] .room-code { font-family:system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight:600; letter-spacing:.2em; }
/* Council: Accuse keeps its ember, Withdraw reads as a quiet secondary, and Last seen's headings match the labels. */
html[data-look="candlelit"] .council-actions .accuse { font-weight:600; background:#4d2a21; border:1px solid #c9795f; color:#ffe2d3; }
html[data-look="candlelit"] .council-actions .accuse:disabled { background:var(--lk-raised); border-color:var(--lk-line); color:var(--lk-text-3); opacity:.8; }
html[data-look="candlelit"] .council-actions .accuse.accused { background:var(--lk-raised); border-color:var(--lk-line-strong); color:var(--lk-text-2); }
html[data-look="candlelit"] .seen-table thead th { font:500 var(--fs-small)/1.3 var(--lk-sans); letter-spacing:.12em; color:var(--lk-text-3); border-bottom-color:var(--lk-line-strong); }
html[data-look="candlelit"] .end-rating { border-color:var(--lk-line-strong); border-radius:14px; background:var(--lk-raised); }
html[data-look="candlelit"] .end-rating p { font:600 var(--fs-lead)/1.3 var(--lk-serif); color:var(--lk-text); }
html[data-look="candlelit"] .end-rating p:only-child { font:italic var(--fs-body)/1.5 var(--lk-serif); color:var(--lk-text-2); }
html[data-look="candlelit"] .end-rating-choices button { font-size:var(--fs-button); }
html[data-look="candlelit"] .lobby-pass { border-color:var(--lk-gold); border-radius:14px; background:var(--lk-raised); }
html[data-look="candlelit"] .lobby-pass p { font:var(--fs-body)/1.5 var(--lk-serif); color:var(--lk-text); }
html[data-look="candlelit"] .lobby-pass .small-note { font-size:var(--fs-small, 13px); color:var(--lk-text-2); }
html[data-look="candlelit"] .pass-form input, html[data-look="candlelit"] .pass-form button { font-size:var(--fs-button); }