/* ============================================================
   BORDDELEN — flat-top hexagons met fototextuur
   Elk vakje krijgt dezelfde achtergrond, maar gedraaid en
   gespiegeld op een vaste (niet toevallige) manier, zodat het
   in de preview en op de print altijd hetzelfde is.
   ============================================================ */

.bpart{
  position:relative;
  filter:drop-shadow(0 calc(0.6*var(--mm)) calc(1.2*var(--mm)) rgba(0,0,0,.35));
}
.bpart__title{
  position:absolute; left:0; top:calc(-7*var(--mm));
  font:600 calc(4.5*var(--mm))/1 var(--font-display);
  text-transform:uppercase; letter-spacing:.12em; color:var(--mars-300);
}

/* ---------- Eén bordvakje ---------- */
.bhex{
  position:absolute; box-sizing:border-box;
  width:var(--bhex-w); height:var(--bhex-h);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display);
  background:#5c2a14;
}

/* De textuur hoort bij het HELE borddeel, niet bij het losse vakje.
   Elk vakje toont zijn eigen stukje van dezelfde afbeelding, zodat de
   achtergrond over de vakjes heen doorloopt. Het vlak is vierkant en
   even groot als de diagonaal van het deel, zodat draaien nooit een
   hoek leeg laat. */
.bhex__tex{
  position:absolute;
  left:var(--tex-x,0); top:var(--tex-y,0);
  width:var(--tex-s); height:var(--tex-s);
  transform:rotate(var(--rot,0deg)) scaleX(var(--fx,1));
  transform-origin:center;
  background-size:cover; background-position:center;
}

/* ---------- Randen: echte zeshoek-omtrek in SVG ----------
   Een inset box-shadow volgt de RECHTHOEK van het element en wordt
   daarna weggeknipt door de clip-path — daarom waren de schuine
   randen onzichtbaar. Een SVG-polygoon volgt de zeshoek zelf.
   De lijn ligt midden op de rand; de buitenste helft wordt door de
   clip-path afgesneden. Twee buurvakjes leveren samen dus precies
   één lijn van --bhex-line breed, met overal dezelfde doorzichtigheid. */
.bhex__outline{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none; overflow:visible;
}
.bhex__outline polygon{ fill:none; stroke-linejoin:round; }
.bhex__outline .o-grid{
  stroke:var(--bhex-line-col);
  stroke-width:var(--bhex-line);
}
.bhex__outline .o-edge{
  stroke:var(--edge-col, #ffffff);
  stroke-width:var(--edge-w, var(--bhex-edge-line));
}
.bhex__outline .o-res{
  stroke:var(--res-col, #2f7ab8);
  stroke-width:1.8; stroke-dasharray:5 4.5;
}
/* Kleuroverlay over het hele vakje. Ligt boven de textuur maar onder
   de omtrek en de tekst, zodat namen en bonussen leesbaar blijven. */
.bhex__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--ov-col, #000);
  opacity:var(--ov-op, .3);
}

/* Lichte glooiing zodat de vakjes niet plat ogen */
.bhex__shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(170deg,rgba(255,255,255,.13),transparent 42%,rgba(0,0,0,.22));
}

/* ---------- Inhoud van een vakje ---------- */
/* Staat er iets in de onderhoeken, dan schuift het tekstblok omhoog.
   Zonder dit komt het grote getal over de bonussen te liggen, en het er
   bovenop schilderen lost dat niet op: dan valt een plaatsingsbonus half
   weg. Het codelabel is kleiner, dus dat vraagt minder ruimte.
   Staan ze er allebei, dan telt de grootste uitwijking — deze twee
   regels tellen niet bij elkaar op, de onderste wint.               */
.bhex--num  .bhex__body{ transform:translateY(calc(-0.5 * var(--mm))); }
.bhex--lava .bhex__body{ transform:translateY(calc(-4 * var(--mm))); }

.bhex__body{
  position:relative; z-index:2; max-width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(0.8*var(--mm)); text-align:center; padding:0 calc(2.5*var(--mm));
}
.bhex__bonus{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;                       /* breekt af i.p.v. tot de rand vullen */
  gap:calc(0.7*var(--mm)) calc(0.9*var(--mm));
  max-width:calc(var(--bhex-w) * 0.78); /* blijft binnen de rechte zijkanten */
  font-size:calc(4.6*var(--mm));
}
/* Productiebonus op een bordvakje: het kader zelf staat in
   components.css, hier alleen de schaduw die het van de fototextuur
   tilt. */
