@import url("../static/pico.css");

/* ── Custom fonts ──────────────────────────────────────────────────────── */
@font-face {
  font-family: "Metal Mania";
  src: url("/static/fonts/MetalMania-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "IM Fell Great Primer";
  src: url("/static/fonts/IMFellGreatPrimer-Regular.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "IM Fell Great Primer";
  src: url("/static/fonts/IMFellGreatPrimer-Italic.ttf") format("truetype");
  font-style: italic;
}

/* ── Global (theme-independent) ────────────────────────────────────────── */
:root {
  --pico-font-family: "IM Fell Great Primer", var(--pico-font-family-emoji);
}

h1, h2, h3, h4, h5, h6 {
  --pico-font-family: "Metal Mania", var(--pico-font-family-emoji);
  font-weight: 200;
}

/* ── Dark theme — Cold Moonlight Over a Midnight Forest ─────────────────── */
:root[data-theme=dark] {
  color-scheme: dark;

  /* ─ Palette ─ */
  --c-bg:           #07080d;
  --c-surface:      #0d1018;
  --c-surface-2:    #141820;
  --c-border:       #2a3040;
  --c-amber:        #9db5cc;   /* moonlight silver-blue — main text */
  --c-amber-bright: #c5d8ea;   /* full moon highlight */
  --c-flame:        #c86820;   /* ember / werewolf-eye glow — primary accent */
  --c-bark:         #0d1020;   /* deep shadow */
  --c-muted:        #4a6070;   /* muted slate-blue */
  --c-success:      #3a7048;   /* pine-forest green */
  --c-danger:       #a02818;   /* blood red */

  /* ─ Component tints ─ */
  --c-card-inner-glow:       rgba(157, 181, 204, 0.05);
  --c-card-team-villager:    rgba(100, 148, 196, 0.22);
  --c-card-team-werewolf:    rgba(160,  40,  24, 0.28);
  --c-seal-ring:             rgba(157, 181, 204, 0.14);
  --c-seal-shadow:           rgba(0,   0,   0,  0.65);
  --c-seal-ring-hover:       rgba(200, 104,  32, 0.35);
  --c-seal-shadow-hover:     rgba(0,   0,   0,  0.75);
  --c-card-hover-shadow:     rgba(0,   0,   0,  0.65);
  --c-card-hover-ring:       rgba(157, 181, 204, 0.18);
  --c-card-active-ring:      rgba(200, 104,  32, 0.25);
  --c-card-active-shadow:    rgba(0,   0,   0,  0.5);
  --c-count-text-shadow:     rgba(197, 216, 234, 0.45);
  --c-vote-selected-bg:      rgba(13,  16,  32,  0.8);
  --c-vote-selected-ring:    rgba(160,  40,  24, 0.25);
  --c-death-bg:              rgba(160,  40,  24, 0.07);
  --c-death-text:            #c07878;
  --c-winner-villagers-bg:   rgba(58,  112, 72, 0.12);
  --c-winner-werewolves-bg:  rgba(160,  40, 24, 0.12);
  --c-winner-lovers-bg:      rgba(157, 181, 204, 0.08);
  --c-team-villager-label:   rgba(140, 188, 228, 0.85);
  --c-team-werewolf-label:   rgba(200,  80,  40, 0.85);
  --c-lover-border:          rgba(220,  90, 150, 0.65);
  --c-lover-ring:            rgba(220,  90, 150, 0.18);
  --c-lover-shadow:          rgba(220,  90, 150, 0.20);
  --c-lover-badge-bg:        rgba( 60,  10,  28, 0.90);
  --c-lover-heart:           #e878b4;

  /* ─ Pico overrides ─ */
  --pico-background-color:      var(--c-bg);
  --pico-color:                 var(--c-amber);
  --pico-muted-color:           var(--c-muted);
  --pico-muted-border-color:    var(--c-border);

  --pico-primary:                  var(--c-flame);
  --pico-primary-background:       #6a3010;
  --pico-primary-border:           var(--c-flame);
  --pico-primary-underline:        rgba(200, 104, 32, 0.5);
  --pico-primary-hover:            var(--c-amber-bright);
  --pico-primary-hover-background: #7a3a14;
  --pico-primary-hover-border:     var(--c-amber);
  --pico-primary-focus:            rgba(200, 104, 32, 0.4);
  --pico-primary-inverse:          var(--c-amber-bright);

  --pico-secondary:                  var(--c-muted);
  --pico-secondary-background:       #1a2430;
  --pico-secondary-border:           #2a3848;
  --pico-secondary-hover:            #6a8898;
  --pico-secondary-hover-background: #202e3c;
  --pico-secondary-focus:            rgba(74, 96, 112, 0.3);
  --pico-secondary-inverse:          var(--c-amber-bright);

  --pico-ins-color:   var(--c-success);
  --pico-del-color:   var(--c-danger);

  --pico-h1-color: var(--c-amber-bright);
  --pico-h2-color: var(--c-amber);
  --pico-h3-color: #8aa8c0;
  --pico-h4-color: #6a8aa8;

  --pico-card-background-color:            var(--c-surface);
  --pico-card-border-color:                var(--c-border);
  --pico-card-sectioning-background-color: var(--c-surface-2);

  --pico-form-element-background-color:        var(--c-surface);
  --pico-form-element-border-color:            var(--c-border);
  --pico-form-element-color:                   var(--c-amber);
  --pico-form-element-placeholder-color:       var(--c-muted);
  --pico-form-element-active-border-color:     var(--c-flame);
  --pico-form-element-active-background-color: var(--c-surface-2);
  --pico-form-element-focus-color:             var(--c-flame);

  --pico-dropdown-background-color:       var(--c-surface);
  --pico-dropdown-border-color:           var(--c-border);
  --pico-dropdown-hover-background-color: var(--c-surface-2);

  --pico-table-border-color:    var(--c-border);
  --pico-code-background-color: var(--c-bg);
  --pico-code-color:            #8aa8c0;
  --pico-mark-background-color: var(--c-bark);
  --pico-mark-color:            var(--c-amber);
  --pico-accordion-border-color: var(--c-border);

  --pico-box-shadow:
    0.0145rem 0.029rem 0.174rem rgba(0, 4, 16, 0.04),
    0.0625rem 0.125rem 0.75rem  rgba(0, 4, 16, 0.07),
    0.2085rem 0.417rem 2.502rem rgba(0, 4, 16, 0.1),
    0.5rem    1rem     6rem     rgba(0, 4, 16, 0.14),
    0 0 0 0.0625rem              rgba(0, 4, 16, 0.04);
}

/* ── Light theme — Sunlit Medieval Village at High Noon ─────────────────── */
:root[data-theme=light] {
  color-scheme: light;

  /* ─ Palette ─ */
  --c-bg:           #f2ead6;   /* sunlit limestone */
  --c-surface:      #e9dfc8;   /* warm stone */
  --c-surface-2:    #dfd3b5;   /* shadowed stone */
  --c-border:       #c4a870;   /* worn mortar */
  --c-amber:        #2c1c08;   /* dark timber — main text */
  --c-amber-bright: #4a2e10;   /* lighter timber */
  --c-flame:        #3e6e9e;   /* clear medieval sky blue — primary accent */
  --c-bark:         #e4d9c0;   /* pale stone, used for secondary bg */
  --c-muted:        #7a6442;   /* worn earth */
  --c-success:      #4a7a2a;   /* meadow green */
  --c-danger:       #983018;   /* dried blood */

  /* ─ Component tints ─ */
  --c-card-inner-glow:       rgba(62, 110, 158, 0.06);
  --c-card-team-villager:    rgba(62, 110, 158, 0.18);
  --c-card-team-werewolf:    rgba(150,  48,  24, 0.22);
  --c-seal-ring:             rgba(62,  110, 158, 0.2);
  --c-seal-shadow:           rgba(0,   0,   0,  0.18);
  --c-seal-ring-hover:       rgba(62,  110, 158, 0.4);
  --c-seal-shadow-hover:     rgba(0,   0,   0,  0.26);
  --c-card-hover-shadow:     rgba(0,   0,   0,  0.1);
  --c-card-hover-ring:       rgba(62,  110, 158, 0.28);
  --c-card-active-ring:      rgba(62,  110, 158, 0.35);
  --c-card-active-shadow:    rgba(0,   0,   0,  0.07);
  --c-count-text-shadow:     rgba(44,  28,   8, 0.25);
  --c-vote-selected-bg:      rgba(62,  110, 158, 0.12);
  --c-vote-selected-ring:    rgba(62,  110, 158, 0.35);
  --c-death-bg:              rgba(152,  48,  24, 0.07);
  --c-death-text:            #7a2a10;
  --c-winner-villagers-bg:   rgba(74,  122,  42, 0.12);
  --c-winner-werewolves-bg:  rgba(152,  48,  24, 0.1);
  --c-winner-lovers-bg:      rgba(62,  110, 158, 0.08);
  --c-team-villager-label:   rgba(40,   90, 150, 0.9);
  --c-team-werewolf-label:   rgba(150,  48,  24, 0.9);
  --c-lover-border:          rgba(200,  80, 130, 0.55);
  --c-lover-ring:            rgba(200,  80, 130, 0.14);
  --c-lover-shadow:          rgba(200,  80, 130, 0.14);
  --c-lover-badge-bg:        rgba(255, 230, 240, 0.92);
  --c-lover-heart:           #c0306a;

  /* ─ Pico overrides ─ */
  --pico-background-color:      var(--c-bg);
  --pico-color:                 var(--c-amber);
  --pico-muted-color:           var(--c-muted);
  --pico-muted-border-color:    var(--c-border);

  --pico-primary:                  var(--c-flame);
  --pico-primary-background:       var(--c-flame);
  --pico-primary-border:           var(--c-flame);
  --pico-primary-underline:        rgba(62, 110, 158, 0.5);
  --pico-primary-hover:            var(--c-amber);
  --pico-primary-hover-background: #2e5a84;
  --pico-primary-hover-border:     #2e5a84;
  --pico-primary-focus:            rgba(62, 110, 158, 0.3);
  --pico-primary-inverse:          #f2ead6;

  --pico-secondary:                  var(--c-muted);
  --pico-secondary-background:       var(--c-bark);
  --pico-secondary-border:           var(--c-border);
  --pico-secondary-hover:            var(--c-amber-bright);
  --pico-secondary-hover-background: var(--c-surface-2);
  --pico-secondary-focus:            rgba(122, 100, 66, 0.25);
  --pico-secondary-inverse:          var(--c-bg);

  --pico-ins-color:   var(--c-success);
  --pico-del-color:   var(--c-danger);

  --pico-h1-color: var(--c-amber);
  --pico-h2-color: var(--c-amber-bright);
  --pico-h3-color: #345e82;
  --pico-h4-color: #2a4e6e;

  --pico-card-background-color:            var(--c-surface);
  --pico-card-border-color:                var(--c-border);
  --pico-card-sectioning-background-color: var(--c-surface-2);

  --pico-form-element-background-color:        var(--c-surface);
  --pico-form-element-border-color:            var(--c-border);
  --pico-form-element-color:                   var(--c-amber);
  --pico-form-element-placeholder-color:       var(--c-muted);
  --pico-form-element-active-border-color:     var(--c-flame);
  --pico-form-element-active-background-color: var(--c-surface-2);
  --pico-form-element-focus-color:             var(--c-flame);

  --pico-dropdown-background-color:       var(--c-surface);
  --pico-dropdown-border-color:           var(--c-border);
  --pico-dropdown-hover-background-color: var(--c-surface-2);

  --pico-table-border-color:    var(--c-border);
  --pico-code-background-color: var(--c-surface);
  --pico-code-color:            #345e82;
  --pico-mark-background-color: var(--c-bark);
  --pico-mark-color:            var(--c-amber);
  --pico-accordion-border-color: var(--c-border);

  --pico-box-shadow:
    0.0145rem 0.029rem 0.174rem rgba(44, 28, 8, 0.02),
    0.0625rem 0.125rem 0.75rem  rgba(44, 28, 8, 0.035),
    0.2085rem 0.417rem 2.502rem rgba(44, 28, 8, 0.05),
    0.5rem    1rem     6rem     rgba(44, 28, 8, 0.065),
    0 0 0 0.0625rem              rgba(44, 28, 8, 0.015);
}

/* ── Scrollbar styling ─────────────────────────────────────────────────── */
/* Firefox only — @-moz-document prevents Chrome from seeing scrollbar-width,
   which would override the webkit rules below and re-enable arrow buttons.  */
@-moz-document url-prefix() {
  * { scrollbar-width: thin; scrollbar-color: var(--c-border) transparent; }
}
/* Chromium / Safari / Edge */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-button { width: 0; height: 0; }
::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }

/* ── Background layers + theme transitions ──────────────────────────────── */
/* html canvas fallback — transitions smoothly between theme colors          */
html {
  background-color: var(--c-bg, #07080d);
  transition: background-color 0.5s ease;
}

/* Night background layer — visible by default */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(7, 8, 13, 0.82), rgba(7, 8, 13, 0.82)),
                    url('/static/backgrounds/background_night.webp');
  background-size: cover;
  background-position: center;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* Day background layer — hidden until light theme */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(242, 234, 214, 0.80), rgba(242, 234, 214, 0.80)),
                    url('/static/backgrounds/background_day.webp');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

