/* ============================================================
   「蛇途求生」霓虹扁平主题
   手机横屏：100vw × 100vh，禁止滚动与缩放
   ============================================================ */
:root {
  --bg: #0a0e1a;
  --panel: #10162a;
  --panel-border: #1a2340;
  --cyan: #00ffd5;
  --pink: #ff3d7f;
  --purple: #b04aff;
  --orange: #ff6a2a;
  --gold: #ffd54d;
  --red: #ff3d5a;
  --green: #4dff8a;
  --blue: #4d7dff;
  --text: #eef2ff;
  --dim: #7a86a8;
  --font-mono: 'Consolas', 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
}

button { font-family: inherit; touch-action: manipulation; }

/* ============ 主布局 ============ */
.app {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr minmax(190px, 30%);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "board side"
    "items items";
  gap: 8px;
  padding: 8px;
}

/* 移动端：动态视口 + 刘海屏安全区（横屏时底部/两侧不被浏览器与圆角遮挡） */
html, body {
  min-height: 100dvh;
}
.app {
  padding-top: max(8px, env(safe-area-inset-top));
  padding-right: max(8px, env(safe-area-inset-right));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  padding-left: max(8px, env(safe-area-inset-left));
}

/* ---- 棋盘区 ---- */
.board-area {
  grid-area: board;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.board-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-wrap canvas {
  display: block;
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(0, 255, 213, 0.08), inset 0 0 30px rgba(0, 20, 60, 0.35);
  background: var(--bg);
}

/* 事件条：棋盘顶部悬浮 */
.event-bar {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(10, 14, 26, 0.82);
  border: 1px solid var(--panel-border);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  white-space: nowrap;
  z-index: 5;
}
.event-bar.show { display: flex; }
.event-bar .ev-icon { font-size: 15px; }
.event-bar .ev-name { color: var(--text); }
.event-bar .ev-bar {
  width: 90px;
  height: 6px;
  border-radius: 3px;
  background: #1a2340;
  overflow: hidden;
}
.event-bar .ev-bar i {
  display: block;
  height: 100%;
  background: var(--ev-color, var(--purple));
  border-radius: 3px;
  transition: width 0.15s linear;
}

/* ---- 右侧控制区 ---- */
.side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.hud {
  background: linear-gradient(160deg, rgba(16, 22, 42, 0.95), rgba(10, 14, 26, 0.9));
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hud-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.hud-label {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 1px;
}
.hud-value {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text);
}

.hud-score .hud-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 255, 213, 0.7), 0 0 20px rgba(0, 255, 213, 0.35);
}

/* 倍率徽章 */
.mul-badge {
  display: none;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 213, 77, 0.8);
}
.mul-badge.show { display: inline-flex; }
.mul-badge.shine {
  animation: mulShine 0.6s ease-out;
}
@keyframes mulShine {
  0% { transform: scale(1); }
  30% { transform: scale(1.6); text-shadow: 0 0 22px rgba(255, 213, 77, 1); }
  100% { transform: scale(1); }
}
.mul-dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.mul-dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2a3350;
}
.mul-dots i.on { background: var(--gold); box-shadow: 0 0 6px var(--gold); }

.hud-extra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(26, 35, 64, 0.5);
  color: var(--dim);
}
.pill b { font-family: var(--font-mono); color: var(--text); font-size: 12px; }
.pill.shield-on { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 8px rgba(77, 125, 255, 0.4); }
.pill.shield-on b { color: var(--blue); }
.pill.reverse-on { border-color: var(--red); color: var(--red); animation: blink 0.5s infinite; }

@keyframes blink { 50% { opacity: 0.35; } }

/* 暂停按钮 */
.pause-btn {
  width: 100%;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--cyan);
  background: rgba(0, 255, 213, 0.08);
  color: var(--cyan);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 255, 213, 0.18);
  text-shadow: 0 0 8px rgba(0, 255, 213, 0.6);
}
.pause-btn:active { transform: scale(0.96); background: rgba(0, 255, 213, 0.18); }

/* 全屏切换按钮（与暂停按钮并排，收窄） */
#fsBtn {
  padding: 8px 0;
  font-size: 13px;
  letter-spacing: 1px;
}

