/**
 * The Hot Wheels puzzle visuals: the finish line, the number track, the
 * junction, the lane bars, the solid and flat shapes, the case-matching
 * tiles.
 *
 * `renderStimulus` in js/game.js is closed to js/hotwheels-gen.js, so these
 * pictures arrive as HTML inside an ordinary `row`/`pattern` stimulus or
 * inside the raw face of a choice tile. That means they inherit whatever
 * enormous font size those places use, which is why nearly everything here is
 * sized from `.hw-stage` or from an explicit reset on the tile face.
 *
 * Every class is prefixed `hw-`, and every rule is anchored on one of them:
 * this stylesheet ships to all six games and must not touch the other five.
 * Nothing here needs `body.theme-hotwheels`, so the puzzles look right even
 * while the theme is being built.
 */

:root {
  --hw-orange: #f26a1b;
  --hw-orange-dark: #c24c08;
  --hw-blue: #123a6d;
  --hw-blue-soft: #2f6fbc;
  --hw-ink: #22303f;
}

/* A block of our own markup sitting inside a `.item`, which is set in
   three-rem emoji. Everything below is em-based off this one rem. */
.hw-stage {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--hw-ink);
  max-width: 100%;
}

/* ------------------------------------------------------------------ cars */
/* Cars are told apart by the colour of the pad they sit on, because the car
   emoji itself is a different colour on every device. */
