/* ==========================================================================
   跑操模拟器 · 像素风界面（v2.1）
   v2.1 变化：
     1) 不再用固定 960×540 居中画面框 —— 画布与所有界面层铺满整个窗口，
        随窗口大小变化（同时修掉了"主界面下方露出红色跑道"的画布露边）
     2) 主界面改成仿「我的世界」的竖排菜单 + 斜角立体按钮
     3) 新增设置界面（普通设置 + 密码保护的调试面板）
   风格约束（沿用 v2.0）：只用像素字体、不用渐变/圆角/模糊/发光
   ========================================================================== */

@font-face {
  font-family: 'Vonwaon';
  src: url('../material/VonwaonBitmap-16px.ttf') format('truetype');
  font-display: block;
}

:root {
  --ink: #e8f0ee;        /* 骨白主色 */
  --dim: #8a97a4;        /* 次要文字 */
  --bg: #0d1117;         /* 最深底 */
  --panel: #1b1f27;      /* 面板底 */
  --panel2: #232a34;     /* 面板内层 */
  --slot: #2b3440;       /* 格子底 */
  --line: #3a4450;       /* 暗描边 */
  --accent: #c0392b;     /* 跑道红 */
  --gold: #f1c40f;       /* 金币金 */
  --green: #27ae60;
  /* 我的世界按钮的三段灰 */
  --mc-face: #6f6f6f;
  --mc-light: #a8a8a8;
  --mc-dark: #3f3f3f;
  --mc-text: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #05070c;
  color: var(--ink);
  font-family: 'Vonwaon', 'Microsoft YaHei', monospace;
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* 舞台：铺满窗口，画布与各层都以它为定位基准 */
#stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #05070c;
}

#game {
  display: block;
  /* v2.1：默认铺满窗口（具体尺寸由 ui.js 按"画面填充方式"覆盖） */
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  background: #0b0f16;
}

.hidden { display: none !important; }

/* ============================ 界面层 ============================ */

.layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg);
  overflow: auto;
  z-index: 10;
}

.panel {
  width: min(880px, 94vw);
  max-height: 94vh;
  overflow: auto;
  padding: 20px 28px 24px;
  border: 3px solid var(--ink);
  background: var(--panel);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6);
  text-align: center;
}

.panel-wide { width: min(1000px, 95vw); }
.panel-settings { width: min(760px, 95vw); }
.panel-warehouse { width: min(620px, 95vw); padding-bottom: 16px; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 12px;
}

.title {
  margin: 0 0 8px;
  font-size: 32px;
  letter-spacing: 3px;
  color: var(--ink);
  text-shadow: 3px 3px 0 #000;
}

.title.small { font-size: 24px; margin: 0; }
.title.danger { color: var(--accent); }

.subtitle {
  margin: 0 0 16px;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--dim);
}

.hint { margin: 6px 0; font-size: 16px; color: var(--dim); }
.hint.danger { color: var(--accent); }

.tips {
  margin: 0 0 16px;
  padding: 10px 16px;
  list-style: none;
  text-align: left;
  font-size: 16px;
  color: var(--dim);
  border: 2px solid var(--line);
  background: var(--panel2);
}

.tips li { margin: 4px 0; }
.tips b { color: var(--gold); }

.wallet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 0;
  font-size: 16px;
  color: var(--dim);
}

.wallet b { color: var(--gold); margin: 0 2px; }
.wallet-item { display: inline-flex; align-items: center; gap: 6px; }

/* ============================ 我的世界式按钮 ============================ */

.mc-btn {
  appearance: none;
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 8px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--mc-text);
  text-align: center;
  text-shadow: 2px 2px 0 #2b2b2b;
  background: var(--mc-face);
  border: 2px solid #000;
  border-radius: 0;
  /* 上/左提亮、下/右压暗 = 我的世界按钮的斜角立体 */
  box-shadow: inset 2px 2px 0 var(--mc-light), inset -2px -2px 0 var(--mc-dark);
  cursor: pointer;
}

.mc-btn:hover {
  background: #7d8a7d;
  color: #ffffa0;
  border-color: #ffffff;
}

.mc-btn:active {
  box-shadow: inset -2px -2px 0 var(--mc-light), inset 2px 2px 0 var(--mc-dark);
}

