*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;background:#000;overflow:hidden;font-family:'Courier New',monospace;touch-action:none;user-select:none;}
#gc{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
canvas{display:block;image-rendering:pixelated;touch-action:none;flex-shrink:0;}
#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px 26px;pointer-events:none;z-index:10;background:linear-gradient(to bottom,rgba(0,0,0,0.7),transparent);text-shadow:2px 2px 0 #000;}
#hud span{color:#fff;font-size:clamp(13px,2vw,22px);font-weight:bold;text-shadow:1px 1px 0 #000;}
#hAudio,#hP{cursor:pointer;pointer-events:all;padding:6px 9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:10px;transition:.15s transform,.15s background}
#hAudio:hover,#hP:hover{background:rgba(245,166,35,.25);transform:translateY(-1px)}
#hCombo{color:#ffe066!important;min-width:80px;text-align:center;transform:scale(0);transition:transform .16s cubic-bezier(.2,1.8,.4,1)}
#hCombo.on{transform:scale(1)}
#hDash{color:#78e8ff!important;font-size:clamp(10px,1.5vw,16px)!important}#hDash.empty{opacity:.35;color:#777!important}canvas{filter:saturate(1.13) contrast(1.06)}
#ctrl{position:fixed;left:0;right:0;bottom:0;height:130px;display:flex;justify-content:space-between;align-items:flex-end;padding:10px 16px 18px;pointer-events:none;z-index:20;background:linear-gradient(to top,rgba(0,0,0,0.45),transparent);}
.cbtn{width:64px;height:64px;background:rgba(255,255,255,0.13);border:1.5px solid rgba(255,255,255,0.28);border-radius:50%;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;pointer-events:all;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background 0.08s;}
.cbtn:active,.cbtn.pressed{background:rgba(255,255,255,0.35);}
.cl{display:flex;gap:10px;align-items:flex-end;}
.cr{display:flex;gap:10px;align-items:flex-end;}
#btnF{background:rgba(245,166,35,0.2);border-color:rgba(245,166,35,0.5);}
#btnD{background:rgba(60,210,255,.18);border-color:rgba(80,225,255,.55)}
#overlay{position:fixed;inset:0;background:radial-gradient(circle at 50% 35%,#172645 0,#070b16 45%,#020308 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;color:#fff;text-align:center;padding:24px;overflow-y:auto;}
#overlay:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 4px);mix-blend-mode:screen}
#overlay h1{position:relative;font-size:clamp(2.1em,7vw,4.8em);margin-bottom:4px;color:#f5a623;letter-spacing:-.06em;text-shadow:0 4px #8d4100,0 0 36px #f5a62355;animation:titleFloat 2.8s ease-in-out infinite;}
.eyebrow{color:#70b7ff;font-size:.68em;letter-spacing:.28em;margin-bottom:8px}
@keyframes titleFloat{50%{transform:translateY(-5px) scale(1.015)}}
#overlay .sub{font-size:0.78em;color:#888;margin-bottom:12px;}
#overlay .cast{font-size:0.72em;color:#aaa;margin-bottom:18px;line-height:2;}
.obtn{background:linear-gradient(#ffc04d,#f09000);color:#151009;border:1px solid #ffd98b;padding:14px 38px;font-size:0.95em;font-weight:bold;border-radius:12px;cursor:pointer;font-family:inherit;letter-spacing:1px;margin-top:8px;box-shadow:0 6px 0 #7e3f00,0 12px 30px #0008;transition:.12s transform,.12s box-shadow;}
.obtn:hover{transform:translateY(-2px);box-shadow:0 8px 0 #7e3f00,0 15px 34px #0009}.obtn:active{transform:translateY(4px);box-shadow:0 2px 0 #7e3f00}
.obtn:active{background:#ffc107;}
.obtn.sec{background:#1a1a1a;color:#f5a623;border:1px solid #f5a623;}
#rotateWarning{position:fixed;inset:0;background:black;color:white;display:none;justify-content:center;align-items:center;font-size:24px;z-index:9999;}
#lb{position:fixed;inset:0;background:rgba(0,0,0,0.96);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:200;color:#fff;padding:20px;}
#lb h2{color:#f5a623;font-size:1.4em;margin-bottom:4px;}
#lbT{width:100%;max-width:320px;border-collapse:collapse;font-size:0.82em;}
#lbT th{color:#f5a623;padding:4px 8px;border-bottom:1px solid #333;}
#lbT td{padding:5px 8px;border-bottom:1px solid #1a1a1a;text-align:center;}
#lbT tr.me td{color:#f5a623;font-weight:bold;}
#ibox{position:fixed;inset:0;background:rgba(0,0,0,0.97);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:300;color:#fff;text-align:center;padding:20px;}
#ibox h2{color:#f5a623;font-size:1.3em;margin-bottom:4px;}
#ibox p{color:#888;font-size:0.78em;margin-bottom:16px;}
.idisplay{display:flex;gap:12px;margin-bottom:20px;}
.ich{width:54px;height:66px;background:#111;border:2px solid #444;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:2em;font-weight:bold;color:#f5a623;}
.ich.act{border-color:#f5a623;box-shadow:0 0 10px #f5a62366;}
.kb{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;max-width:320px;margin-bottom:14px;}
.k{background:#1a1a1a;border:1px solid #333;border-radius:5px;padding:9px 0;font-size:0.85em;cursor:pointer;text-align:center;}
.k:active{background:#333;}
.kdel{background:#1a0808;border-color:#663333;color:#ff6666;}
.kok{background:#081a08;border-color:#336633;color:#66ff66;}
#bonus{position:fixed;inset:0;background:rgba(0,0,0,0.93);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:150;color:#fff;text-align:center;padding:20px;}
#bonus h2{color:#f5a623;font-size:1.6em;margin-bottom:6px;}
#bonus p{color:#aaa;font-size:0.85em;margin-bottom:20px;}
#charSelect {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 100vh;
}
@media(max-width:720px){#hud{padding:10px 12px;gap:6px}.idisplay{gap:4px}.ich{width:30px;height:44px;font-size:1.25em}.cast{display:none}.cbtn{width:60px;height:60px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}