/* Menu screens (M13): title, mode, tour, night intro, results, about, tour complete, pause, error. The look is the dance flyer
   (docs/UI-PLAN.md, look A): Anton display type, cream ticket-stub rows with black text, day-glo stickers and stamps with hard
   offset shadows, halftone on the backdrop. Text is never under 14 CSS px (REQ-147) and scales with large text through --ui.
   Text on a fill is always black on a day-glo or cream fill, or cream, yellow, green, red or pink on black (4.5:1 or more). */
#screens, #overlays, #boot-fallback, .toast {
  --ink-red: #a8201a;      /* red text on cream, 6.8:1 */
  --ink-soft: #4a4038;     /* quiet text on cream, 9.4:1 */
  --cream-dim: #d8d0bf;    /* a locked ticket */
  --stub-dim: #8b829d;     /* the stub of a locked ticket */
  --accent: var(--yellow); /* each panel's hard shadow */
}

/* the backdrop: halftone dots over the venue the canvas draws (services.js darkens it) */
#screens > .screen:not([data-route="night"]):not([data-route="freeplay"]) { background: var(--halftone); }
#overlays > .overlay { background: var(--halftone), rgba(13, 11, 16, 0.86); }

/* ---------------------------------------------------------------- the flyer panel */
.panel {
  position: relative; width: 100%; max-width: 560px; margin: auto; padding: 22px 18px 24px;
  background: var(--panel); color: var(--text); border: 3px solid var(--cream); border-radius: 0;
  box-shadow: 8px 8px 0 var(--accent);
}
.panel > * + * { margin-top: 14px; }
.panel h1, .panel h2, .panel h3 { overflow-wrap: break-word; margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: 0.01em; }
.panel h1 { font-size: calc(44px * var(--ui)); line-height: 0.95; }
.panel h2 { font-size: calc(42px * var(--ui)); line-height: 0.95; color: var(--yellow); text-shadow: 3px 3px 0 var(--red); }
.panel h3 { font-size: calc(22px * var(--ui)); line-height: 1.05; margin-top: 8px; color: var(--yellow); }
.panel p { margin: 0; font-size: calc(16px * var(--ui)); }
.lede { color: var(--text-dim); font-weight: 700; }
/* the eyebrow is a sticker: black type on hot pink, tilted */
.eyebrow {
  display: block; width: fit-content; max-width: 100%; padding: 5px 9px 4px; font: 400 calc(18px * var(--ui)) / 1.05 var(--display) !important;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--black); background: var(--pink); border: 3px solid var(--black);
  box-shadow: 3px 3px 0 var(--cream); transform: rotate(var(--tilt));
}
.note { font-size: calc(14px * var(--ui)) !important; color: var(--text-dim); border-left: 5px solid var(--yellow); padding-left: 10px; }
.note:empty { display: none; }
.hint { font-size: calc(14px * var(--ui)) !important; color: var(--text-dim); text-align: center; }
.badge-line {
  display: inline-block; padding: 4px 10px 3px; font: 400 calc(20px * var(--ui)) / 1.1 var(--display) !important; letter-spacing: 0.03em;
  color: var(--black); background: var(--green); border: 3px solid var(--black); box-shadow: 3px 3px 0 var(--cream); transform: rotate(1.5deg);
}
.panel p.big-number, .big-number { font: 400 calc(56px * var(--ui)) / 1 var(--display); color: var(--yellow); text-align: center; padding: 6px 0; text-shadow: 4px 4px 0 var(--red); }
.panel-title { text-align: center; }

