/* =====================================================================
   INDEX  --  landingspagina van de gehoste overlay

   Deze pagina moet niet vertellen hoe het thema eruitziet, hij moet het
   laten zien: de previews zijn de echte pagina's op ontwerpmaat (2560
   breed), geschaald naar de breedte die ze hier krijgen. Geen screenshots,
   dus ook niets dat verouderd raakt zodra de overlay verandert.

   De vormtaal komt uit css/ribbon.css: kaarten met een afgesneden hoek en
   het bijschrift als tag op de rand. Zelfde palet en typografie als de
   overlay, want dit ís de overlay.
   ===================================================================== */

/* tokens.css zet body{overflow:hidden}, want elke overlay-pagina is een vast
   doek dat nooit mag scrollen. Deze pagina wel. overflow-x:hidden alleen was
   niet genoeg: dat overschrijft alleen de x-as en laat de y-as op hidden
   staan, waardoor de pagina muurvast zat. */
html{background:var(--ink-900);overflow-x:hidden}
body{background:var(--ink-900);color:var(--paper);overflow:visible}

/* Breder dan een leespagina, want het zwaartepunt is niet tekst maar
   beeld: een overlay van 2560 breed en banners van 1920. De tekstblokken
   hebben hun eigen max in ch, dus die worden er niet onleesbaar van. */
.page{max-width:1680px;margin:0 auto;padding:72px 40px 96px;
  display:flex;flex-direction:column;gap:64px}

a{color:var(--jade);text-decoration-color:rgba(63,217,164,.4);
  text-underline-offset:3px}
a:hover{text-decoration-color:var(--jade)}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px}
code{font-family:var(--f-mono);font-size:.92em;color:var(--paper-dim)}

/* ---- kop ------------------------------------------------------------ */
.head{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.head .rib{margin-bottom:0}
/* Kanaalnaam links, taalkeuze rechts, op één regel boven de titel. */
.head__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  align-self:stretch;margin-bottom:26px}

/* ---- taalkeuze ------------------------------------------------------
   Twee knoppen in de vorm van de kopieerknop, tegen elkaar aan. De actieve
   staat in jade, zoals een ingedrukte kopieerknop. */
.lang{display:inline-flex;gap:3px}
.lang button{
  font-family:var(--f-display);font-size:12px;font-weight:700;
  letter-spacing:.14em;color:var(--ink-300);background:var(--ink-800);
  border:0;cursor:pointer;padding:9px 15px;min-width:48px;
  clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang button:hover{background:var(--ink-700);color:var(--paper-dim)}
.lang button[aria-pressed="true"]{background:var(--jade);color:var(--ink-900)}
.lang button:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
.head h1{
  font-size:clamp(38px,5.6vw,60px);font-weight:600;line-height:1.02;
  letter-spacing:-.032em;
}
.lead{
  margin-top:20px;max-width:64ch;
  font-size:20px;font-weight:300;line-height:1.55;color:var(--paper-dim);
}
.base{margin-top:26px;font-size:13px;color:var(--ink-400);
  letter-spacing:.14em;text-transform:uppercase}
.base b{font-family:var(--f-mono);font-size:14px;font-weight:500;
  color:var(--jade);letter-spacing:0;text-transform:none;margin-left:8px}

/* ---- hero: de overlay in zijn eigen verhoudingen --------------------
   De zones staan in de gewone stroom en krijgen de geschaalde hoogte van
   het origineel, dus de 120 / 1072 / 248-verdeling klopt automatisch. */
.hero{display:flex;flex-direction:column;gap:22px}
.hero__frame{
  --s:1;
  position:relative;width:100%;overflow:hidden;
  background:var(--ink-900);border:1px solid var(--ink-700);
}
.zone{position:relative;overflow:hidden}
.zone iframe{
  display:block;width:2560px;border:0;background:transparent;
  transform:scale(var(--s));transform-origin:0 0;
}
.zone--top    {height:calc(120px  * var(--s))}
.zone--top    iframe{height:120px}
/* Het gameplay-vlak is hier leeg -- daar ligt op je stream je Game Capture.
   Een egaal zwart vlak van 500px leest als een gat in de pagina, dus een
   arcering erin: dat leest als 'hier komt iets'. Verlopen mogen op deze
   pagina wel; die wordt niet door een encoder geperst. */
.zone--game   {height:calc(1072px * var(--s));
  /* Alleen de grondkleur hier: die is dekkend en hoort dus onder de video.
     De arcering zit in ::before, boven de video, zodat het vlak ook met
     echte gameplay erin nog leest als de plek waar je spel komt. */
  background:var(--ink-850);
  /* Onderaan, niet gecentreerd en niet bovenaan: in het midden schemert dit
     labeltje door de bossnaam van een raidmelding heen, en bovenaan zit het
     tegen de gewone alerts aan -- die komen daar altijd langs. Onder is
     permanent vrij. */
  display:grid;place-items:end center;padding-bottom:14px}
.zone--game::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(-45deg,
    rgba(63,217,164,.07) 0 2px, transparent 2px 15px);
}
.zone--bottom {height:calc(248px  * var(--s))}
.zone--bottom iframe{height:248px;position:relative;z-index:1}

