/* ============================================================
   REGELS — stickers en de twee spelverloopvellen
   ------------------------------------------------------------
   Een regel is een sticker. Op de spelverloopvellen (voor het
   spel en de afronding) staan genummerde vakken in twee kolommen
   waar die stickers op komen, in de volgorde waarin je ze
   uitvoert. Sticker en vak volgen uit dezelfde maten in
   css/tokens.css (--regel-w, --regel-h, --regel-gap), dus ze
   passen altijd op elkaar.

   Rustig en vlak gehouden: geen iconen, geen kaders om de titel.
   Doorzichtige verlopen staan, net als in de rest van de studio,
   als PNG in assets/verlopen/ (zie scripts/verlopen.py); vlakke
   rgba-kleuren mogen gewoon CSS zijn.
   ============================================================ */

/* ---------- De sticker ---------- */
.regel{
  position:relative; box-sizing:border-box; flex:0 0 auto;
  width:var(--regel-w); height:var(--regel-h);
  display:flex; flex-direction:column; justify-content:center;
  gap:calc(1.2*var(--mm));
  padding:calc(2.2*var(--mm)) calc(3*var(--mm)) calc(2.2*var(--mm)) calc(4.2*var(--mm));
  border-radius:var(--regel-r);
  overflow:hidden;
  background:#fbf8f3;
  color:var(--ink);
  font-family:var(--font-body);
}
/* Een dun streepje in de accentkleur langs de linkerkant. */
.regel::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:calc(1.3*var(--mm)); background:var(--regel-accent);
}
.regel--dubbel{
  height:calc(2*var(--regel-h) + var(--regel-gap));
  justify-content:flex-start;
}

.regel__kop{
  flex:0 0 auto;
  display:flex; align-items:baseline; gap:calc(2*var(--mm));
}
.regel__naam{
  margin:0; flex:1 1 auto; min-width:0;
  font-family:var(--font-display); font-weight:600;
  font-size:calc(3.4*var(--mm)); line-height:1.05;
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--regel-accent);
  overflow-wrap:break-word;
}
/* Het nummer waarmee je het vak terugvindt. */
.regel__code{
  flex:0 0 auto;
  font:600 calc(2.1*var(--mm))/1 var(--font-num);
  letter-spacing:.12em; color:#9a8f80;
}
/* Het tekstvak is precies zo hoog als zijn inhoud en krimpt pas als
   het niet past. Dan loopt de tekst aan de onderkant over, en dat
   meet T.fitCards om hem te verkleinen. */
.regel__tekst{
  flex:0 1 auto; min-height:0; overflow:hidden;
  font-size:calc(2.9*var(--mm)); line-height:1.3;
}
.regel__tekst p{ margin:0 0 calc(0.7*var(--mm)); }
.regel__tekst p:last-child{ margin-bottom:0; }
.regel__tekst strong{ font-weight:700; }

/* ============================================================
   HET SPELVERLOOPVEL
   ============================================================ */
.verloop{
  --stap-d:calc(8.5*var(--mm));                  /* doorsnede van een nummer */
  position:relative; box-sizing:border-box; flex:0 0 auto;
  /* Altijd A4: het papier is een vast formaat, alleen wat erop staat
     volgt de printerkalibratie. */
  width:calc(210mm - 2*var(--page-margin));
  height:calc(297mm - 2*var(--page-margin));
  display:flex; flex-direction:column;
  padding:calc(15*var(--mm)) calc(9*var(--mm)) calc(9*var(--mm));
  border-radius:calc(4*var(--mm));
  overflow:hidden;
  /* Daniels eigen Marstextuur, donkerder gemaakt zodat de lichte
     stickers en de witte titel erop gaan stralen. Het donker is een
     vlakke kleur, de randen een plaatje: zo print het zoals het op
     het scherm staat. */
  background:url("../assets/backgrounds/board_background.png") center/cover no-repeat;
  color:#fff;
  font-family:var(--font-body);
}
.verloop::before{
  content:""; position:absolute; inset:0;
  background:url("../assets/verlopen/vel-vignet.png") 0 0/100% 100% no-repeat
             rgba(20,8,4,.5);
}
.verloop > *{ position:relative; }

