/*
 * Feed the Kraken's own styles, kept out of assets/theme.css on purpose.
 *
 * theme.css is the shared foundation for every game on wesyarber.net/games and
 * it belongs to the parent repo. Adding an ftk- block to it would make merging
 * this sub-project a two-file change with a conflict-prone hunk in a file three
 * other games depend on. A second stylesheet loaded after it costs one <link>
 * and keeps the merge purely additive.
 *
 * Everything here inherits theme.css's custom properties, so a change to the
 * palette upstream carries through.
 */

/* --- the course track ---------------------------------------------------- */

.ftk-board {
  margin-bottom: 1rem;
}

/* The board is one SVG with a viewBox, so it just scales to its container —
   "make the map bigger" is this width, and there is nothing to measure. The
   live board fills the panel; the gallery previews are capped so both fit. */
.ftk-board-wrap { display: flex; justify-content: center; }
.ftk-map { width: 100%; height: auto; display: block; }
.ftk-board--live .ftk-map { max-width: 100%; }
.ftk-board--preview .ftk-map { max-width: 320px; }

/* The hexes. Fill/stroke, not border, because these are SVG polygons. Stroke
   width is in user units (viewBox ~10 per hex radius), so a thin hairline. */
.ftk-hex {
  fill: var(--panel, #131a22);
  stroke: var(--line, #2a3340);
  stroke-width: 0.5;
}

/* Action spaces, coloured as on Wes's drawings: teal cabin search, orange feed
   the kraken, purple flogging, pink off-with-the-tongue. A tinted fill and a
   matching outline so they read as the coloured cells on the board. */
.ftk-icon-cabin_search { fill: #123028; stroke: #6dd8c8; }
.ftk-icon-feed_kraken  { fill: #2e2110; stroke: #e88c22; }
.ftk-icon-flogging     { fill: #1e1633; stroke: #8a5cf0; }
.ftk-icon-tongue       { fill: #301425; stroke: #e06aa9; }

/* The victory ports: each faction's cells carry a dim fill of its colour and no
   per-hex outline, so same-colour cells merge into one region. The crisp line is
   the enclosed border round each region, drawn in the bold faction colour by
   .ftk-zone — Wes: "less bold fill, the colour as its border, a dimmer shade
   inside", so the crown no longer pulls the eye. */
.ftk-port { stroke: none; }
.ftk-port-red    { fill: #3a1613; }
.ftk-port-blue   { fill: #16203c; }
.ftk-port-yellow { fill: #302912; }

/* The victory zone border — one enclosed line round each faction's region, in
   that faction's colour, which the ship crosses into to win. */
.ftk-zone {
  stroke-width: 0.9;
  stroke-linecap: round;
  fill: none;
  opacity: 0.9;
}
.ftk-zone-red    { stroke: #e04b3d; }
.ftk-zone-blue   { stroke: #3f6dff; }
.ftk-zone-yellow { stroke: #f2cd47; }

/* The move-indicator arrows: where a red / blue / yellow card would steer the
   ship from each cell. Small, faint, coloured; two steering the same way sit
   side-by-side. */
.ftk-move { stroke-width: 0.6; stroke-linecap: round; opacity: 0.42; }
.ftk-move-red    { stroke: #e04b3d; }
.ftk-move-blue   { stroke: #4f7dff; }
.ftk-move-yellow { stroke: #f2cd47; }
.ftk-arrowhead { stroke: none; opacity: 0.42; }
.ftk-fill-red    { fill: #e04b3d; }
.ftk-fill-blue   { fill: #4f7dff; }
.ftk-fill-yellow { fill: #f2cd47; }

/* The island: a brown bar on a lattice hole the ship cannot sail through. */
.ftk-island { fill: #a8643c; stroke: #6b3d22; stroke-width: 0.6; }

/* The supply line: dashed run along the southern edge of the frontier cells. */
.ftk-supply-line {
  stroke: #eef1f5;
  stroke-width: 1.1;
  stroke-dasharray: 1.4 1.2;
  stroke-linecap: round;
}

.ftk-ship { fill: var(--accent, #4fd08a); stroke: #0c3a26; stroke-width: 0.6; }

/* Glyphs on the cells (icons, ports, the ship). Sized in user units. */
.ftk-glyph {
  font-size: 7px;
  font-weight: bold;
  fill: var(--muted, #7c8b9a);
  pointer-events: none;
}
.ftk-glyph-port { font-size: 8px; }                    /* coloured on dim ports */
.ftk-glyph-port-red    { fill: #f08a7e; }
.ftk-glyph-port-blue   { fill: #8aa6ff; }
.ftk-glyph-port-yellow { fill: #f2cd47; }
.ftk-glyph-ship { fill: #06121a; font-size: 9px; }
.ftk-glyph-cabin_search { fill: #6dd8c8; }
.ftk-glyph-feed_kraken  { fill: #e88c22; }
.ftk-glyph-flogging     { fill: #8a5cf0; }
.ftk-glyph-tongue       { fill: #e06aa9; }

.ftk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.7rem;
}
.ftk-leg-red    { color: #e04b3d; }
.ftk-leg-blue   { color: #6a90ff; }
.ftk-leg-yellow { color: #f2cd47; }

/* --- the two-course gallery (setup screen) ------------------------------- */

.ftk-gallery > summary {
  cursor: pointer;
  font-weight: bold;
  letter-spacing: 0.02em;
}

.ftk-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.75rem;
  margin-top: 0.75rem;
}

.ftk-gallery-item { text-align: center; flex: 0 1 auto; }
.ftk-gallery-item h3 { margin: 0 0 0.15rem; }
.ftk-gallery-item .ftk-board { margin-bottom: 0; }

/* --- factions ------------------------------------------------------------ */

.ftk-f-sailor      { color: #6aa9d8; }
.ftk-f-pirate      { color: #d86a6a; }
.ftk-f-cult_leader,
.ftk-f-cultist     { color: #a86ad8; }

.ftk-w-sailors { color: #6aa9d8; }
.ftk-w-pirates { color: #d86a6a; }
.ftk-w-cult    { color: #a86ad8; }

.ftk-guns { font-variant-numeric: tabular-nums; }

/* --- navigation cards ---------------------------------------------------- */

.ftk-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  border-left-width: 4px;
  border-left-style: solid;
}

.ftk-c-yellow { border-left-color: #d8c86a; }
.ftk-c-blue   { border-left-color: #6aa9d8; }
.ftk-c-red    { border-left-color: #d86a6a; }

.ftk-card-action { font-weight: bold; }
.ftk-card-dir { font-size: 0.75rem; }

/* --- banners ------------------------------------------------------------- */

.banner.ftk-b-yellow  { border-left-color: #d8c86a; }
.banner.ftk-b-blue    { border-left-color: #6aa9d8; }
.banner.ftk-b-red     { border-left-color: #d86a6a; }
.banner.ftk-b-cult    { border-left-color: #a86ad8; }
.banner.ftk-b-mutiny  { border-left-color: #d8a86a; }