:root{--amber:#ffe2b0;--amber2:#ffb454;--glass:rgba(24,16,10,.62);--line:rgba(255,220,160,.22);--u:2px;--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0b0a12;color:var(--amber);font-family:'Pixelify Sans','Noto Sans Devanagari',system-ui,sans-serif;overscroll-behavior:none}
button{font-family:inherit;color:inherit;cursor:pointer}

/* ---- stage: always fills the screen (no black bars); on tall phones the camera pans ---- */
#viewport{position:fixed;inset:0;overflow:hidden;background:#0b0a12;touch-action:none}
#stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#cv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated}
#bubbles{position:absolute;inset:0;pointer-events:none}

/* ---- speech bubbles (DOM so Devanagari stays crisp). Sized from --u = screen px per scene pixel ---- */
.bub{position:absolute;left:0;top:0;width:max-content;max-width:calc(var(--u) * 92);padding:calc(var(--u) * 2.2) calc(var(--u) * 3.2);font-family:'Noto Sans Devanagari','Pixelify Sans',sans-serif;font-weight:700;font-size:calc(var(--u) * 6.6);line-height:1.28;text-align:center;color:#2a1a0c;background:#fff7e2;border:calc(var(--u) * 0.9) solid #2a1a0c;border-radius:calc(var(--u) * 2.4);box-shadow:calc(var(--u) * 0.9) calc(var(--u) * 0.9) 0 rgba(0,0,0,.4);opacity:0;transition:opacity .18s;will-change:transform;overflow-wrap:anywhere}
.bub.in{opacity:1}.bub.out{opacity:0;transition:opacity .35s}
.bub .tail{position:absolute;left:var(--tx,50%);top:100%;width:calc(var(--u) * 3.4);height:calc(var(--u) * 3.4);margin:calc(var(--u) * -2.1) 0 0 calc(var(--u) * -1.7);background:inherit;border-right:calc(var(--u) * .9) solid #2a1a0c;border-bottom:calc(var(--u) * .9) solid #2a1a0c;transform:rotate(45deg)}
.bub.order{background:#ffe9a8}.bub.call{background:#d9ecff}.bub.speaker{background:#c9f5d4;font-size:calc(var(--u) * 5.6)}
.bub.note{background:none;border:0;box-shadow:none;padding:0;color:#ffd27a;font-size:calc(var(--u) * 9);text-shadow:calc(var(--u)*.7) calc(var(--u)*.7) 0 #000;animation:rise 2.4s linear forwards}.bub.note .tail{display:none}
@keyframes rise{from{margin-top:0}to{margin-top:calc(var(--u) * -14);opacity:0}}

/* ---- HUD ---- */
#hud{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:max(10px,env(safe-area-inset-top)) 12px 0;pointer-events:none}
#hud>*{pointer-events:auto}
.brand{display:flex;gap:8px;align-items:center;padding:7px 12px 6px;border-radius:12px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);font-weight:600;letter-spacing:.06em;font-size:15px}
.brand .cup{filter:saturate(1.2)}
.hud-r{display:flex;gap:8px}
button.round{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .12s,background .2s}
button.round:active{transform:scale(.92)}button.round:hover{background:rgba(70,44,22,.7)}
button.round.muted{background:#7a1f1f;border-color:#ff9a8a;color:#fff}
button.round.on{background:rgba(255,160,60,.28);border-color:#ffb454}

#dock{position:fixed;left:50%;bottom:calc(14px + var(--safe-b));transform:translateX(-50%);z-index:20;display:flex;gap:4px;padding:5px;border-radius:16px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.4)}
#dock button{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;border-radius:12px;padding:7px 12px;font-size:14px;transition:background .2s}
#dock button i{font-style:normal;font-size:17px}
#dock button:hover{background:rgba(255,200,120,.12)}#dock button.on{background:rgba(255,170,80,.26);border-color:rgba(255,200,120,.55)}

/* ---- intro ---- */
#intro{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 38%,rgba(46,28,12,.78),rgba(6,5,12,.97));backdrop-filter:blur(7px);transition:opacity .8s;padding:20px}
#intro.gone{opacity:0;pointer-events:none}
.card{position:relative;text-align:center;max-width:430px}
.card h1{font-size:clamp(38px,9vw,60px);margin:6px 0 2px;color:#ffe2a8;font-weight:600;text-shadow:0 0 18px rgba(255,170,60,.5),3px 3px 0 #5a2a0c;letter-spacing:.04em}
.card .hi{font-family:'Noto Sans Devanagari';font-size:22px;margin:0 0 10px;color:#ffb454;font-weight:700}
.card .sub{color:#eacfa6;line-height:1.5;margin:0 0 18px;font-size:16px}
#enter{font-size:20px;padding:.65em 1.6em;background:#c0561f;border:3px solid #ffd9a0;border-radius:12px;box-shadow:4px 4px 0 #000;color:#fff3da}
#enter:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.steam{height:34px;margin:0 auto;width:40px;background:radial-gradient(ellipse,rgba(255,255,255,.35),transparent 60%);filter:blur(6px);animation:st 3s ease-in-out infinite}
@keyframes st{50%{transform:translateY(-8px) scaleX(1.3);opacity:.5}}

/* ---- radio panel ---- */
#panel{position:fixed;right:14px;top:70px;bottom:78px;width:min(350px,calc(100vw - 28px));z-index:30;border-radius:18px;padding:12px 14px 14px;overflow:auto;background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,235,200,.14);transform:translateX(125%);transition:transform .35s cubic-bezier(.2,.8,.2,1);font-size:14px}
#panel.open{transform:none}
#panel::-webkit-scrollbar{width:6px}#panel::-webkit-scrollbar-thumb{background:rgba(255,200,120,.3);border-radius:6px}
.grab{display:none}
#panel header{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.ttl{flex:1;letter-spacing:.14em;font-weight:600;color:#ffe2a8;text-transform:uppercase;font-size:13px;display:flex;align-items:center}
.led{display:inline-block;width:9px;height:9px;border-radius:50%;background:#552;margin-right:8px;box-shadow:0 0 0 1px #000}.led.on{background:#ff4b2b;box-shadow:0 0 8px 2px rgba(255,75,43,.8)}
button.icon{min-width:34px;height:32px;border-radius:9px;background:rgba(255,200,120,.1);border:1px solid var(--line);font-size:14px}button.icon:hover{background:rgba(255,200,120,.22)}
#panel h3{margin:16px 0 6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#ffb454;font-weight:400}
.dial{background:rgba(0,0,0,.3);border-radius:12px;padding:10px;border:1px solid rgba(255,220,160,.14)}
.lcd{font-size:34px;color:#ffcf6e;text-shadow:0 0 10px rgba(255,170,40,.6);display:flex;align-items:baseline;gap:6px;letter-spacing:.06em}.lcd small{font-size:13px;opacity:.7}
.sname{font-size:15px;color:#ffe9c4;margin:-2px 0 8px;min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scale{position:relative;height:14px;background:repeating-linear-gradient(90deg,rgba(255,220,160,.5) 0 1px,transparent 1px 10px);border-bottom:1px solid rgba(255,220,160,.4);margin-bottom:8px}
#needle{position:absolute;top:-3px;width:2px;height:20px;background:#ff5a36;box-shadow:0 0 6px #f53;transition:left .6s cubic-bezier(.3,1.4,.5,1)}
.tuner{display:flex;gap:6px;align-items:center}#stations{display:flex;flex-wrap:wrap;gap:5px;flex:1;justify-content:center}
#stations button{background:rgba(255,200,120,.08);border:1px solid var(--line);border-radius:8px;padding:.35em .6em;font-size:13px}#stations button.on{background:rgba(255,160,60,.35);border-color:#ffb454;color:#fff}
.row{display:grid;grid-template-columns:128px 1fr;align-items:center;gap:10px;margin:10px 0}.row em{display:none}
input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:5px;background:rgba(255,220,160,.22);outline:none;width:100%;touch-action:pan-y}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#ffb454;border:2px solid #4a230a;box-shadow:0 0 8px rgba(255,170,60,.6)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#ffb454;border:2px solid #4a230a}
.ytrow{display:flex;gap:6px}.ytrow input{flex:1;min-width:0;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:9px;color:var(--amber);padding:.5em .7em;font-family:inherit;font-size:16px}
.ytrow button{background:rgba(255,160,60,.3);border:1px solid #ffb454;border-radius:9px;padding:0 1em}
.np{margin:8px 0 4px;font-size:13px;color:#ffe9c4;min-height:1.3em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctrl{display:flex;gap:6px;align-items:center}.chk{margin-left:auto;font-size:12px;display:flex;gap:5px;align-items:center}
#ytWrap{margin-top:8px;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}#ytWrap iframe,#ytWrap #ytPlayer{width:100%;height:100%}
.fine{font-size:11px;opacity:.6;margin:6px 0 0}#ytBox.hidden{display:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.chips button{background:rgba(255,200,120,.1);border:1px solid var(--line);border-radius:20px;padding:.4em .9em;font-size:13px}.chips button:hover{background:rgba(255,200,120,.24)}

/* ---- phones: dock icons only, radio panel becomes a bottom sheet ---- */
@media (max-width:760px){
  .brand{font-size:13px;padding:6px 10px}
  #dock button span{display:none}#dock button{padding:9px 13px}#dock button i{font-size:20px}
  #panel{left:8px;right:8px;top:auto;bottom:calc(76px + var(--safe-b));width:auto;max-height:60vh;transform:translateY(130%);border-radius:20px 20px 16px 16px}
  #panel.open{transform:none}
  .grab{display:block;width:44px;height:5px;border-radius:3px;background:rgba(255,220,160,.35);margin:-2px auto 8px}
  .row{grid-template-columns:112px 1fr}
}
@media (max-height:480px) and (orientation:landscape){#hud{padding-top:6px}button.round{width:40px;height:40px}#dock{bottom:6px}#panel{top:56px;bottom:56px}}
@media (prefers-reduced-motion:reduce){.steam{animation:none}}

/* ---- look & place card ---- */
#world{position:fixed;right:14px;top:70px;width:min(360px,calc(100vw - 28px));max-height:calc(100vh - 150px);overflow:auto;z-index:31;border-radius:18px;padding:12px 14px 14px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.5);transform:translateX(125%);transition:transform .35s cubic-bezier(.2,.8,.2,1);font-size:14px}
#world.open{transform:none}#world header{display:flex;align-items:center;gap:6px;margin-bottom:6px}
#world h3{margin:12px 0 8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#ffb454;font-weight:400}
.pick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pick button{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(255,200,120,.08);border:1px solid var(--line);text-align:left;font-size:14px;transition:background .2s}
.pick button i{font-style:normal;font-size:20px}.pick button:hover{background:rgba(255,200,120,.2)}.pick button.on{background:rgba(255,160,60,.32);border-color:#ffb454;color:#fff}
@media (max-width:760px){#world{left:8px;right:8px;top:auto;bottom:calc(76px + var(--safe-b));width:auto;max-height:58vh;transform:translateY(130%)}#world.open{transform:none}}

/* blurred copy of the scene fills whatever the (uncropped) stage does not cover */
#bd{position:absolute;left:-6%;top:-6%;width:112%;height:112%;image-rendering:auto;pointer-events:none}

/* phones show the whole scene by default; this button (or a double-tap) zooms in on the action */
#btnZoom{display:none}@media (max-width:760px){#btnZoom{display:grid}}
#bd{object-fit:cover}

/* ---- HUD refinements: place line, now-playing pill ---- */
.hud-l{display:flex;gap:8px;align-items:center;min-width:0}
.brand .bt{display:flex;flex-direction:column;line-height:1.05;min-width:0}.brand .bt small{font-size:11px;font-weight:400;letter-spacing:.04em;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.pill{display:none;align-items:center;gap:9px;max-width:230px;padding:7px 13px 6px;border-radius:20px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);font-size:13px;transition:background .2s}
.pill:hover{background:rgba(70,44,22,.7)}.pill #pillTxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px}.eq i{width:3px;height:3px;background:#ffb454;border-radius:1px}
.eq.on i{animation:eq .9s ease-in-out infinite}.eq.on i:nth-child(2){animation-delay:.25s}.eq.on i:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:3px}50%{height:13px}}
@media (min-width:760px){.pill{display:flex}}
@media (max-width:420px){.brand .bt small{display:none}}

/* ---- panel tabs ---- */
.tabs{display:flex;gap:6px;margin:0 0 10px;padding:4px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid rgba(255,220,160,.12)}
.tabs button{flex:1;padding:.5em .4em;border-radius:9px;background:transparent;border:1px solid transparent;font-size:13px;transition:background .2s}
.tabs button.on{background:rgba(255,160,60,.3);border-color:rgba(255,190,110,.6);color:#fff}
.tab[hidden]{display:none}
#sleep{align-items:center}#sleep button.on,#presets button:active{background:rgba(255,160,60,.32);border-color:#ffb454;color:#fff}#sleepLeft{margin-left:auto}

/* ---- toast + lightning ---- */
#toast{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translate(-50%,-14px);z-index:60;padding:8px 16px;border-radius:18px;background:rgba(20,12,6,.88);border:1px solid var(--line);color:var(--amber);font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}
#flash{position:fixed;inset:0;z-index:15;pointer-events:none;background:#dfe8ff;opacity:0;mix-blend-mode:screen}
#flash.go{animation:flash .95s ease-out}
@keyframes flash{0%{opacity:0}6%{opacity:.55}16%{opacity:.08}26%{opacity:.4}100%{opacity:0}}

/* ---- intro refinements ---- */
.card{padding:26px 22px 20px;border-radius:22px;background:linear-gradient(180deg,rgba(60,34,14,.38),rgba(16,10,6,.5));border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,235,200,.14)}
.feat{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}
.feat li{padding:8px 10px;border-radius:10px;background:rgba(255,200,120,.08);border:1px solid rgba(255,220,160,.14);font-size:13px;line-height:1.25}
.keys{margin:16px 0 0;font-size:12px;opacity:.65}
kbd{font-family:inherit;padding:1px 6px;border-radius:5px;background:rgba(255,200,120,.16);border:1px solid var(--line)}
@media (max-width:420px){.feat{grid-template-columns:1fr}.keys{display:none}}
@media (prefers-reduced-motion:reduce){.eq.on i,#flash.go{animation:none}}