/* ---------- Titel: groot en wit, direct op Mars ---------- */
.verloop__kop{
  flex:0 0 auto;
  margin:0 0 calc(11*var(--mm)) calc(1*var(--mm));
}
.verloop__titel{
  margin:0;
  font-family:var(--font-display); font-weight:600;
  font-size:calc(11*var(--mm)); line-height:1;
  letter-spacing:.06em; text-transform:uppercase;
  color:#fff;
  /* Een filter, geen text-shadow: een vervaagde tekstschaduw wordt in een
     PDF uit Chrome een donker vlak (zie "Vervaagde schaduwen" in docs/ontwerpgids.md). */
  filter:drop-shadow(0 calc(0.5*var(--mm)) calc(0.8*var(--mm)) rgba(0,0,0,.45));
}
.verloop__vervolg{
  margin-left:calc(3*var(--mm));
  font-size:.34em; letter-spacing:.2em; vertical-align:.5em;
  color:rgba(255,236,220,.7);
}
/* Kort streepje in de accentkleur tussen titel en uitleg. */
.verloop__sub{
  margin:calc(4.5*var(--mm)) 0 0; padding-top:calc(4.5*var(--mm));
  max-width:calc(130*var(--mm));
  font-size:calc(3.6*var(--mm)); line-height:1.4; font-weight:500;
  color:rgba(255,240,228,.86);
  background:linear-gradient(var(--regel-accent), var(--regel-accent))
             0 0/calc(14*var(--mm)) calc(0.8*var(--mm)) no-repeat;
}

/* ---------- Twee kolommen met vakken ----------
   Van links naar rechts en dan naar beneden, zoals je leest. Een
   dubbele regel neemt twee rijen in. */
.verloop__lijst{
  flex:0 0 auto;
  display:grid;
  /* Vaste kolombreedte, zodat de vakken op elk vel op exact dezelfde
     plek staan. */
  grid-template-columns:repeat(2, calc(var(--stap-d) + 3*var(--mm) + var(--regel-w)));
  justify-content:space-between;
  grid-auto-rows:var(--regel-h);
  row-gap:var(--regel-gap);
}
.verloop__rij{
  display:flex; align-items:flex-start; gap:calc(3*var(--mm));
}
.verloop__rij--dubbel{ grid-row:span 2; }

/* Het nummer: een witte cirkel met een donker cijfer. */
.stap{
  flex:0 0 var(--stap-d); height:var(--stap-d);
  margin-top:calc(1.6*var(--mm));
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#fff;
  filter:drop-shadow(0 calc(0.5*var(--mm)) calc(0.7*var(--mm)) rgba(0,0,0,.45));
  font:600 calc(4.4*var(--mm))/1 var(--font-display);
  color:var(--regel-accent);
  padding-top:calc(0.3*var(--mm)); box-sizing:border-box;
}

/* ---------- Het vak waar de sticker op komt ---------- */
.vak{
  position:relative; box-sizing:border-box; flex:0 0 auto;
  width:var(--regel-w); height:var(--regel-h);
  border-radius:var(--regel-r);
  border:calc(0.4*var(--mm)) dashed rgba(255,240,226,.7);
  background:rgba(14,6,3,.42);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(1.3*var(--mm));
  color:rgba(255,240,226,.9);
}
.vak--dubbel{ height:calc(2*var(--regel-h) + var(--regel-gap)); }
.vak__plak{
  font:600 calc(2*var(--mm))/1 var(--font-body);
  letter-spacing:.26em; text-transform:uppercase; opacity:.7;
}
.vak__code{
  font:600 calc(4.6*var(--mm))/1 var(--font-display);
  letter-spacing:.08em;
}
/* Proefdruk: de sticker ligt al op zijn plek. */
.vak--gevuld{ border:0; background:none; }
.vak--gevuld .regel{ box-shadow:var(--vel-schaduw); }

/* ============================================================
   SCOREFORMULIER
   ------------------------------------------------------------
   Zelfde vel, zelfde achtergrond en dezelfde titel als het
   spelverloop, maar liggend: vijf spelers met elk vijf vakjes
   naast elkaar zijn 25 vakjes, en staand werden die te smal om
   in te schrijven. De vakjes zijn licht, zodat je er met pen op
   kunt schrijven.
   ============================================================ */