/* ---------------------------------------------------------------- buttons: ticket stubs */
.btn {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 50px; min-width: 44px; padding: 9px 18px 8px 30px;
  font: 400 calc(21px * var(--ui)) / 1.1 var(--display); letter-spacing: 0.03em; color: var(--black); background: var(--cream);
  border: 3px solid var(--black); border-radius: 0; cursor: pointer; touch-action: manipulation; text-align: center;
}
/* the perforation down the stub end */
.btn::before { content: ""; position: absolute; left: 13px; top: 5px; bottom: 5px; border-left: 2px dashed var(--black); pointer-events: none; }
.btn:active { transform: translate(3px, 3px); }
/* the focus ring: a black line inside the edge and a white ring outside, so it shows on cream, yellow and dark alike */
.btn:focus-visible, .panel .btn:focus-visible, .card:focus-visible {
  outline: 3px solid var(--black); outline-offset: -8px; box-shadow: 0 0 0 4px var(--focus), 0 0 0 7px var(--black);
}
.btn.primary { padding: 10px 18px 9px; color: var(--black); background: var(--yellow); box-shadow: 5px 5px 0 var(--pink); }
.btn.primary::before, .btn.danger::before { display: none; }
.btn.primary:active { box-shadow: 2px 2px 0 var(--pink); }
.btn.primary:focus-visible { box-shadow: 5px 5px 0 var(--pink), 0 0 0 4px var(--focus); }
.btn.big { min-height: 64px; font-size: calc(34px * var(--ui)); line-height: 1; }
.btn.danger { padding: 9px 18px 8px; background: var(--red); color: var(--black); }
.btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.btn-label { display: block; }
.btn-sub { display: block; font: 700 calc(14px * var(--ui)) / 1.2 var(--font); letter-spacing: 0; color: var(--ink-soft); }
.link {
  display: inline; min-height: 44px; min-width: 44px; padding: 0 6px; font: inherit; font-weight: 800; color: var(--yellow); background: none; border: 0;
  text-decoration: underline 2px; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation;
}
.menu, .actions { display: flex; flex-direction: column; gap: 10px; }
.actions { flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 12px; }
.panel > .actions { margin-top: 22px; }
.panel-about .actions {
  position: sticky; bottom: 0; z-index: 2; margin: 14px calc(-1 * var(--panel-pad, 18px)) 0; padding: 12px var(--panel-pad, 18px) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--panel); border-top: 3px solid var(--cream);
}
.actions.stack { flex-direction: column; align-items: stretch; }
.actions .btn { flex: 1 1 150px; }
.actions.stack .btn { flex: 0 0 auto; }

