/* Ekeros Studios
   Layout: left-aligned stencil headline over an open "blast zone" canvas,
   then one wide featured-game row, then a short about block. Single dark theme. */
:root {
  --night: #0F1B2D;   /* shared with ekeros.app */
  --deep: #0A1320;
  --sand: #EADFC8;
  --hazard: #F2B90F;
  --fuse: #E5482D;
  --steel: #8FA0BA;
  --line: rgba(234, 223, 200, 0.16);
  --display: "Saira Stencil One", "Impact", "Arial Black", sans-serif;
  --body: "Saira", "Segoe UI", system-ui, sans-serif;
  --wrap: 1120px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--sand);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--hazard); outline-offset: 3px; }

/* Header */
.top {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.brand {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1;
}
.brand span { color: var(--hazard); }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--hazard); }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.lang button {
  font: 600 0.8125rem var(--body);
  color: var(--steel);
  background: transparent;
  border: 0;
  padding: 6px 10px;
  cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--sand); color: var(--night); }

/* Hero */
.hero {
  position: relative;
  background: var(--deep);
  border-block: 1px solid var(--line);
  overflow: hidden;
  cursor: crosshair;
}
.hero::after { /* hazard tape along the bottom edge of the blast zone */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 14px, var(--deep) 14px 28px);
}
#blast { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-text {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(56px, 10vw, 120px) 24px clamp(64px, 10vw, 128px);
  pointer-events: none;
}
.hero-text a, .hero-text button { pointer-events: auto; }
h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.75rem, 8.5vw, 6.25rem);
  line-height: 0.98;
  letter-spacing: 0.005em;
  margin: 0;
  max-width: 11ch;
  text-wrap: balance;
}
.lede { max-width: 46ch; margin: 28px 0 0; font-size: 1.1875rem; color: var(--sand); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  font: 600 1rem var(--body);
  padding: 12px 22px;
  border-radius: 4px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--hazard); color: var(--deep); }
.btn-primary:hover { background: var(--sand); }
.btn-ghost { background: transparent; color: var(--sand); border-color: var(--sand); }
.btn-ghost:hover { border-color: var(--fuse); color: var(--fuse); }
.hint { margin: 14px 0 0; font-size: 0.875rem; color: var(--steel); }

/* Sections */
.section { max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 8vw, 88px) 24px 0; }
h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
  margin: 0 0 28px;
}

/* Games */
.games { display: grid; gap: 28px; }
.game {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.game-cover { background: #16263D; }
.game-cover img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.game-body {
  padding: clamp(24px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
}
.chip {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--deep);
  background: var(--hazard);
  padding: 3px 10px;
  border-radius: 3px;
}
.game h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  line-height: 1.02;
  margin: 0;
}
.game p { margin: 0; max-width: 42ch; }
.game .note { color: var(--steel); font-size: 0.9375rem; }
.game-empty {
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 28px clamp(24px, 4vw, 44px);
  color: var(--steel);
}
.game-empty strong { display: block; color: var(--sand); font-weight: 600; }

/* About */
.about p { max-width: 60ch; margin: 0 0 16px; }
.text-link { color: var(--hazard); font-weight: 600; text-underline-offset: 4px; }
.text-link:hover { color: var(--sand); }

/* Footer */
.foot {
  max-width: var(--wrap);
  margin: clamp(56px, 9vw, 104px) auto 0;
  padding: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 0.9375rem;
  color: var(--steel);
}

@media (max-width: 720px) {
  .game { grid-template-columns: 1fr; }
  .nav { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { cursor: auto; }
  #throw, .hint { display: none; }
}