.mc-btn:disabled { color: #9a9a9a; text-shadow: none; cursor: not-allowed; }
.mc-btn:disabled:hover { background: var(--mc-face); color: #9a9a9a; border-color: #000; }

.mc-btn-small { display: inline-block; width: auto; max-width: none; margin: 0; padding: 8px 18px; }
.mc-btn-tiny { display: inline-block; width: auto; max-width: none; margin: 0; padding: 4px 10px; }
.mc-danger { background: #8a3a34; }
.mc-danger:hover { background: #a8453d; color: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

/* ============================ 主界面（竖排菜单） ============================ */

.mc-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: min(560px, 92vw);
  text-align: center;
}

.mc-title {
  margin: 0;
  font-size: 32px;
  letter-spacing: 6px;
  color: var(--ink);
  text-shadow: 4px 4px 0 #000;
}

.mc-sub { margin: 2px 0 18px; font-size: 16px; letter-spacing: 6px; color: var(--dim); }

.mc-buttons { width: 100%; }

.mc-splash {
  margin: 10px 0 0;
  font-size: 16px;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000;
  /* 注意：这里**不要**加 rotate。
     Windows 上 Chromium 会对旋转过的文字用子像素抗锯齿（-webkit-font-smoothing
     在 Windows 无效），金色字形的边缘会混出 rgb(155,17,23) 这类深红彩边，
     看起来像"画面里有红色的东西"。保持水平即可避免。 */
}

.mc-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 22px;
  font-size: 16px;
  color: var(--dim);
}

.mc-line { display: block; }
.mc-line.dim { color: #6b7683; }

.soundGate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12%;
  background: var(--bg);
  cursor: pointer;
  z-index: 20;
}

.soundGate p { margin: 0; font-size: 16px; letter-spacing: 2px; color: var(--gold); }

/* ============================ 载入 / 结算 ============================ */

.loadingText { margin: 0 0 12px; font-size: 16px; color: var(--dim); }

.bar { height: 16px; border: 2px solid var(--ink); background: var(--panel2); padding: 2px; }
.bar i { display: block; height: 100%; width: 0%; background: var(--gold); }

.resultRow { margin: 6px 0; font-size: 16px; color: var(--dim); }
.resultRow b { font-size: 24px; color: var(--gold); margin-left: 8px; }
.resultRow.dim b { font-size: 16px; color: var(--dim); margin-left: 4px; }
.coins-row { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ============================ 金币图标 ============================ */

.coin-icon { width: 32px; height: 32px; image-rendering: pixelated; vertical-align: middle; }

/* ============================ 游戏内 HUD ============================ */

.hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

.hud-box {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  background: var(--panel);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}

.hud-timer { left: 12px; top: 12px; }
.hud-coins { right: 12px; top: 12px; }
.hud-label { font-size: 16px; color: var(--dim); }
.hud-value { font-size: 24px; color: var(--gold); }
.hud-coins .coin-icon { width: 24px; height: 24px; }
.hud-gain { font-size: 16px; color: var(--green); }

.hud-fps {
  position: absolute;
  left: 12px;
  top: 64px;
  padding: 2px 8px;
  border: 2px solid var(--line);
  background: var(--panel);
  font-size: 16px;
  color: var(--green);
}

.effect-bar {
  position: absolute;
  right: 12px;
  top: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.effect-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 2px solid var(--line);
  background: var(--panel);
  font-size: 16px;
  color: var(--ink);
}

.effect-chip img { width: 16px; height: 16px; image-rendering: pixelated; }
.effect-chip .sec { color: var(--gold); }

.toast {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border: 2px solid var(--ink);
  background: var(--panel);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);
  font-size: 16px;
  color: var(--gold);
  z-index: 20;
}

/* ============================ 物品栏 / 格子 ============================ */

.hotbar {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 3px solid var(--ink);
  background: var(--panel);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);
  /* z-index 必须高于 .layer(10)：仓库界面也要能看到并操作物品栏 */
  z-index: 15;
}

.slot {
  position: relative;
  width: 48px;
  height: 48px;
  border: 2px solid var(--line);
  background: var(--slot);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot.filled { border-color: var(--ink); }
.slot.picked { border-color: var(--gold); background: #3a4450; }
.slot img { width: 32px; height: 32px; image-rendering: pixelated; }

.slot .count {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 16px;
  color: var(--ink);
  text-shadow: 2px 2px 0 #000;
}

.slot .key { position: absolute; left: 2px; top: 0; font-size: 16px; color: var(--dim); }

.hotbar.in-game .slot { width: 44px; height: 44px; }
.hotbar.in-game .slot img { width: 28px; height: 28px; }

/* ============================ 商店 ============================ */

.grid { display: grid; gap: 8px; }

.grid-shop {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px;
  border: 2px solid var(--line);
  background: var(--panel2);
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border: 2px solid var(--line);
  background: var(--slot);
  text-align: center;
}

.card.owned { border-color: var(--green); }
.card img.icon { width: 32px; height: 32px; image-rendering: pixelated; }
.card .name { font-size: 16px; color: var(--ink); }
.card .price { font-size: 16px; color: var(--gold); }
.card .desc { font-size: 16px; color: var(--dim); min-height: 48px; }
.card .owned-num { font-size: 16px; color: var(--green); }
.card .buy { display: inline-block; width: auto; margin: 0; padding: 6px 12px; }

/* ============================ 仓库 ============================ */

.grid-warehouse {
  grid-template-columns: repeat(9, 48px);
  justify-content: center;
  padding: 6px;
  border: 2px solid var(--line);
  background: var(--panel2);
  margin-bottom: 10px;
}

.grid-warehouse .slot { width: 44px; height: 44px; }
.grid-warehouse .slot img { width: 28px; height: 28px; }

.held-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid var(--line);
}

.held-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px dashed var(--line);
  background: var(--slot);
}

.held-slot img { width: 28px; height: 28px; image-rendering: pixelated; }

/* ============================ 设置界面 ============================ */

.settings-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 auto;
  max-width: 620px;
  text-align: left;
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 2px solid var(--line);
  background: var(--panel2);
  font-size: 16px;
  color: var(--ink);
}

