/* Pyradice's sandstone, ivory and burgundy become amber-lit papers over an
   evening plum/umber table. Paper text stays dark; portrait art is unfiltered. */
:root {
  --table: #30232a;
  --paper: #f2dfbc;
  --linen: #e5ceaa;
  --paper-hover: #e3c594;
  --ink: #3b2820;
  --muted: #654a3e;
  --forest: #682a3d;
  --burgundy: #8f2446;
  --rust: #9f4530;
  --green: #315b3b;
  --edge: #8b694c;
  --pale: #c5a781;
  --table-ink: #f7e7cf;
  --table-muted: #dfc2a3;
  --table-heading: #f1cf9c;
  --table-accent: #eaa176;
  --table-edge: #b5906f;
  --mark-impossible-bg: #e6c3b5;
  --mark-impossible-ink: #842d2b;
  --mark-possible-bg: #efd09b;
  --mark-possible-ink: #674308;
  --mark-certain-bg: #d3dec5;
  --mark-certain-ink: #31513a;
  color: var(--ink);
  background: var(--table);
  color-scheme: light;
}

body {
  color: var(--table-ink);
  background: radial-gradient(ellipse at 20% 0%, #a86c3930, transparent 58%),
    linear-gradient(140deg, #40282f, #2b2027 55%, #392a25);
}

h1, h2, h3 {
  color: var(--table-heading);
}

button, input, select, textarea {
  color: var(--ink);
}

button:hover:not(:disabled) {
  background: var(--paper-hover);
}

button.primary {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff2de;
}

button.primary:hover:not(:disabled) {
  background: #a73555;
}

button.secondary {
  background: var(--forest);
  color: #fff2de;
}

button.confirm {
  background: var(--green);
  border-color: var(--green);
  color: #fff2de;
}

button.confirm:hover:not(:disabled) {
  background: #24472e;
}

input, select, textarea {
  background: #fff1d7;
  border-color: var(--edge);
  accent-color: var(--burgundy);
}

input:focus, textarea:focus {
  background: #fff8e9;
}

input::placeholder, textarea::placeholder {
  color: var(--muted);
}

:focus-visible {
  outline-color: var(--table-heading);
}

.topbar {
  border-color: var(--table-edge);
}

.brand, .brand:hover {
  color: var(--table-heading);
  background: transparent;
}

.brand-thread, .title-stitch {
  border-color: var(--table-accent);
}

.tools > button {
  color: var(--table-ink);
}

.tools > button:hover {
  background: #5b3d43;
  border-color: var(--table-edge);
}

.tools .flag[aria-pressed='true'] {
  background: var(--paper);
  border-color: var(--table-heading);
  color: var(--ink);
}

#connection, .welcome-line, .intro, .entry-footnote,
.cast-strip > p, .lobby-intro > p, .lobby-seat p,
.lobby-actions p, .roll-heading p, .turn-banner p,
.own-class p, .notebook-intro, .score-heading p, .tie-note {
  color: var(--table-muted);
}

.empty-seat {
  color: var(--table-muted);
  border-color: var(--table-edge);
}

.empty-seat .chair {
  border-color: var(--table-edge);
}

.classmate {
  border-color: var(--table-edge);
}

.classmate h3 {
  color: var(--table-ink);
}

.classmate p {
  color: var(--table-muted);
}

.classmate.active {
  border-color: var(--table-accent);
}

.turn-banner {
  border-color: var(--table-edge);
}

.turn-banner .active-name, .score-narration {
  color: var(--table-heading);
}

.round-token {
  background: #5b3d43;
  border-color: var(--table-edge);
  color: var(--table-ink);
}

.round-token.current {
  background: var(--burgundy);
  border-color: var(--table-heading);
  color: #fff2de;
}

.round-token.past {
  background: #504038;
  color: var(--table-muted);
  opacity: 1;
}

.table-tabs {
  border-color: var(--table-edge);
}

.table-tabs button {
  color: var(--table-ink);
}

.table-tabs button:hover:not([aria-selected='true']) {
  background: #5b3d43;
  color: var(--table-ink);
}

.table-tabs button[aria-selected='true'] {
  background: var(--burgundy);
  border-color: var(--table-heading);
  color: #fff2de;
}

:is(.entry-paper, .action-paper, .clue-book, .scoresheet, .pupil-opponent,
    .pupil-guess-record, .theory-dock, .turn-action-bar, .turn-notice button,
    .result-player, .pupil-card, .notebook-table, dialog) {
  color: var(--ink);
  border-color: var(--edge);
}

:is(.entry-paper, .action-paper, .clue-book, .scoresheet, .pupil-opponent,
    .pupil-guess-record, .theory-dock, .turn-action-bar, .turn-notice button,
    .result-player, .notebook-table, dialog) :is(h1, h2, h3) {
  color: var(--forest);
}

:is(.entry-paper, .action-paper, .clue-book, .scoresheet, .pupil-opponent,
    .pupil-guess-record, .theory-dock, .turn-action-bar, .turn-notice button,
    .result-player, .pupil-card, .notebook-table, dialog) :focus-visible {
  outline-color: var(--burgundy);
}

.entry-paper {
  border-color: var(--edge);
  box-shadow: 4px 12px 30px #140f1655;
}

.entry-paper::after {
  border-color: var(--edge);
}

.entry-paper .welcome-line {
  color: var(--muted);
}

.entry-portraits figure, .lobby-seat img {
  box-shadow: 3px 9px 17px #140f1659;
}

.pupil-card {
  background: var(--paper);
}

.pupil-card:hover {
  background: #f8e9cd;
}

.pupil-state, .paper-note {
  color: var(--muted);
}

.theory-dock {
  background: #e7cfaa;
}

.theory-slot {
  background: var(--linen);
  border-color: var(--edge);
}

.theory-slot > span {
  color: var(--muted);
}

.theory-slot.drop-legal {
  background: var(--mark-certain-bg);
  border-color: var(--green);
}

.ready-list span, .score-detail span {
  background: var(--linen);
  color: var(--ink);
}

.ready-list .ready {
  background: var(--mark-certain-bg);
  color: var(--mark-certain-ink);
}

.notebook-table, .notebook-table th, .notebook-table td {
  color: var(--ink);
  border-color: var(--edge);
}

.notebook-table th {
  background: var(--linen);
}

.note-mark[data-value='1'], .alphabet-table .note-mark[data-value='1'] {
  background: var(--mark-impossible-bg);
  color: var(--mark-impossible-ink);
}

.note-mark[data-value='2'], .alphabet-table .note-mark[data-value='2'] {
  background: var(--mark-possible-bg);
  color: var(--mark-possible-ink);
}

.note-mark[data-value='3'], .alphabet-table .note-mark[data-value='3'] {
  background: var(--mark-certain-bg);
  color: var(--mark-certain-ink);
}

.alphabet-table .note-mark:disabled[data-value='3'],
.pupil-letter:disabled[data-value='3'] {
  border-color: var(--green);
}

.board-column > .notes-area, .pupil-sheet > .notes-area {
  color: var(--table-ink);
}

.board-column > .notes-area p, .pupil-sheet > .notes-area p,
.pupil-sheet-heading p, .pupil-sheet > .pupil-sheet-controls {
  color: var(--table-muted);
}

.pupil-sheet-heading, .pupil-sheet > .pupil-sheet-controls {
  color: var(--table-ink);
}

.pupil-sheet > .notes-area, .pupil-sheet-controls {
  border-color: var(--table-edge);
}

.turn-action-bar, .turn-notice button {
  background: var(--paper);
  border-color: var(--forest);
}

.turn-action-bar.end-cue, .end-notice button {
  border-color: var(--rust);
}

.end-cue h3, .end-notice strong {
  color: var(--rust);
}

.turn-notice strong {
  color: var(--forest);
}

.turn-notice .turn-message {
  color: var(--ink);
}

.turn-notice small, .turn-action-copy p {
  color: var(--muted);
}

.action-arrow, .turn-seat-arrow {
  color: var(--table-accent);
}

:is(.action-paper, .turn-action-bar, .theory-dock) .action-arrow {
  color: var(--rust);
}

.result-player.winner {
  border-color: var(--burgundy);
}

.result-player .winner-label {
  color: var(--burgundy);
}

dialog {
  background: var(--paper);
  box-shadow: 5px 16px 50px #100b176b;
}

dialog::backdrop {
  background: #1f1426c9;
}

dialog a {
  color: var(--forest);
}

#toast {
  background: #682a3d;
  color: #fff2de;
  border: 1px solid var(--table-heading);
}

/* Portrait selection uses the same printed-card treatment as the game cards. */
.entry-avatar > img {
  border-color: var(--forest);
}

.entry-avatar span {
  color: var(--muted);
}

.entry-avatar strong {
  color: var(--forest);
}

.avatar-choice {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--edge);
}

.avatar-choice[aria-pressed='true'] {
  border-color: var(--burgundy);
}

.brand:hover:not(:disabled) {
  background: transparent;
}

button.secondary:hover:not(:disabled) {
  background: #4f2030;
  color: #fff2de;
}

.lobby-seat button.text-button {
  color: var(--table-ink);
}

.lobby-seat button.text-button:hover:not(:disabled) {
  background: #5b3d43;
}

.revealed-letters span {
  color: var(--ink);
}

.letter-choice.selected:hover:not(:disabled) {
  background: #4f2030;
  color: var(--paper);
}

.pupil-card.face-down {
  background: var(--forest);
}

@media (forced-colors: active) {
  .avatar-choice[aria-pressed='true'] {
    border-color: Highlight;
  }

  :focus-visible {
    outline-color: Highlight;
  }
}