:root[data-theme=light]::before { opacity: 0; }
:root[data-theme=light]::after  { opacity: 1; }

/* Body must sit above the background layers (z-index: 0). Pico sets         */
/* body{background-color} which we clear so the background layers show.      */
body {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

/* All elements get smooth color/surface transitions on theme change.        */
/* Elements with explicit transition rules override this for their own props. */
* {
  transition:
    color            0.4s ease,
    background-color 0.4s ease,
    border-color     0.4s ease,
    box-shadow       0.4s ease;
}
/* Pico's button transition omits opacity, so disabled↔enabled flashes.
   Re-declare with opacity added; same specificity, later in cascade = wins. */
button,
[type=submit],
[type=button],
[type=reset] {
  transition:
    background-color var(--pico-transition),
    border-color     var(--pico-transition),
    color            var(--pico-transition),
    box-shadow       var(--pico-transition),
    opacity          var(--pico-transition);
}

/* ── Seal utilities ────────────────────────────────────────────────────── */
.seal {
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  border-radius: 50%;
}
.seal-sm  { width: 22px;  height: 22px; }
.seal-md  { width: 40px;  height: 40px; }
.seal-lg  { width: 56px;  height: 56px; }
.seal-xl  { width: 280px; height: 280px; }
.seal-win { width: 140px; height: 140px; border-radius: 0.75rem; }

/* ── Phase heading ─────────────────────────────────────────────────────── */
.phase-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.phase-heading h2 { margin: 0; }

/* ── Sidebar phase label (desktop) ─────────────────────────────────────── */
.sidebar-phase-label {
  font-family: "Metal Mania", var(--pico-font-family-emoji);
  font-size: 1.6em;
  color: var(--c-amber-bright);
  text-align: left;
  letter-spacing: 0.02em;
  margin-bottom: calc(var(--pico-spacing) * 0.5);
}
.sidebar-phase-day { color: var(--c-flame); }

/* ── Topbar phase label (mobile) ────────────────────────────────────────── */
.topbar-phase-label {
  font-family: "Metal Mania", var(--pico-font-family-emoji);
  font-size: 1.2em;
  color: var(--c-amber-bright);
  white-space: nowrap;
}
.topbar-phase-day { color: var(--c-flame); }


/* ── Game-content enter/exit animation ─────────────────────────────────── */
/* Similar to pc-enter: fade-up from slightly below. JS controls the exit.   */
@keyframes gc-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { transform: translateY(0); }
}
@keyframes gc-exit {
  to { opacity: 0; transform: translateY(-10px); }
}