/* Stapeling in de gameplayzone: video onderop, dan de alertlaag, dan het
   maatlabeltje. De alertlaag heeft dezelfde maat als de zone (2560x1072),
   dus hij valt precies samen met wat OBS erover legt. */
.zone--game .zone__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;
}
.zone--game iframe{position:absolute;left:0;top:0;height:1072px;z-index:2}
.zone--game .zone__tag{position:relative;z-index:3}

/* Als tagje, niet als kale tekst: hier ligt echte gameplay onder en dan
   verdwijnt donkergrijs op donkergrijs. Zelfde idioom als de bijschriften
   op de kaarten -- eigen grond, dunne rand, hoofdletters. */
.zone__tag{
  display:inline-flex;align-items:center;padding:5px 13px;
  background:#0a0b0de6;border:1px solid var(--ink-600);border-radius:5px;
  font-size:11px;font-weight:700;color:var(--ink-200);
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
.zone__tag b{font-family:var(--f-mono);font-weight:500;letter-spacing:.06em;
  color:var(--jade);margin-left:10px}

/* Het cameravlak is een gat in de onderbalk. Hier ligt geen webcam achter,
   dus zetten we er zelf iets neer -- anders lijkt het een lek. */
.cam-ghost{
  position:absolute;z-index:0;
  left:calc(24px * var(--s));bottom:calc(24px * var(--s));
  width:calc(340px * var(--s));height:calc(200px * var(--s));
  display:grid;place-items:center;background:var(--ink-850);
  font-size:10px;font-weight:600;color:var(--ink-600);
  letter-spacing:.2em;text-transform:uppercase;
}

/* Eén maat voor lopende tekst op deze pagina, en een krappere voor
   bijschriften. Er stonden er vier naast elkaar (70, 72, 74, 78ch), en dat
   zie je: blokken die bijna even breed zijn lezen als scheef in plaats van
   als verschillend. */
.hero__note{max-width:72ch;font-size:16px;line-height:1.6;color:var(--ink-300)}

/* ---- kaarten -------------------------------------------------------- */
.card .rcard__in{padding:30px 34px 36px}
.card p{font-size:16px;line-height:1.6;color:var(--ink-300);max-width:72ch}
.card p + p{margin-top:14px}

/* Volle breedte met tekst in één kolom laat de kaart half leeg staan, en
   over 1100px wordt de regel te lang om te lezen. Twee kolommen dus. */
.card--wide .rcard__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 40px}
.card--wide p{max-width:70ch}
.card--wide p + p{margin-top:0}
.hint{margin-top:22px}
.hint b{color:var(--paper-dim);font-weight:600}

/* minmax(0,1fr) en niet 1fr: een fr-track heeft min-width:auto, en dan
   blaast een iframe van 2560px breed de kolom op naar 2560px. Zelfde val
   als min-height:auto bij een grid-item. */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}

/* ---- installatiestappen ---------------------------------------------
   Genummerd omdat dit werkelijk een reeks is: de canvasmaat moet staan
   voordat de bronnen landen, en de stinger kan pas na de import. Bij een
   opsomming die geen volgorde heeft horen die cijfers er niet.

   Het cijferblok staat in kolom 1 over alle rijen, dus moeten de kinderen
   expliciet naar kolom 2 -- anders vult grid ze rij voor rij en belandt de
   eerste alinea onder het cijfer. */
.steps{list-style:none;counter-reset:step;margin-top:24px;
  display:flex;flex-direction:column;gap:28px}

/* Breed genoeg: twee kolommen, om dezelfde reden als card--wide hierboven.
   Een stap is hooguit 70ch, dus in een kaart van 1600 stond de helft leeg
   en werd de pagina een scherm langer dan nodig. Kolomsgewijs lezen kan
   hier omdat de stappen genummerd zijn; bij een lijst zonder volgorde zou
   dat niet mogen. Drempel op 1280: daaronder houdt een kolom nog maar een
   regel of vijftig tekens over, en dan is smal lezen erger dan leeg staan. */
