/* Enter the Light: the site pages (home, why, 404). Games use etl.css only. */
body { min-height: 100vh; }
.page { max-width: 1120px; margin: 0 auto; padding: 0 16px 40px; }

/* top bar */
.top { display: flex; align-items: center; gap: 18px; padding: 14px 4px 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--read); font-weight: 700; font-size: 1.12rem; letter-spacing: -.005em;
  padding: 5px 18px 5px 5px; border-radius: 99px; background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.38)); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.85); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 20px rgba(169,130,47,.14); }
.brand span { background: linear-gradient(100deg, #2B2440 10%, #6E4F6B 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand img { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 8px rgba(169,130,47,.3); }
.top nav { display: flex; gap: 18px; margin-left: auto; align-items: center; }
.top nav a { color: var(--soft); text-decoration: none; font-weight: 600; font-size: .95rem; }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink); }
.top nav a.pill { padding: 8px 16px; border-radius: 99px; background: rgba(255,255,255,.75); border: 1.5px solid rgba(43,36,64,.2); box-shadow: 0 2px 0 rgba(43,36,64,.16); font-size: .9rem; transition: background .2s, transform .15s, box-shadow .15s; }
.top nav a.pill:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(43,36,64,.16); }
.top nav a.pill:hover, .top nav a.pill[aria-current] { background: #fff; }
@media (max-width: 520px) { .top nav a.hide-s { display: none; } }
.brand, .top nav a { white-space: nowrap; }

/* footer */
footer.foot { margin-top: 64px; padding: 28px 4px 8px; border-top: 1px solid rgba(201,162,74,.25); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; color: var(--soft); font-size: .88rem; }
footer.foot b { font-family: var(--read); color: var(--ink); font-size: 1rem; }
footer.foot a { color: var(--soft); }
footer.foot .care { flex-basis: 100%; font-size: .82rem; }

/* headings for sections */
.sec { margin-top: 56px; }
.sec h2 { font-family: var(--read); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.2rem); letter-spacing: -.02em; line-height: 1.1; margin: 0 0 6px; }
.sec .lead { color: var(--soft); font-size: 1rem; margin: 0 0 20px; max-width: 56ch; }
.foot-brand { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.foot-col { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.foot-col h4 { margin: 0 0 4px; font-size: .78rem; color: var(--gold-deep); font-weight: 700; }
.foot-col a { color: var(--soft); text-decoration: none; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-games { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 6px 22px; }
footer.foot { align-items: flex-start; gap: 22px 48px; }