.bhex__bonus .prod{
  filter:drop-shadow(0 calc(0.2*var(--mm)) calc(0.4*var(--mm)) rgba(0,0,0,.55));
}

.bhex__name{
  font-size:calc(3.1*var(--mm)); font-weight:600; line-height:1.05;
  letter-spacing:.05em; text-transform:uppercase;
  text-shadow:0 calc(0.25*var(--mm)) calc(0.5*var(--mm)) rgba(0,0,0,.9);
}

/* Is er een bonus, dan hoort DIE precies in het midden van het vakje —
   niet het blok als geheel. De naam wordt daarom uit de flow gehaald en
   erboven gehangen; anders zou het blok gecentreerd worden en zakt de
   bonus eronder weg. Zonder bonus blijft de naam gewoon in de flow. */
.bhex__body--bonus{ position:relative; }
.bhex__body--bonus .bhex__name{
  position:absolute; bottom:calc(100% + 0.9 * var(--mm));
  left:50%; transform:translateX(-50%);
  width:max-content; max-width:calc(var(--bhex-w) * 0.7);
}

/* ---------- Nummer of code in de hoek ----------
   Staat linksonder, net binnen de rechte zijkant. Die hoogte ligt
   tussen 25% en 75% van de zeshoek, waar het vakje op zijn breedst is,
   dus het label loopt nooit tegen een schuine rand aan. Bewust geen
   vlakje eronder: dat zou juist de aandacht trekken. De leesbaarheid
   komt van een donkere gloed, niet van een kader.                    */