/* ---------------------------------------------------------------- the title: a stacked poster */
.panel-title { max-width: 480px; padding: 18px 18px 22px; background: var(--black); border: 0; box-shadow: none; }
.panel-title > * + * { margin-top: 0; }
.t-poster, .t-side { display: flex; flex-direction: column; min-width: 0; }
.t-side { gap: 12px; margin-top: 16px; }
.t-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.t-sticker {
  display: inline-block; padding: 5px 8px 4px; font: 400 calc(18px * var(--ui)) / 1 var(--display); letter-spacing: 0.04em; color: var(--black);
  background: var(--pink); border: 3px solid var(--black); box-shadow: 3px 3px 0 var(--cream); transform: rotate(-4deg);
}
.t-date { font: 800 calc(14px * var(--ui)) / 1.1 var(--font); letter-spacing: 0.16em; color: var(--yellow); }
.t-word-wrap { position: relative; margin-top: 12px; text-align: left; }
.panel .wordmark {
  display: flex; flex-direction: column; margin: 0; font: 400 clamp(76px, 27vw, 124px) / 0.86 var(--display); letter-spacing: -0.005em; text-align: left;
}
.wordmark .w1 { color: var(--yellow); text-shadow: 6px 6px 0 var(--red); }
.wordmark .w2 { position: relative; z-index: 1; margin-left: 0.06em; color: var(--cream); text-shadow: 6px 6px 0 var(--pink); }
.t-star {
  position: absolute; z-index: 2; right: -4px; top: 18%; width: clamp(96px, 28vw, 120px); aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; color: var(--black); background: var(--green); transform: rotate(12deg);
  clip-path: polygon(50% 0%, 59.8% 13.3%, 75% 6.7%, 76.9% 23.1%, 93.3% 25%, 86.7% 40.2%, 100% 50%, 86.7% 59.8%, 93.3% 75%, 76.9% 76.9%, 75% 93.3%, 59.8% 86.7%, 50% 100%, 40.2% 86.7%, 25% 93.3%, 23.1% 76.9%, 6.7% 75%, 13.3% 59.8%, 0% 50%, 13.3% 40.2%, 6.7% 25%, 23.1% 23.1%, 25% 6.7%, 40.2% 13.3%);
}
.t-star b { font: 400 20px / 1 var(--display); letter-spacing: 0.02em; }
.t-star span { font: 400 15px / 1 var(--display); letter-spacing: 0.04em; }
.t-cities {
  margin: 18px -18px 0; padding: 7px 18px 6px; color: var(--black); background: var(--red); border-block: 3px solid var(--black);
  box-shadow: 0 4px 0 var(--cream); font: 800 calc(14px * var(--ui)) / 1.45 var(--font); letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  transform: rotate(-1.5deg);
}
.t-boxes { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
/* a speaker box drawn in CSS: tweeter on top, woofer below, black outline, flat day-glo body */
.t-spk {
  --c: var(--yellow); flex: 0 1 50px; min-width: 0; aspect-ratio: 40 / 52; border: 3px solid var(--black); border-radius: 3px; box-shadow: 0 0 0 2px var(--c) inset;
  background:
    radial-gradient(circle at 50% 28%, var(--c) 0 6%, var(--black) 6.5% 16%, transparent 16.5%),
    radial-gradient(circle at 50% 66%, var(--c) 0 6%, var(--black) 6.5% 12%, var(--c) 12.5% 16%, var(--black) 16.5% 29%, transparent 29.5%),
    var(--c);
}
.t-spk:nth-child(2), .t-spk:nth-child(6) { --c: var(--red); }
.t-spk:nth-child(3) { --c: var(--green); }
.t-spk:nth-child(4) { --c: var(--pink); }
.t-spk:nth-child(5) { --c: var(--blue); }
.t-lede { margin-top: 14px !important; color: var(--text-dim); font-weight: 700; }
.panel-title .menu { gap: 9px; }
.panel-title .menu .btn { align-items: flex-start; text-align: left; }
.panel-title .menu .btn.primary { align-items: center; text-align: center; min-height: 70px; font-size: calc(40px * var(--ui)); margin-bottom: 6px; }
.panel-title .hint { margin-top: 2px; }

/* the sound: badge and name as a sticker */
.identity { display: flex; align-items: center; justify-content: center; gap: 10px; }
.panel-title .identity {
  align-self: center; padding: 4px 14px 4px 6px; background: var(--panel); border: 3px solid var(--cream); box-shadow: 4px 4px 0 var(--green); transform: rotate(-1deg);
}
.badge { width: 52px; height: 52px; }
.identity-name { font: 400 calc(24px * var(--ui)) / 1.05 var(--display) !important; letter-spacing: 0.02em; color: var(--cream); overflow-wrap: anywhere; }
.identity-edit { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.identity-input {
  flex: 1 1 140px; min-width: 0; max-width: 240px; min-height: 48px; box-sizing: border-box; padding: 8px 12px; border: 3px solid var(--black); border-radius: 0;
  background: var(--cream); color: var(--black); font: 700 calc(18px * var(--ui)) var(--font); box-shadow: 0 0 0 2px var(--cream);
  -webkit-appearance: none; appearance: none; -webkit-user-select: text; user-select: text;
}
.identity-save { min-height: 48px; font-size: calc(18px * var(--ui)); }
.identity-save:disabled { opacity: 0.55; cursor: default; }
.identity-msg { margin: 0; min-height: 0; font-size: calc(14px * var(--ui)) !important; color: var(--yellow); text-align: center; }
.identity-msg:empty { display: none; }

/* ---------------------------------------------------------------- cards: mode choice and tour stops, as tickets */
.cards, .road { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 16px 0 0; list-style: none; }
.card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-height: 64px; padding: 10px 14px 11px 30px; text-align: left;
  font: 600 calc(14px * var(--ui)) / 1.3 var(--font); color: var(--black); background: var(--cream);
  border: 3px solid var(--black); border-radius: 0; cursor: pointer; touch-action: manipulation;
}
.card::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; border-left: 2px dashed var(--black); pointer-events: none; }
.card:active { transform: translate(3px, 3px); }
.card-title { font: 400 calc(26px * var(--ui)) / 1.05 var(--display); letter-spacing: 0.02em; }
.card-text { font-size: calc(14px * var(--ui)); }
.card-meta { font-size: calc(14px * var(--ui)); font-weight: 800; color: var(--ink-red); }
.card.is-picked { background: var(--yellow); box-shadow: 6px 6px 0 var(--pink); }
.card.is-locked { background: var(--cream-dim); cursor: default; }
.card.is-locked:active { transform: none; }
.card.is-locked .card-meta { color: var(--black); }
.mode-card.is-picked .card-meta { color: var(--black); }

