/* ==========================================================================
   The Eighth Layer: huisstijl voor het web
   De kleuren en vormen komen uit de game zelf: UITheme (de kleuren van de
   menu's), HoloPanel.shader (de panelen) en de zes lichten (LightModes).
   Uitleg en regels: huisstijl.md. Een voorbeeld van alles: voorbeeld.html.

   Alles staat onder de klasse .tel (The Eighth Layer), zodat het niet botst
   met de rest van de site. Zet die klasse op de buitenste container van de
   pagina, bijvoorbeeld <main class="tel">.
   ========================================================================== */

/* ---------- Lettertypes (zelf hosten: geen Google Fonts, zie huisstijl.md) */

@font-face {
  font-family: "Orbitron";
  src: url("fonts/orbitron.woff2") format("woff2");
  font-weight: 400 900;          /* variabel lettertype */
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("fonts/rajdhani-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "TEL Symbolen";   /* de symbolen van de game: ★ ☰ ✔ ↑ ♥ ■ */
  src: url("fonts/symbolen.woff2") format("woff2");
  unicode-range: U+2605, U+2630, U+2714, U+2191, U+2665, U+25A0;
}

/* ---------- Kleuren en maten */

:root {
  /* Glas: de achtergrond */
  --tel-night: #010407;                 /* de pagina: dieper dan het glas */
  --tel-glass: #03090f;                 /* UITheme.PanelBackground */
  --tel-glass-88: rgb(3 9 15 / 0.88);
  --tel-card: rgb(77 230 255 / 0.06);   /* UITheme.CardBackground */

  /* Hologram: cyaan */
  --tel-cyan: #47e0ff;                  /* UITheme.Accent */
  --tel-cyan-bright: #9ef7ff;           /* AccentBright: hoekhaken, nadruk */
  --tel-cyan-muted: rgb(71 224 255 / 0.35);
  --tel-border: rgb(71 224 255 / 0.25);
  --tel-border-strong: rgb(71 224 255 / 0.6);
  --tel-glow: rgb(64 217 255 / 0.35);   /* HoloPanel _GlowColor */

  /* Tekst (voor het web iets steviger dan in de game: contrast AA) */
  --tel-text: #e0f7ff;                  /* TextPrimary */
  --tel-text-2: #8fc4d9;                /* TextSecondary */
  --tel-text-3: #5d889b;                /* TextMuted: alleen voor kleine bijzaken */

  /* Betekenis: deze kleuren veranderen nooit */
  --tel-seam: #66ffb8;                  /* de naad: de uitgang, veilig, gelukt */
  --tel-warning: #ffb84d;               /* let op */
  --tel-danger: #ff524d;                /* gevaar, fout */
  --tel-dream: #ff4540;                 /* het rood van de Droom en het Schrift */
  --tel-gold: #ffd659;                  /* scores, sterren */

  /* De zes lichten */
  --light-white: #fff2d9;
  --light-red: #ff1a0f;
  --light-uv: #8038ff;
  --light-ir: #d94d40;                  /* IR is onzichtbaar: dit is de kleur van het lichtrad */
  --light-strobe: #ebf5ff;
  --light-green: #40ff59;

  /* Juweeltinten van de Droom: spaarzaam, alleen voor iets bijzonders */
  --jewel-magenta: #ff6fce;
  --jewel-gold: #ffdf76;
  --jewel-emerald: #61f6c4;
  --jewel-ultramarine: #89a2ff;

  /* Type */
  --tel-font-display: "Orbitron", "Rajdhani", system-ui, sans-serif;
  --tel-font-body: "Rajdhani", "TEL Symbolen", "Segoe UI", system-ui, sans-serif;

  /* Vorm */
  --tel-cut: 22px;                      /* afgesneden hoek van een paneel */
  --tel-cut-sm: 10px;                   /* knoppen en velden */
  --tel-line: 1.5px;                    /* randdikte */
  --tel-max: 1120px;                    /* breedte van de inhoud */
  --tel-gutter: 16px;                   /* zijmarge op een telefoon */
}

/* ---------- Basis */

.tel {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgb(71 224 255 / 0.08), transparent 70%),
    var(--tel-night);
  color: var(--tel-text);
  font-family: var(--tel-font-body);
  font-weight: 600;
  font-size: 1.125rem;                  /* Rajdhani valt klein uit: 18 px als basis */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.tel *,
.tel *::before,
.tel *::after { box-sizing: border-box; }

.tel ::selection { background: rgb(71 224 255 / 0.35); color: #fff; }

.tel p { margin: 0 0 1em; color: var(--tel-text-2); }
.tel strong { color: var(--tel-text); font-weight: 600; }
.tel a:not(.tel-button) { color: var(--tel-cyan); text-underline-offset: 3px; }
.tel a:not(.tel-button):hover { color: var(--tel-cyan-bright); }
.tel img { max-width: 100%; height: auto; display: block; }

.tel :focus-visible {
  outline: 2px solid var(--tel-cyan-bright);
  outline-offset: 4px;
}

.tel-wrap {
  width: min(100% - 2 * var(--tel-gutter), var(--tel-max));
  margin-inline: auto;
}

.tel-section { padding-block: clamp(56px, 9vw, 112px); }

/* ---------- Koppen */

.tel h1,
.tel h2,
.tel h3,
.tel-display {
  font-family: var(--tel-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.15;
  color: var(--tel-text);
  text-shadow: 0 0 6px rgb(71 224 255 / 0.55), 0 0 22px rgb(71 224 255 / 0.25);
  margin: 0 0 0.6em;
}

.tel h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem); }
.tel h2 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.3rem); }
.tel h3 { font-size: 1.05rem; letter-spacing: 0.14em; color: var(--tel-cyan-bright); }

