/* ui/Menu: every Torks menu page's shared look (the design canvas's Play, Workshop and Jobs pages):
   daylight, square paper blocks, a 3 px ink border and a hard ink ledge, no radius and no blur. */
.tk-menu {
  position: absolute;
  inset: 0;
  overflow: auto;
  /* A garage floor (2026-10-19: the background was too plain): faint tiles and a hazard stripe along the foot. */
  background:
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tk-sun) 55%, transparent) 0 18px, color-mix(in srgb, var(--tk-ink) 70%, transparent) 18px 36px) bottom / 100% 10px no-repeat,
    linear-gradient(color-mix(in srgb, var(--tk-ink) 6%, transparent) 2px, transparent 2px) 0 0 / 64px 64px,
    linear-gradient(90deg, color-mix(in srgb, var(--tk-ink) 6%, transparent) 2px, transparent 2px) 0 0 / 64px 64px,
    var(--tk-ground);
  color: var(--tk-ink);
  font-family: var(--tk-font-ui);
}
.tk-menu__page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px 30px 40px;
  box-sizing: border-box;
}
.tk-menu__block {
  background: var(--tk-paper);
  border: var(--tk-border);
  box-shadow: var(--tk-ledge);
  box-sizing: border-box;
}
:where(.tk-menu) button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.tk-menu button:focus-visible,
.tk-menu input:focus-visible,
.tk-menu select:focus-visible {
  outline: 3px solid var(--tk-sky);
  outline-offset: 3px;
}
.tk-menu__button {
  padding: 8px 14px;
  color: var(--tk-ink);
  cursor: pointer;
  background: var(--tk-paper);
  border: var(--tk-border);
  box-shadow: var(--tk-ledge-sm);
  font: 700 14px/1 var(--tk-font-ui);
}
.tk-menu__button:hover { background: white; }
.tk-menu__button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--tk-ink); }
.tk-menu__button:disabled { opacity: 0.5; cursor: default; transform: none; }
.tk-menu__button[data-tone="coral"] { background: var(--tk-coral); color: var(--tk-paper); }
.tk-menu__button[data-tone="teal"] { background: var(--tk-teal); }
.tk-menu__button[data-tone="sun"] { background: var(--tk-sun); }

.tk-menu__header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.tk-menu__back {
  padding: 10px 14px;
  font: 700 15px/1 var(--tk-font-ui);
}
.tk-menu__title {
  margin: 0;
  font: 400 34px/1 var(--tk-font-display);
  text-transform: uppercase;
}
.tk-menu__chips {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.tk-menu__wallet {
  display: flex;
  align-items: center;
  padding: 8px 14px;
}
.tk-menu__bolts {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 22px/1 var(--tk-font-display);
}
.tk-menu__bolt {
  position: relative;
  display: inline-block;
  width: var(--size, 22px);
  height: var(--size, 22px);
  flex: none;
  background: var(--tk-ink);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.tk-menu__bolt-face {
  position: absolute;
  inset: 12%;
  background: var(--tk-sun);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.tk-menu__bolt-hole {
  position: absolute;
  inset: 36%;
  background: var(--tk-ink);
}
.tk-menu__driver {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
}
.tk-menu__driver-level {
  font: 400 13px/1 var(--tk-font-display);
  text-transform: uppercase;
}
.tk-menu__pips {
  display: inline-flex;
  gap: 3px;
}
.tk-menu__pip {
  width: 12px;
  height: 12px;
  background: var(--tk-paper-2);
  border: 2px solid var(--tk-ink);
  box-sizing: border-box;
}
.tk-menu__pips[data-tone="teal"] .tk-menu__pip[data-on] { background: var(--tk-teal); }
.tk-menu__pips[data-tone="coral"] .tk-menu__pip[data-on] { background: var(--tk-coral); }
.tk-menu__pips[data-tone="sun"] .tk-menu__pip[data-on] { background: var(--tk-sun); }
.tk-menu__pips[data-tone="sky"] .tk-menu__pip[data-on] { background: var(--tk-sky); }
.tk-menu__pips[data-tone="lime"] .tk-menu__pip[data-on] { background: var(--tk-lime); }
.tk-menu__stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tk-menu__stat {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tk-menu__stat-name {
  width: 58px;
  font: 600 12px/1 var(--tk-font-ui);
}
/* The stats as icons (2026-10-19, Sproks's shapes): Damage a sword, Hull a heart, Speed a double chevron. */
.tk-menu__stat-icon {
  flex: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--tk-ink);
}
.tk-menu__stat-icon[data-stat="damage"] {
  background: var(--tk-coral);
  clip-path: polygon(50% 0, 63% 15%, 63% 60%, 88% 60%, 88% 74%, 61% 74%, 61% 100%, 39% 100%, 39% 74%, 12% 74%, 12% 60%, 37% 60%, 37% 15%);
}
.tk-menu__stat-icon[data-stat="hull"] {
  background: var(--tk-teal);
  clip-path: polygon(50% 100%, 6% 54%, 0 36%, 4% 18%, 16% 6%, 32% 4%, 50% 20%, 68% 4%, 84% 6%, 96% 18%, 100% 36%, 94% 54%);
}
.tk-menu__stat-icon[data-stat="speed"] {
  background: var(--tk-sky);
  clip-path: polygon(0 10%, 26% 10%, 54% 50%, 26% 90%, 0 90%, 28% 50%, 0 10%, 46% 10%, 72% 10%, 100% 50%, 72% 90%, 46% 90%, 74% 50%, 46% 10%);
}
.tk-menu__eyebrow {
  font: 400 13px/1 var(--tk-font-display);
  text-transform: uppercase;
  color: var(--tk-ink-dim);
}
.tk-menu__muted { color: var(--tk-ink-dim); font-weight: 600; }

@media (max-width: 760px) {
  .tk-menu__page { padding: 14px 14px 32px; }
  .tk-menu__header { flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
  .tk-menu__title { font-size: 26px; }
  .tk-menu__chips { margin-left: 0; width: 100%; }
  .tk-menu__button { min-height: 44px; }
}
@media (max-height: 500px) {
  /* A phone on its side (the mobile pass, 2026-10-19): the page's head is one slim row (back, the
     title, the Bolts and the driver), so the page itself starts on the first screen. */
  .tk-menu__page { padding: 8px max(14px, env(safe-area-inset-right)) 20px max(14px, env(safe-area-inset-left)); }
  .tk-menu__header { flex-wrap: nowrap; gap: 10px; margin-bottom: 8px; }
  .tk-menu__title { font-size: 22px; white-space: nowrap; }
  .tk-menu__back { padding: 6px 10px; font-size: 13px; }
  .tk-menu__chips { margin-left: auto; width: auto; gap: 6px; }
  .tk-menu__chips > * { padding-top: 3px; padding-bottom: 3px; }
  .tk-menu__button { min-height: 40px; }
}