/* Any newly inserted element anywhere inside game-content gets a quick
   fade-up (e.g. vote list appearing, survey section, story text).
   Existing morphed elements already ran this animation and stay put. */
#game-content * {
  animation: gc-enter 0.25s ease backwards;
}

/* Direct children (the <section>) get the longer staggered animation on
   phase transitions. Comes after * so it wins for direct children. */
#game-content > * {
  animation: gc-enter 0.38s ease backwards;
}
#game-content > *:nth-child(1)  { animation-delay: 0.04s; }
#game-content > *:nth-child(2)  { animation-delay: 0.10s; }
#game-content > *:nth-child(3)  { animation-delay: 0.16s; }
#game-content > *:nth-child(4)  { animation-delay: 0.22s; }
#game-content > *:nth-child(5)  { animation-delay: 0.28s; }
#game-content > *:nth-child(6)  { animation-delay: 0.34s; }
#game-content > *:nth-child(7)  { animation-delay: 0.40s; }
#game-content > *:nth-child(8)  { animation-delay: 0.46s; }

/* JS sets inline opacity/transform to 0 before the swap, then removes them
   so this transition fires and smoothly reveals the new content. */
#game-content {
  transition: opacity 0.35s ease, transform 0.35s ease,
              color 0.4s ease, background-color 0.4s ease,
              border-color 0.4s ease, box-shadow 0.4s ease;
}

