/* 游戏页面 */
.game-topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--bg-card); border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0; gap:10px; }
.game-title { font-size:16px; font-weight:600; flex:1; text-align:center; }
.game-score { font-size:15px; font-weight:600; color:var(--accent); min-width:90px; text-align:right; }
.game-stage { flex:1; display:flex; align-items:center; justify-content:center; background:#000; position:relative; overflow:hidden; }
#gameCanvas { display:block; image-rendering:pixelated; }

/* 虚拟方向键 */
.game-dpad { display:none; position:relative; width:180px; height:180px; margin:16px auto; flex-shrink:0; }
.dpad-btn { position:absolute; width:54px; height:54px; border:2px solid rgba(255,255,255,.25); border-radius:12px; background:rgba(255,255,255,.06); color:var(--text); font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:manipulation; transition:background .1s; }
.dpad-btn:active, .dpad-btn.pressed { background:var(--primary); border-color:var(--primary); }
.dpad-up    { top:0; left:50%; transform:translateX(-50%); }
.dpad-left  { top:50%; left:0; transform:translateY(-50%); }
.dpad-center{ top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; }
.dpad-right { top:50%; right:0; transform:translateY(-50%); }
.dpad-down  { bottom:0; left:50%; transform:translateX(-50%); }

/* 战绩统计 */
.stats-content { flex:1; overflow-y:auto; padding:24px; }
.stats-picker { display:flex; gap:16px; margin-bottom:24px; }
.stats-picker select { padding:8px 14px; background:var(--bg-card); color:var(--text); border:1px solid rgba(255,255,255,.15); border-radius:8px; font-size:14px; outline:none; }
.stats-picker select:focus { border-color:var(--primary); }
.stats-summary { display:flex; gap:20px; margin-bottom:24px; }
.stat-card { flex:1; background:var(--bg-card); border-radius:var(--radius); padding:20px; text-align:center; }
.stat-card-label { font-size:13px; color:var(--text-dim); margin-bottom:6px; }
.stat-card-value { font-size:28px; font-weight:700; color:var(--accent); }
.stats-chart { background:var(--bg-card); border-radius:var(--radius); padding:24px; min-height:300px; }
.stats-chart h3 { margin-bottom:16px; font-size:16px; }
.chart-canvas { width:100%; height:280px; display:block; }
.stats-records { margin-top:24px; }
.stats-records h3 { margin-bottom:12px; font-size:16px; }
.record-row { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:rgba(255,255,255,.03); border-radius:8px; margin-bottom:6px; }
.record-row-score { font-weight:600; color:var(--accent); }
.record-row-time { font-size:13px; color:var(--text-dim); }
.stats-empty { text-align:center; color:var(--text-dim); padding:40px; font-size:14px; }

@media (max-width:768px), (hover:none) and (pointer:coarse) {
  .game-dpad { display:block; }
  .stats-summary { flex-direction:column; gap:12px; }
}