/* ============================================================
   GAMES
   ============================================================ */

#gamesPage {
  display: none;
  flex-direction: column;
  overflow: auto;
  padding: 28px;
  background: radial-gradient(circle at 50% -10%, rgba(202, 167, 255, .12), transparent 36%), var(--color-bg);
}
#gamesPage.active { display: flex; }
.games-home { width: min(900px, 100%); margin: auto; text-align: center; }
.games-home h2 { margin: 0; color: var(--color-text-primary); font: 600 clamp(34px, 5vw, 54px)/1 var(--font-family-serif); letter-spacing: -.05em; }
.games-home-copy { margin: 14px 0 28px; color: var(--color-text-secondary); }
.game-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.game-choice { min-height: 275px; padding: 24px; border: 1px solid var(--color-border); border-radius: 22px; color: var(--color-text-primary); cursor: pointer; text-align: left; transition: transform 180ms ease, box-shadow 180ms ease; }
.game-choice:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.dino-choice { background: linear-gradient(145deg, #2c284f, #a96767 70%, #d0ab6a); color: #fff6e3; }
.flappy-choice { background: linear-gradient(145deg, #77c8f2, #c5ecfc 58%, #89b94e 59%, #6f9e3f); color: #19363d; }
.crossy-choice { background: linear-gradient(145deg, #78c75b, #a8dd74 44%, #4f5969 45%, #353c49); color: #fffef3; }
.doodle-choice { background: linear-gradient(145deg, #78d6f4 0 52%, #c9f1ff 53% 60%, #b68dea 61% 100%); color: #27324e; }
.game-choice-art { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 34px; border-radius: 23px; font-size: 42px; box-shadow: inset 0 2px 8px rgba(255,255,255,.3), 0 9px 16px rgba(29,22,35,.2); }
.dino-logo { background: rgba(32,29,48,.45); }
.flappy-logo { background: rgba(255,255,255,.48); }
.crossy-logo { background: rgba(37,80,39,.4); }
.doodle-logo { background: rgba(255,255,255,.52); }
.game-choice-title, .game-choice-copy, .game-choice-play { display: block; }
.game-choice-title { font: 600 26px var(--font-family-serif); letter-spacing: -.03em; }
.game-choice-copy { max-width: 250px; margin-top: 8px; opacity: .87; font-size: 14px; line-height: 1.45; }
.game-choice-play { margin-top: 22px; font-weight: 700; font-size: 13px; }
.game-panel { width: 100%; }
.back-to-games { display: block; margin: 18px auto 0; border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer; font: 600 13px var(--font-family-sans); }
.back-to-games:hover { color: var(--color-brand-primary); }

.games-header {
  width: min(900px, 100%);
  margin: 0 auto 18px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}
.games-kicker {
  margin: 0 0 5px;
  color: var(--color-brand-primary);
  font: 600 11px var(--font-family-mono);
  letter-spacing: .14em;
}
.games-header h2 { margin: 0; color: var(--color-text-primary); font: 600 31px var(--font-family-serif); letter-spacing: -.03em; }
.games-scoreboard { display: flex; gap: 10px; }
.games-scoreboard span {
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, #b18aff);
  border-radius: 12px;
  color: var(--color-text-secondary);
  background: linear-gradient(145deg, var(--color-bg-elevated), var(--color-bg-secondary));
  box-shadow: var(--shadow-xs);
  font-size: 12px;
}
.games-scoreboard strong { color: var(--color-text-primary); margin-left: 5px; }

.dino-game-shell {
  position: relative;
  width: min(900px, 100%);
  aspect-ratio: 16 / 7;
  min-height: 320px;
  margin: auto;
  overflow: hidden;
  border: 2px solid rgba(255, 242, 207, .8);
  border-radius: 24px;
  background: #f8d99b;
  box-shadow: inset 0 0 0 5px rgba(104, 57, 40, .18), 0 18px 45px rgba(68, 37, 25, .22);
  touch-action: manipulation;
}
#dinoCanvas { width: 100%; height: 100%; display: block; cursor: pointer; }
.dino-game-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 24px rgba(255,255,255,.32), inset 0 -12px 30px rgba(53, 26, 37, .14);
}
.dino-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  text-align: center;
  background: linear-gradient(135deg, rgba(34, 20, 54, .65), rgba(89, 44, 55, .38));
  color: #fff;
  backdrop-filter: blur(2px);
}
.dino-overlay[hidden] { display: none; }
.dino-overlay h3 { margin: 0 0 8px; font: 600 35px var(--font-family-serif); letter-spacing: -.04em; }
.dino-overlay p { max-width: 380px; margin: 0 auto 8px; line-height: 1.5; }
.dino-overlay-hint { font-size: 13px; opacity: .85; }
.dino-overlay button {
  justify-self: center;
  margin-top: 12px;
  padding: 10px 18px;
  border: 0;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 12px;
  background: linear-gradient(135deg, #8c6de5, #5d43a8);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(22, 10, 43, .28), inset 0 1px 0 rgba(255,255,255,.3);
  font: 600 14px var(--font-family-sans);
}
.dino-overlay button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.dino-controls { width: min(900px, 100%); margin: 16px auto 0; color: var(--color-text-tertiary); text-align: center; font-size: 13px; }

.flappy-game-shell { position: relative; width: min(700px, 100%); aspect-ratio: 16 / 9; min-height: 320px; margin: auto; overflow: hidden; border: 2px solid rgba(255,255,255,.78); border-radius: 22px; background: #8bd0f4; box-shadow: inset 0 0 0 5px rgba(48,105,67,.15), 0 18px 45px rgba(32,87,99,.18); touch-action: manipulation; }
#flappyCanvas { width: 100%; height: 100%; display: block; cursor: pointer; }
.flappy-overlay { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; color: #fff; background: linear-gradient(135deg, rgba(35,91,137,.48), rgba(38,112,74,.28)); backdrop-filter: blur(2px); }
.flappy-overlay[hidden] { display: none; }
.flappy-overlay h3 { margin: 0 0 8px; font: 600 35px var(--font-family-serif); letter-spacing: -.04em; }
.flappy-overlay p { margin: 0; }
.flappy-overlay button { justify-self: center; margin-top: 16px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 12px; background: linear-gradient(135deg, #f6bd37, #e18b29); color: #442d14; cursor: pointer; box-shadow: 0 7px 14px rgba(34,78,61,.24); font: 700 14px var(--font-family-sans); }
.crossy-game-shell { position: relative; width: min(700px, 100%); aspect-ratio: 1.25 / 1; min-height: 390px; margin: auto; overflow: hidden; border: 2px solid rgba(255,255,255,.72); border-radius: 22px; background: #78c75b; box-shadow: inset 0 0 0 5px rgba(42,66,42,.14), 0 18px 45px rgba(28,54,36,.2); touch-action: none; }
#crossyCanvas { width: 100%; height: 100%; display: block; cursor: pointer; }
.crossy-overlay { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; color: #fff; background: linear-gradient(135deg, rgba(33,74,44,.58), rgba(40,47,68,.44)); backdrop-filter: blur(2px); }
.crossy-overlay[hidden] { display: none; }
.crossy-overlay h3 { margin: 0 0 8px; font: 600 35px var(--font-family-serif); letter-spacing: -.04em; }
.crossy-overlay p { max-width: 360px; margin: 0; line-height: 1.45; }
.crossy-overlay button { justify-self: center; margin-top: 16px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 12px; background: linear-gradient(135deg, #f8dc49, #e4a936); color: #3c3217; cursor: pointer; box-shadow: 0 7px 14px rgba(25,58,36,.25); font: 700 14px var(--font-family-sans); }
.doodle-game-shell { position: relative; width: min(700px, 100%); aspect-ratio: 16 / 11; min-height: 360px; margin: auto; overflow: hidden; border: 2px solid rgba(255,255,255,.8); border-radius: 25px; background: #8ddcf6; box-shadow: inset 0 0 0 5px rgba(70,110,173,.15), 0 18px 45px rgba(61,86,143,.22); touch-action: none; }
#doodleCanvas { width: 100%; height: 100%; display: block; cursor: pointer; }
.doodle-overlay { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; color: #fff; background: linear-gradient(135deg, rgba(51,91,153,.62), rgba(143,87,176,.45)); backdrop-filter: blur(2px); }
.doodle-overlay[hidden] { display: none; }
.doodle-overlay h3 { margin: 0 0 8px; font: 600 35px var(--font-family-serif); letter-spacing: -.04em; }
.doodle-overlay p { max-width: 365px; margin: 0; line-height: 1.45; }
.doodle-overlay button { justify-self: center; margin-top: 16px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 12px; background: linear-gradient(135deg, #ffcf4d, #f38b64); color: #48321c; cursor: pointer; box-shadow: 0 7px 14px rgba(56,68,133,.25); font: 700 14px var(--font-family-sans); }

@media (max-width: 700px) {
  #gamesPage { padding: 18px 14px 100px; }
  .games-header { align-items: start; }
  .games-scoreboard { gap: 6px; }
  .games-scoreboard span { padding: 7px 8px; }
  .dino-game-shell { min-height: 270px; aspect-ratio: 4 / 3; }
  .game-picker { grid-template-columns: 1fr; }
  .game-choice { min-height: 205px; }
  .game-choice-art { margin-bottom: 18px; }
  .flappy-game-shell { min-height: 270px; aspect-ratio: 4 / 3; }
  .crossy-game-shell { min-height: 320px; }
  .doodle-game-shell { min-height: 330px; }
}