@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
:root{font-family:Manrope,system-ui,sans-serif;color:#fff8ec;background:#102c28;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 0,#355e46,transparent 55%),#102c28;min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:26px 5vw;border-bottom:1px solid #ffffff20}a{color:inherit;text-decoration:none}header a{font-weight:800;letter-spacing:2px}header span{font-size:12px;color:#b4c7b6}main{max-width:1100px;margin:auto;padding:48px 24px}h1{font-size:clamp(36px,5vw,70px);letter-spacing:-2px;line-height:1.05;margin:12px 0 24px}h2{font-size:26px}p{color:#bdd0c5;line-height:1.6}.tag{color:#efc478;text-transform:uppercase;letter-spacing:3px;font-size:12px;font-weight:800}.hero{max-width:650px;margin:auto}.card{background:#ffffff09;border:1px solid #ffffff20;border-radius:24px;padding:26px;margin:20px 0}.gold{color:#efc478}input,button{font:inherit;border-radius:12px;padding:15px 18px}input{width:100%;background:#102923;color:white;border:1px solid #ffffff40;margin:8px 0 18px}button{border:0;background:#efc478;color:#18352a;font-weight:800;cursor:pointer}button:disabled{opacity:.4;cursor:wait}.secondary{background:#ffffff12;color:white;border:1px solid #ffffff30}.danger{background:#a64242;color:white}label{display:block;color:#d7e0d9;font-size:14px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #efc478;outline-offset:4px}.actions{display:flex;gap:10px;flex-wrap:wrap}.grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}.photo{padding:0;overflow:hidden;margin:0;width:min-content;max-width:100%}.photo-open{display:block;padding:0;border:0;border-radius:0;background:transparent;cursor:zoom-in;max-width:100%}.photo-open img{display:block;width:auto;height:auto;max-width:min(360px,calc(100vw - 42px));max-height:320px}.photo .caption{padding:16px;overflow-wrap:anywhere}.avatar{width:52px;height:52px;border-radius:50%;object-fit:cover}.row{display:flex;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid #ffffff18}.row strong{flex:1}.score{font-size:26px;font-weight:800;color:#efc478}.rank{width:35px;color:#efc478;font-size:23px}.muted{opacity:.45}.split{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#fff8ec;color:#102c28;padding:16px 24px;border-radius:12px;display:none;z-index:5}.screen main{max-width:1600px}.screen .row{font-size:26px}.empty{border:1px dashed #ffffff35;text-align:center;border-radius:24px;padding:50px 24px;color:#bdd0c5}.note{font-size:13px}.preview{max-height:240px;max-width:100%;border-radius:16px;margin-bottom:18px}@media(max-width:650px){main{padding:30px 20px}.split{grid-template-columns:1fr}header{padding:22px 20px}header a{font-size:13px}.actions button{flex:1}h1{letter-spacing:-1px}}

.photo-viewer{padding:20px;border:1px solid #ffffff30;border-radius:20px;background:#102c28;color:#fff8ec;max-width:96vw;max-height:96dvh;overflow:auto;text-align:center}
.photo-viewer::backdrop{background:#000d}
.photo-viewer>img{display:block;width:auto;height:auto;max-width:calc(96vw - 44px);max-height:calc(96dvh - 130px);object-fit:contain;margin:auto}
.photo-viewer p{margin:12px 0 0}
.viewer-close{display:block;margin:0 0 12px auto;padding:8px 14px;background:#ffffff20;color:white}

/* Reveal scores once when the host switches the hall to a ranking. */
.winner{border:1px solid #efc47870;border-radius:22px;background:linear-gradient(115deg,#efc47820,#efc47806);padding:22px 20px;margin:12px 0 20px;box-shadow:0 0 45px #efc4780b}
.winner .rank{width:52px;flex-shrink:0}.trophy{display:inline-block;font-size:40px;line-height:1.2}
.winner-label{display:block;color:#efc478;font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-top:6px}
.screen .winner .avatar{width:76px;height:76px;border:2px solid #efc478}.screen .winner .score{font-size:42px}
.ranking-reveal .row{animation:score-arrive .7s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--place)*90ms)}
.ranking-reveal .winner{animation:winner-arrive 1s cubic-bezier(.2,.75,.25,1) both}
.ranking-reveal .trophy{animation:trophy-arrive 1.2s cubic-bezier(.2,.75,.25,1) both}
@keyframes score-arrive{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes winner-arrive{0%{opacity:0;transform:translateY(24px) scale(.94)}65%{opacity:1;transform:translateY(0) scale(1.015);box-shadow:0 0 65px #efc47835}100%{opacity:1;transform:scale(1);box-shadow:0 0 45px #efc4780b}}
@keyframes trophy-arrive{0%,15%{opacity:0;transform:scale(.2) rotate(-22deg)}65%{opacity:1;transform:scale(1.2) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.salute{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:4;animation:salute-finish 4s forwards}
.burst{position:absolute;width:0;height:0}.burst-0{left:22%;top:32%}.burst-1{left:76%;top:26%}.burst-2{left:53%;top:48%}
.burst i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--spark);box-shadow:0 0 10px var(--spark);opacity:0;animation:spark-burst 1.6s ease-out var(--wait) both}
@keyframes spark-burst{0%{opacity:0;transform:translate(0,0) scale(.2)}12%{opacity:1}65%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.25)}}
@keyframes salute-finish{to{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.ranking-reveal .row,.ranking-reveal .winner,.ranking-reveal .trophy{animation:none}.salute{display:none}}
@media(max-width:650px){.winner{gap:10px;padding:18px 12px}.winner .rank{width:40px}.trophy{font-size:32px}.screen .winner .avatar{width:52px;height:52px}.screen .winner .score{font-size:30px}}