:root {
  --font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-size-base: 18px;
  --font-size-mobile: 19px;
  --line-height: 1.6;
  --container-max: 1100px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --radius-lg: 16px;

  --color-text: #111;
  --color-muted: #555;
  --color-brand: #0a7cff;
  --color-header-bg: #ffffffcc;
  --color-border: #e5e7eb;

  --block-home: #f8fafc;
  --block-game: #fff7ed;
  --block-daily: #f0fdf4;
  --block-team: #fef2f2;
  --block-why: #eef2ff;
  --block-contact: #faf5ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background: #fff;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-2); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; }
.brand { font-weight: 800; text-decoration: none; color: var(--color-text); font-size: 1.25rem; }

.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
}
.nav__menu { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.nav__link { text-decoration: none; color: var(--color-text); padding: 0.25rem 0.5rem; border-radius: 8px; }
.nav__link:hover { background: #0000000a; }

.block { padding: clamp(2rem, 5vw, 4rem) 0; }
.block .section-title { margin-top: 0; font-size: clamp(1.4rem, 2.5vw, 2rem); }
.block .section-content img { max-width: 100%; height: auto; display: block; margin: var(--space-2) 0; border-radius: 8px; }
.block .section-content iframe { width: 100%; min-height: 300px; border: none; border-radius: 8px; }
.block .section-content a { color: var(--color-brand); }

.block--home { background: var(--block-home); }
.block--game { background: var(--block-game); }
.block--daily { background: var(--block-daily); }
.block--team { background: var(--block-team); }
.block--why { background: var(--block-why); }
.block--contact { background: var(--block-contact); }

.site-footer { border-top: 1px solid var(--color-border); padding: var(--space-2) 0; color: var(--color-muted); font-size: 0.95rem; }

.lightbox[aria-hidden="true"] { display: none; }
.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.8);
  display: grid; place-items: center; padding: var(--space-4);
}
.lightbox__img { max-width: 100%; max-height: 90vh; border-radius: 10px; }
.lightbox__close {
  position: absolute; top: 12px; right: 12px;
  background: white; border: none; font-size: 2rem; line-height: 1;
  width: 44px; height: 44px; border-radius: 8px; cursor: pointer;
}

@media (max-width: 640px) {
  body { font-size: var(--font-size-mobile); }
  .nav__toggle { display: inline-block; }
  .nav__menu { display: none; flex-direction: column; gap: 0; border: 1px solid var(--color-border); background: white; position: absolute; right: var(--space-2); top: 60px; padding: var(--space-2); border-radius: 12px; }
  .nav__menu.is-open { display: flex; }
}

/* === TERC GAME gallery: 3-up grid on wide screens, 1-up on phones === */
.media-grid--game {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: stretch;
}
.media-grid--game figure {
  margin: 0;
  /* Uniform tile size regardless of original image aspect */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
}
.media-grid--game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .media-grid--game {
    grid-template-columns: 1fr;
  }
}
/* (Optional) tablet optimization */
@media (min-width: 641px) and (max-width: 960px) {
  .media-grid--game {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}