.odcounter{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  margin:1.6rem 0;padding:0;
}
.odcounter-tile{
  flex:1 1 160px;max-width:220px;
  background:var(--card,#fbfaf4);border:1px solid var(--line,#e2e4e1);
  border-radius:14px 5px 14px 5px;
  padding:1.1rem 1rem 1rem;
  text-align:center;
  box-shadow:0 6px 14px rgba(48,40,26,.10),0 2px 5px rgba(48,40,26,.07);
  transform:rotate(var(--tilt,0deg));
  transition:transform .3s cubic-bezier(.2,.75,.25,1),box-shadow .3s ease;
}
.odcounter-tile:hover{transform:translateY(-4px) rotate(var(--tilt,0deg));box-shadow:0 12px 22px rgba(48,40,26,.16),0 4px 8px rgba(48,40,26,.10);}
.odcounter-num{
  display:block;font-family:var(--od-display,'Cabin Sketch',cursive);font-weight:700;
  font-size:clamp(2.2rem,6vw,3rem);line-height:1;margin-bottom:.35rem;
  font-variant-numeric:tabular-nums;
}
.odcounter-label{
  display:block;font:600 .78rem/1.35 var(--od-font,'Cabin',sans-serif);
  letter-spacing:.03em;color:var(--slate,#6b7077);
}
.odcounter-tile.is-moor   .odcounter-num{color:var(--green,#4a6741);}
.odcounter-tile.is-gorse  .odcounter-num{color:var(--gorse-deep,#8a5e0c);}
.odcounter-tile.is-heather .odcounter-num{color:var(--heather-deep,#6b4763);}
.odcounter-tile.is-ink    .odcounter-num{color:var(--ink,#41454b);}
.odcounter-tile.is-ink    .odcounter-label{font-size:.68rem;line-height:1.4;}

@media(prefers-reduced-motion:reduce){
  .odcounter-tile{transition:none;}
  .odcounter-tile:hover{transform:none;}
}