.hw-car {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3em;
  height: 1.75em;
  border-radius: 0.45em;
  background: var(--hw-c, #888);
  box-shadow: 0 0.14em 0 rgba(0, 0, 0, 0.28), inset 0 0.12em 0.22em rgba(255, 255, 255, 0.45);
}

.hw-car > i {
  font-style: normal;
  font-size: 1.15em;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.hw-red { --hw-c: #e23b2e; }
.hw-blue { --hw-c: #1f6fd0; }
.hw-yellow { --hw-c: #f2c11b; }
.hw-green { --hw-c: #2ea24d; }
.hw-orange { --hw-c: #f0761a; }
.hw-purple { --hw-c: #7b4bd0; }

/* The car on a choice tile has the whole tile to itself. */
.tile .face .hw-car { font-size: 1.5rem; }

/* ---------------------------------------------------------- finish line */
.hw-finish {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.45em;
  padding: 0.2em 0.1em;
}

/* The race can run the other way, and then the counting does too. */
.hw-finish.back { flex-direction: row-reverse; }

.hw-flagpost {
  position: relative;
  font-size: 1.5em;
  padding-left: 0.42em;
  line-height: 1;
}

.hw-flagpost::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.25em;
  bottom: -0.35em;
  width: 0.26em;
  border-radius: 0.06em;
  background-image: conic-gradient(#232323 25%, #fff 0 50%, #232323 0 75%, #fff 0);
  background-size: 0.26em 0.26em;
}

.hw-lane-row {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.35em;
}

.hw-place {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
}

/* The little numbered flag over each car: a scaffold for the youngest, gone
   by the third stop. */
.hw-ord {
  font-size: 0.72em;
  font-weight: 800;
  color: #fff;
  background: var(--hw-blue);
  border-radius: 0.3em;
  padding: 0.05em 0.3em;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------- number track */
.hw-track {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.22em;
  width: min(92vw, 34em);
}

.hw-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3em 0.05em;
  font-size: 0.95em;
  font-weight: 800;
  color: var(--hw-blue);
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid var(--hw-blue-soft);
  border-radius: 0.35em;
}

.hw-cell.gap {
  color: var(--hw-orange-dark);
  background: #fff3d6;
  border: 2px dashed var(--hw-orange);
  box-shadow: 0 0 0 0.16em rgba(242, 106, 27, 0.18);
}

/* ------------------------------------------------ groups with a numeral */
.hw-grp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  font-size: 1rem;
}

.hw-grp-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.08em;
  max-width: 5.6em;
  font-size: 1em;
  line-height: 1;
}

.hw-grp-items > i { font-style: normal; }

.hw-grp-n {
  font-size: 1.8em;
  font-weight: 800;
  color: var(--hw-blue);
  line-height: 1;
}

.hw-grp.only .hw-grp-n { font-size: 3em; }

/* A group of pictures plus its numeral will not fit a square tile. */
.choices .tile:has(.hw-grp),
.choices .tile:has(.hw-bar) {
  width: auto;
  min-width: var(--tile);
  max-width: 42vw;
  padding: 8px 12px;
}

.tile .face .hw-grp { font-size: 1.1rem; }

/* ----------------------------------------------------------- flat shapes */
.hw-sh {
  display: inline-block;
  width: 2.6em;
  height: 2.6em;
  background: var(--hw-s, #1f6fd0);
  box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.18);
}

.hw-sh.t1 { --hw-s: #1f6fd0; }
.hw-sh.t2 { --hw-s: #f26a1b; }
.hw-sh.t3 { --hw-s: #2ea24d; }
.hw-sh.t4 { --hw-s: #7b4bd0; }

.hw-sh.rect { width: 3.6em; height: 2.2em; border-radius: 0.12em; }
.hw-sh.rect.wide { width: 4.2em; height: 1.7em; }
.hw-sh.oval { width: 3.6em; height: 2.4em; border-radius: 50%; }
.hw-sh.diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.hw-sh.hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.hw-sh.star {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

/* A clipped shape loses its drop shadow, so it gets none rather than a
   rectangle of shadow underneath it. */
.hw-sh.diamond,
.hw-sh.hexagon,
.hw-sh.star { box-shadow: none; }

.tile .face .hw-sh { font-size: 1.2rem; }
.drag-item .face .hw-sh { font-size: 0.55rem; }

/* -------------------------------------------------------- the junction */
.hw-junction {
  position: relative;
  display: block;
  width: 9.5em;
  height: 5.4em;
}

.hw-road {
  position: absolute;
  background: var(--hw-orange);
  border-radius: 0.25em;
  box-shadow: inset 0 0 0 0.12em rgba(0, 0, 0, 0.16);
}

/* The road across the top, with a dashed centre line down it. */
.hw-cross {
  top: 0.55em;
  left: 0;
  right: 0;
  height: 1.5em;
  background-image: repeating-linear-gradient(
      to right,
      rgba(255, 255, 255, 0.9) 0 0.5em,
      rgba(255, 255, 255, 0) 0.5em 1.1em
    ),
    linear-gradient(var(--hw-orange), var(--hw-orange));
  background-size: 100% 0.12em, 100% 100%;
  background-position: 0 center, 0 0;
  background-repeat: no-repeat, no-repeat;
}

.hw-up {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5em;
  height: 3.6em;
}

.hw-jcar {
  position: absolute;
  bottom: -0.05em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5em;
  line-height: 1;
}

/* The way this car is going: a lit stretch of road with an arrow on it. */
.hw-turn-mark {
  position: absolute;
  top: 0.4em;
  height: 1.8em;
  width: 3.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.35em;
  background: rgba(255, 221, 102, 0.5);
  box-shadow: 0 0 0 0.14em #ffc93c;
  font-size: 1.15em;
  color: #6a3c00;
}

.hw-junction.turn-left .hw-turn-mark { left: 0; }
.hw-junction.turn-left .hw-turn-mark::after { content: "⟵"; }
.hw-junction.turn-right .hw-turn-mark { right: 0; }
.hw-junction.turn-right .hw-turn-mark::after { content: "⟶"; }

/* ------------------------------------------------------- longer, shorter */
.hw-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.12em;
  font-size: 1rem;
}

.hw-bar > i {
  display: block;
  width: 0.75em;
  height: 0.9em;
  border-radius: 0.14em;
  background: var(--hw-orange);
  box-shadow: inset 0 0 0 0.08em rgba(0, 0, 0, 0.16);
}

/* A tower is the same bar stood on end, built out of tyres. */
.hw-bar.tall { flex-direction: column-reverse; }

.hw-bar.tall > i {
  width: 1.5em;
  height: 0.6em;
  border-radius: 0.3em;
  background: #2f2f36;
  box-shadow: inset 0 0 0 0.1em rgba(255, 255, 255, 0.22);
}

.tile .face .hw-bar { font-size: 1.25rem; }

/* ------------------------------------------------------- letter tiles */
.hw-letters {
  display: inline-flex;
  gap: 0.35em;
}

.hw-letters b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.9em;
  font-size: 2em;
  font-weight: 800;
  color: var(--hw-blue);
  background: rgba(255, 255, 255, 0.95);
  border: 0.12em solid var(--hw-orange);
  border-radius: 0.22em;
  box-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.18);
}

/* -------------------------------------------------------- small screens */
/* A phone held sideways is about 390px tall with a bar at each end; the
   stage has to give way first. */
@media (max-height: 520px) {
  .hw-stage { font-size: 0.82rem; }
  .hw-track { gap: 0.16em; }
  .hw-cell { padding: 0.2em 0.05em; }
  .tile .face .hw-car { font-size: 1.2rem; }
  .tile .face .hw-bar { font-size: 1rem; }
  .tile .face .hw-grp { font-size: 0.9rem; }
  .tile .face .hw-sh { font-size: 0.95rem; }
}

@media (max-width: 520px) {
  .hw-stage { font-size: 0.85rem; }
  .choices .tile:has(.hw-grp),
  .choices .tile:has(.hw-bar) { max-width: 40vw; }
}