.verloop--liggend{
  width:calc(297mm - 2*var(--page-margin));
  height:calc(210mm - 2*var(--page-margin));
  padding:calc(12*var(--mm)) calc(9*var(--mm)) calc(9*var(--mm));
}
.score{
  --score-vak:calc(9.1*var(--mm));                /* breedte van één vakje */
  --score-rij:calc(10.5*var(--mm));               /* hoogte van een operatie */
  --score-lijn:#d9cfc1;
  --score-papier:#fbf8f3;
}
.score .verloop__kop{ margin-bottom:calc(8*var(--mm)); }
.score .verloop__sub{ max-width:none; font-size:calc(3.1*var(--mm)); }
.score .verloop__sub b{ color:#fff; font-weight:700; }

.score__tabel{
  flex:0 0 auto;
  display:flex; justify-content:space-between;
}
/* Vaste breedtes: vijf vakjes per speler, en de labels ervoor. */
.score__kolom{ flex:0 0 calc(5*var(--score-vak)); display:flex; flex-direction:column; }
.score__kolom--labels{ flex-basis:calc(16*var(--mm)); }

/* ---------- Bovenaan: kleur en corporatie, iets los van de rest ---------- */
.score__corp{
  height:calc(18*var(--mm)); margin-bottom:calc(4*var(--mm));
  display:flex; flex-direction:column;
  border-radius:calc(1.6*var(--mm)); overflow:hidden;
  box-shadow:var(--vel-schaduw);
}
.score__corp--leeg{ box-shadow:none; }
.score__kleur{
  flex:0 0 calc(6*var(--mm));
  display:flex; align-items:center; justify-content:center;
  background:var(--speler); color:#fff;
  font:600 calc(3*var(--mm))/1 var(--font-display);
  letter-spacing:.12em; text-transform:uppercase;
  padding-top:calc(0.2*var(--mm));
}
.score__naam{
  flex:1 1 auto; position:relative; background:var(--score-papier);
}
.score__naam span{
  position:absolute; left:calc(1.6*var(--mm)); top:calc(1.2*var(--mm));
  font:600 calc(1.6*var(--mm))/1 var(--font-num);
  letter-spacing:.16em; text-transform:uppercase; color:#b3a796;
}
.score__kolom--blauw{ --speler:var(--speler-blauw); }
.score__kolom--zwart{ --speler:var(--speler-zwart); }
.score__kolom--groen{ --speler:var(--speler-groen); }
.score__kolom--rood { --speler:var(--speler-rood); }
.score__kolom--geel { --speler:var(--speler-geel); }
.score__kolom--geel .score__kleur{ color:var(--speler-geel-ink); }

/* ---------- Welk vakje is wat ---------- */
.score__delen{
  height:calc(6.5*var(--mm));
  display:flex; align-items:center;
}
.score__delen span{
  flex:0 0 var(--score-vak); text-align:center;
  font:600 calc(2*var(--mm))/1 var(--font-num);
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,240,228,.86);
}

/* ---------- De operaties ---------- */
.score__rijen{
  display:flex; flex-direction:column;
  border-radius:calc(1.6*var(--mm)); overflow:hidden;
  background:var(--score-papier);
  box-shadow:var(--vel-schaduw);
}
.score__kolom--labels .score__rijen{ background:none; box-shadow:none; }
.score__rij{ display:flex; height:var(--score-rij); }
.score__rijen .score__rij + .score__rij{
  border-top:calc(0.3*var(--mm)) solid var(--score-lijn);
}
.score__vak{ flex:0 0 var(--score-vak); box-sizing:border-box; }
.score__vak + .score__vak{
  border-left:calc(0.2*var(--mm)) solid #ebe3d6;
}

.score__op{
  height:var(--score-rij);
  display:flex; align-items:center;
  padding-right:calc(2*var(--mm));
  font:600 calc(3*var(--mm))/1 var(--font-display);
  letter-spacing:.06em; color:#fff;
}
.score__rijen .score__op + .score__op{ border-top:calc(0.3*var(--mm)) solid transparent; }

/* ---------- Totalen: los van de tabel, ARES dikker omrand ---------- */
.score__rij--totaal,
.score__op--totaal{
  height:calc(11*var(--mm)); margin-top:calc(4*var(--mm));
}
.score__rij--totaal{
  border-radius:calc(1.6*var(--mm)); overflow:hidden;
  background:var(--score-papier);
  box-shadow:var(--vel-schaduw);
}
.score__op--totaal{ text-transform:uppercase; color:var(--regel-accent);
  filter:drop-shadow(0 0 calc(0.6*var(--mm)) rgba(0,0,0,.6)); }
.score__rij--totaal .score__vak--ares{
  box-shadow:inset 0 0 0 calc(0.8*var(--mm)) var(--regel-accent);
  border-radius:0 calc(1.6*var(--mm)) calc(1.6*var(--mm)) 0;
}