/* === Reset & Variables === */
/* The hidden attribute must always win over component display rules. */
[hidden] { display: none !important; }

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

:root {
  /* Colors */
  --bg-primary: #141e2c;
  --bg-secondary: #1d2a3c;
  --bg-card: #26364c;
  --text-primary: #f1f5f9;
  --text-secondary: #b3c0d0;
  --accent: #ff5d73;

  /* Shared Monstit look: dark slate with a friendly lime brand colour */
  --surface: #1f2b3d;
  --surface-2: #283850;
  --border: #3a4a62;
  --brand: #caee93;
  --brand-ink: #18312b;
  --good: #36d399;
  --bad: #ff5d6c;

  /* Four answer colours, used by every quiz so players learn them once */
  --answer-a: #ff5d6c;
  --answer-b: #4d9bff;
  --answer-c: #f7b733;
  --answer-d: #2fc486;

  /* Type colors */
  --type-fire: #ff6b35;
  --type-water: #00b4d8;
  --type-earth: #8cb369;
  --type-cloud: #b8c0ff;
  --type-sand: #e0a458;
  --type-dino: #9b4ace;
  --type-dragon: #1fb874;
  --type-crystal: #5ad1e6;
  --type-cosmic: #8b5cf6;
  --type-spooky: #f97316;
  --type-alien: #22c55e;

  /* Rarity colors */
  --rarity-common: #a0a0b0;
  --rarity-uncommon: #5ad13b;
  --rarity-rare: #4cc9f0;
  --rarity-epic: #c44cff;
  --rarity-legendary: #ffd60a;
  --rarity-heroic: #ff3030;
  --rarity-custom: #39d98a;

  /* UI */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --transition: 0.3s ease;

  /* Font */
  --font-display: 'Fredoka One', cursive;
  --font-body: 'Nunito', sans-serif;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  justify-content: center;
  align-items: center;
}

#app {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  /* Phones: 100vh is taller than the visible screen when the browser bar shows, which hid the
     bottom of each screen (like the Start button). dvh is the height you can actually see. */
  height: 100dvh;
  max-height: 900px;
  position: relative;
  overflow: hidden;
}

/* === Screen Management === */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity var(--transition);
}

.screen.active {
  display: flex;
  opacity: 1;
}

