/* ===================== RESET / BASE ===================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: #0d0805;
  color: var(--bodyc,#e8d8a8);
  font-family: 'IM Fell English', 'EB Garamond', Georgia, serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }

/* ===================== STAGE ===================== */
.stage {
  position: relative; min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr minmax(0, 820px) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "hdr hdr hdr"
    "left wheel right"
    "left wheel right";
  gap: 0;
  padding: 24px 32px 32px;
}

/* ===================== TŁO ===================== */
.bg-paper {
  position: absolute; inset: 0; z-index: 0;
  /* paper / pergamin */
  background:
    radial-gradient(ellipse at 30% 10%, var(--bg-tint1,rgba(220,180,110,0.18)), transparent 55%),
    radial-gradient(ellipse at 80% 90%, var(--bg-tint2,rgba(180,80,30,0.12)), transparent 60%),
    radial-gradient(ellipse at 50% 50%, var(--wood3,#2a1810) 0%, var(--bg2,#1a0e06) 60%, var(--bg3,#0a0503) 100%);
}
.bg-paper::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    /* włókna pergaminu */
    repeating-linear-gradient(91deg, rgba(var(--hi-rgb,255,235,180),0.025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(2deg,  rgba(var(--hi-rgb,255,235,180),0.022) 0 1px, transparent 1px 7px),
    /* plamki / patyna */
    radial-gradient(circle at 12% 22%, rgba(80,30,10,0.3) 0 2px, transparent 4px),
    radial-gradient(circle at 78% 35%, rgba(80,30,10,0.25) 0 1.5px, transparent 3px),
    radial-gradient(circle at 30% 70%, rgba(80,30,10,0.22) 0 2px, transparent 4px),
    radial-gradient(circle at 88% 78%, rgba(80,30,10,0.28) 0 2px, transparent 4px),
    radial-gradient(circle at 55% 90%, rgba(80,30,10,0.2) 0 1.5px, transparent 3px);
  mix-blend-mode: screen;
  opacity: 0.7;
}
.bg-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  z-index: 0;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.55) 100%),
    repeating-linear-gradient(90deg,
      var(--wood3,#2a1810) 0 90px,
      var(--floor2,#1f120a) 90px 92px,
      var(--wood3,#2a1810) 92px 180px,
      var(--floor2,#1f120a) 180px 182px);
  background-size: 100% 100%, 360px 100%;
  filter: contrast(1.05);
}
.bg-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,0.55) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(var(--glow-rgb,255,140,40),0.06) 0 30%, transparent 60%);
}

/* ===================== HEADER ===================== */
.hdr {
  grid-area: hdr;
  position: relative; z-index: 5;
  text-align: center;
  padding: 8px 0 6px;
  margin-bottom: 8px;
}
.hdr-sub { margin-top: 4px; margin-bottom: 40px; }
.hdr-eyebrow {
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.4em;
  color: var(--gold,#b88d3a);
  font-size: 13px;
  text-transform: uppercase;
}
.hdr-title {
  font-family: 'UnifrakturCook', 'IM Fell English SC', serif;
  font-size: 64px;
  margin: 4px 0 2px;
  color: var(--hdrc,var(--titlec,#f1dfb1));
  text-shadow:
    0 2px 0 var(--edge,#1a0e04),
    0 4px 18px rgba(var(--glow-rgb,255,180,80),0.15),
    0 0 30px rgba(var(--glow-rgb,255,160,60),0.1);
  font-weight: 700;
  line-height: 1;
}
.hdr-team {
  display: inline-flex; align-items: center; gap: 14px;
  margin: 6px 0 2px;
  color: var(--gold-lt,#d9b870);
  font-family: 'IM Fell English SC', serif;
  font-size: 18px;
  letter-spacing: 0.3em;
}
.hdr-flourish { color: var(--gold-mid,#8b6f3a); font-size: 22px; }
.hdr-team-name {
  background: linear-gradient(180deg, var(--hdrc,var(--titlec,#f1dfb1)), var(--gold2,#a8814a));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.hdr-sub {
  font-style: italic;
  color: var(--subc,#c9b58a);
  font-size: 15px;
  opacity: 0.85;
}

/* ===================== KOŁO STAGE ===================== */
.wheel-stage {
  grid-area: wheel;
  position: relative; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
  padding-top: 220px;
}
.wheel-wrap {
  position: relative;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.7))
          drop-shadow(0 0 40px rgba(var(--glow-rgb,255,140,40),0.08));
}
.wheel-clip {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
}
.wheel-svg {
  position: relative;
  transition: none;
  will-change: transform;
}
.wheel-ironring {
  position: absolute; inset: -14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #5a4838 0%, #2a2018 35%, #0a0805 70%);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.8),
    inset 0 0 0 4px #1a120a,
    0 0 0 2px #0a0805,
    0 6px 30px rgba(0,0,0,0.6);
}

/* MIECZ */
.sword-pointer {
  position: absolute;
  top: -40px;
  left: 50%;
  transform-origin: 50% 22px;
  z-index: 10;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.6));
  transition: transform 0.08s ease-out;
  pointer-events: none;
}

/* PRZYCISK SPIN */
.spin-btn {
  position: relative;
  border: none; outline: none;
  padding: 18px 48px;
  background:
    radial-gradient(ellipse at 50% 30%, var(--gold-hi,#c8a04a) 0%, var(--gold-mid,#8b6f3a) 50%, var(--gold-lo,#4a3318) 100%);
  color: var(--edge,#1a0e04);
  font-family: 'IM Fell English SC', serif;
  font-size: 18px;
  letter-spacing: 0.25em;
  font-weight: 700;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(var(--hi-rgb,255,235,180),0.6),
    inset 0 -3px 0 rgba(0,0,0,0.4),
    0 0 0 2px var(--wood3,#2a1810),
    0 0 0 4px var(--wood1,#6e4828),
    0 0 0 6px var(--wood3,#2a1810),
    0 8px 20px rgba(0,0,0,0.6),
    0 0 30px rgba(var(--glow-rgb,255,180,80),0.25);
  transition: transform 0.1s ease, box-shadow 0.2s;
  cursor: pointer;
}
.spin-btn::before, .spin-btn::after {
  content: '✦'; color: var(--wood3,#2a1810); opacity: 0.55;
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 13px;
}
.spin-btn::before { left: 18px; }
.spin-btn::after  { right: 18px; }
.spin-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(var(--hi-rgb,255,235,180),0.7),
    inset 0 -3px 0 rgba(0,0,0,0.4),
    0 0 0 2px var(--wood3,#2a1810),
    0 0 0 4px var(--gold-mid,#8b6f3a),
    0 0 0 6px var(--wood3,#2a1810),
    0 10px 24px rgba(0,0,0,0.6),
    0 0 40px rgba(var(--glow-rgb,255,180,80),0.4);
}
.spin-btn:active:not(:disabled) { transform: translateY(1px); }
.spin-btn:disabled {
  filter: saturate(0.5) brightness(0.7);
  cursor: not-allowed;
}

/* ===================== LEWA KOLUMNA - ZWÓJ ===================== */
.left-col {
  grid-area: left;
  position: relative; z-index: 4;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding-top: 20px;
}
.history-scroll {
  width: 280px;
  position: relative;
}
.scroll-cap {
  height: 22px;
  background:
    linear-gradient(180deg, var(--wood1,#6e4828) 0%, var(--wood2,#3a2412) 100%);
  border-radius: 14px;
  border: 2px solid var(--edge,#1a0e04);
  box-shadow:
    inset 0 1px 0 rgba(255,200,140,0.3),
    0 4px 8px rgba(0,0,0,0.5);
  position: relative;
}
.scroll-cap::before, .scroll-cap::after {
  content: ''; position: absolute; top: 50%;
  width: 14px; height: 14px;
  background: radial-gradient(circle at 35% 30%, var(--gold-kn,#a08355) 0%, var(--wood2,#3a2412) 80%);
  border-radius: 50%; transform: translateY(-50%);
  box-shadow: inset 0 0 0 1.5px var(--edge,#1a0e04);
}
.scroll-cap::before { left: -7px; }
.scroll-cap::after  { right: -7px; }
.scroll-body {
  background:
    linear-gradient(180deg, var(--paper-hi,#efdfb6) 0%, var(--paper-lo,#d8c389) 100%);
  border-left: 2px solid var(--wood1,#6e4828);
  border-right: 2px solid var(--wood1,#6e4828);
  padding: 22px 22px 26px;
  color: var(--wood2,#3a2412);
  position: relative;
  box-shadow:
    inset 6px 0 12px rgba(var(--pshadow-rgb,120,80,30),0.15),
    inset -6px 0 12px rgba(var(--pshadow-rgb,120,80,30),0.15),
    0 4px 16px rgba(0,0,0,0.4);
}
.scroll-body::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(var(--pshadow-rgb,120,70,20),0.15) 0 3px, transparent 6px),
    radial-gradient(circle at 70% 60%, rgba(var(--pshadow-rgb,120,70,20),0.12) 0 2px, transparent 5px),
    radial-gradient(circle at 40% 80%, rgba(var(--pshadow-rgb,120,70,20),0.15) 0 3px, transparent 6px),
    radial-gradient(circle at 85% 20%, rgba(var(--pshadow-rgb,120,70,20),0.1) 0 2px, transparent 4px);
  pointer-events: none;
}
.scroll-title {
  font-family: 'UnifrakturCook', serif;
  font-size: 22px;
  text-align: center;
  color: var(--ink-strong,#5a3318);
  border-bottom: 1.5px solid rgba(var(--ink-rgb,90,50,24),0.3);
  padding-bottom: 8px;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}
.scroll-empty {
  font-style: italic;
  text-align: center;
  color: var(--ink-soft,#8a6f44);
  padding: 16px 0;
}
.scroll-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-family: 'IM Fell English', serif;
  font-size: 15px;
}
.scroll-list li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(var(--ink-rgb,90,50,24),0.2);
}
.scroll-num {
  font-family: 'IM Fell English SC', serif;
  font-weight: 700;
  color: #8b3a1a;
  font-size: 13px;
}
.scroll-name {
  color: var(--wood2,#3a2412); font-weight: 600;
}
.scroll-date {
  font-size: 10px;
  color: var(--ink-soft,#8a6f44);
  font-style: italic;
}
.scroll-restore {
  margin-top: 14px;
  width: 100%;
  background: transparent;
  border: 1.5px solid rgba(var(--ink-rgb,90,50,24),0.4);
  color: var(--ink-strong,#5a3318);
  padding: 6px;
  font-family: 'IM Fell English SC', serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  border-radius: 2px;
}
.scroll-restore:hover {
  background: rgba(var(--ink-rgb,90,50,24),0.1);
}
.scroll-hint {
  font-family: 'EB Garamond', serif;
  font-style: italic; font-size: 13px;
  color: #6b4f2d; text-align: center;
  margin: 4px 0 12px; line-height: 1.4;
  opacity: 0.85;
}

/* ===================== PRAWA KOLUMNA - PANEL ===================== */
.right-col {
  grid-area: right;
  position: relative; z-index: 4;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding-top: 20px;
}
.control-panel {
  width: 280px;
  background:
    linear-gradient(180deg, var(--paper-hi,#efdfb6) 0%, var(--paper-lo,#d8c389) 100%);
  padding: 20px 22px;
  color: var(--wood2,#3a2412);
  border: 2px solid var(--edge,#1a0e04);
  border-radius: 4px;
  box-shadow:
    0 0 0 4px var(--wood1,#6e4828),
    0 0 0 6px var(--edge,#1a0e04),
    inset 0 0 30px rgba(var(--pshadow-rgb,120,80,30),0.15),
    0 8px 30px rgba(0,0,0,0.5);
  position: relative;
}
.control-panel::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 70%, rgba(var(--pshadow-rgb,120,70,20),0.12) 0 2px, transparent 5px),
    radial-gradient(circle at 80% 30%, rgba(var(--pshadow-rgb,120,70,20),0.1) 0 2px, transparent 4px);
  pointer-events: none;
}
.cp-title {
  font-family: 'UnifrakturCook', serif;
  font-size: 20px;
  color: var(--ink-strong,#5a3318);
  text-align: center;
  border-bottom: 1.5px solid rgba(var(--ink-rgb,90,50,24),0.3);
  padding-bottom: 6px;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.cp-presets { display: flex; flex-direction: column; gap: 8px; }
.preset {
  background: rgba(255,250,230,0.5);
  border: 1.5px solid rgba(var(--ink-rgb,90,50,24),0.4);
  border-radius: 3px;
  padding: 8px 12px;
  text-align: left;
  color: var(--wood2,#3a2412);
  transition: all 0.15s;
  font-family: inherit;
}
.preset:hover:not(:disabled) {
  background: rgba(255,250,230,0.85);
  border-color: var(--ink-strong,#5a3318);
}
.preset.active {
  background: linear-gradient(180deg, var(--gold-hi,#c8a04a), var(--gold-mid,#8b6f3a));
  color: var(--edge,#1a0e04);
  border-color: var(--edge,#1a0e04);
  box-shadow: inset 0 1px 0 rgba(var(--hi-rgb,255,235,180),0.5), 0 2px 6px rgba(0,0,0,0.25);
}
.preset:disabled { opacity: 0.5; cursor: not-allowed; }
.preset-label {
  font-family: 'IM Fell English SC', serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.preset-sub {
  font-size: 11px;
  font-style: italic;
  opacity: 0.8;
  margin-top: 2px;
}
.cp-divider {
  height: 1.5px;
  background: rgba(var(--ink-rgb,90,50,24),0.3);
  margin: 14px 0;
}
.cp-meta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cp-row { display: flex; justify-content: space-between; }
.cp-row strong { font-family: 'IM Fell English SC', serif; color: var(--ink-strong,#5a3318); }
.mute-toggle {
  margin-top: 14px;
  width: 100%;
  background: transparent;
  border: 1.5px solid rgba(var(--ink-rgb,90,50,24),0.4);
  color: var(--ink-strong,#5a3318);
  padding: 6px;
  font-family: 'IM Fell English SC', serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  border-radius: 2px;
}
.mute-toggle:hover { background: rgba(var(--ink-rgb,90,50,24),0.1); }
.cp-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cp-action {
  font-family: 'IM Fell English SC', serif;
  font-size: 14px; padding: 10px 14px;
  background: linear-gradient(180deg, #3a2a14, #251806);
  color: #f1dfb1; border: 1px solid #6b502a; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(241,223,177,0.08), 0 2px 6px rgba(0,0,0,0.5);
  cursor: pointer; letter-spacing: 0.05em; width: 100%;
  transition: transform 80ms ease, opacity 200ms ease;
}
.cp-action:hover:not(:disabled) { transform: translateY(-1px); }
.cp-action:active:not(:disabled) { transform: translateY(1px); }
.cp-action:disabled { opacity: 0.35; cursor: default; }
.cp-action-boost { border-color: #b07a2a; }
.cp-action-stop  { border-color: #7a2a2a; color: #f5c8c8; }

/* ===================== ŚWIECE ===================== */
.candle {
  position: absolute; z-index: 3;
  width: 36px; height: 130px;
  pointer-events: none;
}
.candle .holder {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 50px; height: 18px;
  background: radial-gradient(ellipse at 50% 30%, var(--gold,#b88d3a) 0%, var(--gold-lo,#4a3318) 80%);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.candle .wax {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 78px;
  background: linear-gradient(180deg, var(--titlec,#f1dfb1) 0%, #d8c08a 60%, var(--gold2,#a8814a) 100%);
  border-radius: 4px 4px 2px 2px;
  box-shadow:
    inset -3px 0 4px rgba(var(--pshadow-rgb,120,80,30),0.4),
    inset 3px 0 4px rgba(var(--hi-rgb,255,235,180),0.4);
}
.candle .wax::before {
  content: ''; position: absolute; top: -3px; left: 0; right: 0;
  height: 8px;
  background: radial-gradient(ellipse at 50% 100%, #d8b870 0%, transparent 70%);
  border-radius: 50%;
}
.candle .wick {
  position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);
  width: 1.5px; height: 8px; background: var(--wood3,#2a1810);
}
.candle .flame {
  position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 28px;
  background: radial-gradient(ellipse at 50% 80%, #ffe9a3 0%, #ffae3a 30%, #d96820 60%, transparent 80%);
  border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%;
  filter: blur(0.4px);
  animation: flicker 1.6s infinite alternate ease-in-out;
  transform-origin: 50% 100%;
  box-shadow: 0 0 30px rgba(255,160,60,0.6), 0 0 60px rgba(255,140,40,0.35);
}
.candle .flame-core {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 5px; height: 14px;
  background: radial-gradient(ellipse at 50% 80%, #fff8d4 0%, #ffd470 50%, transparent 90%);
  border-radius: 50%;
  animation: flickerCore 0.7s infinite alternate;
}
@keyframes flicker {
  0%   { transform: translateX(-50%) scale(1, 1) rotate(-1deg); opacity: 0.95; }
  30%  { transform: translateX(-50%) scale(1.06, 0.94) rotate(2deg); opacity: 1; }
  50%  { transform: translateX(-50%) scale(0.94, 1.08) rotate(-2deg); opacity: 0.85; }
  100% { transform: translateX(-50%) scale(1.02, 0.98) rotate(1deg); opacity: 1; }
}
@keyframes flickerCore {
  0%   { opacity: 0.7; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 1;   transform: translateX(-50%) scaleY(1.15); }
}

/* ===================== ZWYCIĘZCA ===================== */
.winner-overlay {
  position: fixed; inset: 0; z-index: 100;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.92) 100%);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.4s ease-out;
  backdrop-filter: blur(4px);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.winner-card {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  animation: cardIn 0.6s cubic-bezier(.2,1.4,.4,1);
}
@keyframes cardIn {
  0%   { transform: scale(0.7) rotate(-3deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.winner-frame {
  position: relative;
  width: 360px; height: 360px;
  background:
    linear-gradient(135deg, var(--gold,#b88d3a) 0%, var(--wood1,#6e4828) 50%, var(--gold,#b88d3a) 100%);
  border-radius: 6px;
  padding: 22px;
  box-shadow:
    inset 0 0 0 3px var(--edge,#1a0e04),
    inset 0 0 0 6px var(--gold-lt,#d9b870),
    inset 0 0 0 9px var(--edge,#1a0e04),
    0 0 80px rgba(var(--glow-rgb,255,180,80),0.5),
    0 30px 60px rgba(0,0,0,0.8);
}
.winner-frame::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-conic-gradient(from 0deg, transparent 0 18deg, rgba(0,0,0,0.18) 18deg 19deg);
  pointer-events: none;
  border-radius: 6px;
}
.winner-frame-inner {
  width: 100%; height: 100%;
  background: var(--edge,#1a0e04);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
}
.winner-photo {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
  animation: portraitSettle 1s ease-out;
}
@keyframes portraitSettle {
  0%   { transform: scale(1.2); filter: blur(8px) contrast(1.05); }
  100% { transform: scale(1);   filter: blur(0)   contrast(1.05); }
}
.winner-corner {
  position: absolute; width: 26px; height: 26px;
  background: radial-gradient(circle at 30% 30%, var(--titlec,#f1dfb1) 0%, var(--gold,#b88d3a) 50%, var(--ink-strong,#5a3318) 100%);
  border: 2px solid var(--edge,#1a0e04);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.winner-corner.tl { top: -6px; left: -6px; }
.winner-corner.tr { top: -6px; right: -6px; }
.winner-corner.bl { bottom: -6px; left: -6px; }
.winner-corner.br { bottom: -6px; right: -6px; }

/* MIECZ — wbicie w portret zwycięzcy */
.falling-sword {
  position: absolute;
  top: -34px;
  left: 50%;
  width: 86px;
  height: 280px;
  margin-left: -43px;
  z-index: 6;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.85));
  pointer-events: none;
  animation: swordFall 1.6s ease-in 0.55s both;
}
@keyframes swordFall {
  0%   { transform: translateY(-120vh) rotate(3deg); opacity: 0; }
  4%   { opacity: 1; }
  32%  { transform: translateY(0) rotate(0); }
  35%  { transform: translateY(-10px) rotate(-1.4deg); }
  38%  { transform: translateY(3px) rotate(0.6deg); }
  41%  { transform: translateY(0) rotate(0); opacity: 1; }
  55%  { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(-120vh) rotate(3deg); opacity: 0; }
}
.winner-impact-flash {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 35%, rgba(255,90,40,0.6) 0%, rgba(180,30,10,0.25) 35%, transparent 65%);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  animation: impactFlash 0.55s ease-out 1.1s both;
}
@keyframes impactFlash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

.winner-scroll {
  position: relative;
  background: linear-gradient(180deg, var(--paper-hi,#efdfb6) 0%, var(--paper-lo,#d8c389) 100%);
  padding: 28px 70px 24px;
  border-top: 2px solid var(--wood1,#6e4828);
  border-bottom: 2px solid var(--wood1,#6e4828);
  text-align: center;
  color: var(--wood2,#3a2412);
  min-width: 460px;
  box-shadow:
    inset 6px 0 12px rgba(var(--pshadow-rgb,120,80,30),0.15),
    inset -6px 0 12px rgba(var(--pshadow-rgb,120,80,30),0.15),
    0 8px 30px rgba(0,0,0,0.5);
}
.winner-scroll::before, .winner-scroll::after {
  content: ''; position: absolute; top: -2px; bottom: -2px; width: 28px;
  background:
    radial-gradient(ellipse at center, var(--wood1,#6e4828) 0%, var(--wood2,#3a2412) 80%);
  box-shadow: inset 0 0 0 1px var(--edge,#1a0e04);
}
.winner-scroll::before { left: -16px; border-radius: 14px 0 0 14px; }
.winner-scroll::after  { right: -16px; border-radius: 0 14px 14px 0; }
.hop {
  font-family: 'UnifrakturCook', serif;
  font-size: 56px;
  color: var(--accent,#8b1a1a);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
  line-height: 1;
  letter-spacing: 0.02em;
  animation: hopBounce 0.7s ease-out 0.3s both;
}
@keyframes hopBounce {
  0%   { transform: translateY(-30px) scale(0.6); opacity: 0; }
  60%  { transform: translateY(8px) scale(1.1); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.winner-name {
  font-family: 'IM Fell English SC', serif;
  font-size: 28px;
  letter-spacing: 0.15em;
  color: var(--ink-strong,#5a3318);
  margin-top: 8px;
}
.winner-sub {
  font-style: italic;
  font-size: 14px;
  color: var(--wood1,#6e4828);
  margin-top: 4px;
  opacity: 0.85;
}
.winner-actions {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}

/* ===================== BUTTONS GENERIC ===================== */
.btn {
  border: none;
  padding: 12px 26px;
  font-family: 'IM Fell English SC', serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  font-weight: 700;
  border-radius: 3px;
  transition: all 0.15s;
  cursor: pointer;
}
.btn-primary {
  background: radial-gradient(ellipse at 50% 30%, var(--gold-hi,#c8a04a) 0%, var(--gold-mid,#8b6f3a) 50%, var(--gold-lo,#4a3318) 100%);
  color: var(--edge,#1a0e04);
  box-shadow:
    inset 0 1px 0 rgba(var(--hi-rgb,255,235,180),0.6),
    inset 0 -2px 0 rgba(0,0,0,0.4),
    0 0 0 1.5px var(--wood3,#2a1810),
    0 0 0 3px var(--wood1,#6e4828),
    0 0 0 4.5px var(--wood3,#2a1810),
    0 6px 16px rgba(0,0,0,0.5);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost {
  background: rgba(20,12,4,0.4);
  color: var(--gold-lt,#d9b870);
  border: 1.5px solid var(--wood1,#6e4828);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(40,24,8,0.6); border-color: var(--gold,#b88d3a); }

/* ===================== EMPTY STATE ===================== */
.empty-wheel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
  border: 2px dashed rgba(184,141,58,0.4);
  border-radius: 50%;
  color: var(--gold-lt,#d9b870);
  font-family: 'UnifrakturCook', serif;
}
.empty-title { font-size: 36px; text-align: center; }

/* ===================== TYPOGRAPHY IMPORTS ===================== */
/* loaded via index.html */

/* ===================== MOTYWY SEZONOWE ===================== */
.fx-canvas{position:fixed;inset:0;z-index:2;pointer-events:none;}
.cp-subtitle{font-family:'UnifrakturCook',serif;font-size:18px;color:var(--ink-strong,#5a3318);text-align:center;margin:0 0 8px;}
.cp-themes{display:flex;flex-direction:column;gap:6px;}
.theme-chip{display:flex;justify-content:space-between;align-items:center;gap:8px;background:rgba(255,250,230,0.5);border:1.5px solid rgba(var(--ink-rgb,90,50,24),0.4);border-radius:3px;padding:6px 12px;font-family:'IM Fell English SC',serif;font-size:12.5px;font-weight:700;letter-spacing:0.08em;color:var(--wood2,#3a2412);transition:all .15s;}
.theme-chip:hover{background:rgba(255,250,230,0.85);border-color:var(--ink-strong,#5a3318);}
.theme-chip.active{background:linear-gradient(180deg,var(--gold-hi,#c8a04a),var(--gold-mid,#8b6f3a));color:var(--edge,#1a0e04);border-color:var(--edge,#1a0e04);box-shadow:inset 0 1px 0 rgba(var(--hi-rgb,255,235,180),0.5),0 2px 6px rgba(0,0,0,0.25);}
.theme-glyph{font-size:14px;opacity:.8;}
.stage[data-theme="winter"]{--paper-hi:#dfe8f0;--paper-lo:#bccbd9;--wood2:#243140;--ink-strong:#33485e;--wood1:#41546a;--edge:#0b1118;--wood3:#1b2531;--floor2:#141c26;--gold-hi:#c2d2e2;--gold-mid:#7e93a8;--gold-lo:#3c4e62;--gold:#8fa6bb;--gold-lt:#cddced;--gold2:#93a9be;--gold-kn:#9db3c8;--accent:#2f6b8f;--titlec:#eaf2fa;--bodyc:#d3dfeb;--subc:#9db3c8;--ink-soft:#5f7386;--bg2:#101823;--bg3:#070b11;--bg-tint1:rgba(150,190,230,0.16);--bg-tint2:rgba(80,120,170,0.12);--ink-rgb:38,52,68;--pshadow-rgb:70,95,120;--glow-rgb:160,205,255;--hi-rgb:230,242,255;}
.stage[data-theme="spring"]{--paper-hi:#eef0d6;--paper-lo:#d6dcab;--wood2:#31391b;--ink-strong:#42551f;--wood1:#5d6a33;--edge:#12160a;--wood3:#232b13;--floor2:#1a210e;--gold-hi:#adc55e;--gold-mid:#75903c;--gold-lo:#3c4c1a;--gold:#8ca64b;--gold-lt:#c8da8c;--gold2:#97a95c;--gold-kn:#a9bb6d;--accent:#a84a6e;--titlec:#f2f6da;--bodyc:#dfe7ba;--subc:#b7c793;--ink-soft:#79855c;--bg2:#131c0d;--bg3:#080c05;--bg-tint1:rgba(190,225,130,0.15);--bg-tint2:rgba(230,160,195,0.10);--ink-rgb:49,57,27;--pshadow-rgb:95,110,45;--glow-rgb:190,235,130;--hi-rgb:240,250,215;}
.stage[data-theme="summer"]{--paper-hi:#f5e7b6;--paper-lo:#e2ca88;--wood2:#4a3410;--ink-strong:#6b4b15;--wood1:#8c5e29;--edge:#1b1105;--wood3:#342108;--floor2:#271807;--gold-hi:#e3ba4f;--gold-mid:#ab862f;--gold-lo:#5e4310;--gold:#cb9e3f;--gold-lt:#eed48c;--gold2:#c3993f;--gold-kn:#d3ab55;--accent:#a83d15;--titlec:#fceec5;--bodyc:#f1e0aa;--subc:#d9bd81;--ink-soft:#96793f;--bg2:#211708;--bg3:#0f0a03;--bg-tint1:rgba(255,215,115,0.2);--bg-tint2:rgba(230,120,40,0.12);--ink-rgb:106,75,21;--pshadow-rgb:150,105,35;--glow-rgb:255,205,95;--hi-rgb:255,240,190;}
.stage[data-theme="autumn"]{--paper-hi:#edd9ad;--paper-lo:#d6b680;--wood2:#3d1f0d;--ink-strong:#5d3111;--wood1:#703c1d;--edge:#170a03;--wood3:#2b1509;--floor2:#200f06;--gold-hi:#ce7e35;--gold-mid:#96541f;--gold-lo:#4e290c;--gold:#b26c2d;--gold-lt:#e2a669;--gold2:#b57838;--gold-kn:#c08448;--accent:#8b1a1a;--titlec:#f5ddb2;--bodyc:#e6ca9a;--subc:#caa272;--ink-soft:#8f6a42;--bg2:#1f0d05;--bg3:#0d0502;--bg-tint1:rgba(245,145,65,0.16);--bg-tint2:rgba(180,60,20,0.14);--ink-rgb:61,31,13;--pshadow-rgb:120,65,25;--glow-rgb:255,150,60;--hi-rgb:255,230,185;}

/* ===== DEKORACJE SEZONOWE (statyczne) ===== */
.ring-dressing{position:absolute;inset:-30px;pointer-events:none;z-index:5;}
.bunting{position:fixed;top:0;left:0;width:100%;height:80px;z-index:3;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.35));}
.floor-leaves{position:fixed;bottom:0;left:0;width:100%;height:80px;z-index:3;pointer-events:none;}
.stage[data-theme="summer"] .wheel-wrap::before{content:'';position:absolute;inset:-80px;border-radius:50%;background:radial-gradient(circle,rgba(255,205,95,0.22) 0%,rgba(255,180,60,0.1) 45%,transparent 70%);}
.stage[data-theme="winter"] .bg-vignette::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 0% 0%,rgba(220,238,252,0.2),transparent 28%),radial-gradient(circle at 100% 0%,rgba(220,238,252,0.18),transparent 26%),radial-gradient(circle at 0% 100%,rgba(220,238,252,0.14),transparent 24%),radial-gradient(circle at 100% 100%,rgba(220,238,252,0.16),transparent 28%);}

/* ===== SCENY TLA ===== */
.scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.stage[data-theme="spring"] .bg-floor,.stage[data-theme="summer"] .bg-floor,.stage[data-theme="autumn"] .bg-floor,.stage[data-theme="winter"] .bg-floor{display:none;}
.stage[data-theme="spring"]{--hdrc:#3e4a1c;--subc:#44562a;}
.stage[data-theme="summer"]{--hdrc:#4a3410;--subc:#5c4415;}
.stage[data-theme="spring"] .hdr-eyebrow{color:#55682e;}
.stage[data-theme="summer"] .hdr-eyebrow{color:#7a5c1e;}
.stage[data-theme="spring"] .hdr-title,.stage[data-theme="summer"] .hdr-title{text-shadow:0 1px 0 rgba(255,255,255,0.35),0 2px 10px rgba(0,0,0,0.18);}
.stage[data-theme="spring"] .bg-vignette,.stage[data-theme="summer"] .bg-vignette{background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,0.28) 100%);}

/* ===================== RESPONSIVE ===================== */
@media (max-height: 700px), (max-width: 900px) {
  .candle { display: none; }
}

@media (max-width: 900px) {
  .stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "hdr" "wheel" "right" "left";
    padding: 16px;
  }
  .left-col, .right-col {
    justify-content: center;
    padding-top: 0;
  }
  .history-scroll, .control-panel { width: 100%; max-width: 500px; }
}

@media (max-height: 700px) {
  .hdr-title { font-size: 44px; }
  .hdr-sub { margin-bottom: 10px; }
}