/* The Legacy theme (Settings > Display > Theme): the first Eriband, Tic Tac Tactics. Parchment cards with ink
   outlines and hard shadows, little wooden blocks for buttons, gold for the main action, the old village behind
   it (render/village.js) and the pixel art drawn in code. Only the look: every screen keeps its layout. The
   frames are render/frames.js's legacy set (--fr-legacy-*). */

:root[data-theme='legacy'] {
  /* 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-legacy-panel, none);
  --frame-button: var(--fr-legacy-button, none);
  --frame-button-red: var(--fr-legacy-button-red, none);
  --frame-tab: var(--fr-legacy-tab, none);
  --frame-inset: var(--fr-legacy-inset, none);
  --frame-card: var(--fr-legacy-card, none);
}

/* On the parchment: ink, and darker accents that read on it */
:where(:root[data-theme='legacy']) :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='legacy']) :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='legacy']) .btn {
  --text: #f3e6c4;
  --text-2: #ecd9a8;
  --muted: #e0c89a;
  --teal: #bdf0a0;
  --teal-hi: #d4f8c0;
  --gold: #ffd866;
  --good: #b4ec98;
  --bad: #ffb0a0;
}
:where(:root[data-theme='legacy']) .btn.primary { --text: #3b2414; --muted: #7a5a3a; --teal: #2f7a3a; --teal-hi: #24602c; --gold: #7a4a0a; --good: #2e7d32; --bad: #8a2420; }
:where(:root[data-theme='legacy']) .btn:active:not(:disabled), :where(:root[data-theme='legacy']) .btn.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #1e120a; }
:where(:root[data-theme='legacy']) .btn.link { box-shadow: none; text-shadow: none; }
:where(:root[data-theme='legacy']) .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='legacy']) :is(.panel, .card) :is(.title, .dr-title .t) { text-shadow: 1px 1px 0 #fff6dc; }
:where(:root[data-theme='legacy']) .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='legacy']) .menu-logo .t2 { color: #ecd9a8; text-shadow: 0 2px 0 #3b2414; }
:where(:root[data-theme='legacy']) .title.teal { color: #f2c14e; text-shadow: 0 3px 0 #8a5a1c, 0 5px 0 #1e120a; }
:where(:root[data-theme='legacy']) .ct-name { color: var(--text); }
:where(:root[data-theme='legacy']) :is(.panel, .card, .champ-tile, .toast) .chip:not(.relic) { background: rgba(59, 36, 20, 0.1); border-color: #7a5a3a; }
:where(:root[data-theme='legacy']) :is(.panel, .card, .champ-tile) .chip.order { color: #7a5a08; border-color: #b4801f; }
:where(:root[data-theme='legacy']) :is(.panel, .card, .champ-tile) .chip.wild { color: #2f6a24; border-color: #4caf50; }
:where(:root[data-theme='legacy']) :is(.panel, .card, .champ-tile) .chip.arcane { color: #4a2ab0; border-color: #8f55e0; }
:where(:root[data-theme='legacy']) :is(.panel, .card, .champ-tile) .chip.shadow { color: #6a2a7a; border-color: #8a4b9a; }
:where(:root[data-theme='legacy']) :is(.panel, .card, .champ-tile) .rarity-common { color: var(--rarity-common); }
:where(:root[data-theme='legacy']) :is(.panel, .card, .champ-tile) .rarity-rare { color: var(--rarity-rare); }
:where(:root[data-theme='legacy']) :is(.panel, .card, .champ-tile) .rarity-epic { color: var(--rarity-epic); }
:where(:root[data-theme='legacy']) :is(.panel, .card, .champ-tile) .rarity-legendary { color: var(--rarity-legendary); }
/* the coins and gems: little parchment labels */
:where(:root[data-theme='legacy']) .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='legacy']) .kbd:not(.pad) { color: #f3e6c4; background: #3b2414; border-color: #1e120a; }
/* the portraits sit in dark wooden wells */
:where(:root[data-theme='legacy']) :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='legacy']) :is(.dr-slot, .dr-ban) { background: rgba(59, 36, 20, 0.12); }
:where(:root[data-theme='legacy']) .ds { --text: #f3e6c4; }
:where(:root[data-theme='legacy']) .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='legacy']) .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='legacy']) .bar { background: #2a1a0e; border: 2px solid #3b2414; box-shadow: inset 0 0 0 1px #5a3a22; }
:where(:root[data-theme='legacy']) .input { border: 3px solid #3b2414; box-shadow: inset 2px 2px 0 #c3a66b; }
:where(:root[data-theme='legacy']) .input:focus { border-color: #b4801f; }
:where(:root[data-theme='legacy']) .switch { border: 3px solid #3b2414; }
:where(:root[data-theme='legacy']) .switch.on { border-color: #3b2414; background: #4caf50; }
:where(:root[data-theme='legacy']) .switch.on::after { background: #fff6dc; }
:where(:root[data-theme='legacy']) .list-item { box-shadow: inset 2px 2px 0 rgba(255, 246, 220, 0.5); }
:where(:root[data-theme='legacy']) .tabs .btn.on { filter: brightness(1.15); }
:where(:root[data-theme='legacy']) .tabs .btn.on::after { background: #f2c14e; height: 4px; box-shadow: 0 2px 0 #3b2414; }
:where(:root[data-theme='legacy']) .chat-list { background: #e2cd98; border-color: #3b2414; }
:where(:root[data-theme='legacy']) .chat-msg { background: #f4e6bc; border-color: #3b2414; color: #3b2414; }
:where(:root[data-theme='legacy']) .chat-msg.mine { background: #c9e0b0; }
:where(:root[data-theme='legacy']) .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='legacy']) .modal-back { background: rgba(20, 10, 4, 0.62); }
:where(:root[data-theme='legacy']) * { scrollbar-color: #7a4f2c #2a1a0e; }
:where(:root.cb[data-theme='legacy']) :where(.panel, .card, .champ-tile, .toast, #tooltip, .roster-hero) { --team-red-hi: #9a4a0a; }

/* the first Eriband's textures (render/legacy-art.js applyTextures: --tile-*): grain in the parchment, planks in the
   wooden blocks, grass behind the champions (their pictures stand on a little lawn, as on the old board) */
:root[data-theme='legacy'] body { background: var(--tile-grass) 0 0 / 48px 48px, #5d9e3c; }
:where(:root[data-theme='legacy']) :is(.panel:not(.inset), .modal, .toast, #tooltip) { border-image: var(--frame-panel) 12 / 12px / 0 stretch; background: var(--tile-parchment) 0 0 / 64px 64px, #ecd9a8; background-clip: padding-box; }
:where(:root[data-theme='legacy']) :is(.card, .champ-tile) { border-image: var(--frame-card) 9 / 9px / 0 stretch; background: var(--tile-parchment) 0 0 / 64px 64px, #ecd9a8; background-clip: padding-box; }
:where(:root[data-theme='legacy']) .btn:not(.primary):not(.link):not(.danger) { border-image: var(--frame-button) 9 / 9px / 0 stretch; background: var(--tile-wood) 0 0 / 64px 64px, #5a3a22; background-clip: padding-box; }
:where(:root[data-theme='legacy']) .action-bar:not(:empty) { border-image: var(--frame-panel) 12 / 12px / 0 stretch; background: var(--tile-wood) 0 0 / 64px 64px, #5a3a22; background-clip: padding-box; }
:where(:root[data-theme='legacy']) :is(.ct-icon, .dc-icon:not(.ban), .dr-slot.filled, .ds.done:not(.ban), .card > canvas.portrait, .roster-hero .portrait, .cc-win) {
  background: var(--tile-grass) 0 0 / 48px 48px, #5d9e3c; border-color: #3b2414; box-shadow: inset 0 0 0 2px rgba(20, 40, 10, 0.25); }
:where(:root[data-theme='legacy']) .card > canvas.portrait { border: 3px solid #3b2414; }
/* the soft vignette over the village */
:root[data-theme='legacy'] #app::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at center, transparent 60%, rgba(10, 15, 5, 0.45) 100%); }

/* ---------------------------------------------------------------- the main page's window and bars (styles/ui3.css),
   as the first Eriband had them: every screen one big parchment card over the village (dimmed round it), a
   wooden plank for its head and for the bar on top, ink outlines and hard shadows */
.ui3[data-theme='legacy'] #app > .screen.win {
  background: var(--tile-parchment) 0 0 / 64px 64px, #ecd9a8; border: 4px solid #3b2414;
  box-shadow: inset 3px 3px 0 #fff6dc, inset -3px -3px 0 #c3a66b, 0 0 0 100vmax rgba(20, 10, 4, 0.42), 8px 8px 0 rgba(20, 10, 4, 0.55);
  --text: #3b2414; --text-2: #5a3a22; --muted: #7a5a3a; color: var(--text); }
.ui3[data-theme='legacy'] .screen.win > .screen-head { background: var(--tile-wood) 0 0 / 64px 64px, #5a3a22; border-bottom: 4px solid #3b2414; box-shadow: inset 0 2px 0 rgba(255, 246, 220, 0.15); --text: #f3e6c4; color: var(--text); }
.ui3[data-theme='legacy'] .screen-head .title { color: #f2c14e; text-shadow: 0 3px 0 #8a5a1c, 0 5px 0 #1e120a; }
.ui3[data-theme='legacy'] .screen-head > .btn.icon:first-child { background: var(--tile-wood) 0 0 / 64px 64px, #5a3a22; border: 3px solid #1e120a; box-shadow: inset 2px 2px 0 rgba(255, 246, 220, 0.2), 0 3px 0 #1e120a; }
.ui3[data-theme='legacy'] .tabs { border-bottom: 3px dashed #b89a60; }
.ui3[data-theme='legacy'] .tabs .btn { color: #f3e6c4; background: var(--tile-wood) 0 0 / 64px 64px, #6a4528; border: 3px solid #3b2414; border-bottom-width: 0; margin-right: 4px; box-shadow: inset 2px 2px 0 rgba(255, 246, 220, 0.18); }
.ui3[data-theme='legacy'] .tabs .btn.on { color: #3b2414; background: var(--tile-parchment) 0 0 / 64px 64px, #f2c14e; border-color: #3b2414; text-shadow: 1px 1px 0 #fff6dc; }
.ui3[data-theme='legacy'] .panel { background: var(--tile-parchment) 0 0 / 64px 64px, #f2e2b6; border: 3px solid #3b2414; box-shadow: inset 2px 2px 0 #fff6dc, inset -2px -2px 0 #c3a66b, 4px 4px 0 rgba(20, 10, 4, 0.35); color: #3b2414; }
.ui3[data-theme='legacy'] .panel.flat { background: rgba(59, 36, 20, 0.08); box-shadow: inset 0 0 0 2px rgba(59, 36, 20, 0.25); }
.ui3[data-theme='legacy'] .panel.inset { background: #e2cd98; border: 3px solid #3b2414; box-shadow: inset 2px 2px 0 #c3a66b; }
.ui3[data-theme='legacy'] .btn { color: #f3e6c4; background: var(--tile-wood) 0 0 / 64px 64px, #5a3a22; border: 3px solid #1e120a; box-shadow: inset 2px 2px 0 rgba(255, 246, 220, 0.2), inset -2px -3px 0 rgba(0, 0, 0, 0.3), 0 4px 0 #1e120a; text-shadow: 2px 2px 0 #3b2414; }
.ui3[data-theme='legacy'] .btn.primary { color: #3b2414; background: #f2c14e; border-color: #3b2414; box-shadow: inset 2px 2px 0 #ffe9a8, inset -2px -3px 0 #b4801f, 0 4px 0 #1e120a; text-shadow: 1px 1px 0 #ffe9a8; }
.ui3[data-theme='legacy'] .btn.teal { color: #fff6dc; background: #4caf50; border-color: #1e3a12; box-shadow: inset 2px 2px 0 #9be08a, inset -2px -3px 0 #2e7d32, 0 4px 0 #1e120a; }
.ui3[data-theme='legacy'] .btn.link { background: none; border: 0; box-shadow: none; color: #7a4f2c; text-shadow: none; }
.ui3[data-theme='legacy'] .btn.selected { box-shadow: 0 0 0 3px #f2c14e, 0 4px 0 #1e120a; }
.ui3[data-theme='legacy'] .card { background: var(--tile-parchment) 0 0 / 64px 64px, #ecd9a8; border: 3px solid #3b2414; box-shadow: inset 2px 2px 0 #fff6dc, 3px 3px 0 rgba(20, 10, 4, 0.45); color: #3b2414; }
.ui3[data-theme='legacy'] .card:hover { box-shadow: inset 2px 2px 0 #fff6dc, 0 0 0 3px #f2c14e, 3px 3px 0 3px rgba(20, 10, 4, 0.45); }
.ui3[data-theme='legacy'] :is(.input, select.input) { background: #fff8e6; color: #3b2414; border: 3px solid #3b2414; box-shadow: inset 2px 2px 0 #c3a66b; }
.ui3[data-theme='legacy'] .modal { background: var(--tile-parchment) 0 0 / 64px 64px, #ecd9a8; border: 4px solid #3b2414; box-shadow: inset 3px 3px 0 #fff6dc, inset -3px -3px 0 #c3a66b, 8px 8px 0 rgba(20, 10, 4, 0.55); color: #3b2414; }
.ui3[data-theme='legacy'] #tooltip { background: #fff8e6; border: 3px solid #3b2414; box-shadow: 3px 3px 0 rgba(20, 10, 4, 0.45); color: #3b2414; }
.ui3[data-theme='legacy'] .hub-bar { background: var(--tile-wood) 0 0 / 64px 64px, #5a3a22; border-bottom: 4px solid #1e120a; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 4px 0 rgba(20, 10, 4, 0.4); }
.ui3[data-theme='legacy'] :is(.hub-tab, .hub-btab) { color: #f3e6c4; text-shadow: 2px 2px 0 #1e120a; }
.ui3[data-theme='legacy'] .hub-tab.on { color: #ffd866; border-bottom-color: #f2c14e; background: rgba(0, 0, 0, 0.18); }
.ui3[data-theme='legacy'] :is(.hub-play, .hub-bplay) { color: #3b2414; background: #f2c14e; border: 3px solid #3b2414; box-shadow: inset 2px 2px 0 #ffe9a8, inset -2px -4px 0 #b4801f, 0 4px 0 #1e120a; text-shadow: 1px 1px 0 #ffe9a8; }
.ui3[data-theme='legacy'] .hub-tools .btn { background: var(--tile-wood) 0 0 / 64px 64px, #6a4528; border: 3px solid #1e120a; }
.ui3[data-theme='legacy'] .hub-me { background: var(--tile-parchment) 0 0 / 64px 64px, #ecd9a8; border: 3px solid #3b2414; --text: #3b2414; color: #3b2414; }
.ui3[data-theme='legacy'] .hub-bar .currencies .cur { color: #3b2414; background: #ecd9a8; border: 2px solid #3b2414; box-shadow: inset 2px 2px 0 #fff6dc; }
.ui3[data-theme='legacy'] :is(.dr-head, .dr-choice-bar) { background: var(--tile-wood) 0 0 / 64px 64px, #5a3a22; border: 3px solid #1e120a; color: #f3e6c4; }
.ui3[data-theme='legacy'] .dr-team { background: var(--tile-parchment) 0 0 / 64px 64px, #ecd9a8; border: 3px solid #3b2414; color: #3b2414; }
.ui3[data-theme='legacy'] .dr-team.p0 { box-shadow: inset 0 5px 0 #3f74e0, 4px 4px 0 rgba(20, 10, 4, 0.4); }
.ui3[data-theme='legacy'] .dr-team.p1 { box-shadow: inset 0 5px 0 #d0463c, 4px 4px 0 rgba(20, 10, 4, 0.4); }
.ui3[data-theme='legacy'] .dr-slot { background: rgba(59, 36, 20, 0.1); border: 2px dashed #b89a60; }
.ui3[data-theme='legacy'] .dr-slot.filled { border: 3px solid #3b2414; background: var(--tile-grass) 0 0 / 48px 48px, #5d9e3c; }
.ui3[data-theme='legacy'] .champ-tile { background: var(--tile-parchment) 0 0 / 64px 64px, #ecd9a8; border: 3px solid #3b2414; box-shadow: inset 2px 2px 0 #fff6dc, 3px 3px 0 rgba(20, 10, 4, 0.45); color: #3b2414; }
.ui3[data-theme='legacy'] .champ-tile .ct-icon { background: var(--tile-grass) 0 0 / 48px 48px, #5d9e3c; border: 3px solid #3b2414; box-shadow: none; }
/* the main page's Home (styles/hub3.css): its dark wells and labels, on parchment */
.ui3[data-theme='legacy'] :is(.h3-tile-ico, .h3-faces canvas) { background: var(--tile-grass) 0 0 / 48px 48px, #5d9e3c; border: 3px solid #3b2414; box-shadow: none; }
.ui3[data-theme='legacy'] :is(.h3-evg, .h3-status, .h3-quests, .h3-line) { color: #3b2414; background: rgba(59, 36, 20, 0.08); border: 2px solid #b89a60; }

/* ================================================================ the village behind it (render/village.js, the
   first Eriband's css/style.css): the town and its folk, the floating island under a board, the screen's tints */
/* ---------- The village (generated in js/village.js) ---------- */
.village { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.village[hidden], .village-scene[hidden] { display: none; }
.village-canvas { display: block; image-rendering: pixelated; }
.village-critters { position: absolute; inset: 0; }
.critter { position: absolute; left: 0; top: 0; will-change: transform; }
/* townsfolk speech bubbles (village.js: chats, quarrels, thieves...) */
.city-bubble {
  position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, -100%);
  padding: 1px 4px; font-size: 15px; line-height: 1.2; background: #fffbea; border: 2px solid #2a1c24;
  box-shadow: 2px 2px 0 rgba(20, 10, 4, .3);
}
.city-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 6px; height: 6px; margin-left: -3px;
  background: #fffbea; border-right: 2px solid #2a1c24; border-bottom: 2px solid #2a1c24; transform: rotate(45deg);
}
.city-bubble.pop { animation: bubble-pop .18s steps(3); }
@keyframes bubble-pop { from { transform: translate(-50%, -80%) scale(.4); } }
.critter-layer { position: absolute; left: 0; top: 0; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(20, 30, 10, .3)); }
/* the city's moving water and waving flags (js/village.js) */
/* ⚙ Settings → Display → Background animations off: everything in the scenery holds still */
.village.still *, .village.still *::before, .village.still *::after,
.village.still + .village-scene *, .village.still + .village-scene *::before, .village.still + .village-scene *::after { animation-play-state: paused !important; }
.village.still + .village-scene .scene-bits { display: none; }
.water-layer { position: absolute; pointer-events: none; image-rendering: pixelated; background-repeat: repeat; }
.water-layer.a { animation: water-a 8s steps(48) infinite; }
.water-layer.b { animation: water-b 12s steps(48) infinite, water-shimmer 3s steps(3) infinite; }
@keyframes water-a { from { background-position: 0 0; } to { background-position: var(--tw) 0; } }
@keyframes water-b { from { background-position: 0 0; } to { background-position: calc(-1 * var(--tw)) 0; } }
@keyframes water-shimmer { 50% { opacity: .45; } }
.sea-glint { position: absolute; pointer-events: none; background: #fff; opacity: 0; animation: sea-glint 3.4s steps(1) infinite; animation-delay: var(--delay); }
@keyframes sea-glint { 0%, 84%, 100% { opacity: 0; } 86%, 94% { opacity: .9; } }
.city-flag { position: absolute; pointer-events: none; image-rendering: pixelated; background-repeat: no-repeat; animation: flag-wave .6s steps(3) infinite; }
@keyframes flag-wave { from { background-position: 0 0; } to { background-position: calc(-3 * var(--fw)) 0; } }
.critter img { display: block; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(20, 30, 10, .3)); }
.chimney-smoke, .chimney-smoke::before {
  position: absolute;
  width: 6px; height: 6px;
  background: rgba(235, 235, 235, .85);
  animation: chimney 3.2s steps(8) infinite;
}
.chimney-smoke::before { content: ''; left: 0; top: 0; animation-delay: -1.6s; }
@keyframes chimney {
  0% { transform: translate(0, 0) scale(1); opacity: .9; }
  100% { transform: translate(12px, -36px) scale(2.2); opacity: 0; }
}
/* ---------- The match background: the floating island (js/village.js) ---------- */
.isle-fall { position: absolute; pointer-events: none; opacity: .9;
  background: repeating-linear-gradient(180deg, #e8f8ff 0 6px, #8fd8ff 6px 14px, #5ab8f0 14px 22px, #c8f0ff 22px 26px);
  background-size: 100% 26px; animation: fall-flow var(--d, .7s) linear infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent);
  box-shadow: 0 0 10px rgba(127, 240, 255, .5); }
.isle-fall.small { opacity: .8; }
@keyframes fall-flow { to { background-position: 0 26px; } }
.rune-ring { position: absolute; pointer-events: none; box-shadow: 0 0 0 3px rgba(127, 240, 255, .25), 0 0 18px 4px rgba(127, 240, 255, .35); animation: rune-pulse 3s ease-in-out infinite; }
@keyframes rune-pulse { 50% { box-shadow: 0 0 0 3px rgba(185, 140, 255, .35), 0 0 26px 8px rgba(185, 140, 255, .45); } }
.crystal-glow { position: absolute; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(185, 140, 255, .55), transparent 65%); animation: glow-pulse 2.2s ease-in-out infinite; animation-delay: var(--delay); }
.crystal-glow.cyan { background: radial-gradient(circle, rgba(127, 240, 255, .55), transparent 65%); }
.lantern-glow { position: absolute; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255, 211, 107, .6), transparent 65%); animation: glow-pulse 1.4s steps(3) infinite; }
@keyframes glow-pulse { 50% { opacity: .45; transform: scale(.85); } }
.sky-whale img, .sky-bird img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; }
@keyframes pet-hop { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-14px); } 80% { transform: translateY(-18px) rotate(-6deg); } 90% { transform: translateY(-6px); } }
@keyframes pet-squash { 0%, 55% { opacity: 0; } 56%, 66% { opacity: 1; } 67%, 92% { opacity: 0; } 93%, 99% { opacity: 1; } }
.float-isle { position: absolute; pointer-events: none; animation: isle-bob var(--bob, 4s) ease-in-out infinite; animation-delay: var(--delay); filter: drop-shadow(0 10px 12px rgba(30, 10, 60, .45)); }
.float-isle-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.float-isle .isle-fall { z-index: -1; }
@keyframes isle-bob { 50% { transform: translateY(-8px); } }
.sky-whale, .sky-bird { position: absolute; pointer-events: none; animation: sky-cross var(--dur, 60s) linear infinite; animation-delay: var(--delay); }
.sky-whale img.b, .sky-bird img.b { opacity: 0; animation: flap 1.2s steps(1) infinite; }
.sky-bird img.b { animation-duration: .4s; }
@keyframes sky-cross { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 120px)); } }
@keyframes flap { 50% { opacity: 1; } }
/* ---------- Screen themes (js/village.js: Village.theme) ----------
   One layer between the village and the game. Only its class changes between screens, so the
   clouds and particles keep moving instead of restarting on every turn. */
.village-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.scene-tint { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s; }
.tint-menu { background: linear-gradient(160deg, rgba(255, 236, 170, .32), transparent 55%); }
.tint-draft { background: linear-gradient(180deg, rgba(255, 150, 60, .32), rgba(150, 40, 100, .22)); }
.tint-battle { background: radial-gradient(ellipse at center, transparent 45%, rgba(80, 0, 20, .42)), linear-gradient(180deg, rgba(70, 20, 90, .38), rgba(200, 70, 20, .2)); }
.tint-sudden { background: radial-gradient(ellipse at center, rgba(70, 0, 10, .2), rgba(40, 0, 10, .62)); }
.tint-over { background: linear-gradient(180deg, rgba(8, 12, 45, .68), rgba(25, 30, 80, .5)); }
.village-scene.theme-menu .tint-menu, .village-scene.theme-draft .tint-draft, .village-scene.theme-battle .tint-battle,
.village-scene.theme-sudden .tint-battle, .village-scene.theme-sudden .tint-sudden, .village-scene.theme-over .tint-over { opacity: 1; }
.village-scene.theme-sudden .tint-sudden { animation: sudden-pulse 2.4s steps(6) infinite; }
.scene-rays {
  position: absolute; inset: -20%;
  background: repeating-linear-gradient(115deg, transparent 0 70px, rgba(255, 246, 205, .13) 70px 120px, transparent 120px 240px);
  opacity: 0; transition: opacity 1.2s;
  animation: rays-sway 9s ease-in-out infinite alternate;
}
.village-scene.theme-menu .scene-rays { opacity: 1; }
.village-scene.theme-draft .scene-rays { opacity: .55; }
.scene-cloud {
  position: absolute; left: 0; top: var(--top);
  width: var(--size); height: calc(var(--size) * .42);
  border-radius: 50%;
  background: rgba(10, 30, 5, .17);
  filter: blur(16px);
  opacity: 0; transition: opacity 1.5s;
  animation: cloud-drift var(--speed) linear infinite;
  animation-delay: var(--delay);
}
.village-scene.theme-menu .scene-cloud, .village-scene.theme-placement .scene-cloud { opacity: 1; }
.village-scene.theme-sudden .scene-cloud { opacity: 1; background: rgba(0, 0, 0, .3); }
.scene-bits i {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--s) * 2px); height: calc(var(--s) * 2px);
  opacity: 0; transition: opacity 1s;
}
/* menu: petals drifting down */
.village-scene.theme-menu .scene-bits i { top: -12px; opacity: .9; background: #ffc6d6; animation: bit-fall var(--d) linear infinite var(--delay); }
.village-scene.theme-menu .scene-bits i:nth-child(3n) { background: #fff6f0; }
/* champion select: festival sparkles rising */
.village-scene.theme-draft .scene-bits i { top: 100%; opacity: 1; background: #ffe36b; box-shadow: 0 0 6px #ffd23a; animation: bit-rise calc(var(--d) * 1.3) linear infinite var(--delay); }
.village-scene.theme-draft .scene-bits i:nth-child(4n) { background: #ff9ad0; box-shadow: 0 0 6px #ff6fb6; }
/* battle: embers */
.village-scene.theme-battle .scene-bits i { top: 100%; opacity: 1; background: #ff9a3c; box-shadow: 0 0 6px #ff5c1c; animation: bit-rise var(--d) linear infinite var(--delay); }
.village-scene.theme-battle .scene-bits i:nth-child(3n) { background: #ffe36b; }
/* sudden death: rain */
.village-scene.theme-sudden .scene-bits i { top: -30px; width: 2px; height: 16px; opacity: .6; background: #b8d4ff; rotate: 14deg; animation: bit-rain calc(var(--d) * .12) linear infinite var(--delay); }
/* game over: stars and fireflies */
.village-scene.theme-over .scene-bits i { top: calc(var(--y) * .65); opacity: 1; background: #fff; animation: twinkle calc(var(--d) * .4) steps(2) infinite var(--delay); }
.village-scene.theme-over .scene-bits i:nth-child(4n) { top: auto; bottom: calc(var(--y) * .35); background: #e2ff7a; box-shadow: 0 0 8px #b8ff4a; animation: firefly var(--d) ease-in-out infinite alternate var(--delay); }
@keyframes bit-fall { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(var(--drift), 108vh) rotate(540deg); } }
@keyframes bit-rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--drift), -108vh); opacity: 0; } }
@keyframes bit-rain { to { transform: translate(-40px, 112vh); } }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes firefly { 0% { transform: translate(0, 0); opacity: .2; } 100% { transform: translate(var(--drift), -40px); opacity: 1; } }
@keyframes cloud-drift { from { transform: translateX(-60vw); } to { transform: translateX(120vw); } }
@keyframes rays-sway { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@keyframes sudden-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {