*{margin:0;padding:0;box-sizing:border-box}
body{background:#08081a;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:'Segoe UI',sans-serif;color:#fff;overflow:hidden}
canvas#bg{position:fixed;top:0;left:0;z-index:-1;pointer-events:none}
.gw{display:flex;gap:28px;align-items:stretch;position:relative;z-index:1;padding-top:0}
canvas#board{border:2px solid rgba(233,69,96,.5);border-radius:10px;display:block;flex-shrink:0}
.side{display:flex;flex-direction:column;gap:14px;min-width:160px;padding-top:0}
.side .ct{margin-top:auto}
.box{background:rgba(255,255,255,.03);border:1px solid rgba(233,69,96,.3);border-radius:12px;padding:14px;text-align:center;backdrop-filter:blur(6px);transition:border-color .3s,transform .2s}
.box:hover{border-color:rgba(233,69,96,.7);transform:scale(1.03)}
.box h3{color:#e94560;margin-bottom:6px;font-size:10px;text-transform:uppercase;letter-spacing:3px;opacity:.7}
.box .v{font-size:30px;font-weight:bold;text-shadow:0 0 18px rgba(233,69,96,.4);transition:transform .15s}
.box .v.bmp{transform:scale(1.35)}
.sb{height:4px;border-radius:2px;margin-top:8px;background:rgba(255,255,255,.06);overflow:hidden}
.sf{height:100%;border-radius:2px;transition:width .6s,background .6s}
.ct{font-size:10px;line-height:2;color:#555}
.ct kbd{background:rgba(255,255,255,.04);padding:1px 7px;border-radius:4px;border:1px solid rgba(255,255,255,.08);color:#999;font-family:monospace;font-size:10px}
#nc{border:none;display:block}
.mbtn{background:none;border:1px solid rgba(255,255,255,.1);color:#888;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:16px;transition:all .2s;margin-top:4px}
.mbtn:hover{border-color:#e94560;color:#e94560}
.mbtn.off{opacity:.3;text-decoration:line-through}
.lv-badge{font-size:11px;color:#888;margin-top:4px;letter-spacing:1px}

.ov{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,8,26,.94);display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:10;backdrop-filter:blur(8px);transition:opacity .5s;overflow-y:auto;padding:20px}
.ov.out{opacity:0;pointer-events:none}
.ov h1{font-size:72px;background:linear-gradient(135deg,#e94560,#ff6b8a,#a855f7,#e94560);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:sh 4s ease-in-out infinite;margin-bottom:6px;letter-spacing:10px}
@keyframes sh{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.ov .su{font-size:15px;margin-bottom:28px;color:#555;animation:fu .8s ease-out}
.go2{padding:14px 56px;font-size:16px;background:linear-gradient(135deg,#e94560,#a855f7);color:#fff;border:none;border-radius:30px;cursor:pointer;letter-spacing:3px;text-transform:uppercase;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 30px rgba(233,69,96,.35);animation:fu .8s ease-out .2s both}
.go2:hover{transform:scale(1.1);box-shadow:0 6px 40px rgba(168,85,247,.5)}
.ls{margin-bottom:24px;text-align:center;animation:fu .8s ease-out .1s both}
.ll{font-size:12px;color:#666;margin-bottom:12px;letter-spacing:2px;text-transform:uppercase;display:block}
.lg{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:360px;margin:0 auto}
.lb{padding:10px 0;font-size:15px;font-weight:bold;color:#888;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:8px;cursor:pointer;transition:all .2s;font-family:'Segoe UI',sans-serif}
.lb:hover{background:rgba(233,69,96,.12);border-color:rgba(233,69,96,.4);color:#fff;transform:scale(1.1)}
.lb.on{background:rgba(233,69,96,.2);border-color:#e94560;color:#fff;box-shadow:0 0 18px rgba(233,69,96,.25)}
@keyframes fu{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.sp{position:absolute;pointer-events:none;font-size:24px;font-weight:bold;text-shadow:0 0 12px currentColor;animation:sf2 1.2s ease-out forwards;z-index:5}
@keyframes sf2{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-70px) scale(1.4)}}
.hid{display:none!important}
.pause-ov{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:72px;color:#e94560;z-index:25;text-shadow:0 0 20px rgba(233,69,96,.8);letter-spacing:10px;font-weight:bold}

.auth-box{background:rgba(255,255,255,.03);border:1px solid rgba(233,69,96,.3);border-radius:16px;padding:32px 36px;width:340px;max-width:90vw;text-align:center}
.auth-box h2{color:#e94560;font-size:14px;text-transform:uppercase;letter-spacing:4px;margin-bottom:20px}
.auth-box input{width:100%;padding:12px 16px;margin-bottom:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-size:14px;font-family:'Segoe UI',sans-serif;outline:none;transition:border-color .2s}
.auth-box input:focus{border-color:#e94560}
.auth-box input::placeholder{color:#555}
.auth-box .go2{width:100%;margin-top:8px;padding:12px;font-size:14px}
.auth-box .err{color:#ff3060;font-size:12px;margin-bottom:8px;min-height:18px}
.auth-box .sw{color:#666;font-size:12px;margin-top:14px;cursor:pointer;transition:color .2s}
.auth-box .sw:hover{color:#e94560}

.lb-panel{background:rgba(255,255,255,.03);border:1px solid rgba(233,69,96,.3);border-radius:16px;padding:24px 28px;width:380px;max-width:90vw;text-align:center;margin-bottom:20px;animation:fu .8s ease-out .1s both}
.lb-panel h2{color:#e94560;font-size:12px;text-transform:uppercase;letter-spacing:4px;margin-bottom:14px}
.lb-panel table{width:100%;border-collapse:collapse}
.lb-panel td,.lb-panel th{padding:6px 8px;font-size:13px;text-align:left}
.lb-panel th{color:#666;font-size:10px;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid rgba(255,255,255,.06)}
.lb-panel tr td:first-child{color:#e94560;font-weight:bold;width:30px}
.lb-panel tr td:last-child{color:#a855f7;font-weight:bold;text-align:right}
.lb-panel tr.you td{color:#fff}
.lb-panel .nr{color:#444;font-size:13px;padding:20px 0}

.user-box{font-size:11px;color:#888;margin-bottom:4px}
.user-box .uname{color:#e94560;font-weight:bold;font-size:13px}
.user-box .best{color:#a855f7}

/* ═══════ MOBILE TOP BAR ═══════ */
.mobile-bar{display:none;position:fixed;top:0;left:0;right:0;z-index:15;background:rgba(8,8,26,.92);backdrop-filter:blur(6px);border-bottom:1px solid rgba(233,69,96,.2);padding:6px 10px;align-items:center;justify-content:space-between;gap:6px}
.mobile-bar .mb-col{display:flex;align-items:center;gap:8px}
.mobile-bar .mb-label{font-size:8px;color:#666;text-transform:uppercase;letter-spacing:1px}
.mobile-bar .mb-val{font-size:16px;font-weight:bold;color:#e94560;text-shadow:0 0 8px rgba(233,69,96,.3)}
.mobile-bar .mb-next{display:flex;align-items:center;gap:4px}
.mobile-bar canvas#nc-m{border-radius:4px}

/* ═══════ TOUCH CONTROLS ═══════ */
#touch-ctrl{display:none;position:fixed;bottom:0;left:0;right:0;z-index:20;padding:8px;align-items:center;justify-content:space-between}
.dpad{display:grid;grid-template-areas:". u .""l c r"". d .";grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;width:150px;height:150px}
.tbtn{border:2px solid rgba(233,69,96,.35);background:rgba(233,69,96,.08);color:rgba(255,255,255,.85);border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation;font-size:18px;transition:background .08s}
.tbtn:active,.tbtn.pressed{background:rgba(233,69,96,.35);border-color:#e94560}
.dpad-up{grid-area:u}
.dpad-left{grid-area:l}
.dpad-center{grid-area:c;font-size:12px}
.dpad-right{grid-area:r}
.dpad-down{grid-area:d}
.abtns{display:flex;flex-direction:column;gap:10px;align-items:center}
.btn-a{width:64px;height:64px;font-size:22px;font-weight:bold;border-radius:50%;border-color:rgba(168,85,247,.4);background:rgba(168,85,247,.1)}
.btn-a:active,.btn-a.pressed{background:rgba(168,85,247,.35);border-color:#a855f7}
.btn-b{width:52px;height:52px;font-size:18px;font-weight:bold;border-radius:50%}

/* ═══════ RESPONSIVE ═══════ */
@media(max-width:700px){
  .side{display:none}
  .mobile-bar{display:flex}
  #touch-ctrl{display:flex}
  .gw{flex-direction:column;align-items:center;gap:4px;padding:0}
  body{flex-direction:column;justify-content:flex-start;padding-top:44px;overflow:hidden;height:100vh;height:100dvh}
  canvas#board{border-radius:6px}
  .ov h1{font-size:40px;letter-spacing:5px}
  .ov .su{font-size:13px;margin-bottom:16px}
  .auth-box{padding:20px}
  .lb-panel{padding:14px;margin-bottom:12px}
  .lb-panel td,.lb-panel th{padding:4px;font-size:11px}
  .ls{margin-bottom:14px}
  .lg{gap:5px;max-width:260px}
  .lb{padding:7px 0;font-size:12px}
  .go2{padding:10px 36px;font-size:13px}
}

@media(max-width:700px) and (orientation:landscape){
  body{padding-top:32px}
  .mobile-bar{padding:4px 8px}
  .mobile-bar .mb-val{font-size:14px}
  #touch-ctrl{padding:4px 8px}
  .dpad{width:120px;height:120px}
  .btn-a{width:50px;height:50px;font-size:18px}
  .btn-b{width:42px;height:42px;font-size:15px}
}

@media(max-width:360px){
  .ov h1{font-size:30px;letter-spacing:3px}
  .dpad{width:130px;height:130px}
  .btn-a{width:56px;height:56px;font-size:20px}
  .btn-b{width:46px;height:46px;font-size:16px}
}