/* The interface themes (Settings > Display > Theme, or the menu's palette button; ui/theme.js).
   A theme changes how the interface looks, never where anything is: the colours, the frames
   (render/frames.js draws each theme's with the same slices), the fonts and a few finishing touches.
     copper  : the default (styles/main.css).
     gothic  : the old Eriband's dark gothic tabletop. Charcoal, thin dark edges, bronze corner
               ornaments, small-caps serif titles, crimson for the main action, gold highlights.
     village : the first Eriband's retro village tabletop. Parchment cards with ink outlines and
               hard shadows, little wooden blocks for buttons, gold for the main action. */

/* Alegreya and Alegreya SC (SIL Open Font License, assets/fonts/LICENSE-alegreya*.txt), sized to
   sit where the pixel fonts sit, so nothing moves: titles, buttons, text and numbers. */
@font-face { font-family: 'Gothic Title'; src: url('../assets/fonts/alegreya-sc-700.woff2') format('woff2'); font-weight: 100 900; size-adjust: 125%; font-display: swap; }
@font-face { font-family: 'Gothic Caps'; src: url('../assets/fonts/alegreya-sc-700.woff2') format('woff2'); font-weight: 100 900; size-adjust: 90%; font-display: swap; }
@font-face { font-family: 'Gothic Text'; src: url('../assets/fonts/alegreya.woff2') format('woff2'); font-weight: 400 900; size-adjust: 108%; font-display: swap; }
@font-face { font-family: 'Gothic Digits'; src: url('../assets/fonts/alegreya-sc-700.woff2') format('woff2'); font-weight: 100 900; size-adjust: 74%; font-display: swap; }

/* ================================================================ gothic */

