/* ===== Super Animal Running · 灰白像素风 UI ===== */
:root{
  --ink:#1a1a1a;
  --ink-2:#6f6f6f;
  --ink-3:#a8a8a8;
  --line:#dcdcdc;
  --paper:#ffffff;
  --page:#f2f2f2;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
  overflow:hidden;
}

/* ---------- 舞台 ---------- */
.stage{
  width:min(1400px, 100%, calc((100vh - 56px) * 16 / 9));
  aspect-ratio:16/9;
  position:relative;
}
.screen{
  position:absolute;inset:0;
  cursor:url('../assets/ui/crosshair.png?v=6') 16 16, crosshair;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
#game-root{position:absolute;inset:0}
#game-root canvas{
  display:block;
  image-rendering:pixelated;
}

/* ---------- HUD ---------- */
.hud{
  position:absolute;inset:0;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:18px 24px;pointer-events:none;
  font-family:var(--mono);
  opacity:0;transition:opacity .2s;
}
.hud.show{opacity:1}
.hud-left{display:flex;flex-direction:column;gap:2px}
.hud-right{position:absolute;right:24px;bottom:18px;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.hud-line{display:flex;gap:10px;align-items:baseline}

/* 弹药 */
.ammo{display:flex;align-items:center;gap:6px;font-family:var(--mono);line-height:1}
.ammo-num{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums}
.ammo-max{font-size:18px;color:var(--ink-3);margin-left:-3px}
.ammo-tag{font-size:14px;letter-spacing:1px;color:var(--ink-3);margin-left:8px}
.ammo-bar{display:block;width:64px;height:5px;background:#e6e6e6;border-radius:2px;
          overflow:hidden;opacity:0;margin-left:4px;transition:opacity .15s}
.ammo-bar i{display:block;height:100%;width:0;background:var(--ink)}
.ammo.reloading .ammo-bar{opacity:1}
.ammo.reloading .ammo-bar i{animation:reloadFill 2s linear forwards}
.ammo.reloading .ammo-tag{color:var(--ink)}
.ammo.low .ammo-num{color:#9a9a9a}
@keyframes reloadFill{from{width:0}to{width:100%}}

/* 换弹进度条（跟随玩家） */
.reload-bar{
  position:fixed;display:none;
  width:56px;height:6px;background:#cccccc;border-radius:2px;
  overflow:hidden;pointer-events:none;z-index:999;
}
.reload-fill{
  height:100%;width:0%;background:#111111;border-radius:2px;
}

.hud-label{font-size:12px;letter-spacing:2px;color:var(--ink-3)}
.hud-value{font-size:26px;font-weight:700;letter-spacing:1px;font-variant-numeric:tabular-nums}
.hud-hi{font-size:11px;letter-spacing:1.5px;color:var(--ink-3);margin-left:6px}
.hud-hi b{font-weight:700;color:var(--ink-2)}

/* 玩家卡片：猫爪 + 名字 + 血条 */
.pcard{display:flex;align-items:center;gap:11px}
.pcard-paw{
  width:30px;height:30px;display:block;
  image-rendering:pixelated;
  flex:none;
}
.pcard-main{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.pcard-name{
  font-family:var(--mono);font-size:12.5px;letter-spacing:1.5px;
  color:var(--ink);max-width:190px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hpbar{
  position:relative;width:200px;height:21px;
  border:2px solid var(--ink);background:#fff;padding:2px;
}
.hpbar-fill{
  height:100%;width:100%;background:var(--ink);
  transition:width .16s ease-out;
}
/* 分段刻度：每 30px 一道细线 */
.hpbar-seg{
  position:absolute;inset:2px;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,0) 0 29px, rgba(255,255,255,.5) 29px 30px);
}
.hpbar-fill.low{animation:lowPulse .7s ease-in-out infinite}
@keyframes lowPulse{0%,100%{opacity:1}50%{opacity:.3}}
.hpbar.hit{animation:barShake .22s ease}
@keyframes barShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  60%{transform:translateX(3px)}
}

.net.show{opacity:1}
.net.on{color:var(--ink);border-color:#c8c8c8}

/* ---------- 遮罩层 ---------- */
.overlay{
  cursor:default;
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(250,250,250,.92);
  backdrop-filter:blur(2px);
  padding:18px;
  transition:opacity .18s ease;
}
.overlay.hidden{opacity:0;pointer-events:none}

.panel{
  width:min(520px,100%);
  max-height:100%;
  overflow-y:auto;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:6px;
  box-shadow:5px 5px 0 rgba(26,26,26,.14);
  padding:26px 26px 20px;
}
.panel::-webkit-scrollbar{width:6px}
.panel::-webkit-scrollbar-thumb{background:#d8d8d8;border-radius:3px}

.panel-sm{width:min(320px,100%);text-align:center}
.btn-gap{height:10px}

h1{
  font-family:var(--mono);
  font-size:22px;letter-spacing:2.5px;
  margin:0 0 8px;text-align:center;
}
h2{
  font-family:var(--mono);
  font-size:20px;letter-spacing:5px;
  margin:0 0 14px;text-align:center;
}
.hint{
  margin:0 0 18px;text-align:center;
  font-size:12.5px;color:var(--ink-2);letter-spacing:.5px;
}

/* 教程 */
.tutorial{
  background:#f7f7f7;border:1px solid #e8e8e8;border-radius:8px;
  padding:12px 14px;margin:0 0 16px;
}
.tutorial-title{
  font-family:var(--mono);font-size:12px;letter-spacing:2px;
  color:var(--ink-2);margin-bottom:8px;text-align:center;
}
.tutorial-list{
  margin:0;padding-left:18px;
  font-size:12.5px;line-height:1.7;color:var(--ink);
}
.tutorial-list li{margin-bottom:4px}
.tutorial-list b,.tutorial-list strong{color:var(--ink);font-weight:700}


/* ---------- 表单 ---------- */
.field{margin-bottom:14px}
.field label{
  display:block;font-size:11px;letter-spacing:1px;
  color:var(--ink-2);margin-bottom:6px;
}
.field input{
  width:100%;height:42px;
  font-family:var(--mono);font-size:15px;
  padding:0 10px;
  border:2px solid var(--ink);border-radius:4px;
  background:#fff;color:var(--ink);outline:none;
}
.field input:focus{box-shadow:3px 3px 0 rgba(26,26,26,.12)}
.field input::placeholder{color:#c0c0c0}

/* ---------- 按钮 ---------- */
.btn{
  width:100%;height:42px;
  font-family:var(--mono);font-size:14px;letter-spacing:2px;
  color:var(--ink);background:#fff;
  border:2px solid var(--ink);border-radius:4px;
  cursor:pointer;
  transition:transform .06s,box-shadow .06s,background .12s;
  box-shadow:3px 3px 0 rgba(26,26,26,.16);
}
.btn:hover{background:#f6f6f6}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000}
.btn-row{display:flex;gap:10px;margin:4px 0 16px}
.btn-row .btn{flex:1}

/* 音乐音量 */
.setting{display:flex;align-items:center;gap:10px;margin:12px 0 6px}
.setting-label{
  font-family:var(--mono);font-size:11px;letter-spacing:1.5px;
  color:var(--ink-2);flex:none;
}
.setting input[type=range]{
  flex:1;height:8px;-webkit-appearance:none;appearance:none;
  background:#eee;border:1px solid #d8d8d8;border-radius:4px;outline:none;cursor:pointer;
}
.setting input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:3px;
  background:var(--ink);border:0;cursor:pointer;
}
.setting input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:3px;background:var(--ink);
  border:0;cursor:pointer;
}
.setting-value{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  width:24px;text-align:right;flex:none;
}

.tip{
  min-height:16px;font-size:11px;color:#9a9a9a;
  text-align:center;margin-top:8px;letter-spacing:.5px;
}

/* ---------- 结算 ---------- */
.result{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:12px 14px;margin-bottom:10px;
  border:1px dashed #d5d5d5;border-radius:5px;background:#fafafa;
}
.result-label{display:block;font-size:11px;color:var(--ink-2);letter-spacing:1px;margin-bottom:2px}
.result-score{font-family:var(--mono);font-size:38px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.result-side{font-family:var(--mono);font-size:12px;text-align:right;line-height:1.9;color:var(--ink)}
.result-side .k{color:var(--ink-3);margin-right:8px;font-size:11px}

.upload{
  font-size:11.5px;color:var(--ink-2);
  text-align:center;margin-bottom:12px;min-height:16px;letter-spacing:.5px;
}
.upload.ok{color:#2f7d32}
.upload.warn{color:#a06a12}

/* ---------- 排行榜 ---------- */
.board{border-top:1px solid var(--line);padding-top:10px}
.board-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;letter-spacing:1.5px;color:var(--ink-2);
  margin-bottom:6px;
}
.board-state{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:1px}
.board-list{
  list-style:none;margin:0;padding:0;
  max-height:150px;overflow-y:auto;
  font-family:var(--mono);font-size:13.5px;
}
.board-list::-webkit-scrollbar{width:5px}
.board-list::-webkit-scrollbar-thumb{background:#dcdcdc;border-radius:3px}
.board-list li{
  display:flex;align-items:center;gap:10px;
  padding:5px 6px;border-radius:4px;
  font-variant-numeric:tabular-nums;
}
.board-list li:nth-child(odd){background:#fafafa}
.board-list .rk{width:22px;color:var(--ink-3);font-size:11px}
.board-list .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-list .sc{font-weight:700}
.board-list li.me{background:#ececec;box-shadow:inset 0 0 0 1px #d0d0d0}
.board-list li.me .rk{color:var(--ink)}
.board-list .empty{color:#b5b5b5;justify-content:center;font-size:11.5px;padding:10px 0}

/* ---------- 双语：英文副文本 ---------- */
/* .en 行内跟在中文右侧；.en-block 用于长句，另起一行小字 */
.en{
  font-family:var(--mono);
  font-size:.8em;font-weight:400;letter-spacing:0;
  color:var(--ink-3);margin-left:.5em;white-space:nowrap;
}
.en-block{
  display:block;margin:.28em 0 0;
  font-family:var(--mono);font-size:11px;line-height:1.55;
  letter-spacing:0;color:var(--ink-3);white-space:normal;
}
.btn .en{font-size:.78em}
.btn-primary .en{color:rgba(255,255,255,.66)}
.field label .en{font-size:.9em;margin-left:.4em}
.tutorial-title .en{font-size:.85em}
.board-head .en{font-size:.9em;margin-left:.45em}
h2 .en{font-size:.55em;margin-left:.7em;letter-spacing:0;color:var(--ink-3)}
.result-label .en{font-size:.9em;margin-left:.4em}
.result-side .k .en{font-size:.85em;margin-left:.35em}
.hint .en-block{font-size:10.5px;margin-top:3px}
.tutorial-list .en-block b,.tutorial-list .en-block strong{color:var(--ink-2)}

@media (max-width:640px){
  .hpbar{width:130px;height:17px}
  .pcard-name{font-size:11px;max-width:120px}
  body{padding:0;align-items:center}
  .stage{width:100%;aspect-ratio:16/9}
  .screen{border:0;border-radius:0}
  .panel{padding:18px 16px 14px}
  h1{font-size:16px;letter-spacing:1px}
  .result-score{font-size:26px}
}