:root{
  --ivory:#fbf6ee;
  --ivory-2:#f4ecdf;
  --blush:#f5d8d2;
  --blush-deep:#e6b3aa;
  --rose:#c97a6e;
  --burgundy:#6b1f2a;
  --burgundy-2:#8a2d3a;
  --gold:#b8924a;
  --gold-soft:#d8b97c;
  --ink:#3a2226;
  --ink-soft:#6a4a4f;
  --green:#5e7a5a;
  --shadow: 0 30px 60px -30px rgba(107,31,42,.35), 0 8px 24px -10px rgba(107,31,42,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Inter', system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, #f9e2da 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 110%, #f1dcc1 0%, transparent 55%),
    var(--ivory);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.serif{font-family:'Cormorant Garamond', serif; font-weight:500; letter-spacing:.01em}
.script{font-family:'Allura', cursive;}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
input{font-family:inherit;}

.stage{ min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:32px 20px 60px; position:relative;}

.corner{position:fixed; width:240px; height:240px; pointer-events:none; opacity:.55; z-index:0}
.corner.tl{top:-30px; left:-30px;}
.corner.br{bottom:-30px; right:-30px; transform:rotate(180deg)}
@media(max-width:640px){ .corner{width:140px; height:140px;} }

.petals{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.petal{position:absolute; top:-30px; width:14px; height:18px; border-radius:60% 40% 60% 40%;
  background:linear-gradient(180deg,#f6c4bb,#e69d92);
  opacity:.55; animation:fall linear infinite;
  transform-origin:center;
  filter: drop-shadow(0 2px 2px rgba(107,31,42,.08));
}
.petal:nth-child(odd){background:linear-gradient(180deg,#fadfb1,#d8b97c); width:10px; height:14px;}
@keyframes fall{
  0%{transform:translateY(-30px) rotate(0deg)}
  100%{transform:translateY(110vh) rotate(540deg)}
}

.card{
  background:linear-gradient(180deg, #fffdf8, #fbf3e6);
  border:1px solid rgba(184,146,74,.35);
  box-shadow:var(--shadow);
  border-radius:22px;
  padding:42px 40px;
  width:100%; max-width:760px;
  position:relative; z-index:1;
}
.card.wide{ max-width: 1180px; padding: 48px 56px;}
@media(max-width:720px){ .card.wide{ padding: 32px 22px;} }
.card.center{text-align:center;}
.ornament{display:flex; align-items:center; justify-content:center; gap:14px; color:var(--gold); margin: 6px 0 18px;}
.ornament .line{height:1px; width:60px; background:linear-gradient(90deg, transparent, var(--gold), transparent)}
.ornament .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); transform:rotate(45deg)}

.eyebrow{ text-transform:uppercase; letter-spacing:.36em; font-size:11px; color:var(--gold); font-weight:600; }
h1.title{font-family:'Cormorant Garamond', serif; font-weight:500; font-size: clamp(48px, 8vw, 86px); line-height:1; margin:6px 0 0; color:var(--burgundy);}
h1.title .amp{font-family:'Allura', cursive; font-weight:400; font-size:1.1em; color:var(--rose); display:inline-block; transform:translateY(.06em); padding:0 .04em}
.subtitle{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:22px; color:var(--ink-soft); margin-top:10px;}
.date{font-size:12px; letter-spacing:.36em; text-transform:uppercase; color:var(--ink-soft); margin-top:14px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:999px; font-weight:600; font-size:15px; letter-spacing:.04em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  border:1px solid transparent;
}
.btn-primary{ background:var(--burgundy); color:#fff7ec; box-shadow:0 10px 24px -10px rgba(107,31,42,.65)}
.btn-primary:hover{ background:var(--burgundy-2); transform:translateY(-1px)}
.btn-ghost{ background:transparent; color:var(--burgundy); border-color:rgba(107,31,42,.35)}
.btn-ghost:hover{ background:rgba(107,31,42,.06)}
.btn-gold{ background:linear-gradient(180deg, var(--gold-soft), var(--gold)); color:#3b2912; box-shadow:0 10px 24px -10px rgba(184,146,74,.6)}

.lobby-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:42px; align-items:start;}
@media(max-width:980px){ .lobby-grid{ grid-template-columns:1fr; gap:30px;} }
.lobby-left{ text-align:center;}
.qr-section{ display:flex; gap:22px; align-items:center; justify-content:center; margin-top:26px; flex-wrap:wrap;}
.qr-box{
  background:#fff; border:1px solid rgba(184,146,74,.35); border-radius:18px; padding:14px;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  width:200px; height:200px;
}
.qr-box canvas, .qr-box img{ width:100%!important; height:auto!important; display:block; border-radius:6px;}
.qr-cap{ text-align:left; max-width:220px;}
.qr-cap .url-pill{ margin-top:8px; }
.url-pill{ display:inline-block; padding:8px 14px; background:#fff; border:1px dashed var(--gold); border-radius:999px; font-size:12px; color:var(--ink); letter-spacing:.06em; word-break:break-all}

.lobby-right{
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,253,248,.5));
  border:1px solid rgba(184,146,74,.35); border-radius:18px; padding:22px 22px 18px;
  min-height: 420px; display:flex; flex-direction:column;
}
.lobby-right-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px;}
.lobby-right-title{ font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--burgundy); margin:4px 0 0; font-size:30px; display:flex; align-items:center; gap:10px;}
.lobby-right-title .count{
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:30px; padding:0 10px;
  background:var(--burgundy); color:#fff7ec; border-radius:999px; font-size:16px; font-weight:600; font-family:'Inter',sans-serif;
}
.live-dot{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft);
  background:#fff; border:1px solid rgba(184,146,74,.35); padding:6px 12px; border-radius:999px;
}
.live-dot span{ width:8px; height:8px; border-radius:50%; background:#c44a3a; box-shadow:0 0 0 0 rgba(196,74,58,.5); animation:livepulse 1.6s infinite;}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(196,74,58,.6)} 70%{box-shadow:0 0 0 10px rgba(196,74,58,0)} 100%{box-shadow:0 0 0 0 rgba(196,74,58,0)}}

.players-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px; align-content:start;}
.players-grid.scroll{ flex:1; overflow-y:auto; padding-right:4px; max-height:560px;}
.players-grid.scroll::-webkit-scrollbar{ width:6px;}
.players-grid.scroll::-webkit-scrollbar-thumb{ background:rgba(184,146,74,.35); border-radius:3px;}
.player-pill{
  background:#fff; border:1px solid rgba(184,146,74,.4); border-radius:14px; padding:12px 14px;
  display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500;
  animation: pop .35s cubic-bezier(.2,1.6,.3,1);
}
.player-pill .ava{
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg, var(--blush), var(--gold-soft));
  color:var(--burgundy); display:grid; place-items:center; font-weight:700; font-size:13px; flex-shrink:0;
  font-family:'Cormorant Garamond', serif;
}
@keyframes pop{from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1}}
.lobby-empty{ text-align:center; color:var(--ink-soft); font-style:italic; padding:30px 0; font-family:'Cormorant Garamond', serif; font-size:20px;}

