/* ============================================================================
   PAINTED 2D BOARD (js/board2d.js) — a top-down painted island on a drifting
   sea seen at an isometric tilt (ground squashed in JS, see ISO in board2d.js).
   Lives inside #board-svg.
   ============================================================================ */
#board-container{transform:none !important;display:block;}
#board-svg{position:relative;width:100%;height:100%;display:block;}

.b2d{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;
  background:#1d6f7c;-webkit-user-select:none;user-select:none;}
.b2d.b2d-dragging{cursor:grabbing;}
.b2d-sea{position:absolute;inset:0;pointer-events:none;
  background-image:url("Ressources/Painted/board/sea.png");background-repeat:repeat;
  filter:saturate(1.08) brightness(1.02);}
.b2d-sea-shimmer{mix-blend-mode:soft-light;opacity:.55;filter:hue-rotate(-8deg) brightness(1.25);}

.b2d-world{position:absolute;left:0;top:0;transform-origin:0 0;}
.b2d-under,.b2d-over{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;}
.b2d-over{pointer-events:none;}
#board-container .b2d-svg{position:absolute;overflow:visible;max-width:none;max-height:none;filter:none;}
.b2d-svg image{image-rendering:auto;}

.b2d-coast,.b2d-surf{position:absolute;pointer-events:none;max-width:none;}
.b2d-surf{animation:b2dSurf 5.2s ease-in-out infinite;will-change:opacity,transform;}
@keyframes b2dSurf{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:.85;transform:scale(1.012);}}