:root[data-theme='gothic'] {
  --bg: #0c0b0f;
  --bg-2: #111015;
  --panel: #18171d;
  --panel-2: #201f26;
  --panel-3: #29282f;
  --inset: #111015;
  --line: #3a3741;
  --copper: #b0773a;
  --copper-hi: #e2a65c;
  --copper-dk: #5d3a1b;
  --teal: #4fd1b5;
  --teal-hi: #93ecd8;
  --teal-dk: #1f7a66;
  --text: #ece5d3;
  --text-2: #b4ac9b;
  --muted: #857e71;
  --red: #a51d20;
  --red-hi: #d4362d;
  --red-dk: #4f0b0d;
  --gold: #e9b949;
  --good: #5fcf6e;
  --bad: #e04a3e;
  --blue: #4c86f0;
  --blue-hi: #8fb6ff;
  --team-red: #e04a3e;
  --team-red-hi: #ff8a7a;
  --font-title: 'Gothic Title', 'Palatino Linotype', Georgia, serif;
  --font-text: 'Gothic Text', 'Palatino Linotype', Georgia, serif;
  --font-num: 'Gothic Digits', 'Gothic Text', Georgia, serif;
  --font-button: 'Gothic Caps', 'Palatino Linotype', Georgia, serif;
  --button-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
  --primary-text: #fbead2;
  --primary-text-shadow: 0 1px 0 #3d0406;
  --button-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  --panel-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  --frame-panel: var(--fr-gothic-panel, none);
  --frame-button: var(--fr-gothic-button, none);
  --frame-button-red: var(--fr-gothic-button-red, none);
  --frame-tab: var(--fr-gothic-tab, none);
  --frame-inset: var(--fr-gothic-inset, none);
  --frame-card: var(--fr-gothic-card, none);
}
:where(:root[data-theme='gothic']) body { font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
/* small caps titles, lit softly instead of the pixel drop */
:where(:root[data-theme='gothic']) .title { letter-spacing: 0.03em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75); }
:where(:root[data-theme='gothic']) .title.teal { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 0 14px rgba(79, 209, 181, 0.25); }
:where(:root[data-theme='gothic']) .title.copper { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75); }
:where(:root[data-theme='gothic']) .h2 { color: var(--copper-hi); letter-spacing: 0.04em; }
:where(:root[data-theme='gothic']) .menu-logo .t1 { letter-spacing: 0.04em; color: #f1e6cc; text-shadow: 0 3px 0 #2a1608, 0 4px 18px rgba(0, 0, 0, 0.9), 0 0 40px rgba(226, 166, 92, 0.3); }
:where(:root[data-theme='gothic']) .menu-logo .t2 { color: var(--copper-hi); }
:where(:root[data-theme='gothic']) .announce { text-shadow: 0 3px 0 #4a2a0a, 0 6px 18px rgba(0, 0, 0, 0.9); }
:where(:root[data-theme='gothic']) .modal .title, :where(:root[data-theme='gothic']) .modal h2 { color: #f1e6cc; }
/* the counters: dark chamfered plates with a bronze rim */
:where(:root[data-theme='gothic']) .cur { background: linear-gradient(180deg, #252229, #131116); border: 1px solid var(--edge, #060508); box-shadow: inset 0 0 0 1px #584e5e; border-radius: 3px; }
:where(:root[data-theme='gothic']) .chip { border-radius: 3px; }
:where(:root[data-theme='gothic']) .bar { border: 1px solid #060508; box-shadow: inset 0 0 0 1px #3b3843; }
:where(:root[data-theme='gothic']) .input { border: 1px solid #060508; box-shadow: inset 0 0 0 1px #3b3843, inset 0 2px 4px rgba(0, 0, 0, 0.5); border-radius: 3px; }
:where(:root[data-theme='gothic']) .input:focus { box-shadow: inset 0 0 0 1px var(--copper-hi); }
:where(:root[data-theme='gothic']) .switch { border-radius: 12px; border: 1px solid #060508; box-shadow: inset 0 0 0 1px #3b3843; }
:where(:root[data-theme='gothic']) .switch::after { border-radius: 50%; }
:where(:root[data-theme='gothic']) .switch.on::after { background: var(--copper-hi); }
:where(:root[data-theme='gothic']) .list-item { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); border-radius: 3px; }
:where(:root[data-theme='gothic']) .roster-hero { background: rgba(17, 16, 21, 0.9); box-shadow: inset 0 0 0 1px #3b3843, 0 4px 12px rgba(0, 0, 0, 0.5); border-radius: 3px; }
:where(:root[data-theme='gothic']) .roster-hero.active { box-shadow: inset 0 0 0 1px var(--teal), 0 0 10px rgba(79, 209, 181, 0.45); }
:where(:root[data-theme='gothic']) .tabs .btn.on::after { background: var(--copper-hi); height: 2px; }
:where(:root[data-theme='gothic']) .divider { background: linear-gradient(90deg, transparent, var(--copper), transparent); height: 1px; }
:where(:root[data-theme='gothic']) .modal-back { background: radial-gradient(ellipse at center, rgba(14, 11, 18, 0.74), rgba(3, 2, 5, 0.93)); }
:where(:root[data-theme='gothic']) .kbd:not(.pad) { border-radius: 3px; }
:where(:root[data-theme='gothic']) .playercard { box-shadow: 0 0 0 1px #060508, 0 0 0 2px var(--copper-dk); }
:where(:root[data-theme='gothic']) * { scrollbar-color: #3d3a45 rgba(0, 0, 0, 0.35); }

/* ================================================================ village */

:root[data-theme='village'] {
  /* outside the parchment (the screen, the battle's HUD): dark wood and light text */
  --bg: #1e120a;
  --bg-2: #2a1a0e;
  --panel: #4a2e1a;
  --panel-2: #5a3a22;
  --panel-3: #6a4528;
  --inset: #2a1a0e;
  --line: #7a4f2c;
  --copper: #c08a52;
  --copper-hi: #f2c14e;
  --copper-dk: #5a3a22;
  --teal: #8ad86a;
  --teal-hi: #bdf0a0;
  --teal-dk: #3a7a2a;
  --text: #f3e6c4;
  --text-2: #dcc8a0;
  --muted: #b89a72;
  --red: #d0463c;
  --red-hi: #e86a5e;
  --red-dk: #8a2420;
  --gold: #f2c14e;
  --good: #7fd068;
  --bad: #f06a5a;
  --blue: #3f74e0;
  --blue-hi: #8fb0f0;
  --team-red: #d0463c;
  --team-red-hi: #f09a90;
  --button-shadow: 0 4px 0 #1e120a;
  --button-text-shadow: 2px 2px 0 #3b2414;
  --primary-text: #3b2414;
  --primary-text-shadow: 1px 1px 0 #ffe9a8;
  --panel-shadow: 6px 6px 0 rgba(20, 10, 4, 0.55);
  --frame-panel: var(--fr-village-panel, none);
  --frame-button: var(--fr-village-button, none);
  --frame-button-red: var(--fr-village-button-red, none);
  --frame-tab: var(--fr-village-tab, none);
  --frame-inset: var(--fr-village-inset, none);
  --frame-card: var(--fr-village-card, none);
}

/* On the parchment: ink, and darker accents that read on it */
:where(:root[data-theme='village']) :where(.panel, .card, .champ-tile, .toast, #tooltip, .roster-hero) {
  --text: #3b2414;
  --text-2: #5a3a22;
  --muted: #7a5a3a;
  --panel: #ecd9a8;
  --panel-2: #e4cc96;
  --panel-3: #dcc48c;
  --inset: #e2cd98;
  --bg-2: #dcc48c;
  --line: #b89a60;
  --copper: #7a4f2c;
  --copper-hi: #9a5a1a;
  --copper-dk: #7a4f2c;
  --teal: #2f7a3a;
  --teal-hi: #24602c;
  --teal-dk: #1a4a20;
  --gold: #9a6a12;
  --good: #2e7d32;
  --bad: #b02a22;
  --blue-hi: #23479a;
  --team-red-hi: #8a2420;
  --rarity-common: #6a5a48;
  --rarity-rare: #1f5fbf;
  --rarity-epic: #7a3ab8;
  --rarity-legendary: #b06a0a;
  --well: rgba(59, 36, 20, 0.08);
}
:where(:root[data-theme='village']) :where(.panel, .toast, #tooltip) { color: var(--text); }
/* On the wooden blocks: parchment-coloured text and bright accents; ink on the gold one */
:where(:root[data-theme='village']) .btn {
  --text: #f3e6c4;
  --text-2: #ecd9a8;
  --muted: #e0c89a;
  --teal: #bdf0a0;
  --teal-hi: #d4f8c0;
  --gold: #ffd866;
  --good: #b4ec98;
  --bad: #ffb0a0;
}
:where(:root[data-theme='village']) .btn.primary { --text: #3b2414; --muted: #7a5a3a; --teal: #2f7a3a; --teal-hi: #24602c; --gold: #7a4a0a; --good: #2e7d32; --bad: #8a2420; }
:where(:root[data-theme='village']) .btn:active:not(:disabled), :where(:root[data-theme='village']) .btn.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #1e120a; }
:where(:root[data-theme='village']) .btn.link { box-shadow: none; text-shadow: none; }
:where(:root[data-theme='village']) .btn.selected { box-shadow: 0 0 0 3px var(--gold), 0 4px 0 #1e120a; }

/* titles on the parchment: ink, no pixel drop */
:where(:root[data-theme='village']) :is(.panel, .card) :is(.title, .dr-title .t) { text-shadow: 1px 1px 0 #fff6dc; }
:where(:root[data-theme='village']) .menu-logo .t1 { color: #f2c14e; text-shadow: 0 5px 0 #8a5a1c, 0 8px 0 #1e120a, 0 0 30px rgba(242, 193, 78, 0.3); }
:where(:root[data-theme='village']) .menu-logo .t2 { color: #ecd9a8; text-shadow: 0 2px 0 #3b2414; }
:where(:root[data-theme='village']) .title.teal { color: #f2c14e; text-shadow: 0 3px 0 #8a5a1c, 0 5px 0 #1e120a; }
:where(:root[data-theme='village']) .ct-name { color: var(--text); }
:where(:root[data-theme='village']) :is(.panel, .card, .champ-tile, .toast) .chip:not(.relic) { background: rgba(59, 36, 20, 0.1); border-color: #7a5a3a; }
:where(:root[data-theme='village']) :is(.panel, .card, .champ-tile) .chip.order { color: #7a5a08; border-color: #b4801f; }
:where(:root[data-theme='village']) :is(.panel, .card, .champ-tile) .chip.wild { color: #2f6a24; border-color: #4caf50; }
:where(:root[data-theme='village']) :is(.panel, .card, .champ-tile) .chip.arcane { color: #4a2ab0; border-color: #8f55e0; }
:where(:root[data-theme='village']) :is(.panel, .card, .champ-tile) .chip.shadow { color: #6a2a7a; border-color: #8a4b9a; }
:where(:root[data-theme='village']) :is(.panel, .card, .champ-tile) .rarity-common { color: var(--rarity-common); }
:where(:root[data-theme='village']) :is(.panel, .card, .champ-tile) .rarity-rare { color: var(--rarity-rare); }
:where(:root[data-theme='village']) :is(.panel, .card, .champ-tile) .rarity-epic { color: var(--rarity-epic); }
:where(:root[data-theme='village']) :is(.panel, .card, .champ-tile) .rarity-legendary { color: var(--rarity-legendary); }
/* the coins and gems: little parchment labels */
:where(:root[data-theme='village']) .cur { color: #3b2414; background: #ecd9a8; border: 2px solid #3b2414; box-shadow: inset 2px 2px 0 #fff6dc, 2px 2px 0 rgba(20, 10, 4, 0.5); }
:where(:root[data-theme='village']) .kbd:not(.pad) { color: #f3e6c4; background: #3b2414; border-color: #1e120a; }
/* the portraits sit in dark wooden wells */
:where(:root[data-theme='village']) :is(.ct-icon, .dc-icon:not(.ban), .dr-slot.filled, .ds.done:not(.ban)) { background: radial-gradient(circle at 50% 38%, #7a4f2c, #3b2414 78%); border-color: #1e120a; box-shadow: inset 2px 2px 0 rgba(255, 246, 220, 0.18); }
:where(:root[data-theme='village']) :is(.dr-slot, .dr-ban) { background: rgba(59, 36, 20, 0.12); }
:where(:root[data-theme='village']) .ds { --text: #f3e6c4; }
:where(:root[data-theme='village']) .roster-hero { background: #ecd9a8; border: 3px solid #3b2414; box-shadow: inset 2px 2px 0 #fff6dc, 3px 3px 0 rgba(20, 10, 4, 0.55); }
:where(:root[data-theme='village']) .roster-hero.active { border-color: #b4801f; box-shadow: inset 2px 2px 0 #fff6dc, 0 0 0 3px #f2c14e, 3px 3px 0 3px rgba(20, 10, 4, 0.55); }
:where(:root[data-theme='village']) .bar { background: #2a1a0e; border: 2px solid #3b2414; box-shadow: inset 0 0 0 1px #5a3a22; }
:where(:root[data-theme='village']) .input { border: 3px solid #3b2414; box-shadow: inset 2px 2px 0 #c3a66b; }
:where(:root[data-theme='village']) .input:focus { border-color: #b4801f; }
:where(:root[data-theme='village']) .switch { border: 3px solid #3b2414; }
:where(:root[data-theme='village']) .switch.on { border-color: #3b2414; background: #4caf50; }
:where(:root[data-theme='village']) .switch.on::after { background: #fff6dc; }
:where(:root[data-theme='village']) .list-item { box-shadow: inset 2px 2px 0 rgba(255, 246, 220, 0.5); }
:where(:root[data-theme='village']) .tabs .btn.on { filter: brightness(1.15); }
:where(:root[data-theme='village']) .tabs .btn.on::after { background: #f2c14e; height: 4px; box-shadow: 0 2px 0 #3b2414; }
:where(:root[data-theme='village']) .divider { background: repeating-linear-gradient(90deg, #7a5a3a 0 6px, transparent 6px 10px); height: 2px; }
:where(:root[data-theme='village']) .chat-list { background: #e2cd98; border-color: #3b2414; }
:where(:root[data-theme='village']) .chat-msg { background: #f4e6bc; border-color: #3b2414; color: #3b2414; }
:where(:root[data-theme='village']) .chat-msg.mine { background: #c9e0b0; }
:where(:root[data-theme='village']) .playercard { border-color: #3b2414; box-shadow: 0 0 0 3px #9c6a3c, 6px 6px 0 3px rgba(20, 10, 4, 0.5); }
:where(:root[data-theme='village']) .modal-back { background: rgba(20, 10, 4, 0.62); }
:where(:root[data-theme='village']) * { scrollbar-color: #7a4f2c #2a1a0e; }

/* Colour-blind friendly (Settings > Accessibility): Red turns orange in every theme */
:root.cb[data-theme] {
  --team-red: #f08a2b;
  --team-red-hi: #ffc58a;
  --red: #b5651d;
  --red-hi: #f08a2b;
}
:where(:root.cb[data-theme='village']) :where(.panel, .card, .champ-tile, .toast, #tooltip, .roster-hero) { --team-red-hi: #9a4a0a; }

/* The chooser (ui/theme.js) */
.theme-choice { flex-direction: column; align-items: center; gap: 4px; padding: 8px; max-width: min(280px, 80vw); height: auto; white-space: normal; text-align: center; }
.theme-choice .theme-preview { width: min(256px, 72vw); aspect-ratio: 16 / 9; height: auto; border: 2px solid #000; }