/* ==========================================================
   Catan Tool — UI + Board v0.7 (Texture polish + token hierarchy)
   + Phase 2: Sharebar + btn.small/ghost
   ========================================================== */

:root{
  --bg: #0b0f14;

  --panel: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.10);
  --stroke-2: rgba(255,255,255,0.16);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.66);

  --accent: #7c5cff;

  --radius: 16px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.28);

  --gap: 12px;

  /* Keep in sync with TemplateExpander defaults */
  --hex-w: 112px;
  --hex-h: calc(var(--hex-w) * 1.1547005);

  /* Token chip sizing */
  --chip: 46px;

  /* Board polish tuning */
  --tile-shadow: 0 8px 20px rgba(0,0,0,0.35);
  --tile-shadow-hover: 0 22px 56px rgba(0,0,0,0.38);

  /* Overlay tuning (defaults) */
  --tile-shine-a: 0.12;
  --tile-shine-b: 0.10;
  --tile-shade-a: 0.26;

  /* Token readability: dim background under token */
  --token-dim: 0.16;

  /* Optional: texture repetition breakers (renderer can override per tile) */
  --tex-x: 50%;
  --tex-y: 50%;
  --tex-scale: 120%;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(124,92,255,0.14), transparent 55%),
    radial-gradient(900px 600px at 80% 0%, rgba(0,212,255,0.10), transparent 55%),
    radial-gradient(900px 700px at 50% 90%, rgba(124,92,255,0.10), transparent 60%),
    linear-gradient(180deg, #0a0e13 0%, #070a0e 100%);
}

a{ color: inherit; text-decoration:none; }

/* Bring back accessible focus rings */
:focus{ outline:none; }
:focus-visible{
  outline: 3px solid rgba(124,92,255,0.55);
  outline-offset: 2px;
  border-radius: 12px;
}

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px 36px;
}

.muted{ color: var(--muted); font-size: 12px; }

/* ---------------------------
   Topbar / Control UI
   --------------------------- */

.topbar{
  position: relative;
  top: 0;
  z-index: 50;
  margin-bottom: 18px;
}

.card{
  background: linear-gradient(180deg, var(--panel) 0%, rgba(255,255,255,0.04) 100%);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.controlbar{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gap);
  padding: 10px;
}

@media (max-width: 860px){
  .controlbar{ grid-template-columns: 1fr; }
}

.group{
  display:flex;
  flex-wrap:wrap;
  gap: var(--gap);
  align-items:center;
}

.field{ min-width: 260px; }

label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px 2px;
  letter-spacing: 0.2px;
}

select,
input[type="text"]{
  width: 100%;
  background: rgba(0,0,0,0.35);
  color: var(--text);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 11px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

select#scenario{ font-size: 15px; }

select:hover,
input[type="text"]:hover{ border-color: var(--stroke-2); }

select:focus,
input[type="text"]:focus{
  border-color: rgba(124,92,255,0.55);
  box-shadow: 0 0 0 4px rgba(124,92,255,0.18);
}

.seedBox{
  display:flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,0.28);
}

