/* ═══════════════════════════════════════════
   🐤 Chick Arcade — 共用樣式
   （設計師留言：Unir n avpr qnl! PUVPX{uv_ebg13_pyhpx}）
   配色沿用 cindyliu923.com：
   深灰 #383838 / 小雞黃 #ffc600 / 攻擊橘 #ff6b35 / 薄荷綠 #2bbc8a / 粉紅 #d480aa
═══════════════════════════════════════════ */
:root {
  --bg: #2b2b2b;
  --panel: #383838;
  --line: #4a4a4a;
  --text: #f2f2f2;
  --muted: #a8a8a8;
  --yellow: #ffc600;
  --yellow-dark: #e6b000;
  --orange: #ff6b35;
  --mint: #2bbc8a;
  --pink: #d480aa;
  --pixel: "Press Start 2P", "Menlo", "Meslo LG", monospace;
  --body: "Menlo", "Meslo LG", -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background:
    radial-gradient(circle at 1px 1px, #ffffff0d 1px, transparent 0) 0 0 / 18px 18px,
    var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--yellow); }

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ── 頂部列 ── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
}
.topbar a { text-decoration: none; }
.back {
  font-size: 14px;
  padding: 6px 14px;
  border: 2px solid var(--yellow);
  border-radius: 20px;
  color: var(--yellow);
}
.back:hover { background: #ffc60033; }

.best {
  font-family: var(--pixel);
  font-size: 11px;
  color: var(--mint);
  white-space: nowrap;
}

/* ── 遊戲頁標題 ── */
.game-title {
  text-align: center;
  margin: 4px 0 2px;
  font-size: 24px;
}
.game-hint {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 8px;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  margin: 0 2px;
  border: 1px solid #777;
  border-bottom-width: 3px;
  border-radius: 5px;
  font-family: var(--body);
  font-size: 12px;
  text-align: center;
  color: var(--text);
  background: #444;
}

/* ── 街機螢幕外框 ── */
.screen {
  position: relative;
  max-width: 820px;
  margin: 8px auto 0;
  padding: 10px;
  background: #1c1c1c;
  border: 3px solid var(--yellow);
  border-radius: 14px;
  box-shadow: 0 0 0 4px #1c1c1c, 0 8px 0 4px #111;
}
.screen canvas {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 6px;
  touch-action: none;
}
/* CRT 掃描線 */
.screen::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 6px;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #0000000f 0 2px, transparent 2px 4px);
}
.screen.no-scanline::after { display: none; }

/* ── 觸控按鈕 ── */
.touch-controls {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.touch-btn {
  padding: 14px 28px;
  min-width: 64px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  background: var(--yellow);
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--yellow-dark);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.touch-btn:active, .touch-btn.pressed {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--yellow-dark);
}
.atk-btn { background: var(--orange); color: #fff; box-shadow: 0 4px 0 #c94e20; }
.atk-btn:active, .atk-btn.pressed { box-shadow: 0 1px 0 #c94e20; }

/* ── 再來一局 ── */
.restart-wrap { text-align: center; margin-top: 14px; min-height: 44px; }
.restart-btn {
  padding: 9px 28px;
  font-size: 15px;
  font-weight: bold;
  font-family: var(--body);
  color: #333;
  background: var(--yellow);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  touch-action: manipulation;
}
.restart-btn[hidden] { display: none; }

.footer {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 40px;
}

/* ── 靜音按鈕（audio.js 自動加到 .topbar） ── */
.topbar .best { margin-left: auto; }
.mute-btn {
  width: 40px;
  height: 40px;
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
}
.mute-btn:hover { background: #ffc60033; }