* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  background: #0b0d13;
  color: #e6ecf5;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Entry page ---- */
.entry-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background: linear-gradient(rgba(7,10,17,.68), rgba(7,10,17,.84)), url('../assets/title.png') center / cover no-repeat, #0b0d13; }
.entry-card { max-width: 460px; width: 100%; background: rgba(18,22,31,.92); border: 1px solid #3b4a5e; border-radius: 16px; padding: 28px; box-shadow: 0 18px 58px rgba(0,0,0,.45); }
.entry-title { font-size: 28px; }
.entry-tag { font-size: 16px; color: #9adcff; }
.entry-subtitle { color: #8b96a8; margin: 6px 0 18px; }
.entry-howto h2 { font-size: 16px; margin-bottom: 8px; color: #cdd7e5; }
.entry-howto ul { list-style: none; margin-bottom: 14px; }
.entry-howto li { padding: 6px 0; border-bottom: 1px solid #1d2330; }
.entry-note { color: #8b96a8; font-size: 13px; line-height: 1.6; }
.entry-play { width: 100%; padding: 14px; font-size: 18px; border: 0; border-radius: 10px; background: #40c4ff; color: #06212e; font-weight: 700; cursor: pointer; margin-top: 16px; }
.entry-play:hover { background: #5fd0ff; }
.entry-foot { text-align: center; color: #5b6675; font-size: 12px; margin-top: 14px; }

/* ---- Game page ---- */
.game-page { overflow: hidden; height: 100vh; }
.game-wrap { position: relative; height: 100%; }
#game-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.game-label { position: absolute; top: 12px; left: 14px; font-size: 13px; color: #cfe3f5; background: rgba(10,14,20,0.55); padding: 6px 10px; border-radius: 8px; }
.hud-round { position: absolute; top: 12px; right: 14px; font-size: 13px; color: #cfe3f5; background: rgba(10,14,20,0.55); padding: 6px 10px; border-radius: 8px; }
.audio-toggle { position:absolute; top:52px; right:14px; min-width:44px; min-height:44px; border: 1px solid #2a3342; border-radius: 8px; background: rgba(10,14,20,0.55); color: #cfe3f5; font-size: 12px; cursor: pointer; padding: 6px 10px; }
.countdown-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 3; }
.countdown-ready { color: #d9efff; font-weight: 700; letter-spacing: .12em; text-shadow: 0 2px 12px #000; }
.countdown-overlay strong { color: #fff; font-size: clamp(72px, 18vw, 164px); line-height: 1; text-shadow: 0 4px 20px rgba(0,0,0,.8); }
.dash-bar { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 180px; display: flex; align-items: center; gap: 8px; }
.dash-label { font-size: 12px; color: #9adcff; white-space: nowrap; }
.dash-track { flex: 1; height: 8px; background: #1d2330; border-radius: 4px; overflow: hidden; }
.dash-fill { height: 100%; background: #40c4ff; border-radius: 4px; transition: width 0.1s linear; }
.dash-btn { position: absolute; bottom: 20px; right: 20px; width: 78px; height: 78px; touch-action: manipulation; border-radius: 50%; border: 0; background: rgba(64,196,255,0.85); color: #06212e; font-weight: 700; font-size: 15px; cursor: pointer; }
.back-btn { position: absolute; bottom: 16px; left: 16px; padding: 10px 14px; border: 1px solid #2a3342; border-radius: 8px; background: rgba(10,14,20,0.55); color: #cdd7e5; font-size: 13px; cursor: pointer; }

@media (max-width: 600px) {
  .dash-bar { bottom: 112px; }
}

/* ---- Overlays ---- */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5,8,14,0.82); z-index: 10; }
.overlay-card { background: #12161f; border: 1px solid #232a37; border-radius: 16px; padding: 28px; text-align: center; max-width: 360px; width: 90%; }
.result-title { font-size: 26px; margin-bottom: 10px; }
.result-medal { display: block; width: 92px; height: 92px; object-fit: contain; margin: -8px auto 6px; }
.result-detail { color: #8b96a8; margin-bottom: 18px; line-height: 1.6; }
.error-title { font-size: 20px; margin-bottom: 10px; color: #ff8a80; }
.error-msg { color: #8b96a8; margin-bottom: 18px; }
.btn-primary { padding: 12px 24px; border: 0; border-radius: 10px; background: #40c4ff; color: #06212e; font-weight: 700; font-size: 16px; cursor: pointer; margin: 4px; }
.btn-ghost { padding: 12px 24px; border: 1px solid #2a3342; border-radius: 10px; background: transparent; color: #cdd7e5; font-size: 16px; cursor: pointer; margin: 4px; }
.noscript-msg { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: #0b0d13; color: #ff8a80; z-index: 99; }