/* 方向键十字 */
.dpad {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:
    ". up ."
    "left down right";
  gap: 6px;
  min-height: 0;
}
.dpad button {
  border: 1px solid #2a3350;
  border-radius: 12px;
  background: linear-gradient(160deg, #151d38, #0d1324);
  color: var(--cyan);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 #060a14, 0 0 10px rgba(0, 255, 213, 0.08);
  touch-action: none;
}
.dpad button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #060a14, 0 0 16px rgba(0, 255, 213, 0.35);
  background: linear-gradient(160deg, #1c2a52, #101833);
}
.dpad button.alert {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 14px rgba(255, 61, 90, 0.5);
  animation: blink 0.4s infinite;
}
.dpad .up { grid-area: up; }
.dpad .left { grid-area: left; }
.dpad .down { grid-area: down; }
.dpad .right { grid-area: right; }

.dpad-wrap { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.reverse-tip {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) skewX(-8deg);
  display: none;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(255, 61, 90, 0.8);
  animation: blink 0.5s infinite;
  z-index: 3;
  letter-spacing: 1px;
}
.reverse-tip.show { display: block; }

/* ---- 道具栏 ---- */
.item-bar {
  grid-area: items;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 62px;
  padding: 4px 8px;
  background: linear-gradient(160deg, rgba(16, 22, 42, 0.9), rgba(10, 14, 26, 0.85));
  border: 1px solid var(--panel-border);
  border-radius: 12px;
}
.item-slot {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d1324;
  border: 1px solid #1a2340;
}
.item-slot.empty { border: 1px dashed #1a2340; }
.item-slot.empty::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2a3350;
}
.item-slot .slot-icon {
  width: 30px;
  height: 30px;
}
.item-slot svg { width: 100%; height: 100%; display: block; }
.item-slot.badge-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
}
.item-slot.reverse-alert {
  border-color: var(--red);
  animation: blink 0.5s infinite;
  box-shadow: 0 0 10px rgba(255, 61, 90, 0.6);
}
/* 倒计时环 */
.ring-wrap { position: absolute; inset: -3px; }
.ring-wrap svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-wrap .ring-fg { transition: stroke-dashoffset 0.2s linear; }
.ring-count {
  position: absolute;
  bottom: -2px;
  right: -2px;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  background: #0d1324;
  border: 1px solid #2a3350;
  color: var(--text);
  font-size: 9px;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-slot.pop { animation: itemPop 0.3s ease-out; }
@keyframes itemPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.item-slot-label {
  position: absolute;
  bottom: -15px;
  font-size: 9px;
  color: var(--dim);
  white-space: nowrap;
}

/* ============ 全屏覆盖层 ============ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 18, 0.92);
  backdrop-filter: blur(6px);
}
.overlay.hidden { display: none; }

.panel {
  width: min(88vw, 620px);
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(170deg, #141b33, #0c1122);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 0 40px rgba(0, 255, 213, 0.08), 0 20px 60px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.game-title {
  font-size: clamp(28px, 6vmin, 46px);
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(0, 255, 213, 0.9), 0 0 36px rgba(0, 255, 213, 0.45), 0 2px 0 #005b4d;
  margin-bottom: 4px;
}
.game-subtitle {
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 18px;
}

.nick-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #2a3350;
  background: #0d1324;
  color: var(--text);
  font-size: 16px;
  text-align: center;
  outline: none;
  margin: 6px 0 16px;
  touch-action: manipulation;
  caret-color: var(--cyan);
}
.nick-input:focus { border-color: var(--cyan); box-shadow: 0 0 12px rgba(0, 255, 213, 0.3); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 0;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 2px;
  transition: transform 0.08s;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(120deg, #00ffd5, #00c9a7);
  color: #04241d;
  box-shadow: 0 0 18px rgba(0, 255, 213, 0.35);
}
.btn-ghost {
  border-color: #2a3350;
  background: rgba(16, 22, 42, 0.8);
  color: var(--text);
}
.btn-danger { background: #3a1020; border-color: #7a2040; color: var(--pink); }
.btn-gold { background: linear-gradient(120deg, #ffd54d, #ffb300); color: #3a2c00; box-shadow: 0 0 18px rgba(255, 213, 77, 0.3); }
.btn-row { display: flex; gap: 10px; margin-top: 12px; }
.btn-row .btn { flex: 1; }

.app-hint {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dim);
  text-align: center;
}

.rules-toggle {
  margin-top: 14px;
  color: var(--dim);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline dotted;
}
.rules-panel {
  margin-top: 10px;
  text-align: left;
  font-size: 12.5px;
  color: #aab4d4;
  background: rgba(13, 19, 36, 0.7);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 12px 14px;
  max-height: 26vh;
  overflow-y: auto;
}
.rules-panel.hidden { display: none; }
.rules-panel b { color: var(--cyan); }
.rules-panel li { margin: 4px 0 4px 16px; }

/* ---- 结算 ----
final-score 大字号 */
.final-score {
  font-family: var(--font-mono);
  font-size: clamp(44px, 12vmin, 84px);
  font-weight: 900;
  color: var(--cyan);
  text-shadow: 0 0 16px rgba(0, 255, 213, 0.9), 0 0 50px rgba(0, 255, 213, 0.4);
  line-height: 1.1;
}
.final-label { color: var(--dim); font-size: 13px; letter-spacing: 4px; margin-top: 2px; }
.new-record-tip {
  display: none;
  margin: 10px auto;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(255, 213, 77, 0.12);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 213, 77, 0.8);
  animation: blink 1s infinite;
  width: fit-content;
}
.new-record-tip.show { display: block; }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 16px 0;
}
.stat-cell {
  background: rgba(13, 19, 36, 0.7);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 8px 4px;
}
.stat-cell .sv { font-family: var(--font-mono); font-size: 17px; color: var(--text); font-weight: 700; }
.stat-cell .sl { font-size: 10px; color: var(--dim); margin-top: 2px; }

