/* Rail Run — "Paper Journey" shell: blue desk paper, cream tickets, red ink stamps. */

:root {
  color-scheme: only light;
  --desk: #b3cde0;
  --desk-hi: #c9dcea;
  --desk-lo: #93b5cf;
  --paper: #f5eddd;
  --paper-lo: #e9dcc2;
  --navy: #1b2c52;
  --navy-soft: rgba(27, 44, 82, 0.5);
  --teal: #2a7aa0;
  --red: #d63d38;
  --red-dk: #a52a27;
  --green: #2c8a3a;
  --tape: rgba(226, 214, 186, 0.78);
  --serif: "Roboto Serif", Georgia, "Times New Roman", serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .18 0 0 0 .4 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --desk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .2 0 0 0 0 .34 0 0 0 .45 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0078125' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-touch-callout: none; }

html, body {
  min-height: 100%;
  color: var(--navy);
  font-family: var(--serif);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  background:
    var(--desk-grain),
    var(--mottle),
    radial-gradient(120% 80% at 50% 0%, var(--desk-hi) 0%, transparent 60%),
    radial-gradient(140% 90% at 50% 110%, var(--desk-lo) 0%, transparent 65%),
    var(--desk);
  background-attachment: fixed;
}

html.is-splash body { overflow: hidden; }
html.is-playing, html.is-playing body { height: 100%; overflow: hidden; }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

svg.ico { display: block; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ——— Tickets ——— */

/* Cream paper with scalloped left/right edges. Shadows go on a wrapper (or `filter`
   on an ancestor) because the mask would clip a box-shadow. */
.tk {
  --sc: 4px;
  --sp: 11px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  appearance: none;
  border: 0;
  color: var(--navy);
  font: 700 1rem/1.1 var(--serif);
  text-decoration: none;
  background: var(--grain), linear-gradient(180deg, var(--paper) 0%, var(--paper-lo) 100%);
  -webkit-mask:
    radial-gradient(circle at 0 50%, #0000 calc(var(--sc) - 0.5px), #000 var(--sc)) 0 0 / 51% var(--sp) repeat-y,
    radial-gradient(circle at 100% 50%, #0000 calc(var(--sc) - 0.5px), #000 var(--sc)) 100% 0 / 51% var(--sp) repeat-y;
  mask:
    radial-gradient(circle at 0 50%, #0000 calc(var(--sc) - 0.5px), #000 var(--sc)) 0 0 / 51% var(--sp) repeat-y,
    radial-gradient(circle at 100% 50%, #0000 calc(var(--sc) - 0.5px), #000 var(--sc)) 100% 0 / 51% var(--sp) repeat-y;
  cursor: pointer;
}

/* Red stitched perforation just inside both scalloped edges. */
.tk::before {
  content: "";
  position: absolute;
  inset: 5px calc(var(--sc) + 3px);
  border-left: 2px dashed rgba(214, 61, 56, 0.75);
  border-right: 2px dashed rgba(214, 61, 56, 0.75);
  pointer-events: none;
}

.tk-red {
  color: #fff6ec;
  background: var(--grain), linear-gradient(180deg, #e04a42 0%, var(--red) 55%, #c4332f 100%);
}

.tk-red::before { border-color: rgba(255, 236, 220, 0.55); }

.tk:disabled { cursor: default; }
.tk:disabled > * { opacity: 0.35; }
a.tk:focus-visible, button.tk:focus-visible { outline: none; }

.lift {
  filter: drop-shadow(0 2px 0 rgba(27, 44, 82, 0.18)) drop-shadow(0 4px 6px rgba(27, 44, 82, 0.3));
  transition: transform 120ms ease, filter 120ms ease;
}

.lift:has(.tk:not(:disabled):hover) { transform: translateY(-1px) rotate(-0.4deg); }
.lift:has(.tk:not(:disabled):active) { transform: translateY(1px); filter: drop-shadow(0 1px 1px rgba(27, 44, 82, 0.35)); }
.lift:has(.tk:focus-visible) { filter: drop-shadow(0 0 0 var(--navy)) drop-shadow(0 0 3px var(--teal)) drop-shadow(0 4px 6px rgba(27, 44, 82, 0.3)); }

/* ——— Main menu ——— */

.splash {
  position: fixed;
  inset: 0;
  top: var(--fg-ad-h, 0px);
  z-index: 40;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
}

html.is-playing .splash { display: none; }

.menu {
  position: relative;
  width: min(100%, 440px);
  margin: auto 0;
  display: grid;
  justify-items: center;
  gap: clamp(12px, 2.4vh, 20px);
}

.menu-logo {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin-bottom: -4px;
  filter: drop-shadow(0 3px 4px rgba(27, 44, 82, 0.28));
  pointer-events: none;
  -webkit-user-drag: none;
}

.map-cards { display: grid; gap: clamp(14px, 2.6vh, 22px); width: 100%; }

.card-wrap { position: relative; }
.card-wrap:nth-child(1) { transform: rotate(-0.6deg); }
.card-wrap:nth-child(2) { transform: rotate(0.5deg); }
.card-wrap:nth-child(3) { transform: rotate(-0.3deg); }

.tape {
  position: absolute;
  z-index: 2;
  left: 22%;
  top: -9px;
  width: 64px;
  height: 20px;
  background: var(--grain), var(--tape);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(27, 44, 82, 0.15);
  -webkit-mask: linear-gradient(90deg, #0000 0 2px, #000 2px calc(100% - 2px), #0000 0) 0 0 / 100% 100%;
  pointer-events: none;
}

.card-wrap:nth-child(2) .tape { left: auto; right: 34%; transform: rotate(2.5deg); }
.card-wrap:nth-child(3) .tape { left: 40%; transform: rotate(-1.5deg); }

.card {
  --sc: 7px;
  --sp: 26px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.42fr 1fr;
  align-items: stretch;
  padding: 0;
  text-align: left;
  -webkit-mask: radial-gradient(circle at 100% 50%, #0000 calc(var(--sc) - 0.5px), #000 var(--sc)) 100% 0 / 100% var(--sp) repeat-y;
  mask: radial-gradient(circle at 100% 50%, #0000 calc(var(--sc) - 0.5px), #000 var(--sc)) 100% 0 / 100% var(--sp) repeat-y;
}

.card::before { display: none; }

.card-photo {
  position: relative;
  margin: 9px 0 9px 9px;
  border: 4px solid #fbf7ef;
  box-shadow: 0 1px 3px rgba(27, 44, 82, 0.35);
  overflow: hidden;
  align-self: center;
  background: #6d5a40;
}

.card-photo::after { content: ""; display: block; padding-top: 69%; }

.card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  -webkit-user-drag: none;
}

.card:hover .card-photo img { filter: brightness(1.06) saturate(1.05); }

.card-stamp {
  position: absolute;
  left: 3px;
  bottom: 2px;
  width: 50%;
  height: auto;
  color: var(--red);
  filter: drop-shadow(0 0 0.5px rgba(255, 246, 236, 0.9)) drop-shadow(0 0 1px rgba(255, 246, 236, 0.8));
  pointer-events: none;
}

.card-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 12px 16px 12px 14px;
  margin-left: 8px;
  border-left: 3px dotted rgba(27, 44, 82, 0.35);
}

.card-name {
  font: 800 clamp(1.15rem, 5.4vw, 1.55rem)/1.02 var(--serif);
  font-stretch: 92%;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.card-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

.card-level {
  --ink: var(--red);
  display: grid;
  justify-items: center;
  padding: 3px 7px 2px;
  border: 2px dashed var(--ink);
  border-radius: 4px;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.card-wrap:nth-child(2n) .card-level { --ink: #3f6f9c; color: var(--navy); }
.card-level small { font: 700 clamp(0.62rem, 2.6vw, 0.78rem)/1 var(--cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.card-wrap:nth-child(2n) .card-level small { color: var(--navy); }
.card-level b { font: 800 clamp(1.3rem, 6vw, 1.85rem)/1 var(--serif); }

.card-play {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(44px, 13vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff8f0;
  background: radial-gradient(circle at 38% 32%, #ec5a50 0%, var(--red) 55%, var(--red-dk) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18), 0 2px 3px rgba(27, 44, 82, 0.35);
  transition: transform 120ms ease;
}

.card-play svg { width: 52%; fill: currentColor; stroke: none; margin-left: 9%; }
.card:hover .card-play { transform: scale(1.06); }

.menu-row { display: flex; gap: 12px; justify-content: center; align-items: center; }
.menu-row .tk { font-size: clamp(0.92rem, 3.6vw, 1.05rem); padding: 11px 26px; }
.menu-row .tk svg { width: 1.45em; height: 1.45em; }
.menu-back .tk { font-size: clamp(0.85rem, 3.3vw, 0.98rem); padding: 9px 24px; font-weight: 600; }
.menu-back .tk svg { width: 1.3em; height: 1.3em; }
.menu-back .tk::before { display: none; }

.deco { position: absolute; pointer-events: none; opacity: 0.85; }
.deco-compass { left: -6px; bottom: 6px; width: clamp(64px, 19vw, 96px); color: var(--red); transform: rotate(-10deg); }
.deco-stamp { right: -4px; bottom: -2px; width: clamp(62px, 18vw, 92px); color: var(--navy); transform: rotate(6deg); opacity: 0.6; }

@media (max-width: 400px) {
  .deco-compass { left: -14px; bottom: 40px; }
  .deco-stamp { right: -14px; bottom: 32px; }
}

/* ——— Game screen ——— */

#gameApp {
  width: 100%;
  height: calc(100dvh - var(--fg-ad-h, 0px));
}

.board { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* The painting as a print on the desk. JS sizes it; the canvas leaves a 1% band of
   the same cream round the board (scene background), so band + border read as one. */
.photo {
  position: absolute;
  background: #f5eddd;
  box-shadow: 0 1px 0 rgba(27, 44, 82, 0.15), 0 8px 18px rgba(27, 44, 82, 0.32);
}

#game {
  position: absolute;
  inset: var(--photo-b, 6px);
  width: calc(100% - var(--photo-b, 6px) * 2);
  height: calc(100% - var(--photo-b, 6px) * 2);
  display: block;
  touch-action: none;
}

.hud {
  --u: 10px;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.hud > * { position: absolute; pointer-events: auto; }

/* Top ticket: board + level, the three counts, and the red pause stub. */
.bar-wrap { filter: drop-shadow(0 2px 0 rgba(27, 44, 82, 0.16)) drop-shadow(0 4px 7px rgba(27, 44, 82, 0.3)); }

.bar {
  display: flex;
  align-items: stretch;
  height: calc(var(--u) * 6.4);
  border-radius: calc(var(--u) * 0.4);
  background: var(--grain), linear-gradient(180deg, var(--paper) 0%, var(--paper-lo) 100%);
}

.bar-punch {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 0.75);
  padding: 0 calc(var(--u) * 0.55) 0 calc(var(--u) * 0.75);
}

.bar-punch i { width: calc(var(--u) * 0.6); height: calc(var(--u) * 0.6); border-radius: 50%; background: var(--red); }

.bar-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: calc(var(--u) * 1.1);
}

.bar-name {
  font: 800 calc(var(--u) * 2.15)/1.05 var(--serif);
  font-stretch: 78%;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-title.wrap .bar-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  font-size: calc(var(--u) * 1.75);
  line-height: 1;
}

.bar-level {
  font: 700 max(9px, calc(var(--u) * 1.5))/1.1 var(--cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.bar-stat {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  padding: 0 calc(var(--u) * 0.9);
  border-left: 2px dashed var(--navy-soft);
  margin: calc(var(--u) * 0.9) 0;
}

.bar-stat .ico { width: calc(var(--u) * 2.7); height: calc(var(--u) * 2.7); }
.bar-stat > span { display: flex; flex-direction: column; align-items: center; }
.bar-stat small { font: 700 max(8px, calc(var(--u) * 0.95))/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; }
.bar-stat b { font: 800 calc(var(--u) * 2.15)/1.05 var(--serif); font-stretch: 85%; white-space: nowrap; }
.bar-stat.done b { color: var(--green); }

.bar-pause {
  --sc: calc(var(--u) * 0.55);
  --sp: calc(var(--u) * 1.6);
  flex: 0 0 auto;
  width: calc(var(--u) * 6);
  display: grid;
  place-items: center;
  border: 0;
  border-left: 2px dotted rgba(255, 240, 225, 0.75);
  margin-left: calc(var(--u) * 0.4);
  color: #fff6ec;
  background: var(--grain), linear-gradient(180deg, #e04a42 0%, var(--red) 55%, #c4332f 100%);
  -webkit-mask: radial-gradient(circle at 100% 50%, #0000 calc(var(--sc) - 0.5px), #000 var(--sc)) 100% 0 / 100% var(--sp) repeat-y;
  mask: radial-gradient(circle at 100% 50%, #0000 calc(var(--sc) - 0.5px), #000 var(--sc)) 100% 0 / 100% var(--sp) repeat-y;
  cursor: pointer;
}

.bar-pause svg { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); fill: currentColor; stroke: none; }
.bar-pause:hover { filter: brightness(1.08); }

/* Bottom row: undo, the hint (or fast forward), restart. */
.hud-bottom { display: flex; align-items: stretch; gap: calc(var(--u) * 1.2); }
.hud-bottom > .lift { display: flex; }
.hud-bottom .tk { --sc: calc(var(--u) * 0.45); --sp: calc(var(--u) * 1.15); height: calc(var(--u) * 5.2); }
.hud-bottom .tk-sq { width: calc(var(--u) * 6.6); }
.hud-bottom .tk-sq svg { width: calc(var(--u) * 2.7); height: calc(var(--u) * 2.7); stroke-width: 2.8; }
.hud-hint { flex: 1 1 auto; justify-content: center; min-width: 0; }

.hint-tk {
  width: 100%;
  padding: 0 calc(var(--u) * 2);
  font: 700 calc(var(--u) * 1.55)/1.15 var(--serif);
  cursor: default;
  text-align: left;
}

.hint-tk svg { flex: 0 0 auto; width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); stroke-width: 1.8; }
.hint-tk em { font-style: normal; color: var(--green); }
.hint-tk.warn { color: var(--red-dk); }
.hint-tk.fast { cursor: pointer; }
.hint-tk.fast svg { fill: currentColor; stroke: none; }
.hint-tk.fast.on { color: var(--teal); cursor: default; }
#hintText { min-width: 0; }

/* Side layout (wide, short screens): the ticket stands up in the left margin and the
   controls stack in the right one. */
.hud.side .bar { flex-direction: column; height: auto; }
.hud.side .bar-punch { flex-direction: row; justify-content: flex-start; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.2) 0; }
.hud.side .bar-title { padding: calc(var(--u) * 0.4) calc(var(--u) * 1.2) calc(var(--u) * 0.8); }
.hud.side .bar-name { white-space: normal; }
.hud.side .bar-stat { border-left: 0; border-top: 2px dashed var(--navy-soft); margin: 0 calc(var(--u) * 1.2); padding: calc(var(--u) * 0.7) 0; justify-content: flex-start; }
.hud.side .bar-stat > span { flex-direction: row-reverse; align-items: baseline; gap: calc(var(--u) * 0.6); }
.hud.side .bar-pause {
  width: auto;
  height: calc(var(--u) * 5.2);
  margin: calc(var(--u) * 0.4) 0 0;
  border-left: 0;
  border-top: 2px dotted rgba(255, 240, 225, 0.75);
  -webkit-mask: radial-gradient(circle at 50% 100%, #0000 calc(var(--sc) - 0.5px), #000 var(--sc)) 0 100% / var(--sp) 100% repeat-x;
  mask: radial-gradient(circle at 50% 100%, #0000 calc(var(--sc) - 0.5px), #000 var(--sc)) 0 100% / var(--sp) 100% repeat-x;
}
.hud.side .hud-bottom { flex-wrap: wrap; }
.hud.side .hud-hint { order: -1; flex: 1 1 100%; }
.hud.side .hint-tk { height: auto; min-height: calc(var(--u) * 5.2); padding-top: calc(var(--u) * 0.9); padding-bottom: calc(var(--u) * 0.9); }
.hud.side .hud-bottom > .lift:not(.hud-hint) { flex: 1 1 0; }
.hud.side .hud-bottom .tk-sq { width: 100%; }

/* ——— Countdown + result card (centred on the painting) ——— */

#count {
  position: absolute;
  left: var(--pcx, 50%);
  top: var(--pcy, 50%);
  z-index: 5;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font: 900 clamp(84px, 20vmin, 200px)/1 var(--serif);
  color: var(--navy);
  -webkit-text-stroke: clamp(5px, 1.2vmin, 10px) var(--paper);
  paint-order: stroke fill;
  filter: drop-shadow(0 6px 8px rgba(27, 44, 82, 0.45));
}

#count.hidden { display: none; }

.banner {
  position: absolute;
  left: var(--pcx, 50%);
  top: var(--pcy, 50%);
  z-index: 6;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: min(86%, 420px);
  filter: drop-shadow(0 3px 0 rgba(27, 44, 82, 0.18)) drop-shadow(0 10px 18px rgba(27, 44, 82, 0.45));
}

.banner .tk { --sc: 6px; --sp: 16px; display: grid; gap: 12px; padding: 18px 30px 20px; cursor: default; text-align: center; }
.banner-text { font: 800 clamp(1.15rem, 3.6vmin, 1.6rem)/1.2 var(--serif); }
.banner.win .banner-text { color: var(--green); }
.banner.lose .banner-text { color: var(--red-dk); }
.banner.hint .tk::before { display: none; }
.banner.hint .banner-text { font-size: clamp(0.95rem, 2.8vmin, 1.2rem); }
.banner-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.banner-actions:empty { display: none; }
.banner-actions .lift .tk { padding: 9px 22px; font-size: 1rem; }

/* ——— Overlays (pause, levels) ——— */

.overlay {
  position: fixed;
  inset: 0;
  top: var(--fg-ad-h, 0px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(27, 44, 82, 0.45);
  backdrop-filter: blur(2px);
}

.overlay.hidden { display: none; }

.overlay-card {
  width: min(100%, 320px);
  max-height: min(88vh, 560px);
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 3px 0 rgba(27, 44, 82, 0.2)) drop-shadow(0 12px 22px rgba(10, 20, 40, 0.45));
}

.overlay-card > .tk { --sc: 7px; --sp: 20px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 22px 30px 22px; cursor: default; min-height: 0; overflow: hidden; }
.overlay-card > .tk::before { inset: 8px calc(var(--sc) + 4px); }

.overlay-title { font: 800 2rem/1 var(--serif); text-align: center; margin-bottom: 6px; }
.overlay-sub { font: 400 0.95rem/1.3 var(--serif); text-align: center; color: #4a5a78; margin-bottom: 14px; }
.overlay-actions { display: grid; gap: 10px; margin-top: 10px; }
.overlay-actions .lift, .overlay-actions .tk, .btn-wide .tk, .btn-wide { width: 100%; }
.overlay-actions .tk, .btn-wide .tk { padding: 11px 16px; font-size: 1.05rem; }
.overlay-actions .tk::before, .btn-wide .tk::before { inset: 4px calc(var(--sc) + 3px); }
.btn-wide { margin-top: 14px; flex: 0 0 auto; }

.level-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: 260px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 4px;
  border-top: 2px dashed var(--navy-soft);
  border-bottom: 2px dashed var(--navy-soft);
  scrollbar-width: thin;
  scrollbar-color: var(--red) transparent;
}

.level-btn {
  appearance: none;
  padding: 8px 0 6px;
  border: 2px dashed var(--teal);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.45);
  color: var(--navy);
  font: 800 1.2rem/1 var(--serif);
  cursor: pointer;
}

.level-btn:hover:not(:disabled) { background: #fff; border-color: var(--red); color: var(--red-dk); }
.level-btn:active:not(:disabled) { transform: translateY(1px); }
.level-btn:disabled { cursor: default; opacity: 0.35; border-style: dotted; border-color: var(--navy-soft); }