.setting-name { flex: 0 0 200px; color: var(--dim); }
.setting-val { flex: 0 0 88px; text-align: right; color: var(--gold); }

.setting-row input[type="range"] {
  flex: 1 1 auto;
  appearance: none;
  height: 16px;
  background: var(--slot);
  border: 2px solid var(--line);
}

.setting-row input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--gold);
  border: 2px solid #000;
}

.setting-row input[type="number"],
.setting-row input[type="password"],
.pw-input {
  flex: 0 0 130px;
  width: 130px;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #12161d;
  border: 2px solid var(--line);
}

.setting-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  appearance: none;
  background: #12161d;
  border: 2px solid var(--line);
  cursor: pointer;
}

.setting-row input[type="checkbox"]:checked { background: var(--green); }

.setting-row select {
  flex: 0 0 210px;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #12161d;
  border: 2px solid var(--line);
}

.debug-gate {
  margin-top: 14px;
  padding: 12px;
  border: 2px solid var(--accent);
  background: var(--panel2);
}

.gate-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }

.debug-panel {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 2px solid var(--accent);
}

.debug-panel .setting-name { flex: 0 0 170px; }
.btn-row-wrap { flex-wrap: wrap; }

/* ==========================================================================
   v2.2：商店页签 / 背包装备槽 / 暂停界面
   ========================================================================== */

/* ---------------------------- 商店：横向页签 ---------------------------- */

.shop-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
}

.shop-tab { margin: 0; min-width: 150px; }

.shop-tab.active {
  background: #7d8a7d;
  color: #ffffa0;
  border-color: #ffffff;
}

/* ---------------------------- 背包：装备槽 ---------------------------- */

.bag-area {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
}

.equip-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 2px solid var(--line);
  background: var(--panel2);
}

.equip-title { font-size: 16px; color: var(--dim); }

.equip-tip {
  max-width: 78px;
  font-size: 16px;
  line-height: 1.2;
  color: #6b7683;
  text-align: center;
}

.equip-slots { display: flex; flex-direction: column; gap: 6px; }

.slot.equip-slot { border-style: dashed; }
.slot.equip-slot.filled { border-style: solid; border-color: var(--green); }

.slot .slot-tag {
  position: absolute;
  left: 2px;
  top: 0;
  font-size: 16px;
  color: var(--dim);
  pointer-events: none;
}

/* 耐久条：格子底部的一条细线（绿色 → 快坏了变红） */
.slot .dura {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 5px;
  background: #12161d;
  border: 1px solid #000;
  pointer-events: none;
}

.slot .dura i { display: block; height: 100%; background: var(--green); }
.slot .dura.low i { background: var(--accent); }

/* 有耐久条时把数量角标往上挪一点，别和耐久条叠在一起 */
.slot.has-dura .count { bottom: 8px; }

/* ---------------------------- 暂停界面 ---------------------------- */

.pause-panel { width: min(520px, 92vw); }
.pause-buttons { margin-top: 14px; }

/* ==========================================================================
   v2.3：装备商店（分类分组 + 右侧竖向筛选按钮）/ 装备卡片
   ========================================================================== */

.equip-shop {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}

.equip-shop-body {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 52vh;
  overflow-y: auto;
  padding: 6px;
  border: 2px solid var(--line);
  background: var(--panel2);
  text-align: left;
}

.equip-filters {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  padding: 6px;
  border: 2px solid var(--line);
  background: var(--panel2);
}

.equip-filters .equip-filter {
  margin: 0;
  min-width: 110px;
  padding: 8px 12px;
}

.equip-filters .equip-filter.active {
  background: #7d8a7d;
  color: #ffffa0;
  border-color: #ffffff;
}

.equip-group { margin-bottom: 10px; }

.equip-group-title {
  margin: 0 0 6px;
  padding: 2px 6px;
  font-size: 16px;
  color: var(--gold);
  border-bottom: 2px solid var(--line);
}

.equip-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.card .gender { font-size: 16px; color: var(--dim); }
.card .dura-num { font-size: 16px; color: var(--green); }