.badminton { padding: 24px 0; }
.badminton .container { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.badminton .title { margin: 0 0 8px; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; }
.badminton .subtitle { margin: 0 0 14px; color: #eaeaea; }
.badminton .hud { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.badminton .score { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 10px; color: #fff; font-size: 0.95rem; background: linear-gradient(135deg, rgba(176, 103, 255, 0.16), rgba(255, 101, 195, 0.12)); border: 1px solid rgba(255, 255, 255, 0.12); }
.badminton .timer { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 10px; color: #fff; font-size: 0.95rem; background: linear-gradient(135deg, rgba(176, 103, 255, 0.16), rgba(255, 101, 195, 0.12)); border: 1px solid rgba(255, 255, 255, 0.12); }
.badminton .hint { color: #eaeaea; font-size: 0.95rem; }
#badmintonGame { width: 100%; height: 400px; display: block; border-radius: 14px; background: linear-gradient(180deg, rgba(92,76,146,0.25), rgba(60,44,108,0.35)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 28px rgba(0,0,0,0.35); backdrop-filter: blur(6px); }
.badminton .actions { display: flex; gap: 10px; margin-top: 12px; }
.badminton .actions button { padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(20,20,24,0.92); color: #fff; cursor: pointer; }
.badminton .actions button:hover { background: rgba(25,25,28,0.96); }
.badminton .note { margin-top: 16px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.12); color: #aaa; font-size: 0.9rem; }