/* Het kleine label boven een kop, zoals in de game: "LAAG 0 // OPSTART" */
.tel-eyebrow {
  display: block;
  font-family: var(--tel-font-display);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tel-cyan);
  margin-bottom: 1rem;
}

/* De Droom spreekt: rood, gloeiend */
.tel-dream {
  color: var(--tel-dream);
  text-shadow: 0 0 8px rgb(255 69 64 / 0.6);
  font-style: normal;
}

.tel-lead { font-size: 1.3rem; color: var(--tel-text); max-width: 38em; }

/* ---------- Paneel: donker glas met afgesneden hoeken (HoloPanel) */

.tel-panel {
  --cut: var(--tel-cut);
  --cut-in: calc(var(--cut) - 1px);
  position: relative;
  isolation: isolate;
  padding: clamp(22px, 3.2vw, 40px);
  filter: drop-shadow(0 0 7px var(--tel-glow));
}

.tel-panel::before,
.tel-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
}

/* De rand */
.tel-panel::before {
  inset: 0;
  background: var(--tel-border-strong);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}

/* Het glas: een zwakke lichtband die langsglijdt, scanlijnen, een raster */
.tel-panel::after {
  inset: var(--tel-line);
  clip-path: polygon(var(--cut-in) 0, calc(100% - var(--cut-in)) 0, 100% var(--cut-in), 100% calc(100% - var(--cut-in)),
    calc(100% - var(--cut-in)) 100%, var(--cut-in) 100%, 0 calc(100% - var(--cut-in)), 0 var(--cut-in));
  background:
    linear-gradient(to bottom, transparent, rgb(115 242 255 / 0.07), transparent) 0 -43% / 100% 30% no-repeat,
    repeating-linear-gradient(to bottom, rgb(71 224 255 / 0.03) 0 1px, transparent 1px 5px),
    linear-gradient(rgb(71 224 255 / 0.05) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(90deg, rgb(71 224 255 / 0.05) 1px, transparent 1px) 0 0 / 38px 38px,
    var(--tel-glass-88);
  animation: tel-sweep 5s linear infinite;
}

@keyframes tel-sweep {
  from { background-position: 0 -43%, 0 0, 0 0, 0 0; }
  to   { background-position: 0 143%, 0 0, 0 0, 0 0; }
}

/* Een kopregel in het paneel, zoals de lijn onder een titel in de game */
.tel-panel__header {
  border-bottom: 1px solid var(--tel-border-strong);
  padding-bottom: 0.9rem;
  margin-bottom: 1.2rem;
}

/* Hoekhaken: zet <span class="tel-corners" aria-hidden="true"></span> in een paneel */
.tel-corners {
  --l: 34px;
  --w: 3px;
  --c: var(--tel-cyan-bright);
  position: absolute;
  inset: -8px;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
}

/* Een paneel in het rood van de Droom (spaarzaam: één per pagina) */
.tel-panel--dream { --tel-border-strong: rgb(255 69 64 / 0.6); --tel-glow: rgb(255 69 64 / 0.3); }
.tel-panel--dream .tel-corners { --c: #ff8a80; }

/* ---------- Knoppen */

.tel-button {
  --cut: var(--tel-cut-sm);
  --cut-in: calc(var(--cut) - 1px);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.8em 1.6em;
  font-family: var(--tel-font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tel-text);
  cursor: pointer;
  border: 0;
  background: none;
  filter: drop-shadow(0 0 5px rgb(64 217 255 / 0.3));
  transition: filter 0.2s, color 0.2s;
}

.tel-button::before,
.tel-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  transition: background 0.2s;
}

.tel-button::before {
  inset: 0;
  background: var(--tel-border-strong);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.tel-button::after {
  inset: var(--tel-line);
  background: rgb(7 30 42 / 0.92);
  clip-path: polygon(var(--cut-in) 0, 100% 0, 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, 0 100%, 0 var(--cut-in));
}

.tel-button:hover,
.tel-button:focus-visible {
  color: #fff;
  filter: drop-shadow(0 0 10px rgb(64 217 255 / 0.65));
}

.tel-button:hover::after,
.tel-button:focus-visible::after { background: rgb(16 66 88 / 0.95); }

/* De hoofdknop (naar de Store): vol cyaan */
.tel-button--primary { color: #021018; }
.tel-button--primary::before { background: var(--tel-cyan-bright); }
.tel-button--primary::after { background: linear-gradient(180deg, #5fe6ff, #20b8dd); }
.tel-button--primary:hover,
.tel-button--primary:focus-visible { color: #021018; }
.tel-button--primary:hover::after,
.tel-button--primary:focus-visible::after { background: linear-gradient(180deg, #9ef7ff, #47e0ff); }

/* ---------- Knoppen van de controller in de tekst: [A], [X], ☰ */

.tel-key {
  display: inline-block;
  min-width: 1.9em;
  padding: 0.05em 0.45em;
  font-family: var(--tel-font-display), "TEL Symbolen";
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--tel-cyan-bright);
  background: rgb(71 224 255 / 0.08);
  border: 1px solid var(--tel-border-strong);
  border-radius: 3px;
  white-space: nowrap;
  vertical-align: 0.08em;
}

/* ---------- Rasters */

.tel-grid {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.tel-split {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

/* ---------- Een licht: kaart met de kleur van dat licht */

.tel-light {
  --light: var(--light-white);
  position: relative;
  padding: 20px 20px 22px 24px;
  background:
    radial-gradient(120% 70% at 0 0, color-mix(in srgb, var(--light) 16%, transparent), transparent 70%),
    var(--tel-card);
  border-left: 3px solid var(--light);
  box-shadow: -4px 0 18px -6px color-mix(in srgb, var(--light) 70%, transparent);
}

.tel-light__name {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 0.5em;
  font-family: var(--tel-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light);
  text-shadow: 0 0 10px color-mix(in srgb, var(--light) 60%, transparent);
}

/* De lens: een gloeiende stip in de kleur van het licht */
.tel-light__name::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--light);
  box-shadow: 0 0 6px var(--light), 0 0 18px var(--light);
  flex: none;
}

.tel-light__night {
  font-family: var(--tel-font-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--tel-text-3);
  margin-left: auto;
}

.tel-light p { margin-bottom: 0.5em; }

.tel-light--white  { --light: var(--light-white); }
.tel-light--red    { --light: var(--light-red); }
.tel-light--uv     { --light: var(--light-uv); }
.tel-light--ir     { --light: var(--light-ir); }
.tel-light--strobe { --light: var(--light-strobe); }
.tel-light--green  { --light: var(--light-green); }

/* UV is donker op zwart: de naam iets lichter voor het contrast */
.tel-light--uv .tel-light__name { color: #a67dff; }

/* ---------- Tabel (bediening) */

.tel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
}

.tel-table caption {
  text-align: left;
  font-family: var(--tel-font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tel-cyan);
  padding-bottom: 0.8rem;
}

.tel-table th,
.tel-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--tel-border);
}

.tel-table th {
  width: 42%;
  color: var(--tel-text);
  font-weight: 600;
}

.tel-table td { color: var(--tel-text-2); }

/* ---------- Melding (let op) */

.tel-notice {
  --c: var(--tel-warning);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 7%, transparent);
}

.tel-notice__label {
  font-family: var(--tel-font-display);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c);
  padding-top: 0.2rem;
}

.tel-notice p { margin: 0; color: var(--tel-text); }
.tel-notice--danger { --c: var(--tel-danger); }
.tel-notice--seam { --c: var(--tel-seam); }

/* ---------- Spoiler: dicht tot je hem opent */

.tel-spoiler {
  border: 1px solid var(--tel-border);
  background: var(--tel-card);
}

.tel-spoiler > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-family: var(--tel-font-display);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tel-dream);
}

.tel-spoiler > summary::-webkit-details-marker { display: none; }
.tel-spoiler > summary::before { content: "+ "; }
.tel-spoiler[open] > summary::before { content: "− "; }
.tel-spoiler > div { padding: 0 20px 18px; }

/* ---------- Veelgestelde vragen */

.tel-faq details { border-bottom: 1px solid var(--tel-border); }

.tel-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 0;
  color: var(--tel-text);
  font-size: 1.15rem;
}

