/* Pattern Blast Styles */
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mode-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 12px; background: rgba(255,255,255,.03); border: 2px solid var(--color-border);
  border-radius: var(--radius-lg); cursor: pointer; transition: all .25s ease;
  color: var(--color-text); font-family: inherit;
}
.mode-card:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(139,92,246,.15); }
.mode-icon { font-size: 2rem; }
.mode-name { font-weight: 700; font-size: 1rem; }
.mode-desc { font-size: .72rem; color: var(--color-text-muted); text-align: center; }

.diff-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.diff-btn {
  padding: 8px 16px; border-radius: var(--radius-full); border: 1px solid var(--color-border);
  background: transparent; color: var(--color-text); cursor: pointer; font-size: .8rem;
  font-weight: 600; transition: all .2s; font-family: inherit;
}
.diff-btn.active, .diff-btn:hover { background: var(--gradient-primary); color: #fff; border-color: transparent; }

/* Game HUD */
.game-hud { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; flex-wrap: wrap; gap: 8px; }
.hud-item { display: flex; flex-direction: column; align-items: center; padding: 6px 14px; background: rgba(255,255,255,.04); border-radius: var(--radius-md); }
.hud-label { font-size: .65rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); }
.hud-value { font-size: 1.1rem; font-weight: 800; }
.hud-combo { background: var(--gradient-accent); color: #000; padding: 4px 12px; border-radius: var(--radius-full); font-weight: 800; font-size: .85rem; animation: comboPulse .5s ease; }
@keyframes comboPulse { 0% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Timer */
.timer-container { height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; margin: 8px 0; overflow: hidden; }
.timer-bar { height: 100%; background: var(--gradient-primary); border-radius: 2px; width: 100%; }

/* Game Status */
.game-status { text-align: center; padding: 10px; font-weight: 600; font-size: .95rem; border-radius: var(--radius-md); margin-bottom: 12px; transition: all .3s; }
.status-watching { background: rgba(59,130,246,.1); color: #60a5fa; }
.status-input { background: rgba(34,197,94,.1); color: #4ade80; }
.status-wrong { background: rgba(239,68,68,.1); color: #f87171; }
.status-success { background: rgba(34,197,94,.15); color: #22c55e; }

/* Grid */
.game-grid { display: grid; gap: 6px; max-width: 500px; margin: 0 auto; padding: 16px; background: rgba(0,0,0,.2); border-radius: var(--radius-xl); border: 1px solid var(--color-border); }
.grid-tile {
  aspect-ratio: 1; border-radius: var(--radius-md); border: 2px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04); cursor: pointer; transition: all .15s ease;
  position: relative; overflow: hidden;
}
.grid-tile::after {
  content: ''; position: absolute; inset: 3px; border-radius: inherit;
  background: var(--tile-color); opacity: 0.25; transition: opacity .15s;
}
.grid-tile:hover { border-color: rgba(255,255,255,.2); transform: scale(1.03); }
.grid-tile:hover::after { opacity: 0.4; }
.grid-tile.active { transform: scale(.92); border-color: #fff; }
.grid-tile.active::after { opacity: 1; box-shadow: 0 0 20px var(--tile-color); }
.grid-tile.correct::after { opacity: 1; background: #22c55e; }
.grid-tile.wrong { animation: tileShake .4s ease; }
.grid-tile.wrong::after { opacity: 1; background: #ef4444; }
.grid-tile.success-flash::after { opacity: .8; background: #22c55e; }
.grid-tile:disabled { pointer-events: none; }
@keyframes tileShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Game Controls */
.game-controls { display: flex; justify-content: center; gap: 12px; }

/* Result */
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.result-stat { padding: 16px; background: rgba(255,255,255,.04); border-radius: var(--radius-md); }
.result-value { font-size: 1.8rem; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.result-label { font-size: .7rem; text-transform: uppercase; color: var(--color-text-muted); letter-spacing: 1px; margin-top: 4px; }
.rating { font-size: 3rem; font-weight: 900; margin: 12px 0; }
.rating-S { color: #fbbf24; text-shadow: 0 0 20px rgba(251,191,36,.4); }
.rating-A { color: #22c55e; }
.rating-B { color: #3b82f6; }
.rating-C { color: #6b7280; }

/* High Scores */
.score-row { display: flex; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .85rem; }
.score-rank { font-weight: 700; color: var(--color-primary); }
.score-value { font-weight: 700; }
.score-level, .score-acc { color: var(--color-text-muted); font-size: .75rem; }
.no-scores { color: var(--color-text-muted); text-align: center; padding: 20px; font-size: .85rem; }

@media (max-width: 480px) {
  .mode-grid { grid-template-columns: 1fr; }
  .game-grid { padding: 8px; gap: 4px; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
}