/* Board skins — selected per viewer via Board.setSkin(); render() puts .skin-<id> on the <svg>.
   The plain skin lives in app.css; these rules only override it for .skin-flat / .skin-neon. */

/* ---------- Flat graphic ---------- */

.board-wrap:has(> .board.skin-flat) { background: var(--board-flat, #1b2a44); }
.board.skin-flat .hex-base { stroke: none; }
.board.skin-flat .hex-edge { fill: none; stroke: #141110; stroke-width: 3.8; stroke-linejoin: round; }
.board.skin-flat .fog { fill: #6f7f96; }
.board.skin-flat .fog-revealed { fill: #fff; opacity: 0.18; }
.board.skin-flat .fog-q { fill: #fff; stroke: #141110; stroke-width: 2.2; paint-order: stroke; font: 900 22px var(--font); }
.board.skin-flat .hint {
  fill: #fff; stroke: #141110; stroke-width: 2.6; paint-order: stroke; stroke-linejoin: round;
  font: 800 9px var(--font); opacity: 1;
}
.board.skin-flat .chip { fill: #fff6e0; stroke: #141110; stroke-width: 2.4; }
.board.skin-flat .chip-num { fill: #141110; font: 900 14px var(--font); }
.board.skin-flat .chip-num.hot, .board.skin-flat .pip.hot { fill: #d3202e; }
.board.skin-flat .pip { fill: #141110; }
.board.skin-flat .nostart { stroke: #d3202e; stroke-width: 3; }
.board.skin-flat .dock { stroke: #d9a35c; stroke-width: 5; }
.board.skin-flat .jetty { stroke: #141110; stroke-width: 2.6; }
.board.skin-flat .harbour { stroke: #141110; stroke-width: 2.2; }
.board.skin-flat .harbour-label { fill: #141110; font: 900 9px var(--font); }
.board.skin-flat .harbour-label.light { fill: #fff; }
.board.skin-flat .barbarian {
  fill: #fff; stroke: #141110; stroke-width: 2.6; paint-order: stroke; stroke-linejoin: round; font: 900 10px var(--font);
}

/* ---------- Cyberpunk / neon ---------- */

.board-wrap:has(> .board.skin-neon) { background: var(--board-neon, #05040a); border-color: var(--board-neon-edge, #2a1830); }
.board.skin-neon .hex-base { stroke: none; }
.board.skin-neon .hex-edge { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.board.skin-neon .hex-edge.t-ocean { opacity: 0.45; }
.board.skin-neon .hex-edge.t-fog, .board.skin-neon .hex-edge.t-random { opacity: 0.7; }
.board.skin-neon .fog { fill: #090b12; }
.board.skin-neon .fog-revealed { fill: #8fd8ff; opacity: 0.07; }
.board.skin-neon .fog-q { fill: #6f86b8; font: 700 20px ui-monospace, monospace; }
.board.skin-neon .hint { fill: #cfd6ff; font: 600 8.5px ui-monospace, monospace; opacity: 0.9; }
.board.skin-neon .chip { fill: #07060d; stroke: #19e6ff; stroke-width: 1.6; }
.board.skin-neon .chip.hot { stroke: #ff2d75; }
.board.skin-neon .chip-num { fill: #eef4ff; font: 700 13px ui-monospace, monospace; }
.board.skin-neon .chip-num.hot, .board.skin-neon .pip.hot { fill: #ff4d8d; }
.board.skin-neon .pip { fill: #9feeff; }
.board.skin-neon .nostart { stroke: #ff2d75; stroke-width: 2.6; }
.board.skin-neon .dock { stroke: #19e6ff; stroke-width: 3; opacity: 0.8; }
.board.skin-neon .jetty { stroke: #19e6ff; stroke-width: 1.6; opacity: 0.85; }
.board.skin-neon .harbour { fill: #07060d; stroke: var(--res, #e8ecff); stroke-width: 1.6; }
.board.skin-neon .harbour-label,
.board.skin-neon .harbour-label.light { fill: var(--res, #e8ecff); font: 700 9px ui-monospace, monospace; }
.board.skin-neon .barbarian { fill: #ff4d8d; font: 700 10px ui-monospace, monospace; }

/* pieces stay player-coloured; give them a crisp light rim so they pop on dark tiles */
.board.skin-neon .road-under { stroke: #e8ecff; stroke-width: 7.5; opacity: 0.85; }
.board.skin-neon .piece { stroke: #e8ecff; stroke-width: 1.3; }
.board.skin-neon .wall { fill: #2a2438; stroke: #e8ecff; }
.board.skin-neon .mast { stroke: #e8ecff; }
.board.skin-neon .robber-body { fill: #1a1622; stroke: #ff2d75; stroke-width: 1.4; }
.board.skin-neon .pirate-hull { fill: #0d0b14; stroke: #ff2d75; }
.board.skin-neon .pirate-flag { stroke: #ff2d75; }

/* ---------- Parchment map ---------- */

.board-wrap:has(> .board.skin-parchment) {
  background: var(--board-parchment, radial-gradient(ellipse at center, #5b3b22 0%, #3a2414 70%, #24160c 100%)); border-color: var(--board-parchment-edge, #6b4a2a);
}
.board.skin-parchment .hex-base { stroke: none; }
.board.skin-parchment .hex-edge { fill: none; stroke: #4a3220; stroke-width: 1.2; stroke-linejoin: round; opacity: 0.85; }
.board.skin-parchment .fog { fill: #c9b994; }
.board.skin-parchment .fog-revealed { fill: #fff8e0; opacity: 0.2; }
.board.skin-parchment .fog-q { fill: #4a3220; font: italic 700 20px Georgia, "Times New Roman", serif; }
.board.skin-parchment .hint { fill: #3a2414; font: italic 700 9px Georgia, "Times New Roman", serif; opacity: 0.9; }
.board.skin-parchment .chip { fill: #f4e7c5; stroke: #4a3220; stroke-width: 1.4; }
.board.skin-parchment .chip.hot { stroke: #8e1b12; stroke-width: 1.8; }
.board.skin-parchment .chip-num { fill: #2e1e12; font: 700 13.5px Georgia, "Times New Roman", serif; }
.board.skin-parchment .chip-num.hot, .board.skin-parchment .pip.hot { fill: #8e1b12; }
.board.skin-parchment .pip { fill: #4a3220; }
.board.skin-parchment .nostart { stroke: #8e1b12; stroke-width: 2.6; }
.board.skin-parchment .dock { stroke: #7a5532; stroke-width: 4; }
.board.skin-parchment .jetty { stroke: #4a3220; stroke-width: 1.8; }
.board.skin-parchment .harbour { stroke: #4a3220; stroke-width: 1.3; }
.board.skin-parchment .harbour-label,
.board.skin-parchment .harbour-label.light { fill: #2e1e12; font: 700 9px Georgia, "Times New Roman", serif; }
.board.skin-parchment .barbarian { fill: #8e1b12; font: italic 700 10px Georgia, "Times New Roman", serif; }

/* ---------- Pixel art ---------- */

.board-wrap:has(> .board.skin-pixel) { background: var(--board-pixel, #12122a); border-radius: 0; }
.board.skin-pixel .tiles, .board.skin-pixel .edges, .board.skin-pixel .chip, .board.skin-pixel .pip,
.board.skin-pixel .harbour { shape-rendering: crispEdges; }
.board.skin-pixel .hex-base { stroke: none; }
.board.skin-pixel .hex-edge { fill: none; stroke: #101018; stroke-width: 3; stroke-linejoin: miter; shape-rendering: crispEdges; }
.board.skin-pixel .fog { fill: #5c6a8a; }
.board.skin-pixel .fog-revealed { fill: #fff; opacity: 0.16; }
.board.skin-pixel .fog-q { fill: #fff; stroke: #101018; stroke-width: 2; paint-order: stroke; font: 900 20px ui-monospace, "Courier New", monospace; }
.board.skin-pixel .hint {
  fill: #fff; stroke: #101018; stroke-width: 2.4; paint-order: stroke; font: 800 8.5px ui-monospace, "Courier New", monospace; opacity: 1;
}
.board.skin-pixel .chip { fill: #fffbe8; stroke: #101018; stroke-width: 2.2; }
.board.skin-pixel .chip-num { fill: #101018; font: 900 13px ui-monospace, "Courier New", monospace; }
.board.skin-pixel .chip-num.hot, .board.skin-pixel .pip.hot { fill: #e8202a; }
.board.skin-pixel .pip { fill: #101018; }
.board.skin-pixel .nostart { stroke: #e8202a; stroke-width: 3; stroke-linecap: square; }
.board.skin-pixel .dock { stroke: #c8884a; stroke-width: 4; stroke-linecap: square; }
.board.skin-pixel .jetty { stroke: #101018; stroke-width: 2.4; }
.board.skin-pixel .harbour { stroke: #101018; stroke-width: 2; }
.board.skin-pixel .harbour-label { fill: #101018; font: 900 8.5px ui-monospace, "Courier New", monospace; }
.board.skin-pixel .harbour-label.light { fill: #fff; }
.board.skin-pixel .barbarian {
  fill: #ffe14a; stroke: #101018; stroke-width: 2.4; paint-order: stroke; font: 900 10px ui-monospace, "Courier New", monospace;
}

/* ---------- Low-poly ---------- */

.board-wrap:has(> .board.skin-lowpoly) { background: var(--board-lowpoly, #16233a); }
.board.skin-lowpoly .hex-base { stroke: none; }
.board.skin-lowpoly .hex-edge { fill: none; stroke: #eef3fb; stroke-width: 1.3; stroke-linejoin: round; opacity: 0.7; }
.board.skin-lowpoly .fog { fill: #7d8aa0; }
.board.skin-lowpoly .fog-revealed { fill: #fff; opacity: 0.14; }
.board.skin-lowpoly .fog-q { fill: #fff; font: 800 20px var(--font); opacity: 0.9; }
.board.skin-lowpoly .hint {
  fill: #fff; stroke: #1c2433; stroke-width: 2.2; paint-order: stroke; stroke-linejoin: round; font: 700 8.5px var(--font); opacity: 1;
}
.board.skin-lowpoly .chip { fill: #f7f3ea; stroke: #2a2f3a; stroke-width: 1.2; stroke-linejoin: round; }
.board.skin-lowpoly .chip-num { fill: #23262e; font: 800 13px var(--font); }
.board.skin-lowpoly .chip-num.hot, .board.skin-lowpoly .pip.hot { fill: #d3263a; }
.board.skin-lowpoly .pip { fill: #23262e; }
.board.skin-lowpoly .nostart { stroke: #d3263a; stroke-width: 2.6; }
.board.skin-lowpoly .dock { stroke: #e3c08f; stroke-width: 4; }
.board.skin-lowpoly .jetty { stroke: #7a5a3a; stroke-width: 2.2; }
.board.skin-lowpoly .harbour { stroke: #2a2f3a; stroke-width: 1.2; }
.board.skin-lowpoly .harbour-label { fill: #23262e; font: 800 9px var(--font); }
.board.skin-lowpoly .barbarian {
  fill: #fff; stroke: #1c2433; stroke-width: 2.4; paint-order: stroke; stroke-linejoin: round; font: 800 10px var(--font);
}

/* ---------- Mario: 16-bit island world ---------- */

.board-wrap:has(> .board.skin-mario) { background: var(--board-mario, #6cb4f8); }
.board.skin-mario .hex-base { stroke: none; }
.board.skin-mario .hex-edge { fill: none; stroke: #1a120c; stroke-width: 2.6; stroke-linejoin: round; }
.board.skin-mario .fog { fill: #9eb6d4; }
.board.skin-mario .fog-revealed { fill: #fff; opacity: 0.16; }
.board.skin-mario .fog-q { fill: #fff; stroke: #1a120c; stroke-width: 2.4; paint-order: stroke; font: 900 20px var(--font); }
.board.skin-mario .hint { fill: #1a120c; font: 800 9px var(--font); }
.board.skin-mario .chip { fill: #fff; stroke: #1a120c; stroke-width: 2.4; }
.board.skin-mario .chip-num { fill: #1a120c; font: 900 14px var(--font); }
.board.skin-mario .chip-num.hot, .board.skin-mario .pip.hot { fill: #e02020; }
.board.skin-mario .pip { fill: #1a120c; }
.board.skin-mario .nostart { stroke: #e02020; stroke-width: 2.8; }
.board.skin-mario .dock { stroke: #f0d090; stroke-width: 4.5; }
.board.skin-mario .jetty { stroke: #1a120c; stroke-width: 2.2; }
.board.skin-mario .harbour { stroke: #1a120c; stroke-width: 2; }
.board.skin-mario .harbour-label { fill: #1a120c; font: 900 9px var(--font); }
.board.skin-mario .harbour-label.light { fill: #fff; }
.board.skin-mario .barbarian { fill: #fff; stroke: #1a120c; stroke-width: 2.4; paint-order: stroke; font: 900 10px var(--font); }

/* ---------- Zelda: old adventure map ---------- */

.board-wrap:has(> .board.skin-zelda) { background: var(--board-zelda, #102418); border-color: var(--board-zelda-edge, #3a5a30); }
.board.skin-zelda .hex-base { stroke: none; }
.board.skin-zelda .hex-edge { fill: none; stroke: #24180c; stroke-width: 1.5; stroke-linejoin: round; }
.board.skin-zelda .fog { fill: #c8c0a4; }
.board.skin-zelda .fog-revealed { fill: #fff8e0; opacity: 0.16; }
.board.skin-zelda .fog-q { fill: #24180c; font: 700 20px Georgia, "Times New Roman", serif; }
.board.skin-zelda .hint { fill: #24180c; font: 700 9px Georgia, "Times New Roman", serif; }
.board.skin-zelda .chip { fill: #f4e6c0; stroke: #6a5020; stroke-width: 1.6; }
.board.skin-zelda .chip.hot { stroke: #a02018; }
.board.skin-zelda .chip-num { fill: #24180c; font: 700 13px Georgia, "Times New Roman", serif; }
.board.skin-zelda .chip-num.hot, .board.skin-zelda .pip.hot { fill: #a02018; }
.board.skin-zelda .pip { fill: #24180c; }
.board.skin-zelda .nostart { stroke: #a02018; stroke-width: 2.4; }
.board.skin-zelda .dock { stroke: #c8a060; stroke-width: 4; }
.board.skin-zelda .jetty { stroke: #24180c; stroke-width: 1.6; }
.board.skin-zelda .harbour { stroke: #24180c; stroke-width: 1.3; }
.board.skin-zelda .harbour-label,
.board.skin-zelda .harbour-label.light { fill: #24180c; font: 700 9px Georgia, "Times New Roman", serif; }
.board.skin-zelda .barbarian { fill: #a02018; font: 700 10px Georgia, "Times New Roman", serif; }

/* ---------- Bebop: night space western ---------- */

.board-wrap:has(> .board.skin-bebop) { background: var(--board-bebop, #0c0e16); border-color: var(--board-bebop-edge, #2a241c); }
.board.skin-bebop .hex-base { stroke: none; }
.board.skin-bebop .hex-edge { fill: none; stroke: #e6c15a; stroke-width: 1.1; stroke-linejoin: round; opacity: 0.85; }
.board.skin-bebop .hex-edge.t-ocean { stroke: #3a4258; opacity: 0.9; }
.board.skin-bebop .fog { fill: #1a1e2c; }
.board.skin-bebop .fog-revealed { fill: #f4efe4; opacity: 0.06; }
.board.skin-bebop .fog-q { fill: #e6c15a; font: 700 18px var(--font); letter-spacing: 0.04em; }
.board.skin-bebop .hint { fill: #f4efe4; font: 600 8.5px var(--font); }
.board.skin-bebop .chip { fill: #16141c; stroke: #e6c15a; stroke-width: 1.5; }
.board.skin-bebop .chip.hot { stroke: #e07050; }
.board.skin-bebop .chip-num { fill: #f4efe4; font: 700 13px var(--font); }
.board.skin-bebop .chip-num.hot, .board.skin-bebop .pip.hot { fill: #e07050; }
.board.skin-bebop .pip { fill: #e6c15a; }
.board.skin-bebop .nostart { stroke: #e07050; stroke-width: 2.2; }
.board.skin-bebop .dock { stroke: #c45a40; stroke-width: 3.4; }
.board.skin-bebop .jetty { stroke: #e6c15a; stroke-width: 1.4; }
.board.skin-bebop .harbour { fill: #16141c; stroke: var(--res, #e6c15a); stroke-width: 1.4; }
.board.skin-bebop .harbour-label,
.board.skin-bebop .harbour-label.light { fill: #f4efe4; font: 700 9px var(--font); }
.board.skin-bebop .barbarian { fill: #e07050; font: 700 10px var(--font); letter-spacing: 0.04em; }
.board.skin-bebop .road-under { stroke: #f4efe4; stroke-width: 7; opacity: 0.75; }
.board.skin-bebop .piece { stroke: #f4efe4; stroke-width: 1.1; }
.board.skin-neon .piece.rim-dark,
.board.skin-neon .road-under.rim-dark,
.board.skin-bebop .piece.rim-dark,
.board.skin-bebop .road-under.rim-dark { stroke: #14110f; opacity: 1; }