*{box-sizing:border-box}html{background:#070109}body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% 4%,#571126,transparent 30%),radial-gradient(circle at 4% 70%,#153b38,transparent 34%),#08020b;color:#fff;font-family:Arial,sans-serif;overflow-x:hidden}.lightning{position:fixed;inset:0;background:#e9f3ff;opacity:0;z-index:99;pointer-events:none}.moon{position:fixed;right:-35px;top:95px;width:170px;height:170px;border-radius:50%;background:#ffe9a8;opacity:.12;box-shadow:0 0 80px #fff1a877}.moon:after{content:"";position:absolute;width:32px;height:32px;border-radius:50%;background:#4b405544;left:35px;top:40px}.fog{position:fixed;left:-30%;width:160%;height:220px;background:radial-gradient(ellipse,#c6ded029,transparent 66%);filter:blur(25px);pointer-events:none;animation:fog 19s ease-in-out infinite}.f1{top:20%}.f2{bottom:4%;animation-duration:27s;animation-direction:reverse}@keyframes fog{50%{transform:translateX(18%) scale(1.15)}}.bats{position:fixed;top:14%;left:-20%;z-index:1;font-size:25px;opacity:.35;animation:fly 14s linear infinite}@keyframes fly{to{left:110%;transform:translateY(-60px)}}.pumpkins{position:fixed;z-index:1;bottom:10px;left:12px;right:12px;display:flex;justify-content:space-between;font-size:42px;filter:drop-shadow(0 0 16px #ff7800);animation:flicker 2s infinite}@keyframes flicker{50%{filter:drop-shadow(0 0 28px #ffb000);opacity:.85}}header{position:sticky;top:0;z-index:10;background:#08020bee;backdrop-filter:blur(13px);border-bottom:1px solid #ffffff14}.brand{max-width:620px;margin:auto;padding:13px 16px;display:flex;align-items:center;gap:11px;font-size:32px}.brand span{display:grid}.brand b,h1{font-family:Georgia,serif;color:#ffab42;text-shadow:0 0 20px #ff570066}.brand small{color:#c1adc7;font-size:11px}.brand a{margin-left:auto;color:#fff;text-decoration:none}nav{max-width:588px;margin:0 auto 9px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#ffffff0b;padding:4px;border-radius:16px}button{border:0;border-radius:14px;min-height:47px;font-weight:900;cursor:pointer}nav button{background:transparent;color:#ad9bb2}nav button.on,.primary,.vote{background:linear-gradient(135deg,#ffb02d,#ff6200);color:#1c0710;box-shadow:0 0 18px #ff6c0028}main{position:relative;z-index:2;max-width:620px;margin:auto;padding:22px 16px 90px}section>small,.title small{color:#ff7d1f;font-size:10px;font-weight:900;letter-spacing:.2em}.title{display:flex;align-items:end;justify-content:space-between}.title h1{margin:5px 0 15px}.title em{display:grid;font-style:normal;background:#ff790010;border:1px solid #ff790033;padding:9px;border-radius:15px}.title em small{font-size:8px}.closed{padding:13px;border:1px solid #cf1f4055;background:#cf1f4018;border-radius:17px;margin-bottom:14px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cards article{overflow:hidden;background:linear-gradient(150deg,#211428,#100813);border:1px solid #6cff841b;border-radius:25px;box-shadow:0 12px 28px #0009,0 0 18px #64ff7710;transition:.25s}.cards article:hover{transform:translateY(-3px);box-shadow:0 15px 32px #0009,0 0 28px #61ff7844}.photo{position:relative;aspect-ratio:4/5;overflow:hidden}.photo img{width:100%;height:100%;object-fit:cover}.photo i{position:absolute;opacity:0;inset:0;display:grid;place-items:center;font-size:35px;background:#4fff7022;transition:.25s}.cards article:hover .photo i{opacity:1}.cards article>div:last-child{padding:12px}.cards h3,.cards p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:3px 0}.cards p{font-size:11px;color:#aa99ae}.vote{width:100%;margin-top:9px}.vote.done{background:#5ddd78}.vote:disabled{opacity:.5}.empty{grid-column:1/-1;text-align:center;padding:50px;font-size:28px}section>p{color:#b3a1b8;line-height:1.5}form{display:grid;gap:15px}label{display:grid;gap:7px;font-size:13px;font-weight:800}input{min-height:52px;border:1px solid #ffffff17;border-radius:15px;background:#ffffff08;color:#fff;padding:0 13px;font-size:16px}.hide{display:none}.picker{display:grid;grid-template-columns:1fr 1fr;gap:10px}.picker button{min-height:100px;background:#ff780010;border:1px dashed #ff8d3e66;color:#fff;font-size:28px}.picker b{display:block;font-size:12px;margin-top:8px}#preview{min-height:80px;border-radius:17px;background:#ffffff08;display:flex;align-items:center;gap:12px;padding:10px;color:#a997ad}#preview img{width:70px;height:70px;object-fit:cover;border-radius:13px}.live{color:#62ed7f}.rank,.person{display:flex;align-items:center;gap:11px;background:#ffffff08;border:1px solid #ffffff12;border-radius:20px;padding:10px;margin:9px 0}.rank.first{border-color:#ff9d3b55;box-shadow:0 0 25px #ff7b001f}.rank img,.person img{width:56px;height:64px;object-fit:cover;border-radius:14px}.rank span,.person span{display:grid;min-width:0;flex:1}.rank small,.person small{color:#a896ad}.rank em{font-style:normal;color:#ffad47;font-size:22px}.rank em small{display:block;font-size:9px}.msg{padding:12px;border-radius:14px;background:#ffffff10;margin-bottom:12px}.admin{max-width:600px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stats b{padding:16px;background:#ffffff09;border-radius:16px;font-size:30px}.stats small{display:block;font-size:10px;color:#a997ad}.danger{width:100%;background:#d51e3b2c;color:#ff8a9c;border:1px solid #d51e3b55}.person form{margin:0}#snack{position:fixed;z-index:100;bottom:18px;left:50%;transform:translate(-50%,30px);opacity:0;width:calc(100% - 30px);max-width:440px;background:#fff;color:#150619;padding:13px;border-radius:14px;text-align:center;font-weight:bold;transition:.25s}.show{opacity:1!important;transform:translate(-50%,0)!important}.screen main{max-width:1400px;padding:3vh 4vw}.screenhead{display:flex;justify-content:space-between;align-items:center}.screenhead h1{font-size:clamp(38px,5vw,78px);margin:5px 0}.q{display:grid;justify-items:center;background:#fff;color:#160619;padding:10px;border-radius:20px}.q img{width:150px}.q b{font-size:12px}#big{display:grid;grid-template-columns:1fr 1fr;gap:1vh 1vw}#big article{display:grid;grid-template-columns:60px 80px 1fr 100px;gap:14px;align-items:center;background:#18101ddd;border:1px solid #ffffff16;padding:10px 16px;border-radius:22px}#big article.p1{grid-column:1/-1;border-color:#ff953e66;box-shadow:0 0 38px #ff76002a}#big img{width:80px;height:80px;object-fit:cover;border-radius:16px}#big span{display:grid}#big strong{font-size:clamp(20px,2vw,32px)}#big span small{color:#a996ae}#big em{font-style:normal;text-align:right;color:#ffad43;font-size:34px}#big em small{display:block;font-size:9px}.winner{text-align:center;position:relative}.winner>img{width:min(42vh,420px);height:min(42vh,420px);object-fit:cover;border:8px solid #ffc35d;border-radius:50%;box-shadow:0 0 80px #ff920077}.winner h2{color:#ffc05a;letter-spacing:.15em}.winner h1{font-size:clamp(45px,6vw,90px);margin:10px}.winner p{font-size:25px}.confetti{font-size:40px;animation:conf 1.8s infinite alternate}@keyframes conf{to{transform:translateY(18px) scale(1.08)}}@media(max-width:600px){.brand b{font-size:15px}.picker{grid-template-columns:1fr 1fr}.cards{gap:9px}}
.pick-button{min-height:100px;background:#ff780010;border:1px dashed #ff8d3e66;color:#fff;font-size:28px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;text-align:center}.pick-button b{font-size:12px;margin-top:8px}.pick-button input{display:none}

/* ========================================================================== 
   Display page V3: clean Halloween QR card and TV layout
   ========================================================================== */
.display-screen{min-height:100vh;overflow:auto;background:radial-gradient(circle at 78% 7%,#63172f 0,transparent 28%),radial-gradient(circle at 4% 75%,#163f3b 0,transparent 35%),linear-gradient(155deg,#070109,#120516 58%,#08020b);}
.display-lightning{position:fixed;inset:0;z-index:90;background:#eef5ff;opacity:0;pointer-events:none}.display-main{max-width:1500px;min-height:100vh;padding:3vh 4vw 2vh}.display-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4vw;padding-bottom:2.2vh;border-bottom:1px solid #ffffff16}.display-title small{color:#ff8e2f;font-weight:900;letter-spacing:.25em}.display-title h1{font-size:clamp(40px,5vw,82px);line-height:1;margin:.5vh 0;color:#ffb44e;text-shadow:0 0 34px #ff5d0066}.display-title p{font-size:clamp(16px,1.7vw,27px);color:#c7b4cc;margin:0}.display-qr-card{position:relative;width:250px;padding:17px 17px 15px;border-radius:34px;background:linear-gradient(145deg,#fff,#fff7ef);border:3px solid #ff922c;box-shadow:0 0 30px #ff79004d,0 20px 45px #0009;display:flex;flex-direction:column;align-items:center;color:#240b17;animation:displayQrFloat 4s ease-in-out infinite}.display-qr-frame{width:205px;height:205px;padding:10px;border-radius:23px;background:#fff;box-shadow:inset 0 0 0 1px #2b101812;display:grid;place-items:center}.display-qr-frame img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;border-radius:8px}.display-qr-card strong{font-size:16px;margin-top:9px}.display-qr-card>span{font-size:10px;color:#6f5360;margin-top:3px;text-align:center}.qr-decoration{position:absolute;filter:drop-shadow(0 4px 8px #0008);z-index:2}.qr-bat{left:-25px;top:-28px;font-size:37px;transform:rotate(-16deg)}.qr-pumpkin{right:-22px;bottom:-24px;font-size:39px}.display-status{margin:2vh 0 1.5vh;color:#69f28a;font-weight:900;letter-spacing:.14em}.display-status i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#69f28a;box-shadow:0 0 17px #69f28a;animation:pulse 1.3s infinite}.display-ranking{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2vh 1.2vw}.display-rank{min-height:92px;display:grid;grid-template-columns:62px 82px minmax(0,1fr) 105px;align-items:center;gap:15px;padding:11px 17px;border-radius:24px;border:1px solid #ffffff16;background:linear-gradient(120deg,#24162bdd,#100914e8);box-shadow:0 12px 28px #0007}.display-rank.display-first{grid-column:1/-1;min-height:125px;border-color:#ff9b3d60;background:linear-gradient(100deg,#75330d88,#24152ddd 52%,#100914e8);box-shadow:0 0 38px #ff720025}.display-place{font-size:clamp(26px,3vw,47px);font-weight:900;text-align:center;color:#ffb451}.display-rank>img{width:82px;height:82px;object-fit:cover;border-radius:18px}.display-first>img{width:106px;height:106px;box-shadow:0 0 25px #ff913b55}.display-person{display:grid;min-width:0}.display-person strong{font-size:clamp(18px,2vw,32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.display-person span{font-size:clamp(12px,1.15vw,18px);color:#b19fb7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.display-votes{text-align:right;color:#ffb155;font-size:clamp(27px,3vw,46px);font-weight:900}.display-votes small{display:block;color:#9e8ca4;font-size:9px;letter-spacing:.14em}.display-footer{text-align:center;color:#806e87;margin-top:1.8vh;font-size:12px}.display-bats{position:fixed;z-index:1;opacity:.28;animation:displayBatFly 14s linear infinite}.bat-one{left:-8%;top:22%;font-size:31px}.bat-two{left:-15%;top:42%;font-size:22px;animation-delay:-7s;animation-duration:18s}.winner-area:empty{display:none}.winner-card{text-align:center}.winner-kicker{color:#ffc05b;font-weight:900;letter-spacing:.22em}.winner-photo-wrap{position:relative;margin:auto;width:min(40vh,390px);height:min(40vh,390px)}.winner-photo-wrap img{width:100%;height:100%;object-fit:cover;border:8px solid #ffc45f;border-radius:50%;box-shadow:0 0 80px #ff920077}.winner-photo-wrap span{position:absolute;top:-55px;left:50%;transform:translateX(-50%);font-size:80px}.winner-card h2{font-size:clamp(44px,6vw,86px);margin:1vh 0;color:#ffc05a;text-shadow:0 0 35px #ff7b0055}.winner-card>p:not(.winner-kicker){font-size:25px;color:#d2bfd5}.winner-card>strong{font-size:34px;color:#ffb24d}.winner-confetti{font-size:38px;animation:conf 1.8s infinite alternate}.display-empty{grid-column:1/-1;padding:12vh;text-align:center;font-size:clamp(28px,4vw,55px);font-family:Georgia,serif;color:#bca8c2}@keyframes displayQrFloat{50%{transform:translateY(-7px);box-shadow:0 0 42px #ff92006b,0 25px 48px #0009}}@keyframes displayBatFly{to{left:108%;transform:translateY(-65px) rotate(12deg)}}@media(max-width:850px){.display-header{grid-template-columns:1fr}.display-qr-card{width:220px;justify-self:center}.display-qr-frame{width:178px;height:178px}.display-ranking{grid-template-columns:1fr}.display-rank.display-first{grid-column:auto}.display-rank{grid-template-columns:48px 66px minmax(0,1fr) 78px}.display-rank>img,.display-first>img{width:66px;height:66px}}

/* TRUE FULL-VIEW BACKGROUND: real IMG + object-fit contain, no blur, no crop */
.house-photo{position:fixed;inset:0;z-index:0;pointer-events:none;background:#050107;display:flex;align-items:center;justify-content:center;overflow:hidden}
.house-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center center;filter:none;transform:none}
.house-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(4,0,7,.22),rgba(4,0,7,.48)),radial-gradient(ellipse at center,transparent 35%,rgba(2,0,4,.52) 100%)}
body>header,body>main{position:relative;z-index:3}
body:not(.screen) main{background:rgba(7,2,10,.24);border-radius:0 0 28px 28px}
body:not(.screen) .cards article,body:not(.screen) .rank,body:not(.screen) .person{backdrop-filter:blur(8px);background:linear-gradient(145deg,rgba(28,15,35,.92),rgba(9,4,13,.9))}
body:not(.screen) input,body:not(.screen) #preview{background:rgba(12,5,16,.86);backdrop-filter:blur(7px)}
.display-screen .house-overlay{background:linear-gradient(180deg,rgba(4,0,7,.18),rgba(4,0,7,.42)),radial-gradient(ellipse at center,transparent 42%,rgba(2,0,4,.48) 100%)}
.display-screen .display-header{padding:2vh 2vw;border-radius:28px;background:linear-gradient(90deg,rgba(8,2,12,.84),rgba(8,2,12,.56));backdrop-filter:blur(7px)}
.display-screen .display-rank{background:linear-gradient(120deg,rgba(34,18,42,.94),rgba(9,4,13,.9));backdrop-filter:blur(9px)}
@media(max-width:700px){.house-photo img{object-fit:contain;object-position:center center}.house-overlay{background:linear-gradient(180deg,rgba(4,0,7,.42),rgba(4,0,7,.62)),radial-gradient(circle at center,transparent 30%,rgba(2,0,4,.58) 100%)}}
/* HALLOWEEN_BACKGROUND_REPAIR_V4
   One single, sharp, complete image on every application page. */
html{
  min-height:100%;
  background:#050107!important;
}
html body,
html body.screen,
html body.display-screen{
  min-height:100vh!important;
  background-color:#050107!important;
  background-image:
    linear-gradient(180deg,rgba(4,0,7,.24),rgba(4,0,7,.50)),
    url('/static/backgrounds/haunted_house_landscape.webp')!important;
  background-size:100% 100%,contain!important;
  background-position:center center,center center!important;
  background-repeat:no-repeat,no-repeat!important;
  background-attachment:fixed,fixed!important;
}
/* Remove all earlier experimental photo layers, especially blurred copies. */
.haunted-background,
.haunted-vignette,
.house-photo,
.house-overlay{
  display:none!important;
  background:none!important;
  filter:none!important;
}
/* Keep decorative fog, moon and bats, but never let them paint an opaque page. */
body::before,
body::after{
  background-color:transparent!important;
}
body>header,
body>main,
body.screen>main,
body.display-screen>main{
  position:relative!important;
  z-index:3!important;
}
/* Transparent readable content instead of a page-sized opaque block. */
body:not(.screen)>main{
  background:linear-gradient(180deg,rgba(7,2,10,.08),rgba(7,2,10,.30))!important;
}
body.screen .display-main,
body.display-screen .display-main{
  background:transparent!important;
}
/* Cards remain readable while the house stays visible between them. */
.cards article,.rank,.person,.display-rank{
  background:linear-gradient(145deg,rgba(28,15,35,.91),rgba(9,4,13,.88))!important;
  backdrop-filter:blur(7px)!important;
}
/* On portrait phones preserve the complete landscape image. Dark bars are
   intentional and prevent cropping or distortion. */
@media(max-width:700px){
  html body,
  html body.screen,
  html body.display-screen{
    background-size:100% 100%,contain!important;
    background-position:center center,center center!important;
  }
}