/* ============================================
   SMASH MOLE - Main Stylesheet
   Theme: Neon Arcade Cabinet
   ============================================ */

:root {
  --bg-deep: #06060f;
  --bg-main: #0a0a1a;
  --bg-card: #11112a;
  --bg-elevated: #1a1a3e;

  --neon-green: #00ff88;
  --neon-green-dim: #00cc6a;
  --neon-pink: #ff2d6f;
  --neon-pink-dim: #cc2459;
  --neon-cyan: #00e5ff;
  --neon-cyan-dim: #00b8cc;
  --neon-gold: #ffd700;
  --neon-gold-dim: #ccac00;
  --neon-purple: #b44dff;
  --neon-orange: #ff6b35;
  --neon-red: #ff1744;

  --text-primary: #f0f0ff;
  --text-secondary: #8888aa;
  --text-dim: #555577;

  --glow-green: 0 0 10px #00ff8844, 0 0 30px #00ff8822;
  --glow-pink: 0 0 10px #ff2d6f44, 0 0 30px #ff2d6f22;
  --glow-cyan: 0 0 10px #00e5ff44, 0 0 30px #00e5ff22;
  --glow-gold: 0 0 10px #ffd70044, 0 0 30px #ffd70022;

  --font-display: 'Bungee', cursive;
  --font-ui: 'Orbitron', sans-serif;
  --font-body: 'Chakra Petch', sans-serif;

  --grid-size: min(85vw, 85vh, 500px);
  --cell-gap: 2px;
  --border-radius: 8px;
  --border-radius-lg: 16px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%; overflow:hidden;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  /* iOS: prevent overscroll bounce */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  /* iOS: use full viewport including safe areas */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

html {
  /* iOS: prevent pull-to-refresh and rubber-band scroll */
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  height: 100dvh; /* dynamic viewport: adapts to iOS address bar */
}

/* Prevent double-tap zoom on interactive elements */
button, .cell, .stage-btn, .skin-card, .skin-tab {
  touch-action: manipulation;
}

body {
  display:flex; justify-content:center; align-items:center;
  background:
    radial-gradient(ellipse at 50% 0%, #1a0a3010 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%, #0a1a3020 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, #1a0a2020 0%, transparent 50%),
    var(--bg-deep);
}

.scanlines {
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
}

.screen {
  position:fixed; inset:0;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  z-index:10;
  height: 100dvh; height: 100%;
}
.screen.active { display:flex; }
.screen.overlay {
  background:rgba(6,6,15,0.85); backdrop-filter:blur(8px); z-index:100;
}

/* Title */
.title-container { text-align:center; animation:fadeInUp 0.6s ease-out; }
.title-deco-top {
  width:120px; height:3px;
  background:linear-gradient(90deg, transparent, var(--neon-green), transparent);
  margin:0 auto 24px;
}
.title-logo { line-height:1; margin-bottom:8px; }
.title-smash {
  display:block; font-family:var(--font-display);
  font-size:clamp(48px,12vw,80px); color:var(--text-primary);
  text-shadow:0 0 20px #00ff8866, 0 0 60px #00ff8822, 2px 2px 0 #000;
  letter-spacing:4px;
}
.title-mole {
  display:block; font-family:var(--font-display);
  font-size:clamp(56px,14vw,96px); color:var(--neon-green);
  text-shadow:0 0 30px #00ff8888, 0 0 80px #00ff8844, 3px 3px 0 #004422;
  letter-spacing:8px;
}
.title-mole-emoji {
  font-size:64px; margin:16px 0;
  animation:moleFloat 2s ease-in-out infinite;
  filter:drop-shadow(0 0 20px #00ff8844);
}
.title-tagline {
  font-family:var(--font-ui); font-size:12px;
  color:var(--text-secondary); letter-spacing:6px; margin-bottom:32px;
}
.title-buttons { display:flex; gap:12px; justify-content:center; margin-top:12px; }
.title-player-name {
  font-family:var(--font-body); font-size:13px; color:var(--neon-cyan);
  margin-bottom:8px; letter-spacing:1px; min-height:20px;
}
.title-highscore {
  font-family:var(--font-ui); font-size:13px; color:var(--neon-gold);
  margin-top:24px; letter-spacing:2px; text-shadow:var(--glow-gold);
}

/* Leaderboard */
.title-leaderboard {
  margin-top:16px; padding:12px; width:280px; max-width:90vw;
  background:var(--bg-card); border:1px solid #333355;
  border-radius:var(--border-radius); text-align:left;
}
.lb-title {
  font-family:var(--font-ui); font-size:11px; color:var(--neon-cyan);
  letter-spacing:2px; text-align:center; margin-bottom:8px;
  padding-bottom:6px; border-bottom:1px solid rgba(0,229,255,0.15);
}
.lb-body { max-height:200px; overflow-y:auto; }
.lb-row {
  display:flex; align-items:center; gap:8px;
  padding:5px 4px; font-size:12px;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.lb-row:last-child { border-bottom:none; }
.lb-rank {
  font-family:var(--font-ui); font-weight:900; width:24px; text-align:center;
  color:var(--text-dim); font-size:11px;
}
.lb-name { flex:1; color:var(--text-secondary); font-family:var(--font-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-score { font-family:var(--font-ui); font-weight:700; color:var(--text-primary); font-size:11px; }
.lb-top1 .lb-rank { color:var(--neon-gold); text-shadow:var(--glow-gold); }
.lb-top1 .lb-name { color:var(--neon-gold); }
.lb-top1 .lb-score { color:var(--neon-gold); }
.lb-top2 .lb-rank { color:#c0c0c0; }
.lb-top2 .lb-name { color:#c0c0c0; }
.lb-top3 .lb-rank { color:#cd7f32; }
.lb-top3 .lb-name { color:#cd7f32; }
.lb-empty {
  text-align:center; padding:12px; font-size:12px;
  color:var(--text-dim); font-family:var(--font-body);
}

/* Buttons */
.btn-primary {
  font-family:var(--font-ui); font-size:16px; font-weight:700;
  padding:14px 40px; border:2px solid var(--neon-green); border-radius:var(--border-radius);
  background:linear-gradient(180deg, #00ff8818 0%, #00ff8808 100%);
  color:var(--neon-green); cursor:pointer; letter-spacing:2px;
  transition:all 0.15s ease; text-transform:uppercase;
  position:relative; overflow:hidden;
}
.btn-primary:hover,.btn-primary:active {
  background:linear-gradient(180deg, #00ff8830 0%, #00ff8815 100%);
  box-shadow:var(--glow-green); transform:scale(1.02);
}
.btn-primary:active { transform:scale(0.98); }
.btn-glow { animation:buttonGlow 2s ease-in-out infinite; }

.btn-secondary {
  font-family:var(--font-ui); font-size:13px; font-weight:600;
  padding:10px 24px; border:1px solid var(--text-dim); border-radius:var(--border-radius);
  background:rgba(255,255,255,0.03); color:var(--text-secondary);
  cursor:pointer; letter-spacing:1px; transition:all 0.15s ease; text-transform:uppercase;
}
.btn-secondary:hover,.btn-secondary:active {
  border-color:var(--neon-cyan); color:var(--neon-cyan);
  background:rgba(0,229,255,0.05);
}
.btn-secondary:active { transform:scale(0.97); }
.btn-locked { opacity:0.4; pointer-events:none; }

.btn-pause {
  position:fixed; top:calc(8px + env(safe-area-inset-top, 0px)); right:calc(8px + env(safe-area-inset-right, 0px)); width:40px; height:40px;
  border:1px solid var(--text-dim); border-radius:50%;
  background:rgba(0,0,0,0.5); color:var(--text-secondary);
  font-size:18px; cursor:pointer; z-index:50;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s ease;
}
.btn-pause:hover { border-color:var(--neon-cyan); color:var(--neon-cyan); }

/* Stage Intro */
.stage-intro-content { text-align:center; animation:stageIntroIn 0.5s ease-out; }
.stage-number {
  font-family:var(--font-ui); font-size:clamp(14px,4vw,18px);
  color:var(--neon-cyan); letter-spacing:6px; text-shadow:var(--glow-cyan); margin-bottom:8px;
}
.stage-name {
  font-family:var(--font-display); font-size:clamp(28px,8vw,48px);
  color:var(--text-primary); margin-bottom:16px;
  text-shadow:0 0 30px rgba(255,255,255,0.2);
}
.stage-gimmick {
  font-family:var(--font-body); font-size:14px;
  color:var(--neon-gold); margin-bottom:20px; letter-spacing:1px;
}
.stage-boss-preview { display:flex; align-items:center; justify-content:center; gap:12px; }
.boss-emoji-preview { font-size:48px; animation:bossBreathe 1.5s ease-in-out infinite; }
.boss-hp-preview { font-family:var(--font-ui); font-size:14px; color:var(--neon-pink); text-shadow:var(--glow-pink); }

/* HUD Top */
.hud-top { width:100%; max-width:540px; padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top, 0px)); display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.boss-area { display:flex; align-items:center; gap:10px; }
.boss-portrait {
  font-size:36px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-card); border:2px solid var(--neon-pink-dim);
  border-radius:var(--border-radius); flex-shrink:0; transition:all 0.3s ease;
}
.boss-portrait.hurt { border-color:var(--neon-red); animation:bossHurt 0.3s ease; }
.boss-portrait.panic { animation:bossPanic 0.5s ease-in-out infinite; border-color:var(--neon-red); }
.boss-hp-container { flex:1; min-width:0; }
.boss-hp-bar {
  height:20px; background:var(--bg-card); border:1px solid #333355;
  border-radius:10px; overflow:hidden; position:relative;
}
.boss-hp-fill {
  position:absolute; top:0; left:0; bottom:0; width:100%;
  background:linear-gradient(180deg, var(--neon-pink), var(--neon-pink-dim));
  border-radius:10px; transition:width 0.15s ease-out; z-index:2;
}
.boss-hp-trail {
  position:absolute; top:0; left:0; bottom:0; width:100%;
  background:rgba(255,45,111,0.3); border-radius:10px;
  transition:width 0.8s ease-out 0.2s; z-index:1;
}
.boss-hp-text { font-family:var(--font-ui); font-size:11px; color:var(--text-secondary); text-align:right; margin-top:2px; }

.hud-info { display:flex; justify-content:space-between; align-items:center; padding:0 4px; }
.hud-stage { font-family:var(--font-ui); font-size:11px; color:var(--neon-cyan); letter-spacing:2px; }
.hud-timer {
  font-family:var(--font-ui); font-size:18px; font-weight:900;
  color:var(--text-primary); letter-spacing:1px;
  position:relative; transition:transform 0.1s ease;
}
.hud-timer.warning { color:var(--neon-red); animation:timerBlink 0.5s ease-in-out infinite; }
.hud-timer.timer-hit { animation:timerHit 0.4s ease-out; }
.hud-timer.timer-gain { animation:timerGain 0.4s ease-out; }
.timer-icon { font-size:14px; margin-right:4px; }
.timer-s { font-size:12px; color:var(--text-secondary); }

/* Timer Bar */
.timer-bar {
  width:100%; height:4px; margin-top:3px;
  background:rgba(255,255,255,0.08); border-radius:2px;
  overflow:hidden; position:relative;
}
.timer-bar-fill {
  position:absolute; top:0; left:0; bottom:0; width:100%;
  background:var(--neon-green); border-radius:2px;
  transition:width 0.3s ease-out, background 0.5s ease; z-index:2;
}
.timer-bar-trail {
  position:absolute; top:0; left:0; bottom:0; width:100%;
  background:rgba(0,255,136,0.25); border-radius:2px;
  transition:width 0.8s ease-out 0.15s; z-index:1;
}
/* Color stages */
.timer-bar-fill.timer-mid { background:var(--neon-gold); }
.timer-bar-trail.timer-mid { background:rgba(255,215,0,0.25); }
.timer-bar-fill.timer-low { background:var(--neon-red); }
.timer-bar-trail.timer-low { background:rgba(255,23,68,0.25); }

.hud-combo {
  display:flex; align-items:baseline; gap:4px;
  opacity:0; transform:scale(0.8); transition:all 0.2s ease;
}
.hud-combo.active { opacity:1; transform:scale(1); }
.combo-count { font-family:var(--font-ui); font-size:20px; font-weight:900; color:var(--neon-gold); text-shadow:var(--glow-gold); }
.combo-multiplier { font-family:var(--font-ui); font-size:12px; color:var(--neon-orange); }

/* HUD Bottom */
.hud-bottom { width:100%; max-width:540px; padding:6px 16px; padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px)); display:flex; justify-content:space-between; flex-shrink:0; }
.hud-score,.hud-best { font-family:var(--font-ui); font-size:12px; color:var(--text-secondary); letter-spacing:1px; }
.hud-score span,.hud-best span { color:var(--text-primary); font-weight:700; }

/* Result / Game Over */
.result-content,.gameover-content { text-align:center; padding:24px; animation:fadeInUp 0.5s ease-out; max-width:400px; width:90%; }
.result-title { font-family:var(--font-display); font-size:clamp(28px,7vw,40px); color:var(--neon-green); text-shadow:var(--glow-green); margin-bottom:16px; }
.gameover-title { font-family:var(--font-display); font-size:clamp(28px,7vw,40px); color:var(--neon-red); text-shadow:0 0 20px #ff174466; margin-bottom:16px; }

.result-grade-container { margin:16px 0; }
.result-grade,.gameover-grade {
  display:inline-block; font-family:var(--font-display); font-size:72px;
  width:100px; height:100px; line-height:100px;
  border:3px solid var(--neon-gold); border-radius:50%;
  color:var(--neon-gold); text-shadow:var(--glow-gold);
  animation:gradeReveal 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.gameover-grade { border-color:var(--neon-red); color:var(--neon-red); text-shadow:0 0 20px #ff174466; }

.result-stats,.gameover-stats { margin:20px 0; text-align:left; }
.stat-row {
  display:flex; justify-content:space-between; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
  font-family:var(--font-body); font-size:14px;
}
.stat-row span:first-child { color:var(--text-secondary); }
.stat-row span:last-child { font-family:var(--font-ui); font-weight:700; color:var(--text-primary); }
.stat-row.total {
  border-bottom:none; border-top:2px solid var(--neon-green-dim);
  margin-top:4px; padding-top:12px;
}
.stat-row.total span:last-child { color:var(--neon-green); font-size:18px; text-shadow:var(--glow-green); }

.result-unlock {
  margin:16px 0; padding:12px;
  background:linear-gradient(90deg, rgba(255,215,0,0.1), rgba(255,215,0,0.05));
  border:1px solid var(--neon-gold-dim); border-radius:var(--border-radius);
  font-family:var(--font-body); font-size:14px; color:var(--neon-gold);
  animation:unlockReveal 0.8s ease-out 0.5s both;
}
.unlock-icon { font-size:20px; margin-right:8px; }
.result-buttons,.gameover-buttons { display:flex; flex-direction:column; gap:10px; margin-top:20px; }

/* Modal / Pause */
.modal-content {
  text-align:center; padding:32px; background:var(--bg-card);
  border:1px solid #333355; border-radius:var(--border-radius-lg);
  max-width:320px; width:85%; animation:modalIn 0.3s ease-out;
}
.modal-content h2,.pause-content h2 {
  font-family:var(--font-display); font-size:32px;
  color:var(--text-primary); margin-bottom:24px;
}
.pause-content { display:flex; flex-direction:column; gap:12px; }

/* Stage Select */
.stage-select-content { padding:24px; width:90%; max-width:500px; max-height:85vh; overflow-y:auto; animation:fadeInUp 0.4s ease-out; }
.screen-title { font-family:var(--font-display); font-size:28px; text-align:center; color:var(--neon-cyan); text-shadow:var(--glow-cyan); margin-bottom:20px; }
.stage-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.stage-btn {
  font-family:var(--font-ui); font-size:12px; padding:12px 8px;
  border:1px solid #333355; border-radius:var(--border-radius);
  background:var(--bg-card); color:var(--text-primary);
  cursor:pointer; text-align:center; transition:all 0.15s ease;
}
.stage-btn:hover { border-color:var(--neon-cyan); background:rgba(0,229,255,0.05); }
.stage-btn.locked { opacity:0.3; pointer-events:none; }
.stage-btn.cleared { border-color:var(--neon-green-dim); }
.stage-btn .stage-btn-num { display:block; font-size:18px; font-weight:900; margin-bottom:4px; }
.stage-btn .stage-btn-grade { font-size:10px; color:var(--neon-gold); }

/* Skin Screen */
.skin-content { padding:24px; width:90%; max-width:500px; max-height:85vh; overflow-y:auto; animation:fadeInUp 0.4s ease-out; text-align:center; }
.skin-tabs { display:flex; gap:8px; justify-content:center; margin-bottom:20px; }
.skin-tab {
  font-family:var(--font-ui); font-size:12px; padding:8px 20px;
  border:1px solid #333355; border-radius:var(--border-radius);
  background:transparent; color:var(--text-secondary);
  cursor:pointer; letter-spacing:1px; transition:all 0.15s ease;
}
.skin-tab.active { border-color:var(--neon-green); color:var(--neon-green); background:rgba(0,255,136,0.08); }
.skin-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
.skin-card {
  padding:16px 12px; border:1px solid #333355; border-radius:var(--border-radius);
  background:var(--bg-card); cursor:pointer; transition:all 0.15s ease; text-align:center;
}
.skin-card:hover { border-color:var(--neon-cyan); }
.skin-card.selected { border-color:var(--neon-green); background:rgba(0,255,136,0.05); }
.skin-card.locked { opacity:0.4; }
.skin-card .skin-emoji { font-size:32px; margin-bottom:8px; }
.skin-card .skin-name { font-family:var(--font-ui); font-size:11px; color:var(--text-primary); margin-bottom:4px; }
.skin-card .skin-condition { font-size:10px; color:var(--text-dim); }
.skin-preview { margin:12px 0; }

/* Guide Screen */
.guide-content { padding:24px; width:90%; max-width:500px; max-height:85vh; overflow-y:auto; animation:fadeInUp 0.4s ease-out; text-align:center; }
.guide-tabs { display:flex; gap:8px; justify-content:center; margin-bottom:16px; }
.guide-tab {
  font-family:var(--font-ui); font-size:12px; padding:8px 20px;
  border:1px solid #333355; border-radius:var(--border-radius);
  background:transparent; color:var(--text-secondary);
  cursor:pointer; letter-spacing:1px; transition:all 0.15s ease;
}
.guide-tab.active { border-color:var(--neon-green); color:var(--neon-green); background:rgba(0,255,136,0.08); }
.guide-body { text-align:left; margin-bottom:16px; }

.guide-section-title {
  font-family:var(--font-ui); font-size:13px; color:var(--neon-cyan);
  letter-spacing:1px; margin:16px 0 8px; padding-bottom:4px;
  border-bottom:1px solid rgba(0,229,255,0.15);
}
.guide-section-title:first-child { margin-top:0; }

.guide-enemy-row {
  display:flex; align-items:center; gap:10px;
  padding:8px; margin-bottom:4px;
  background:var(--bg-card); border-radius:var(--border-radius);
  border:1px solid transparent; transition:border-color 0.15s;
}
.guide-enemy-row:hover { border-color:#333355; }
.guide-enemy-emoji { font-size:24px; width:36px; text-align:center; flex-shrink:0; }
.guide-enemy-info { flex:1; min-width:0; }
.guide-enemy-name { font-family:var(--font-ui); font-size:12px; color:var(--text-primary); font-weight:700; }
.guide-enemy-desc { font-size:12px; color:var(--text-secondary); margin-top:2px; line-height:1.4; }
.guide-enemy-tags { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.guide-tag {
  font-family:var(--font-ui); font-size:9px; padding:2px 6px;
  border-radius:4px; letter-spacing:0.5px;
}
.guide-tag.tag-score { background:rgba(0,255,136,0.1); color:var(--neon-green); border:1px solid rgba(0,255,136,0.2); }
.guide-tag.tag-dmg { background:rgba(255,45,111,0.1); color:var(--neon-pink); border:1px solid rgba(255,45,111,0.2); }
.guide-tag.tag-time { background:rgba(0,229,255,0.1); color:var(--neon-cyan); border:1px solid rgba(0,229,255,0.2); }
.guide-tag.tag-warn { background:rgba(255,23,68,0.1); color:var(--neon-red); border:1px solid rgba(255,23,68,0.2); }
.guide-tag.tag-special { background:rgba(255,215,0,0.1); color:var(--neon-gold); border:1px solid rgba(255,215,0,0.2); }

.guide-score-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 8px; border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:13px;
}
.guide-score-row span:first-child { color:var(--text-secondary); }
.guide-score-row span:last-child { font-family:var(--font-ui); font-weight:700; color:var(--text-primary); }
.guide-score-row.highlight span:last-child { color:var(--neon-gold); }

.guide-tip {
  padding:10px 12px; margin-bottom:6px;
  background:var(--bg-card); border-radius:var(--border-radius);
  font-size:13px; color:var(--text-secondary); line-height:1.5;
  border-left:3px solid var(--neon-green-dim);
}
.guide-tip strong { color:var(--text-primary); }

/* Tutorial */
.tutorial-overlay { position:absolute; inset:0; z-index:60; pointer-events:none; }
.tutorial-hand {
  position:absolute; font-size:40px; transition:all 0.4s ease;
  animation:tutorialBounce 0.8s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(255,255,255,0.5));
}
.tutorial-text {
  position:absolute; bottom:20%; left:50%; transform:translateX(-50%);
  font-family:var(--font-body); font-size:16px; font-weight:700;
  color:var(--text-primary); background:rgba(0,0,0,0.8);
  padding:12px 24px; border-radius:var(--border-radius);
  border:1px solid var(--neon-green); text-align:center; white-space:nowrap;
}

/* Floating Texts */
#floating-texts { position:fixed; inset:0; pointer-events:none; z-index:200; }
.floating-text {
  position:absolute; font-family:var(--font-ui); font-weight:900;
  pointer-events:none; animation:floatUp 0.8s ease-out forwards;
  text-shadow:0 0 10px currentColor; z-index:200;
}
.floating-text.damage { color:var(--neon-green); font-size:20px; }
.floating-text.bonus { color:var(--neon-gold); font-size:24px; }
.floating-text.penalty { color:var(--neon-red); font-size:18px; }
.floating-text.miss { color:var(--text-dim); font-size:16px; }
.floating-text.combo { color:var(--neon-orange); font-size:28px; }
.floating-text.heal { color:var(--neon-pink); font-size:18px; }

/* Screen Flash */
.screen-flash { position:fixed; inset:0; pointer-events:none; z-index:150; opacity:0; }
.screen-flash.flash-hit { background:rgba(0,255,136,0.15); animation:screenFlash 0.15s ease-out; }
.screen-flash.flash-bomb { background:rgba(255,23,68,0.3); animation:screenFlash 0.3s ease-out; }
.screen-flash.flash-golden { background:rgba(255,215,0,0.2); animation:screenFlash 0.25s ease-out; }
.screen-flash.flash-heal { background:rgba(255,45,111,0.15); animation:screenFlash 0.3s ease-out; }

/* Border Warning */
#game-screen.border-warning::after {
  content:''; position:absolute; inset:0;
  border:3px solid var(--neon-orange); pointer-events:none;
  animation:borderPulse 1s ease-in-out infinite; z-index:5;
}
#game-screen.border-danger::after {
  content:''; position:absolute; inset:0;
  border:4px solid var(--neon-red); pointer-events:none;
  animation:borderPulse 0.5s ease-in-out infinite; z-index:5;
}

/* Shake */
.shake-light { animation:shakeLight 0.15s ease-out; }
.shake-heavy { animation:shakeHeavy 0.3s ease-out; }

/* Scrollbar */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--text-dim); border-radius:2px; }

/* Responsive */

/* Small phones (iPhone SE, etc.) */
@media (max-width:400px) {
  :root { --grid-size: min(92vw, 80vh, 400px); --cell-gap: 1px; }
  .hud-top { padding:2px 6px; gap:2px; }
  .boss-portrait { font-size:24px; width:32px; height:32px; }
  .boss-hp-bar { height:14px; }
  .boss-hp-text { font-size:10px; }
  .hud-info { padding:0 2px; }
  .hud-stage { font-size:10px; }
  .hud-timer { font-size:16px; }
  .hud-bottom { padding:4px 10px; }
  .hud-score,.hud-best { font-size:11px; }
  .btn-primary { padding:12px 30px; font-size:14px; }
  .btn-pause { top:4px; right:4px; width:36px; height:36px; font-size:16px; }
}

/* Standard mobile phones */
@media (max-width:480px) and (min-width:401px) {
  :root { --grid-size: min(90vw, 78vh, 450px); }
  .hud-top { padding:4px 8px; }
}

/* Short screens (address bar visible, small height) */
@media (max-height:600px) {
  :root { --grid-size: min(90vw, 70vh, 400px); }
  .hud-top { padding:2px 6px; gap:1px; }
  .boss-portrait { font-size:24px; width:32px; height:32px; }
  .boss-hp-bar { height:14px; }
  .hud-bottom { padding:3px 10px; }
}

/* Very short screens (e.g. older phones with large address bar) */
@media (max-height:500px) {
  :root { --grid-size: min(85vw, 62vh, 350px); }
  .boss-hp-text { display:none; }
}

/* Tablet / desktop */
@media (min-width:768px) and (min-height:700px) {
  :root { --grid-size:min(70vh,500px); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}