/* Tones. "Cream" is the original look and lives in the older stylesheets. "Night" lives only here, written with semantic tokens
   (what a colour is FOR, never a hex value in a rule), so a surface, a text, a field or a button gets the same colour wherever
   it appears: the home page, the sheets, the room, the chat, the menus. tone.js puts data-tone on <html> before anything is drawn.
   The painted village and the role cards keep their own colours: nothing here filters or darkens a picture.
   Every night selector starts with html[data-tone=night]:not(#n):not(#n). Each :not(#n) matches everything and weighs as one id, so two of
   them out-rank every cream rule, even the ones that name an id (#dialog-content, #chat ...), without !important. */

/* While the tone is being switched nothing fades: the new colours are there at once. */
html[data-tone-switching] *,html[data-tone-switching] *::before,html[data-tone-switching] *::after{transition:none!important}
html[data-tone=night]:not(#n):not(#n) body.accounts.room2 #chat-mic.voice-on{background:var(--c-ok-bg);color:var(--c-ok)}

html[data-tone=night]:not(#n):not(#n){
  color-scheme:dark;
  /* surfaces, from the page inward */
  --c-bg:#0b1220;           /* the page */
  --c-panel:#142033;        /* cards, sheets, menus, the chat */
  --c-raised:#1c2b42;       /* fields, sub-panels, chips sitting on a panel */
  --c-soft:#243752;         /* a selected or hovered thing on a panel */
  /* text */
  --c-text:#f1f5fa;
  --c-muted:#b9c7d9;
  /* lines */
  --c-line:#2f405c;         /* quiet dividers and card edges */
  --c-edge:#687b94;         /* the border of a control (at least 3:1 on a panel) */
  /* actions and links */
  --c-action:#f1c66b; --c-on-action:#182235; --c-action-hover:#f6d487; --c-action-shadow:#a98a3c;
  --c-link:#a8dfc5;
  /* states */
  --c-danger:#ff8c86; --c-danger-bg:#3a2230; --c-danger-solid:#b3261e; --c-on-danger:#fff7f6;
  --c-warn:#f6d58f;   --c-warn-bg:#3a3120;
  --c-ok:#8fdcb4;     --c-ok-bg:#18352f;
  --c-info:#9cc8f0;   --c-info-bg:#1b3350;
  --c-self:#ff8c86;         /* "this is you" */
  --c-focus:#f1c66b;
  --c-shadow:#0009;         /* the shadow under a sheet or a pop-up */
  --c-scrim:#02060ccc;      /* what dims the page behind a sheet */
  --c-on-self:#2a0f0e;      /* text on the red "you" mark */
  --c-brand-tile:#fff8ec;    /* the cream tile the colour symbol of the brand sits on (it is dark green, so it needs a light ground) */
  /* the names the older stylesheets use */
  --ink:var(--c-text); --muted:var(--c-muted); --paper:var(--c-panel); --bg:var(--c-bg); --line:var(--c-line);
  --bad:var(--c-danger); --good:var(--c-ok); --fill:var(--c-raised);
  --gender-m:#8cc4f4; --gender-f:#f4a0cb; --gender-n:#b9c7d9;
  background:var(--c-bg);
}
html[data-tone=night]:not(#n):not(#n) body,html[data-tone=night]:not(#n):not(#n) body.accounts{
  --ui-ink:var(--c-text); --ui-muted:var(--c-muted); --ui-cream:var(--c-bg); --ui-border:var(--c-line); --ui-green:var(--c-link); --ui-green-2:var(--c-link);
  --green:var(--c-link); --paper:var(--c-panel); --ink:var(--c-text); --muted:var(--c-muted); --line:var(--c-line);
  background:var(--c-bg); color:var(--c-text);
}
html[data-tone=night]:not(#n):not(#n) :focus-visible{outline-color:var(--c-focus)}

/* ---------- the page frame ---------- */
html[data-tone=night]:not(#n):not(#n) :is(.sh,.sh>.sh-main){background:var(--c-bg);color:var(--c-text);box-shadow:none}
html[data-tone=night]:not(#n):not(#n) .sh-main .sh-main{background:transparent}
html[data-tone=night]:not(#n):not(#n) :is(.sh-top,.sh-nav,.room-top,.topbar){background:var(--c-panel);color:var(--c-text);border-color:var(--c-line);box-shadow:none}
html[data-tone=night]:not(#n):not(#n) :is(.sh-logo,.cozy-brand,.sh-title,.sh-h1,.sh-h2,.sh-eyebrow,.sh-section-label,.cozy-section-heading h2,.rooms-greeting,.rank-heading h1,.profile-name,.pe-name,.pe-head h2){color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) :is(.sh-small,.sh-muted,.muted,.hint,.section-note,.pe-hint,.pe-kind,.rank-heading p,.rank-live,.cozy-empty,.cozy-empty span,.sh-fld .hint,.sh-nav a,.sh-check span,.sh-person-row small,.sh-rm small,.choice-arrow){color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) :is(.sh-nav a[aria-current=page]){background:var(--c-soft);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) :is(a,.pe-link,.cozy-section-heading a,.sh-summary-link){color:var(--c-link)}
html[data-tone=night]:not(#n):not(#n) :is(.welcome-title h1,.welcome-title p,.welcome-title>span,.welcome-identity,.welcome-identity b){color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) :is(.cozy-help,.cozy-login,.sh-back,.sh-icon-button){background:var(--c-raised);color:var(--c-text);border-color:var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .sh-mark{background:var(--c-brand-tile);border-radius:12px;padding:3px}
html[data-tone=night]:not(#n):not(#n) .sh-mark.big{border-radius:22px;padding:8px}
html[data-tone=night]:not(#n):not(#n) a.cozy-brand,html[data-tone=night]:not(#n):not(#n) a.sh-logo{color:var(--c-text)}

/* ---------- surfaces ---------- */
html[data-tone=night]:not(#n):not(#n) :is(.sh-card,.sh-card.soft,.sh-list,.sh-li,.sh-rm,.sh-table,.sh-person-card,.sh-badge-card,.sh-stat>div,.sh-fold,.sh-sw,.sh-podium-member,.sh-ranking-podium,.ranking-summary>div,.volume-control,.village-choice,.cozy-notice,.sh-friends-empty,.sh-soon,.sh-summary-link,.guest-characters,.invite-intro){background:var(--c-panel);color:var(--c-text);border-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) :is(.sh-sheet,dialog,.room-sheet){background:var(--c-panel);color:var(--c-text);border-color:var(--c-line);box-shadow:0 -10px 40px var(--c-shadow)}
html[data-tone=night]:not(#n):not(#n) .sh-sheet-wrap{background:var(--c-scrim)}
html[data-tone=night]:not(#n):not(#n) dialog::backdrop{background:var(--c-scrim)}
html[data-tone=night]:not(#n):not(#n) .sh-sheet .grab{background:var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) :is(.sh-sheet .x,.pe-x,dialog .close){color:var(--c-text);background:transparent}
html[data-tone=night]:not(#n):not(#n) .sh-skel{background:var(--c-raised)}
html[data-tone=night]:not(#n):not(#n) .sh-rm.me,html[data-tone=night]:not(#n):not(#n) .sh-li.me{background:var(--c-soft);border-color:var(--c-link)}

/* ---------- buttons ---------- */
html[data-tone=night]:not(#n):not(#n) :is(.sh-btn,.play-button){background:var(--c-action);color:var(--c-on-action);border-color:var(--c-action);box-shadow:none}
html[data-tone=night]:not(#n):not(#n) :is(.sh-btn.sec,.sh-btn.play-button.sec){background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .sh-btn.ghost{background:transparent;color:var(--c-link);border:1px solid var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .sh-btn.danger{background:var(--c-danger-bg);color:var(--c-danger);border:1px solid var(--c-danger)}
html[data-tone=night]:not(#n):not(#n) :is(.sh-btn,button):disabled{opacity:.55}
html[data-tone=night]:not(#n):not(#n) .sh-li.danger{color:var(--c-danger);background:var(--c-panel)}
html[data-tone=night]:not(#n):not(#n) .sh-sheet button.sh-li.danger{color:var(--c-danger);background:transparent}
html[data-tone=night]:not(#n):not(#n) .sh-sheet button.sh-li.danger .arrow{color:inherit}
html[data-tone=night]:not(#n):not(#n) .map-chip.wolf-sick{background:var(--c-danger-bg);color:var(--c-danger);border-color:var(--c-danger)}
html[data-tone=night]:not(#n):not(#n) .sh-toggle{background:var(--c-raised);border-color:var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .sh-toggle[aria-pressed=true]{background:var(--c-link);border-color:var(--c-link)}

/* ---------- fields ---------- */
html[data-tone=night]:not(#n):not(#n) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) ::placeholder{color:var(--c-muted);opacity:1}
html[data-tone=night]:not(#n):not(#n) .sh-fld{color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) .sh-pw button{background:transparent;color:var(--c-link)}

/* ---------- tabs, segments, chips ---------- */
html[data-tone=night]:not(#n):not(#n) .sh-tabs{background:var(--c-raised);border-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .sh-tabs button{background:transparent;color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) .sh-tabs button[aria-selected=true]{background:var(--c-soft);color:var(--c-text);border:1px solid var(--c-link)}
html[data-tone=night]:not(#n):not(#n) .sh-seg button{background:var(--c-raised);color:var(--c-text);border:2px solid var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .sh-seg button[aria-pressed=true]{background:var(--c-soft);border-color:var(--c-link);color:var(--c-text);box-shadow:none}
html[data-tone=night]:not(#n):not(#n) .sh-seg button.m[aria-pressed=true]{border-color:var(--gender-m)}
html[data-tone=night]:not(#n):not(#n) .sh-seg button.f[aria-pressed=true]{border-color:var(--gender-f)}
html[data-tone=night]:not(#n):not(#n) .sh-seg button.n[aria-pressed=true]{border-color:var(--gender-n)}
html[data-tone=night]:not(#n):not(#n) .sh-chip{background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .sh-chip.g{background:var(--c-ok-bg);color:var(--c-ok);border-color:var(--c-ok)}
html[data-tone=night]:not(#n):not(#n) .sh-chip.a{background:var(--c-warn-bg);color:var(--c-warn);border-color:var(--c-warn)}
html[data-tone=night]:not(#n):not(#n) .sh-chip.r{background:var(--c-danger-bg);color:var(--c-danger);border-color:var(--c-danger)}
html[data-tone=night]:not(#n):not(#n) .sh-note.unread{background:var(--c-soft);border-color:var(--c-link)}
html[data-tone=night]:not(#n):not(#n) .sh-dot{border-color:var(--c-panel)}
html[data-tone=night]:not(#n):not(#n) .sh-count{background:var(--c-danger-solid);color:var(--c-on-danger)}
html[data-tone=night]:not(#n):not(#n) .sh-bell{background:transparent;color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) .sh-list.sh-people{background:transparent;border-color:transparent;box-shadow:none}
html[data-tone=night]:not(#n):not(#n) :is(.sh-guest,.gt){background:var(--c-info-bg);color:var(--c-info);border:1px solid var(--c-info)}

/* ---------- notices ---------- */
html[data-tone=night]:not(#n):not(#n) a.sh-btn{color:var(--c-on-action)}
html[data-tone=night]:not(#n):not(#n) a.sh-btn.sec{color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) a.sh-btn.ghost{color:var(--c-link)}
html[data-tone=night]:not(#n):not(#n) :is(.sh-card.warn,.warn){background:var(--c-warn-bg);color:var(--c-warn);border-color:var(--c-warn)}
html[data-tone=night]:not(#n):not(#n) :is(.sh-card.err,.err){background:var(--c-danger-bg);color:var(--c-danger);border-color:var(--c-danger)}
html[data-tone=night]:not(#n):not(#n) :is(.sh-card.info,.info){background:var(--c-info-bg);color:var(--c-info);border-color:var(--c-info)}
html[data-tone=night]:not(#n):not(#n) :is(.sh-card.warn,.sh-card.err,.sh-card.info) :is(h3,p,b,small,.sh-muted,.sh-small){color:inherit}

/* ---------- ranking ---------- */
html[data-tone=night]:not(#n):not(#n) .rank-mine{border-color:var(--c-self);background:var(--c-raised)}
html[data-tone=night]:not(#n):not(#n) .rank-you{background:var(--c-self);color:var(--c-on-self)}
html[data-tone=night]:not(#n):not(#n) .rank-strip>div{background:var(--c-panel);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) .rank-bar{background:var(--c-raised);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) .sh-podium-member.me{border-color:var(--c-self);background:var(--c-raised)}
html[data-tone=night]:not(#n):not(#n) .sh-ranking-podium .sh-podium-member:first-child{background:var(--c-warn-bg);border-color:var(--c-warn)}

/* ---------- the shared profile panel ---------- */
html[data-tone=night]:not(#n):not(#n) .pe{color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) :is(.pe-pick,.pe-upload){background:var(--c-raised);color:var(--c-text);border-color:var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .pe-photos{background:var(--c-raised)}
html[data-tone=night]:not(#n):not(#n) .pe-avs button[aria-pressed=true]{border-color:var(--c-link)}
html[data-tone=night]:not(#n):not(#n) .pe-fld textarea{background:var(--c-raised);color:var(--c-text);border-color:var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .pe-chip span{background:var(--c-raised);color:var(--c-text);border-color:var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .pe-chip input:checked+span{background:var(--c-soft);border-color:var(--c-link)}
html[data-tone=night]:not(#n):not(#n) .pe-more summary{color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) .pe-stats>div{background:var(--c-raised);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) .pe-note{background:var(--c-raised);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) .pe-error{color:var(--c-danger)}
html[data-tone=night]:not(#n):not(#n) .pe-save,html[data-tone=night]:not(#n):not(#n) .pe-keep{background:var(--c-action);color:var(--c-on-action)}
html[data-tone=night]:not(#n):not(#n) .pe-leave{background:var(--c-warn-bg);color:var(--c-warn);border-color:var(--c-warn)}
html[data-tone=night]:not(#n):not(#n) .pe-drop{background:var(--c-danger-bg);color:var(--c-danger)}

/* ---------- the room: frame, phase bar, lobby ---------- */
html[data-tone=night]:not(#n):not(#n) body.accounts :is(.room-top,.village-panel,.village-stack){background:var(--c-bg);color:var(--c-text);border-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) body.accounts :is(.room-top h1,.room-name,.room-heading h1,#village-name,.room-summary,#room-summary){color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) body.accounts :is(.room-top small,.room-heading small){color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) body.accounts :is(.room-actions button,.room-menu-btn,#share,#menu){background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-edge);box-shadow:none}
html[data-tone=night]:not(#n):not(#n) .offline-banner{background:var(--c-warn-bg);color:var(--c-warn);border-color:var(--c-warn)}
html[data-tone=night]:not(#n):not(#n) body.accounts .phase-bar{background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-line);box-shadow:none}
html[data-tone=night]:not(#n):not(#n) body.accounts .phase-bar :is(small,#phase-hint,.phase-hint){color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) body.accounts .phase-bar :is(strong,b,#phase-title,#clock,.clock){color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) body.accounts :is(.phase-action,.phase-host-actions button,.sound-toggle){background:var(--c-panel);color:var(--c-text);border:1px solid var(--c-edge);box-shadow:none}
html[data-tone=night]:not(#n):not(#n) body.accounts .phase-action.start{background:var(--c-action);color:var(--c-on-action);border-color:var(--c-action)}
html[data-tone=night]:not(#n):not(#n) body.accounts .phase-action:disabled{opacity:.55}
html[data-tone=night]:not(#n):not(#n) body.accounts :is(.lobby-ready button,#ready-list,#ready-toggle){background:var(--c-panel);color:var(--c-text);border:1px solid var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) body.accounts .lobby-ready button.is-ready{background:var(--c-ok-bg);color:var(--c-ok);border-color:var(--c-ok)}
html[data-tone=night]:not(#n):not(#n) body.accounts :is(.map-foot,.deck-strip,.seer-bar,.verdict-bar){background:var(--c-panel);color:var(--c-text);border-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) body.accounts :is(.deck-strip small,.seer-bar small,.verdict-bar small,.deck-label){color:var(--c-muted)}

/* ---------- the chat ---------- */
html[data-tone=night]:not(#n):not(#n) body.accounts :is(.chat-panel,.chat-title,.chat-messages,.chat-form){background:var(--c-panel);color:var(--c-text);border-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) body.accounts .chat-title h2{color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) body.accounts :is(.chat-title small,.chat-messages .empty,.message time){color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) body.accounts .chat-tab{background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) body.accounts .chat-tab.active{background:var(--c-soft);color:var(--c-text);border-color:var(--c-link)}
html[data-tone=night]:not(#n):not(#n) body.accounts :is(.message>div,.message-body){background:var(--c-raised);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) body.accounts .message.me>div{background:var(--c-soft)}
html[data-tone=night]:not(#n):not(#n) body.accounts .message-body strong{color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) body.accounts .system-message{background:var(--c-raised);color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) body.accounts .chat-form button.primary,html[data-tone=night]:not(#n):not(#n) body.accounts #chat-send{background:var(--c-action);color:var(--c-on-action)}
html[data-tone=night]:not(#n):not(#n) body.accounts .chat-form input{background:var(--c-raised);color:var(--c-text);border-color:var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) body.accounts .chat-form :is(.chat-switch,.chat-mic){background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-edge)}

/* ---------- plain controls: the base a component starts from (weight of a bare element, so any component rule still wins) ---------- */
:where(html[data-tone=night]) button{background:var(--c-raised);color:var(--c-text)}
:where(html[data-tone=night]) :is(input,textarea,select){background:var(--c-raised);color:var(--c-text);border-color:var(--c-edge)}
:where(html[data-tone=night]) small{color:var(--c-muted)}

/* ---------- pop-ups on the village and the sheets above it ---------- */
html[data-tone=night]:not(#n):not(#n) .scene{background:var(--c-panel);color:var(--c-text);border-color:var(--c-edge);box-shadow:0 8px 30px var(--c-shadow)}
html[data-tone=night]:not(#n):not(#n) .scene p{color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) .scene-close,html[data-tone=night]:not(#n):not(#n) .announce-close{background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-edge);box-shadow:none}
html[data-tone=night]:not(#n):not(#n) dialog .close{color:var(--c-muted);border-radius:12px}
html[data-tone=night]:not(#n):not(#n) dialog.room-sheet #dialog-content>h2:first-child{background:var(--c-panel);color:var(--c-text);border-bottom-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) dialog.room-sheet :is(.menu-list,.host-menu) button{background:transparent;color:var(--c-text);border-bottom-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) dialog.room-sheet :is(.menu-list,.host-menu) button:hover{background:var(--c-soft)}
html[data-tone=night]:not(#n):not(#n) .menu-symbol{background:var(--c-raised);color:var(--c-link);border:1px solid var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .room-menu-row small,html[data-tone=night]:not(#n):not(#n) dialog.room-sheet .room-menu-row.danger small{color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) dialog.room-sheet :is(.menu-list,.host-menu) button.danger{background:transparent;color:var(--c-danger)}
html[data-tone=night]:not(#n):not(#n) .room-menu-row.danger .menu-symbol{background:var(--c-danger-bg);color:var(--c-danger);border-color:var(--c-danger)}
html[data-tone=night]:not(#n):not(#n) .room-menu-extra summary{color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) .card-status{background:var(--c-raised);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) .house-card :is(.card-meta small,small){color:var(--c-muted)}

/* ---------- the main action of a sheet, and the sheets about roles and the Host ---------- */
html[data-tone=night]:not(#n):not(#n) button.primary{background:var(--c-action);color:var(--c-on-action);border-color:var(--c-action)}
html[data-tone=night]:not(#n):not(#n) button.primary:hover:not(:disabled){background:var(--c-action-hover)}
html[data-tone=night]:not(#n):not(#n) .role-tabs{background:var(--c-raised);border-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .role-tabs button{background:transparent;color:var(--c-muted);border:0}
html[data-tone=night]:not(#n):not(#n) .role-tabs button[aria-selected=true]{background:var(--c-soft);color:var(--c-text);border:1px solid var(--c-link)}
html[data-tone=night]:not(#n):not(#n) .role-card{background:var(--c-raised);border-color:var(--c-line);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) .role-card.mine{background:var(--c-danger-bg);border-color:var(--c-danger);box-shadow:none}
html[data-tone=night]:not(#n):not(#n) .role-card small{color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) :is(.role-sec,.host-note){background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .guide-intro{color:var(--c-muted)}

/* ---------- a risky choice stays red, the quiet words around it stay readable ---------- */
html[data-tone=night]:not(#n):not(#n) button.danger{background:var(--c-danger-solid);color:var(--c-on-danger);border-color:var(--c-danger-solid)}
html[data-tone=night]:not(#n):not(#n) .verdict-person img{border-color:var(--c-danger)}
html[data-tone=night]:not(#n):not(#n) :is(.abstain-link,.verdict-clock,#dialog-clock){color:var(--c-muted)}

/* ---------- panels (setup forms, the result of a game) ---------- */
html[data-tone=night]:not(#n):not(#n) .panel{background:var(--c-panel);color:var(--c-text);border:1px solid var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .panel :is(h2,h3,h4){color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) .result-note{color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) .result-row{background:var(--c-raised);color:var(--c-text);border-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .result-row small{color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) .result-row.won{background:var(--c-warn-bg);border-color:var(--c-warn)}
html[data-tone=night]:not(#n):not(#n) .tag{background:var(--c-soft);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) .tag.win{background:var(--c-warn-bg);color:var(--c-warn);box-shadow:inset 0 0 0 1px var(--c-warn)}
html[data-tone=night]:not(#n):not(#n) .tag.alive{background:var(--c-ok-bg);color:var(--c-ok)}
html[data-tone=night]:not(#n):not(#n) .tag.dead{background:var(--c-danger-bg);color:var(--c-danger)}

/* ---------- the Host's game setup ---------- */
html[data-tone=night]:not(#n):not(#n) .setup-count{background:var(--c-raised);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) .deck-card{background:var(--c-raised);border-color:var(--c-line);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) .plan-box{background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .setup-readiness{background:var(--c-warn-bg);color:var(--c-warn)}
html[data-tone=night]:not(#n):not(#n) .setup-readiness.ready{background:var(--c-ok-bg);color:var(--c-ok)}
html[data-tone=night]:not(#n):not(#n) .game-setup .setup-actions,html[data-tone=night]:not(#n):not(#n) .host-actions.setup-actions{background:var(--c-panel);box-shadow:0 -8px 12px var(--c-panel)}
html[data-tone=night]:not(#n):not(#n) :is(.section-note,#dialog-content .section-note){color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) .setup-advanced{border-color:var(--c-line)}

/* ---------- the rules sheet, tick boxes ---------- */
:where(html[data-tone=night]) :is(input[type=checkbox],input[type=radio]){accent-color:var(--c-link)}
html[data-tone=night]:not(#n):not(#n) .rule-section{background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .event-card{background:var(--c-raised);color:var(--c-text);border-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .event-card:hover:not(:disabled){border-color:var(--c-link)}

/* ---------- smaller surfaces that were still cream: lists, guide entries, stages, chips ---------- */
html[data-tone=night]:not(#n):not(#n) :is(.result-list>div,.private-role,.guide-role,.guide-count,.reference-role h3 small,.stats-summary,.stats-empty,.event-effect,.public-role,.role-guide-trigger,.stat-cards div,.deck-chip,.plan-use,.photo-pick,.role-back,.mood-chip span,.room-item,.room-state,.notice,.mood,.profile-card,.profile-card.open-seat,.connection){background:var(--c-raised);color:var(--c-text);border-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) :is(.profile-card.picked,.mood-chip input:checked+span){background:var(--c-soft);border-color:var(--c-link)}
html[data-tone=night]:not(#n):not(#n) :is(.guide-role dd,.invite-meta,.profile-card .status,.profile-card.open-seat .status,.reference-role h3 small){color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) :is(.guide-faction,.link-button){color:var(--c-link)}
html[data-tone=night]:not(#n):not(#n) :is(.dice-stage,.hunter-stage,.hunter-stage-tab,.dice-result,.mobile-shortcuts){background:var(--c-panel);color:var(--c-text);border-color:var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .dice-pair{color:var(--c-warn)}
html[data-tone=night]:not(#n):not(#n) .room-state.open{background:var(--c-ok-bg);color:var(--c-ok)}
html[data-tone=night]:not(#n):not(#n) :is(.pending-names,.connection.offline){background:var(--c-warn-bg);color:var(--c-warn)}
html[data-tone=night]:not(#n):not(#n) .name-dialog input{background:var(--c-raised);color:var(--c-text);border-color:var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .host-row button:disabled{background:var(--c-raised);color:var(--c-muted);opacity:.6}
html[data-tone=night]:not(#n):not(#n) .eyebrow{color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) button.secondary{background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .sh-dob select{background:var(--c-raised);color:var(--c-text);border-color:var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .cursed-state{background:var(--c-raised);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) input[type=range]{background:transparent;border:0;box-shadow:none;accent-color:var(--c-link)}
html[data-tone=night]:not(#n):not(#n) .ready-roster>div{border-bottom-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .ready-roster span{color:var(--c-muted)}

/* ---------- little labels that sat on a light chip ---------- */
html[data-tone=night]:not(#n):not(#n) .message .dead-label{background:var(--c-soft);color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) .seer-bar .check{background:var(--c-ok-bg);color:var(--c-ok);border-color:var(--c-ok)}
html[data-tone=night]:not(#n):not(#n) .seer-bar .check.wolf{background:var(--c-danger-bg);color:var(--c-danger);border-color:var(--c-danger)}
html[data-tone=night]:not(#n):not(#n) .guide-availability{background:var(--c-ok-bg);color:var(--c-ok)}
html[data-tone=night]:not(#n):not(#n) .guide-availability.unavailable{background:var(--c-raised);color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) .room-actions #leave-room{background:var(--c-danger-bg);color:var(--c-danger)}
html[data-tone=night]:not(#n):not(#n) #guest-preview{background:radial-gradient(ellipse at 50% 65%,var(--c-soft),transparent 65%)}
html[data-tone=night]:not(#n):not(#n) .rank-personal{background:var(--c-raised);border-color:var(--c-line);color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) :is(.rank-personal p,.rank-position small,.rank-method){color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) .rank-personal :is(h2,.rank-position b){color:var(--c-text)}

/* ---------- the + / - buttons of the Host's card setup ---------- */
html[data-tone=night]:not(#n):not(#n) .stepper .step{background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .stepper .step:active{background:var(--c-soft)}

/* ---------- rename inside the profile panel ---------- */
html[data-tone=night]:not(#n):not(#n) .pe-rename{background:var(--c-raised);border-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .pe-rename input{background:var(--c-panel);color:var(--c-text);border-color:var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .pe-rn-save{background:var(--c-action);color:var(--c-on-action);border:1px solid var(--c-action)}
html[data-tone=night]:not(#n):not(#n) .pe-rn-cancel{background:var(--c-panel);color:var(--c-text);border:1px solid var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .pe-rn-error{color:var(--c-danger)}
/* chat with a friend */
html[data-tone=night]:not(#n):not(#n) .sh-dm{background:var(--c-raised);color:var(--c-text);border-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) .sh-dm.mine{background:var(--c-soft);border-color:var(--c-link)}
html[data-tone=night]:not(#n):not(#n) :is(.sh-dm time,.sh-dm-day,.sh-dm-empty){color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) .sh-dm-form input{background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .sh-chatbtn{color:var(--c-link);border-color:var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) .sh-person-row .grow small.unread{color:var(--c-text)}

html[data-tone=night]:not(#n):not(#n) .bot-roster>div{border-color:var(--c-edge)}

html[data-tone=night]:not(#n):not(#n) :is(.bot-roster button,#lobby-bots){background:var(--c-raised);color:var(--c-text);border:1px solid var(--c-edge)}
html[data-tone=night]:not(#n):not(#n) :is(#bot-add-form button,#practice-role-form button){background:var(--c-action);color:var(--c-on-action)}

/* The room's sound sheet (room-sound.js). */
html[data-tone=night]:not(#n):not(#n) .rs-row{border-bottom-color:var(--c-line)}
html[data-tone=night]:not(#n):not(#n) :is(.rs-title b,.rs-volume output){color:var(--c-text)}
html[data-tone=night]:not(#n):not(#n) :is(.rs-title small,.rs-end){color:var(--c-muted)}
html[data-tone=night]:not(#n):not(#n) .rs-icon{color:var(--c-link)}