.tel-faq summary::-webkit-details-marker { display: none; }
.tel-faq summary::after { content: "+"; float: right; color: var(--tel-cyan); font-family: var(--tel-font-display); }
.tel-faq details[open] summary::after { content: "−"; }
.tel-faq details > p { padding-bottom: 1rem; }

/* ---------- Formulier (contact) */

.tel-form { display: grid; gap: 18px; }

.tel-field { display: grid; gap: 6px; }

.tel-field label,
.tel-field legend {
  font-family: var(--tel-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tel-cyan);
}

.tel-field .tel-optional { color: var(--tel-text-3); letter-spacing: 0.1em; text-transform: none; font-family: var(--tel-font-body); font-size: 0.95rem; }

.tel-field input,
.tel-field select,
.tel-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--tel-text);
  background: rgb(3 9 15 / 0.9);
  border: 1px solid var(--tel-border-strong);
  border-radius: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tel-field textarea { min-height: 160px; resize: vertical; }
.tel-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tel-cyan) 50%), linear-gradient(135deg, var(--tel-cyan) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.tel-field ::placeholder { color: var(--tel-text-3); }

.tel-field input:focus,
.tel-field select:focus,
.tel-field textarea:focus {
  outline: none;
  border-color: var(--tel-cyan-bright);
  box-shadow: 0 0 0 1px var(--tel-cyan-bright), 0 0 16px rgb(71 224 255 / 0.35);
}

.tel-field [aria-invalid="true"] { border-color: var(--tel-danger); }
.tel-field__error { color: var(--tel-danger); font-size: 1rem; }
.tel-form__note { color: var(--tel-text-3); font-size: 1rem; }
.tel-form__ok { color: var(--tel-seam); text-shadow: 0 0 8px rgb(102 255 184 / 0.4); }

/* Het lokveld voor spam: onzichtbaar voor mensen */
.tel-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Het Schrift als scheiding */

.tel-schrift {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin: 2rem auto;
  opacity: 0.85;
}

/* ---------- Galerij (screenshots) */

.tel-shots {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.tel-shots figure { margin: 0; }

.tel-shots img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--tel-border);
}

