/* ══════════ SUPER SPELLING FIGHTER II TURBO ══════════ */
:root {
  --ink: #fff7e0;
  --gold: #ffd700;
  --red: #ff2d2d;
  --blue: #00c8ff;
  --green: #00e676;
  --panel: #14142e;
  --panel-2: #1d1d42;
  --border: #ffd700;
  --shadow: #000;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: 'VT323', monospace;
  background: radial-gradient(ellipse at 50% 120%, #2d1b4e 0%, #0a0a1a 65%);
  color: var(--ink);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

#bg3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* CRT scanlines + vignette */
.scanlines {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}

#flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; }
#flash.flashing { animation: flashAnim .45s ease-out; }
@keyframes flashAnim { 0% { opacity: 1; } 100% { opacity: 0; } }

.shake { animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); } 40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(4px); }
}

#app { position: relative; z-index: 10; height: 100dvh; }

/* ══════════ screens ══════════ */
.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.screen.active { display: flex; animation: screenIn .35s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }

.hidden { display: none !important; }
.blink { animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.screen-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(14px, 4.2vw, 24px);
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--red), 6px 6px 0 #000;
  text-align: center;
  letter-spacing: 1px;
}

/* ══════════ buttons ══════════ */
.btn {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 3vw, 14px);
  padding: 14px 20px;
  border: 3px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 4px 4px 0 #000;
  transition: transform .08s;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }
.btn-coin { border-color: var(--gold); color: var(--gold); }
.btn-fight { border-color: var(--red); background: #3d0f14; color: #ffb3b3; }
.btn-ghost { border-color: #555a8f; color: #9aa0d8; box-shadow: none; background: transparent; }

.coin-dot {
  display: inline-block; width: .8em; height: .8em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 60%, #a07800);
  border: 1px solid #7a5c00; vertical-align: -0.05em;
}

/* ══════════ gate ══════════ */
.gate-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }

.logo { text-align: center; transform: rotate(-3deg); }
.logo-super {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(14px, 4.5vw, 26px);
  color: var(--blue);
  text-shadow: 2px 2px 0 #003a5c, 4px 4px 0 #000;
  letter-spacing: 6px;
}
.logo-main {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(26px, 9vw, 58px);
  line-height: 1.15;
  color: var(--gold);
  -webkit-text-stroke: 1px #7a2b00;
  text-shadow: 0 0 18px rgba(255, 160, 0, .6), 4px 4px 0 var(--red), 8px 8px 0 #000;
  animation: logoPulse 2.4s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { text-shadow: 0 0 12px rgba(255,160,0,.4), 4px 4px 0 var(--red), 8px 8px 0 #000; }
  50% { text-shadow: 0 0 30px rgba(255,160,0,.9), 4px 4px 0 var(--red), 8px 8px 0 #000; }
}
.logo-ii {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(18px, 6vw, 34px);
  color: var(--red);
  text-shadow: 3px 3px 0 #000;
  margin-top: 6px;
}
.logo-turbo {
  color: var(--blue);
  font-size: .6em;
  animation: blink 0.8s steps(2) infinite;
}

#gate-form { display: flex; flex-direction: column; gap: 14px; align-items: center; }
#gate-pass {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  padding: 14px;
  width: min(74vw, 300px);
  background: #000;
  border: 3px solid var(--blue);
  color: var(--blue);
  text-align: center;
  outline: none;
  box-shadow: inset 0 0 12px rgba(0, 200, 255, .3);
}
.gate-error { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--red); }
.press-start { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #666a9c; }

/* ══════════ character select ══════════ */
.char-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(70px, 110px));
  gap: 10px;
}
.char-cell {
  position: relative;
  padding: 0; border: 3px solid #3a3a6e; background: var(--panel);
  cursor: pointer; box-shadow: 4px 4px 0 #000;
  display: flex; flex-direction: column;
}
.char-cell canvas { width: 100%; display: block; image-rendering: pixelated; }
/* DukeBucks badge — small coin + amount, upper-left of the portrait */
.db-badge {
  position: absolute; top: 3px; left: 3px; z-index: 2;
  display: flex; align-items: center; gap: 2px;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(6px, 1.4vw, 8px);
  color: var(--gold, #ffd700);
  background: rgba(0, 0, 0, 0.65);
  padding: 2px 3px; border-radius: 2px;
  line-height: 1; pointer-events: none;
  text-shadow: 1px 1px 0 #000;
}
.db-badge .db-coin {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe680, #f5b400 70%, #a06e00);
  border: 1px solid #7a5200;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  flex: 0 0 auto;
}
.char-cell .char-name {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.9vw, 10px);
  color: var(--ink); background: #000;
  padding: 6px 2px; text-align: center;
}
.char-cell:hover { border-color: var(--blue); }
.char-cell.selected { border-color: var(--gold); animation: selectedPulse .5s steps(2) infinite; }
@keyframes selectedPulse { 50% { border-color: #fff; } }

.char-tagline {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, 2.6vw, 13px);
  color: var(--blue); text-shadow: 2px 2px 0 #000;
  min-height: 2.4em; text-align: center;
}

/* ══════════ leaderboard (hall of champions) ══════════ */
.leaderboard {
  width: 100%; max-width: 460px;
  border: 3px solid #3a3a6e; background: rgba(10, 10, 26, .6);
  box-shadow: 4px 4px 0 #000;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 34vh; overflow-y: auto;
}
.leaderboard-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, 2vw, 11px);
  color: var(--gold); text-align: center;
  text-shadow: 1px 1px 0 #000; padding-bottom: 2px;
}
.leaderboard-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.lb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 4px; background: rgba(29, 29, 66, .5);
  border-left: 3px solid var(--gold);
}
.lb-rank {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, 2.2vw, 12px);
  min-width: 22px; text-align: center; color: var(--ink);
}
.lb-portrait {
  width: 30px; height: 30px; image-rendering: pixelated;
  border: 1px solid #3a3a6e; flex: 0 0 auto;
}
.lb-name {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, 2vw, 10px);
  color: var(--ink); flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-wins {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(6px, 1.4vw, 8px);
  color: #7a7ab0; text-shadow: 1px 1px 0 #000; flex: 0 0 auto;
  text-align: right; white-space: nowrap;
}
.lb-wins-num {
  font-size: clamp(10px, 2.6vw, 14px); color: var(--green);
}

