:root {
  --bg: #0a0e0a;
  --screen: #0d1f0d;
  --green: #39ff14;
  --green-dim: #1a7a06;
  --green-dark: #0d3d06;
  --amber: #ffb000;
  --red: #ff3333;
  --white: #e8ffe8;
  --border: #1e4d1e;
  --glow: 0 0 20px rgba(57,255,20,0.4);
  --glow-sm: 0 0 8px rgba(57,255,20,0.3);
}

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

body {
  background: var(--bg);
  color: var(--green);
  font-family: 'Press Start 2P', 'Noto Sans KR', monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  padding: 20px;
}

/* Scanlines Effect */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.1) 3px,
    rgba(0,0,0,0.1) 4px
  );
  pointer-events: none;
  z-index: 999;
}

/* CRT Vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 998;
}

/* Game Shell Container */

.game-shell {

  width: 100%;

  max-width: 720px;

  background: var(--screen);

  border: 3px solid var(--border);

  border-radius: 12px;

  box-shadow: 0 0 50px rgba(57,255,20,0.15), inset 0 0 80px rgba(0,0,0,0.5);

  overflow: hidden;

  position: relative;

  margin-bottom: 40px;

}



/* Header */

.header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 20px 30px;

  border-bottom: 2px solid var(--border);

  background: rgba(0,0,0,0.3);

}



.header-title {

  font-size: 14px;

  color: var(--green);

  text-shadow: var(--glow-sm);

  letter-spacing: 2px;

}



.header-score {

  font-size: 14px;

  color: var(--amber);

  text-shadow: 0 0 8px rgba(255,176,0,0.5);

}



.header-round {

  font-size: 12px;

  color: var(--green-dim);

}



/* Screen Management */

.screen {

  display: none;

  padding: 40px 32px;

  animation: fadeIn .4s cubic-bezier(0.4, 0, 0.2, 1);

}



.screen.active {

  display: block;

}



@keyframes fadeIn {

  from { opacity: 0; transform: translateY(10px); }

  to { opacity: 1; transform: translateY(0); }

}



/* Start Screen */

.start-logo {

  text-align: center;

  margin-bottom: 40px;

}



.start-logo .big {

  font-size: clamp(24px, 5vw, 36px);

  color: var(--green);

  text-shadow: var(--glow);

  line-height: 1.5;

  display: block;

  margin-bottom: 16px;

}



.start-logo .sub {

  font-family: 'Noto Sans KR', sans-serif;

  font-size: 14px;

  color: var(--green-dim);

  margin-top: 16px;

  line-height: 1.6;

  display: block;

}



/* Pokemon Marquee */

.pokemon-marquee {

  display: flex;

  gap: 20px;

  overflow: hidden;

  margin: 32px 0;

  padding: 16px 0;

  border-top: 1px solid var(--border);

  border-bottom: 1px solid var(--border);

}



.marquee-inner {

  display: flex;

  gap: 20px;

  animation: marquee 25s linear infinite;

  flex-shrink: 0;

}



@keyframes marquee {

  to { transform: translateX(-50%); }

}



.marquee-img {

  width: 56px;

  height: 56px;

  image-rendering: pixelated;

  filter: brightness(0) saturate(100%) invert(60%) sepia(100%) saturate(500%) hue-rotate(80deg);

  opacity: 0.5;

  flex-shrink: 0;

}



/* Difficulty Select */

.diff-select {

  margin-bottom: 32px;

}



.diff-label {

  font-size: 12px;

  color: var(--green-dim);

  margin-bottom: 16px;

  display: block;

}



.diff-btns {

  display: flex;

  gap: 12px;

}



.diff-btn {

  flex: 1;

  padding: 16px 10px;

  background: transparent;

  border: 2px solid var(--border);

  color: var(--green-dim);

  font-family: 'Press Start 2P', monospace;

  font-size: 10px;

  cursor: pointer;

  transition: all .2s;

  line-height: 1.6;

}



.diff-btn.selected {

  border-color: var(--green);

  color: var(--green);

  background: var(--green-dark);

  box-shadow: var(--glow-sm);

}



.diff-btn:hover:not(.selected) {

  border-color: var(--green-dim);

  color: var(--green);

}



.diff-btn small {

  display: block;

  font-size: 8px;

  margin-top: 6px;

  opacity: 0.8;

  font-family: 'Noto Sans KR', sans-serif;

}