/* tour stops: the number sits on the stub, the road runs down the stubs */
.stop { padding-left: 76px; min-height: 84px; justify-content: center; }
.stop::before { display: none; }
.stop-num {
  position: absolute; left: 0; top: 0; bottom: 0; width: 60px; display: flex; align-items: center; justify-content: center;
  font: 400 calc(38px * var(--ui)) / 1 var(--display); color: var(--black); background: var(--yellow); border-right: 3px dashed var(--black);
}
.stop.is-cleared .stop-num { background: var(--green); }
.stop.is-locked .stop-num { background: var(--stub-dim); }
.stop.is-open { box-shadow: 6px 6px 0 var(--pink); }
.stop.is-cleared .card-meta { color: var(--black); }
.stop-item { position: relative; }
.stop-item + .stop-item::before { content: ""; position: absolute; left: 28px; top: -12px; height: 12px; border-left: 4px dotted var(--cream); }
.panel-tour { --accent: var(--pink); }

/* ---------------------------------------------------------------- the night intro: a flyer for the stop */
.panel-intro { --accent: var(--red); text-align: left; }
.panel-intro .intro-city { font-size: min(calc(64px * var(--ui)), 18vw); line-height: 0.9; margin-top: 16px; }
.intro-venue {
  margin: 16px -18px 0 !important; padding: 8px 18px 7px; font: 400 calc(24px * var(--ui)) / 1.05 var(--display) !important; letter-spacing: 0.03em;
  color: var(--black) !important; background: var(--red); border-block: 3px solid var(--black); box-shadow: 0 4px 0 var(--cream); transform: rotate(-1.5deg);
}

/* facts and score tables print on a cream ticket */
.facts {
  display: grid; grid-template-columns: max-content 1fr; gap: 7px 14px; margin: 0; padding: 14px 16px; font-size: calc(16px * var(--ui));
  color: var(--black); background: var(--cream); border: 3px solid var(--black); box-shadow: 6px 6px 0 var(--yellow);
}
.panel > .facts { margin-top: 22px; }
.facts dt { color: var(--ink-red); font-weight: 800; font-size: calc(14px * var(--ui)); letter-spacing: 0.06em; text-transform: uppercase; align-self: baseline; }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; align-self: baseline; }
.facts dd.f-big { font: 400 calc(24px * var(--ui)) / 1.05 var(--display); letter-spacing: 0.02em; }

.sum {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc(16px * var(--ui)); color: var(--black); background: var(--cream);
  border: 3px solid var(--black); box-shadow: 6px 6px 0 var(--accent);
}
.sum th { text-align: left; font-weight: 700; color: var(--ink-soft); padding: 6px 0 6px 14px; }
.sum td { text-align: right; font-weight: 800; padding: 6px 14px 6px 8px; font-variant-numeric: tabular-nums; }
.sum tr + tr th, .sum tr + tr td { border-top: 2px dashed rgba(13, 11, 16, 0.25); }
.sum tr:last-child th, .sum tr:last-child td { background: var(--yellow); color: var(--black); border-top: 3px solid var(--black); padding-top: 10px; padding-bottom: 9px; }
.sum tr:last-child th { font: 400 calc(20px * var(--ui)) / 1 var(--display); letter-spacing: 0.03em; }
.sum tr:last-child td { font: 400 calc(30px * var(--ui)) / 1 var(--display); letter-spacing: 0.02em; }
.panel > .sum { margin-top: 22px; }