/* ══════════ grade select ══════════ */
.grade-list { display: flex; flex-direction: column; gap: 14px; width: min(90vw, 420px); }
.grade-btn {
  display: grid; grid-template-columns: minmax(64px, max-content) 1fr; grid-template-rows: auto auto;
  align-items: center; column-gap: 18px; text-align: left;
  padding: 12px 16px;
  background: var(--panel); border: 3px solid #3a3a6e;
  cursor: pointer; box-shadow: 5px 5px 0 #000;
  color: var(--ink);
  transition: transform .08s;
}
.grade-btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #000; }
.grade-btn:nth-child(1) { border-color: var(--green); }
.grade-btn:nth-child(2) { border-color: var(--blue); }
.grade-btn:nth-child(3) { border-color: var(--red); }
.grade-btn:nth-child(4) { border-color: var(--purple, #9c27b0); }
.grade-btn:nth-child(5) { border-color: var(--gold); }
.grade-num {
  grid-row: 1 / 3;
  grid-column: 1;
  font-family: 'Press Start 2P', monospace;
  font-size: 40px; color: var(--gold);
  text-shadow: 3px 3px 0 #000;
  white-space: nowrap;                 /* keep "12+" on one line */
  justify-self: start;
}
/* multi-character grade numbers (11, 12+) shrink so they never overlap text */
.grade-num.grade-num-wide { font-size: 30px; }
.grade-name { font-family: 'Press Start 2P', monospace; font-size: clamp(11px, 3vw, 14px); }
.grade-sub { font-size: 20px; color: #9aa0d8; }

/* ══════════ battle HUD ══════════ */
#screen-battle { justify-content: flex-start; gap: 8px; }
.hud {
  width: 100%; max-width: 560px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(#1d1d42, #10102a);
  border: 3px solid var(--gold);
  box-shadow: 0 4px 0 #000;
  padding: 8px 10px;
}
.hud-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
#hud-portrait { width: 45px; height: 45px; image-rendering: pixelated; border: 2px solid var(--gold); }
.hud-name { font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--ink); }
.hud-player-title { font-size: 14px; color: var(--blue); letter-spacing: 1px; }
.hud-center { text-align: center; }
.hud-phase { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--red); text-shadow: 1px 1px 0 #000; }
.hud-round { font-size: 20px; color: #9aa0d8; }
.hud-right { text-align: right; }
.hud-bucks { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--gold); }
.hud-streak { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--green); margin-top: 4px; animation: blink .5s steps(2) infinite; }

/* ══════════ announce ══════════ */
.announce {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(22px, 8vw, 52px);
  font-style: italic;
  color: var(--gold);
  -webkit-text-stroke: 1px #7a2b00;
  text-shadow: 4px 4px 0 var(--red), 8px 8px 0 #000;
  pointer-events: none;
  text-align: center;
}
.announce-pop { animation: announcePop .9s ease-out; }
@keyframes announcePop {
  0% { transform: scale(3); opacity: 0; }
  30% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.9); opacity: 0; }
}

