/**
 * The Hot Wheels remix boards (js/remix-hotwheels.js): the race-track number
 * line, the pit stop, the car park, the transporter, the fuel gauges, the
 * starting grid, the traffic lights, the parade, the garage maze, the track
 * line-up and tyre ruler, the ramp, the shapes, and the licence plates.
 *
 * Every class is prefixed `hwr-` and every rule is anchored on one, because
 * this stylesheet ships to all six games. Car pads (`hw-car`) and flat
 * shapes (`hw-sh`) come from css/hotwheels.css.
 */

:root {
  --hwr-orange: #ff6a00;
  --hwr-orange-soft: #ffb46b;
  --hwr-blue: #0a3f8f;
  --hwr-road: #3b4250;
  --hwr-ink: #16233f;
  --hwr-ok: #2ea24d;
  --hwr-bad: #d9372b;
}

/* ------------------------------------------------------------------ shared */
/* The stage panel shrink-wraps its content (its percentage width is cyclic
   inside the play screen's auto grid column), so a board says how wide it
   wants to be rather than asking for 100%. */
.stage-board .stimulus > .hwr-board { flex: 0 1 auto; }
.hwr-board {
  width: min(680px, 86vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.4vh, 14px);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--hwr-ink);
  user-select: none;
  -webkit-user-select: none;
}

/* :where() keeps this at element specificity, so each board's own button
   sizes below still win. */
:where(.hwr-board) button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hwr-btn.hwr-num,
.hwr-btn.hwr-letter {
  min-width: 2.6em;
  font-size: clamp(1.3rem, 4.4vw, 2rem);
  padding: 0.3em 0.7em;
}

.hwr-btn.hwr-letter { font-family: inherit; text-transform: none; }

.hwr-btn:disabled { opacity: 0.45; cursor: default; }

