[hidden]{display:none!important}
:root{--night:#0b1430;--night2:#141f45;--gold:#f3c75b;--gold2:#ffdf8e;--flame:#ff8a3d;--ink:#fff8e8;--glass:rgba(12,20,48,.72);--fs:1;--r:18px;font-family:Rubik,system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--night);color:var(--ink);overscroll-behavior:none;touch-action:none}
#stage,#stage canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
button{font-family:inherit;cursor:pointer}
.btn{border:0;border-radius:999px;padding:.75em 1.4em;font-size:calc(1.05rem*var(--fs));font-weight:700;color:var(--ink);background:rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .15s,background .2s,box-shadow .2s;min-height:48px}
.btn:hover{background:rgba(255,255,255,.2)}.btn:active{transform:scale(.96)}
.btn:focus-visible,.ic:focus-visible,.opt:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
.btn.gold{background:linear-gradient(180deg,#ffe29a,#e9a93a);color:#3a2207;box-shadow:0 6px 24px rgba(255,170,60,.35)}
.btn.gold:hover{box-shadow:0 8px 32px rgba(255,170,60,.55)}
.btn.ghost{background:rgba(10,18,44,.55);border:1px solid rgba(243,199,91,.45)}
.btn.big{font-size:calc(1.35rem*var(--fs));padding:.85em 2.2em}.btn.small{min-height:40px;padding:.5em 1em;font-size:calc(.95rem*var(--fs))}
.btn[disabled]{opacity:.45;cursor:default}
.ic{width:46px;height:46px;border-radius:50%;border:1px solid rgba(243,199,91,.4);background:rgba(10,18,44,.6);color:var(--ink);font-size:20px;display:grid;place-items:center;backdrop-filter:blur(6px)}
.ic.txt{font-size:15px;font-weight:800}.ic.big{width:64px;height:64px;font-size:28px}
.ic[aria-pressed="false"]{opacity:.7}
/* loader */
#loader{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow-y:auto;padding:12px 0;background:radial-gradient(ellipse at 50% 30%,#22316a 0%,#0b1430 60%,#050916 100%);transition:opacity .8s}
#loader.gone{opacity:0;pointer-events:none}
.ld-inner{text-align:center;padding:24px;max-width:560px;width:100%}
.ld-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,180,80,.18),transparent 45%);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
#loader h1{font-family:'Frank Ruhl Libre',serif;font-size:calc(clamp(2.6rem,10vw,4.6rem)*var(--fs));margin:.2em 0 0;background:linear-gradient(180deg,#fff2c4,#f3c75b 55%,#c98b23);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(255,170,60,.4))}
.sub{font-size:calc(1.15rem*var(--fs));opacity:.9;margin:.3em 0 1.4em}
.bar{height:12px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin:0 auto;max-width:380px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffcf6a,#ff8a3d);border-radius:99px;transition:width .25s}
.ld-msg{opacity:.85;margin:.8em 0 1.4em;font-size:calc(1rem*var(--fs))}
.ld-row{display:flex;gap:10px;justify-content:center;margin-top:16px}
.ld-menorah{display:flex;justify-content:center;align-items:flex-end;gap:10px;height:70px}
.ld-menorah span{width:9px;height:34px;background:linear-gradient(#fff6dd,#e9d7b0);border-radius:3px;position:relative}
.ld-menorah span.sh{height:50px}
.ld-menorah span::after{content:"";position:absolute;left:50%;top:-16px;width:10px;height:15px;transform:translateX(-50%);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff 0,#ffd36b 35%,#ff7a20 75%,transparent 80%);opacity:0;animation:fl 1s infinite alternate}
.ld-menorah span.on::after{opacity:1}
@keyframes fl{to{transform:translateX(-50%) scale(1.12,0.92)}}
/* topbar */
#topbar{position:fixed;top:0;inset-inline:0;z-index:32;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:linear-gradient(180deg,rgba(5,9,22,.7),transparent);pointer-events:none}
#topbar>*{pointer-events:auto}
#chTitle{flex:1;text-align:center;font-weight:800;font-size:calc(clamp(1rem,3.6vw,1.45rem)*var(--fs));text-shadow:0 2px 8px #000;color:var(--gold2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.tb-right{display:flex;gap:8px}
/* captions */
#captions{position:fixed;inset-inline:0;bottom:calc(86px + env(safe-area-inset-bottom));z-index:15;display:flex;justify-content:center;padding:0 12px;pointer-events:none}
#capText{max-width:900px;background:var(--glass);border:1px solid rgba(243,199,91,.3);border-radius:var(--r);padding:.65em 1em;font-size:calc(clamp(1.15rem,4.4vw,1.9rem)*var(--fs));line-height:1.45;font-weight:500;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .35s;min-height:1.5em}
#capText.fade{opacity:0}
/* controls */
#controls{position:fixed;inset-inline:0;bottom:0;z-index:16;display:flex;gap:8px;justify-content:center;padding:10px 10px calc(14px + env(safe-area-inset-bottom));flex-wrap:wrap}
#controls .btn{min-width:84px}
/* HUD hanukkiah */
#hudH{position:fixed;top:calc(64px + env(safe-area-inset-top));inset-inline-end:10px;width:170px;height:110px;z-index:14;pointer-events:none;border-radius:16px;background:radial-gradient(ellipse at 50% 70%,rgba(255,170,60,.18),rgba(10,18,44,.35) 70%);border:1px solid rgba(243,199,91,.25)}
#hudCount{direction:ltr;position:absolute;bottom:4px;inset-inline:0;text-align:center;font-weight:800;color:var(--gold2);font-size:14px;text-shadow:0 1px 4px #000}
/* panel */
#panel{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:calc(62px + env(safe-area-inset-top)) 16px 16px;background:rgba(3,6,16,.35)}
#panelBox{width:min(680px,100%);max-height:calc(100% - 20px);overflow:auto;background:linear-gradient(180deg,rgba(24,34,78,.92),rgba(10,16,40,.94));border:1px solid rgba(243,199,91,.45);border-radius:24px;padding:22px 20px;box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);animation:pop .35s cubic-bezier(.2,1.4,.4,1);outline:none}
@keyframes pop{from{transform:scale(.85) translateY(20px);opacity:0}}
#panelBox h2{margin:.1em 0 .5em;color:var(--gold2);font-size:calc(clamp(1.3rem,5vw,2rem)*var(--fs));text-align:center}
#panelBox p{font-size:calc(clamp(1.05rem,4vw,1.35rem)*var(--fs));line-height:1.5;margin:.4em 0}
.qnum{text-align:center;opacity:.8;font-weight:700;letter-spacing:.03em}
.opts{display:grid;gap:12px;margin:18px 0 6px}
.opt{border:2px solid rgba(243,199,91,.4);background:rgba(255,255,255,.06);color:var(--ink);border-radius:16px;padding:14px 16px;font-size:calc(clamp(1.1rem,4.3vw,1.4rem)*var(--fs));font-weight:600;text-align:start;display:flex;gap:12px;align-items:center;transition:transform .12s,background .2s,border-color .2s;min-height:58px}
.opt b{display:inline-grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:rgba(243,199,91,.2);color:var(--gold2)}
.opt:hover{background:rgba(255,255,255,.12)}.opt:active{transform:scale(.98)}
.opt.ok{background:rgba(70,200,120,.28);border-color:#5fe39a}.opt.no{background:rgba(230,80,80,.25);border-color:#ff7a7a;animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.fb{text-align:center;font-size:calc(1.2rem*var(--fs));min-height:1.5em;margin:10px 0}
.fb.ok{color:#8ff0b6}.fb.no{color:#ffb3b3}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:10px}
.tile{border:1px solid rgba(243,199,91,.4);background:rgba(255,255,255,.06);border-radius:18px;padding:16px;color:var(--ink);font-size:calc(1.12rem*var(--fs));font-weight:700;display:flex;gap:12px;align-items:center;min-height:64px;text-align:start}
.tile:hover{background:rgba(255,255,255,.13)}.tile .e{font-size:1.6em}
.tile.sel{border-color:var(--gold);background:rgba(243,199,91,.2)}
input[type=text],input[type=number],select{font-family:inherit;font-size:calc(1.2rem*var(--fs));padding:12px 14px;border-radius:14px;border:2px solid rgba(243,199,91,.45);background:rgba(0,0,0,.3);color:var(--ink);width:100%;min-height:52px}
select option{background:#141f45}
.code{font-size:calc(clamp(2.4rem,12vw,5rem)*var(--fs));font-weight:900;letter-spacing:.18em;text-align:center;color:var(--gold2);direction:ltr}
table.tb{width:100%;border-collapse:collapse;font-size:calc(1rem*var(--fs))}table.tb th,table.tb td{padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.12);text-align:start}table.tb th{color:var(--gold2)}
.lb li{display:flex;justify-content:space-between;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.06);margin:6px 0;font-size:calc(1.15rem*var(--fs));font-weight:700}
.lb{list-style:none;padding:0;margin:0}
/* toast */
#toast{position:fixed;top:calc(80px + env(safe-area-inset-top));left:50%;transform:translateX(-50%) translateY(-20px);z-index:40;background:linear-gradient(180deg,#ffe29a,#e9a93a);color:#3a2207;font-weight:800;padding:12px 22px;border-radius:999px;opacity:0;transition:.35s;pointer-events:none;font-size:calc(1.1rem*var(--fs));box-shadow:0 10px 30px rgba(255,160,50,.4);max-width:min(92vw,640px);width:max-content;text-align:center;line-height:1.35}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:35;pointer-events:none}
/* tour */
#tourUI{position:fixed;inset:0;z-index:12;pointer-events:none}
#tourUI>*{pointer-events:auto}
#tourHelp{position:fixed;top:calc(66px + env(safe-area-inset-top));inset-inline-start:12px;max-width:min(420px,60vw);background:var(--glass);border-radius:14px;padding:8px 12px;font-size:calc(.95rem*var(--fs));pointer-events:none}
.tour-row{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));inset-inline-start:50%;transform:translateX(50%);display:flex;gap:8px;align-items:center}
[dir=ltr] .tour-row{transform:translateX(-50%)}
.tour-row select{width:auto;min-width:150px}
#joy{position:fixed;bottom:calc(90px + env(safe-area-inset-bottom));left:22px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,.05));border:2px solid rgba(243,199,91,.45);touch-action:none}
#joyKnob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe9b0,#e9a93a);box-shadow:0 4px 14px rgba(0,0,0,.4)}
#btnRun{position:fixed;bottom:calc(110px + env(safe-area-inset-bottom));right:26px}
#nearTip{position:fixed;left:50%;top:58%;transform:translate(-50%,0);background:linear-gradient(180deg,#ffe29a,#e9a93a);color:#3a2207;font-weight:800;padding:10px 18px;border-radius:999px;font-size:calc(1.05rem*var(--fs));border:0;box-shadow:0 8px 24px rgba(255,160,50,.35)}
#skipWrap{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));inset-inline-end:20px;z-index:25}
#trailerTitle{position:fixed;inset:0;z-index:24;display:grid;place-content:center;text-align:center;pointer-events:none}
#trailerTitle h1{font-family:'Frank Ruhl Libre',serif;font-size:clamp(3rem,13vw,8rem);margin:0;background:linear-gradient(180deg,#fff6d6,#f3c75b 55%,#b9781c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 30px rgba(255,160,40,.6));opacity:0;transform:scale(.9);transition:opacity 1.4s,transform 3s}
#trailerTitle p{font-size:clamp(1.1rem,4vw,1.8rem);opacity:0;transition:opacity 1.4s .6s;text-shadow:0 2px 10px #000}
#trailerTitle.on h1{opacity:1;transform:scale(1)}#trailerTitle.on p{opacity:.95}
#trailerTitle .line{font-size:clamp(1.3rem,5vw,2.4rem);font-weight:800;text-shadow:0 3px 16px #000;opacity:0;transition:opacity .8s}
#netBadge{position:fixed;bottom:calc(76px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:22;background:rgba(160,40,40,.85);padding:6px 14px;border-radius:999px;font-size:.95rem}
.menu-title{font-family:'Frank Ruhl Libre',serif;text-align:center;font-size:calc(clamp(2rem,8vw,3.2rem)*var(--fs));margin:0;background:linear-gradient(180deg,#fff2c4,#f3c75b 60%,#c98b23);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{opacity:.75;font-size:.95em}
.qr{display:block;margin:10px auto;background:#fff;padding:10px;border-radius:12px;width:min(260px,70vw);height:auto;image-rendering:pixelated}
.charpick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
@media (max-width:560px){.charpick{grid-template-columns:repeat(2,1fr)}#hudH{width:132px;height:86px}#controls .btn{min-width:72px;padding:.6em 1em}}
.charpick .tile{flex-direction:column;justify-content:center;text-align:center;padding:10px;min-height:72px}
/* accessibility mode */
body.a11y{--fs:1.35;--glass:rgba(0,0,0,.92)}
body.a11y #capText{background:#000;color:#fff;border:3px solid #ffd54a}
body.a11y #panelBox{background:#000;border:3px solid #ffd54a}
body.a11y .opt{background:#111;border-color:#ffd54a;color:#fff}
body.a11y .btn.ghost{background:#000;border:2px solid #ffd54a}
body.a11y *{animation-duration:.001s!important;transition-duration:.001s!important}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important}}
@media print{body{overflow:visible;background:#fff;color:#000}#stage,#topbar,#controls,#captions,#hudH,#loader,#tourUI,#toast,#confetti{display:none!important}#panel{position:static;background:none;display:block}#panelBox{max-height:none;background:#fff;color:#000;border:0;box-shadow:none}#panelBox .row{display:none}table.tb th{color:#000}html,body{height:auto}}

@media (max-height:500px){#loader h1{font-size:2.2rem;margin:0}#loader .ld-art,#loader canvas{max-height:28vh}#loader p{margin:.2em 0}#panelBox{padding:14px 14px}}
#toast.low{top:auto;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px)}#toast.low.on{transform:translateX(-50%) translateY(0)}

/* loading screen is clean (Nov 9, Yackov): no buttons at all until 100 %; the menorah flames fade in as the % climbs */
body.loading button,body.loading #c3dNav,body.loading #topbar,body.loading #loader .ld-row,#btnStart{display:none!important}
.ld-menorah span::after{transition:opacity .45s ease-out}