/* Generic Pixel Button */

.px-btn {

  display: block;

  width: 100%;

  padding: 20px;

  background: var(--green-dark);

  border: 2px solid var(--green);

  color: var(--green);

  font-family: 'Press Start 2P', monospace;

  font-size: 14px;

  cursor: pointer;

  text-align: center;

  transition: all .15s;

  box-shadow: var(--glow-sm);

  position: relative;

  overflow: hidden;

}



.px-btn::before {

  content: '';

  position: absolute;

  inset: 0;

  background: var(--green);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1);

  z-index: 0;

}



.px-btn span {

  position: relative;

  z-index: 1;

}



.px-btn:hover::before {

  transform: scaleX(1);

}



.px-btn:hover {

  color: var(--bg);

}



.px-btn:active {

  transform: scale(0.98);

}



/* Game Elements */

.timer-wrap {

  margin-bottom: 30px;

}



.timer-bar-bg {

  height: 10px;

  background: var(--green-dark);

  border: 1px solid var(--border);

  overflow: hidden;

}



.timer-bar {

  height: 100%;

  background: var(--green);

  width: 100%;

  transition: width .1s linear, background .3s;

  box-shadow: 0 0 6px var(--green);

}



.timer-bar.warn { background: var(--amber); box-shadow: 0 0 6px var(--amber); }

.timer-bar.danger { background: var(--red); box-shadow: 0 0 6px var(--red); }



.timer-label {

  font-size: 10px;

  color: var(--green-dim);

  text-align: right;

  margin-top: 8px;

}



.pokemon-area {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-bottom: 32px;

}



.silhouette-wrap {

  width: 220px;

  height: 220px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  margin-bottom: 20px;

}



.pokemon-sprite {

  width: 180px;

  height: 180px;

  image-rendering: pixelated;

  object-fit: contain;

  transition: filter .6s ease-out;

}



.pokemon-sprite.hidden-sprite {

  filter: brightness(0) drop-shadow(0 0 12px rgba(57,255,20,0.5));

}



.pokemon-sprite.revealed {

  filter: none;

  animation: revealPop .5s cubic-bezier(.34, 1.56, .64, 1);

}



@keyframes revealPop {

  0% { transform: scale(0.8); opacity: 0; }

  100% { transform: scale(1); opacity: 1; }

}



.scan-ring {

  position: absolute;

  inset: -15px;

  border: 2px solid var(--green-dim);

  border-radius: 50%;

  border-top-color: var(--green);

  animation: spin 2s linear infinite;

  opacity: 0;

  transition: opacity .3s;

}



.scan-ring.playing { opacity: 1; }



@keyframes spin { to { transform: rotate(360deg); } }



/* Audio Visualizer */

.waveform {

  display: flex;

  align-items: center;

  gap: 4px;

  height: 48px;

  margin-bottom: 24px;

}



.wave-bar {

  width: 6px;

  background: var(--green-dim);

  border-radius: 3px;

  height: 6px;

  transition: height .1s;

}



.wave-bar.active {

  background: var(--green);

  box-shadow: 0 0 8px var(--green);

  animation: wave var(--dur, .6s) ease-in-out infinite alternate;

}



@keyframes wave { to { height: var(--max, 40px); } }



.play-cry-btn {

  display: flex;

  align-items: center;

  gap: 12px;

  background: transparent;

  border: 2px solid var(--green);

  color: var(--green);

  font-family: 'Press Start 2P', monospace;

  font-size: 12px;

  padding: 16px 32px;

  cursor: pointer;

  transition: all .2s;

  box-shadow: var(--glow-sm);

}



.play-cry-btn:hover:not(:disabled) {

  background: var(--green-dark);

  box-shadow: var(--glow);

}



.play-cry-btn:disabled { opacity: .4; cursor: not-allowed; }



/* Choice Grid */

.choices {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;

  margin-bottom: 24px;

}



.choice-btn {

  padding: 20px 10px;

  background: transparent;

  border: 2px solid var(--border);

  color: var(--green-dim);

  font-family: 'Press Start 2P', 'Noto Sans KR', monospace;

  font-size: 12px;

  cursor: pointer;

  transition: all .15s;

  line-height: 1.4;

  text-align: center;

}



.choice-btn:hover:not(:disabled) {

  border-color: var(--green);

  color: var(--green);

  background: var(--green-dark);

  box-shadow: var(--glow-sm);

}