@media(min-width:1280px){
  .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 52px;align-items:start}
}
.steps li{counter-increment:step;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px}
.steps li > *{grid-column:2}
.steps li::before{
  content:counter(step);grid-column:1;grid-row:1 / -1;
  width:34px;height:34px;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:15px;font-weight:500;
  color:var(--jade);background:var(--jade-ghost);
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.steps h3{font-size:17px;font-weight:600;color:var(--paper);
  margin:6px 0 8px;letter-spacing:-.01em}
.steps p{font-size:16px;line-height:1.6;color:var(--ink-300);max-width:70ch}
.steps p + p{margin-top:10px}
.steps i{font-style:normal;color:var(--paper-dim)}

/* ---- brontabel ------------------------------------------------------ */
.scroll{overflow-x:auto}
.srcs{border-collapse:collapse;width:100%;min-width:640px}
.srcs th{
  text-align:left;padding:0 18px 12px 0;
  font-size:10px;font-weight:700;color:var(--ink-400);
  letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--ink-700);
}
.srcs td{padding:13px 18px 13px 0;font-size:16px;
  border-bottom:1px solid var(--ink-750)}
.srcs tr:last-child td{border-bottom:0}
.srcs td:first-child{font-weight:600;white-space:nowrap}
.srcs td i{font-style:normal;color:var(--ink-400)}
.t-mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:14px;color:var(--paper-dim);white-space:nowrap}

/* De laatste drie regels zijn geen browser source; die dempen we, anders
   ga je er een URL bij zoeken. */
.srcs--other td:first-child{font-weight:400;color:var(--ink-300)}
.srcs--other .t-mono{color:var(--ink-400)}

.copy{
  font-family:var(--f-display);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--jade);background:var(--ink-750);border:0;cursor:pointer;
  padding:8px 16px;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.copy:hover{background:var(--ink-700)}
.copy.ok{background:var(--jade);color:var(--ink-900)}

/* ---- schermen ------------------------------------------------------- */
.screens h2{
  font-size:13px;font-weight:700;color:var(--ink-400);
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:22px;
}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.shot{min-width:0}
.shot__box{
  --s:1;--h:1440;
  position:relative;width:100%;overflow:hidden;
  background:var(--ink-900);border:1px solid var(--ink-700);
  height:calc(var(--h) * 1px * var(--s));
}
.shot__box iframe{
  display:block;width:2560px;height:calc(var(--h) * 1px);
  border:0;background:transparent;
  transform:scale(var(--s));transform-origin:0 0;
}
.shot figcaption{margin-top:12px;font-size:14px;color:var(--ink-400)}

/* De vergelijkpagina is geen overlaypagina op ontwerpmaat: hij is niet 2560
   breed en hoeft dus niet geschaald te worden zoals de previews hierboven.
   Hij krijgt gewoon de breedte die hij hier heeft en vult zichzelf. */
.board{width:100%;height:600px;overflow:hidden;
  background:var(--ink-900);border:1px solid var(--ink-700)}
.board iframe{display:block;width:100%;height:100%;border:0}
/* de regel onder de previews plakte tegen het laatste bijschrift aan */
.screens .hero__note{margin-top:30px}

/* ---- kanaalgraphics ------------------------------------------------- */
/* 1,6fr naast 1fr is geen willekeurige verhouding: het offline-scherm is
   1920 breed en de profile banner 1200, en 1920/1200 is precies 1,6. Zo
   staan ze op dezelfde schaal in beeld in plaats van op dezelfde breedte.
   Onderaan uitlijnen, dan vormen de bijschriften één regel. */
.assets{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:26px}
.assets .asset{display:flex;flex-direction:column;justify-content:flex-end}
.asset{min-width:0;margin:0}
.asset + .asset{margin-top:26px}
.asset a{display:block;line-height:0;border:1px solid var(--ink-700);
  background:var(--ink-900)}
.asset img{width:100%;height:auto;display:block}
.asset figcaption{margin-top:12px;font-size:14px;line-height:1.5;
  color:var(--ink-400);max-width:66ch}

/* De knoppen op hun eigen maat, met een rand eromheen zodat je ziet waar het
   transparante doek van 320x100 begint. */
/* Het infopaneel is staand en 320 breed; op zijn eigen maat laten staan,
   want uitgerekt tot kolombreedte is het een affiche in plaats van een
   paneel. */