/* ── Phase action layout (shared by night and day) ───────────────────────── */
/* Two-column: role card left (auto), action panel right (1fr) */
.phase-action-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--pico-spacing) * 1.25);
  align-items: start;
  margin-bottom: var(--pico-spacing);
}

/* Action panel: headers reset so they flow naturally */
.phase-action-panel > h3:first-child { margin-top: 0; }

/* Wolf Cub revenge sub-section */
.night-wolf-cub-section {
  border-top: 1px solid var(--c-border);
  margin-top: var(--pico-spacing);
  padding-top: var(--pico-spacing);
}

/* Sleeping state: big centered Night seal */
.night-sleeping {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--pico-spacing) * 2) var(--pico-spacing);
  gap: calc(var(--pico-spacing) * 0.75);
  text-align: center;
}
.night-sleeping p { margin: 0; color: var(--c-muted); }

@keyframes night-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.04); }
}
.night-seal-pulse {
  animation: night-pulse 5s ease-in-out infinite;
}

/* Mobile: phase layout stacks, card collapses via JS on load */
@media (max-width: 768px) {
  .phase-action-layout {
    grid-template-columns: 1fr;
    gap: calc(var(--pico-spacing) * 0.75);
  }
}

/* ── Status bar (lobby) ────────────────────────────────────────────────── */
.status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 1rem;
  background: var(--c-surface);
  border-radius: 0.5rem;
  border: 1px solid var(--c-border);
  margin-bottom: 1rem;
  font-size: 0.9em;
}
.status-bar .status-msg {
  margin-left: auto;
  color: var(--c-flame);
  font-style: italic;
}