.choice-btn.correct {

  border-color: var(--green);

  background: var(--green-dark);

  color: var(--green);

  box-shadow: var(--glow);

  animation: correctFlash .5s ease;

}



.choice-btn.wrong {

  border-color: var(--red);

  background: rgba(255, 51, 51, 0.1);

  color: var(--red);

}



.choice-btn:disabled { cursor: not-allowed; }



@keyframes correctFlash {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.05); }

}



/* Result Message */

.result-msg {

  text-align: center;

  font-size: 14px;

  padding: 16px;

  margin-bottom: 12px;

  display: none;

  line-height: 1.6;

  font-family: 'Noto Sans KR', sans-serif;

}



.result-msg.show { display: block; }

.result-msg.correct-msg { color: var(--green); text-shadow: var(--glow-sm); }

.result-msg.wrong-msg { color: var(--red); }



.next-btn-wrap { display: none; }

.next-btn-wrap.show { display: block; }



/* End Screen */

.end-screen { text-align: center; }



.final-score-label { font-size: 12px; color: var(--green-dim); margin-bottom: 16px; }



.final-score {

  font-size: clamp(40px, 10vw, 64px);

  color: var(--green);

  text-shadow: var(--glow);

  margin-bottom: 12px;

  display: block;

}



.final-grade {

  font-family: 'Noto Sans KR', sans-serif;

  font-size: 18px;

  font-weight: bold;

  margin-bottom: 32px;

  display: block;

}



.stat-row {

  display: flex;

  justify-content: space-between;

  padding: 16px 20px;

  border-bottom: 1px solid var(--border);

  font-size: 12px;

  color: var(--green-dim);

}



.stat-row span:last-child { color: var(--green); }



.stats-wrap {

  margin-bottom: 32px;

  border-top: 1px solid var(--border);

}



/* Content Section (SEO & AdSense) */

.content-section {

  width: 100%;

  max-width: 720px;

  color: var(--green-dim);

  font-family: 'Noto Sans KR', sans-serif;

  margin-bottom: 40px;

  line-height: 1.8;

  padding: 0 10px;

}



.content-section h2 {

  font-family: 'Press Start 2P', monospace;

  font-size: 16px;

  color: var(--green);

  margin-bottom: 16px;

  margin-top: 32px;

}



.content-section p {

  font-size: 14px;

  margin-bottom: 16px;

}



.content-section ul {

  list-style-type: square;

  padding-left: 20px;

  margin-bottom: 16px;

}



.content-section li {

  font-size: 14px;

  margin-bottom: 8px;

}



/* Footer */

.footer {

  width: 100%;

  text-align: center;

  padding: 20px;

  border-top: 1px solid var(--border);

  background: rgba(0,0,0,0.5);

  margin-top: auto;

}



.footer-links {

  display: flex;

  justify-content: center;

  gap: 20px;

  margin-bottom: 10px;

}



.footer a {

  color: var(--green-dim);

  font-size: 12px;

  text-decoration: none;

  font-family: 'Noto Sans KR', sans-serif;

}



.footer a:hover {

  color: var(--green);

  text-decoration: underline;

}



.copyright {

  color: var(--green-dark);

  font-size: 10px;

}



/* Streak Badge */

.streak-badge {

  position: fixed;

  top: 20px;

  right: 20px;

  background: var(--green-dark);

  border: 2px solid var(--amber);

  padding: 12px 20px;

  font-size: 12px;

  color: var(--amber);

  box-shadow: 0 0 15px rgba(255,176,0,0.3);

  z-index: 1000;

  display: none;

  animation: slideIn .4s cubic-bezier(0.4, 0, 0.2, 1);

}



@keyframes slideIn { from { transform: translateX(120%); } to { transform: translateX(0); } }



/* Utils */

.loading-dots::after {

  content: '';

  animation: dots 1.5s steps(4) infinite;

}



@keyframes dots {

  0% { content: ''; }

  25% { content: '.'; }

  50% { content: '..'; }

  75% { content: '...'; }

}



@media (max-width: 600px) {

  .game-shell { border-radius: 0; border-left: none; border-right: none; }

  .screen { padding: 30px 20px; }

  .choices { grid-template-columns: 1fr; }

  .silhouette-wrap { width: 160px; height: 160px; }

  .pokemon-sprite { width: 140px; height: 140px; }

  .start-logo .big { font-size: 24px; }

}