* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

:root {
  --bg: #0a0a0f;
  --surface: #1a1a2e;
  --border: #2a2a3e;
  --text: #e0e0e0;
  --text-dim: #555568;
  --accent: #00e5a0;
  --danger: #ff4757;
  --entered: #e8a040;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Screens */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

.screen.active {
  display: flex;
}

/* ============ Title Screen ============ */
.title-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
}

.game-title {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #00e5a0, #00b4d8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.game-subtitle {
  font-size: 18px;
  color: var(--text-dim);
  letter-spacing: 6px;
  text-transform: uppercase;
}

.title-pi {
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 28px;
  color: var(--text-dim);
  margin: 20px 0;
}

.btn-primary {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 16px 64px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 20px;
  transition: transform 0.1s, opacity 0.1s;
}

.btn-primary:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.btn-secondary {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 12px 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: transform 0.1s;
}

.btn-secondary:active {
  transform: scale(0.95);
}

.high-score-display {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-dim);
}

.btn-demo {
  margin-top: 20px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 14px 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-demo:active {
  background: var(--border);
  transform: scale(0.95);
}

/* ============ Game Screen ============ */

.top-area {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* Header */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.game-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.difficulty-dots {
  display: flex;
  gap: 3px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.dot.inactive {
  background: var(--border);
}

.header-center {
  font-size: 22px;
  letter-spacing: 2px;
}

.btn-quit {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 12px;
}

/* Score */
.score-section {
  text-align: center;
  padding: 12px 0 8px;
}

.score-number {
  font-size: 80px;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.15s;
}

.score-number.bump {
  transform: scale(1.1);
}

.score-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* RPG Section */
.rpg-section {
  padding: 8px 20px 12px;
}

.rpg-track {
  position: relative;
  height: 44px;
  background: var(--surface);
  border-radius: 22px;
  border: 1px solid var(--border);
  overflow: hidden;
  padding: 0 12px;
}

.rpg-knight {
  position: absolute;
  top: 50%;
  left: var(--knight-pos, 8%);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 2;
  transition: left 0.3s ease-out;
}

.knight-emoji {
  font-size: 22px;
}

.knight-level {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0, 229, 160, 0.15);
  padding: 1px 4px;
  border-radius: 4px;
}

.rpg-enemies {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 20%;
}

.enemy {
  font-size: 20px;
  transition: transform 0.5s, opacity 0.5s;
}

.enemy.defeated {
  transform: scale(0) rotate(180deg);
  opacity: 0;
}

/* ============ Battle Overlay ============ */
.battle-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: none;
  overflow: hidden;
}

.battle-overlay.active {
  display: flex;
}

.battle-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  opacity: 0;
  pointer-events: none;
  border-radius: 0 0 20px 20px;
}

.battle-flash.flash {
  animation: screen-flash 0.3s ease-out;
}

@keyframes screen-flash {
  0% { opacity: 0.6; }
  100% { opacity: 0; }
}

.battle-text {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--danger);
  text-shadow: 0 0 20px rgba(255, 71, 87, 0.8), 0 0 60px rgba(255, 71, 87, 0.4);
  opacity: 0;
  transform: scale(2);
}

.battle-text.show {
  animation: battle-text-in 0.4s ease-out forwards;
}

.battle-text.hide {
  animation: battle-text-out 0.2s ease-in forwards;
}

@keyframes battle-text-in {
  0% { opacity: 0; transform: scale(2.5) rotate(-5deg); }
  60% { opacity: 1; transform: scale(0.9) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes battle-text-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}

.battle-arena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 16px 0;
  position: relative;
}

.battle-knight {
  font-size: 64px;
  opacity: 0;
  transform: translateX(-80px);
  filter: drop-shadow(0 0 12px rgba(0, 229, 160, 0.6));
}

.battle-knight.enter {
  animation: knight-enter 0.3s ease-out forwards;
}

.battle-knight.slash {
  animation: knight-slash 0.25s ease-in forwards;
}

