/* Shared player-first visual layer for every H5 game. Gameplay stays game-specific. */
:root {
  --player-cyan: #00e5ff;
  --player-lime: #b7ff4a;
  --player-pink: #ff3df0;
  --player-gold: #ffd24d;
}

html, body {
  background-color: #050811;
}

canvas {
  filter: saturate(1.08) contrast(1.03);
}

#startScreen,
#menu,
.ov {
  background:
    radial-gradient(520px 280px at 50% 38%, rgba(0, 229, 255, 0.10), transparent 70%),
    radial-gradient(420px 260px at 72% 70%, rgba(255, 61, 240, 0.08), transparent 72%),
    rgba(3, 6, 14, 0.92) !important;
  backdrop-filter: blur(8px);
}

#startScreen h1,
#menu .logo,
#menu h1 {
  text-shadow: 0 0 18px currentColor, 0 0 42px rgba(0, 229, 255, 0.22) !important;
}

#startScreen p,
#menu .rows,
#menu .hint {
  color: #a9b9c8 !important;
}

#startScreen .btn,
#startScreen .start-btn,
#menu .btn,
#menu button {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 229, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

#startScreen .btn::after,
#startScreen .start-btn::after,
#menu .btn::after,
#menu button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.32) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .5s ease;
  pointer-events: none;
}

#startScreen .btn:hover::after,
#startScreen .start-btn:hover::after,
#menu .btn:hover::after,
#menu button:hover::after {
  transform: translateX(120%);
}

@media (prefers-reduced-motion: reduce) {
  #startScreen .btn::after,
  #startScreen .start-btn::after,
  #menu .btn::after,
  #menu button::after { display: none; }
}