/* ── Player list ───────────────────────────────────────────────────────── */
.player-list {
  list-style: none;
  padding: 0;
}
.player-list li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: var(--c-surface);
  margin-bottom: 0.2rem;
  border-radius: 0.3rem;
  font-size: 0.9em;
}
.dead-player {
  opacity: 0.5;
  text-decoration: line-through;
}
.werewolf-player { color: var(--c-danger); font-weight: bold; }

/* ── Vote grid ─────────────────────────────────────────────────────────── */
.vote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.4rem;
  margin: 0.75rem 0;
}
/* Make forms transparent to grid layout so buttons become grid items */
.vote-grid .vote-form { display: contents; }

/* ── Action / vote buttons ─────────────────────────────────────────────── */
.vote-button,
.seer-button,
.doctor-button,
.guard-button,
.hunter-button,
.cupid-button,
.witch-heal-button,
.witch-kill-button {
  background: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-amber);
}
.vote-button:hover,
.seer-button:hover,
.doctor-button:hover,
.guard-button:hover,
.hunter-button:hover,
.cupid-button:hover,
.witch-heal-button:hover,
.witch-kill-button:hover {
  background: var(--c-surface-2);
  border-color: var(--c-flame);
  color: var(--c-amber-bright);
}
.vote-button.selected {
  background: var(--c-vote-selected-bg);
  border-color: var(--c-danger);
  color: var(--c-amber-bright);
  box-shadow: 0 0 0 2px var(--c-vote-selected-ring);
}
.witch-pass-button {
  padding: 0.55rem 1rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 0.4rem;
  color: var(--c-muted);
  font-family: "IM Fell Great Primer", var(--pico-font-family-emoji);
  font-size: 0.9em;
  cursor: pointer;
  transition: border-color 0.1s ease, color 0.1s ease, background-color 0.4s ease, box-shadow 0.4s ease;
  margin: 0;
}
.witch-pass-button:hover { border-color: var(--c-amber); color: var(--c-amber); }

