:root{
  --bg:#0b0614; --bg2:#1a0b2e; --card:rgba(24,11,42,.72); --line:rgba(255,140,40,.28);
  --orange:#ff7a18; --amber:#ffb347; --purple:#9b4dff; --green:#8dff5a; --red:#ff4d5e;
  --text:#f6ecff; --muted:#b7a3d6;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:radial-gradient(1200px 700px at 78% -10%,#3a1466 0%,transparent 60%),radial-gradient(900px 600px at 0% 100%,#2a0d3a 0%,transparent 55%),linear-gradient(#0b0614,#12081f);
  color:var(--text); font-family:"Segoe UI",system-ui,sans-serif; overflow:hidden; position:relative;
}
button,input{font:inherit;color:inherit}

/* ---------- scenery ---------- */
#moon{position:fixed;top:5vh;right:7vw;width:min(15vw,190px);aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 35% 35%,#fff7d6,#ffe9a0 55%,#e8c66a);
  box-shadow:0 0 60px 20px rgba(255,220,130,.35),0 0 180px 80px rgba(255,170,60,.18);
  animation:moonpulse 6s ease-in-out infinite}
#moon::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 40%,rgba(160,120,40,.35) 0 8%,transparent 9%),radial-gradient(circle at 62% 25%,rgba(160,120,40,.3) 0 6%,transparent 7%),radial-gradient(circle at 60% 66%,rgba(160,120,40,.3) 0 11%,transparent 12%),radial-gradient(circle at 25% 72%,rgba(160,120,40,.25) 0 5%,transparent 6%)}
@keyframes moonpulse{50%{box-shadow:0 0 80px 28px rgba(255,220,130,.42),0 0 220px 100px rgba(255,170,60,.22)}}
#embers{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.graveyard{position:fixed;left:0;right:0;bottom:0;width:100%;height:22vh;z-index:0;pointer-events:none;opacity:.95}
.fog{position:fixed;left:-50%;width:200%;height:34vh;bottom:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 20% 80%,rgba(190,150,255,.16),transparent 50%),radial-gradient(ellipse at 70% 90%,rgba(255,160,90,.1),transparent 55%),radial-gradient(ellipse at 45% 100%,rgba(190,150,255,.14),transparent 50%);
  animation:fogdrift 38s linear infinite}
