/* ============================================================
   CORPORATION HEADQUARTERS — het hoofdkantoor van één corporation
   ------------------------------------------------------------
   Een plattegrond van bovenaf, liggend A4 (T.hoofdkantoor in
   js/templates.js). Bovenin drie werkplekken, onderin het kantoor van
   de CEO; links de vergaderzaal, de kluis en de koffiehoek, rechts de
   lobby met het logo in de vloer en de sas.

   Elke pas ligt in een sleeve met een bureau erop geplakt, over de
   helft die je niet ziet. De bureaus worden los geprint
   (T.hoofdkantoorBureau), en staan als voorbeeld ook op het bord. De
   vakken rekenen met de maten van de sleeve uit css/tokens.css; de rest
   van de tekening is één SVG in millimeters. Het hele bord staat in
   var(--mm): tekening en vakken volgen samen de kalibratie, zodat de
   sleeves erop passen en de token op zijn plek.

   In de stijl van het spel: metalen muren met een schuine rand, gedempte
   kleuren en licht van linksboven. Dat licht zijn witte en zwarte
   vlakken met opacity (glans, randen, schaduw); die printen gewoon, een
   doorzichtig verloop niet. De spelerskleur loopt als streep door alle
   muren en zit in de deuren, de stoelen, de kleden en alles wat de
   corporation zelf heeft laten maken.
   ============================================================ */
/* De maten, voor het bord, de losse kamers en de losse bureaus. */
.hq, .hq-kamer, .hq-losbureau{
  --hq-helft: calc((var(--card-h) - var(--wn-strip-h)) / 2);   /* 36,5 mm: onder het bureau */
  --hq-zicht: calc(var(--card-h) - var(--hq-helft));          /* 51,5 mm: wat je ziet      */
  /* Hoe hoog een bureau is (van de dichte kant van de sleeve tot de
     strook) en hoe breed een vak. */
  --hq-zak:   calc(var(--hq-naad) + var(--hq-helft));
  --hq-vak-w: calc(var(--hq-sleeve-w) + 2 * var(--hq-speling));
  --hq-stap:  calc(92 * var(--mm));   /* van werkplek tot werkplek            */
  --hq-rug:   calc(10 * var(--mm));   /* tussen de passen boven en onder: de muur */
}
/* De tinten die uit de spelerskleur volgen (bij een losse kamer: uit
   de kleur van de kamer). */
.hq, .hq-kamer, .hq-losbureau{
  --hq-kleur-diep:  color-mix(in srgb, var(--speler) 72%, var(--ink));
  --hq-kleur-licht: color-mix(in srgb, var(--speler) 45%, var(--wn-wit));
  --hq-kleur-zacht: color-mix(in srgb, var(--speler) 22%, var(--hq-zaal));
  --hq-kleed:       color-mix(in srgb, var(--speler) 38%, var(--hq-donker));
}
.hq{
  position:relative; box-sizing:border-box; flex:0 0 auto;
  width:calc(281 * var(--mm)); height:calc(194 * var(--mm));
  border-radius:calc(2 * var(--mm));
  overflow:hidden;
  background:var(--hq-muur);
}
.hq--blauw{ --speler:var(--speler-blauw); }
.hq--zwart{ --speler:var(--speler-zwart); }
.hq--groen{ --speler:var(--speler-groen); }
.hq--rood { --speler:var(--speler-rood); }
.hq--geel { --speler:var(--speler-geel); }

/* ---------- De extra kamers ----------
   Losse werkplekken van 96 x 98 mm (T.hoofdkantoorKamer): zo groot als
   een werkplek op het bord, met eigen muren eromheen. Elke kamer heeft
   een eigen kleur die geen speler heeft; die staat in --speler, zodat
   alles van het bord hier ook werkt. Het vak staat tegen de noordmuur. */
.hq-kamer{
  position:relative; box-sizing:border-box; flex:0 0 auto;
  width:calc(96 * var(--mm)); height:calc(98 * var(--mm));
  border-radius:calc(2 * var(--mm));
  overflow:hidden;
  background:var(--hq-muur);
}
.hq-kamer .hq__vak--mw{ top:calc(3 * var(--mm)); }
.hq-kamer--architect    { --speler:var(--kamer-turkoois); }
.hq-kamer--biodome      { --speler:var(--kamer-roze); }
.hq-kamer--maquette     { --speler:var(--kamer-wit); }
.hq-kamer--crisis       { --speler:var(--kamer-oranje); }
.hq-kamer--observatorium{ --speler:var(--kamer-paars); }
.hq-kamer--inslag       { --speler:var(--kamer-brons); }
.hq-kamer--golf         { --speler:var(--kamer-goud); }
/* Het extra CEO-kantoor (de golfbaan): het bureau ligt onderaan. */
.hq-kamer .hq__vak--ceo{ top:calc(7 * var(--mm)); }

