:root{
    --bg:#0b0d11; --card:#17191f; --card2:#20232b; --line:#383d48;
    --txt:#f5f2ed; --dim:#a9adb7; --acc:#62a7ff; --acc2:#53d3ad;
    --warn:#ffc857; --bad:#ff6f61; --good:#62d69c; --p2:#ff6f61;
  }
  *{box-sizing:border-box; margin:0; padding:0; letter-spacing:0;}
  html{width:100%; min-height:100%; background:var(--bg);}
  body{background:var(--bg); color:var(--txt); font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
       display:flex; flex-direction:column; align-items:center; min-height:100dvh; padding:10px 14px 14px;
       overflow-x:hidden; overscroll-behavior:none; touch-action:manipulation;}
  button,input,select{font:inherit;}
  button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--warn); outline-offset:2px;}
  h1{font-size:23px; line-height:1.2; color:#fff1da; text-shadow:0 2px 10px rgba(0,0,0,.55);}
  .sub{color:var(--dim); font-size:12px; margin:3px 0 9px;}
  #hud{display:flex; width:min(900px,100%); gap:12px; background:var(--card); border:1px solid var(--line);
       border-radius:8px; padding:7px 12px; margin-bottom:9px; font-size:13px; flex-wrap:wrap;
       justify-content:center; align-items:center; min-height:46px;}
  #hud b{color:var(--warn); font-family:Consolas,monospace;}
  #hud .stat{display:inline-flex; align-items:center; gap:4px; white-space:nowrap;}
  #vsBox{background:#0f1116; border:1px solid var(--line); border-radius:6px; padding:4px 10px;
         font-size:15px; white-space:nowrap;}
  #vsBox .me{color:var(--acc); font-weight:700;}
  #vsBox .foe{color:var(--p2); font-weight:700;}
  #hMute{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--line);
         border-radius:6px; color:var(--txt); background:#0f1116; cursor:pointer; line-height:1;}
  #hMute:hover{border-color:var(--warn); background:var(--card2);}
  #strategyDock{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px;
       width:min(900px,100%); margin-bottom:8px; position:relative;}
  .strategy-card{display:grid; grid-template-columns:52px minmax(0,1fr) 32px; align-items:center; gap:7px;
       min-width:0; min-height:64px; padding:5px 6px; border:1px solid var(--line); border-radius:8px;
       background:#12151b; box-shadow:0 7px 18px rgba(0,0,0,.2); transition:border-color .16s,background .16s;}
  .strategy-card.armed{border-color:var(--warn); background:#211c12; box-shadow:0 0 0 1px rgba(255,200,87,.18);}
  .strategy-card img{display:block; width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.38));}
  .strategy-meta{display:flex; flex-direction:column; min-width:0; line-height:1.2;}
  .strategy-meta strong{font-size:13px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .strategy-meta span{margin-top:4px; color:var(--dim); font-size:10px; white-space:nowrap;}
  .strategy-meta b{color:var(--warn); font-family:Consolas,monospace;}
  .strategy-actions{display:flex; flex-direction:column; gap:4px;}
  .strategy-actions button{display:inline-flex; align-items:center; justify-content:center; width:30px; height:25px;
       border:1px solid var(--line); border-radius:6px; color:var(--txt); background:#20242d; cursor:pointer;
       font-weight:900; line-height:1; transition:background .14s,border-color .14s,transform .14s;}
  .strategy-actions button[data-action=buy]{color:var(--good);}
  .strategy-actions button[data-action=use]{color:var(--warn);}
  .strategy-actions button:hover:not(:disabled){background:#2b303b; border-color:var(--acc); transform:translateY(-1px);}
  .strategy-actions button:disabled{opacity:.3; cursor:not-allowed;}
  #strategyStatus{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
       clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  #stage{--board-ratio:15 / 11; position:relative; flex:0 0 auto; width:min(900px,100%);
         aspect-ratio:var(--board-ratio); overflow:hidden; border:1px solid var(--line); border-radius:8px;
         background:#101318; box-shadow:0 18px 50px rgba(0,0,0,.3);}
  canvas{display:block; width:100%; height:100%; background:#101318; touch-action:none; image-rendering:auto;}
  .overlay{position:absolute; inset:0; background:rgba(11,13,17,.94); display:flex; flex-direction:column;
           align-items:center; justify-content:center; gap:12px; text-align:center; z-index:5; padding:20px;
           overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable;}
  .overlay>*{flex-shrink:0; max-width:100%; overflow-wrap:anywhere;}
  .overlay h2{font-size:25px; line-height:1.25;}
  .overlay p{color:var(--dim); font-size:14px; line-height:1.7;}
  .overlay .big{font-size:36px; line-height:1;}
  .btn{display:inline-flex; align-items:center; justify-content:center; min-height:42px; background:var(--warn);
       color:#171106; border:1px solid transparent; border-radius:8px; padding:9px 22px; font-size:15px;
       font-weight:800; cursor:pointer; transition:background .16s,border-color .16s,transform .16s;}
  .btn:hover{background:#ffd675; transform:translateY(-1px);}
  .btn.ghost{background:transparent; color:var(--txt); border:1px solid var(--line);}
  .btn.ghost:hover{background:var(--card2); border-color:var(--acc2);}
  input[type=text],input[type=email]{background:#0a0e18; border:1px solid var(--line); color:var(--txt); border-radius:8px;
       padding:9px 12px; font-size:15px; width:160px; text-align:center;}
  select{background:#0a0e18; border:1px solid var(--line); color:var(--txt); border-radius:8px;
       padding:9px 10px; font-size:14px;}
  .keys{color:var(--dim); font-size:12px; margin-top:8px; text-align:center;}
  kbd{background:#0a0e18; border:1px solid var(--line); border-radius:4px; padding:1px 7px; font-size:12px; color:var(--txt);}
  .hidden{display:none !important;}
  #netStatus{font-size:13px; min-height:20px;}
  #netStatus.ok{color:var(--good);} #netStatus.err{color:var(--bad);} #netStatus.wait{color:var(--warn);}
  .mode-badge{font-size:11px; border-radius:6px; padding:1px 7px; margin-left:6px;}
  .mode-1v1{background:#173358; color:#8cc0ff;}
  .mode-team{background:#123b2d; color:#75dfb8;}
  .mode-ffa{background:#4a2027; color:#ff9c94;}
  body.menu-state #hud{display:none;}
  body.menu-state #stage{height:min(700px,calc(100dvh - 76px)); min-height:580px; aspect-ratio:auto;}
  #ovMenu>.btn{width:min(310px,100%);}
  #roomList{width:100%;}
  #ovSave>div,#ovAccount>div{border-radius:8px !important;}

  #touchUI{display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
           justify-content:space-between; align-items:flex-end; gap:22px;
           padding:0 max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
           pointer-events:none; user-select:none; -webkit-user-select:none;}
  body.touch.game-active #touchUI{display:flex;}
  #stick{width:116px; height:116px; border-radius:50%; pointer-events:auto; touch-action:none;
         background:rgba(23,25,31,.68); border:1.5px solid rgba(98,167,255,.58);
         position:relative; backdrop-filter:blur(5px); box-shadow:0 8px 24px rgba(0,0,0,.28);}
  #stick::before,#stick::after{content:''; position:absolute; background:rgba(98,167,255,.28);}
  #stick::before{left:50%; top:8%; bottom:8%; width:2px; transform:translateX(-50%);}
  #stick::after{top:50%; left:8%; right:8%; height:2px; transform:translateY(-50%);}
  #stickKnob{position:absolute; left:50%; top:50%; width:50px; height:50px; border-radius:50%;
         background:#6e9ee8; border:2px solid rgba(255,255,255,.5); transform:translate(-50%,-50%);
         box-shadow:0 4px 14px rgba(0,0,0,.4); pointer-events:none;}
  #btnBombTouch{width:78px; height:78px; border-radius:50%; font-size:32px; pointer-events:auto; color:var(--txt);
        background:rgba(92,27,33,.86); border:2px solid rgba(255,111,97,.8);
        display:flex; align-items:center; justify-content:center; touch-action:none; backdrop-filter:blur(4px);}
  #btnBombTouch.on{background:rgba(255,111,97,.9); transform:scale(.96);}
  #btnPauseTouch{position:fixed; top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right));
        z-index:41; width:40px; height:40px; border-radius:8px; background:rgba(23,25,31,.88);
        border:1px solid var(--line); color:var(--txt); font-size:18px;
        display:none; align-items:center; justify-content:center; touch-action:manipulation;}
  body.touch.game-active #btnPauseTouch{display:flex;}

  @media (max-width:640px){
    body{padding:7px 8px 10px;}
    h1{font-size:18px;}
    .sub{display:none;}
    body.game-active h1{display:none;}
    #hud{gap:6px; padding:5px 6px; margin-bottom:6px; min-height:42px; flex-wrap:nowrap; justify-content:space-between;}
    body.touch.game-active #hud{padding-right:48px; gap:4px;}
    #hud .stat{gap:2px; font-size:12px;}
    #hud .stat-label{display:none;}
    #vsBox{font-size:12px; padding:4px 6px; min-width:86px; overflow:hidden; text-overflow:ellipsis;}
    #hModeWrap{max-width:70px; overflow:hidden; text-overflow:ellipsis;}
    #hMute{width:30px; height:30px;}
    #strategyDock{grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin-bottom:5px;}
    .strategy-card{grid-template-columns:1fr; grid-template-rows:32px 24px 34px; justify-items:center; gap:1px;
                   min-height:93px; padding:3px 2px;}
    .strategy-card img{width:32px; height:32px;}
    .strategy-meta{align-items:center; width:100%;}
    .strategy-meta strong{font-size:10px; max-width:100%;}
    .strategy-meta span{font-size:8.5px; margin-top:1px;}
    .strategy-actions{flex-direction:row; gap:3px;}
    .strategy-actions button{width:clamp(34px,10vw,40px); height:32px; font-size:14px;}
    #stage{width:100%; border-radius:7px;}
    body.menu-state #stage{height:calc(100dvh - 42px); min-height:620px;}
    .keys{display:none;}
    .overlay{padding:14px; gap:9px; scrollbar-gutter:auto;}
    .overlay h2{font-size:21px;}
    .overlay p{font-size:12.5px; line-height:1.55;}
    .overlay .big{font-size:30px;}
    #ovMenu{justify-content:flex-start; padding-top:18px;}
    #ovMenu .big{display:none;}
    #ovMenu h2{font-size:25px;}
    #ovMenu>.btn{width:min(320px,100%); min-height:44px; padding:8px 14px;}
    #roomList{min-width:0 !important; max-height:46dvh !important;}
    #ovLobby>div,#ovLogin>div,#ovSave>div,#ovAccount>div{max-width:100%;}
    #ovLobby>div:has(input),#loginStep1,#loginStep2>div,#saveStep1>div,#saveStep2>div{flex-wrap:wrap !important; justify-content:center;}
    #ovSave,#ovAccount{justify-content:flex-start; padding:10px;}
    #ovSave>div,#ovAccount>div{width:100%; min-width:0 !important; padding:16px !important;}
    #saveBoard,#accRecords{min-width:0 !important; width:100% !important;}
    #saveStep1,#saveStep2{width:100%;}
    #saveStep1 .btn,#saveStep2 .btn{max-width:100%;}
    input[type=text],input[type=email],select{max-width:100%;}
  }
  @media (max-width:340px){
    body.touch.game-active #hModeWrap{display:none;}
    body.touch.game-active #vsBox{min-width:78px;}
    .strategy-actions button{width:32px;}
  }
  @media (max-height:520px) and (orientation:landscape){
    body.game-active h1,body.game-active .sub{display:none;}
    body.game-active #hud{width:100%; gap:7px; padding:4px 52px 4px 8px; margin-bottom:5px;
                          font-size:11px; min-height:36px; flex-wrap:nowrap;}
    body.game-active #hud .stat-label{display:none;}
    body.game-active #vsBox{font-size:12px; padding:3px 6px;}
    #strategyDock{gap:3px; margin-bottom:4px;}
    .strategy-card{grid-template-columns:30px minmax(0,1fr) 67px; grid-template-rows:1fr; justify-items:stretch;
                   min-height:50px; padding:2px 3px; gap:3px;}
    .strategy-card img{width:30px; height:30px; align-self:center;}
    .strategy-meta{align-items:flex-start; align-self:center;}
    .strategy-meta strong{font-size:9px;}
    .strategy-meta span{font-size:7.5px;}
    .strategy-actions{flex-direction:row; align-items:center; gap:3px;}
    .strategy-actions button{width:32px; height:32px; font-size:12px;}
    #stick{width:88px; height:88px;}
    #stickKnob{width:40px; height:40px;}
    #btnBombTouch{width:64px; height:64px; font-size:26px;}
    #touchUI{padding-bottom:8px;}
    body.menu-state #stage{min-height:420px;}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important; transition:none !important;}
  }