.tel-shots figcaption { font-size: 0.95rem; color: var(--tel-text-3); padding-top: 0.4rem; }

/* ---------- Het donker en je zaklamp (optioneel, voor de bovenkant van de pagina)
   De afbeelding staat donker; waar je muis of vinger is, schijnt een lichtbundel.
   Werkt met een paar regels JavaScript (zie voorbeeld.html). Zonder JavaScript of
   met "minder beweging" staat de bundel stil in het midden. */

.tel-torch {
  --x: 50%;
  --y: 45%;
  --r: clamp(160px, 26vw, 360px);
  position: relative;
  overflow: hidden;
  background: #000;
}

.tel-torch__dark,
.tel-torch__lit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tel-torch__dark { filter: brightness(0.22) saturate(0.7); }

.tel-torch__lit {
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgb(0 0 0 / 0.85) 45%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgb(0 0 0 / 0.85) 45%, transparent 100%);
}

.tel-torch__content {
  position: relative;
  z-index: 1;
  min-height: min(92vh, 860px);
  display: grid;
  align-content: end;
  padding-block: 120px 64px;
  background: linear-gradient(to bottom, transparent 40%, rgb(1 4 7 / 0.85) 85%, var(--tel-night));
}

.tel-torch__content p { max-width: 42em; }

/* Op een telefoon staat de tekst onder het beeld: de bundel schijnt dan hoger */
@media (max-width: 700px) {
  .tel-torch { --y: 20%; --r: 200px; }
  .tel-torch__content { padding-top: 240px; }
}

/* ---------- Kleine hulpjes */

.tel-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.6rem 0 1rem; }
.tel-small { font-size: 0.95rem; color: var(--tel-text-3); }

.tel-hero__logo {
  width: min(100%, 760px);
  margin: 0 0 1.4rem;
  filter: drop-shadow(0 0 24px rgb(71 224 255 / 0.25));
}

.tel-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border: 1px solid var(--tel-border);
}

.tel-list { padding-left: 1.2em; margin: 0 0 1em; }
.tel-list li { margin: 0.35em 0; color: var(--tel-text-2); }
.tel-list li::marker { color: var(--tel-cyan); }

/* Genummerde stappen: 01, 02, 03 in Orbitron */
.tel-steps { counter-reset: tel-step; list-style: none; padding: 0; margin: 0 0 1em; }
.tel-steps li { counter-increment: tel-step; position: relative; padding-left: 3rem; margin: 0 0 1rem; color: var(--tel-text-2); }
.tel-steps li::before {
  content: counter(tel-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--tel-font-display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--tel-cyan);
}

/* Een sectie op een band van glas, om secties af te wisselen */
.tel-section--glass {
  background: linear-gradient(to bottom, transparent, rgb(3 9 15 / 0.75) 10%, rgb(3 9 15 / 0.75) 90%, transparent);
}

/* ---------- Minder beweging: geen animaties */

@media (prefers-reduced-motion: reduce) {
  .tel-panel::after { animation: none; }
  .tel-button,
  .tel-button::after { transition: none; }
}