@keyframes knight-enter {
  0% { opacity: 0; transform: translateX(-80px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes knight-slash {
  0% { transform: translateX(0) rotate(0); }
  50% { transform: translateX(40px) rotate(15deg); }
  100% { transform: translateX(20px) rotate(-5deg); }
}

.battle-enemy {
  font-size: 64px;
  opacity: 0;
  transform: translateX(80px);
  filter: drop-shadow(0 0 12px rgba(255, 71, 87, 0.6));
}

.battle-enemy.enter {
  animation: enemy-enter 0.3s ease-out forwards;
}

.battle-enemy.hit {
  animation: enemy-explode 0.5s ease-out forwards;
}

@keyframes enemy-enter {
  0% { opacity: 0; transform: translateX(80px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes enemy-explode {
  0% { transform: scale(1); opacity: 1; filter: brightness(1) drop-shadow(0 0 12px rgba(255, 71, 87, 0.6)); }
  10% { transform: scale(1.2); opacity: 1; filter: brightness(3) drop-shadow(0 0 30px rgba(255, 255, 200, 1)); }
  25% { transform: scale(1.5); opacity: 1; filter: brightness(2) drop-shadow(0 0 20px rgba(255, 150, 50, 0.8)); }
  50% { transform: scale(1.3) rotate(25deg); opacity: 0.6; filter: brightness(1); }
  100% { transform: scale(0) rotate(120deg); opacity: 0; filter: brightness(0); }
}

/* Sword slash canvas */
.slash-canvas {
  position: absolute;
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: 10;
}

/* Explosion shockwave ring */
.explosion-ring {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid rgba(255, 200, 50, 0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
}

.explosion-ring.active {
  animation: ring-expand 0.5s ease-out forwards;
}

@keyframes ring-expand {
  0% { opacity: 1; transform: scale(1); border-width: 4px; border-color: rgba(255, 255, 200, 1); box-shadow: 0 0 20px rgba(255, 200, 50, 0.8), inset 0 0 20px rgba(255, 200, 50, 0.4); }
  50% { opacity: 0.7; border-color: rgba(255, 120, 30, 0.8); box-shadow: 0 0 30px rgba(255, 120, 30, 0.5); }
  100% { opacity: 0; transform: scale(12); border-width: 1px; border-color: rgba(255, 71, 87, 0); box-shadow: none; }
}

.battle-result {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(0, 229, 160, 0.6);
  opacity: 0;
  margin-top: 8px;
}

.battle-result.show {
  animation: result-pop 0.6s ease-out forwards;
}

@keyframes result-pop {
  0% { opacity: 0; transform: translateY(10px) scale(0.8); }
  40% { opacity: 1; transform: translateY(-4px) scale(1.1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Particles */
.battle-particles {
  position: absolute;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: particle-fly 0.6s ease-out forwards;
}

@keyframes particle-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0); }
}

.debris {
  position: absolute;
  pointer-events: none;
  border-radius: 2px;
  animation: debris-fly 0.7s ease-out forwards;
}

@keyframes debris-fly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) rotate(var(--rot)) scale(0); }
}

.ember {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  animation: ember-float 1s ease-out forwards;
}

@keyframes ember-float {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  50% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0); }
}

/* Screen shake */
.screen-shake {
  animation: shake 0.3s ease-out;
}

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3px, -2px); }
  20% { transform: translate(4px, 1px); }
  30% { transform: translate(-2px, 3px); }
  40% { transform: translate(3px, -1px); }
  50% { transform: translate(-1px, 2px); }
  60% { transform: translate(2px, -3px); }
  70% { transform: translate(-4px, 1px); }
  80% { transform: translate(1px, -2px); }
  90% { transform: translate(-2px, 3px); }
}

/* ============ Level Up Overlay ============ */
.levelup-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 110;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 229, 160, 0.08);
  pointer-events: none;
  overflow: hidden;
}

.levelup-overlay.active {
  display: flex;
  animation: levelup-bg 1.2s ease-out forwards;
}

@keyframes levelup-bg {
  0% { background: rgba(0, 229, 160, 0.2); }
  100% { background: rgba(0, 229, 160, 0); }
}

.levelup-text {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 8px;
  color: var(--accent);
  text-shadow: 0 0 30px rgba(0, 229, 160, 0.8), 0 0 80px rgba(0, 229, 160, 0.4);
  animation: levelup-text-anim 1.2s ease-out forwards;
}

@keyframes levelup-text-anim {
  0% { opacity: 0; transform: scale(3) rotate(-5deg); }
  20% { opacity: 1; transform: scale(0.9) rotate(1deg); }
  40% { opacity: 1; transform: scale(1.05) rotate(0); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8) translateY(-20px); }
}

.levelup-level {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  animation: levelup-lvl-anim 1.2s ease-out 0.2s forwards;
}

@keyframes levelup-lvl-anim {
  0% { opacity: 0; transform: translateY(20px); }
  30% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Pi Display */
.pi-section {
  padding: 12px 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
}

.pi-section::-webkit-scrollbar {
  display: none;
}

.pi-digits {
  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
  font-size: 24px;
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 0 20px;
  white-space: nowrap;
}

.pi-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 32px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

.pi-digit.entered {
  color: var(--entered);
}

.pi-digit.current {
  color: var(--accent);
  border: 2px solid var(--accent);
  background: rgba(0, 229, 160, 0.1);
}

.pi-digit.upcoming {
  color: var(--text-dim);
}

.pi-digit.decimal {
  color: var(--text-dim);
  width: 12px;
}

.pi-digit.wrong {
  animation: wrong-flash 0.4s ease-out;
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(255, 71, 87, 0.15);
}

@keyframes wrong-flash {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* Number Pad */
.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 8px 24px;
  padding-bottom: calc(16px + var(--safe-bottom));
  max-width: 340px;
  margin: 0 auto;
  width: 100%;
}

.num-btn {
  aspect-ratio: 1.2;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 28px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, transform 0.1s;
  touch-action: manipulation;
}

.num-btn:active {
  background: var(--border);
  transform: scale(0.95);
}

.num-btn.correct-flash {
  background: rgba(0, 229, 160, 0.2);
  border-color: var(--accent);
}

.num-btn.wrong-flash {
  background: rgba(255, 71, 87, 0.2);
  border-color: var(--danger);
}

.num-zero {
  grid-column: 2;
}

/* ============ Game Over Screen ============ */
.gameover-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
}