/* ── Seer result labels ────────────────────────────────────────────────── */
.seer-werewolf { color: var(--c-danger); font-weight: bold; }
.seer-safe     { color: var(--c-success); }

/* ── Vote list (tally) ─────────────────────────────────────────────────── */
.vote-list { list-style: none; padding: 0; }
.vote-list li {
  padding: 0.3rem 0.5rem;
  background: var(--c-surface);
  margin-bottom: 0.2rem;
  border-radius: 0.3rem;
  font-size: 0.9em;
}

/* ── Death announcement ────────────────────────────────────────────────── */
.death-announcement {
  border-left: 3px solid var(--c-danger);
  background: var(--c-death-bg);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  color: var(--c-death-text);
}
.death-announcement p { margin: 0.2rem 0; color: var(--c-death-text); }

/* ── Win screen ────────────────────────────────────────────────────────── */

/* Hero: big centered win seal */
.win-hero {
  display: flex;
  justify-content: center;
  padding: calc(var(--pico-spacing) * 1.5) 0 calc(var(--pico-spacing) * 0.5);
}

@keyframes win-seal-breathe {
  0%, 100% { opacity: 0.88; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.035); }
}
.win-seal-glow {
  animation: win-seal-breathe 5s ease-in-out infinite;
  border-radius: 50%;
}
.win-seal-villagers {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--c-success) 40%, transparent),
    0 0 52px color-mix(in srgb, var(--c-success) 22%, transparent),
    0 8px 32px var(--c-seal-shadow);
}
.win-seal-werewolves {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--c-danger) 48%, transparent),
    0 0 60px color-mix(in srgb, var(--c-danger) 28%, transparent),
    0 8px 32px var(--c-seal-shadow);
}
.win-seal-lovers {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--c-amber) 32%, transparent),
    0 0 52px color-mix(in srgb, var(--c-amber) 18%, transparent),
    0 8px 32px var(--c-seal-shadow);
}

/* Section titles */
.win-section-title        { color: var(--c-amber); margin-bottom: 0.75rem; }
.win-section-title-fallen { color: var(--c-muted); }