/* ============================================================
   COMPONENTEN — iconen, tags, badges, productiekader
   Herbruikbaar in kaarten, tegels, borden en overzichten.
   ============================================================ */

/* ---------- Basis icoon ---------- */
.ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:1em; height:1em; vertical-align:-0.14em;
  flex:0 0 auto;
}
.ic svg{ width:100%; height:100%; display:block; fill:currentColor; }

/* ---------- Resource-badge: icoon in gekleurd vierkant ---------- */
.res{
  display:inline-flex; align-items:center; justify-content:center; gap:.12em;
  min-width:1.35em; height:1.35em; padding:0 .18em;
  border-radius:.18em; vertical-align:-0.3em;
  font-family:var(--font-num); font-weight:700; line-height:1;
  border:var(--line) solid rgba(0,0,0,.45);
  box-shadow:inset 0 0 0 calc(0.15*var(--mm)) rgba(255,255,255,.18);
}
.res .ic{ width:.95em; height:.95em; }
.res__n{ font-size:1.02em; }
.res--mc{background:var(--res-mc); color:var(--res-mc-ink);}
.res--steel{background:var(--res-steel); color:var(--res-steel-ink);}
.res--titanium{background:var(--res-titanium); color:var(--res-titanium-ink);}
.res--plant{background:var(--res-plant); color:var(--res-plant-ink);}
.res--energy{background:var(--res-energy); color:var(--res-energy-ink);}
.res--heat{background:var(--res-heat); color:var(--res-heat-ink);}
.res--card{background:var(--res-card); color:var(--res-card-ink);}
.res--ocean{background:var(--par-ocean); color:#eaf5ff;}
.res--oxygen{background:var(--par-oxygen); color:#effff0;}
.res--temp{background:var(--par-temp); color:#fff2ea;}
.res--venus{background:var(--par-venus); color:#fdeeff;}
.res--tr{background:var(--par-tr); color:#fff0ec;}
.res--vp{background:var(--vp); color:#2b1f00;}
.res--city{background:var(--tag-city); color:var(--tag-city-ink);}
.res--greenery{background:var(--tag-plant); color:var(--tag-plant-ink);}
.res--microbe{background:var(--tag-microbe); color:var(--tag-microbe-ink);}
.res--animal{background:var(--tag-animal); color:var(--tag-animal-ink);}
.res--science{background:var(--tag-science); color:var(--tag-science-ink);}
.res--floater{background:#9fb4c4; color:#0d1a22;}
.res--data{background:#6f7fa8; color:#eef2ff;}
.res--neutral{background:#b9b0a0; color:#231d14;}

/* Negatieve waarde (kosten/verlies): rode rand */
.res--minus{ box-shadow:inset 0 0 0 calc(0.35*var(--mm)) #c0392b; }

/* ---------- Tag (rond, zoals op TM-kaarten) ---------- */
.tag{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.55em; height:1.55em; border-radius:50%;
  border:calc(0.22*var(--mm)) solid rgba(0,0,0,.55);
  box-shadow:inset 0 calc(-0.25*var(--mm)) calc(0.5*var(--mm)) rgba(0,0,0,.25),
             inset 0 calc(0.2*var(--mm)) calc(0.4*var(--mm)) rgba(255,255,255,.25);
}
.tag .ic{ width:.9em; height:.9em; }
.tag--building{background:var(--tag-building); color:var(--tag-building-ink);}
.tag--space{background:var(--tag-space); color:var(--tag-space-ink);}
.tag--science{background:var(--tag-science); color:var(--tag-science-ink);}
.tag--energy{background:var(--tag-energy); color:var(--tag-energy-ink);}
.tag--jovian{background:var(--tag-jovian); color:var(--tag-jovian-ink);}
.tag--earth{background:var(--tag-earth); color:var(--tag-earth-ink);}
.tag--plant{background:var(--tag-plant); color:var(--tag-plant-ink);}
.tag--microbe{background:var(--tag-microbe); color:var(--tag-microbe-ink);}
.tag--animal{background:var(--tag-animal); color:var(--tag-animal-ink);}
.tag--city{background:var(--tag-city); color:var(--tag-city-ink);}
.tag--event{background:var(--tag-event); color:var(--tag-event-ink);}
.tag--venus{background:var(--tag-venus); color:var(--tag-venus-ink);}
.tag--moon{background:var(--tag-moon); color:var(--tag-moon-ink);}
.tag--wild{
  background:conic-gradient(#cf4535,#e0a52c,#5aa845,#2f83c0,#8a4fc4,#cf4535);
  color:#fff;
}

/* ---------- Productiekader ----------
   Bruin vlak met een grijze verlooprand en een schaduw naar binnen.
   Alle maten in em, zodat het kader meeschaalt met de tekst eromheen:
   op een bordvakje wordt het vanzelf groter dan op een kaart.
   Truc voor de verlooprand: de rand is doorzichtig en er liggen twee
   achtergrondlagen onder. Laag 1 (de vulling) wordt op de padding-box
   geknipt, laag 2 (het grijze verloop) vult de border-box en schijnt
   zo door de rand heen.                                             */
.prod{
  display:inline-flex; align-items:center; gap:.2em;
  padding:.17em .3em .21em;
  border:.13em solid transparent;
  border-radius:.2em;
  background-image:
    linear-gradient(var(--prod-bg), var(--prod-bg)),
    linear-gradient(158deg, #eef0f3 0%, #b9bfc7 28%, #767c85 62%, #3f434a 100%);
  background-origin:padding-box, border-box;
  background-clip:padding-box, border-box;
  background-repeat:no-repeat;
  background-size:100% 100%;
  box-shadow:
    inset 0 .09em .18em rgba(0,0,0,.66),
    inset 0 -.05em .12em rgba(0,0,0,.4);
}
.prod::before{ content:none; }

/* ---------- Pijl / scheiding in effectteksten ---------- */
.arrow{ display:inline-block; padding:0 .18em; font-weight:700; }
.arrow::before{ content:"\2192"; }
.colon{ padding:0 .1em; font-weight:700; }

/* ---------- Statuslabel (idee / concept / definitief) ---------- */
.status{
  display:inline-block; padding:.1em .5em; border-radius:99px;
  font:600 11px/1.6 var(--font-body); letter-spacing:.04em;
  text-transform:uppercase;
}
.status--idee{background:#3a3f4d; color:#c8cede;}
.status--concept{background:#7a5a12; color:#ffe9a8;}
.status--test{background:#1a4f79; color:#cfe8ff;}
.status--definitief{background:#2f6b27; color:#dcffcf;}

/* ============================================================
   OFFICIËLE ICOONSET (skin "officieel")
   De PNG's brengen hun eigen cirkel/vakje mee, dus de CSS-badge
   eronder moet dan wegvallen.
   ============================================================ */
.ic--png img{ width:100%; height:100%; object-fit:contain; display:block; }

/* De officiele tag-afbeeldingen hebben soms een witte vierkante rand om
   de cirkel. Rond afknippen haalt die er vanzelf af. Het beeld staat
   iets ruimer dan het kader, zodat er geen wit randje overblijft waar
   de cirkel net binnen de afbeelding valt. */
.tag--png{
  background:none !important; border:0 !important; box-shadow:none !important;
  width:1.75em; height:1.75em;
  border-radius:50%; overflow:hidden;
}
.tag--png img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:50%; transform:scale(1.03);
}

.res--png{
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0; min-width:0; gap:.14em; color:inherit;
  height:1.45em; vertical-align:-0.32em;
}
.res--png > img{ width:1.45em; height:1.45em; object-fit:contain; display:block; }
.res--png .res__n{ font-weight:700; }
.res--png.res--minus > img{
  outline:calc(0.35*var(--mm)) solid #c0392b; outline-offset:calc(-0.35*var(--mm));
  border-radius:.16em;
}

/* Megacredit: leeg goud vakje met het getal eroverheen */
.res--mcbox{ position:relative; display:inline-flex; }
.res--mcbox > img{ width:1.6em; height:1.6em; }
.res--mcbox .res__n{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#20180a; font-family:var(--font-num); font-size:.95em; line-height:1;
  padding-bottom:.06em;
}

/* Productiekader: de echte bruine textuur */
html[data-skin="officieel"] .prod{
  background-image:
    url("../assets/upstream/images/misc/production.png"),
    linear-gradient(158deg, #eef0f3 0%, #b9bfc7 28%, #767c85 62%, #3f434a 100%);
}

/* Pijl */
html[data-skin="officieel"] .arrow{
  display:inline-block; width:1.15em; height:.72em; vertical-align:-0.04em;
  background:url("../assets/upstream/images/misc/arrow.png") center/contain no-repeat;
}
html[data-skin="officieel"] .arrow::before{ content:none; }


/* ============================================================
   KAARTBLOKKEN — losse onderdelen
   ============================================================ */

/* "Geldt ook bij andere spelers": dikke rood-oranje ring om het fiche.
   Bij een ronde tag wordt de ring vanzelf rond mee. */
.any{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.13em; border-radius:.22em;
  background:linear-gradient(158deg,#ffa53a 0%,#e8410d 55%,#a81600 100%);
  box-shadow:inset 0 0 0 .045em rgba(0,0,0,.5),
             0 .04em .1em rgba(0,0,0,.35);
}
.any:has(.tag){ border-radius:50%; }

/* Dubbele punt tussen voorwaarde en gevolg van een effect */
.cb__colon{
  flex:0 0 auto;
  font:700 1.5em/1 var(--font-display);
  padding:0 .06em .12em; opacity:.85;
}

/* Rode actiepijl */
.cb-arrow{
  flex:0 0 auto; display:block;
  width:1.95em; height:1.2em; margin:0 .1em;
}
.cb-arrow path{
  fill:#d9200b; stroke:#4a0a02; stroke-width:1;
  stroke-linejoin:round; paint-order:stroke fill;
}