/* ---------------------------------------------------------------- results: the verdict is a stamp */
.panel-results { --accent: var(--yellow); }
.panel-results.is-win { --accent: var(--green); }
.panel-results.is-loss { --accent: var(--red); }
.panel h2.verdict {
  display: block; width: fit-content; max-width: 100%; margin-top: 18px; padding: 8px 14px 6px; font-size: calc(40px * var(--ui)); line-height: 0.95; text-shadow: none;
  color: var(--accent); border: 5px solid var(--accent); background: var(--black); transform: rotate(-3deg);
  animation: stamp-in 0.28s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
.panel h2.verdict + * { margin-top: 22px; }
@keyframes stamp-in { from { transform: rotate(-9deg) scale(1.5); } to { transform: rotate(-3deg) scale(1); } }
.panel-results .timing-hint { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }

/* tour complete: the total on a tilted yellow band */
.panel-complete { --accent: var(--green); text-align: center; }
.panel-complete h2.verdict { margin: 0 auto; }
/* two starbursts pinned to the corners of the tour-complete flyer */
.panel-complete::before, .panel-complete::after {
  content: ""; position: absolute; width: 64px; height: 64px; pointer-events: none;
  clip-path: polygon(50% 0%, 59.8% 13.3%, 75% 6.7%, 76.9% 23.1%, 93.3% 25%, 86.7% 40.2%, 100% 50%, 86.7% 59.8%, 93.3% 75%, 76.9% 76.9%, 75% 93.3%, 59.8% 86.7%, 50% 100%, 40.2% 86.7%, 25% 93.3%, 23.1% 76.9%, 6.7% 75%, 13.3% 59.8%, 0% 50%, 13.3% 40.2%, 6.7% 25%, 23.1% 23.1%, 25% 6.7%, 40.2% 13.3%);
}
.panel-complete::before { left: -22px; top: -24px; background: var(--pink); transform: rotate(-10deg); }
.panel-complete::after { right: -20px; bottom: -26px; width: 52px; height: 52px; background: var(--yellow); transform: rotate(14deg); }
.panel-complete p.big-number {
  margin: 18px -18px 22px; padding: 12px 18px 8px; color: var(--black); background: var(--yellow); text-shadow: 3px 3px 0 var(--pink);
  border-block: 3px solid var(--black); box-shadow: 0 5px 0 var(--cream); transform: rotate(-2deg); overflow-wrap: anywhere;
}

/* about */
.panel-about { --accent: var(--blue); }
.about-block { border-top: 2px dashed rgba(255, 246, 224, 0.3); padding-top: 4px; }
.panel h2 + .about-block { border-top: 0; }
.about-block p { color: var(--text); margin-top: 4px; }

/* pause and error */
.panel-pause, .panel-error { max-width: 440px; text-align: center; }
.panel-pause h2 { font-size: calc(56px * var(--ui)); }
.panel-error { --accent: var(--red); }
.panel-error h1, .panel-error h2 { color: var(--red); text-shadow: 3px 3px 0 var(--black); }
.confirm { display: flex; flex-direction: column; gap: 12px; }
.confirm p { font-weight: 700; }

/* the loading splash in index.html */
.panel-boot { max-width: 420px; text-align: center; }
.panel-boot .wordmark { align-items: center; text-align: center; font-size: clamp(72px, 24vw, 112px); }
.panel-boot .lede { margin-top: 24px; }

@media (max-width: 380px) {
  .panel { padding: 18px 13px 20px; }
  .facts { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd + dt { margin-top: 6px; }
  .t-cities, .intro-venue { margin-left: -13px !important; margin-right: -13px !important; }
  .panel-complete p.big-number { margin-left: -13px; margin-right: -13px; }
}
@media (min-width: 900px) { .panel { margin-top: 36px; margin-bottom: 36px; } }
@media (min-width: 600px) {
  .panel-title { border: 3px solid var(--cream); box-shadow: 10px 10px 0 var(--yellow); }
}
/* tablet portrait: the menus a size up so they do not sit as a phone column in the middle */
@media (min-width: 700px) and (max-width: 899.98px) and (min-height: 900px) {
  #screens, #overlays { --ui: 1.15; }
  :root[data-large-text="true"] #screens, :root[data-large-text="true"] #overlays { --ui: 1.4; }
  .panel, .su { max-width: 640px; }
  .panel-title { max-width: 600px; padding: 26px 28px 30px; }
  .panel-title .t-cities { margin-left: -28px; margin-right: -28px; }
  .panel-title .wordmark { font-size: 150px; }
  .panel-title .t-star { width: 140px; }
  .panel-title .t-star b { font-size: 26px; }
  .panel-title .t-star span { font-size: 18px; }
  .panel-title .t-spk { flex-basis: 64px; }
}

/* phone landscape: the poster on the left, the menu on the right */
@media (orientation: landscape) and (max-height: 520px) {
  .panel { margin: 0 auto; }
  .panel-title { max-width: 820px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; padding-top: 10px; }
  .panel-title .t-side { margin-top: 4px; }
  .panel-title .wordmark { font-size: clamp(64px, 11vw, 96px); }
  .panel-title .t-star { width: 100px; }
  .panel-title .t-boxes { margin-top: 14px; }
  .panel-title .t-spk { flex-basis: 40px; }
  .panel-title .menu { display: grid; grid-template-columns: 1fr 1fr; }
  .panel-title .menu .primary, .panel-title .menu .mode-pick { grid-column: 1 / -1; }
  .panel-intro .intro-city { font-size: calc(52px * var(--ui)); }
}

/* the route-change toast (DESIGN 4.2): one line, above menus and the pause overlay */
.toast {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: max(12px, env(safe-area-inset-bottom)); width: min(calc(100vw - 32px), 560px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px;
  padding: 10px 12px; background: var(--black); color: var(--text); border: 3px solid var(--yellow); border-radius: 0; box-shadow: 5px 5px 0 var(--pink);
  font-size: calc(15px * var(--ui)); font-weight: 700;
}
.toast .btn { min-height: 44px; font-size: calc(18px * var(--ui)); }

/* Desktop and iPad landscape: a larger base size and wider panels so the menus do not sit as a small column in a big
   viewport (layout-2-6). Everything sized with --ui scales together; large text stacks on top. */
@media (min-width: 900px) and (min-height: 700px) {
  :root { --ui: 1.3; }
  :root[data-large-text="true"] { --ui: 1.6; }
  .panel, .su { max-width: 760px; }
  .panel-pause, .panel-error { max-width: 600px; }
  /* the title spreads into a poster beside its menu */
  .panel-title { max-width: 1100px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 48px; align-items: center; padding: 32px 36px; }
  .panel-title .t-side { margin-top: 0; }
  .panel-title .wordmark { font-size: clamp(110px, 11vw, 168px); }
  .panel-title .t-star { width: 150px; }
  .panel-title .t-star b { font-size: 28px; }
  .panel-title .t-star span { font-size: 18px; }
  .panel-title .t-spk { flex-basis: 64px; }
  .panel-title .t-cities { margin-left: -36px; margin-right: -12px; }
}

/* high contrast: no halftone, no coloured offsets, white edges */
:root[data-contrast="high"] #screens > .screen, :root[data-contrast="high"] #overlays > .overlay { background: rgba(0, 0, 0, 0.9); }
:root[data-contrast="high"] .panel { border-color: #ffffff; box-shadow: none; }
:root[data-contrast="high"] .btn, :root[data-contrast="high"] .card { box-shadow: none; }
:root[data-contrast="high"] .panel h2, :root[data-contrast="high"] .wordmark .w1, :root[data-contrast="high"] .wordmark .w2 { text-shadow: none; }
:root[data-contrast="high"] .lede, :root[data-contrast="high"] .hint, :root[data-contrast="high"] .note { color: #ffffff; }

/* "New version ready" on the title (2026-10-30): a pink sticker above the menu, shown only when a new version is waiting */
.t-update {
  display: block; width: 100%; min-height: 44px; margin: 0 0 12px; padding: 8px 14px; border: 3px solid var(--black); border-radius: 4px;
  background: var(--pink); color: var(--black); box-shadow: 4px 4px 0 var(--black); transform: rotate(-1.5deg);
  font: 400 calc(20px * var(--ui)) / 1.15 var(--display); letter-spacing: 0.02em; text-align: center; cursor: pointer;
}
.t-update:disabled { cursor: default; background: var(--cream); }
:root[data-contrast="high"] .t-update { background: #ffffff; border-color: #ffffff; color: #000000; transform: none; }