/* ══════════ card arena ══════════ */
.arena {
  flex: 1; width: 100%; max-width: 560px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px;
  min-height: 0;
}

/* readable one-line link set above the bottom of the study screen */
.skip-study {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  white-space: nowrap;
  background: none; border: none; cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(11px, 3.4vw, 14px); letter-spacing: 1px;
  text-transform: lowercase;
  color: #fff; opacity: .92; text-decoration: none;
  padding: 10px 14px;
}
.skip-study:hover { opacity: 1; }
.card {
  width: min(92vw, 460px);
  height: min(62dvh, 460px);
  position: relative;
  cursor: pointer;
}
.card.fly-in { animation: flyIn .55s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes flyIn {
  0% { transform: translateX(120vw) rotate(18deg) scale(.6); }
  100% { transform: translateX(0) rotate(0) scale(1); }
}
.card.fly-out { animation: flyOut .45s cubic-bezier(.6, -0.2, .8, .5) forwards; }
@keyframes flyOut {
  0% { transform: translateX(0) rotate(0) scale(1); }
  100% { transform: translateX(-130vw) rotate(-20deg) scale(.6); }
}

.card-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3, 1.4, .5, 1);
}
.card-inner.flipped { transform: rotateY(180deg); }

.card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 22px 18px;
  border: 4px solid var(--gold);
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 100% 6px,
    linear-gradient(160deg, #1d1d42 0%, #10102a 70%);
  box-shadow: 8px 8px 0 rgba(0,0,0,.7), inset 0 0 40px rgba(0, 100, 255, .12);
  text-align: center;
}
.card-back { transform: rotateY(180deg); }

