/* A színek a játék kezelőfelületéből valók: sárga gombok, krémszín kártyák, sötétbarna körvonal. */
:root {
  --ink: #2b1d0e;
  --cream: #fff6e3;
  --yellow: #f8d661;
  --yellow-dark: #e9b93a;
  --green: #6dbe45;
  --green-dark: #4c9a2f;
  --sky-top: #5fb2e8;
  --sky-bottom: #c4e8fb;
  --bar: 64px;
  --gap: 20px;
}

* { box-sizing: border-box; }

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

body {
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  /* ég, alatta két domb – ugyanaz a kép, mint az ikonon */
  background:
    radial-gradient(120% 60% at 20% 118%, var(--green) 0 50%, transparent 50.3%),
    radial-gradient(120% 55% at 85% 122%, var(--green-dark) 0 50%, transparent 50.3%),
    linear-gradient(var(--sky-top), var(--sky-bottom) 75%);
  background-color: var(--sky-top);
}

#page {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--gap);
}

#stage {
  position: relative;
  /* a lehető legnagyobb 16:9-es téglalap, ami az alsó sávval együtt elfér */
  width: min(100%, calc((100vh - var(--bar) - 2 * var(--gap) - 12px) * 16 / 9));
  width: min(100%, calc((100dvh - var(--bar) - 2 * var(--gap) - 12px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #1f2a1c;
  border: 4px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 8px 0 rgba(43, 29, 14, 0.25);
  overflow: hidden;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

/* Betöltőképernyő */
#loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--cream);
  transition: opacity 0.35s ease, visibility 0.35s;
}
#loading.done { opacity: 0; visibility: hidden; pointer-events: none; }

#loading-icon {
  width: clamp(72px, 22%, 128px);
  height: auto;
  aspect-ratio: 1;
  border: 4px solid var(--ink);
  border-radius: 26%;
  box-shadow: 0 6px 0 rgba(43, 29, 14, 0.2);
  animation: bob 1.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { #loading-icon { animation: none; } }

#loading h1 {
  margin: 0;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: 0.01em;
}

#progress {
  width: min(70%, 360px);
  height: 22px;
  padding: 3px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
}
#progress-fill {
  width: 0;
  height: 100%;
  min-width: 10px;
  background: var(--green);
  border-radius: 999px;
  transition: width 0.2s ease;
}

#loading-text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* A motor üzenetei */
#banner {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: min(90%, 560px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
#banner > div {
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--yellow);
}
#banner > div.error { background: #e8553d; color: #fff; }

/* Alsó sáv */
#bar {
  width: min(100%, calc((100vh - var(--bar) - 2 * var(--gap) - 12px) * 16 / 9));
  width: min(100%, calc((100dvh - var(--bar) - 2 * var(--gap) - 12px) * 16 / 9));
  height: var(--bar);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}

#brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 0 rgba(43, 29, 14, 0.45);
}
#brand img {
  width: 40px;
  height: 40px;
  border: 3px solid var(--ink);
  border-radius: 12px;
}

#fullscreen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
#fullscreen:hover { background: #fbe085; }
#fullscreen:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
#fullscreen:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#fullscreen:disabled { opacity: 0.55; cursor: default; }

/* Teljes képernyőn csak a játék látszik */
#stage:fullscreen { width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; }
#stage:-webkit-full-screen { width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; }

/* Telefonon és alacsony ablakban a játék kitölti a teljes ablakot, sáv és keret nélkül */
body.mobile #page { padding: 0; }
body.mobile #stage { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
body.mobile #bar { display: none; }

@media (max-height: 460px), (max-width: 560px) {
  #page { padding: 0; }
  #stage { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
  #bar { display: none; }
}