.hq__plan{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ---------- De vakken: de plek van de pas en van zijn bureau ---------- */
.hq__vak{
  position:absolute; z-index:1;
  left:calc(50% - var(--hq-vak-w) / 2 + var(--i, 0) * var(--hq-stap));
  width:var(--hq-vak-w);
  height:calc(var(--hq-zicht) + var(--hq-zak));
  display:flex; flex-direction:column;
}
.hq__vak--mw { top:calc(50% - var(--hq-rug) / 2 - var(--hq-zicht) - var(--hq-zak)); flex-direction:column-reverse; }
.hq__vak--ceo{ top:calc(50% + var(--hq-rug) / 2); }

.hq__plek{ position:relative; flex:0 0 var(--hq-zicht); overflow:hidden; }
.hq__hoes{ position:relative; flex:0 0 var(--hq-zak); display:flex; justify-content:center; }
.hq__plek > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* De omtrek van de pas: waar hij komt te liggen. */
.hq__plek::after{
  content:""; position:absolute; z-index:2; top:0; bottom:0;
  left:calc((var(--hq-vak-w) - var(--card-w)) / 2); width:var(--card-w);
  box-sizing:border-box;
  border:calc(0.3*var(--mm)) dashed var(--hq-omtrek);
}
.hq__vak--ceo .hq__plek::after{ border-bottom:0; border-radius:calc(4.4*var(--mm)) calc(4.4*var(--mm)) 0 0; }
.hq__vak--mw  .hq__plek::after{ border-top:0; border-radius:0 0 calc(4.4*var(--mm)) calc(4.4*var(--mm)); }

/* Een pas die er al ligt (de proef): de helft onder het bureau valt weg,
   en de omtrek ligt eronder. */
.hq__kaart{ position:absolute; z-index:3; left:calc((var(--hq-vak-w) - var(--card-w)) / 2); }
.hq__vak--ceo .hq__kaart{ top:0; }
.hq__vak--mw  .hq__kaart{ top:calc(-1 * var(--hq-helft)); }

/* Op elk bureau een stapeltje tags, van bovenaf: kleiner dan de tags op
   de kaarten, elk een beetje gedraaid en scheef (zie hqTagstapel in
   js/templates.js). Het stapeltje staat op zijn midden; een schaduw
   rondom houdt de tags los van elkaar. Een officiële tag knipt
   .tag--png al rond, zonder de witte hoeken; zijn schaduw moet hier met
   !important terug. */
.hq__tags{
  position:absolute; z-index:1; width:0; height:0;
  font-size:calc(1.85*var(--mm));
}
.hq__tag{ position:absolute; left:0; top:0; display:flex; }
/* Een donker randje rondom, getrapt in plaats van vervaagd
   (zie "Vervaagde schaduwen" in docs/ontwerpgids.md). */
.hq__tag .tag{
  box-shadow:0 0 0 calc(0.26*var(--mm)) rgba(0,0,0,.08),
             0 0 0 calc(0.09*var(--mm)) rgba(0,0,0,.19) !important;
}

/* ---------- Een bureau, om op de sleeve te plakken ----------
   Zo breed als de sleeve en zo hoog als de helft die eronder
   verdwijnt. Aan de kant van de strook een licht randje, zoals bovenop
   de strook: daar komt de rand van de strook. */
.hq-sticker{
  position:relative; flex:0 0 auto;
  width:var(--hq-sleeve-w); height:var(--hq-zak);
}
.hq-sticker > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hq-sticker::after{
  content:""; position:absolute; left:0; right:0;
  height:calc(0.5*var(--mm)); background:var(--hq-snede);
}
.hq-sticker--mw::after { bottom:0; }
.hq-sticker--ceo::after{ top:0; }
/* Een bureau met een vrije vorm (de meteoor) knip je langs zijn eigen
   rand: geen randje, en een eigen knipstreep. Onderaan steekt hij een
   fractie over de strook, en ligt hij dus boven de pas. */
.hq-sticker--vrij{ z-index:4; }
.hq-sticker--vrij > svg{ overflow:visible; }
.hq-sticker--vrij::after{ display:none; }

/* Een los bureau, om te printen (T.hoofdkantoorBureau): in de kleur
   van zijn speler (.hq--blauw…) of van zijn kamer (.hq-kamer--biodome…).
   De meteoor steekt onderaan een fractie uit; daar is ruimte voor, zodat
   er niets naast komt te liggen. Op het printvel krijgt hij zijn eigen
   knipstreep (css/print.css). */
.hq-losbureau{ display:flex; }
.hq-losbureau .hq-sticker--vrij{ margin-bottom:calc(2 * var(--mm)); }

/* ---------- Het logo in de lobby: hier komt de token ----------
   Precies 6 cm; de ring in de spelerskleur ligt erbuiten, zodat je hem
   om de token heen ziet. De streepjes eromheen zijn de tekening. */
.hq__token{
  position:absolute; z-index:1;
  width:var(--hq-token); height:var(--hq-token);
  left:calc(233 * var(--mm) - var(--hq-token) / 2);
  top:calc(145 * var(--mm) - var(--hq-token) / 2);
  border-radius:50%;
  background:var(--hq-wit);
  box-shadow:0 0 0 calc(0.35*var(--mm)) var(--hq-kleur-licht),
             0 0 0 calc(1.4*var(--mm)) var(--hq-steen),
             0 0 0 calc(3.2*var(--mm)) var(--speler),
             0 0 0 calc(3.6*var(--mm)) var(--hq-kleur-diep);
  display:flex; align-items:center; justify-content:center;
}
.hq__token span{
  font:600 calc(2.2*var(--mm))/1 var(--font-display);
  letter-spacing:.24em; padding-left:.24em; text-transform:uppercase;
  color:var(--hq-kleur-diep);
}

/* ---------- De tekening ----------
   In de SVG is een px een millimeter. */
.hq-sch{ fill:var(--ink); opacity:.18; }
.hq-glans{ fill:var(--wn-wit); opacity:.12; }
.hq-rand-licht{ fill:none; stroke:var(--wn-wit); stroke-width:.3; opacity:.4; }
.hq-rand-donker{ fill:none; stroke:var(--ink); stroke-width:.3; opacity:.3; }
.hq-rand-bol{ fill:none; stroke:var(--ink); stroke-width:.3; opacity:.25; }

/* muren, ramen, opschriften */
.hq-muur{ fill:var(--hq-muur); }
.hq-muur-licht{ fill:var(--wn-wit); opacity:.2; }
.hq-muur-donker{ fill:var(--ink); opacity:.4; }
.hq-streep-rand{ fill:var(--hq-muur-tekst); opacity:.55; }
.hq-klinknagel{ fill:var(--hq-staal); }
.hq-raam{ fill:var(--hq-raam); }
.hq-raam-licht{ fill:var(--hq-raam-licht); }
.hq-muurtekst{
  font-family:var(--font-display); font-weight:600; font-size:1.85px; letter-spacing:.32px;
  fill:var(--hq-muur-tekst); text-anchor:middle; dominant-baseline:central;
}

/* vloeren */
.hq-tegel{ fill:var(--hq-tegel); }
.hq-voeg{ fill:none; stroke:var(--hq-voeg); stroke-width:.22; }
.hq-bout{ fill:var(--hq-bout); }
.hq-beton{ fill:var(--hq-beton); }
.hq-beton-2{ fill:var(--hq-beton-2); }
.hq-beton-3{ fill:var(--hq-beton-3); }
.hq-betonnaad{ fill:none; stroke:var(--hq-beton-2); stroke-width:.3; }
.hq-olie{ fill:var(--ink); opacity:.1; }
.hq-tapijt{ fill:var(--hq-tapijt); }
.hq-tapijt-2{ fill:var(--hq-tapijt-2); }
.hq-parket{ fill:var(--hq-parket); }
.hq-parketnaad{ fill:none; stroke:var(--hq-parket-naad); stroke-width:.2; }
.hq-steen{ fill:var(--hq-steen); }
.hq-steennaad{ fill:none; stroke:var(--hq-steen-naad); stroke-width:.25; }
.hq-zaal{ fill:var(--hq-zaal); }
.hq-kluisvloer{ fill:var(--hq-kluisvloer); }
.hq-ribbel{ fill:none; stroke:var(--hq-ribbel); stroke-width:.35; stroke-linecap:round; }
.hq-pantry{ fill:var(--hq-pantry); }

/* de spelerskleur */
.hq-kleur{ fill:var(--speler); }
.hq-kleur-diep{ fill:var(--hq-kleur-diep); }
.hq-kleur-zacht{ fill:var(--hq-kleur-zacht); }
.hq-kleed{ fill:var(--hq-kleed); }
.hq-kleedlijn{ fill:none; stroke:var(--hq-kleur-licht); stroke-width:.35; }
.hq-kompas{ fill:none; stroke:var(--speler); stroke-width:.3; }
.hq-robotarm{ fill:none; stroke:var(--speler); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hq-kluiswiel{ fill:none; stroke:var(--speler); stroke-width:.7; }
.hq-kluisspaak{ fill:none; stroke:var(--speler); stroke-width:.45; }

/* materialen */
.hq-wit{ fill:var(--hq-wit); }
.hq-lichtgrijs{ fill:var(--hq-lichtgrijs); }
.hq-grijs{ fill:var(--hq-grijs); }
.hq-donkergrijs{ fill:var(--hq-donkergrijs); }
.hq-donker{ fill:var(--hq-donker); }
.hq-donker-2{ fill:var(--hq-donker-2); }
.hq-zwart{ fill:var(--hq-zwart); }
.hq-staal{ fill:var(--hq-staal); }
.hq-staal-donker{ fill:var(--hq-staal-donker); }
.hq-hout{ fill:var(--hq-hout); }
.hq-hout-licht{ fill:var(--hq-hout-licht); }
.hq-nerf{ fill:none; stroke:var(--hq-nerf); stroke-width:.2; }
.hq-walnoot{ fill:var(--hq-walnoot); }
.hq-walnoot-rand{ fill:var(--hq-walnoot-nerf); }
.hq-walnoot-nerf{ fill:none; stroke:var(--hq-walnoot-nerf); stroke-width:.25; }
.hq-goud{ fill:var(--hq-goud); }
.hq-glas{ fill:var(--hq-glas); }
.hq-papier{ fill:var(--hq-papier); }
.hq-papierlijn{ fill:none; stroke:var(--hq-papier-lijn); stroke-width:.15; }
.hq-koffie{ fill:var(--hq-koffie); }
.hq-geel{ fill:var(--hq-geel); }
.hq-rood{ fill:var(--hq-rood); }
.hq-blauw{ fill:var(--hq-blauw); }
.hq-rooster{ fill:none; stroke:var(--hq-grijs); stroke-width:.2; }
.hq-lade{ fill:none; stroke:var(--hq-lade); stroke-width:.25; opacity:.6; }

/* planten */
.hq-blad{ fill:var(--hq-blad); }
.hq-blad-licht{ fill:var(--hq-blad-licht); }
.hq-pot{ fill:var(--hq-pot); }
.hq-aarde{ fill:var(--hq-aarde); }

/* laboratorium */
.hq-lab{ fill:var(--hq-lab); }
.hq-fles-bruin{ fill:var(--hq-fles-bruin); }
.hq-fles-helder{ fill:var(--hq-fles-helder); }
.hq-fles-groen{ fill:var(--hq-fles-groen); }
.hq-fles-blauw{ fill:var(--hq-fles-blauw); }
.hq-dop{ fill:var(--hq-wit); }
.hq-agar{ fill:var(--hq-agar); }
.hq-kolonie{ fill:var(--hq-kolonie); }

/* werkplaats */
.hq-rotor{ fill:var(--hq-lichtgrijs); }
.hq-blad-rotor{ fill:none; stroke:var(--hq-donkergrijs); stroke-width:.6; stroke-linecap:round; }
.hq-blauwdruk{ fill:var(--hq-blauwdruk); }
.hq-blauwdruk-raster{ fill:none; stroke:var(--hq-blauwdruk-raster); stroke-width:.1; }
.hq-blauwdruk-lijn{ fill:none; stroke:var(--hq-wit); stroke-width:.35; }
.hq-helmrib{ fill:none; stroke:var(--ink); stroke-width:.4; opacity:.35; }
.hq-gevarenzone{ fill:none; stroke:var(--hq-geel); stroke-width:.55; stroke-dasharray:1.4 .9; }
.hq-band{ fill:var(--hq-zwart); }
.hq-band-profiel{ fill:var(--hq-donkergrijs); }

/* handelsvloer */
.hq-bureau{ fill:var(--hq-donker); }
.hq-scherm{ fill:var(--hq-scherm); }
.hq-koerslijn{ fill:none; stroke:var(--hq-koers-op); stroke-width:.45; stroke-linejoin:round; }
.hq-koers-op{ fill:var(--hq-koers-op); }
.hq-koers-neer{ fill:var(--hq-koers-neer); }
.hq-staaf{ fill:var(--hq-led-blauw); }
.hq-toets{ fill:var(--hq-wit); }
.hq-toets-donker{ fill:var(--hq-staal-donker); }
.hq-headset{ fill:none; stroke:var(--hq-zwart); stroke-width:.8; }
.hq-lijn-donker{ fill:none; stroke:var(--hq-grijs); stroke-width:.2; }
.hq-led-groen{ fill:var(--hq-koers-op); }
.hq-led-blauw{ fill:var(--hq-led-blauw); }
.hq-led-rood{ fill:var(--hq-koers-neer); }

/* CEO */
.hq-naambord{
  font-family:var(--font-display); font-weight:700; font-size:2.6px; letter-spacing:.5px;
  fill:var(--hq-walnoot); text-anchor:middle; dominant-baseline:central;
}
.hq-lampkap{ fill:var(--hq-lampkap); }
.hq-lampkap-licht{ fill:var(--hq-lampkap-licht); }
.hq-mars{ fill:var(--hq-mars); }
.hq-mars-donker{ fill:var(--hq-mars-donker); }
.hq-globe{ fill:none; stroke:var(--hq-goud); stroke-width:.35; }
.hq-ares-map{ fill:var(--wn-nacht); }

/* vergaderzaal, kluis, koffiehoek */
.hq-tafelrand{ fill:none; stroke:var(--hq-hout); stroke-width:.4; }
.hq-map{ fill:var(--hq-map); }
.hq-map-label{ fill:var(--hq-wit); }
.hq-map-tekst{
  font-family:var(--font-display); font-weight:700; font-size:1.5px; letter-spacing:.25px;
  fill:var(--hq-map-inkt); text-anchor:middle; dominant-baseline:central;
}
.hq-kluisdeur{ fill:var(--hq-staal-donker); }

/* lobby en sas */
.hq-balie{ fill:var(--hq-wit); }
.hq-vizier{ fill:var(--hq-goud); }
.hq-vloertekst{
  font-family:var(--font-display); font-weight:700; font-size:2.6px; letter-spacing:.6px;
  fill:var(--hq-zwart); text-anchor:middle; dominant-baseline:central;
}
/* de extra kamers: vloeren en inrichting */
.hq-visgraat{ fill:var(--hq-visgraat); }
.hq-visgraat-naad{ fill:none; stroke:var(--hq-visgraat-naad); stroke-width:.2; }
.hq-gras{ fill:var(--hq-gras); }
.hq-spriet{ fill:none; stroke:var(--hq-gras-2); stroke-width:.28; stroke-linecap:round; }
.hq-spriet-licht{ fill:none; stroke:var(--hq-gras-3); stroke-width:.24; stroke-linecap:round; }
.hq-stapsteen{ fill:var(--hq-stapsteen); }
.hq-water{ fill:var(--hq-water); }
.hq-epoxy{ fill:var(--hq-epoxy); }
.hq-epoxynaad{ fill:none; stroke:var(--hq-epoxy-2); stroke-width:.3; }
.hq-vluchtlijn{ fill:none; stroke:var(--speler); stroke-width:.8; }
.hq-vluchtpijl{ fill:none; stroke:var(--speler); stroke-width:.5; stroke-linecap:round; stroke-linejoin:round; }
.hq-terrazzo{ fill:var(--hq-terrazzo); }
.hq-terrazzo-stip{ fill:none; stroke:var(--hq-terrazzo-1); stroke-width:.5; stroke-linecap:round; }
.hq-terrazzo-stip-2{ fill:none; stroke:var(--hq-terrazzo-2); stroke-width:.38; stroke-linecap:round; }
.hq-hemelring{ fill:none; stroke:var(--speler); stroke-width:.6; }
.hq-hemelring-dun{ fill:none; stroke:var(--speler); stroke-width:.2; }
.hq-kooi{ fill:none; stroke:var(--hq-zwart); stroke-width:.25; opacity:.6; }
.hq-mat{ fill:var(--hq-mat); }
.hq-matrib{ fill:none; stroke:var(--hq-matrib); stroke-width:.22; }
.hq-statief{ fill:none; stroke:var(--hq-donker); stroke-width:.55; stroke-linecap:round; }
.hq-jupiter{ fill:var(--hq-jupiter); }
.hq-jupiter-band{ fill:var(--hq-jupiter-band); }
.hq-aquarium{ fill:var(--hq-aquarium); }
.hq-vis{ fill:var(--hq-vis); }
.hq-bel{ fill:none; stroke:var(--hq-wit); stroke-width:.12; }
.hq-voerzak{ fill:var(--hq-voerzak); }
.hq-voerzak-rand{ fill:var(--hq-voerzak-rand); }

/* de extra kamers: de bureaus */
.hq-tekenbord{ fill:var(--hq-tekenbord); }
.hq-blauwdruk-licht{ fill:var(--hq-blauwdruk-licht); }
.hq-blauwdruk-vlak{ fill:var(--hq-blauwdruk-raster); }
.hq-driehoek{ fill:var(--speler); fill-opacity:.55; fill-rule:evenodd; }
.hq-passer{ fill:none; stroke:var(--hq-staal-donker); stroke-width:.5; stroke-linecap:round; }
.hq-lamparm{ fill:none; stroke:var(--hq-staal-donker); stroke-width:.7; stroke-linecap:round; stroke-linejoin:round; }
.hq-lamplicht{ fill:var(--hq-lamplicht); }
.hq-schaalstreep{ fill:none; stroke:var(--hq-grijs); stroke-width:.12; }
.hq-rvs{ fill:var(--hq-rvs); }
.hq-rvs-streep{ fill:none; stroke:var(--hq-wit); stroke-width:.12; opacity:.5; }
.hq-ei{ fill:var(--hq-ei); }
.hq-voer{ fill:var(--hq-voer); }
.hq-vakje{ fill:none; stroke:var(--hq-grijs); stroke-width:.12; }
.hq-vink{ fill:none; stroke:var(--speler); stroke-width:.3; stroke-linecap:round; stroke-linejoin:round; }
.hq-loep{ fill:none; stroke:var(--hq-zwart); stroke-width:.5; }
.hq-crisisblad{ fill:var(--hq-crisisblad); }
.hq-marskaart{ fill:var(--hq-marskaart); }
.hq-marskaart-2{ fill:var(--hq-marskaart-2); }
.hq-marskaart-raster{ fill:none; stroke:var(--hq-marskaart-2); stroke-width:.12; }
.hq-gevaar{ fill:none; stroke:var(--speler); stroke-width:.35; stroke-dasharray:.9 .6; }
.hq-route{ fill:none; stroke:var(--hq-zwart); stroke-width:.25; stroke-dasharray:.6 .5; }
.hq-snoer{ fill:none; stroke:var(--hq-kleur-diep); stroke-width:.35; }
.hq-wijzer{ fill:none; stroke:var(--hq-zwart); stroke-width:.25; stroke-linecap:round; }
.hq-sterrenkaart{ fill:var(--hq-sterrenkaart); }
.hq-ster{ fill:var(--hq-ster); }
.hq-sterlijn{ fill:none; stroke:var(--hq-ster); stroke-width:.18; opacity:.6; }
.hq-sterlijn-dun{ fill:none; stroke:var(--hq-ster); stroke-width:.1; opacity:.35; }
.hq-sterbeeld{ fill:none; stroke:var(--hq-ster); stroke-width:.15; }
.hq-baan{ fill:none; stroke:var(--hq-staal-donker); stroke-width:.18; }
.hq-planeetarm{ fill:none; stroke:var(--hq-goud); stroke-width:.25; }
.hq-schets{ fill:none; stroke:var(--hq-grijs); stroke-width:.18; }

/* de extra kamers: de katten in de biodome */
.hq-kleur-licht{ fill:var(--hq-kleur-licht); }
.hq-kat-blond{ fill:var(--hq-kat-blond); }
.hq-kat-grijs{ fill:var(--hq-kat-grijs); }
.hq-kat-grijs-2{ fill:var(--hq-kat-grijs-2); }
.hq-kat-creme{ fill:var(--hq-kat-creme); }
.hq-kat-streep{ fill:none; stroke:var(--hq-kat-blond-2); stroke-width:.35; stroke-linecap:round; }
.hq-kat-rand{ fill:none; stroke:var(--ink); stroke-width:.18; opacity:.3; }
.hq-kat-staart-blond{ fill:none; stroke:var(--hq-kat-blond-2); stroke-width:1.1; stroke-linecap:round; }
.hq-kat-staart-tortie{ fill:none; stroke:var(--hq-kat-grijs-2); stroke-width:1; stroke-linecap:round; }
.hq-kat-oor{ fill:var(--hq-kat-oor); }
.hq-kat-oog{ fill:var(--hq-kat-oog); }
.hq-kattenboom{ fill:var(--hq-kattenboom); }
.hq-kattenboom-2{ fill:var(--hq-kattenboom-2); }
.hq-hek{ fill:none; stroke:var(--hq-donkergrijs); stroke-width:.35; }
.hq-gaas{ fill:none; stroke:var(--hq-grijs); stroke-width:.15; stroke-dasharray:.35 .35; }
.hq-wol{ fill:none; stroke:var(--hq-kleur-licht); stroke-width:.22; }
.hq-wol-draad{ fill:none; stroke:var(--hq-kleur-diep); stroke-width:.25; stroke-linecap:round; }

/* de extra kamers: alarm in het crisiscentrum, de hemel in het
   observatorium */
.hq-alarm{ fill:var(--hq-alarm); }
.hq-gloed-1{ fill:var(--hq-alarm); opacity:.12; }
.hq-gloed-2{ fill:var(--hq-alarm); opacity:.22; }
.hq-alarm-kruis{ fill:none; stroke:var(--hq-alarm); stroke-width:.45; stroke-linecap:round; }
.hq-alarm-driehoek{ fill:none; stroke:var(--hq-wit); stroke-width:.35; stroke-linejoin:round; }
.hq-alarm-muur, .hq-alarm-scherm, .hq-alarm-scherm-klein, .hq-alarm-stempel, .hq-alarm-stempel-groot, .hq-alarm-memo{
  font-family:var(--font-display); font-weight:700; text-anchor:middle; dominant-baseline:central;
}
.hq-alarm-muur{ font-size:1.85px; letter-spacing:.32px; fill:var(--hq-alarm); }
.hq-alarm-scherm{ font-size:2.8px; letter-spacing:.3px; fill:var(--hq-wit); }
.hq-alarm-scherm-klein{ font-size:1.8px; fill:var(--hq-wit); }
.hq-alarm-stempel{ font-size:1.25px; letter-spacing:.1px; fill:var(--hq-alarm); }
.hq-alarm-stempel-groot{ font-size:1.9px; letter-spacing:.2px; fill:var(--hq-alarm); }
.hq-alarm-memo{ font-size:2.2px; fill:var(--hq-alarm); }
.hq-memo{ fill:var(--hq-memo); }
.hq-koffie-plas{ fill:var(--hq-koffie); opacity:.85; }
.hq-kopoor{ fill:none; stroke:var(--hq-wit); stroke-width:.55; }
.hq-perforatie{ fill:var(--hq-lichtgrijs); }
.hq-thee{ fill:var(--hq-thee); }
.hq-hemelglobe{ fill:var(--hq-hemelglobe); }

/* de extra kamers: Mars op schaal en het goddelijke paneel */
.hq-maquette-rand{ fill:var(--hq-maquette-rand); }
.hq-mars-1{ fill:var(--hq-mars-1); }
.hq-mars-2{ fill:var(--hq-mars-2); }
.hq-mars-3{ fill:var(--hq-mars-3); }
.hq-maquette-raster{ fill:none; stroke:var(--hq-mars-3); stroke-width:.14; opacity:.8; }
.hq-vulkaan-rand{ fill:none; stroke:var(--hq-mars-2); stroke-width:.3; }
.hq-kloof{ fill:none; stroke:var(--hq-kloof); stroke-width:1.6; stroke-linecap:round; }
.hq-kloof-diep{ fill:none; stroke:var(--hq-kloof-diep); stroke-width:.6; stroke-linecap:round; }
.hq-poolkap{ fill:var(--hq-poolkap); }
.hq-wolk{ fill:var(--hq-wolk); }
.hq-wolk-schaduw{ fill:var(--ink); opacity:.15; }
.hq-regen{ fill:none; stroke:var(--hq-led-blauw); stroke-width:.25; stroke-linecap:round; }
.hq-doel{ fill:none; stroke:var(--hq-wit); stroke-width:.25; stroke-dasharray:.6 .4; }
.hq-spoor{ fill:none; stroke:var(--hq-wit); stroke-width:.3; stroke-linecap:round; opacity:.6; }
.hq-spoor-donker{ fill:none; stroke:var(--hq-grijs); stroke-width:.3; stroke-linecap:round; }
.hq-zon{ fill:var(--hq-zon); }
.hq-zongloed{ fill:var(--hq-zon); opacity:.18; }
.hq-zonarm{ fill:none; stroke:var(--hq-staal-donker); stroke-width:.6; stroke-linecap:round; }
.hq-hemel{ fill:var(--hq-hemel); }
.hq-hemel-2{ fill:var(--hq-hemel-2); }
.hq-lichtbundel{ fill:var(--hq-wit); opacity:.06; }
.hq-godlabel, .hq-boektitel, .hq-daktekst-klein, .hq-parkeertekst, .hq-bewijsnummer{
  font-family:var(--font-display); font-weight:700; text-anchor:middle; dominant-baseline:central;
}
.hq-godlabel{ font-size:1.45px; letter-spacing:.2px; fill:var(--hq-goud); }
.hq-boektitel{ font-size:1.25px; letter-spacing:.1px; fill:var(--hq-goud); }
.hq-goudlijn{ fill:none; stroke:var(--hq-goud); stroke-width:.2; }
.hq-stolp{ fill:var(--hq-wit); fill-opacity:.22; stroke:var(--hq-wit); stroke-width:.2; }
.hq-pincet{ fill:none; stroke:var(--hq-goud); stroke-width:.35; stroke-linecap:round; }
.hq-hengsel{ fill:none; stroke:var(--speler); stroke-width:.5; }
.hq-tuit{ fill:none; stroke:var(--speler); stroke-width:.7; stroke-linecap:round; }
.hq-druppel{ fill:var(--hq-led-blauw); }
.hq-boek{ fill:var(--hq-boek); }

/* de extra kamers: de golfbaan van de CEO, buiten op Mars, recht van
   boven */
.hq-marsgrond{ fill:var(--hq-marsgrond); }
.hq-marsgrond-2{ fill:var(--hq-marsgrond-2); }
.hq-zandribbel{ fill:none; stroke:var(--hq-zandribbel); stroke-width:.22; stroke-linecap:round; }
.hq-krater{ fill:var(--hq-krater); }
.hq-krater-wal{ fill:var(--hq-krater-wal); }
.hq-krater-licht{ fill:var(--hq-krater-licht); }
.hq-bunker{ fill:var(--hq-bunker); }
.hq-green{ fill:var(--hq-green); }
.hq-green-2{ fill:var(--hq-green-2); }
.hq-fringe{ fill:var(--hq-fringe); stroke:var(--hq-fringe); stroke-width:1.4; stroke-linejoin:round; }
.hq-rots{ fill:var(--hq-rots); }
.hq-rots-licht{ fill:var(--hq-rots-licht); }
.hq-rots-schaduw{ fill:var(--ink); opacity:.2; }
.hq-hole{ fill:var(--hq-zwart); }
.hq-vlagschaduw{ fill:none; stroke:var(--ink); stroke-width:.3; opacity:.25; stroke-linecap:round; }
.hq-wimpelschaduw{ fill:var(--ink); opacity:.18; }
.hq-pad{ fill:none; stroke:var(--hq-pad); stroke-width:2.6; stroke-linecap:round; }
.hq-bandspoor{ fill:none; stroke:var(--hq-rots); stroke-width:.35; stroke-dasharray:.5 .4; opacity:.6; }
.hq-roverarm{ fill:none; stroke:var(--hq-donkergrijs); stroke-width:.5; }
.hq-band-profiel-lijn{ fill:none; stroke:var(--hq-donkergrijs); stroke-width:.2; }
.hq-roverstoel{ fill:var(--hq-roverstoel); }
.hq-zonnepaneel{ fill:var(--hq-zonnepaneel); }
.hq-paneelvoeg{ fill:none; stroke:var(--hq-led-blauw); stroke-width:.12; opacity:.6; }
.hq-daktekst-klein{ font-size:1.6px; letter-spacing:.35px; fill:var(--hq-dak-tekst); }
.hq-terras{ fill:var(--hq-terras); }
.hq-terrasvoeg{ fill:none; stroke:var(--hq-terras-voeg); stroke-width:.15; }
.hq-oprit{ fill:var(--hq-oprit); }
.hq-haag{ fill:var(--hq-haag); }
.hq-trap{ fill:var(--hq-lichtgrijs); }
.hq-trapvoeg{ fill:none; stroke:var(--hq-grijs); stroke-width:.2; }
.hq-balustrade{ fill:none; stroke:var(--hq-grijs); stroke-width:.2; }
.hq-riet{ fill:var(--hq-riet); }
.hq-riet-licht{ fill:var(--hq-riet-licht); }
.hq-riet-donker{ fill:var(--hq-riet-donker); }
.hq-rietlaag{ fill:none; stroke:var(--hq-riet-lijn); stroke-width:.2; opacity:.7; }
.hq-nok{ fill:none; stroke:var(--hq-riet-lijn); stroke-width:.35; }
.hq-baksteen{ fill:var(--hq-baksteen); }
.hq-parkeerlijn{ fill:none; stroke:var(--speler); stroke-width:.3; }
.hq-parkeertekst{ font-size:1.5px; letter-spacing:.3px; fill:var(--speler); }
.hq-parasolnaad{ fill:none; stroke:var(--hq-kleur-diep); stroke-width:.2; }

/* de extra kamers: de inslag */
.hq-schroei-1{ fill:var(--ink); opacity:.07; }
.hq-schroei-2{ fill:var(--ink); opacity:.09; }
.hq-schroei-3{ fill:var(--ink); opacity:.12; }
.hq-gruisstraal{ fill:var(--ink); opacity:.13; }
.hq-gruisstraal-licht{ fill:var(--hq-wit); opacity:.11; }
.hq-straal-fel{ fill:var(--hq-wit); opacity:.16; }
.hq-grondbarst{ fill:none; stroke:var(--hq-krater-diep); stroke-width:.35; stroke-linejoin:round; stroke-linecap:round; opacity:.8; }
.hq-kraterschaduw{ fill:var(--ink); opacity:.28; }
.hq-krater-diep{ fill:var(--hq-krater-diep); }
.hq-ejecta{ fill:var(--hq-ejecta); }
/* de stippellijn om de meteoor uit te knippen: alleen op het printvel,
   met snijlijnen aan (css/print.css) */
.hq-knipstreep{ display:none; fill:none; stroke:var(--ink); stroke-width:.2; stroke-dasharray:.8 .6; opacity:.45; }
.hq-schroeirand{ fill:none; stroke:var(--hq-zwart); stroke-width:1.2; opacity:.4; stroke-linejoin:round; }
.hq-barst{ fill:none; stroke:var(--hq-zwart); stroke-width:.15; }
.hq-sintelgloed-1{ fill:var(--hq-sintel); opacity:.18; }
.hq-sintelgloed-2{ fill:var(--hq-sintel); opacity:.35; }
.hq-sintel{ fill:var(--hq-sintel-hart); }
.hq-rook{ fill:var(--hq-rook); opacity:.32; }
.hq-rook-licht{ fill:var(--hq-wit); opacity:.25; }
/* het lint: de diagonale strepen zijn een patroon (hq-lintstreep) in de
   tekening zelf; hier alleen de breedte, en een schaduw eronder omdat
   het boven de grond hangt */
.hq-lint{ fill:none; stroke-width:1.1; stroke-linejoin:round; stroke-linecap:round; }
.hq-lint-schaduw{ fill:none; stroke:var(--ink); stroke-width:1.1; opacity:.22; stroke-linejoin:round; stroke-linecap:round; }
.hq-kegelring{ fill:none; stroke:var(--hq-wit); stroke-width:.35; }
.hq-laser{ fill:none; stroke:var(--hq-alarm); stroke-width:.2; }
.hq-meteoor{ fill:var(--hq-meteoor); }
.hq-meteoor-schaduw{ fill:var(--ink); opacity:.35; }
.hq-meteoor-licht{ fill:var(--hq-meteoor-licht); }
.hq-meteoor-midden{ fill:var(--hq-meteoor-midden); }
.hq-meteoor-donker{ fill:var(--hq-meteoor-donker); }
.hq-meteoor-hoog{ fill:var(--hq-meteoor-hoog); }
.hq-meteoor-vonk{ fill:var(--hq-meteoor-glans); opacity:.7; }
.hq-tegelrand{ fill:none; stroke:var(--hq-zwart); stroke-width:.2; opacity:.35; }
.hq-meteoor-glansband{ fill:none; stroke:var(--hq-meteoor-glans); stroke-width:1.6; opacity:.14; stroke-linecap:round; stroke-linejoin:round; }
.hq-meteoor-randdonker{ fill:none; stroke:var(--hq-meteoor-donker); stroke-width:2.4; opacity:.75; stroke-linecap:round; stroke-linejoin:round; }
.hq-meteoor-glans{ fill:none; stroke:var(--hq-meteoor-glans); stroke-width:.3; stroke-linecap:round; stroke-linejoin:round; }
.hq-deuk{ fill:var(--hq-meteoor-donker); opacity:.22; }
.hq-deuk-schaduw{ fill:var(--hq-meteoor-donker); opacity:.6; }
.hq-deuk-licht{ fill:var(--hq-meteoor-glans); opacity:.3; }
.hq-meteoor-richel{ fill:none; stroke:var(--hq-meteoor-glans); stroke-width:.25; opacity:.35; stroke-linejoin:round; }
.hq-gloedbarst{ fill:none; stroke:var(--hq-sintel-hart); stroke-width:.45; stroke-linecap:round; stroke-linejoin:round; }
.hq-gloedbarst-gloed{ fill:none; stroke:var(--hq-sintel); stroke-width:1.8; opacity:.4; stroke-linecap:round; stroke-linejoin:round; }
.hq-meetrand{ fill:none; stroke:var(--hq-zwart); stroke-width:.15; }
.hq-sonde{ fill:none; stroke:var(--hq-staal); stroke-width:.6; stroke-linecap:round; }
.hq-kabel{ fill:none; stroke:var(--hq-zwart); stroke-width:.35; }
.hq-bewijsnummer{ font-size:1.1px; fill:var(--hq-zwart); }

/* Het embleem van ARES op de map van de CEO (zie css/werknemer.css). */
.hq-embleem{ color:var(--hq-wit); --wn-vlak:var(--wn-nacht); }