/* Each game keeps its own emotional color cue instead of sharing one flat skin. */
body.theme-fruit { --theme-main: #53dc88; --theme-soft: rgba(83, 220, 136, .16); background: radial-gradient(circle at 50% 0%, #b9f5d1 0%, #72d6ca 38%, #163d46 100%) !important; }
body.theme-memory { --theme-main: #ca9cff; --theme-soft: rgba(202, 156, 255, .16); background: radial-gradient(circle at 50% 18%, #252043 0%, #0d1027 48%, #050711 100%) !important; }
body.theme-merge { --theme-main: #ffb24c; --theme-soft: rgba(255, 178, 76, .16); background: radial-gradient(circle at 50% 12%, #3b2032 0%, #171429 48%, #070811 100%) !important; }
body.theme-organizer { --theme-main: #72e6d0; --theme-soft: rgba(114, 230, 208, .16); background: radial-gradient(circle at 50% 10%, #173f45 0%, #0c1925 48%, #080a15 100%) !important; }
body.theme-cloner { --theme-main: #63e7ff; --theme-soft: rgba(99, 231, 255, .16); background: radial-gradient(circle at 50% 12%, #123647 0%, #091625 52%, #050811 100%) !important; }
body.theme-breakout { --theme-main: #ff62dc; --theme-soft: rgba(255, 98, 220, .16); background: radial-gradient(circle at 50% 14%, #40163f 0%, #171126 52%, #070811 100%) !important; }
body.theme-orbit { --theme-main: #7af7ff; --theme-soft: rgba(122, 247, 255, .16); background: radial-gradient(circle at 50% 40%, #102c48 0%, #080c20 48%, #03050d 100%) !important; }
body.theme-sort { --theme-main: #c58cff; --theme-soft: rgba(197, 140, 255, .16); background: radial-gradient(circle at 50% 18%, #291c48 0%, #0e1024 52%, #050711 100%) !important; }
body.theme-outrun { --theme-main: #ff7b91; --theme-soft: rgba(255, 123, 145, .16); }
body.theme-space { --theme-main: #76d9ff; --theme-soft: rgba(118, 217, 255, .16); background: radial-gradient(circle at 50% 40%, #101e43 0%, #060a1c 52%, #02040b 100%) !important; }
body.theme-stack { --theme-main: #ffd45a; --theme-soft: rgba(255, 212, 90, .16); background: radial-gradient(circle at 50% 8%, #44351b 0%, #171323 52%, #070811 100%) !important; }
body.theme-fruit #startScreen h1, body.theme-memory #startScreen h1, body.theme-merge #startScreen h1, body.theme-organizer h1 { color: var(--theme-main); text-shadow: 0 0 24px var(--theme-main), 0 0 50px var(--theme-soft) !important; }
body.theme-cloner #startScreen h1, body.theme-breakout #startScreen h1, body.theme-orbit #startScreen h1, body.theme-sort #startScreen h1, body.theme-outrun #menu .logo, body.theme-space #startScreen h1, body.theme-stack #startScreen h1 { color: var(--theme-main); text-shadow: 0 0 24px var(--theme-main), 0 0 50px var(--theme-soft) !important; }
body.theme-fruit .btn, body.theme-memory .btn, body.theme-merge .btn, body.theme-organizer .btn { border-color: var(--theme-main); color: var(--theme-main); }
body.theme-fruit #hud, body.theme-memory #hud, body.theme-merge #hud, body.theme-organizer #hud { filter: drop-shadow(0 0 12px var(--theme-soft)); }
body.theme-memory .card.matched .inner { animation: matchedGlow .65s ease-out; }
body.theme-organizer .slot.drag-over { box-shadow: 0 0 28px var(--theme-main), inset 0 0 20px var(--theme-soft); }
@keyframes matchedGlow { 0% { transform: rotateY(180deg) scale(.86); filter: brightness(1); } 45% { transform: rotateY(180deg) scale(1.12); filter: brightness(1.8); } 100% { transform: rotateY(180deg) scale(1); filter: brightness(1); } }

/* Shared interaction polish: every game should feel immediately readable and responsive. */
body {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--theme-main, var(--player-cyan));
  outline-offset: 4px;
}

#startScreen,
#menu,
.ov,
.overlay {
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  isolation: isolate;
}

#startScreen::before,
#menu::before,
.ov::before,
.overlay::before {
  content: '';
  position: absolute;
  inset: 10% 12%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 42%);
  pointer-events: none;
  z-index: -1;
}

#startScreen h1,
#menu h1,
#menu .logo {
  max-width: min(92vw, 720px);
  line-height: .95;
  text-wrap: balance;
}

#startScreen p,
#menu .hint,
.overlay .help {
  max-width: min(90vw, 430px);
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}

#startScreen .btn,
#startScreen .start-btn,
#menu .btn,
#menu button,
.overlay .btn,
.panel .btn {
  min-height: 48px;
  padding-inline: 24px;
  border-radius: 12px;
  font-weight: 900;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

#startScreen .btn:hover,
#startScreen .start-btn:hover,
#menu .btn:hover,
#menu button:hover,
.overlay .btn:hover,
.panel .btn:hover {
  transform: translateY(-2px);
}

#startScreen .btn:active,
#startScreen .start-btn:active,
#menu .btn:active,
#menu button:active,
.overlay .btn:active,
.panel .btn:active {
  transform: translateY(2px) scale(.98);
}

#hud {
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

#score,
#lives,
#timer,
#moves,
#found,
#streak,
#level,
#best,
#bestScore,
#coinCount,
#deathCount,
#height,
#goal,
#tokens,
#bestline {
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  background: rgba(5, 8, 17, .48);
  box-shadow: 0 8px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
}

#hint {
  max-width: min(90vw, 520px);
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 99px;
  background: rgba(5, 8, 17, .46);
  color: rgba(255,255,255,.72) !important;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  backdrop-filter: blur(8px);
}

body.theme-draw { --theme-main: #63d9ff; --theme-soft: rgba(99, 217, 255, .18); background: radial-gradient(circle at 50% 8%, #d9f7ff 0%, #9bd8e9 38%, #426d8d 100%) !important; }
body.theme-soft { --theme-main: #d59cff; --theme-soft: rgba(213, 156, 255, .18); background: radial-gradient(circle at 50% 8%, #f3dcff 0%, #c3a8e8 42%, #655b9a 100%) !important; }
body.theme-balance { --theme-main: #ffd166; --theme-soft: rgba(255, 209, 102, .18); background: radial-gradient(circle at 50% 8%, #fff3c7 0%, #e0b87a 42%, #78516a 100%) !important; }
body.theme-merge #startScreen h1, body.theme-draw #startScreen h1, body.theme-soft #startScreen h1, body.theme-balance #startScreen h1 { color: var(--theme-main); text-shadow: 0 0 24px var(--theme-main), 0 0 50px var(--theme-soft) !important; }
body.theme-merge .btn, body.theme-draw .btn, body.theme-soft .btn, body.theme-balance .btn { border-color: var(--theme-main); color: var(--theme-main); }

@media (max-width: 560px) {
  #startScreen h1, #menu h1, #menu .logo { font-size: clamp(28px, 10vw, 42px); letter-spacing: 2px; }
  #startScreen::before, #menu::before, .ov::before, .overlay::before { inset: 8% 5%; border-radius: 22px; }
  #score, #lives, #timer, #moves, #found, #streak, #level, #best, #bestScore, #coinCount, #deathCount, #height, #goal, #tokens, #bestline { padding: 6px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  #startScreen .btn, #startScreen .start-btn, #menu .btn, #menu button, .overlay .btn, .panel .btn { transition: none; }
  #startScreen .btn:hover, #startScreen .start-btn:hover, #menu .btn:hover, #menu button:hover, .overlay .btn:hover, .panel .btn:hover { transform: none; }
}