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

html {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(0.75rem, 4vw, 2rem);
}

.wrapper,
.platformer {
  max-width: min(100%, calc(100vw - clamp(1rem, 4vw, 2rem)));
  min-width: 0;
  min-height: auto;
  max-height: none;
}

.wrapper > *,
.platformer > * {
  min-width: 0;
}

canvas {
  max-width: 100%;
  height: auto;
}

.hud,
.controls__note,
.platformer__instructions,
.platformer__hint {
  overflow-wrap: anywhere;
}

.controls,
.controls__row,
.platformer__touch-controls,
.platformer__footer {
  min-width: 0;
  max-width: 100%;
}

.control-button,
.platformer__touch-button,
.platformer__restart {
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

#leaderboard,
.platformer__leaderboard,
.lgg-leaderboard {
  width: min(100%, 420px);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lgg-leaderboard__entry {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.lgg-leaderboard__name,
.lgg-leaderboard__score,
.lgg-leaderboard__player-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  body {
    align-items: stretch;
    justify-items: center;
    padding: 0.5rem;
  }

  .wrapper,
  .platformer {
    max-width: calc(100vw - 1rem);
    border-radius: 20px;
    padding: clamp(0.85rem, 4vw, 1.15rem);
    gap: clamp(0.7rem, 3vw, 1rem);
  }

  .wrapper {
    grid-template-rows: auto auto auto auto;
  }

  .controls__row {
    gap: 0.6rem;
  }

  .control-button {
    flex: 1 1 44%;
    padding-inline: 0.9rem;
  }

  .control-button.control-button--wide,
  .controls button[data-wide] {
    width: 100%;
  }

  .lgg-leaderboard {
    padding: 0.85rem;
  }

  .game-page--tetris .wrapper {
    min-height: auto;
    padding: 0.85rem;
  }

  .game-page--tetris canvas {
    width: min(62vw, 236px) !important;
    max-height: 52dvh;
    object-fit: contain;
  }

  .game-page--tetris .controls {
    gap: 0.45rem;
  }

  .game-page--tetris .controls button {
    padding-inline: 0.65rem;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
  }

  .game-page--tetris .lgg-leaderboard {
    width: min(100%, calc(100vw - 3rem)) !important;
    max-width: 320px !important;
    padding: 0.85rem !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  body {
    min-height: 100dvh;
    overflow-y: auto;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .wrapper,
  .platformer {
    min-height: auto;
  }
}

/* Shared Lemonade Arcade cabinet shell */
:root {
  --arcade-ink: #0d1b19;
  --arcade-panel: #fffdf0;
  --arcade-paper: #fff4bd;
  --arcade-teal: #0f766e;
  --arcade-teal-dark: #16433f;
  --arcade-citrus: #f1c84c;
  --arcade-orange: #f08a24;
  --arcade-red: #d95f3d;
  --arcade-muted: #52615e;
}

html {
  min-height: 100%;
  background: var(--arcade-ink);
}

body.game-page,
body.game-page--tetris,
body.game-page--platformer {
  display: grid !important;
  place-items: center !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: clamp(0.75rem, 3vw, 1.75rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: #14211f !important;
  background:
    linear-gradient(90deg, rgba(255, 253, 240, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 253, 240, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 18% 10%, rgba(241, 200, 76, 0.22), transparent 20rem),
    radial-gradient(circle at 88% 84%, rgba(15, 118, 110, 0.28), transparent 24rem),
    var(--arcade-ink) !important;
  background-size: 28px 28px, 28px 28px, auto, auto, auto !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  touch-action: manipulation;
}

.wrapper,
.platformer {
  position: relative;
  width: min(100%, 760px) !important;
  max-width: calc(100vw - clamp(1rem, 4vw, 2rem)) !important;
  min-height: auto !important;
  display: grid !important;
  gap: clamp(0.8rem, 2.4vw, 1.1rem) !important;
  justify-items: center !important;
  padding: clamp(0.85rem, 3vw, 1.5rem) !important;
  border: 2px solid rgba(255, 253, 240, 0.22) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255, 253, 240, 0.98), rgba(255, 244, 189, 0.94)) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(20, 33, 31, 0.18) inset !important;
  text-align: center !important;
}

.wrapper::before {
  content: 'Lemonade Arcade';
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.65rem 0.85rem;
  color: #fffdf0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--arcade-teal-dark), var(--arcade-teal));
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.18);
  font-size: clamp(1rem, 2.8vw, 1.35rem);
  font-weight: 900;
  line-height: 1;
}

.wrapper::after {
  content: 'score chase';
  position: absolute;
  top: clamp(1.4rem, 3vw, 2rem);
  right: clamp(1.5rem, 4vw, 2.25rem);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--arcade-citrus);
  color: #14211f;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.game-page--asteroids .wrapper::before {
  content: 'Asteroid Grove';
}

.game-page--brick-breaker .wrapper::before {
  content: 'Citrus Breakout';
}

.game-page--flappy .wrapper::before {
  content: 'Skyline Flap';
}

.game-page--tetris .wrapper::before {
  content: 'Stack Lab';
}

canvas,
.platformer__playfield canvas {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  border: 3px solid rgba(20, 33, 31, 0.88) !important;
  border-radius: 16px !important;
  background: #071513 !important;
  box-shadow: 10px 12px 0 rgba(20, 33, 31, 0.12), 0 18px 36px rgba(20, 33, 31, 0.22) !important;
  touch-action: none !important;
}

.wrapper canvas {
  width: min(100%, 640px) !important;
}

.game-page--asteroids canvas,
.game-page--brick-breaker canvas {
  aspect-ratio: 4 / 3 !important;
}

.game-page--flappy canvas {
  aspect-ratio: 2 / 3 !important;
  width: min(100%, 420px) !important;
  max-height: 58dvh !important;
  object-fit: contain !important;
}

.game-page--tetris canvas {
  width: min(68vw, 260px) !important;
  max-height: 58dvh !important;
  aspect-ratio: 3 / 5 !important;
  object-fit: contain !important;
}

.hud,
.controls__note,
.platformer__instructions,
.platformer__hint {
  max-width: 58ch !important;
  margin-inline: auto !important;
  color: var(--arcade-muted) !important;
  font-size: clamp(0.88rem, 2.4vw, 0.98rem) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

.controls,
.platformer__touch-controls,
.platformer__footer {
  display: grid !important;
  justify-items: center !important;
  width: 100% !important;
  overflow: hidden !important;
  gap: 0.65rem !important;
}

.controls__row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  width: min(100%, 360px) !important;
  max-width: 100% !important;
}

.control-button,
.platformer__touch-button,
.platformer__restart,
.controls button {
  appearance: none !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 100% !important;
  padding: 0.72rem 1rem !important;
  border: 2px solid rgba(20, 33, 31, 0.16) !important;
  border-radius: 999px !important;
  color: #14211f !important;
  background: linear-gradient(180deg, #ffd96a, var(--arcade-orange)) !important;
  box-shadow: 0 10px 20px rgba(240, 138, 36, 0.22) !important;
  font: 900 clamp(0.9rem, 2.8vw, 1rem) / 1 Inter, system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  overflow-wrap: anywhere !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
}

.control-button.control-button--accent,
.platformer__touch-button[data-control='jump'] {
  color: #fffdf0 !important;
  background: linear-gradient(180deg, #168980, var(--arcade-teal-dark)) !important;
}

.control-button[data-action='shoot'],
.control-button[data-action='flap'],
.controls button[data-action='hard-drop'] {
  color: #fffdf0 !important;
  background: linear-gradient(180deg, #e87945, #a83d25) !important;
}

.control-button[data-action='reset'],
.control-button[data-action='restart'],
.controls button[data-action='restart'],
.platformer__restart {
  color: #14211f !important;
  background: linear-gradient(180deg, #fffdf0, #eee5bd) !important;
  box-shadow: 0 8px 16px rgba(20, 33, 31, 0.12) !important;
}

.controls button[data-action='rotate'],
.control-button[data-action='thrust'] {
  color: #fffdf0 !important;
  background: linear-gradient(180deg, #168980, var(--arcade-teal-dark)) !important;
}

.control-button.is-active,
.control-button:active,
.platformer__touch-button:active,
.platformer__restart:active {
  transform: translateY(2px) !important;
  box-shadow: 0 5px 12px rgba(20, 33, 31, 0.24) !important;
}

#leaderboard,
.platformer__leaderboard,
.lgg-leaderboard {
  width: min(100%, 480px) !important;
  max-width: 100% !important;
  border: 1px solid rgba(20, 33, 31, 0.14) !important;
  border-radius: 16px !important;
  background: #fffdf0 !important;
  color: #14211f !important;
  box-shadow: 0 10px 24px rgba(20, 33, 31, 0.08) !important;
}

.lgg-leaderboard__entry {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.lgg-leaderboard__name,
.lgg-leaderboard__score,
.lgg-leaderboard__player-name {
  overflow-wrap: anywhere !important;
}

.lgg-leaderboard,
.lgg-leaderboard *,
.platformer__leaderboard,
.platformer__leaderboard * {
  color: #14211f !important;
}

.lgg-leaderboard__title,
.lgg-leaderboard h2,
.platformer__leaderboard h2 {
  color: #8d4618 !important;
}

.platformer {
  width: min(100%, 820px) !important;
}

.platformer__hud {
  display: grid;
  gap: 0.35rem;
}

.platformer__eyebrow {
  margin: 0;
  color: var(--arcade-teal-dark) !important;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.platformer__title {
  margin: 0;
  color: #14211f !important;
  font-size: clamp(1.8rem, 5vw, 2.7rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.platformer__playfield {
  width: min(100%, 640px) !important;
}

.platformer__playfield canvas {
  width: 100% !important;
  aspect-ratio: 5 / 3 !important;
}

.platformer__status {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

.platformer__counter {
  display: inline-grid;
  place-items: center;
  min-width: 4rem;
  min-height: 2.25rem;
  border-radius: 999px;
  background: #14211f;
  color: #fffdf0;
  font-weight: 900;
}

@media (max-width: 620px) {
  body.game-page,
  body.game-page--tetris,
  body.game-page--platformer {
    align-items: start !important;
    padding: 0 !important;
  }

  .wrapper,
  .platformer {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    align-content: start !important;
    padding: max(0.5rem, env(safe-area-inset-top)) 0.5rem max(0.7rem, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    gap: 0.55rem !important;
  }

  .wrapper::before {
    min-height: 36px;
    padding: 0.48rem 0.65rem;
    border-radius: 12px;
    font-size: 1rem;
  }

  .wrapper::after {
    display: none;
  }

  .wrapper canvas {
    max-height: none !important;
    object-fit: contain !important;
  }

  .game-page--asteroids canvas,
  .game-page--brick-breaker canvas {
    width: 100% !important;
    height: clamp(430px, 66dvh, 620px) !important;
    aspect-ratio: auto !important;
    object-fit: fill !important;
  }

  .game-page--flappy canvas {
    width: auto !important;
    height: clamp(430px, 60dvh, 560px) !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: 64dvh !important;
  }

  .game-page--tetris canvas {
    width: auto !important;
    height: clamp(500px, 62dvh, 620px) !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: 64dvh !important;
  }

  .platformer__playfield canvas {
    height: clamp(330px, 50dvh, 460px) !important;
    object-fit: fill !important;
  }

  .controls {
    margin-top: 0.1rem !important;
  }

  .hud,
  .controls__note,
  .platformer__instructions,
  .platformer__hint {
    display: none !important;
  }

  .controls__row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(100%, 352px) !important;
    max-width: calc(100vw - 1rem) !important;
    gap: 0.45rem !important;
  }

  .controls__row:last-of-type {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .control-button,
  .platformer__touch-button,
  .platformer__restart,
  .controls button {
    width: 100% !important;
    flex: 0 1 auto !important;
    min-height: 42px !important;
    padding: 0.52rem 0.7rem !important;
    border-radius: 14px !important;
  }

  .controls__row:last-of-type .control-button {
    flex-basis: auto !important;
  }

  .platformer__touch-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(100%, 352px) !important;
  }

  .platformer__touch-button {
    width: 100% !important;
  }

  #leaderboard,
  .platformer__leaderboard,
  .lgg-leaderboard {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .wrapper canvas {
    max-height: none !important;
  }

  .game-page--asteroids canvas,
  .game-page--brick-breaker canvas {
    height: clamp(430px, 66dvh, 600px) !important;
  }

  .game-page--flappy canvas {
    height: clamp(405px, 58dvh, 520px) !important;
  }

  .game-page--tetris canvas {
    height: clamp(490px, 62dvh, 600px) !important;
  }

  .control-button,
  .platformer__touch-button,
  .platformer__restart,
  .controls button {
    padding-inline: 0.52rem !important;
    font-size: 0.84rem !important;
  }

  .hud,
  .controls__note,
  .platformer__instructions,
  .platformer__hint {
    width: min(100%, 32ch) !important;
    font-size: 0.86rem !important;
  }
}