:root {
  --zeph-bg: #f7f8f4;
  --zeph-ink: #162038;
  --zeph-coral: #ff6a3d;
  --zeph-mint: #66d9b8;
  --zeph-sky: #4ea0ff;
  --zeph-card: #ffffff;
}
* { box-sizing: border-box; }
body.zeph-body {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  color: var(--zeph-ink);
  background:
    linear-gradient(120deg, rgba(102, 217, 184, 0.18), transparent 35%),
    linear-gradient(300deg, rgba(255, 106, 61, 0.15), transparent 40%),
    var(--zeph-bg);
}
body.zeph-agehold { overflow: hidden; }
.zeph-header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(22, 32, 56, 0.14);
  padding: 0.85rem 1rem;
  position: sticky;
  top: 0;
  z-index: 65;
}
.zeph-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.zeph-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--zeph-ink);
}
.zeph-brand img { width: 48px; height: 38px; }
.zeph-brand span {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.3rem, 4.3vw, 2rem);
  font-weight: 800;
}
.zeph-menu {
  border: 1px solid var(--zeph-coral);
  border-radius: 999px;
  padding: 0.38rem 0.85rem;
  color: var(--zeph-coral);
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}
.zeph-nav {
  margin-top: 0.8rem;
  display: none;
  flex-direction: column;
  gap: 0.45rem;
}
.zeph-nav.show { display: flex; }
.zeph-nav a {
  text-decoration: none;
  color: var(--zeph-ink);
  padding: 0.45rem 0.72rem;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(22, 32, 56, 0.12);
}
.zeph-nav a:hover,
.zeph-nav a:focus-visible {
  border-color: var(--zeph-sky);
}
.zeph-layout {
  width: min(1380px, 100% - 1.5rem);
  margin: 1rem auto 2rem;
  display: grid;
  gap: 0.95rem;
}
.zeph-lead,
.zeph-info,
.zeph-game,
.zeph-panels article,
.zeph-doc {
  background: var(--zeph-card);
  border: 1px solid rgba(22, 32, 56, 0.13);
  border-radius: 18px;
  padding: 1rem;
}
.zeph-lead h1,
.zeph-doc h1 {
  margin-top: 0;
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 5.8vw, 3.2rem);
  line-height: 1.05;
}
.zeph-info h2,
.zeph-game h2,
.zeph-panels h2 {
  margin-top: 0;
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
}
.zeph-info ul {
  margin: 0.6rem 0 0;
  padding-left: 1rem;
  line-height: 1.7;
}
.zeph-game iframe,
.zeph-frame iframe {
  width: 100%;
  min-height: 470px;
  border: 0;
  border-radius: 12px;
  background: #000;
}
.zeph-panels { display: grid; gap: 0.9rem; }
.zeph-doc {
  width: min(1140px, 100% - 1.5rem);
  margin: 1rem auto 2rem;
  line-height: 1.74;
}
.zeph-frame iframe { min-height: 72vh; }
.zeph-footer {
  margin: 0 0.8rem 0.8rem;
  background: #162038;
  color: #e5ecff;
  border-radius: 14px;
  padding: 1rem;
}
.zeph-footer div {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.zeph-footer a { color: #8ee6ff; text-decoration: none; }
.zeph-age {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 35, 0.78);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 95;
}
.zeph-age[hidden] { display: none; }
.zeph-age-card {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(22, 32, 56, 0.18);
  padding: 1rem;
}
.zeph-age-card h2 {
  margin-top: 0;
  font-family: 'Syne', sans-serif;
}
.zeph-age-card div {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.zeph-age-card button {
  border: 0;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
#zeph-yes { background: var(--zeph-coral); color: #fff; }
#zeph-no { background: #dbe2ef; color: #20304e; }
@media (min-width: 940px) {
  .zeph-menu { display: none; }
  .zeph-nav {
    margin-top: 0.8rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .zeph-layout {
    grid-template-columns: 1.07fr 0.93fr;
    grid-template-areas:
      'lead info'
      'game game'
      'panels panels';
  }
  .zeph-lead { grid-area: lead; }
  .zeph-info { grid-area: info; }
  .zeph-game { grid-area: game; }
  .zeph-panels {
    grid-area: panels;
    grid-template-columns: repeat(3, 1fr);
  }
}