.seedRow{
  display:flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.seedBox strong{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 16px;
  letter-spacing: 0.2px;
}

.btn{
  appearance:none;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
  transition: transform .08s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, filter .15s ease;
  display:inline-flex;
  gap: 8px;
  align-items:center;
  justify-content:center;
  white-space: nowrap;
  user-select: none;
}

.btn:hover{
  border-color: var(--stroke-2);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}

.btn:active{ transform: translateY(1px); }

.btn.primary{
  border-color: rgba(124,92,255,0.55);
  background: linear-gradient(180deg, rgba(124,92,255,0.22), rgba(124,92,255,0.10));
}

.btn.utility{ background: rgba(255,255,255,0.03); }
.btn.utility:hover{ background: rgba(255,255,255,0.08); }

/* Phase 2: missing variants used in markup */
.btn.small{
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 12px;
}
.btn.ghost{
  background: transparent;
}
.btn.ghost:hover{
  background: rgba(255,255,255,0.06);
}

.helper{
  padding: 10px 12px;
  border-top: 1px solid var(--stroke);
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.actions{ justify-content:flex-start; }

.hint{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  max-width: 680px;
}

/* Phase 2: Sharebar */
.sharebar{
  margin-top: 4px;
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.sharebarLabel{
  letter-spacing: 0.2px;
}

.sharebarRow{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.shareInput{
  flex: 1 1 420px;
  min-width: 220px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px 12px;
  color: rgba(255,255,255,0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---------------------------
   Board
   --------------------------- */

.boardWrap{
  display:flex;
  justify-content:center;
  padding-top: 6px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
} 

.board{
  position: relative;
  display:block;
  margin: 0 auto;
  will-change: transform;
}

/* ---------------------------
   Tiles (textures + overlays)
   --------------------------- */

.tile{
  width: var(--hex-w);
  height: var(--hex-h);
  position:absolute;

  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );

  display:flex;
  align-items:center;
  justify-content:center;

  border: none;
  isolation: isolate;

  background-color: #222;
  background-image: var(--tex);
  background-size: var(--tex-scale, cover);
  background-position: var(--tex-x, 50%) var(--tex-y, 50%);
  background-repeat: no-repeat;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    var(--tile-shadow);

  transform: translateY(-18px) scale(0.985);
  opacity: 0;
  animation: drop .42s cubic-bezier(.2,.9,.2,1) forwards;

  transition:
    box-shadow .18s ease,
    transform .18s ease,
    filter .18s ease;
}

.tile::before{
  content:"";
  position:absolute;
  inset: 0;
  clip-path: inherit;
  pointer-events:none;
  z-index: 1;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 10px 22px rgba(255,255,255,0.07),
    inset 0 -16px 22px rgba(0,0,0,0.22);
}

.tile::after{
  content:"";
  position:absolute;
  inset: 0;
  clip-path: inherit;
  pointer-events:none;
  z-index: 2;

  background:
    radial-gradient(150px 110px at 28% 20%, rgba(255,255,255,var(--tile-shine-a)), transparent 62%),
    radial-gradient(180px 140px at 75% 88%, rgba(0,0,0,var(--tile-shade-a)), transparent 66%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,var(--token-dim)) 0%, rgba(0,0,0,0) 56%);
  opacity: 1;
}

.tile.sea{
  --tile-shine-a: 0.10;
  --tile-shade-a: 0.22;
  --token-dim: 0.18;
}
.tile.sea::after{
  background:
    linear-gradient(180deg, rgba(7,10,14,0.10), rgba(7,10,14,0.10)),
    radial-gradient(160px 120px at 28% 18%, rgba(255,255,255,0.10), transparent 64%),
    radial-gradient(190px 150px at 75% 88%, rgba(0,0,0,0.22), transparent 68%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 56%);
}

.tile.gold{
  --token-dim: 0.20;
  --tile-shine-a: 0.10;
  --tile-shade-a: 0.30;
}
.tile.gold::after{
  background:
    linear-gradient(180deg, rgba(7,10,14,0.08), rgba(7,10,14,0.08)),
    radial-gradient(150px 110px at 28% 20%, rgba(255,255,255,0.10), transparent 64%),
    radial-gradient(190px 150px at 75% 88%, rgba(0,0,0,0.30), transparent 68%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 56%);
}

.tile.ore{
  --token-dim: 0.18;
  --tile-shade-a: 0.30;
}

.tile:hover{
  box-shadow: var(--tile-shadow-hover);
}

@keyframes drop{
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

/* ---------------------------
   Tokens (premium chips)
   --------------------------- */

.token{
  width: var(--chip);
  height: var(--chip);
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  position: relative;
  z-index: 3;

  font-weight: 900;
  font-size: 16px;

  background: linear-gradient(180deg, #f1ecdf 0%, #d7c7a3 100%);
  color: #141414;

  border: 1px solid rgba(0,0,0,0.24);

  box-shadow:
    0 12px 22px rgba(0,0,0,0.34),
    0 2px 0 rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.58),
    inset 0 -2px 5px rgba(0,0,0,0.20);

  text-shadow: 0 1px 0 rgba(255,255,255,0.30);

  transition: transform .12s ease, box-shadow .15s ease;
}

.token::before{
  content:"";
  position:absolute;
  inset: 5px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  opacity: 0.85;
}

.tile.token-hot .token{
  color: #b0121b;
  border-color: rgba(176,18,27,0.45);
  box-shadow:
    0 14px 24px rgba(0,0,0,0.36),
    0 0 20px rgba(255,80,90,0.14),
    inset 0 1px 0 rgba(255,255,255,0.58),
    inset 0 -2px 5px rgba(0,0,0,0.20);
}

.tile.token-cold .token{
  color: #1a3552;
  border-color: rgba(80,200,255,0.22);
}

.tile:hover .token{
  transform: translateY(-2px);
}

/* ---------------------------
   Reduced motion
   --------------------------- */

@media (prefers-reduced-motion: reduce){
  .tile{
    animation: none;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: none;
  }
  .tile:hover .token{ transform: none; }
}

/* ----------------------------------------------------------
   Terrain fallbacks (ONLY when there is NO texture)
   IMPORTANT: use background-image, NOT background shorthand
   ---------------------------------------------------------- */

.tile.no-tex.sea    { background-image: linear-gradient(180deg, #356bff, #14306c); }
.tile.no-tex.wood   { background-image: linear-gradient(180deg, #2f8c48, #1f5f32); }
.tile.no-tex.sheep  { background-image: linear-gradient(180deg, #a9db78, #6ea94b); }
.tile.no-tex.wheat  { background-image: linear-gradient(180deg, #ffe27b, #d7b134); }
.tile.no-tex.ore    { background-image: linear-gradient(180deg, #8a8f98, #565b63); }
.tile.no-tex.brick  { background-image: linear-gradient(180deg, #a06b5a, #6b4236); }
.tile.no-tex.desert { background-image: linear-gradient(180deg, #e8dcc7, #cdb89f); }
.tile.no-tex.gold   { background-image: linear-gradient(180deg, #ffd979, #efb52f); }
.tile.no-tex.fog    { background-image: linear-gradient(180deg, #7b8392, #3b4250); }

/* ==========================================================
   Stats below board (Phase 1 + Phase 2 link syncing)
   ========================================================== */

.statsWrap{
  margin-top: 16px;
}

.statsCard{
  padding: 0;
}

.statsHeader{
  padding: 12px;
  border-bottom: 1px solid var(--stroke);
  display:flex;
  flex-wrap: wrap;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

.statsHeaderLeft{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.statsTitleRow{
  display:flex;
  align-items:center;
  gap: 10px;
}

.statsTitle{
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: 15px;
}

.statsHeaderRight{
  display:flex;
  gap: 10px;
  align-items:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

.pill.pill-warn{
  border-color: rgba(255,176,32,0.45);
  background: rgba(255,176,32,0.10);
  box-shadow: 0 0 0 4px rgba(255,176,32,0.06);
}

.statsCard.is-dirty .statsTitle::after{
  content:"";
  display:inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 8px;
  background: rgba(255,176,32,0.95);
  box-shadow: 0 0 18px rgba(255,176,32,0.22);
  vertical-align: middle;
}

.statsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
}

@media (max-width: 860px){
  .statsGrid{ grid-template-columns: 1fr; }
}

.statsSection{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.20);
  border-radius: 14px;
  padding: 10px;
}

.statsSectionTitle{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.35px;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.statsList{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

/* Terrain row */
.statRow{
  display:grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items:center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
}

.statRow.is-dirty{
  border-color: rgba(255,176,32,0.28);
  box-shadow: 0 0 0 4px rgba(255,176,32,0.05);
}

.statMain{
  display:flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.statLabel{
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actualValue{
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.2px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
}

/* Controls */
.statControls{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items:flex-end;
}

.ctl{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.ctlDivider{
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,0.10);
  border-radius: 1px;
  margin: 0 6px;
}

.ctlLabel{
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2px;
  margin-left: 2px;
}

.stepper{
  display:flex;
  align-items:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  overflow:hidden;
}

.stepBtn{
  appearance:none;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.88);
  cursor:pointer;
  width: 34px;
  height: 30px;
  font-size: 18px;
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .15s ease;
}

.stepBtn:hover{ background: rgba(255,255,255,0.08); }
.stepBtn:active{ background: rgba(255,255,255,0.12); }

.stepVal{
  min-width: 34px;
  text-align:center;
  font-weight: 900;
  font-size: 13px;
  padding: 0 10px;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.92);
}

/* Mini hex */
.statHex{
  width: 44px;
  height: 50px;
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );

  background-color: #222;
  background-image: var(--tex);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.30),
    inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* Token meta + grid */
.tokenMeta{
  margin: 2px 0 10px;
  line-height: 1.35;
}

.tokenGrid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 540px){
  .tokenGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tokenItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
}

.statTok{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 14px;
  background: linear-gradient(180deg, #f3ead2 0%, #d8c49a 100%);
  color: #1b1b1b;
  border: 1px solid rgba(0,0,0,0.22);
  box-shadow:
    0 10px 16px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.statTok.hot{
  color: #b0121b;
  border-color: rgba(176,18,27,0.45);
  box-shadow:
    0 10px 16px rgba(0,0,0,0.25),
    0 0 18px rgba(255,80,90,0.12),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.statTok.cold{
  color: #1a3552;
  border-color: rgba(80,200,255,0.22);
}

.tokenCount{
  font-weight: 900;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
}

/* ==========================================================
   Ambient Animations — Phase 1 (Sea / Fog / Gold) — v1.1
   Update: Sea waves drift from top-left -> bottom-right
   - Multiple independent wave layers (different scales/speeds)
   - Subtle overlays only (texture remains static)
   - Respects prefers-reduced-motion
   ========================================================== */

:root{
  --anim-sea: 36s;
  --anim-fog: 26s;
  --anim-gold: 22s;

  /* SEA wave intensity (keep low!) */
  --sea-wave-a: 0.050;
  --sea-wave-b: 0.035;
  --sea-wave-c: 0.025;

  /* FOG */
  --fx-fog-noise: 0.06;

  /* GOLD */
  --fx-gold-glint: 0.12;
}

/* Smooth overlay animation */
.tile::after{
  will-change: background-position, opacity;
}

/* ==========================================================
   Ambient Animations — Phase 1 (Sea / Fog / Gold) — v1.4
   - Sea: diagonal wave drift aligned to texture (155/151/158deg)
   - Fog: matches fog TEXTURE (soft volumetric pads, no wave bands)
          drift via background-position + opacity only (no transform)
   - Gold: rare soft glint
   - Respects prefers-reduced-motion
   ========================================================== */

:root{
  --anim-sea: 36s;
  --anim-fog: 30s;
  --anim-gold: 22s;

  /* SEA wave intensity (keep low!) */
  --sea-wave-a: 0.050;
  --sea-wave-b: 0.035;
  --sea-wave-c: 0.025;

  /* FOG overlay intensity (tuned to your fog texture) */
  --fog-haze-top: 0.10;     /* top haze */
  --fog-haze-bot: 0.08;     /* bottom haze */
  --fog-hi-a: 0.14;         /* bright volume pad */
  --fog-hi-b: 0.10;
  --fog-sh-a: 0.10;         /* shadow volume pad */
  --fog-sh-b: 0.08;
  --fog-blue: 0.045;        /* cool tint to match texture */

  /* GOLD */
  --fx-gold-glint: 0.12;
}

/* Smooth overlay animation */
.tile::after{
  will-change: background-position, opacity;
}

/* ---------------------------
   SEA — diagonal wave drift (top-left -> bottom-right)
   --------------------------- */

.tile.sea::after{
  background-image:
    /* calm toning */
    linear-gradient(180deg, rgba(7,10,14,0.10), rgba(7,10,14,0.10)),
    /* gentle highlight */
    radial-gradient(160px 120px at 28% 18%, rgba(255,255,255,0.10), transparent 64%),
    /* gentle shade */
    radial-gradient(190px 150px at 75% 88%, rgba(0,0,0,0.22), transparent 68%),
    /* token readability */
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 56%),

    /* Wave layer A */
    repeating-linear-gradient(
      155deg,
      rgba(255,255,255,var(--sea-wave-a)) 0 10px,
      rgba(255,255,255,0.00) 10px 34px
    ),

    /* Wave layer B */
    repeating-linear-gradient(
      151deg,
      rgba(255,255,255,var(--sea-wave-b)) 0 8px,
      rgba(255,255,255,0.00) 8px 26px
    ),

    /* Wave layer C */
    repeating-linear-gradient(
      158deg,
      rgba(255,255,255,var(--sea-wave-c)) 0 12px,
      rgba(255,255,255,0.00) 12px 44px
    );

  background-size:
    auto,
    auto,
    auto,
    auto,
    520px 520px,
    760px 760px,
    980px 980px;

  background-position:
    0 0,
    28% 18%,
    75% 88%,
    50% 50%,
    0 0,
    0 0,
    0 0;

  animation: seaWavesDiagonal var(--anim-sea) linear infinite;
}

@keyframes seaWavesDiagonal{
  0%{
    background-position:
      0 0,
      28% 18%,
      75% 88%,
      50% 50%,
      0 0,
      0 0,
      0 0;
  }
  50%{
    background-position:
      0 0,
      28% 18%,
      75% 88%,
      50% 50%,
      140px 140px,
      90px 90px,
      55px 55px;
  }
  100%{
    background-position:
      0 0,
      28% 18%,
      75% 88%,
      50% 50%,
      280px 280px,
      180px 180px,
      110px 110px;
  }
}

/* ---------------------------
   FOG — overlay matched to fog TEXTURE (soft volumetric “pads”)
   - NO waves, NO banding, NO transform
   - Only gentle drifting light/shadow volumes + slight cool tint
   --------------------------- */

.tile.fog::after{
  background-image:
    /* Base haze (keeps fog “present”) */
    linear-gradient(
      180deg,
      rgba(255,255,255,var(--fog-haze-top)),
      rgba(255,255,255,var(--fog-haze-bot))
    ),

    /* Cool tint to match your slightly bluish fog texture */
    linear-gradient(
      180deg,
      rgba(160,190,255,var(--fog-blue)),
      rgba(160,190,255,0.00)
    ),

    /* Soft highlight volumes (big, cloudy, non-directional) */
    radial-gradient(320px 280px at 30% 35%, rgba(255,255,255,var(--fog-hi-a)), transparent 74%),
    radial-gradient(380px 320px at 70% 40%, rgba(255,255,255,var(--fog-hi-b)), transparent 78%),
    radial-gradient(360px 340px at 45% 75%, rgba(255,255,255,calc(var(--fog-hi-b) * 0.85)), transparent 80%),

    /* Soft shadow volumes (adds depth, still very subtle) */
    radial-gradient(420px 360px at 78% 78%, rgba(0,0,0,var(--fog-sh-a)), transparent 82%),
    radial-gradient(380px 340px at 22% 82%, rgba(0,0,0,var(--fog-sh-b)), transparent 84%);

  background-size:
    auto,
    auto,
    140% 140%,
    160% 160%,
    170% 170%,
    190% 190%,
    190% 190%;

  background-position:
    0 0,
    0 0,
    30% 35%,
    70% 40%,
    45% 75%,
    78% 78%,
    22% 82%;

  opacity: 0.90;
  animation: fogPadsDrift var(--anim-fog) ease-in-out infinite;
}

@keyframes fogPadsDrift{
  0%{
    opacity: 0.88;
    background-position:
      0 0,
      0 0,
      30% 35%,
      70% 40%,
      45% 75%,
      78% 78%,
      22% 82%;
  }

  35%{
    opacity: 0.92;
    background-position:
      0 0,
      0 0,
      34% 31%,
      66% 44%,
      49% 71%,
      74% 81%,
      26% 79%;
  }

  70%{
    opacity: 0.91;
    background-position:
      0 0,
      0 0,
      28% 39%,
      74% 36%,
      41% 79%,
      82% 74%,
      18% 88%;
  }

  100%{
    opacity: 0.88;
    background-position:
      0 0,
      0 0,
      30% 35%,
      70% 40%,
      45% 75%,
      78% 78%,
      22% 82%;
  }
}

/* ---------------------------
   GOLD — rare soft glint
   --------------------------- */

.tile.gold::after{
  background-image:
    linear-gradient(180deg, rgba(7,10,14,0.08), rgba(7,10,14,0.08)),
    radial-gradient(150px 110px at 28% 20%, rgba(255,255,255,0.10), transparent 64%),
    radial-gradient(190px 150px at 75% 88%, rgba(0,0,0,0.30), transparent 68%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 56%),
    linear-gradient(
      120deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.00) 46%,
      rgba(255,255,255,var(--fx-gold-glint)) 50%,
      rgba(255,255,255,0.00) 54%,
      rgba(255,255,255,0.00) 100%
    );

  background-size:
    auto,
    auto,
    auto,
    auto,
    240% 240%;

  background-position:
    0 0,
    28% 20%,
    75% 88%,
    50% 50%,
    -220% -220%;

  animation: goldGlint var(--anim-gold) linear infinite;
}

@keyframes goldGlint{
  0%, 72%{
    background-position:
      0 0,
      28% 20%,
      75% 88%,
      50% 50%,
      -220% -220%;
  }
  82%{
    background-position:
      0 0,
      28% 20%,
      75% 88%,
      50% 50%,
      40% 40%;
  }
  92%, 100%{
    background-position:
      0 0,
      28% 20%,
      75% 88%,
      50% 50%,
      260% 260%;
  }
}

/* ---------------------------
   Reduced motion — disable ambient animations
   --------------------------- */

@media (prefers-reduced-motion: reduce){
  .tile.sea::after,
  .tile.fog::after,
  .tile.gold::after{
    animation: none !important;
  }
}