.fog.f2{bottom:-4vh;opacity:.7;animation-duration:58s;animation-direction:reverse}
@keyframes fogdrift{to{transform:translateX(25%)}}
#flash{position:fixed;inset:0;background:#d9c8ff;opacity:0;pointer-events:none;z-index:50}
#flash.go{animation:lightning 1.1s ease-out}
@keyframes lightning{0%{opacity:0}6%{opacity:.55}12%{opacity:.05}20%{opacity:.4}40%{opacity:0}100%{opacity:0}}
#critters{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.bat{position:absolute;left:0;top:0;width:64px;color:#05020a;filter:drop-shadow(0 0 6px rgba(155,77,255,.6))}
.bat svg{width:100%;display:block;animation:flap .22s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
.ghost{position:absolute;font-size:64px;opacity:.28;filter:blur(.6px) drop-shadow(0 0 14px rgba(200,180,255,.7))}
.spider{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;transition:transform 2.4s ease-in-out}
.spider i{display:block;width:2px;height:60vh;margin-top:-60vh;background:linear-gradient(#0000,#cbb8ee)}
.spider b{font-size:42px;font-weight:400;margin-top:-6px;filter:drop-shadow(0 0 6px #000)}

/* ---------- layout ---------- */
main{position:relative;z-index:3;height:100vh;display:grid;grid-template-columns:minmax(340px,4fr) 6fr;grid-template-rows:auto 1fr;gap:14px 22px;padding:14px 26px 22px}
header{grid-column:1/-1;text-align:center;line-height:1}
.title{font-family:"Creepster","Eater",Impact,sans-serif;font-weight:400;margin:0;letter-spacing:.06em;font-size:clamp(40px,6.5vh,76px);
  background:linear-gradient(180deg,#ffd27a,#ff7a18 55%,#c4380b);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,122,24,.55));animation:flicker 5s infinite}
@keyframes flicker{0%,18%,22%,62%,66%,100%{opacity:1}20%{opacity:.78}64%{opacity:.85}}
.sub{margin:4px 0 0;color:var(--muted);font-style:italic;letter-spacing:.08em;font-size:clamp(13px,1.9vh,18px)}
.left,.right{min-height:0;display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;backdrop-filter:blur(8px);
  box-shadow:0 10px 40px rgba(0,0,0,.45),inset 0 0 40px rgba(155,77,255,.08)}
.label{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:12px}

/* now playing */
.now{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.now .label{align-self:flex-start}
.art{width:min(100%,32vh);aspect-ratio:1;border-radius:20px;overflow:hidden;position:relative;background:#1e0f33;
  box-shadow:0 0 0 2px rgba(255,140,40,.5),0 0 40px rgba(255,122,24,.35);transition:box-shadow .5s}
.now.playing .art{animation:glow 3.2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 2px rgba(255,170,70,.9),0 0 70px rgba(255,122,24,.65),0 0 120px rgba(155,77,255,.35)}}
.art img{width:100%;height:100%;object-fit:cover;display:block;animation:fadein .8s}
.art-empty{display:grid;place-items:center;height:100%;font-size:90px;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes fadein{from{opacity:0;transform:scale(1.06)}}
.nowtext{text-align:center;margin-top:14px;width:100%}
.ntitle{font-size:clamp(20px,3vh,30px);font-weight:800;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nartist{color:var(--muted);margin-top:4px;font-size:clamp(14px,2vh,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{width:100%;height:10px;border-radius:99px;background:rgba(255,255,255,.1);margin-top:14px;position:relative}
.fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--orange));position:relative;transition:width .5s linear;box-shadow:0 0 14px rgba(255,122,24,.7)}
.knob{position:absolute;right:-11px;top:50%;transform:translateY(-50%);font-size:20px;filter:drop-shadow(0 0 6px #ff7a18);animation:flick .5s infinite alternate}
@keyframes flick{to{transform:translateY(-54%) scale(1.15)}}
.times{width:100%;display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:6px;font-variant-numeric:tabular-nums}
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:14px}
.eq i{width:3px;background:var(--green);height:30%;border-radius:2px;box-shadow:0 0 6px var(--green)}
.now.playing .eq i{animation:eq .9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:.2s!important}.eq i:nth-child(3){animation-delay:.45s!important}.eq i:nth-child(4){animation-delay:.1s!important}.eq i:nth-child(5){animation-delay:.35s!important}
@keyframes eq{from{height:20%}to{height:100%}}

/* queue */
.queue{flex:1;min-height:0;display:flex;flex-direction:column}
.queue ol{list-style:none;margin:0;padding:0;overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:#5a2a8f transparent}
.queue li{display:flex;align-items:center;gap:12px;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.06);animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.96)}}
.queue li img,.queue li .ph{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:#2a1445}
.queue .t{min-width:0;flex:1}.queue .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue .t span{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.queue .n{color:var(--orange);font-weight:800;width:20px;text-align:center}
.queue .tag{font-size:18px;flex:none}
.empty{color:var(--muted);text-align:center;padding:22px 8px;font-style:italic}

/* search */
.searchbar{display:flex;gap:10px}
#q{flex:1;min-width:0;height:64px;border-radius:18px;border:2px solid var(--line);background:rgba(10,4,20,.8);padding:0 22px;font-size:22px;outline:none;transition:.2s}
#q:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,122,24,.2),0 0 30px rgba(255,122,24,.3)}
#q::placeholder{color:#8f7bb0}
.icon-btn{width:64px;border-radius:18px;border:2px solid var(--line);background:rgba(24,11,42,.8);font-size:26px;cursor:pointer}
.icon-btn:hover{border-color:var(--purple)}
.results{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-content:start;padding:2px 4px 8px 2px;scrollbar-width:thin;scrollbar-color:#5a2a8f transparent}
.results>.msg{grid-column:1/-1}
.rc{display:flex;align-items:center;gap:14px;padding:12px;border-radius:18px;background:var(--card);border:1px solid var(--line);animation:rise .5s both;min-height:92px}
.rc img{width:68px;height:68px;border-radius:12px;object-fit:cover;flex:none;box-shadow:0 4px 14px #0008}
.rc .t{min-width:0;flex:1}
.rc .t b{display:block;font-size:17px;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rc .t span{display:block;color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ex{font-size:10px;border:1px solid var(--muted);border-radius:4px;padding:0 4px;margin-left:6px;vertical-align:middle}
.btn,.sum{border:0;border-radius:14px;background:linear-gradient(180deg,#ff9a3c,#e8560c);color:#1a0800;font-weight:800;padding:12px 16px;cursor:pointer;text-decoration:none;display:inline-block;
  box-shadow:0 4px 0 #8a2d05,0 8px 20px rgba(255,122,24,.35);transition:transform .08s,box-shadow .08s;white-space:nowrap}
.sum{flex:none;min-width:104px}
.sum:hover:not(:disabled){filter:brightness(1.12)}
.sum:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #8a2d05}
.sum:disabled{cursor:default}
.sum.busy{background:linear-gradient(180deg,#b57bff,#7a35d6);box-shadow:0 4px 0 #3c1478;color:#fff}
.sum.done{background:linear-gradient(180deg,#9dff6e,#4bc21c);box-shadow:0 4px 0 #24730a;color:#062000}
.idle{text-align:center;padding:10px 0 0}
.idle .big{font-size:76px;animation:bob 3s ease-in-out infinite}
.idle h3{font-family:Creepster,sans-serif;font-weight:400;font-size:34px;letter-spacing:.05em;margin:6px 0;color:var(--amber)}
.idle p{color:var(--muted);margin:0 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{border:1px solid var(--line);background:rgba(155,77,255,.15);border-radius:99px;padding:10px 18px;cursor:pointer;font-size:16px;transition:.15s}
.chip:hover{background:rgba(255,122,24,.25);border-color:var(--orange);transform:translateY(-2px) rotate(-1deg)}
.spin{display:inline-block;animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* on-screen keyboard */
.osk{display:flex;flex-direction:column;gap:7px;padding:10px;border-radius:18px;background:rgba(10,4,20,.85);border:1px solid var(--line)}
.osk[hidden]{display:none}
.osk .row{display:flex;gap:7px;justify-content:center}
.osk button{flex:1;max-width:76px;height:clamp(40px,6vh,56px);border-radius:12px;border:1px solid var(--line);background:rgba(155,77,255,.18);font-size:20px;font-weight:600;cursor:pointer;text-transform:uppercase}
.osk button:active{background:var(--orange);color:#1a0800;transform:scale(.94)}
.osk button.wide{max-width:none;flex:2;text-transform:none}
.osk button.go{background:linear-gradient(180deg,#ff9a3c,#e8560c);color:#1a0800;font-weight:800}

/* overlays */
#toast{position:fixed;left:50%;bottom:5vh;transform:translate(-50%,40px);z-index:60;max-width:min(92vw,720px);padding:16px 28px;border-radius:18px;font-size:22px;font-weight:700;text-align:center;opacity:0;pointer-events:none;transition:.35s;
  background:#160a28;border:2px solid var(--green);box-shadow:0 0 40px rgba(141,255,90,.4)}
#toast.err{border-color:var(--red);box-shadow:0 0 40px rgba(255,77,94,.4)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#banner{position:fixed;top:0;left:0;right:0;z-index:40;text-align:center;padding:9px 16px;background:linear-gradient(90deg,#5a0f1a,#8a2d05,#5a0f1a);font-weight:700;letter-spacing:.02em}
#setup{position:fixed;inset:0;z-index:70;background:rgba(5,2,10,.88);display:grid;place-items:center;backdrop-filter:blur(6px)}
#setup[hidden]{display:none}
#setup .card{text-align:center;max-width:480px;padding:34px}
#setup .big{font-size:80px;animation:bob 3s infinite}
#hostlink{position:fixed;left:8px;bottom:6px;z-index:10;opacity:.12;text-decoration:none;font-size:16px}
#hostlink:hover{opacity:.8}
#admin{position:fixed;left:12px;bottom:12px;z-index:45;display:flex;gap:8px;flex-wrap:wrap;padding:10px;border-radius:16px;background:rgba(10,4,20,.92);border:1px solid var(--purple)}
#admin[hidden]{display:none}
#admin button{border:1px solid var(--line);background:rgba(155,77,255,.2);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:14px}
#admin button.on{background:var(--orange);color:#1a0800;border-color:var(--orange);font-weight:700}
.burst{position:fixed;z-index:80;pointer-events:none;font-size:30px}

@media (max-width:900px){
  body{overflow:auto}
  main{height:auto;min-height:100vh;grid-template-columns:1fr;padding:12px 14px 120px}
  .right{order:-1}.art{width:min(70vw,300px)}
  .results{overflow:visible;grid-template-columns:1fr}
  .queue ol{max-height:50vh}
  #moon{opacity:.6}
}
/* =================== Upgrade: big-screen polish =================== */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}

/* scenery */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
#stars i{position:absolute;width:var(--z);height:var(--z);border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(210,190,255,.8);animation:twinkle var(--t) ease-in-out infinite;animation-delay:var(--dl)}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.95}}
#moon{top:auto;right:3vw;bottom:5vh;width:min(21vh,16vw);z-index:0;opacity:.7}
.graveyard{height:24vh}
#pumpkins{position:fixed;left:0;right:0;bottom:0;height:20vh;z-index:1;pointer-events:none}
#pumpkins span{position:absolute;bottom:.6vh;font-size:var(--s);line-height:1;animation:jack 3.4s ease-in-out infinite;animation-delay:var(--d);
  filter:drop-shadow(0 0 1.6vh rgba(255,140,30,.9)) drop-shadow(0 0 4vh rgba(255,90,0,.55))}
@keyframes jack{0%,100%{filter:drop-shadow(0 0 1.2vh rgba(255,140,30,.75)) drop-shadow(0 0 3vh rgba(255,90,0,.4));transform:scale(1)}
  45%{filter:drop-shadow(0 0 2.2vh rgba(255,170,50,1)) drop-shadow(0 0 6vh rgba(255,90,0,.8));transform:scale(1.04)}
  70%{filter:drop-shadow(0 0 1vh rgba(255,140,30,.6)) drop-shadow(0 0 2.4vh rgba(255,90,0,.3))}}
.web{position:fixed;top:0;width:20vh;height:20vh;z-index:4;pointer-events:none;color:rgba(235,225,255,.42);filter:drop-shadow(0 0 4px rgba(190,160,255,.4))}
.web.wl{left:0}.web.wr{right:0;transform:scaleX(-1)}

/* header */
header{display:flex;align-items:center;justify-content:center;gap:3vw}
.hmid{line-height:1}
.title{font-size:clamp(44px,8.4vh,110px);letter-spacing:.07em;position:relative}
.sub{font-size:clamp(14px,2.2vh,26px);margin-top:.6vh}
.hf{font-size:5.5vh;filter:drop-shadow(0 0 10px #9b4dff);animation:hang 3.2s ease-in-out infinite;transform-origin:50% 0}
.hf.r{animation-delay:-1.6s}
@keyframes hang{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(.8vh)}}

/* now playing */
.now{position:relative;isolation:isolate}
.now::before{content:"";position:absolute;inset:-2px;border-radius:24px;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 55%,var(--orange) 72%,var(--purple) 88%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:ang 7s linear infinite}
@keyframes ang{to{--ang:360deg}}
.nowbg{position:absolute;inset:0;z-index:-1;border-radius:22px;background-size:cover;background-position:center;filter:blur(34px) saturate(1.8);opacity:.38;clip-path:inset(0 round 22px);transition:background-image .8s,opacity .8s;pointer-events:none}
.left{position:relative;z-index:1}
.right{position:relative;z-index:2}
.art{width:min(100%,29vh)}
.now{padding:1.6vh 18px}
.nowtext{margin-top:1.2vh}
.bar{margin-top:1.2vh}
.label{font-size:clamp(12px,1.55vh,18px)}
.ntitle{font-size:clamp(22px,3.5vh,44px);animation:fadein .7s}
.nartist{font-size:clamp(15px,2.3vh,28px)}
.times{font-size:clamp(12px,1.7vh,20px)}
.bar{height:1.1vh;min-height:8px}

/* queue */
.queue li{padding:1vh 6px;gap:1.2vw}
.queue li img,.queue li .ph{width:5.4vh;height:5.4vh}
.queue .t b{font-size:clamp(14px,2vh,24px)}
.queue .t span{font-size:clamp(12px,1.7vh,20px)}
.queue .n{font-size:clamp(14px,2vh,24px)}
.queue li:first-child{background:linear-gradient(90deg,rgba(255,122,24,.22),transparent);border-radius:14px;border-bottom-color:transparent;box-shadow:inset 3px 0 0 var(--orange)}
.queue li:first-child::after{content:"NEXT";font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--orange);order:5}

/* search + results */
#q{height:7.4vh;min-height:56px;font-size:clamp(18px,3vh,34px);padding:0 28px}
.icon-btn{width:7.4vh;min-width:56px;font-size:clamp(22px,3.2vh,38px)}
.results{grid-template-columns:repeat(auto-fill,minmax(clamp(300px,24vw,460px),1fr));gap:1.4vh 14px}
.rc{min-height:11vh;padding:1.2vh 14px;gap:16px;transition:transform .15s,border-color .15s}
.rc:hover{transform:translateY(-3px);border-color:var(--orange)}
.rc img{width:8.6vh;height:8.6vh;min-width:56px;min-height:56px}
.rc .t b{font-size:clamp(15px,2.2vh,26px)}
.rc .t span{font-size:clamp(12px,1.8vh,21px)}
.sum{font-size:clamp(14px,2vh,24px);padding:1.5vh 22px;min-width:7.5em}
#toast{font-size:clamp(18px,3vh,36px);bottom:6vh}

/* idle screen */
.idle{padding-top:2vh}
.idle .big{font-size:11vh;filter:drop-shadow(0 0 2.4vh rgba(155,77,255,.8))}
.idle h3{font-size:clamp(34px,6vh,76px);margin:1vh 0}
.idle p{font-size:clamp(15px,2.3vh,28px);margin-bottom:2.4vh}
.chip{font-size:clamp(15px,2.3vh,28px);padding:1.2vh 1.6vw;background:linear-gradient(180deg,rgba(155,77,255,.28),rgba(155,77,255,.1));animation:rise .6s both}
.steps{display:flex;gap:1.4vw;justify-content:center;margin-top:3.5vh}
.step{display:flex;align-items:center;gap:14px;padding:1.4vh 1.6vw;border-radius:18px;background:rgba(10,4,20,.55);border:1px dashed rgba(255,140,40,.4)}
.step b{display:grid;place-items:center;width:5vh;height:5vh;min-width:36px;min-height:36px;border-radius:50%;background:linear-gradient(180deg,#ff9a3c,#e8560c);color:#1a0800;font-size:clamp(16px,2.4vh,28px);box-shadow:0 0 18px rgba(255,122,24,.6)}
.step span{font-size:clamp(14px,2.1vh,26px);text-align:left;line-height:1.2}
@media (max-width:900px){body{overflow-x:hidden}header{order:-2}.steps{flex-direction:column;align-items:stretch}.hf{display:none}#moon{bottom:auto;top:8vh;width:22vw}.title{font-size:44px}#pumpkins span:nth-child(-n+3){display:none}.web{width:12vh;height:12vh}}
@media (max-height:700px) and (min-width:901px){.steps{display:none}.idle .big{font-size:8vh}.idle p{margin-bottom:1.4vh}}
/* touchscreen kiosk */
body{-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#q{-webkit-user-select:text;user-select:text}
.osk{gap:5px;padding:8px}
.osk .row{gap:5px}
.osk button{height:clamp(38px,5.6vh,58px);font-size:clamp(17px,2.5vh,26px);max-width:92px}
.osk button.wide{max-width:none}
.sum,.chip,.osk button,.icon-btn{min-height:48px}
.results{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.queue ol{scrollbar-width:none}
@media (hover:none){.rc:hover,.chip:hover{transform:none}.rc:hover{border-color:var(--line)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}