.name-input{
  width:100%; padding:18px 22px; border-radius:14px; border:1px solid rgba(184,146,74,.5);
  background:#fff; font-size:18px; color:var(--ink); outline:none;
  transition: border-color .2s, box-shadow .2s;
}
.name-input:focus{ border-color:var(--burgundy); box-shadow:0 0 0 4px rgba(107,31,42,.08)}

.waiting-pulse{
  width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle, var(--blush) 30%, transparent 70%);
  margin:30px auto;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.6} 50%{transform:scale(1.25); opacity:.95}}

.play-stage{ width:100%; max-width:1100px; }
.play-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:16px;}
.qmeta{ font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); font-weight:600;}
.timer{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid rgba(184,146,74,.4); border-radius:999px; padding:8px 18px;
  font-family:'Cormorant Garamond', serif; font-size:24px; font-weight:600; color:var(--burgundy);
  min-width:110px; justify-content:center;
}
.timer.warn{ color:#a13a26; border-color:#e7a89c; background:#fff4ef}

.progress-track{ height:8px; background:rgba(184,146,74,.18); border-radius:99px; overflow:hidden; margin-bottom:22px;}
.progress-fill{ height:100%; background:linear-gradient(90deg, var(--gold-soft), var(--gold)); will-change: width;}

.question-card{
  background:linear-gradient(180deg, #fffdf8, #fbf3e6);
  border:1px solid rgba(184,146,74,.35);
  border-radius:22px; padding: 36px 40px;
  box-shadow:var(--shadow);
  text-align:center; margin-bottom:20px;
}
.question-text{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size: clamp(26px, 3.6vw, 40px);
  color:var(--burgundy); line-height:1.2;
  text-wrap:balance;
}
.answers{ display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:640px){ .answers{grid-template-columns:1fr;} }
.answer{
  text-align:left; padding:22px 24px; border-radius:18px; font-size:18px; font-weight:500;
  background:#fff; border:1px solid rgba(184,146,74,.4); color:var(--ink);
  display:flex; align-items:center; gap:16px; min-height:84px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s, border-color .2s, color .2s;
  box-shadow:0 6px 16px -10px rgba(107,31,42,.2);
}
.answer:hover:not(:disabled){ transform:translateY(-2px); border-color:var(--burgundy);}
.answer:disabled{ cursor:default;}
.answer .marker{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-family:'Cormorant Garamond', serif; font-weight:600; font-size:20px;
  color:#fff; background:var(--burgundy);
}
.answer.picked{ border-color:var(--burgundy); background:#fff6ee; box-shadow:0 0 0 3px rgba(107,31,42,.15)}
.answer.correct{ background:#eef4e8; border-color:var(--green); color:#2e4527;}
.answer.correct .marker{ background:var(--green);}
.answer.wrong{ background:#fbebe7; border-color:#b04a3a; color:#7c2a1d; opacity:.85;}
.answer.wrong .marker{ background:#b04a3a;}
.answer.dim{ opacity:.45;}

.feedback{
  margin-top:18px; text-align:center; font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:22px; color:var(--ink-soft); min-height:32px;
}
.feedback.good{ color:var(--green);}
.feedback.bad{ color:#a23a2a;}

.scorechip{ font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}
.scorechip b{ color:var(--burgundy); font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600}

.results-wrap{ width:100%; max-width:780px;}
.podium{
  display:grid; grid-template-columns: .85fr 1fr 1.15fr 1fr .85fr; align-items:end; gap:14px;
  margin: 30px auto 14px; max-width:920px; padding-top:30px;
}
@media(max-width:720px){ .podium{ gap:8px; max-width:640px; } }
.podium-col{ display:flex; flex-direction:column; align-items:center;}
.podium-card{
  text-align:center; margin-bottom:10px; width:100%;
  animation: rise .6s cubic-bezier(.2,1.2,.3,1) both;
}
.podium-card .crown{ font-size:34px; line-height:1; color:var(--gold); margin-bottom:4px;}
.podium-card .pname{
  font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:600;
  color:var(--burgundy); margin:4px 0 2px; word-break:break-word; line-height:1.15;
}
.podium-card .pscore{ font-size:12px; color:var(--ink-soft); letter-spacing:.04em;}

.podium-bar{
  width:100%; border-radius:14px 14px 4px 4px;
  border:1px solid rgba(184,146,74,.45);
  border-bottom:none;
  box-shadow: 0 -8px 30px -16px rgba(107,31,42,.4), inset 0 -4px 16px rgba(184,146,74,.15);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:14px;
  position:relative;
  animation: barRise .8s cubic-bezier(.2,1,.3,1) both;
}
.podium-bar .rankNum{
  font-family:'Cormorant Garamond',serif; font-weight:600; line-height:1;
  color:#fff; text-shadow: 0 2px 4px rgba(0,0,0,.18);
}
.podium-bar.first{
  height:200px;
  background: linear-gradient(180deg, #f3cf73 0%, #c99b3e 60%, #a87a26 100%);
  border-color:#a87a26;
}
.podium-bar.first .rankNum{ font-size:96px; }
.podium-bar.second{
  height:150px;
  background: linear-gradient(180deg, #e2dccf 0%, #b8b1a3 60%, #8e8678 100%);
  border-color:#8e8678;
}
.podium-bar.second .rankNum{ font-size:72px; color:#fff;}
.podium-bar.third{
  height:115px;
  background: linear-gradient(180deg, #d8a981 0%, #b07d52 60%, #8a5a36 100%);
  border-color:#8a5a36;
}
.podium-bar.third .rankNum{ font-size:60px;}
.podium-bar.fourth{
  height:90px;
  background: linear-gradient(180deg, #e8d5a8 0%, #c4a875 60%, #998252 100%);
  border-color:#998252;
}
.podium-bar.fourth .rankNum{ font-size:48px; color:#fff;}
.podium-bar.fifth{
  height:75px;
  background: linear-gradient(180deg, #d8c8a8 0%, #b3a486 60%, #8c7e62 100%);
  border-color:#8c7e62;
}
.podium-bar.fifth .rankNum{ font-size:42px; color:#fff;}
.podium-bar.first  { animation-delay: .55s;}
.podium-bar.second { animation-delay: .35s;}
.podium-bar.third  { animation-delay: .2s;}
.podium-bar.fourth { animation-delay: .1s;}
.podium-bar.fifth  { animation-delay: 0s;}
.podium-card.delay-1{ animation-delay:.8s;}
.podium-card.delay-2{ animation-delay:.6s;}
.podium-card.delay-3{ animation-delay:.45s;}
.podium-card.delay-4{ animation-delay:.3s;}
.podium-card.delay-5{ animation-delay:.2s;}
@keyframes barRise{
  from{ transform: scaleY(.05); transform-origin: bottom; opacity:0;}
  to  { transform: scaleY(1);   transform-origin: bottom; opacity:1;}
}
@keyframes rise{
  from{ transform: translateY(20px); opacity:0;}
  to  { transform: translateY(0);    opacity:1;}
}
.podium-floor{
  height:6px; max-width:920px; margin: 0 auto 22px;
  background:linear-gradient(90deg, transparent, rgba(184,146,74,.5), transparent);
  border-radius:3px;
}
@media(max-width:720px){
  .podium-bar.first{ height:160px;} .podium-bar.first .rankNum{ font-size:60px;}
  .podium-bar.second{ height:120px;} .podium-bar.second .rankNum{ font-size:44px;}
  .podium-bar.third{ height:95px;} .podium-bar.third .rankNum{ font-size:38px;}
  .podium-bar.fourth{ height:75px;} .podium-bar.fourth .rankNum{ font-size:30px;}
  .podium-bar.fifth{ height:62px;} .podium-bar.fifth .rankNum{ font-size:26px;}
  .podium-card .pname{ font-size:15px;}
  .podium-card .pscore{ font-size:11px;}
}

.ranking{ display:flex; flex-direction:column; gap:10px;}
.rank-row{
  display:grid; grid-template-columns: 36px 1fr auto auto; gap:14px; align-items:center;
  background:#fff; border:1px solid rgba(184,146,74,.35); border-radius:14px; padding:12px 16px;
}
.rank-row .rank{ font-family:'Cormorant Garamond',serif; font-size:22px; color:var(--burgundy); font-weight:600;}
.rank-row .pname{ font-weight:600;}
.rank-row .ptime{ color:var(--ink-soft); font-size:13px;}
.rank-row .ppts{ font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--burgundy); font-size:18px;}
.rank-row.me{ background:#fff6ee; border-color:var(--burgundy);}

.muted{ color:var(--ink-soft); font-size:13px;}
.center{ text-align:center;}

.host-bar{ display:flex; gap:10px; justify-content:center; margin-top:24px; flex-wrap:wrap;}

.countdown{
  font-family:'Cormorant Garamond', serif; font-size:80px; font-weight:600; color:var(--burgundy);
  text-align:center; margin: 30px 0;
  animation: pop .35s cubic-bezier(.2,1.6,.3,1);
}

.hidden{ display:none !important;}

.monogram{
  width:74px; height:74px; border-radius:50%; margin:0 auto 6px;
  background:radial-gradient(circle at 30% 30%, #fff, #f1dcc1 70%, #d8b97c);
  border:1px solid rgba(184,146,74,.5);
  display:grid; place-items:center;
  font-family:'Allura', cursive; color:var(--burgundy); font-size:38px; line-height:1;
  box-shadow: inset 0 -8px 20px rgba(184,146,74,.25), 0 8px 18px -10px rgba(107,31,42,.3);
}

.leaf{ color:var(--gold); display:inline-block; vertical-align:middle;}

.role{ position:fixed; top:14px; right:14px; z-index:5; font-size:11px; letter-spacing:.3em; text-transform:uppercase; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid rgba(184,146,74,.4); color:var(--ink-soft); box-shadow:var(--shadow);}

/* ====== Lottery overlay ====== */
.lottery-overlay{
  position:fixed; inset:0; z-index:60;
  background:radial-gradient(circle at 50% 30%, rgba(255,247,236,.98) 0%, rgba(241,220,193,.96) 60%, rgba(107,31,42,.92) 100%);
  display:flex; align-items:center; justify-content:center;
  animation: fadein .4s ease-out;
  overflow:hidden;
}
@keyframes fadein{ from{opacity:0} to{opacity:1} }
.lottery-card{
  text-align:center; padding:50px 60px; max-width:760px; width:90%;
  position:relative; z-index:2;
}
.lottery-card .eyebrow{ color:var(--gold); font-size:13px; letter-spacing:.4em; }
.lottery-monogram{
  width:90px; height:90px; border-radius:50%; margin:14px auto 18px;
  background:radial-gradient(circle at 30% 30%, #fff, #f3cf73 70%, #b8924a);
  border:2px solid var(--gold);
  display:grid; place-items:center;
  font-family:'Allura', cursive; color:var(--burgundy); font-size:46px;
  box-shadow: 0 12px 30px -10px rgba(184,146,74,.6);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.lottery-spinner{
  font-family:'Cormorant Garamond', serif; font-weight:600;
  font-size: clamp(48px, 8vw, 96px); line-height:1.1; color:var(--burgundy);
  min-height:1.1em; padding:18px 0;
  text-shadow: 0 4px 14px rgba(107,31,42,.18);
  transition: transform .14s ease, color .3s, text-shadow .3s;
  word-break:break-word;
}
.lottery-spinner.tick{ transform: translateY(-6px); }
.lottery-spinner.settled{
  font-family:'Allura', cursive; font-weight:400;
  font-size: clamp(64px, 11vw, 132px);
  color:var(--gold);
  text-shadow: 0 0 30px rgba(243,207,115,.7), 0 4px 14px rgba(107,31,42,.25);
  animation: settle .9s cubic-bezier(.2,1.6,.3,1);
}
@keyframes settle{
  0%   { transform: scale(.4) rotate(-6deg); opacity:0; }
  60%  { transform: scale(1.15) rotate(2deg); opacity:1; }
  100% { transform: scale(1) rotate(0); }
}
.lottery-status{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:24px; color:var(--ink-soft); margin-top:8px; min-height:1.5em;
}
.lottery-status.crown{ color:var(--burgundy); font-style:normal; letter-spacing:.06em; }
.lottery-status.crown::before{ content:'♛  '; color:var(--gold); }
.lottery-actions{ display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap;}
.lottery-rays{
  position:absolute; inset:-50%; z-index:1; pointer-events:none; opacity:0;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(243,207,115,.45) 0deg 6deg,
      transparent 6deg 18deg);
  animation: rays 8s linear infinite;
  transition: opacity .8s ease-in;
}
.lottery-overlay.settled .lottery-rays{ opacity:.55; }
@keyframes rays{ to{ transform: rotate(360deg);} }