/* ==========================================================================
   The Eighth Layer: de pagina op indegymzaal.nl
   Aanvulling op huisstijl.css (die blijft gelijk aan de versie uit de repository
   van de game). Hier: de kop van de site in het donker, de opbouw van de secties,
   en wat de rest van de site anders zou doen.
   ========================================================================== */

/* ---------- De site rondom: ook donker op deze pagina */

body.tel-page { background: var(--tel-night); }

.tel-page .site-header {
  background: rgb(1 4 7 / 0.86);
  border-bottom-color: var(--tel-border);
}
.tel-page .site-header .logo,
.tel-page .site-header .logo:hover { color: var(--tel-text); }
.tel-page .site-header .nav__list a { color: var(--tel-text-2); }
.tel-page .site-header .nav__list a:hover { color: var(--tel-cyan); }
.tel-page .site-header .btn--ink { background: var(--tel-text); color: var(--tel-night); }
.tel-page .site-header .btn--ink:hover { background: var(--tel-cyan); color: var(--tel-night); }
.tel-page .site-footer { border-top: 1px solid var(--tel-border); }

/* ---------- Wat het thema anders doet */

.tel { display: block; overflow-x: clip; }
.tel a:not(.tel-button) { text-decoration: underline; text-decoration-thickness: 1px; }
.tel h1, .tel h2, .tel h3 { overflow-wrap: break-word; }
.tel figure { margin: 0; }
.tel ul, .tel ol { margin-top: 0; }
/* Het thema houdt al 84 px vrij voor de kop; op een telefoon is de kop hoger */
@media (max-width: 760px) { .tel [id] { scroll-margin-top: 48px; } }

/* ---------- Bovenkant: snelmenu en zaklamp */

.tel-jump {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 22px;
}
.tel-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tel-jump a,
.tel .tel-jump a:not(.tel-button) {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--tel-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tel-text-2);
}
.tel .tel-jump a:hover { color: var(--tel-cyan-bright); }

.tel-torch__content h1 { margin: 0; }
.tel-hero__logo { margin-top: 0.4rem; }
.tel-torch .tel-lead { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); }

/* ---------- Opbouw */

.tel-section > .tel-wrap > :last-child { margin-bottom: 0; }
.tel-intro { max-width: 46em; }
.tel-split--top { align-items: start; }
.tel .tel-block { margin-top: clamp(32px, 4vw, 48px); }
.tel h3 { margin-top: 1.8em; }
.tel-panel h3:first-child,
.tel-split > div > h3:first-child { margin-top: 0; }

.tel-figure img { border: 1px solid var(--tel-border); }
.tel-figure figcaption,
.tel-media-caption { font-size: 0.95rem; color: var(--tel-text-3); padding-top: 0.5rem; }

/* De vijf screenshots: vijf naast elkaar, op een telefoon onder elkaar */
.tel-shots { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.tel-shots.gallery { padding-bottom: 0; gap: 12px; }
.tel-shots a { display: block; height: auto; }
.tel-shots a:focus-visible img { outline: 2px solid var(--tel-cyan-bright); outline-offset: 3px; }
.tel-shots img { transition: border-color 0.2s; }
.tel-shots a:hover img { border-color: var(--tel-border-strong); }

/* Lijst met een vetgedrukt begin */
.tel-list strong { color: var(--tel-text); }

/* Bediening: twee tabellen naast elkaar, de derde eronder over de hele breedte */
.tel-controls { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.tel-controls .tel-panel--wide { grid-column: 1 / -1; }
.tel-controls .tel-table th { width: 40%; }
.tel-table tr:last-child th,
.tel-table tr:last-child td { border-bottom: 0; }

/* Instellingen */
.tel-table--settings th { width: 30%; }
.tel-table thead th {
  width: auto;
  padding-top: 0;
  font-family: var(--tel-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tel-cyan);
  border-bottom-color: var(--tel-border-strong);
}

/* Een lijst in twee kolommen op een breed scherm */
.tel-list--cols { columns: 2 340px; column-gap: clamp(32px, 5vw, 64px); }
.tel-list--cols li { break-inside: avoid; margin: 0 0 0.9em; }
.tel-list--cols li:first-child { margin-top: 0; }

/* De lampen */
.tel-light p:last-child { margin-bottom: 0; }

/* Meldingen */
.tel-notice + .tel-list,
.tel-notice + p { margin-top: 1.4rem; }

/* Samen spelen: stappen links, goed om te weten rechts */
.tel-samen .tel-panel h3 { margin-top: 0; }

/* Privacy */
.tel-privacy .tel-list li { margin-bottom: 0.7em; }

/* Veelgestelde vragen: de vraag in Rajdhani, iets groter */
.tel-faq summary { padding-right: 2rem; position: relative; }
.tel-faq summary::after { position: absolute; right: 0; top: 1rem; float: none; }
.tel-faq summary:focus-visible { outline-offset: 2px; }

/* ---------- Formulier */

.tel-field__hint { margin: 0; font-size: 1rem; color: var(--tel-cyan); }
.tel-field__error { margin: 0; }
.tel-form__status { margin: 0; min-height: 0; font-size: 1.1rem; }
.tel-form__status:empty { display: none; }
.tel-form__status.is-ok { color: var(--tel-seam); text-shadow: 0 0 8px rgb(102 255 184 / 0.4); }
.tel-form__status.is-fail { color: var(--tel-danger); }
.tel-form__note { margin: 0; }
.tel-form button[disabled] { opacity: 0.6; cursor: wait; }
.tel-field select option { background: var(--tel-glass); color: var(--tel-text); }

/* ---------- Onderaan */

.tel-foot { padding-block: 40px; border-top: 1px solid var(--tel-border); }
.tel-foot p { margin: 0; }

/* ---------- Rustig scrollen naar een anker, behalve bij "minder beweging" */

@media (prefers-reduced-motion: reduce) {
  .tel-shots img { transition: none; }
}