/* slabs */
.b2d-earth{fill:#3a2a1a;stroke:#2a1c10;stroke-width:3;stroke-linejoin:round;}
.b2d-tile-rim{fill:none;stroke:rgba(255,246,220,.28);stroke-width:1.4;}
.b2d-tile-shade{pointer-events:none;}
.b2d-robber-mode .b2d-tile{cursor:pointer;}

/* tokens */
.b2d-num{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:20px;fill:#2a1d10;text-anchor:middle;dominant-baseline:central;}
.b2d-num.hot{fill:#a8261a;}
.b2d-pips{font-family:"IBM Plex Sans",sans-serif;font-size:9px;fill:#5a4630;text-anchor:middle;dominant-baseline:central;letter-spacing:-1px;}
.b2d-pips.hot{fill:#a8261a;}
.b2d-static .b2d-num{font-size:17px;}

/* harbours */
.b2d-port-face{fill:#f6ead0;stroke:#8a5a2c;stroke-width:1.2;}
.b2d-anchor{fill:none;stroke:#3d2a18;stroke-width:2.6;stroke-linecap:round;}
.b2d-port-rate{fill:#4a2c16;stroke:#e0b86a;stroke-width:1.2;}
.b2d-port-rate-text{fill:#fff4dc;font:800 11px "IBM Plex Sans",system-ui,sans-serif;text-anchor:middle;letter-spacing:.02em;}
.b2d-rope{stroke:#e8d7ae;stroke-width:1.6;stroke-dasharray:3 3;opacity:.85;}

/* pieces */
.b2d-roadShadow line,.b2d-roadEdge line,.b2d-roads line{fill:none;stroke-linecap:round;}
.b2d-road-shadow{stroke:rgba(20,12,4,.42);filter:blur(1.5px);}
.b2d-road-edge,.b2d-road-side{stroke:#1a120a;}
.b2d-road-dark{filter:brightness(.62) saturate(1.1);}
.b2d-road-glint{stroke:rgba(255,255,255,.38);}
.b2d-plinth{stroke:#1a120a;stroke-width:1.5;}
.b2d-piece-fallback{stroke:#1a120a;stroke-width:1.5;}
.b2d-crown{fill:#f4c542;stroke:#6b4a10;stroke-width:1.2;}
.b2d-crown-glow{fill:rgba(255,214,110,.45);}

/* hints */
.b2d-hint-node{cursor:pointer;}
.b2d-hint-node-hit{fill:transparent;}
.b2d-hint-node-halo{fill:rgba(255,222,140,.32);stroke:rgba(255,236,190,.9);stroke-width:1.5;
  transform-box:fill-box;transform-origin:center;animation:b2dPulse 1.3s ease-in-out infinite;}
.b2d-hint-node-dot{fill:#ffd36b;stroke:#5a3a10;stroke-width:1.5;}
.b2d-hint-node:hover .b2d-hint-node-halo{fill:rgba(255,222,140,.7);animation:none;transform:scale(1.35);}
@keyframes b2dPulse{0%,100%{transform:scale(.85);opacity:.7;}50%{transform:scale(1.2);opacity:1;}}
.b2d-hint-edge{cursor:pointer;}
.b2d-hint-edge-hit{stroke:transparent;stroke-width:18;stroke-linecap:round;}
.b2d-hint-edge-line{stroke:#ffd36b;stroke-width:5;stroke-linecap:round;stroke-dasharray:1 9;
  animation:b2dDash 1s linear infinite;filter:drop-shadow(0 0 3px rgba(255,210,120,.9));}
.b2d-hint-edge:hover .b2d-hint-edge-line{stroke-dasharray:none;stroke-width:7;}
@keyframes b2dDash{to{stroke-dashoffset:-10;}}
.b2d-hint-tile{fill:rgba(255,196,90,.10);stroke:#ffcf6a;stroke-width:2.5;stroke-dasharray:8 6;cursor:pointer;
  animation:b2dDash 1.2s linear infinite;}
.b2d-hint-tile:hover{fill:rgba(255,120,80,.28);stroke:#ff8a5a;}

/* fx */
.b2d-dust{fill:#e9dcc0;}
.b2d-spark{filter:drop-shadow(0 0 2px #ffe7a0);}

/* life */
.b2d-boat{position:absolute;left:0;top:0;width:60px;height:60px;will-change:transform;
  filter:drop-shadow(3px 6px 4px rgba(10,30,40,.35));}
.b2d-gull{position:absolute;left:0;top:0;width:16px;height:6px;margin:-3px 0 0 -8px;will-change:transform;
  background:
    radial-gradient(ellipse 55% 100% at 25% 100%, transparent 58%, #fbf8f0 60%, #fbf8f0 76%, transparent 78%) left/50% 100% no-repeat,
    radial-gradient(ellipse 55% 100% at 75% 100%, transparent 58%, #fbf8f0 60%, #fbf8f0 76%, transparent 78%) right/50% 100% no-repeat;
  filter:drop-shadow(10px 18px 2px rgba(10,30,40,.28));}
.b2d-cloud{position:absolute;left:-260px;top:-150px;width:520px;height:300px;will-change:transform;
  background:
    radial-gradient(closest-side at 35% 55%, rgba(10,25,35,.16), transparent),
    radial-gradient(closest-side at 62% 45%, rgba(10,25,35,.14), transparent),
    radial-gradient(closest-side at 50% 62%, rgba(10,25,35,.12), transparent);
  mix-blend-mode:multiply;}

.b2d-grade{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;}
.b2d-tip{position:absolute;z-index:6;pointer-events:none;
  background:rgba(28,20,12,.92);color:#f0e5c8;border:1px solid #c8a75a;
  padding:4px 9px;border-radius:5px;font-size:.8rem;font-weight:600;white-space:nowrap;
  font-family:"IBM Plex Sans",sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.4);}

/* opening shot: slabs are laid down in a ripple from the centre */
.b2d-intro-pre .b2d-tile,.b2d-intro-pre .b2d-token,.b2d-intro-pre .b2d-port,.b2d-intro-pre .b2d-port-top,
.b2d-intro-pre .b2d-earth,.b2d-intro-pre .b2d-coast,.b2d-intro-pre .b2d-surf,
.b2d-intro-pre .b2d-pieces,.b2d-intro-pre .b2d-roads,.b2d-intro-pre .b2d-roadEdge,.b2d-intro-pre .b2d-roadShadow,.b2d-intro-pre .b2d-robber{opacity:0;}
.b2d-intro-run .b2d-tile{transform-box:fill-box;transform-origin:center;
  animation:b2dTileIn .75s cubic-bezier(.2,1.3,.4,1) both;animation-delay:var(--d);}
.b2d-intro-run .b2d-earth{animation:b2dFade .6s ease both .1s;}
.b2d-intro-run .b2d-coast,.b2d-intro-run .b2d-surf{animation:b2dFade 1.4s ease both .5s;}
.b2d-intro-run .b2d-token{animation:b2dFade .5s ease both 1.4s;}
.b2d-intro-run .b2d-port,.b2d-intro-run .b2d-port-top{animation:b2dFade .6s ease both 1.7s;}
.b2d-intro-run .b2d-pieces,.b2d-intro-run .b2d-roads,.b2d-intro-run .b2d-roadEdge,.b2d-intro-run .b2d-roadShadow,.b2d-intro-run .b2d-robber{animation:b2dFade .6s ease both 1.9s;}
@keyframes b2dTileIn{from{opacity:0;transform:translateY(-46px) scale(.55) rotate(-8deg);}60%{opacity:1;}to{opacity:1;transform:none;}}
@keyframes b2dFade{from{opacity:0;}to{opacity:1;}}

@media (prefers-reduced-motion:reduce){
  .b2d-surf,.b2d-hint-node-halo,.b2d-hint-edge-line,.b2d-hint-tile{animation:none;}
  .b2d-intro-run .b2d-tile{animation-duration:.01s;}
}