/* NOEL OR NO NOEL: styles. Colours are in :root, change them there. */
:root{--navy:#050b2e;--navy2:#0d1a5c;--gold:#ffd24a;--gold2:#b8860b;--amber:#ff9d00;--white:#fff;--red:#e8334a;--green:#27c46b}
*{box-sizing:border-box}
html{background:var(--navy);overscroll-behavior:none}
html,body{margin:0;min-height:100%}
body{font-family:Georgia,'Times New Roman',serif;color:var(--white);text-align:center;padding:12px 12px 40px;min-height:100vh;min-height:100dvh}
/* Backdrop on a fixed layer: "background-attachment: fixed" breaks on phones and left white gaps when scrolling */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 0,#1d3bb8 0,var(--navy2) 35%,var(--navy) 80%)}
.lights{position:fixed;inset:0 0 auto;height:14px;z-index:5;
 background:repeating-linear-gradient(90deg,var(--gold) 0 14px,var(--amber) 14px 28px,#fff 28px 42px);
 animation:blink .8s steps(2) infinite;box-shadow:0 0 20px var(--amber)}
@keyframes blink{50%{filter:brightness(.4)}}
.screen{display:none;max-width:560px;margin:24px auto 0}.screen.on{display:block}
h1{font-size:clamp(2.6rem,13vw,5rem);line-height:.95;margin:16px 0;letter-spacing:2px;
 background:linear-gradient(#fff6c0,var(--gold) 45%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 0 14px var(--amber));animation:pulse 2s ease-in-out infinite}
h1 span{font-size:.4em;display:block;color:var(--white);-webkit-text-fill-color:var(--white)}
@keyframes pulse{50%{filter:drop-shadow(0 0 28px var(--gold))}}
h2,h3{color:var(--gold);text-shadow:0 0 10px var(--amber)}
.sub{font-style:italic;color:#cfd8ff}
.menu{display:grid;gap:12px;margin:22px 0}
button{font:inherit;cursor:pointer}
.gold{padding:16px 22px;font-size:1.2rem;font-weight:bold;color:#2a1a00;border:2px solid #fff3b0;border-radius:40px;
 background:linear-gradient(#fff0a0,var(--gold) 50%,var(--amber));box-shadow:0 4px 0 var(--gold2),0 0 18px rgba(255,190,0,.5);min-height:56px;transition:transform .1s}
.gold:active{transform:translateY(3px)}.gold:disabled{filter:grayscale(.8) brightness(.7)}
.gold.hard{background:linear-gradient(#ffb0b0,var(--red))}
.mini{position:fixed;top:22px;right:12px;z-index:6;background:#0008;border:1px solid var(--gold);border-radius:50%;width:42px;height:42px;color:#fff}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:16px 0}
.stat{background:#0007;border:1px solid var(--gold);border-radius:12px;padding:10px}
.stat b{display:block;font-size:1.6rem;color:var(--gold)}
.fact{border:1px dashed var(--amber);padding:10px;border-radius:10px;color:#ffe9a8;font-size:.95rem}
.hud{display:flex;justify-content:space-between;gap:6px;font-weight:bold;color:var(--gold);font-size:.95rem}
.host{display:flex;align-items:center;gap:10px;margin:10px 0;text-align:left}
.knight{font-size:2.4rem}
.bubble{background:#fff;color:var(--navy);padding:8px 12px;border-radius:14px;font-style:italic;flex:1;min-height:42px}
.frame{aspect-ratio:1;width:100%;border:6px solid var(--gold);border-radius:14px;overflow:hidden;position:relative;
 box-shadow:0 0 0 3px var(--gold2),0 0 30px var(--amber);background:#000}
#pic{position:absolute;inset:0;background-repeat:no-repeat;background-color:#111;transition:background-size 1.6s cubic-bezier(.2,.8,.2,1),background-position 1.6s cubic-bezier(.2,.8,.2,1)}
#curtain{position:absolute;inset:0;background:repeating-linear-gradient(45deg,#0000 0 10px,#ffd24a22 10px 20px);opacity:0;pointer-events:none}
.suspense #curtain{opacity:1;animation:blink .3s steps(2) infinite}
.tag{font-size:.8rem;color:#9fb0ff;margin:6px 0;min-height:1.2em}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}
.yes{background:linear-gradient(#b8ffd0,var(--green))}.no{background:linear-gradient(#ffc0c0,var(--red))}
.verdict{margin-top:10px;animation:pop .5s}.hidden{display:none}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.verdict h2{font-size:2rem;margin:4px}
.meter{height:26px;border:3px solid var(--gold);border-radius:20px;background:linear-gradient(90deg,var(--red),var(--amber),var(--green));position:relative;overflow:hidden}
#needle{position:absolute;top:0;bottom:0;width:6px;background:#fff;box-shadow:0 0 10px #fff;left:0;transition:left 1.4s cubic-bezier(.3,1.5,.5,1)}
.mlabel{margin:6px 0 12px}
.big{font-size:5rem;color:var(--gold);text-shadow:0 0 25px var(--amber)}
.rank{font-size:1.6rem;color:var(--gold)}
.ach{display:grid;gap:6px}.ach div{background:#0007;border-radius:10px;padding:8px;border:1px solid #556}.ach .got{border-color:var(--gold);color:var(--gold)}
#dailyList div{padding:4px}
#toast{position:fixed;left:50%;top:70px;transform:translate(-50%,-200px);background:linear-gradient(#fff0a0,var(--amber));color:#2a1a00;padding:12px 20px;border-radius:14px;font-weight:bold;z-index:9;transition:transform .5s;box-shadow:0 0 30px var(--gold)}
#toast.show{transform:translate(-50%,0)}
.shake{animation:shake .5s}@keyframes shake{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Upload dialog */
dialog{background:var(--navy2);color:#fff;border:3px solid var(--gold);border-radius:16px;width:94%;max-width:520px;box-shadow:0 0 40px var(--amber)}
dialog::backdrop{background:#000b}
dialog input[type=text],dialog input:not([type]){width:100%;padding:10px;font:inherit;border-radius:8px;border:2px solid var(--gold);margin:6px 0}
dialog input[type=file]{max-width:100%}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.row .gold{flex:1;font-size:1rem;padding:12px}
#upWrap{position:relative;display:inline-block;touch-action:none;max-width:100%}
#upWrap img{display:block;max-width:100%;max-height:45vh;user-select:none;-webkit-user-drag:none}
#upBox{position:absolute;border:3px solid var(--amber);background:#ffd24a33;display:none;pointer-events:none}
.mini2{background:#0008;color:#fff;border:1px solid var(--gold);border-radius:20px;padding:8px 14px}
/* Leaderboard + admin */
.board div{display:flex;justify-content:space-between;background:#0007;border:1px solid #556;border-radius:10px;padding:6px 12px;margin:4px 0}
.board div:first-child{border-color:var(--gold);color:var(--gold)}
#nameBox{margin:12px 0}#nameBox input{padding:12px;font:inherit;border-radius:10px;border:2px solid var(--gold);width:100%;margin-bottom:8px}
#upList div{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:.85rem}
#upList img{width:44px;height:44px;object-fit:cover;border-radius:6px}
#upList span{flex:1;text-align:left}
#adminBtn{margin-top:16px;opacity:.6}