/* purchased card themes */
.card.theme-neon .card-face { border-color: var(--blue); box-shadow: 8px 8px 0 rgba(0,0,0,.7), inset 0 0 50px rgba(0,229,255,.25), 0 0 24px rgba(0,229,255,.5); }
.card.theme-shadow .card-face { border-color: #9c27b0; background: linear-gradient(160deg, #1a0526, #0a0112); box-shadow: 8px 8px 0 #000, inset 0 0 60px rgba(156,39,176,.3); }
.card.theme-gold .card-face { border-color: #fff3b0; background: linear-gradient(160deg, #3d2a00, #1a1200); box-shadow: 8px 8px 0 #000, inset 0 0 50px rgba(255,215,0,.25), 0 0 26px rgba(255,215,0,.4); }

.card-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; letter-spacing: 2px;
  color: var(--red); background: #000;
  padding: 6px 12px; border: 2px solid var(--red);
}
.card-pos { font-size: 18px; color: #9aa0d8; font-style: italic; margin-top: -6px; }
.card-def {
  font-size: clamp(24px, 6vw, 34px);
  line-height: 1.25;
  max-width: 38ch;
}
.btn-speak {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; padding: 10px 14px;
  background: #06253d; color: var(--blue);
  border: 2px solid var(--blue); cursor: pointer;
  box-shadow: 3px 3px 0 #000;
}
.btn-speak:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }

.card-hint {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px; color: #666a9c;
  animation: blink 1.2s steps(2) infinite;
  position: absolute; bottom: 12px; left: 0; right: 0;
}

/* the word with glowing tricky parts */
.card-word {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(15px, 4.6vw, 26px);
  line-height: 1.8;
  color: var(--ink);
  word-break: break-word;
  text-shadow: 2px 2px 0 #000;
}
.tricky {
  color: var(--gold);
  animation: trickyPulse 1s ease-in-out infinite;
  display: inline-block;
}
@keyframes trickyPulse {
  0%, 100% { text-shadow: 0 0 4px rgba(255,215,0,.4), 2px 2px 0 #000; transform: scale(1); color: var(--gold); }
  50% { text-shadow: 0 0 18px rgba(255,215,0,1), 2px 2px 0 #000; transform: scale(1.18); color: #fff; }
}
.card-tip { font-size: 19px; color: var(--green); max-width: 36ch; line-height: 1.3; }

.card-verdict { font-family: 'Press Start 2P', monospace; font-size: clamp(12px, 3.6vw, 18px); }
.card-verdict.win { color: var(--gold); animation: verdictZoom .5s cubic-bezier(.2, 1.6, .4, 1); }
.card-verdict.lose { color: var(--red); }
@keyframes verdictZoom { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.card-yours { font-size: 20px; color: #9aa0d8; }
.yours-word { font-family: 'Press Start 2P', monospace; font-size: .8em; color: var(--ink); }
.diff-bad { color: var(--red); text-decoration: line-through; }

/* quiz input */
.quiz-form { display: flex; flex-direction: column; gap: 12px; width: 100%; align-items: center; }
#quiz-input {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  width: min(80vw, 340px);
  padding: 14px 10px;
  background: #000; color: var(--gold);
  border: 3px solid var(--gold);
  text-align: center; outline: none;
  box-shadow: inset 0 0 14px rgba(255,215,0,.25);
}

/* ══════════ results ══════════ */
.results-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(92vw, 480px); }
.results-verdict {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 6.6vw, 40px);
  font-style: italic;
  color: var(--blue);
  text-shadow: 3px 3px 0 #003a5c, 6px 6px 0 #000;
  text-align: center;
  animation: announcePop2 .6s cubic-bezier(.2, 1.5, .4, 1);
}
.results-verdict.gold { color: var(--gold); text-shadow: 3px 3px 0 var(--red), 6px 6px 0 #000; }
.results-verdict.red { color: var(--red); text-shadow: 3px 3px 0 #500, 6px 6px 0 #000; }
@keyframes announcePop2 { 0% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.results-score { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--ink); }
.results-bucks {
  border: 3px solid var(--gold); background: var(--panel);
  padding: 12px 26px; text-align: center; box-shadow: 5px 5px 0 #000;
}
.results-bucks-label { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #9aa0d8; }
.results-earned {
  font-family: 'Press Start 2P', monospace;
  font-size: 30px; color: var(--gold);
  text-shadow: 2px 2px 0 #7a5c00, 4px 4px 0 #000;
  margin: 8px 0 4px;
}
.results-total { font-size: 20px; color: var(--ink); }

.results-words { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.result-row {
  display: flex; gap: 12px; align-items: center;
  background: rgba(20,20,46,.85); border-left: 4px solid;
  padding: 6px 12px; font-size: 18px;
}
.result-row.ok { border-color: var(--green); }
.result-row.bad { border-color: var(--red); }
.result-mark { font-size: 16px; width: 20px; }
.result-row.ok .result-mark { color: var(--gold); }
.result-row.bad .result-mark { color: var(--red); }
.result-word { font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 1px; }
.result-word .tricky { animation: none; color: var(--gold); }

.results-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ══════════ shop ══════════ */
.shop-bucks { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--gold); }
.shop-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; width: min(94vw, 520px);
  overflow-y: auto;
}
.shop-item {
  background: var(--panel); border: 3px solid #3a3a6e;
  padding: 12px; cursor: pointer; box-shadow: 4px 4px 0 #000;
  color: var(--ink); text-align: left;
  display: flex; flex-direction: column; gap: 6px;
}
.shop-item.owned { border-color: var(--green); }
.shop-item.equipped { border-color: var(--gold); background: #241d00; }
.shop-item-name { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--ink); line-height: 1.5; }
.shop-item-desc { font-size: 17px; color: #9aa0d8; }
.shop-item-cost { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--gold); }

/* small phones: keep the battle card compact when keyboard shows */
@media (max-height: 640px) {
  .card { height: min(70dvh, 400px); }
  .card-def { font-size: 22px; }
}