:root{--brass:#d8b46a;--ink:#f3ead8}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0d0a08;overflow:hidden;font-family:"Heebo","Assistant",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.vign{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 55%,rgba(0,0,0,.55) 100%)}
.hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:6px;padding:calc(env(safe-area-inset-top) + 8px) 10px 0;pointer-events:none}
.pl{display:flex;align-items:center;gap:7px;background:linear-gradient(180deg,rgba(30,22,15,.86),rgba(20,15,10,.78));border:1px solid rgba(216,180,106,.35);border-radius:14px;padding:6px 9px;min-width:0;flex:1;max-width:44%;position:relative;transition:box-shadow .3s,border-color .3s;flex-wrap:wrap}
.pl.on{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass),0 0 18px rgba(216,180,106,.35)}
.pl b{font-size:13px;display:block;white-space:nowrap}.pl small{font-size:11px;opacity:.75;white-space:nowrap}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:radial-gradient(circle at 35% 30%,#f6e3b0,#a07a35);color:#2a1d0e;flex:none}
.av.ai{background:radial-gradient(circle at 35% 30%,#a8e6da,#2d7d6f);color:#062a24}
.tray{display:flex;gap:2px;width:100%;min-height:10px}
.tray i{width:10px;height:10px;border-radius:50%;display:block;box-shadow:inset -2px -2px 3px rgba(0,0,0,.35)}
.mid{align-self:center;font-size:12px;font-weight:700;color:#1b130b;background:var(--brass);border-radius:999px;padding:5px 10px;white-space:nowrap}
.toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-10px);background:rgba(18,13,9,.92);border:1px solid rgba(216,180,106,.55);padding:9px 16px;border-radius:12px;font-size:14px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0)}
.power{position:fixed;right:2px;top:52%;transform:translateY(-50%);width:34px;height:min(42vh,320px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;touch-action:none}
.power span,.fine span{font-size:10px;opacity:.85;text-shadow:0 1px 3px #000}
.ptrack{position:relative;flex:1;width:18px;border-radius:12px;background:linear-gradient(90deg,#2a1c10,#4a321c,#2a1c10);border:1px solid rgba(216,180,106,.5);overflow:hidden;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.pfill{position:absolute;left:0;right:0;top:0;height:0;background:linear-gradient(180deg,#f7d98b,#d8933a 60%,#c4462b)}
.pknob{position:absolute;left:-3px;right:-3px;top:0;height:16px;border-radius:8px;background:linear-gradient(180deg,#fff3cf,#c9a24f);box-shadow:0 2px 6px rgba(0,0,0,.6)}
.fine{position:fixed;left:2px;top:52%;transform:translateY(-50%);width:30px;height:min(30vh,220px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;touch-action:none}
.ridges{flex:1;width:18px;border-radius:10px;opacity:.9;border:1px solid rgba(216,180,106,.45);background:repeating-linear-gradient(180deg,#3a2817 0 5px,#6b4a2a 5px 7px);box-shadow:inset 0 0 10px rgba(0,0,0,.7)}
.spinbtn{position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom) + 14px);width:58px;height:58px;border-radius:50%;border:2px solid var(--brass);background:radial-gradient(circle at 38% 32%,#fff,#e9e3d6 55%,#b9b1a1);box-shadow:0 4px 14px rgba(0,0,0,.6);padding:0}
.spinbtn i,.bigball i{position:absolute;width:12px;height:12px;border-radius:50%;background:#d22b2b;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.spinpad{position:fixed;inset:0;background:rgba(8,6,4,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:5;padding:20px;text-align:center}
.spinpad[hidden]{display:none}
.spinpad p{max-width:300px;font-size:13px;opacity:.85;margin:0}
.bigball{position:relative;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#ece6da 55%,#a9a191);box-shadow:0 10px 40px rgba(0,0,0,.6),inset 0 0 0 2px rgba(0,0,0,.08);touch-action:none}
.bigball::before,.bigball::after{content:"";position:absolute;background:rgba(0,0,0,.12)}.bigball::before{left:50%;top:8%;bottom:8%;width:1px}.bigball::after{top:50%;left:8%;right:8%;height:1px}
.bigball i{width:26px;height:26px}
button{font:inherit;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid rgba(216,180,106,.5);border-radius:12px;padding:11px 18px;font-size:15px;font-weight:600;cursor:pointer}
button.pri{background:linear-gradient(180deg,#f0cf85,#c79a45);color:#22170b;border-color:#f0cf85}
button.ghost{border-color:transparent;opacity:.75;font-size:13px}
button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hint{position:fixed;left:80px;right:70px;bottom:calc(env(safe-area-inset-bottom) + 18px);text-align:center;font-size:11.5px;opacity:.7;pointer-events:none;line-height:1.35}
.menu{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,rgba(20,14,9,.55),rgba(5,4,3,.92));z-index:9;padding:20px}
.menu[hidden]{display:none}
.card{width:min(340px,100%);text-align:center;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,rgba(40,28,17,.92),rgba(22,16,10,.95));border:1px solid rgba(216,180,106,.45);border-radius:20px;padding:22px 20px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.brand{font-size:11px;letter-spacing:.18em;color:var(--brass);direction:ltr}
.card h1{margin:0;font-size:30px;line-height:1.1}.card h1 span{display:block;font-size:15px;font-weight:500;opacity:.8;margin-top:4px}
.card p{margin:0 0 6px;font-size:13.5px;opacity:.8;line-height:1.5}
@media (orientation:landscape){.power{height:60vh}.fine{height:50vh}}
.camb{position:fixed;right:12px;bottom:calc(env(safe-area-inset-bottom) + 22px);padding:9px 12px;font-size:13px;border-radius:999px;background:rgba(25,18,12,.85)}.camb.on{background:linear-gradient(180deg,#f0cf85,#c79a45);color:#22170b}
.hint{right:110px}

/* --- 8BP-style control layout (Nov 7 pass): power left, fine-aim wheel right, spin + menu in the corners --- */
.power{left:4px;right:auto;width:46px;height:min(48vh,380px);top:54%}
.ptrack{width:26px;border-radius:14px}
.pknob{left:-4px;right:-4px;height:20px;border-radius:10px}
.power span,.fine span{font-size:10.5px;font-weight:700}
.fine{right:4px;left:auto;width:40px;height:min(34vh,260px);top:54%}
.ridges{width:28px;border-radius:14px;background:repeating-linear-gradient(180deg,#3a2817 0 6px,#8a6236 6px 8px)}
.spinbtn{left:auto;right:12px;bottom:auto;top:calc(env(safe-area-inset-top) + 78px);width:48px;height:48px}
.menub{position:fixed;left:12px;top:calc(env(safe-area-inset-top) + 78px);width:44px;height:44px;padding:0;border-radius:14px;font-size:20px;line-height:1;background:rgba(18,14,10,.78);z-index:3}
.camb{right:auto;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 16px);width:52px;height:40px;padding:0;font-weight:800;letter-spacing:.04em}
.hint{left:64px;right:64px;bottom:calc(env(safe-area-inset-bottom) + 64px)}
.pause{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);display:grid;place-items:center}
.pause[hidden]{display:none}
.pcard{width:min(300px,86vw);display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:20px;background:linear-gradient(180deg,rgba(40,28,17,.97),rgba(22,16,10,.98));border:1px solid rgba(216,180,106,.45);text-align:center}
.pcard b{font-size:18px;margin-bottom:4px}