/* ============================================================
   TEGELS, FICHES EN BORDONDERDELEN
   ============================================================ */

/* ---------- Hexagon-tegel ---------- */
.hex{
  position:relative; box-sizing:border-box;
  width:var(--hex-flat); height:var(--hex-h);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--h1,#8a3d18),var(--h2,#3a1a0e));
  color:#fff; font-family:var(--font-display);
  overflow:hidden;
}
.hex__inner{
  position:absolute; inset:calc(0.9*var(--mm));
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  border:calc(0.35*var(--mm)) solid rgba(255,255,255,.28);
  pointer-events:none;
}
.hex__icon{
  font-size:calc(var(--hex-flat) * .42);
  filter:drop-shadow(0 calc(0.3*var(--mm)) calc(0.5*var(--mm)) rgba(0,0,0,.5));
  z-index:1;
}
.hex__label{
  position:absolute; left:0; right:0; bottom:calc(var(--hex-h)*.14);
  text-align:center; z-index:1;
  font-size:calc(var(--hex-flat)*.098); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  text-shadow:0 calc(0.2*var(--mm)) calc(0.4*var(--mm)) rgba(0,0,0,.85);
  padding:0 calc(var(--hex-flat)*.09); line-height:1.02;
  overflow-wrap:break-word; hyphens:auto;
}
.hex__top{
  position:absolute; left:0; right:0; top:calc(var(--hex-h)*.13);
  text-align:center; z-index:1;
  font-size:calc(var(--hex-flat)*.095); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; opacity:.8;
}
.hex::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.20),transparent 40%,rgba(0,0,0,.30));
}

/* Tegeltypes */
.hex--city     {--h1:#b7bcc4; --h2:#5a6069; color:#12161b;}
.hex--greenery {--h1:#5aa845; --h2:#245018;}
.hex--ocean    {--h1:#3f95cf; --h2:#123f68;}
.hex--special  {--h1:#d2762f; --h2:#6b2c0d;}
.hex--industry {--h1:#a8763a; --h2:#4a2c0e;}
.hex--legacy   {--h1:#8a4fc4; --h2:#37175c;}
.hex--land     {--h1:#a84c1e; --h2:#4a1d0b;}
.hex--reserved {--h1:#6a635a; --h2:#2b2620;}
.hex--empty    {--h1:#c3b8a2; --h2:#8d8371; color:#2b2519;}

/* Plaatsingsbonus op een bordvak */
.hex__bonus{
  position:absolute; z-index:2; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex; gap:calc(0.5*var(--mm));
  font-size:calc(var(--hex-flat)*.16);
}
.hex--space .hex__bonus{ font-size:calc(var(--hex-flat)*.14); }

/* ---------- Hexraster (bordonderdeel) ---------- */
.hexgrid{
  position:relative;
  background:radial-gradient(120% 120% at 50% 0%,var(--mars-700),var(--mars-950));
  border-radius:calc(2*var(--mm));
  padding:calc(4*var(--mm));
  box-sizing:content-box;
}
.hexgrid__field{ position:relative; }
.hexgrid .hex{ position:absolute; }
/* Bordvakken: icoon zachter zodat de plaatsingsbonus leesbaar blijft */
.hex:has(.hex__bonus) .hex__icon{ opacity:.32; }
.hexgrid__title{
  position:absolute; left:calc(4*var(--mm)); top:calc(1.4*var(--mm));
  font:600 calc(4*var(--mm))/1 var(--font-display);
  text-transform:uppercase; letter-spacing:.12em; color:#f0c69a;
}

/* ---------- Rond fiche / marker ---------- */
.token{
  box-sizing:border-box; position:relative;
  width:var(--token-d); height:var(--token-d); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--h1,#d2762f),var(--h2,#6b2c0d));
  color:#fff; border:calc(0.5*var(--mm)) solid rgba(0,0,0,.5);
  font-family:var(--font-display); overflow:hidden;
}
.token--sm{ width:var(--marker-d); height:var(--marker-d); }
.token .ic{ font-size:calc(var(--token-d)*.5); }
.token__text{
  font-size:calc(var(--token-d)*.3); font-weight:700; line-height:1;
  text-transform:uppercase; letter-spacing:.02em; text-align:center;
  padding:0 calc(1*var(--mm));
}

/* ---------- Rechthoekig bordpaneel (tracks, overzichten) ---------- */
.panel{
  box-sizing:border-box; position:relative;
  background:linear-gradient(160deg,var(--space-800),var(--space-950));
  color:#e8ecf5; border-radius:calc(2*var(--mm));
  border:calc(0.5*var(--mm)) solid rgba(255,255,255,.14);
  padding:calc(4*var(--mm));
  font-family:var(--font-body);
  overflow:hidden;
}
.panel__title{
  font:600 calc(5*var(--mm))/1 var(--font-display);
  text-transform:uppercase; letter-spacing:.14em; color:var(--mars-300);
  margin:0 0 calc(3*var(--mm));
}
.panel__body{ font-size:calc(3*var(--mm)); line-height:1.35; }

/* Waardebalk / track */
.track{ display:flex; align-items:stretch; gap:calc(0.6*var(--mm)); }
.track__step{
  flex:1 1 0; min-width:calc(6*var(--mm)); height:calc(9*var(--mm));
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
  border:calc(0.3*var(--mm)) solid rgba(255,255,255,.2);
  border-radius:calc(0.8*var(--mm));
  font:700 calc(3.2*var(--mm))/1 var(--font-num);
}
.track__step--mark{ background:var(--mars-500); border-color:#000; color:#fff; }

/* Snijhulp voor hexagons: rand langs de echte vorm i.p.v. een rechthoek */
.marks .cell:has(> .hex),
.corners .cell:has(> .hex){ outline:none !important; }
.marks .cell:has(> .hex)::before,
.marks .cell:has(> .hex)::after{ content:none; }
.marks .hex,.corners .hex{
  box-shadow:inset 0 0 0 calc(0.3*var(--mm)) rgba(0,0,0,.8);
}

/* ---------- Officiële tegelillustratie op een hexagon ---------- */
.hex--art{ background:none; }
.hex--art::after{ content:none; }
.hex--art .hex__inner{ display:none; }
.hex__art{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block; z-index:0;
}