*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0c0705;color:#f3ead6;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
#cv{position:fixed;inset:0;display:block}
.hidden{display:none!important}
#hud{position:fixed;left:0;right:0;top:0;height:46px;display:flex;align-items:center;gap:.6rem;padding:0 .6rem;background:linear-gradient(#0009,#0000);pointer-events:none;z-index:5}
#hud>*{pointer-events:auto}
#hud-l{font-weight:700;letter-spacing:.04em;color:#ffd98a;white-space:nowrap;font-size:.95rem}
#hud-c{flex:1;font-size:.85rem;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbtn{background:#2b1a10e6;color:#f3ead6;border:1px solid #c9a24a88;border-radius:10px;min-width:44px;min-height:44px;font-size:1rem;cursor:pointer;touch-action:none}
.hbtn:active{transform:scale(.96)}
#ctrl{position:fixed;right:0;top:46px;bottom:0;width:128px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:.5rem 0;z-index:5;background:linear-gradient(90deg,#0000,#0007)}
body.lefty:not(.portrait) #ctrl{right:auto;left:0;background:linear-gradient(270deg,#0000,#0007)}
.fine{display:flex;gap:6px}
#spin{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff,#e8e2d0 45%,#a79f8a);position:relative;border:2px solid #c9a24a;cursor:pointer;touch-action:none}
#spin:before,#spin:after{content:"";position:absolute;background:#0003}
#spin:before{left:50%;top:8%;bottom:8%;width:1px}#spin:after{top:50%;left:8%;right:8%;height:1px}
#spindot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#d0342c;box-shadow:0 0 0 2px #fff8}
#pbar{width:44px;flex:1;max-height:240px;min-height:110px;margin:.4rem 0;border-radius:12px;background:#1a0f08;border:1px solid #c9a24a88;position:relative;overflow:hidden;cursor:ns-resize;touch-action:none}
#pfill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#2c9b5a,#f2c230 60%,#d0342c)}
#pbar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-size:.7rem;letter-spacing:.2em;color:#fff9;pointer-events:none}
.shoot{width:96px;font-weight:800;letter-spacing:.08em;background:#8a2a1c;border-color:#ffb38a}
body.portrait #ctrl{top:auto;left:0;right:0;height:132px;width:auto;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.4rem .7rem;padding:.4rem .5rem;background:linear-gradient(#0000,#0008)}
body.portrait #pbar{order:5;flex:none;width:92%;height:40px;min-height:0;max-height:none;margin:0;cursor:ew-resize}
body.portrait #pfill{top:0;bottom:0;right:auto;width:0;height:auto!important;background:linear-gradient(90deg,#2c9b5a,#f2c230 60%,#d0342c)}
body.portrait #pbar span{writing-mode:horizontal-tb}
body.portrait #spin{width:52px;height:52px}
#edbar{position:fixed;left:0;right:0;bottom:0;min-height:64px;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center;padding:6px;background:#000a;z-index:5}
#edbar .btn{margin:0;width:auto;min-width:56px;padding:.45rem .6rem;font-size:.85rem}
#toast{position:fixed;left:50%;top:56px;transform:translateX(-50%) translateY(-8px);background:#1d120bf0;border:1px solid #c9a24a;color:#ffe9b8;padding:.5rem 1rem;border-radius:999px;font-size:.9rem;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:9;max-width:92vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%)}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#05030299;z-index:10;padding:12px;overflow:auto}
.overlay.title{background:radial-gradient(ellipse at 50% 40%,#3a2214dd,#070403f2)}
.panel{background:linear-gradient(#24160ef2,#160d08f2);border:1px solid #c9a24a99;border-radius:16px;padding:1rem 1.1rem;width:min(360px,94vw);box-shadow:0 20px 60px #000c;max-height:94vh;overflow:auto;text-align:center}
.wide .panel{width:min(720px,96vw)}
.panel h2{margin:.2rem 0 .7rem;color:#ffd98a;letter-spacing:.06em}
.panel h3{margin:.3rem 0;font-size:1rem;color:#ffe9b8}
.logo{font-size:2.9rem;font-weight:900;letter-spacing:.06em;color:#f3ead6;text-shadow:0 2px 0 #000,0 0 18px #6cb6ff66;font-family:Georgia,"Times New Roman",serif}
.logo span{color:#6cb6ff}
.tag{opacity:.75;margin:-.2rem 0 .8rem;letter-spacing:.2em;text-transform:uppercase;font-size:.75rem}
.btn{display:block;width:100%;margin:.35rem 0;padding:.7rem .8rem;min-height:44px;border-radius:11px;border:1px solid #c9a24a77;background:#3a2416;color:#f3ead6;font-size:1rem;font-weight:600;cursor:pointer;font-family:inherit}
.btn:hover,.btn:focus-visible{background:#55351f;outline:2px solid #ffd98a;outline-offset:1px}
.btn.big{font-size:1.1rem;padding:.85rem}.btn.gold{background:#a0721f;color:#1b0f05;border-color:#ffe3a0}
.btn.on{background:#1f6b4a;border-color:#8be0b4}.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn small{display:block;font-weight:400;font-size:.72rem;opacity:.8}
.row{display:flex;gap:.5rem}.row .btn{flex:1}.row.small .btn{font-size:.85rem}
.slots{display:flex;gap:.4rem;margin-bottom:.4rem}.slots .btn{flex:1;padding:.4rem;font-size:.85rem}.slots .btn.on{background:#1f6b4a}
.sub{opacity:.85;margin:.2rem 0 .6rem;font-size:.92rem}.hint{opacity:.7;font-size:.8rem;margin:.1rem 0 .4rem}
.hall{border:1px solid #ffffff22;border-radius:12px;padding:.5rem;margin:.5rem 0}
.hall.h0{background:#1f6b4a33}.hall.h1{background:#24507e33}.hall.h2{background:#562a6b33}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.grid .btn{margin:0;padding:.35rem 0;min-height:48px}.grid .btn b{display:block}.grid .btn i{font-style:normal;color:#ffd24a;font-size:.72rem;letter-spacing:-1px}
.set{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:.3rem 0;text-align:left}
.set>span{flex:1;font-size:.92rem}.opts{display:flex;gap:4px}.opts .btn{margin:0;width:auto;padding:.4rem .6rem;font-size:.82rem;min-width:52px}
.text{text-align:left;font-size:.92rem;line-height:1.45}.text kbd{background:#000;border:1px solid #666;border-radius:4px;padding:0 .3em;font-size:.8em}
.stars{font-size:2.6rem;color:#ffd24a;letter-spacing:.1em}.stars span{color:#ffffff33}
.cardwrap{overflow:auto}.card{border-collapse:collapse;margin:.4rem auto;font-size:.85rem}.card td,.card th{border:1px solid #ffffff33;padding:.25rem .45rem}.card .par{color:#ffd98a}
input.code{width:100%;padding:.55rem;border-radius:8px;border:1px solid #c9a24a88;background:#0b0604;color:#f3ead6;font-size:.85rem;margin:.3rem 0;user-select:text;-webkit-user-select:text}
body.hc .panel{background:#000;border-color:#fff}body.hc .btn{background:#000;border:2px solid #fff;color:#fff}body.hc .btn.on,body.hc .btn.gold{background:#ffd400;color:#000}
body.hc #hud{background:#000}body.hc #toast{background:#000;border-color:#fff;color:#fff}
@media (max-height:520px){.logo{font-size:2rem}.btn{padding:.45rem;min-height:40px}.panel{padding:.6rem}}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}