.hwr-btn.hwr-done { background: linear-gradient(180deg, #7fdc8e, var(--hwr-ok)); border-color: #17602b; color: #fff; }

.hwr-banknote { margin: 0; font-size: clamp(0.9rem, 2.8vw, 1.15rem); opacity: 0.85; }

.hwr-note { margin: 0; min-height: 1.3em; font-size: clamp(0.85rem, 2.6vw, 1.1rem); font-weight: 600; }

.hwr-sign {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  background: #fff;
  border: 3px solid var(--hwr-blue);
  border-radius: 0.5em;
  padding: 0.1em 0.6em;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.hwr-sign b { color: var(--hwr-orange); font-size: 1.3em; }

.hwr-shake { animation: hwr-shake 0.45s ease; }
@keyframes hwr-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.hwr-board .glow,
.hwr-board.shown .hwr-bays,
.hwr-board.shown .hwr-deck.low { box-shadow: 0 0 0 4px #ffd84a, 0 0 18px 4px rgba(255, 200, 40, 0.8); }

.hwr-ord {
  display: block;
  font-size: 0.72em;
  font-weight: 700;
  color: var(--hwr-blue);
}

/* ------------------------------------------------- the race-track number line */
.hwr-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 3px solid var(--hwr-orange);
  border-radius: 0.6em;
  padding: 0.05em 0.8em 0.15em;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.hwr-card b { font-size: clamp(1.6rem, 5vw, 2.4rem); color: var(--hwr-blue); }
.hwr-card small { font-size: 0.8rem; letter-spacing: 0.15em; color: var(--hwr-orange); }

.hwr-road {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cells), 1fr);
  padding-top: clamp(40px, 8vh, 58px);
}
.hwr-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-top: 8px solid var(--hwr-road);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  background: repeating-linear-gradient(90deg, #ffe8cc 0 2px, transparent 2px 6px);
}
.hwr-cell b {
  font-size: clamp(0.72rem, 2.6vw, 1.15rem);
  padding: 0.2em 0;
}
.hwr-drive.long .hwr-cell b { font-size: clamp(0.55rem, 1.9vw, 0.95rem); }
.hwr-cell.start { background: #dbe8ff; }
.hwr-cell.start b { color: var(--hwr-blue); }
.hwr-cell.hop { border-top-color: var(--hwr-orange); }
.hwr-cell em {
  position: absolute;
  top: -2.1em;
  font-style: normal;
  font-size: clamp(0.6rem, 1.8vw, 0.85rem);
  font-weight: 700;
  color: #fff;
  background: var(--hwr-orange);
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hwr-cell.here b { color: var(--hwr-orange); font-weight: 800; }
.hwr-racer {
  position: absolute;
  top: 0;
  left: calc((var(--at) + 0.5) / var(--cells) * 100%);
  transform: translateX(-50%) scaleX(-1);
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  transition: left 0.22s ease;
  line-height: 1;
}
.hwr-racer.rev { transform: translateX(-50%); }
.hwr-drive.overshot .hwr-racer { filter: drop-shadow(0 0 6px var(--hwr-bad)); }
.hwr-drive.overshot .hwr-cell.hop { border-top-color: var(--hwr-bad); }
.hwr-drive.solved .hwr-cell.here { background: #c9f1d0; }

/* ------------------------------------------------------------ the pit stop */
.hwr-pitrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(4px, 1.4vw, 12px);
}
.hwr-pitgrp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 6px;
  border-radius: 12px;
  border: 3px solid transparent;
}
.hwr-pitgrp.now { border-color: var(--hwr-orange); background: rgba(255, 180, 107, 0.25); }
.hwr-stack { display: flex; flex-direction: column; align-items: center; }
.hwr-stack i { font-style: normal; font-size: clamp(1.1rem, 3.6vw, 1.7rem); line-height: 1.05; }
.hwr-pitrow.fives .hwr-stack i { font-size: clamp(0.9rem, 3vw, 1.35rem); line-height: 0.95; }
.hwr-bubble {
  min-width: 1.8em;
  padding: 0.1em 0.3em;
  border-radius: 999px;
  text-align: center;
  background: #fff;
  border: 2px dashed #b9a98a;
  font-size: clamp(0.95rem, 3vw, 1.3rem);
}
.hwr-pitgrp.done .hwr-bubble { background: var(--hwr-orange); color: #fff; border: 2px solid var(--hwr-orange); }

/* -------------------------------------------------------------- the car park */
.hwr-bays {
  display: grid;
  grid-template-columns: repeat(5, clamp(38px, 8.5vh, 60px));
  gap: 5px;
  padding: 6px;
  border-radius: 12px;
  background: var(--hwr-road);
}
.hwr-bays .hwr-bay:nth-child(5n + 1) { margin-left: 0; }
.hwr-bay {
  aspect-ratio: 1;
  border: 2px dashed rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.hwr-bay i { font-style: normal; font-size: clamp(1.1rem, 4.6vh, 1.9rem); }
.hwr-bay.full { border-style: solid; background: #fff4e3; }
.hwr-bay.locked { background: #dbe8ff; border-color: #dbe8ff; cursor: default; }
.hwr-park.solved .hwr-bays { background: var(--hwr-ok); }

/* ------------------------------------------------------------- the transporter */
.hwr-rig {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: end;
  gap: 4px 6px;
}
.hwr-deck {
  grid-column: 1;
  display: flex;
  gap: 2px;
  min-height: 2.1em;
  min-width: calc(10 * 1.9em);
  padding: 2px 6px;
  border-bottom: 6px solid #6b7280;
  background: rgba(0, 60, 143, 0.08);
  border-radius: 6px 6px 0 0;
  font-size: clamp(0.85rem, 2.6vw, 1.2rem);
}
.hwr-deck i { font-style: normal; font-size: 1.6em; line-height: 1.1; }
.hwr-deck i.new { animation: hwr-pop 0.25s ease; }
.hwr-cab { grid-column: 2; grid-row: 1 / span 2; font-size: clamp(2.4rem, 8vw, 3.6rem); line-height: 1; transform: scaleX(-1); }
.hwr-truck.solved .hwr-deck { border-bottom-color: var(--hwr-ok); }
@keyframes hwr-pop { from { transform: scale(0.3); } to { transform: scale(1); } }

/* -------------------------------------------------------------- the fuel gauges */
.hwr-gauges { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 3vw, 28px); }
.hwr-gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hwr-tank {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px;
  border: 3px solid var(--hwr-ink);
  border-radius: 10px;
  background: #fff;
}
.hwr-tank i {
  display: block;
  width: clamp(36px, 8vw, 54px);
  height: clamp(8px, 2.1vh, 15px);
  border-radius: 3px;
  background: #e8e1d3;
}
.hwr-tank i.on { background: linear-gradient(90deg, #ffb13b, var(--hwr-orange)); }
.hwr-gauge.you .hwr-tank { border-color: var(--hwr-orange); }
.hwr-gn { font-size: clamp(1.2rem, 4vw, 1.8rem); }
.hwr-gauge .hw-car { font-size: clamp(0.8rem, 2.4vw, 1.05rem); }
.hwr-rel {
  align-self: center;
  max-width: 9em;
  text-align: center;
  background: #fff;
  border: 3px solid var(--hwr-blue);
  border-radius: 12px;
  padding: 0.3em 0.5em;
  font-weight: 700;
  font-size: clamp(0.9rem, 2.8vw, 1.25rem);
}
.hwr-rel .hw-car { font-size: 0.7em; vertical-align: middle; }
.hwr-fuel.solved .hwr-gauge.you .hwr-tank { border-color: var(--hwr-ok); box-shadow: 0 0 0 3px var(--hwr-ok); }

/* ------------------------------------------------------------ before and after */
.hwr-ba { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; }
.hwr-tag {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: var(--hwr-blue);
  border-radius: 999px;
  padding: 0.15em 0.6em;
}
.hwr-ba-row { display: flex; flex-wrap: wrap; gap: 2px; }
.hwr-ba-row i { font-style: normal; font-size: clamp(1.6rem, 5.2vw, 2.6rem); line-height: 1.1; min-width: 1.15em; }
.hwr-ba-row i.ghost {
  display: inline-block;
  width: 1.15em;
  height: 1.1em;
  border: 2px dashed #b9a98a;
  border-radius: 8px;
  font-size: clamp(1.6rem, 5.2vw, 2.6rem);
}

/* ------------------------------------------------------------- overtaking */
.hwr-race { display: flex; align-items: flex-end; gap: clamp(4px, 1.4vw, 12px); font-size: clamp(1.1rem, 3.8vw, 1.8rem); }
.hwr-flag { font-size: 2em; line-height: 1; }
.hwr-place { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hwr-place.zoom .hw-car { box-shadow: 0 0 0 3px #ffd84a, 0 0.14em 0 rgba(0, 0, 0, 0.28); }
.hwr-bolt { position: absolute; top: -0.2em; right: -0.75em; font-style: normal; font-size: 1.2em; animation: hwr-bob 0.9s ease-in-out infinite; }
@keyframes hwr-bob { 50% { transform: translateY(-4px); } }

/* ---------------------------------------------------------- the starting grid */
.hwr-order {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: #fff;
  border: 3px solid var(--hwr-orange);
  border-radius: 12px;
  padding: 0.2em 0.7em;
  font-size: clamp(1rem, 3.4vw, 1.5rem);
}
.hwr-order b { font-size: 1.3em; color: var(--hwr-blue); }
.hwr-gridrow { display: flex; align-items: center; gap: clamp(4px, 1.2vw, 10px); }
.hwr-gridrow.flag-right { flex-direction: row-reverse; }
.hwr-slot {
  width: clamp(54px, 13vw, 96px);
  height: clamp(54px, 12vh, 84px);
  border: 3px dashed var(--hwr-road);
  border-radius: 10px;
  background: repeating-linear-gradient(0deg, #f3efe7 0 6px, #e7e0d2 6px 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  font-size: clamp(0.8rem, 2.4vw, 1.05rem);
}
.hwr-slot.taken { border-style: solid; border-color: var(--hwr-ok); }
.hwr-gridrow.flag-right .hw-car > i { display: inline-block; transform: scaleX(-1); }
.hwr-gtag { font-size: 0.8rem; font-weight: 700; color: var(--hwr-blue); }

/* ---------------------------------------------------------------- clue boards */
.slots-pic .hwr-clues,
.hwr-clues {
  margin: 0;
  padding-left: 1.4em;
  text-align: left;
  font-size: clamp(0.95rem, 2.9vw, 1.25rem);
  line-height: 1.35;
}
.drag-item.hwr-cartile .face .hw-car { font-size: calc(var(--w) * 0.22); }

.hwr-finish { display: inline-flex; gap: 0.35em; font-size: 0.85rem; }
.hwr-fin { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.hwr-fin b { font-size: 0.8em; color: var(--hwr-blue); }
.tile:has(.hwr-finish) { width: auto; min-width: var(--tile); padding: 6px 12px; }
.tile .face .hwr-finish { font-size: clamp(0.9rem, 2.8vw, 1.25rem); }
.tile .face .hwr-finish .hw-car { font-size: 1em; }

/* ------------------------------------------------------------ traffic lights */
.hwr-gantry {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 9px);
  padding: 8px 10px;
  background: #1c2230;
  border-radius: 14px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25);
}
.hwr-lamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 6.4vw, 48px);
  height: clamp(28px, 6.4vw, 48px);
  border-radius: 50%;
  font-weight: 800;
  color: #7c8594;
  background: #3a4252;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
}
.hwr-lamp.red { background: radial-gradient(circle at 35% 35%, #ff9a8f, #e0231a 60%); box-shadow: 0 0 12px rgba(255, 60, 40, 0.7); }
.hwr-lamp.amber { background: radial-gradient(circle at 35% 35%, #ffe9a0, #f5b400 60%); box-shadow: 0 0 12px rgba(255, 190, 20, 0.7); }
.hwr-lamp.green { background: radial-gradient(circle at 35% 35%, #a6f5b3, #1fae45 60%); box-shadow: 0 0 12px rgba(40, 200, 90, 0.7); }
.hwr-lamp.now { outline: 3px solid #fff; outline-offset: 2px; animation: hwr-blink 1s ease-in-out infinite; }
@keyframes hwr-blink { 50% { outline-color: rgba(255, 255, 255, 0.2); } }
.hwr-btn.hwr-lampbtn { padding: 0.3em 0.6em; line-height: 0; }
.hwr-btn.hwr-lampbtn .hwr-lamp { width: clamp(38px, 8vw, 56px); height: clamp(38px, 8vw, 56px); }

/* ------------------------------------------------------------------ the parade */
.hwr-parrow { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(4px, 1.2vw, 8px); }
.hwr-float {
  width: clamp(44px, 9vw, 66px);
  height: clamp(44px, 9vw, 66px);
  border-radius: 12px;
  border: 3px solid var(--hwr-orange-soft);
  background: #fff;
  font-size: clamp(1.4rem, 4.6vw, 2.2rem);
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hwr-float.oops { border: 3px dashed var(--hwr-bad); background: #ffe6e2; color: var(--hwr-bad); font-weight: 800; }

/* --------------------------------------------------------------- the garage maze */
.hwr-route { display: flex; gap: 0.3em; font-size: clamp(1.3rem, 4vw, 1.9rem); background: #fff; border: 3px solid var(--hwr-blue); border-radius: 12px; padding: 0.1em 0.5em; }
.hwr-route b { opacity: 0.45; }
.hwr-route b.now { opacity: 1; transform: scale(1.2); }
.hwr-route b.done { opacity: 0.2; }
.hwr-mgrid { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1.2vh, 10px); }
.hwr-mrow {
  display: grid;
  grid-template-columns: clamp(70px, 16vw, 120px) clamp(44px, 9vh, 64px) clamp(70px, 16vw, 120px);
  height: clamp(36px, 8vh, 58px);
  align-items: center;
}
.hwr-mrow.garage { display: flex; justify-content: center; background: none; }
.hwr-garage { font-size: clamp(1.6rem, 6vh, 2.6rem); line-height: 1; }
.hwr-mrow.garage.home .hwr-garage { filter: drop-shadow(0 0 8px #ffd84a); }
.hwr-hub {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hwr-road);
  border-radius: 8px;
  font-size: clamp(1.1rem, 4.4vh, 1.8rem);
}
.hwr-mrow.now .hwr-hub { background: #58606f; }
.hwr-branch {
  height: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hwr-road);
  color: #fff;
  font-size: clamp(0.9rem, 3.6vh, 1.4rem);
}
.hwr-branch.left { border-radius: 10px 0 0 10px; }
.hwr-branch.right { border-radius: 0 10px 10px 0; }
.hwr-branch.blocked { background: repeating-linear-gradient(45deg, #ffcf99 0 8px, #fff 8px 16px); }
.hwr-branch.went { background: var(--hwr-orange); }
.hwr-branch.bump { background: var(--hwr-bad); animation: hwr-shake 0.45s ease; }

/* --------------------------------------------------------------- left and right */
.hwr-lot { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 10px); font-size: clamp(1.1rem, 3.8vw, 1.7rem); }
.hwr-lotbay { padding: 6px 4px; border-left: 3px solid #fff; border-right: 3px solid #fff; background: var(--hwr-road); border-radius: 4px; }
.hwr-lotbay.ref .hw-car { box-shadow: 0 0 0 3px #ffd84a, 0 0.14em 0 rgba(0, 0, 0, 0.28); }
.hwr-hand { font-size: 0.8em; color: var(--hwr-blue); white-space: nowrap; }

/* -------------------------------------------------------- line up and measure */
.hwr-lanes { position: relative; width: 100%; display: flex; flex-direction: column; gap: clamp(8px, 2.4vh, 18px); padding: 6px 0; }
.hwr-lane { width: 100%; }
.hwr-track {
  display: flex;
  height: clamp(30px, 7vh, 48px);
  width: calc(var(--len) * 100% / var(--units));
  margin-left: calc(var(--off) * 100% / var(--units));
  padding: 0;
  border: 3px solid rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  transition: margin-left 0.6s ease;
  overflow: hidden;
}
.hwr-track.blue { background: #2f6fbc; }
.hwr-track.orange { background: var(--hwr-orange); }
.hwr-track i { flex: 1; border-right: 2px dashed rgba(255, 255, 255, 0.35); }
.hwr-track i:last-child { border-right: 0; }
.hwr-track.picked { box-shadow: 0 0 0 4px #ffd84a; }
.hwr-startline { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--hwr-ok); opacity: 0; transition: opacity 0.4s; }
.hwr-lineup.lined .hwr-startline { opacity: 1; }

.hwr-ruler { position: relative; width: 100%; padding: 4px 0; }
.hwr-piece {
  height: clamp(30px, 7vh, 46px);
  width: calc(var(--len) * 100% / var(--units));
  background: var(--hwr-orange);
  border: 3px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding-left: 4px;
  font-size: clamp(1rem, 3.6vh, 1.5rem);
}
.hwr-piece span { transform: scaleX(-1); display: inline-block; }
.hwr-endpost {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--len) * 100% / var(--units));
  border-left: 3px dashed var(--hwr-blue);
}
.hwr-tyres { display: flex; min-height: clamp(30px, 7vh, 46px); margin-top: 4px; }
/* Drawn rather than emoji, so each tyre is exactly one unit wide and they
   butt up end to end with no gaps, which is the point of measuring. */
.hwr-tyres i {
  flex: 0 0 calc(100% / var(--units));
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #d7dbe2 0 18%, #6b7280 19% 26%, #1d2129 27% 100%);
  box-shadow: inset 0 0 0 3px #3b4250;
}
.hwr-tyres i.new { animation: hwr-pop 0.2s ease; }
.hwr-measure.over .hwr-tyres i:last-child { filter: drop-shadow(0 0 5px var(--hwr-bad)); opacity: 0.6; }
.hwr-measure.short .hwr-endpost { border-left-color: var(--hwr-bad); }
.hwr-measure.solved .hwr-endpost { border-left-color: var(--hwr-ok); }

/* ---------------------------------------------------------------- the ramp */
.hwr-ramp { position: relative; height: clamp(170px, 34vh, 250px); width: min(520px, 86vw); }
.hwr-shelf { position: absolute; top: 0; left: 0; display: flex; gap: 6px; z-index: 2; }
.hwr-thing {
  width: clamp(46px, 9vh, 64px);
  height: clamp(46px, 9vh, 64px);
  border: 3px solid var(--hwr-orange-soft);
  border-radius: 12px;
  background: #fff;
  font-size: clamp(1.5rem, 5vh, 2.2rem);
  line-height: 1;
  padding: 0;
  transition: transform 0.9s cubic-bezier(0.5, 0, 0.8, 1), opacity 0.9s;
}
.hwr-thing.rolled { transform: translate(clamp(150px, 40vw, 330px), clamp(110px, 24vh, 170px)) rotate(720deg); opacity: 0; }
.hwr-thing.stuck { animation: hwr-shake 0.45s ease; border-color: var(--hwr-bad); }
.hwr-slope {
  position: absolute;
  left: 4%;
  top: clamp(50px, 10vh, 72px);
  width: 86%;
  height: 16px;
  background: repeating-linear-gradient(90deg, var(--hwr-orange) 0 26px, #ff8d3a 26px 30px);
  border-radius: 8px;
  transform-origin: left center;
  transform: rotate(18deg);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}
.hwr-bin { position: absolute; right: 0; bottom: 0; font-size: clamp(2rem, 7vh, 3rem); display: flex; align-items: flex-end; }
.hwr-caught { font-size: 0.45em; max-width: 5em; }

/* ------------------------------------------------------------ solid shape icons */
.hwr-solid { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: middle; position: relative; }
.hwr-solid.ball { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, #6fa8ff 30%, #1d4f9c 100%); }
.hwr-solid.box { background: linear-gradient(135deg, #e6b778, #b77a2d); border-radius: 3px; box-shadow: inset -0.25em -0.25em 0 rgba(0, 0, 0, 0.15); }
.hwr-solid.can { width: 1em; border-radius: 0.5em / 0.22em; background: linear-gradient(90deg, #9aa4b3, #e3e8ef 40%, #7d8796); }
.hwr-solid.cone { width: 1.2em; clip-path: polygon(50% 0, 100% 88%, 50% 100%, 0 88%); background: linear-gradient(90deg, #f7c26b, #d98a1e); }

/* ------------------------------------------------------------ counting sides */
.hwr-svg { width: min(330px, 76%); max-height: clamp(130px, 30vh, 230px); overflow: visible; }
.hwr-fill { fill: #dbe8ff; }
.hwr-side { stroke: var(--hwr-ink); stroke-width: 5; stroke-linecap: round; }
.hwr-side.lit { stroke: var(--hwr-orange); stroke-width: 9; }
.hwr-hit { stroke: transparent; stroke-width: 30; stroke-linecap: round; cursor: pointer; }
.hwr-sidenum { font-size: 20px; font-weight: 800; fill: var(--hwr-blue); text-anchor: middle; dominant-baseline: middle; }

/* ------------------------------------------------------------- curvy shapes */
.hw-sh.hwr-circle { border-radius: 50%; }
.drag-item.hwr-shapetile .face .hw-sh { font-size: calc(var(--w) * 0.19); }
.hw-sh.hwr-tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; }

/* --------------------------------------------------------------- licence plates */
.hwr-lotgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(4px, 1.2vw, 10px); }
.hwr-platecar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 6px 6px;
  border: 3px solid transparent;
  border-radius: 12px;
  background: rgba(0, 60, 143, 0.08);
}
.hwr-platecar i { font-style: normal; font-size: clamp(1.4rem, 5vh, 2.1rem); line-height: 1; }
.hwr-plate1,
.hwr-plate {
  display: inline-flex;
  gap: 2px;
  background: #fffbe6;
  border: 2px solid var(--hwr-ink);
  border-radius: 6px;
  padding: 0 0.35em;
  font-weight: 800;
  font-size: clamp(1.3rem, 4.6vh, 2rem);
  line-height: 1.25;
  font-family: 'Andika', 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
}
.hwr-platecar.found { border-color: var(--hwr-ok); background: #d6f5dc; }

.hwr-swap { flex-direction: row; justify-content: center; gap: clamp(12px, 4vw, 34px); }
.hwr-want {
  font-size: clamp(2.6rem, 9vh, 4.4rem);
  line-height: 1;
  background: #fff;
  border: 3px solid var(--hwr-orange);
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hwr-platecar.big { background: none; }
.hwr-platecar.big i { font-size: clamp(2.4rem, 8vh, 3.8rem); }
.hwr-plate { padding: 0.1em 0.3em; gap: 4px; font-size: clamp(1.6rem, 6vh, 2.6rem); }
.hwr-pl {
  min-width: 1.2em;
  padding: 0 0.1em;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  font-weight: 800;
}
.hwr-pl.sel { border-color: var(--hwr-orange); background: #ffe1c2; }
.hwr-swap.solved .hwr-plate { border-color: var(--hwr-ok); background: #e2f7e6; }

.drag-item.hwr-platetile {
  --w: calc(var(--tile) * 0.72);
  width: calc(var(--w) * 1.35);
  background: #fffbe6;
  border-color: var(--hwr-ink);
  border-radius: 10px;
}
.drag-item.hwr-platetile .text { font-size: calc(var(--w) * 0.34); font-weight: 800; letter-spacing: 0.04em; }
.slot:has(.hwr-platetile),
.play-screen:has(.hwr-platetile) .slot { width: calc(var(--w) * 1.35); }
.play-screen:has(.hwr-platetile) .slot.has-before::before { font-size: clamp(1.6rem, 5vw, 2.4rem); top: -1.25em; opacity: 1; }
.play-screen:has(.hwr-platetile) .slot-row { padding-top: clamp(2.4rem, 7vw, 3.4rem); }

.drag-item.hwr-speed .face { font-size: calc(var(--w) * 0.3); }
.drag-item.hwr-speed .text { font-size: calc(var(--w) * 0.42); font-weight: 800; }

/* --------------------------------------------------------------- the trophy */
.hwr-trophy { display: inline-flex; flex-direction: column; align-items: center; }
.hwr-trophy .cup { font-size: 3.2rem; line-height: 1; }
.hwr-plaque { margin-top: -0.2em; background: #3b2a12; color: #ffd873; border-radius: 6px; padding: 0.1em 1.2em; font-size: 1.2rem; font-weight: 800; }

/* --------------------------------------------------------- a phone on its side */
@media (max-height: 520px) {
  .hwr-board { gap: 4px; }
  .hwr-card b { font-size: 1.3rem; }
  .hwr-road { padding-top: 34px; }
  .hwr-racer { font-size: 1.4rem; }
  .hwr-sign { font-size: 1rem; }
  .hwr-bays { grid-template-columns: repeat(5, 30px); gap: 3px; padding: 4px; }
  .hwr-bay i { font-size: 1rem; }
  .hwr-stack i { font-size: 0.95rem; }
  .hwr-pitrow.fives .hwr-stack i { font-size: 0.8rem; }
  .hwr-tank i { height: 6px; width: 30px; }
  .hwr-gn { font-size: 1rem; }
  .hwr-slot { height: 48px; }
  .hwr-mrow { height: 26px; }
  .hwr-route { font-size: 1.1rem; }
  .hwr-ramp { height: 150px; }
  .hwr-thing { width: 40px; height: 40px; font-size: 1.3rem; }
  .hwr-slope { top: 44px; }
  .hwr-svg { max-height: 120px; }
  .hwr-lotgrid { grid-template-columns: repeat(10, 1fr); }
  .hwr-platecar i { font-size: 1.1rem; }
  .hwr-plate1 { font-size: 0.95rem; }
  .hwr-want { font-size: 2rem; }
  .hwr-plate { font-size: 1.4rem; }
  .hwr-platecar.big i { font-size: 1.8rem; }
  .hwr-lamp { width: 24px; height: 24px; }
  .hwr-btn.hwr-lampbtn .hwr-lamp { width: 30px; height: 30px; }
  .hwr-float { width: 36px; height: 36px; font-size: 1.2rem; }
  .hwr-track, .hwr-piece { height: 26px; min-height: 26px; }
  .hwr-measure { width: min(440px, 60vw); }
  .hwr-btn.hwr-num, .hwr-btn.hwr-letter { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hwr-racer, .hwr-track, .hwr-thing { transition: none; }
  .hwr-lamp.now, .hwr-bolt, .hwr-shake, .hwr-branch.bump { animation: none; }
}