/* === Buttons === */
/* Chunky "press-down" buttons: easy to spot and satisfying to tap. */
.btn {
  font-family: var(--font-display);
  font-size: 1rem;
  padding: 12px 22px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
  min-width: 200px;
  text-align: center;
  color: white;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35), 0 8px 18px rgba(0, 0, 0, 0.25);
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.35), 0 12px 22px rgba(0, 0, 0, 0.3);
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.btn:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-hatch {
  background: linear-gradient(135deg, var(--type-fire), #ff8c42);
}

.btn-collection {
  background: linear-gradient(135deg, var(--type-water), #48cae4);
}

.btn-shop {
  background: linear-gradient(135deg, var(--type-cloud), #fce205);
  color: #1a1a2e;
}

.btn-battle {
  background: linear-gradient(135deg, var(--accent), #ff2e63);
}

.btn-back {
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-top: 16px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #ff2e63);
}

.btn-hatch-action {
  background: linear-gradient(135deg, var(--type-fire), #ff8c42);
  font-size: 1rem;
  padding: 12px 24px;
  animation: pulse 1.5s ease-in-out infinite;
}

.btn-item {
  background: var(--bg-card);
  font-size: 0.9rem;
  min-width: auto;
  padding: 10px 16px;
}

/* === Typography === */
h1, h2, h3 {
  font-family: var(--font-display);
}

.game-title {
  font-size: 3rem;
  color: #cc0000;
  -webkit-text-fill-color: #cc0000;
  text-align: center;
  margin-bottom: 24px;
  text-shadow: 0 0 10px rgba(204, 0, 0, 0.4);
}

.eyeball-o {
  position: relative;
  display: inline-block;
  width: .74em;
  height: .79em;
  margin: 0 .025em;
  vertical-align: -.04em;
  overflow: hidden;
  border-radius: 48% 52% 47% 53%;
  background: radial-gradient(circle at 35% 28%, #fff79c 0%, #ffdd00 48%, #e9a600 100%);
  box-shadow: inset 0 -.045em .06em #a46b0066, 0 0 .18em #ffdd0055;
}

.season-label {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--type-cloud);
  text-align: center;
  margin-top: -18px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.eyeball-o::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: .23em;
  height: .46em;
  background: radial-gradient(circle at 35% 25%, #fff 0 12%, transparent 15%), #172120;
  border-radius: 50%;
  pointer-events: none;
}

#screen-menu.active .eyeball-o::after,
.auth-gate:not([hidden]) .eyeball-o::after {
  animation: monster-eye-look 6s ease-in-out infinite both;
}

@keyframes monster-eye-look {
  0%, 6%, 50%, 100% { transform: translate(-50%, -50%); }
  12.5%, 19% { transform: translate(calc(-50% - .16em), calc(-50% - .045em)); }
  26%, 32.5% { transform: translate(calc(-50% + .16em), calc(-50% + .025em)); }
  39%, 43% { transform: translate(-50%, calc(-50% - .10em)); }
}

@media (prefers-reduced-motion: reduce) {
  #screen-menu.active .eyeball-o::after,
  .auth-gate .eyeball-o::after { animation: none; }
}

/* === Badges === */
.type-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.type-fire { background: var(--type-fire); }
.type-water { background: var(--type-water); }
.type-earth { background: var(--type-earth); }
.type-cloud { background: var(--type-cloud); color: #1a1a2e; }
.type-sand { background: var(--type-sand); color: #1a1a2e; }
.type-dino { background: var(--type-dino); }
.type-dragon { background: var(--type-dragon); }
.type-crystal { background: var(--type-crystal); color: #1a1a2e; }
.type-cosmic {
  background: radial-gradient(circle at 22% 30%, #fff8 0 1px, transparent 2px), radial-gradient(circle at 78% 62%, #fff9 0 1px, transparent 2px), linear-gradient(135deg, #4c1d95, var(--type-cosmic) 55%, #c084fc);
  color: #fff;
  text-shadow: 0 0 4px #e9d5ff;
}
.type-spooky {
  background: linear-gradient(135deg, #3b0764, #7c2d92 45%, var(--type-spooky));
  color: #fff;
  text-shadow: 0 0 4px #fdba74;
}
.type-alien {
  background: radial-gradient(circle at 80% 28%, #fff9 0 1px, transparent 2px), linear-gradient(135deg, #1e1b4b, #166534 50%, var(--type-alien));
  color: #fff;
  text-shadow: 0 0 4px #bef264;
}

.rarity-badge {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.rarity-common { color: var(--rarity-common); }
.rarity-uncommon { color: var(--rarity-uncommon); }
.rarity-rare { color: var(--rarity-rare); }
.rarity-epic { color: var(--rarity-epic); text-shadow: 0 0 8px var(--rarity-epic); }
.rarity-legendary { color: var(--rarity-legendary); text-shadow: 0 0 10px var(--rarity-legendary); }
.rarity-heroic { color: var(--rarity-heroic); text-shadow: 0 0 14px var(--rarity-heroic), 0 0 28px var(--rarity-heroic); }
.rarity-custom { color: var(--rarity-custom); text-shadow: 0 0 8px var(--rarity-custom); }

/* === Icons === */
.gem-icon::before {
  content: '\2666';
  color: var(--type-water);
  margin-right: 4px;
}

.egg-icon::before {
  content: '\1F95A';
  margin-right: 4px;
}

/* === HP Bar === */
.hp-bar {
  width: 100%;
  height: 12px;
  background: #333;
  border-radius: 6px;
  overflow: hidden;
  margin: 4px 0;
}

.hp-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
}

.hp-fill.hp-medium {
  background: linear-gradient(90deg, #ff9800, #ffc107);
}

.hp-fill.hp-low {
  background: linear-gradient(90deg, #f44336, #ff5722);
}

/* === XP Bar === */
.player-xp-bar {
  width: 80px;
  height: 8px;
  background: #333;
  border-radius: 4px;
  overflow: hidden;
}

.xp-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--type-water), var(--type-cloud));
  transition: width 0.5s ease;
}

/* === Music Toggle === */
.music-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--bg-card);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-toggle:hover {
  transform: scale(1.1);
}

/* === Pulse animation === */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}