:root{
  --tsize: 48px;
  --fire-size: 74px;
  --sk-size: 40px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;width:100%;overflow:hidden;background:#0e0e1c;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none;}

/* 游戏容器：一进页面即显示（横屏体验最佳，竖屏也铺满视口） */
#game-container{
  position:fixed;inset:0;display:block;overflow:hidden;background:#0e0e1c;
}
#game-canvas{position:absolute;left:0;top:0;width:100%;height:100%;background:#14142a;}

/* HUD */
#hud{
  position:absolute;left:0;right:0;top:0;height:44px;display:flex;align-items:center;gap:14px;
  padding:0 14px;z-index:20;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,10,20,.72),rgba(10,10,20,0));
}
.player-info{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;}
.player-info .p-icon{width:12px;height:12px;border-radius:3px;box-shadow:0 0 6px #0006;}
.player-info .hp{font-size:13px;}
.player-info.lost{opacity:.4;}
.player-info.lost .base-icon{filter:grayscale(1);}
#skill-bar{margin-left:auto;display:flex;gap:6px;}
.skill-slot{position:relative;width:34px;height:34px;border-radius:8px;background:#20203a;
  border:1px solid #3a3a60;display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden;}
.skill-slot .cd{position:absolute;inset:0;background:rgba(0,0,0,.6);transform-origin:top;transform:scaleY(0);pointer-events:none;}
.skill-slot.ready{border-color:#5a5a90;}

/* 触控区 */
#touch-area{position:absolute;inset:44px 0 0 0;z-index:15;pointer-events:none;}
#dpad{
  position:absolute;left:18px;bottom:20px;width:150px;height:150px;pointer-events:none;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;
}
#dpad .dir-btn{pointer-events:auto;}
#btn-up{grid-column:2;grid-row:1;}
#btn-left{grid-column:1;grid-row:2;}
#btn-down{grid-column:2;grid-row:3;}
#btn-right{grid-column:3;grid-row:2;}

#fire-area{position:absolute;right:18px;bottom:20px;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;}
#fire-area .fire-btn,#fire-area .sk-btn{pointer-events:auto;}
.fire-btn{width:var(--fire-size);height:var(--fire-size);border-radius:50%;font-size:18px;font-weight:800;
  background:radial-gradient(circle at 35% 30%,#ff8a5a,#d0402a);border:3px solid #ff6a3a;color:#fff;
  box-shadow:0 4px 14px rgba(200,60,30,.5);letter-spacing:1px;}
.skill-touch{display:flex;gap:8px;}
.sk-btn{width:var(--sk-size);height:var(--sk-size);border-radius:12px;font-size:18px;
  background:#25254a;border:2px solid #44447a;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.sk-btn.on{background:#4a4a8a;border-color:#8a8ae0;}

/* 通用按钮 */
.tbtn{appearance:none;color:#fff;font-family:inherit;cursor:pointer;transition:transform .08s,filter .12s;}
.tbtn:active{transform:scale(.92);filter:brightness(1.2);}
.big-btn{
  margin-top:16px;padding:14px 40px;font-size:18px;font-weight:800;border:none;border-radius:12px;
  background:linear-gradient(135deg,#ff8a5a,#e04a2a);color:#fff;cursor:pointer;
  box-shadow:0 6px 18px rgba(220,80,40,.45);letter-spacing:2px;
}
.big-btn:active{transform:scale(.96);}

/* 覆盖层 */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,18,.82);backdrop-filter:blur(3px);z-index:40;}
.overlay.hidden{display:none;}
#countdown-overlay{background:rgba(8,8,18,.35);}
#countdown-num{font-size:120px;font-weight:900;color:#fff;text-shadow:0 0 30px #ff8a5a;}
.overlay-box{background:rgba(30,30,58,.9);border:1px solid #40407a;border-radius:18px;
  padding:32px 44px;text-align:center;max-width:80%;box-shadow:0 10px 40px rgba(0,0,0,.5);}
.overlay-box h1{font-size:38px;margin-bottom:6px;background:linear-gradient(135deg,#ffd080,#ff8a5a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.overlay-box h2{font-size:32px;margin-bottom:10px;}
.menu-sub{font-size:15px;opacity:.8;margin-bottom:8px;}
.ctrl-hint{margin-top:18px;font-size:12px;opacity:.6;line-height:1.6;}
#result-sub{font-size:15px;opacity:.85;margin-bottom:8px;}

/* 在线对战 */
.online-box{margin-top:18px;padding:12px 14px;border:1px dashed #4a4a80;border-radius:10px;background:rgba(20,20,40,.5);}
.online-title{font-size:14px;font-weight:700;color:#8aa0f0;margin-bottom:8px;letter-spacing:1px;}
.online-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.online-row input{flex:1 1 140px;min-width:0;padding:9px 10px;font-size:13px;color:#fff;background:#181830;border:1px solid #3a3a66;border-radius:8px;outline:none;}
.online-row input:focus{border-color:#6a6ae0;box-shadow:0 0 0 2px rgba(106,106,224,.3);}
.mini-btn{padding:9px 18px;font-size:13px;font-weight:700;border:none;border-radius:8px;background:linear-gradient(135deg,#5a8a4a,#3a6a2a);color:#fff;cursor:pointer;letter-spacing:1px;}
.mini-btn:active{transform:scale(.96);}
.online-status{margin-top:8px;font-size:12px;opacity:.65;text-align:center;}
.online-status.ok{opacity:.9;color:#8ae08a;}
.online-status.err{opacity:.9;color:#e08a8a;}