.bhex__num{
  position:absolute; z-index:2; pointer-events:none;
  /* 12,5% vrij van de linkerrand: het vlakje moet buiten de stippellijn
     blijven die een gereserveerd gebied markeert (die loopt op 10%). */
  left:calc(var(--bhex-w) * 0.125);
  top:calc(var(--bhex-h) * 0.615);
  padding:var(--num-pad-y) var(--num-pad-x);
  border-radius:calc(1.1 * var(--mm));
  background:rgba(12,5,2,.58);
  font:600 var(--num-size) / 1 var(--font-num);
  letter-spacing:.07em; white-space:nowrap;
  color:var(--num-col, #f4ecdd);
  opacity:var(--num-opacity, .85);
  /* Het donkere vlakje levert nu het contrast, dus het randje om elke
     letter is niet meer nodig; een zachte schaduw volstaat. */
  text-shadow:0 calc(0.15*var(--mm)) calc(0.3*var(--mm)) rgba(0,0,0,.85);
}

/* ---------- Lavagetal, gespiegeld aan de andere kant ----------
   Staat rechtsonder, precies tegenover het kleine nummer. De hoogte is
   zo berekend dat de middens van beide getallen op één lijn liggen,
   ondanks het formaatverschil.

   Waarom TWEE lagen? Een achtergrond wordt geschilderd vóór de
   tekstschaduwen van hetzelfde element. Een verloop dat je met
   background-clip in de letters knipt, verdwijnt dus onder je eigen
   korst en gloed. Het in een ::after zetten hielp niet: daar knipt
   background-clip:text niets zichtbaars. Met twee echte elementen
   werkt het wel — de onderste geeft de korst en de gloed, de bovenste
   ligt er absoluut overheen met het verloop.                        */
.bhex__lava{
  /* z-index 3: dit getal mag nooit achter een bonusrij verdwijnen. */
  position:absolute; z-index:3; pointer-events:none;
  right:calc(var(--bhex-w) * 0.155);
  /* Zo liggen de middens van beide getallen op één lijn. Het vlakje om
     het codelabel telt mee, anders zakt het lavagetal ernaast weg. */
  top:calc(var(--bhex-h) * 0.615
       + (var(--num-size) + var(--num-pad-y) * 2 - var(--lava-size)) / 2);
  font:700 var(--lava-size) / 1 var(--font-display);
  letter-spacing:.02em; white-space:nowrap;
}
.bhex__lava span{ display:block; }

/* Onderste laag: donkere korst plus hitte eromheen. De letters zelf zijn
   doorzichtig, alleen de schaduwen tellen. */
.bhex__lava .lava-glow{
  color:transparent;
  text-shadow:
    calc(0.22*var(--mm)) calc(0.22*var(--mm)) 0 rgba(26,4,0,.95),
    calc(-0.22*var(--mm)) calc(0.22*var(--mm)) 0 rgba(26,4,0,.95),
    calc(0.22*var(--mm)) calc(-0.22*var(--mm)) 0 rgba(26,4,0,.95),
    calc(-0.22*var(--mm)) calc(-0.22*var(--mm)) 0 rgba(26,4,0,.95),
    0 0 calc(0.7*var(--mm)) rgba(255,170,40,.9),
    0 0 calc(1.8*var(--mm)) rgba(255,95,0,.8),
    0 0 calc(3.6*var(--mm)) rgba(150,30,0,.55);
}

/* Bovenste laag: het gloeiende gesteente zelf. */
.bhex__lava .lava-fill{
  position:absolute; left:0; top:0;
  color:#ff9422;                     /* terugval zonder background-clip */
}
@supports (-webkit-background-clip: text) or (background-clip: text){
  .bhex__lava .lava-fill{
    background-image:linear-gradient(180deg,
      #fffdf0 0%, #ffec9a 16%, #ffc23a 40%, #ff8410 66%, #ef4b00 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}

/* Gereserveerd gebied: gekleurde gloed binnen het vakje */
.bhex--res .bhex__res{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:radial-gradient(65% 65% at 50% 50%, transparent 45%, var(--res-col,#2f7ab8) 135%);
  opacity:.7;
}
.bhex--res-ocean   { --res-col:#2f7ab8; }

/* ---------- Gereserveerd voor een oceaan ----------
   Een koele waas over het terrein in plaats van eroverheen: de kraters
   blijven zichtbaar, maar het vakje leest meteen als water. Daarbovenop
   een paar rustige golflijnen. Alles met gewone doorzichtigheid en geen
   blend-modes, want die geven in print onvoorspelbare resultaten.     */
.bhex--res-ocean .bhex__res{
  background:
    /* lichtinval van boven */
    radial-gradient(125% 90% at 50% 6%, rgba(165,225,250,.55) 0%, rgba(165,225,250,0) 58%),
    /* donkere randen: het midden lijkt ondieper, de randen dieper */
    radial-gradient(112% 98% at 50% 50%, rgba(4,34,62,0) 42%, rgba(4,34,62,.8) 100%),
    /* de waterkleur zelf, cyaan genoeg om niet grijs te worden op rood */
    linear-gradient(180deg, #22a3dc 0%, #0b4a80 100%);
  opacity:var(--water-tint, .48);
}
.bhex__water{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none;
}
.bhex__water path{ fill:none; stroke-linecap:round; }
.bhex__water .w-diep path{
  stroke:rgba(5,38,68, calc(var(--water-wave, .30) * .85));
  stroke-width:1.7;
}
.bhex__water .w-licht path{
  stroke:rgba(232,250,255, var(--water-wave, .30));
  stroke-width:1.4;
}
.bhex--res-ocean .o-res{
  stroke:rgba(222,244,255,.72); stroke-width:1.4; stroke-dasharray:3.5 5;
}
.bhex--res-city    { --res-col:#c9ced6; }
.bhex--res-greenery{ --res-col:#4f9c33; }
.bhex--res-legacy  { --res-col:#8a4fc4; }

/* Vakje met een eigen dikke rand: moet boven de buren liggen, anders
   tekent een later vakje zijn rasterlijn eroverheen. */
.bhex--edge{ z-index:2; }

/* ---------- Selectie in de editor (nooit meegeprint) ---------- */
.bhex--sel{ z-index:4; }
.bhex--sel .o-grid{ stroke:#ffd400; stroke-width:9; }
.editable .bhex{ cursor:pointer; }
@media print{
  .bhex--sel{ z-index:auto; }
  .bhex--sel .o-grid{ stroke:var(--bhex-line-col); stroke-width:var(--bhex-line); }
}