.gameover-title {
  font-size: 28px;
  font-weight: 300;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.gameover-score {
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
}

.gameover-label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--text-dim);
}

.gameover-level {
  font-size: 14px;
  color: var(--accent);
  margin-top: 8px;
}

.gameover-best {
  font-size: 14px;
  color: var(--text-dim);
  margin: 16px 0;
}

.gameover-best.new-record {
  color: var(--accent);
  font-weight: 700;
}

/* ============ Heart Death Overlay ============ */
.heart {
  display: inline-block;
}

.heart-death-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: none;
  overflow: hidden;
}

.heart-death-overlay.active {
  display: flex;
}

.hd-flash {
  position: absolute;
  inset: 0;
  background: rgba(255, 0, 50, 0.7);
  opacity: 0;
  pointer-events: none;
}

.hd-flash.flash {
  animation: hd-flash 0.4s ease-out;
}

@keyframes hd-flash {
  0% { opacity: 0.8; }
  100% { opacity: 0; }
}

.hd-arena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}

.hd-monster {
  font-size: 72px;
  opacity: 0;
  transform: translateX(-80px);
  filter: drop-shadow(0 0 15px rgba(255, 0, 50, 0.8));
}

.hd-monster.enter {
  animation: hd-monster-enter 0.3s ease-out forwards;
}

.hd-monster.chomp {
  animation: hd-monster-chomp 0.25s ease-in forwards;
}

@keyframes hd-monster-enter {
  0% { opacity: 0; transform: translateX(-80px) scale(0.5); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes hd-monster-chomp {
  0% { transform: translateX(0) scale(1); }
  40% { transform: translateX(30px) scale(1.3); }
  70% { transform: translateX(25px) scale(1.4); }
  100% { transform: translateX(20px) scale(1.2); }
}

.hd-heart {
  font-size: 72px;
  opacity: 0;
  transform: translateX(80px);
  filter: drop-shadow(0 0 15px rgba(255, 0, 50, 0.6));
}

.hd-heart.enter {
  animation: hd-heart-enter 0.3s ease-out forwards;
}

.hd-heart.shatter {
  animation: hd-heart-shatter 0.4s ease-out forwards;
}

@keyframes hd-heart-enter {
  0% { opacity: 0; transform: translateX(80px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes hd-heart-shatter {
  0% { transform: scale(1); opacity: 1; filter: brightness(1); }
  15% { transform: scale(1.5); filter: brightness(3); }
  30% { transform: scale(1.3) rotate(10deg); filter: brightness(2); opacity: 0.8; }
  100% { transform: scale(0) rotate(60deg); opacity: 0; filter: brightness(0); }
}

.hd-text {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #ff0033;
  text-shadow: 0 0 20px rgba(255, 0, 50, 0.9), 0 0 60px rgba(255, 0, 50, 0.4);
  opacity: 0;
  margin-top: 8px;
}

.hd-text.show {
  animation: hd-text-pop 0.5s ease-out forwards;
}

@keyframes hd-text-pop {
  0% { opacity: 0; transform: scale(2.5) rotate(-5deg); }
  40% { opacity: 1; transform: scale(0.9) rotate(1deg); }
  70% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.8; transform: scale(1); }
}

.hd-blood {
  position: absolute;
  pointer-events: none;
  top: 50%;
  left: 50%;
}

.blood-drop {
  position: absolute;
  pointer-events: none;
  animation: blood-fly 0.6s ease-out forwards;
}

@keyframes blood-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0.3); }
}

.blood-mist {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  animation: blood-mist-float 0.8s ease-out forwards;
}

@keyframes blood-mist-float {
  0% { opacity: 0.8; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(2); }
}

/* General layout for taller screens */
@media (min-height: 800px) {
  .score-section {
    padding: 20px 0 12px;
  }

  .numpad {
    gap: 12px;
    padding: 12px 28px;
  }
}

/* Smaller phones */
@media (max-height: 667px) {
  .score-number {
    font-size: 56px;
  }

  .pi-digits {
    font-size: 20px;
  }

  .pi-digit {
    width: 18px;
    height: 28px;
  }

  .num-btn {
    font-size: 24px;
    aspect-ratio: 1.4;
  }

  .rpg-section {
    padding: 4px 16px 8px;
  }
}