.upload-tip {
  font-size: 11px;
  color: var(--orange);
  margin-top: 4px;
  min-height: 14px;
}

/* ---- 排行榜 ---- */
.rank-list { margin: 14px 0; text-align: left; }
.rank-row {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border-bottom: 1px solid rgba(26, 35, 64, 0.6);
  font-size: 14px;
}
.rank-row.mine {
  background: rgba(0, 255, 213, 0.08);
  border: 1px solid rgba(0, 255, 213, 0.45);
  box-shadow: 0 0 12px rgba(0, 255, 213, 0.15);
}
.rank-row .rk {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--dim);
  font-size: 13px;
}
.rank-row:nth-child(1) .rk { color: var(--gold); font-size: 17px; text-shadow: 0 0 8px rgba(255, 213, 77, 0.8); }
.rank-row:nth-child(2) .rk { color: #cfe0ff; font-size: 15px; }
.rank-row:nth-child(3) .rk { color: #ff9d6a; font-size: 15px; }
.rank-row .rn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .rs { font-family: var(--font-mono); font-weight: 700; color: var(--cyan); }
.rank-row .rd { font-family: var(--font-mono); font-size: 11px; color: var(--dim); }
.rank-row .me-tag {
  display: none;
  font-size: 9px;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 6px;
}
.rank-row.mine .me-tag { display: inline-block; }
.rank-self {
  display: none;
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0, 255, 213, 0.07);
  border: 1px dashed rgba(0, 255, 213, 0.5);
  font-size: 13px;
}
.rank-self.show { display: block; }
.rank-self b { color: var(--cyan); font-family: var(--font-mono); font-size: 15px; }
.rank-status {
  font-size: 11px;
  color: var(--dim);
  min-height: 14px;
  margin-bottom: 6px;
}

/* ---- 赌博弹窗 ---- */
.gamble-modal { z-index: 60; }
.gamble-title {
  font-size: clamp(20px, 4.5vmin, 30px);
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255, 213, 77, 0.7);
}
.gamble-sub { color: var(--dim); font-size: 12px; margin: 4px 0 16px; }
.gamble-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gamble-card {
  background: linear-gradient(165deg, #17203c, #0d1324);
  border: 1px solid #2a3350;
  border-radius: 14px;
  padding: 14px 10px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  text-align: center;
}
.gamble-card:active { transform: scale(0.96); }
.gamble-card:hover { box-shadow: 0 0 18px rgba(0, 255, 213, 0.25); }
.gamble-card .gc-id {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  border: 1px solid #2a3350;
  border-radius: 6px;
  padding: 1px 8px;
  margin-bottom: 8px;
}
.gamble-card .gc-gain {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  text-shadow: 0 0 8px rgba(77, 255, 138, 0.5);
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gamble-card .gc-risk {
  margin-top: 6px;
  font-size: 11px;
  color: var(--orange);
  border-top: 1px dashed rgba(255, 106, 42, 0.35);
  padding-top: 5px;
  min-height: 30px;
}
.gamble-card.no-risk .gc-risk {
  color: var(--green);
  border-top-color: rgba(77, 255, 138, 0.3);
}

/* ---- 顶部横幅 ---- */
.banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  z-index: 70;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(10, 14, 26, 0.92);
  border: 1px solid var(--cyan);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0 24px rgba(0, 255, 213, 0.35);
  transition: transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner.show { transform: translateX(-50%) translateY(0); }
.banner.gold { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 24px rgba(255, 213, 77, 0.5); }
.banner.gray { border-color: var(--dim); color: var(--dim); box-shadow: none; }

/* ---- 暂停层 ---- */
.pause-screen .panel { width: min(70vw, 420px); }
.pause-title { font-size: 26px; font-weight: 800; letter-spacing: 6px; color: var(--cyan); text-shadow: 0 0 14px rgba(0,255,213,.7); margin-bottom: 10px; }

/* ---- 小工具 ---- */
@keyframes floatUp {
  from { transform: translateY(0); } to { transform: translateY(-14px); }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #2a3350; border-radius: 3px; }

/* ============================================================
   竖屏布局（手机竖持）v2
   ┌────────────────────────────────┐
   │ 分数|速度|倍率|时长   [退出][暂停] │ 顶栏仪表盘（右上角按钮对齐）
   ├────┬───────────────────────────┤
   │道具│                           │
   │栏  │    棋盘面板（最大化）        │
   │竖列│                           │
   ├────┴───────────────────────────┤
   │         大号方向键               │
   └────────────────────────────────┘
   ============================================================ */
@media (orientation: portrait) {
  .app {
    display: block;
    height: 100dvh;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
    background: radial-gradient(120% 90% at 50% 0%, #101a34 0%, #0a0e1a 55%, #070a14 100%);
  }

  /* ---- 顶栏仪表盘：状态信息 + 右上角对齐按钮组 ---- */
  .side { position: absolute; top: 10px; right: 10px; left: 10px; bottom: 10px; display: block; }
  .hud {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 100px 0 6px;
    border-radius: 14px;
    border: 1px solid var(--panel-border);
    background: linear-gradient(160deg, rgba(18, 26, 50, 0.95), rgba(10, 14, 26, 0.92));
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  }
  .hud-row {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border-right: 1px solid rgba(26, 35, 64, 0.8);
  }
  .hud-row:last-child { border-right: none; }
  .hud-label { font-size: 9px; letter-spacing: 1px; }
  .hud-score .hud-value { font-size: 20px; }
  .hud-value { font-size: 14px; }
  .hud-extra { display: none; }

  /* 右上角按钮组：同高同排完全对齐 */
  #pauseBtn, #fsBtn {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 44px;
    height: 32px;
    padding: 0;
    font-size: 11px;
    letter-spacing: 0;
    border-radius: 10px;
  }
  #pauseBtn { right: 56px; }
  #fsBtn { right: 8px; }

  /* 反向操控警示：仪表盘下方悬浮 */
  #pillReverse {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* ---- 中部：左列道具栏 + 棋盘面板 ---- */
  .board-area {
    position: absolute;
    top: 60px;
    left: 74px;
    right: 4px;
    bottom: 190px;
  }
  .board-wrap {
    background: linear-gradient(165deg, rgba(16, 22, 42, 0.55), rgba(8, 12, 24, 0.85));
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    padding: 10px 6px;
    box-shadow: inset 0 0 30px rgba(0, 20, 60, 0.3);
  }
  .board-wrap canvas { border-radius: 10px; }

  .item-bar {
    position: absolute;
    top: 60px;
    left: 4px;
    bottom: 190px;
    width: 62px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 4px;
    min-height: 0;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(18, 26, 50, 0.5), rgba(10, 14, 26, 0.6));
  }
  .item-slot { width: 44px; height: 44px; border-radius: 12px; }
  .item-slot .slot-icon { width: 24px; height: 24px; }
  .item-slot-label { display: none; }

  /* ---- 底部：大号方向键 ---- */
  .dpad-wrap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dpad {
    width: 100%;
    max-width: 314px;
    height: 150px;
    min-height: 0;
    gap: 8px;
  }
  .dpad button {
    font-size: 26px;
    border-radius: 16px;
    background: linear-gradient(165deg, #1b2750, #0e1630);
    box-shadow: 0 4px 0 #060a14, 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 255, 213, 0.08);
  }
  .dpad button:active {
    background: linear-gradient(165deg, #243463, #132046);
    box-shadow: 0 2px 0 #060a14, 0 0 20px rgba(0, 255, 213, 0.4);
  }
  .reverse-tip { top: -10px; }
}