*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0d1022;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#f4f1ff;user-select:none}
canvas{display:block;position:fixed;inset:0;width:100vw;height:100vh}
.hidden{display:none!important}
.ov{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(20,18,50,.72),rgba(5,6,16,.92));z-index:5}
.card{width:min(560px,92vw);background:linear-gradient(160deg,#1d1b3f,#15132d);border:1px solid #3b3670;border-radius:18px;padding:28px 30px;box-shadow:0 20px 60px rgba(0,0,0,.5);text-align:center}
h1{margin:0;font-size:46px;letter-spacing:6px;background:linear-gradient(90deg,#ffd35a,#ff8a5b 50%,#a47bff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
h1 small{display:block;font-size:15px;letter-spacing:5px;color:#b9b2e6;-webkit-text-fill-color:#b9b2e6;margin-top:4px;font-weight:700}
.card p{color:#cfc9f2;line-height:1.5;font-size:15px}
.btn{font:inherit;font-weight:700;border:0;border-radius:12px;padding:12px 22px;cursor:pointer;background:#2c2858;color:#fff;transition:transform .1s,background .2s}
.btn:hover{transform:translateY(-1px);background:#3a3574}
.btn.primary{background:linear-gradient(90deg,#ffb938,#ff7a45);color:#2a1300;font-size:18px;padding:14px 30px;width:100%;margin-top:8px}
.btn.sel{background:#6c5ce7}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.row{display:flex;gap:8px;justify-content:center;margin:14px 0}
.how{margin-top:16px;text-align:left;font-size:13px;color:#b9b2e6;background:#120f28;border-radius:12px;padding:12px 14px;line-height:1.6}
kbd{background:#2c2858;border-radius:5px;padding:1px 6px;font-size:12px;color:#fff;border-bottom:2px solid #1a1740}
#panel{position:fixed;top:0;right:0;bottom:0;width:300px;padding:18px 16px;background:linear-gradient(180deg,#17152f,#100e22);border-left:1px solid #2d2a55;overflow-y:auto;z-index:2;font-size:14px}
#panel h2{margin:0 0 4px;font-size:20px;letter-spacing:3px;color:#ffd35a}
.turn{margin:10px 0;padding:10px 12px;border-radius:10px;font-weight:800;font-size:16px}
.turn.L{background:#4a3d12;color:#ffe08a}.turn.D{background:#34245f;color:#d2bcff}
.sec{margin-top:14px}.sec b{display:block;color:#9f98d6;font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
#info{background:#120f28;border-radius:10px;padding:10px 12px;min-height:74px;color:#e4e0ff;line-height:1.45}
#log div{padding:3px 0;border-bottom:1px solid #221f42;color:#cfc9f2;font-size:13px}
.leg{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:13px;color:#cfc9f2}
.sw{width:16px;height:16px;border-radius:4px;flex:none}
#mute{position:fixed;left:12px;bottom:12px;z-index:6;background:rgba(20,18,45,.8);border:1px solid #3b3670;color:#fff;border-radius:10px;padding:8px 11px;cursor:pointer;font-size:16px}
#ovTitle{font-size:44px;font-weight:900;margin:0 0 6px}
input.tx{font:inherit;font-size:16px;padding:12px 14px;border-radius:12px;border:1px solid #3b3670;background:#120f28;color:#fff;width:100%;outline:none;margin-bottom:4px}
input.tx:focus{border-color:#ffb938}
#lstat{min-height:22px;margin-top:12px;color:#ffd35a;font-weight:700}
#toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:8;background:rgba(30,20,60,.95);border:1px solid #6c5ce7;border-radius:12px;padding:10px 16px;font-weight:700;color:#fff;max-width:90vw;text-align:center}
.code{font-size:44px;letter-spacing:12px;font-weight:900;color:#ffd35a;margin:4px 0}