.asset--info{display:flex;margin-top:30px;flex-direction:row;gap:28px;
  align-items:flex-end;max-width:1040px}
.asset--info a{flex:0 0 320px;max-width:320px}
.asset--info figcaption{margin-top:0}
@media(max-width:720px){
  .asset--info{flex-direction:column;align-items:stretch}
  .asset--info a{flex:0 0 auto;max-width:320px}
}

/* ---- characterrij ---------------------------------------------------
   De onderbalk laat er twee tegelijk zien en rouleert; hier staan ze naast
   elkaar. auto-fit in plaats van vijf vaste kolommen, zodat het aantal
   characters uit je config mag groeien en de rij op een smal scherm vanzelf
   afbreekt in plaats van in een media query vastgelegd te zijn. */
.roster{display:flex;flex-wrap:wrap;gap:18px}
/* Meebuigen maar niet uitdijen. Een grid met auto-fit leek logischer, tot
   Raider.IO een keer drie van de vijf niet beantwoordde: de twee die er wel
   waren rekten zich toen over de halve pagina uit. Met een maximum houdt een
   halve rij dezelfde kaartmaat als een hele. */
.ros{flex:1 1 196px;max-width:300px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;padding:26px 16px 22px;
  background:var(--ink-800);border:1px solid var(--ink-700)}
/* Nog niets binnen: een plek van dezelfde hoogte, zodat de rij niet
   opspringt zodra Raider.IO antwoordt. */
.ros--wait{min-height:248px}
.ros__pic{position:relative;width:96px;height:96px;flex:0 0 96px}
.ros__pic img{position:absolute;inset:7px;width:82px;height:82px;
  border-radius:50%;object-fit:cover;background:var(--ink-700)}
.ros__pic svg{position:absolute;inset:0;width:96px;height:96px}
/* Zelfde ring als in de onderbalk: klassekleur op een klein vlak, de rest
   blijft grijs. */
.ros__pic circle{fill:none;stroke:var(--jade);stroke-width:2.5;
  stroke-dasharray:210 92;stroke-linecap:round;
  transform:rotate(-96deg);transform-origin:50% 50%}
.ros__nm{font-size:19px;font-weight:600;color:var(--paper);line-height:1.15}
.ros__sp{font-size:13px;color:var(--paper-dim);margin-top:2px}
.ros__rl{font-size:12px;color:var(--ink-400);font-family:var(--f-mono);
  margin-top:3px}
.ros__st{display:flex;gap:20px;margin-top:2px}
.ros__st b{display:block;font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;font-size:17px;font-weight:500;
  color:var(--paper)}
.ros__st i{font-style:normal;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-400)}

.panels{display:flex;flex-wrap:wrap;gap:14px 18px;margin-bottom:2px}
.panels a{border:1px solid var(--ink-750);line-height:0}
.panels img{width:320px;height:100px}

/* ---- emotes ---------------------------------------------------------
   Op Twitch' donkere chatkleur en niet op ons palet: daar komen ze te staan.
   Op hun eigen 112, want opgeschaald zie je een tekening die niemand in chat
   te zien krijgt. */
.emotes{display:flex;flex-wrap:wrap;gap:26px 34px}
.emotes__group{display:flex;flex-direction:column;gap:10px}
.emotes__slot{font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--jade)}
.emotes__row{display:flex;flex-wrap:wrap;gap:10px}
.emote{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 12px 10px;background:#18181b;border:1px solid var(--ink-700)}
.emote a{line-height:0}
.emote img{display:block;width:112px;height:112px}
.emote figcaption{font-family:var(--f-mono);font-size:12px;color:var(--ink-300)}
.emote figcaption b{color:var(--gold);font-weight:500}

/* ---- feitenlijstjes ------------------------------------------------- */
.facts{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;
  font-size:15px;align-items:baseline}
.facts dt{font-weight:600;color:var(--paper-dim);white-space:nowrap}
.facts dd{color:var(--ink-300)}

/* ---- voet ----------------------------------------------------------- */
.foot{display:flex;flex-wrap:wrap;gap:14px 34px;
  padding-top:34px;border-top:1px solid var(--ink-700);font-size:15px}

@media (max-width:900px){
  .page{padding:44px 22px 64px;gap:48px}
  .cols,.grid,.assets{grid-template-columns:minmax(0,1fr)}
  .lead{font-size:18px}
  /* Daar staan de twee bronnen onder elkaar in plaats van naast elkaar. */
  .board{height:880px}
}