/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0a0a1a;
  --bg2:         #0f0f2a;
  --gold:        #f0c040;
  --gold-dim:    #a07a10;
  --rebel:       #4af;
  --empire:      #f44;
  --text:        #e8e8ff;
  --text-dim:    #888aaa;
  --correct:     #4f4;
  --wrong:       #f44;
  --card-bg:     rgba(255,255,255,0.05);
  --card-border: rgba(255,255,255,0.1);
  --zap-color:   #ff0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Screens ─────────────────────────────────────────────────────────────── */
.screen {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  gap: 1rem;
}
.hidden { display: none !important; }

/* ── Start screen ────────────────────────────────────────────────────────── */
.crawl-container {
  font-style: italic;
  color: var(--gold-dim);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.title {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-shadow: 0 0 30px var(--gold), 0 0 60px var(--gold-dim);
  text-align: center;
}

.subtitle {
  font-size: clamp(1rem, 4vw, 1.8rem);
  color: var(--text-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tagline {
  color: var(--text-dim);
  font-size: 1rem;
  text-align: center;
  max-width: 360px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  margin-top: 1rem;
  padding: 0.8rem 2.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 0 20px var(--gold-dim);
}
.btn-primary:hover  { transform: scale(1.04); box-shadow: 0 0 30px var(--gold); }
.btn-primary:active { transform: scale(0.97); }

/* ── Reveal screen ───────────────────────────────────────────────────────── */
.reveal-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.reveal-header h2 {
  font-size: 1rem;
  letter-spacing: 0.3em;
  color: var(--rebel);
  text-transform: uppercase;
}
#reveal-counter {
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

.reveal-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 2rem 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 260px;
}

.reveal-word {
  font-size: clamp(2rem, 10vw, 4rem);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.05em;
}

.reveal-letters {
  font-size: clamp(1rem, 4vw, 1.6rem);
  color: var(--rebel);
  letter-spacing: 0.15em;
  font-weight: 600;
}

.reveal-hint {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.9rem;
}

/* ── Battle screen ───────────────────────────────────────────────────────── */
.battle-header {
  width: 100%;
  max-width: 700px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--card-border);
}

.army-label {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-transform: uppercase;
}
.army-label:first-child { color: var(--rebel); }
.army-label:last-child  { color: var(--empire); }

.word-index {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.battlefield {
  width: 100%;
  max-width: 700px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  min-height: 200px;
}

.army {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  align-content: flex-start;
}

.soldier {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  transition: transform 0.2s;
  line-height: 1;
}
.soldier.zapped {
  animation: zap var(--zap, 0.6s) ease-out forwards;
}
.soldier.dead {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.3s;
}

@keyframes zap {
  0%   { transform: scale(1);    filter: brightness(1); }
  20%  { transform: scale(1.4);  filter: brightness(3) saturate(0); }
  50%  { transform: scale(0.8);  filter: brightness(5) hue-rotate(60deg); }
  100% { transform: scale(0.1);  filter: brightness(0); opacity: 0; }
}

.battle-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.5rem;
}

.word-prompt {
  font-size: clamp(0.9rem, 3vw, 1.2rem);
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.word-progress {
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.2em;
  min-width: 60px;
  text-align: center;
  transition: color 0.2s;
}

.word-progress.shake {
  animation: shake 0.35s ease;
  color: var(--wrong);
}

.word-progress.word-complete {
  color: var(--correct);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

/* ── On-screen keyboard ──────────────────────────────────────────────────── */
.keyboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 500px;
  margin-top: 1rem;
}

.key-btn {
  width: 44px;
  height: 44px;
  font-size: 1rem;
  font-weight: 700;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s, transform 0.08s;
}
.key-btn:hover  { background: rgba(255,255,255,0.12); }
.key-btn:active { transform: scale(0.9); background: var(--gold); color: #000; }

/* ── End screen ──────────────────────────────────────────────────────────── */
.end-title {
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 900;
  color: var(--gold);
  text-align: center;
  text-shadow: 0 0 20px var(--gold);
}

.end-message {
  color: var(--text);
  font-size: 1.1rem;
  text-align: center;
  max-width: 400px;
}

.end-score {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--rebel);
  letter-spacing: 0.1em;
}

.end-results {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 400px;
}

.word-result {
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.95rem;
  font-weight: 600;
}
.word-result.correct { background: rgba(64,255,64,0.15); color: var(--correct); }
.word-result.wrong   { background: rgba(255,64,64,0.15); color: var(--wrong); }
.word-result.clickable { cursor: pointer; }
.word-result.clickable:hover { filter: brightness(1.3); }

/* ── Fireworks canvas ────────────────────────────────────────────────────── */
.fireworks-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 100;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 500px) {
  .battlefield {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .player-army { order: 1; }
  .battle-center { order: 2; }
  .enemy-army { order: 3; }
}