@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');
:root{--bg:#071b15;--panel:#103126;--gold:#e8ca83;--gold2:#f6e5b8;--text:#f8f4e9;--muted:#b2c3b7;--line:#d8bd7840}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 75% 0%,#1d513d 0,transparent 42%),radial-gradient(ellipse at 0 80%,#123b2d 0,transparent 40%),var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif}
.snow{position:fixed;inset:0;pointer-events:none;opacity:.2;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#fff 2px,transparent 2px);background-size:43px 43px,107px 107px;animation:snowfall 17s linear infinite}
@keyframes snowfall{to{background-position:0 190px,0 190px}}
.shell{width:min(1540px,calc(100% - 56px));margin:auto;padding:28px 0 40px;position:relative}.hidden{display:none!important}.screen{position:relative;z-index:1}
.login-screen{width:min(700px,100%);min-height:500px;margin:5vh auto 0;padding:65px 50px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#174332f5,#0a2119f5);border:1px solid var(--line);border-radius:34px;box-shadow:0 28px 90px #0007;overflow:hidden}
.login-screen h1{font-family:"Playfair Display",serif;font-size:clamp(34px,5vw,60px);line-height:1.12;margin:0 0 34px;color:var(--gold2);max-width:100%;overflow-wrap:anywhere}
.pin-form{width:min(390px,100%);display:grid;gap:15px;text-align:left}.pin-form label{font-size:18px;color:var(--gold2);font-weight:700}.pin-form input{width:100%;min-width:0;background:#061810;border:1px solid var(--line);border-radius:15px;padding:17px 16px;color:white;font:700 26px Manrope;text-align:center;letter-spacing:.5em}
.btn{border:0;border-radius:14px;padding:16px 22px;font:800 16px Manrope,sans-serif;cursor:pointer;transition:transform .18s,filter .18s}.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn:disabled{opacity:.65;cursor:wait;transform:none}.primary{background:linear-gradient(135deg,#f2dda6,#c79d50);color:#1b3024}.secondary{background:#24513e;color:#f8e9c5;border:1px solid var(--line)}.ghost{background:#0b261eaa;color:var(--gold2);border:1px solid var(--line);padding:11px 17px;font-size:13px}.wide{width:100%;margin-top:18px}.error{min-height:18px;margin:0;text-align:center;color:#ffaaa1;font-size:13px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px}.topbar h1{margin:0;font:700 clamp(25px,3vw,38px) "Playfair Display",serif;color:var(--gold2)}
.panel{background:linear-gradient(145deg,#12382bf2,#0a241bf5);border:1px solid var(--line);border-radius:26px;padding:clamp(25px,3vw,46px);box-shadow:0 20px 60px #0003}.panel h2{font:700 clamp(28px,3vw,40px) "Playfair Display",serif;color:var(--gold2);margin:0 0 26px}
.participant-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.person{display:flex;align-items:center;gap:14px;padding:20px 18px;border:1px solid var(--line);border-radius:17px;background:#ffffff08;font-size:clamp(18px,1.7vw,23px);font-weight:700}.avatar{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,#f2dda6,#a87d3e);color:#20382a;font:700 23px "Playfair Display",serif;border:2px solid #f6e5b8}
.draw-layout,.final-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,370px);gap:34px;align-items:start}.draw-main{min-width:0}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--gold);margin:0 0 10px}.draw-main h2,.final-main h2{margin-bottom:22px}
.slot-stage{min-height:490px;border:1px solid #e8ca834d;border-radius:25px;background:radial-gradient(ellipse at center,#286046 0,#123b2c 48%,#0a241b 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px 24px;box-shadow:inset 0 0 55px #0005;overflow:hidden}
.slot-person{font:800 clamp(30px,4vw,48px) "Playfair Display",serif;color:#fff4d4;text-shadow:0 4px 22px #0009;margin-bottom:26px;min-height:58px}
.slot-label{font-size:13px;font-weight:900;letter-spacing:.19em;color:var(--gold);margin:0 0 17px}
.slot-window{height:142px;width:min(760px,100%);position:relative;overflow:hidden;border:2px solid #e8ca83;border-radius:18px;background:linear-gradient(180deg,#081b14,#123526 48%,#081b14);box-shadow:0 14px 40px #0009,inset 0 0 22px #0009}
.slot-window:before,.slot-window:after{content:"";position:absolute;z-index:2;left:0;right:0;height:27px;pointer-events:none}
.slot-window:before{top:0;background:linear-gradient(#071b15e8,transparent)}.slot-window:after{bottom:0;background:linear-gradient(transparent,#071b15e8)}
.slot-track{height:100%;display:flex;align-items:center;gap:12px;padding:0 12px;will-change:transform;transform:translateX(0)}
.slot-card{flex:0 0 104px;height:104px;display:grid;place-items:center;border:2px solid #f2d99a;border-radius:15px;background:linear-gradient(145deg,#315e49,#173a2b 60%,#102b20);color:#fff1c8;font-size:42px;font-weight:900;text-shadow:0 3px 8px #0008;box-shadow:0 5px 16px #0007,inset 0 1px 0 #ffffff38}
.slot-card.winner{background:linear-gradient(145deg,#f6e5b8,#c99b4d);color:#193326;border-color:#fff0c5;box-shadow:0 0 25px #f5d88a88}
.slot-pointer{position:absolute;z-index:5;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;filter:drop-shadow(0 3px 4px #0009)}
.slot-pointer.top{top:0;border-top:19px solid #f7e5b1}.slot-pointer.bottom{bottom:0;border-bottom:19px solid #f7e5b1}
.slot-result{font-size:clamp(48px,6vw,70px);font-weight:900;color:var(--gold2);line-height:1;margin:24px 0 4px;text-shadow:0 5px 20px #0008;min-height:70px}
.slot-caption{font-size:clamp(15px,1.5vw,19px);color:var(--muted);text-align:center;min-height:28px;margin:10px 0 0}
.progress-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:18px}.progress-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#ffffff09}.progress-row b{color:var(--gold2)}
.song-sidebar{background:#06181088;border:1px solid var(--line);border-radius:18px;padding:20px 22px;max-height:700px;overflow:auto}.song-sidebar h3{margin:0 0 14px;color:var(--gold2);font:700 23px "Playfair Display",serif}.song-sidebar ol{margin:0;padding-left:28px;display:grid;gap:9px}.song-sidebar li{padding:7px 0;color:#f5f0e3;font-size:15px}.song-sidebar li b{display:inline-block;min-width:24px;margin-right:8px;color:var(--gold);font-variant-numeric:tabular-nums}
.order-slot-stage{min-height:490px}.order-window{width:min(820px,100%);height:154px}.order-window .slot-card{flex-basis:94px;height:108px;font-size:40px}.order-result{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:24px}.order-result-row{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 10px;border:1px solid var(--line);border-radius:13px;background:#061810dd;animation:reveal .45s both}.order-result-row b{font-size:28px;color:var(--gold2)}.order-result-row span{font-size:17px;font-weight:800}@keyframes reveal{from{opacity:0;transform:translateY(15px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:separate;border-spacing:0 9px;font-size:clamp(15px,1.5vw,20px)}th{text-align:left;color:var(--gold);font-size:13px;letter-spacing:.06em;padding:8px 14px}td{padding:17px 14px;background:#ffffff0a;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px;color:var(--gold2);font-weight:800}td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0;color:var(--gold2);font-weight:800}
@media(max-width:900px){.shell{width:calc(100% - 28px);padding-top:18px}.draw-layout,.final-layout{grid-template-columns:1fr}.song-sidebar{max-height:none}.participant-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.login-screen{min-height:calc(100vh - 70px);margin:0 auto;padding:45px 22px}.slot-stage{min-height:430px}}
@media(max-width:560px){.participant-grid{gap:9px}.person{padding:12px 10px;font-size:15px;gap:9px}.avatar{width:38px;height:38px}.panel{padding:18px}.progress-list{grid-template-columns:1fr}.topbar h1{font-size:25px}.login-screen h1{font-size:36px}.slot-stage{min-height:390px;padding:24px 12px}.slot-window{height:112px}.slot-card{flex-basis:72px;height:78px;font-size:32px}.order-window .slot-card{flex-basis:68px;height:80px;font-size:31px}.order-result{grid-template-columns:repeat(2,minmax(0,1fr))}.order-result-row span{font-size:15px}}