/* Turtle — layered on the classic stylesheet. The board is a hexagon drawn
   as a turtle's shell, in a frame 300 wide by 312 tall (turtle.js draws the
   art); tiles are hexagons placed on it. */

/* Turtle skin colours, approved 2026-10-12. Garden Keeper needs none: it is
   drawn in the board's own browns. */
:root {
  --skin-sage: #9aab7c;
  --skin-reef: #718f87;
  --skin-pocket: #b5bd91;
  --turtle-eye: var(--tile-ink);
  --reef-eye: var(--tile-ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --skin-sage: #56654a;
    --skin-reef: #536d66;
    --skin-pocket: #87916b;
    --reef-eye: var(--d-ink);
  }
}

:root[data-theme="dark"] {
  --skin-sage: #56654a;
  --skin-reef: #536d66;
  --skin-pocket: #87916b;
  --reef-eye: var(--d-ink);
}

/* Heading and game switch, plus the leaderboard when there is one (at its taller name-entry state). Measured
   in the browser at 412px wide. The board is 1.04 times as tall as it is
   wide, so the height left over is divided by that. */
:root {
  --board: min(calc(100vw - 2 * var(--gutter)), calc(var(--avail-h) / 1.04), var(--board-cap));
  --cell: calc(var(--board) * 0.17);
}

@media (min-height: 561px) {
  :root {
    --chrome: 201px;
  }
  :root:has(.leaderboard) {
    --chrome: 310px;
  }
}

.turtle h1.title {
  font-size: clamp(22px, calc(100cqi / 3.5), 90px);
}

.turtle .game-container {
  height: calc(var(--board) * 1.04);
  background: transparent;
  border-radius: 0;
}

.turtle .game-message {
  border-radius: calc(var(--board) * 0.05);
}

/* ---- the art ---- */

.turtle-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.turtle-art .shell { fill: var(--board-bg); }
.turtle-art .scute { fill: var(--cell-empty); }
.turtle-art .eyes  { fill: var(--turtle-eye); }

/* Sage: rounded shell corners, sage skin. */
[data-skin="sage"] .skin { fill: var(--skin-sage); }
[data-skin="sage"] .shell-soft {
  stroke: var(--board-bg);
  stroke-width: 12;
  stroke-linejoin: round;
}

/* Reef Glider: sea-turtle teal, marginal seams in the button brown. */
[data-skin="reef"] .skin { fill: var(--skin-reef); }
[data-skin="reef"] .eyes { fill: var(--reef-eye); }
[data-skin="reef"] .seam {
  fill: none;
  stroke: var(--button);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Garden Keeper: feet, head and shell lip in the button brown, claws cut in
   the page ground. */
[data-skin="garden"] .foot,
[data-skin="garden"] .lip { fill: var(--button); }
[data-skin="garden"] .claw {
  fill: none;
  stroke: var(--ground);
  stroke-width: 2;
  stroke-linecap: round;
}
[data-skin="garden"] .lip-seam {
  fill: none;
  stroke: var(--board-bg);
  stroke-width: 2;
}

/* Pocket Pal: pale hatchling skin, a rim round the shell, a face on the
   right. */
[data-skin="pocket"] .skin { fill: var(--skin-pocket); }
[data-skin="pocket"] .shell-rim {
  stroke: var(--button);
  stroke-width: 3;
  stroke-linejoin: round;
}
[data-skin="pocket"] .smile {
  fill: none;
  stroke: var(--turtle-eye);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ---- the turtles' few movements, never over a tile ---- */

@media (prefers-reduced-motion: no-preference) {
  /* Garden Keeper draws its head in at game over and puts it out again on a
     new game; the shell hides it. */
  [data-skin="garden"] .head {
    transition: transform 180ms ease;
  }
  [data-skin="garden"].is-over .head {
    transform: translateY(9px);
  }

  /* Pocket Pal blinks now and then. */
  [data-skin="pocket"] .blink {
    transform-box: fill-box;
    transform-origin: center;
    animation: blink 6.5s infinite;
  }

  /* Reef Glider strokes its front flippers once after a big merge. */
  [data-skin="reef"].is-stroking .flipper-l,
  [data-skin="reef"].is-stroking .flipper-r {
    transform-box: fill-box;
    animation: stroke 700ms ease-in-out;
  }
  [data-skin="reef"] .flipper-l { transform-origin: 100% 0; }
  [data-skin="reef"] .flipper-r { transform-origin: 0 0; --turn: -1; }
}

@keyframes blink {
  0%, 95%, 100% { transform: scaleX(1); }
  97%           { transform: scaleX(0.15); }
}

@keyframes stroke {
  0%, 100% { transform: rotate(0deg); }
  45%      { transform: rotate(calc(var(--turn, 1) * 7deg)); }
}

/* ---- tiles ---- */

.turtle .tile {
  width: 18.6667%;
  height: 15.544%;
}

.turtle .tile .tile-inner {
  border-radius: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.turtle .tile-128 .tile-inner,
.turtle .tile-256 .tile-inner,
.turtle .tile-512 .tile-inner  { font-size: calc(var(--cell) * 0.4); }

.turtle .tile-1024 .tile-inner,
.turtle .tile-2048 .tile-inner { font-size: calc(var(--cell) * 0.32); }

.turtle .tile-super .tile-inner { font-size: calc(var(--cell) * 0.27); }

/* Position stops: cell centres at (150 + 45q, 170 + 51.96(r + q/2)) in the
   art's units, less half a tile, as percentages of the tile's own box. */
.turtle .tile.tile-position-1-3 { transform: translate(57.1429%, 176.8955%); }
.turtle .tile.tile-position-1-4 { transform: translate(57.1429%, 284.0384%); }
.turtle .tile.tile-position-1-5 { transform: translate(57.1429%, 391.1812%); }
.turtle .tile.tile-position-2-2 { transform: translate(137.5000%, 123.3241%); }
.turtle .tile.tile-position-2-3 { transform: translate(137.5000%, 230.4669%); }
.turtle .tile.tile-position-2-4 { transform: translate(137.5000%, 337.6098%); }
.turtle .tile.tile-position-2-5 { transform: translate(137.5000%, 444.7527%); }
.turtle .tile.tile-position-3-1 { transform: translate(217.8571%, 69.7527%); }
.turtle .tile.tile-position-3-2 { transform: translate(217.8571%, 176.8955%); }
.turtle .tile.tile-position-3-3 { transform: translate(217.8571%, 284.0384%); }
.turtle .tile.tile-position-3-4 { transform: translate(217.8571%, 391.1812%); }
.turtle .tile.tile-position-3-5 { transform: translate(217.8571%, 498.3241%); }
.turtle .tile.tile-position-4-1 { transform: translate(298.2143%, 123.3241%); }
.turtle .tile.tile-position-4-2 { transform: translate(298.2143%, 230.4669%); }
.turtle .tile.tile-position-4-3 { transform: translate(298.2143%, 337.6098%); }
.turtle .tile.tile-position-4-4 { transform: translate(298.2143%, 444.7527%); }
.turtle .tile.tile-position-5-1 { transform: translate(378.5714%, 176.8955%); }
.turtle .tile.tile-position-5-2 { transform: translate(378.5714%, 284.0384%); }
.turtle .tile.tile-position-5-3 { transform: translate(378.5714%, 391.1812%); }