/* GENERATED by modules/random/scripts/integrate.mjs from public/styles.css — do not edit.
   Nested in .mod-random; 4 @keyframes hoisted; header/brand/footer/skip-link classes renamed pn-*. */
@keyframes pop {
  from {
    transform: scale(0.94);
    opacity: 0;
  }
}
@keyframes ladder-arrive {
  0% {
    transform: scale(0.86);
  }
  60% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes race-pulse {
  50% {
    stroke-width: 3.8;
    stroke-opacity: 0.55;
  }
}
@keyframes race-count-pop {
  0% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.2;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.mod-random {
/* Pickday V2 — ink and indigo for the furniture, all the colour on the wheel.
   One workspace: wheel on the left, the list you are editing on the right. */

& {
  --ink: #14171f;
  --ink-mid: #39414f;
  --ink-soft: #5d6675;
  --ink-faint: #8a93a3;

  --indigo: #4338ca;
  --indigo-deep: #312a9c;
  --indigo-tint: #eef0fd;

  --line: #e5e8ef;
  --line-strong: #c7cdd9;
  --surface: #ffffff;
  --surface-alt: #f5f6fa;
  --surface-sunk: #eceef4;

  --accent: #e2483d;
  --accent-deep: #b32f26;
  --good: #14653b;
  --good-tint: #eaf6ef;
  --warn: #8a4b00;
  --warn-tint: #fff5e6;
  --bad: #9b1c1c;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(20, 23, 31, 0.05);
  --shadow: 0 1px 2px rgba(20, 23, 31, 0.05), 0 10px 26px rgba(20, 23, 31, 0.06);
  --shadow-lg: 0 24px 60px rgba(20, 23, 31, 0.22);

  --header-h: 3.5rem;
  /* The tool bar under the header row; sticky with it on a wide screen. */
  --nav-h: 3.25rem;
  /* One finger. 44px is the comfortable target size the touch breakpoint gives
     every control in an entry row; WCAG 2.2 AA's floor is 24px, which is what
     the same controls get on a pointer. */
  --tap: 2.75rem;
}

* {
  box-sizing: border-box;
}

& {
  -webkit-text-size-adjust: 100%;
}

& {
  margin: 0;
  background: var(--surface-alt);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0;
}

p {
  margin: 0;
}

.shell {
  width: min(1420px, 100% - 2rem);
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pn-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 60;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}

.pn-skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* Every element the page hides by attribute needs its class to stand down,
   because `[hidden] { display: none }` lives in the browser's own stylesheet
   and any author `display` outranks it. */
.layout[hidden],
.tools-menu[hidden],
.shared-view[hidden],
.link-banner[hidden],
.example-note[hidden],
.import-panel[hidden],
.entry-empty[hidden],
.bulk-box[hidden],
.tally-box[hidden],
.multi-view[hidden],
.drawer[hidden],
.scrim[hidden],
.present-view[hidden],
.present-side[hidden],
.present-fallback[hidden],
.confetti[hidden],
.pane[hidden],
.btn[hidden],
.chip[hidden],
.field[hidden],
.field-inline[hidden],
.panel-help[hidden],
.fine-print[hidden],
.stale-warning[hidden],
.view-switch[hidden],
.entry-list[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- header */

.pn-site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--header-h);
  padding: 0.4rem 0;
  flex-wrap: wrap;
}

.pn-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 0 1 auto;
  margin-right: auto;
}

.pn-brand-mark {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(
    #e2483d 0deg 60deg,
    #edc531 60deg 120deg,
    #4a9e4f 120deg 180deg,
    #1f9aa8 180deg 240deg,
    #3a6fd8 240deg 300deg,
    #7b52c4 300deg 360deg
  );
}

.pn-brand-mark-hub {
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: var(--surface);
}

.pn-brand-text {
  min-width: 0;
}

.pn-brand-name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.pn-brand-doc {
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
}

.pn-brand-doc[data-dirty="true"]::after {
  content: " •";
  color: var(--accent);
  font-weight: 800;
}

.doc-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem;
}

.act {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-mid);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.act:hover {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.act[aria-expanded="true"] {
  background: var(--indigo);
  color: #fff;
}

.act-strong {
  background: var(--indigo);
  color: #fff;
}

.act-strong:hover {
  background: var(--indigo-deep);
  color: #fff;
}

.header-utils {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.lang-switch {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}

.lang-btn {
  background: var(--surface);
  border: 0;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
}

.lang-btn[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}

.chip {
  font: inherit;
  font-size: 0.78rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.chip:hover:not(:disabled) {
  border-color: var(--ink-faint);
  color: var(--ink);
}

.chip[aria-pressed="true"],
.chip[aria-expanded="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 600;
}

.chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- tools menu */

.tools-menu {
  display: block;
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
  padding: 0.85rem 0;
}

.tools-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: flex-start;
}

.tools-group {
  min-width: 0;
}

.tools-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.tabs {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.tabs + .tabs {
  margin-top: 0.3rem;
}

.tab {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-mid);
  padding: 0.32rem 0.8rem;
  cursor: pointer;
}

.tab:hover {
  border-color: var(--indigo);
  color: var(--indigo);
}

.tab[aria-selected="true"] {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
}

.tab-small {
  font-size: 0.8rem;
  font-weight: 500;
}

.usage-help {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  max-width: 34rem;
  flex: 1 1 22rem;
}

.usage-help > summary {
  cursor: pointer;
  margin: 0;
  font-weight: 600;
}

.usage-help > summary:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
}

.usage-help[open] > summary {
  margin-bottom: 0.45rem;
}

/* ---------------------------------------------------------------- welcome (INTERNATIONAL-A) */

/* A compact band between the header and the workspace: picture left, words
   and tool links right. Never taller than it needs to be; see ui/welcome.js
   for when it shows. */
.welcome {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.welcome[hidden],
body:has(.multi-view:not([hidden])) & .welcome,
body:has(.present-view:not([hidden])) & .welcome,
body:has(.shared-view:not([hidden])) & .welcome {
  display: none;
}

.welcome-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 264px) minmax(0, 1fr);
  gap: 0.5rem 1.2rem;
  align-items: center;
  padding: 0.9rem 2rem 1rem 0;
}

.welcome-art {
  display: block;
  margin: 0;
  align-self: start;
}

/* The declared 768 × 512 keeps the box while the file loads: no layout jump. */
.welcome-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  background: #f5f0e6;
}

.welcome-text {
  min-width: 0;
}

/* No uppercase: the approved brand reads "픽노리 PickNori" exactly as written. */
.welcome-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.welcome-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.welcome-title:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 4px;
}

.welcome-body {
  margin-top: 0.25rem;
  font-size: 0.92rem;
  color: var(--ink-mid);
  max-width: 64ch;
  word-break: keep-all;
}

/* The three headline tools (BRAND-BILINGUAL): one bold line under the tagline.
   It is a .welcome-body too, so the phone rules below fold it into the guide. */
.welcome-tools-line {
  font-weight: 700;
  color: var(--ink);
}

.welcome-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.welcome-tool {
  font: inherit;
  text-align: left;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.4rem 0.7rem 0.45rem;
  cursor: pointer;
  color: var(--ink);
  flex: 1 1 13rem;
  max-width: 17rem;
  min-height: var(--tap);
}

.welcome-tool:hover {
  border-color: var(--indigo);
  background: var(--indigo-tint);
}

.welcome-tool:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
}

.welcome-tool strong {
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
}

.welcome-tool span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--ink-soft);
  word-break: keep-all;
}

.welcome-more {
  margin-top: 0.5rem;
}

.welcome-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.welcome-start-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-right: 0.15rem;
}

.welcome-hide {
  position: absolute;
  top: 0.7rem;
  right: -0.4rem;
}

/* The "Tool guide" button exists for phones only (INTERNATIONAL-FIX). */
.welcome-expand {
  display: none;
}

@media (max-width: 900px) {
  .welcome-inner {
    grid-template-columns: minmax(88px, 30%) minmax(0, 1fr);
    gap: 0.4rem 0.8rem;
    padding: 0.7rem 2rem 0.8rem 0;
  }

  .welcome-title {
    font-size: 1.05rem;
  }

  .welcome-body {
    font-size: 0.84rem;
  }

  /* The tool cards and the examples take the full width under the picture. */
  .welcome-tools,
  .welcome-more,
  .welcome-start {
    grid-column: 1 / -1;
  }

  .welcome-text,
  .welcome-guide {
    display: contents;
  }

  .welcome-words {
    min-width: 0;
  }
}

/* A phone (INTERNATIONAL-FIX): one row — a 64 px picture, the tagline and a
   "Tool guide" button — about 90–110 px of a 390 px screen, so half the wheel
   and Spin are on the first screen with the welcome open. The button opens
   the guide under the row: the body line, the five tools as name-only chips
   (each tool's own screen carries its how-to), then the examples. */
@media (max-width: 560px) {
  .welcome-inner {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.35rem 0.7rem;
    align-items: start;
    padding: 0.7rem 2rem 0.65rem 0;
  }

  .welcome-art img {
    border-radius: 8px;
  }

  /* The header already carries the brand. */
  .welcome-kicker {
    display: none;
  }

  .welcome-title {
    font-size: 1rem;
    line-height: 1.25;
  }

  .welcome-expand {
    display: inline-flex;
    min-height: var(--tap);
    margin-top: 0.3rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
  }

  .welcome-expand-mark {
    display: inline-block;
    transition: transform 0.15s ease;
  }

  .welcome.is-open .welcome-expand-mark {
    transform: rotate(180deg);
  }

  .welcome-body {
    font-size: 0.8rem;
    margin-top: 0.15rem;
    grid-column: 1 / -1;
  }

  .welcome:not(.is-open) .welcome-body,
  .welcome:not(.is-open) .welcome-guide {
    display: none;
  }

  .welcome-tools {
    gap: 0.25rem;
    margin-top: 0.25rem;
  }

  /* Three chips to a 390 px row (Wheel Spinner · Ladder Draw · Marble Race), so the five take two rows. */
  .welcome-tool {
    flex: 0 1 auto;
    max-width: none;
    min-height: var(--tap);
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
  }

  .welcome-tool strong {
    font-size: 0.8rem;
  }

  .welcome-tool span,
  .welcome .welcome-more {
    display: none;
  }

  .welcome-start {
    margin-top: 0.4rem;
  }

  /* The example chips keep their own width (the touch rule stretches .preset-btn elsewhere). */
  .welcome-start .preset-btn {
    flex: 0 1 auto;
  }
}

/* ---------------------------------------------------------------- layout */

/* Wheel left, the list you edit on the right: roughly 60/40. The workspace is
   first in the source too, so the Tab key and the eye agree on both layouts. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 1fr);
  gap: 1.1rem;
  align-items: start;
  padding: 1.1rem 0 2.5rem;
}

.layout[data-roster="hidden"] {
  grid-template-columns: minmax(0, 1fr);
}

.layout[data-roster="hidden"] .panel-input {
  display: none;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem;
}

.panel-input {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-height: calc(100vh - var(--header-h) - var(--nav-h) - 3rem);
  position: sticky;
  top: calc(var(--header-h) + var(--nav-h) + 1rem);
  overflow: auto;
}

.side-block {
  min-width: 0;
}

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.panel-title {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-faint);
  font-weight: 800;
}

.pane-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.panel-help {
  display: block;
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0 0 0.6rem;
}

/* The phone-only switcher. Hidden on a wide screen, where all three are on
   screen at once and there is nothing to switch between. */
.view-switch {
  display: none;
  grid-column: 1 / -1;
  gap: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem;
  margin-bottom: 0.2rem;
}

.view-btn {
  flex: 1 1 0;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 700;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.45rem 0.3rem;
  cursor: pointer;
}

.view-btn[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}

/* ---------------------------------------------------------------- fields */

.field {
  display: block;
  margin-bottom: 0.7rem;
}

.field-inline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0;
}

.field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-mid);
  margin-bottom: 0.22rem;
}

.field-inline .field-label {
  margin-bottom: 0;
  white-space: nowrap;
}

input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.42rem 0.55rem;
}

textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.6;
}

input[type="number"] {
  width: 5.5rem;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--indigo);
}

.field-inline select {
  width: auto;
  min-width: 8rem;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  color: var(--ink-mid);
}

.check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--indigo);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  font: inherit;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--ink);
}

.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.btn-small {
  font-size: 0.82rem;
  padding: 0.32rem 0.65rem;
}

.btn-primary {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
}

.btn-primary:hover:not(:disabled) {
  background: var(--indigo-deep);
}

.btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-deep);
}

.btn-accent:hover:not(:disabled) {
  background: var(--accent-deep);
}

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--ink-mid);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--surface-alt);
  border-color: var(--ink-faint);
}

.btn-quiet {
  border-color: var(--line);
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.82rem;
  padding: 0.3rem 0.6rem;
}

.btn-quiet:hover:not(:disabled) {
  background: var(--surface-alt);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.55rem 0;
}

.icon-btn {
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  flex: none;
}

.icon-btn:hover {
  background: var(--surface-alt);
  color: var(--ink);
}

/* ---------------------------------------------------------------- notes */

.counter {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.hint-list {
  list-style: none;
  margin: 0.4rem 0;
  padding: 0;
  font-size: 0.79rem;
  color: var(--ink-soft);
}

.hint-list li::before {
  content: "•";
  color: var(--accent);
  font-weight: 700;
  margin-right: 0.4rem;
}

.fine-print {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0.3rem 0;
}

.status {
  min-height: 1.2rem;
  font-size: 0.84rem;
  color: var(--good);
  font-weight: 600;
  margin: 0.3rem 0;
}

.status:empty {
  min-height: 0;
}

.status[data-tone="error"] {
  color: var(--bad);
}

.stale-warning {
  display: block;
  background: var(--warn-tint);
  border-left: 4px solid var(--warn);
  color: var(--warn);
  padding: 0.5rem 0.7rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem;
  margin-bottom: 0.7rem;
}

.empty-state {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface-alt);
}

.link-banner {
  display: block;
  background: var(--indigo-tint);
  border: 1px solid #c9cdf6;
  color: var(--indigo-deep);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.8rem;
  margin-top: 0.9rem;
}

.example-note {
  display: block;
  background: var(--indigo-tint);
  color: var(--indigo-deep);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
}

.pane-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

/* ---------------------------------------------------------------- wheel */

.wheel-head {
  text-align: center;
  margin-bottom: 0.7rem;
}

.wheel-title {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.wheel-title:empty {
  display: none;
}

.wheel-desc {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
}

.wheel-desc:empty {
  display: none;
}

.wheel-stage {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}

.wheel-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 10px 26px rgba(20, 23, 31, 0.18));
}

.wheel-rim {
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
}

.wheel-slice {
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.wheel-label {
  font-family: inherit;
  font-weight: 600;
  fill: #ffffff;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.28);
  stroke-width: 2.4px;
  dominant-baseline: middle;
  pointer-events: none;
}

.wheel-empty-ring {
  fill: var(--surface-alt);
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-dasharray: 8 8;
}

.wheel-pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid var(--ink);
  z-index: 3;
  filter: drop-shadow(0 2px 2px rgba(20, 23, 31, 0.35));
}

.spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26%;
  height: 26%;
  min-width: 80px;
  min-height: 80px;
  border-radius: 50%;
  border: 5px solid var(--surface);
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 4px 14px rgba(20, 23, 31, 0.32);
}

.spin-btn:hover:not(:disabled) {
  background: #000;
}

.spin-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* A centre picture sits under the Spin button, so the button stays the target. */
.wheel-stage[data-logo="true"] .spin-btn {
  background: rgba(20, 23, 31, 0.82);
}

.wheel-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.4rem;
}

.mode-group {
  display: inline-flex;
  gap: 0.2rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem;
}

.mode-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.mode-btn:hover {
  color: var(--ink);
}

.mode-btn[aria-checked="true"] {
  background: var(--surface);
  color: var(--indigo);
  box-shadow: var(--shadow-sm);
}

.side-title {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-weight: 800;
  margin: 0.9rem 0 0.35rem;
}

/* ---------------------------------------------------------------- entry editor */

.entry-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}

/* Capped so a long list scrolls inside itself and the Results block below is
   still on screen. Without this a roster of twelve pushed Results out of the
   sticky column entirely. */
.entry-list {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  max-height: min(24rem, 42vh);
  overflow-y: auto;
}

.entry-list:empty {
  display: none;
}

.entry-row {
  display: grid;
  grid-template-columns: auto 1fr 3.4rem 1.6rem auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.entry-row:last-child {
  border-bottom: 0;
}

.entry-row:nth-child(even) {
  background: #fbfbfd;
}

.entry-row[data-enabled="false"] {
  background: var(--surface-sunk);
}

.entry-row[data-enabled="false"] .entry-name {
  color: var(--ink-faint);
  text-decoration: line-through;
}

/* 24px is the smallest target WCAG 2.2 AA allows, and this is the control that
   decides whether a name is on the wheel at all. It was 1.05rem — 17px. The
   touch breakpoint below takes it further, to 44px. */
.entry-toggle {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--indigo);
  flex: none;
}

.entry-name {
  font: inherit;
  font-size: 0.9rem;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 0.25rem 0.35rem;
  min-width: 0;
  width: 100%;
}

.entry-name:hover {
  border-color: var(--line);
}

.entry-name:focus {
  border-color: var(--indigo);
  background: var(--surface);
}

/* Typed as `input[type="number"]` so it outranks the 5.5rem default set for
   the drawer's number fields. With the plain `.entry-weight` selector that
   default won, and an 88px input sat inside a 54px grid cell: the colour well
   and the ↑ button were drawn on top of it, so the right third of the weight
   field opened the colour picker and the spinners could not be reached. */
input[type="number"].entry-weight {
  font: inherit;
  font-size: 0.85rem;
  /* Fill the grid cell the row gave it, whatever that cell is. */
  width: 100%;
  min-width: 0;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.2rem 0.15rem;
  font-variant-numeric: tabular-nums;
}

.entry-color {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.entry-move {
  display: flex;
  gap: 0.1rem;
}

.row-btn {
  font: inherit;
  font-size: 0.75rem;
  line-height: 1;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 5px;
  cursor: pointer;
}

.row-btn:hover:not(:disabled) {
  background: var(--surface-alt);
  color: var(--ink);
}

.row-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.row-btn-del:hover {
  background: #fdeeed;
  border-color: #eab0ac;
  color: var(--bad);
}

.entry-empty {
  display: block;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 1.1rem 0.9rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.88rem;
  background: var(--surface-alt);
}

.import-panel {
  display: block;
  border: 1px solid var(--indigo);
  background: var(--indigo-tint);
  border-radius: var(--radius-sm);
  padding: 0.7rem;
  margin-bottom: 0.7rem;
}

.import-panel textarea {
  min-height: 6rem;
}

.bulk-box {
  display: block;
}

/* ---------------------------------------------------------------- results */

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.history-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.32rem 0.55rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.history-list li:last-child {
  border-bottom: 0;
}

.history-list li:first-child {
  background: var(--good-tint);
  font-weight: 700;
}

.history-list .history-index {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  flex: none;
  min-width: 1.6rem;
}

.history-list .history-empty {
  color: var(--ink-soft);
  font-style: italic;
  border-bottom: 0;
}

.tally-box {
  display: block;
}

.tally-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.tally-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  font-size: 0.83rem;
  overflow-wrap: anywhere;
}

.tally-list .tally-count {
  font-weight: 800;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}

.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 18rem;
  overflow-y: auto;
  font-size: 0.86rem;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.16rem 0;
}

.legend .swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  flex: none;
  border: 1px solid rgba(20, 23, 31, 0.18);
}

.legend .legend-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.legend .legend-weight {
  flex: none;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-sunk);
  border-radius: 999px;
  padding: 0.02rem 0.4rem;
}

.legend .legend-odds {
  flex: none;
  font-size: 0.74rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.legend .legend-empty {
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------------------------------------------------------------- drawer */

.drawer {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(25rem, 100%);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.drawer-head h2 {
  font-size: 1.05rem;
  font-weight: 800;
}

.drawer-body {
  padding: 1rem;
  overflow-y: auto;
  flex: 1 1 auto;
}

.drawer-body .side-title:first-of-type {
  margin-top: 0.2rem;
}

.drawer-foot {
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
  margin-top: 1rem;
}

.scrim {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 31, 0.35);
  z-index: 45;
}

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.swatch-item {
  position: relative;
  display: inline-flex;
}

.swatch-item input[type="color"] {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: none;
  cursor: pointer;
}

.swatch-item .swatch-del {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 1.05rem;
  height: 1.05rem;
  font-size: 0.65rem;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}

.swatch-item .swatch-del:hover {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}

/* ---------------------------------------------------------------- dialogs */

.sheet-dialog {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  width: min(34rem, 92vw);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  background: var(--surface);
}

.sheet-dialog-small {
  width: min(24rem, 92vw);
}

.sheet-dialog::backdrop {
  background: rgba(20, 23, 31, 0.4);
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.dialog-head h2,
.dialog-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}

.library-list {
  list-style: none;
  margin: 0.6rem 0;
  padding: 0;
  max-height: 20rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.library-list:empty {
  display: none;
}

.library-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line);
}

.library-list li:last-child {
  border-bottom: 0;
}

.library-list li[data-current="true"] {
  background: var(--indigo-tint);
}

.library-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.library-meta {
  display: block;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--ink-faint);
}

.library-actions {
  display: flex;
  gap: 0.25rem;
  flex: none;
  flex-wrap: wrap;
}

.share-kind .side-title:first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------- winner */

.winner-dialog {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
  max-width: min(30rem, 92vw);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  background: var(--surface);
  text-align: center;
}

.winner-dialog::backdrop {
  background: rgba(20, 23, 31, 0.5);
}

.winner-dialog[open] {
  animation: pop 180ms ease-out;
}



.winner-kicker {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.winner-name {
  margin: 0.35rem 0 0.4rem;
  font-size: clamp(1.6rem, 5.5vw, 2.3rem);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.winner-dialog .btn-row {
  justify-content: center;
}

/* fallback when <dialog> is unsupported */
.winner-dialog.is-fallback {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
}

.winner-dialog.is-fallback[open] {
  display: block;
}

.confetti {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 55;
}

/* ---------------------------------------------------------------- several wheels */

.multi-view {
  display: block;
  padding: 1.1rem 0 2.5rem;
}

.multi-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.4rem;
}

.multi-title {
  font-size: 1.25rem;
  font-weight: 800;
}

.multi-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.multi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
  margin-top: 0.6rem;
}

.multi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem;
  min-width: 0;
}

.multi-card-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.multi-card-head input[type="text"] {
  font-weight: 700;
  border-color: transparent;
  padding: 0.25rem 0.35rem;
}

.multi-card-head input[type="text"]:hover,
.multi-card-head input[type="text"]:focus {
  border-color: var(--line-strong);
}

.multi-card-head select {
  width: auto;
  font-size: 0.8rem;
  padding: 0.2rem 0.3rem;
  flex: none;
}

.multi-stage {
  position: relative;
  width: min(100%, 260px);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}

.multi-stage .wheel-svg {
  filter: drop-shadow(0 6px 16px rgba(20, 23, 31, 0.16));
}

.multi-stage .wheel-pointer {
  border-left-width: 10px;
  border-right-width: 10px;
  border-top-width: 20px;
  top: -2px;
}

.multi-stage .spin-btn {
  min-width: 56px;
  min-height: 56px;
  font-size: 0.8rem;
  border-width: 4px;
}

.multi-card textarea {
  min-height: 5rem;
  font-size: 0.85rem;
}

.multi-winner {
  text-align: center;
  font-weight: 800;
  font-size: 1rem;
  min-height: 1.5rem;
  margin: 0.35rem 0;
  overflow-wrap: anywhere;
}

.multi-history {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  max-height: 7rem;
  overflow-y: auto;
  font-size: 0.82rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.multi-history li {
  padding: 0.22rem 0.5rem;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.multi-history li:last-child {
  border-bottom: 0;
}

.multi-history .history-empty {
  color: var(--ink-soft);
  font-style: italic;
}

.multi-winner-kicker {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.multi-winner-name {
  display: block;
}

/* The per-name counts, for a card set to the accumulating mode. */
.multi-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.multi-tally[hidden] {
  display: none;
}

.multi-tally li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.multi-tally .tally-count {
  font-weight: 800;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- one wheel's settings */

/* Everything the Customize drawer offers for the single wheel, folded away
   until it is wanted so four cards still fit across a laptop. */
.multi-config {
  margin-top: 0.6rem;
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
}

.multi-config > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-mid);
  padding: 0.25rem 0;
}

.multi-config > summary:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 6px;
}

.multi-config .panel-help {
  font-size: 0.74rem;
  margin: 0.2rem 0 0.5rem;
}

.multi-config .field {
  margin-bottom: 0.45rem;
}

.multi-config .field-label {
  font-size: 0.74rem;
}

/* Typed, so it outranks the 5.5rem default for number fields the same way the
   weight column in an entry row does. These cards are 290px wide. */
.multi-config input[type="number"] {
  width: 5rem;
}

.multi-config .field-out {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
}

.multi-config .btn-row {
  margin-top: 0.35rem;
}

/* ---------------------------------------------------------------- present */

.present-view {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #0d0f16;
  color: #f2f4f8;
  padding: 1rem clamp(1rem, 4vw, 3rem) 1.5rem;
}

.present-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  flex-wrap: wrap;
}

.present-title {
  font-size: clamp(1.1rem, 3vw, 1.9rem);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.present-actions {
  display: flex;
  gap: 0.4rem;
}

.present-view .chip {
  background: transparent;
  border-color: #3a4152;
  color: #e6e9f0;
}

.present-view .chip[aria-pressed="true"] {
  background: #f2f4f8;
  border-color: #f2f4f8;
  color: #0d0f16;
}

.present-fallback {
  display: block;
  color: #ffd9a8;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

.present-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0.8rem;
}

.present-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

/* The one real wheel is moved in here, so what is presented is the same wheel
   that was on the workspace — not a copy that could drift from it. */
.present-stage .wheel-stage {
  width: auto;
  height: min(100%, 78vh);
  max-width: 100%;
  margin: 0;
}

.present-stage .spin-btn {
  border-color: #0d0f16;
  background: #f2f4f8;
  color: #0d0f16;
}

.present-stage .wheel-rim {
  stroke: #f2f4f8;
}

.present-stage .wheel-pointer {
  border-top-color: #f2f4f8;
}

.present-side {
  display: block;
  flex: 0 1 18rem;
  min-width: 0;
  max-height: 100%;
  overflow-y: auto;
}

.present-side .side-title {
  color: #9aa3b5;
}

.present-list,
.present-history {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.present-list li,
.present-history li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.22rem 0;
  border-bottom: 1px solid #262b38;
  overflow-wrap: anywhere;
}

.present-list .swatch {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 3px;
  flex: none;
}

.present-history li:first-child {
  font-weight: 800;
  color: #a8e6c0;
}

/* ---------------------------------------------------------------- results (tools) */

.history-list li,
.team-head h3,
.team-card li,
.order-list li,
.chip-list li,
.standings td:nth-child(2),
.legend .legend-name,
.side-name,
.rr-fixture .side-a,
.rr-fixture .side-b {
  overflow-wrap: anywhere;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.8rem;
}

.team-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--indigo);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.team-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  background: var(--surface-alt);
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--line);
}

.team-head h3 {
  font-size: 0.95rem;
}

.team-size {
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.team-card ol {
  margin: 0;
  padding: 0.4rem 0.6rem 0.6rem 1.7rem;
}

.team-card li {
  padding: 0.12rem 0;
}

.number-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.2rem 0 0.6rem;
}

.number-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 3rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.yesno-answer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-size: clamp(2rem, 9vw, 4rem);
  font-weight: 800;
  background: var(--surface-alt);
}

.yesno-answer[data-answer="yes"] {
  background: var(--good-tint);
  border-color: #9ed3b3;
  color: #14532d;
}

.yesno-answer[data-answer="no"] {
  background: #fdeeed;
  border-color: #eab0ac;
  color: #7f1d1d;
}

.order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.35rem;
}

.order-list li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
}

.order-list .order-index {
  font-weight: 800;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
  min-width: 1.5rem;
}

/* ---------------------------------------------------------------- bracket */

.bracket-scroll {
  overflow-x: auto;
  padding-bottom: 0.4rem;
}

.bracket {
  display: flex;
  gap: 1.1rem;
  align-items: stretch;
  min-width: min-content;
}

.bracket-round {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 15rem;
  flex: 1 0 15rem;
}

.round-head {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-weight: 700;
  align-self: flex-start;
}

.match {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.match[data-status="ready"] {
  border-color: var(--indigo);
  box-shadow: inset 3px 0 0 var(--indigo);
}

.match[data-status="waiting"] {
  background: var(--surface-alt);
  color: var(--ink-soft);
}

.match-side {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.33rem 0.5rem;
}

.match-side + .match-side {
  border-top: 1px solid var(--line);
}

.match-side.is-winner {
  background: var(--surface-sunk);
  font-weight: 700;
}

.side-name {
  flex: 1 1 auto;
  min-width: 0;
}

.side-name.is-empty {
  color: var(--ink-faint);
  font-style: italic;
}

.side-score {
  width: 3.2rem;
  flex: none;
  text-align: center;
  padding: 0.2rem;
}

.win-btn {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-mid);
  border-radius: 4px;
  padding: 0.14rem 0.45rem;
  cursor: pointer;
  flex: none;
}

.win-btn[aria-pressed="true"] {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

.match-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px dashed var(--line);
  padding: 0.22rem 0.5rem;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.champion {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0.2rem 0 0.7rem;
}

.champion:empty {
  display: none;
}

/* ---------------------------------------------------------------- round robin */

.rr-round {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 0.7rem;
  overflow: hidden;
}

.rr-round > h3 {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
  padding: 0.3rem 0.6rem;
}

.rr-bye {
  font-size: 0.8rem;
  color: var(--ink-soft);
  padding: 0.3rem 0.6rem;
  background: var(--surface-alt);
  margin: 0;
}

.rr-fixture {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem;
  border-top: 1px solid var(--line);
}

.rr-fixture .side-a {
  text-align: right;
}

.rr-fixture .vs {
  color: var(--ink-faint);
  font-size: 0.8rem;
}

.rr-fixture input {
  width: 3.2rem;
  text-align: center;
  padding: 0.2rem;
}

.standings {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.standings caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: 0.3rem;
}

.standings th,
.standings td {
  border-bottom: 1px solid var(--line);
  padding: 0.28rem 0.4rem;
  text-align: right;
  font-size: 0.86rem;
}

.standings thead th {
  background: var(--ink);
  color: #fff;
  border-bottom: 0;
}

.standings th:nth-child(2),
.standings td:nth-child(2) {
  text-align: left;
  width: 40%;
}

.standings tbody tr:nth-child(odd) td {
  background: var(--surface-alt);
}

.standings tbody tr:first-child td {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--indigo);
}

/* ---------------------------------------------------------------- shared view */

.shared-view {
  display: block;
  padding: 1.25rem 0 2.5rem;
}

.notice {
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}

.notice-share {
  background: var(--ink);
  color: #f3f5f8;
  border-left: 6px solid var(--accent);
}

.notice-share h2 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.notice-share p {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
  color: #c8ced8;
}

.notice-share .btn-ghost {
  background: transparent;
  border-color: #6b7280;
  color: #fff;
}

.notice-error {
  background: var(--warn-tint);
  border-left: 6px solid var(--warn);
  color: var(--warn);
}

.shared-title {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}

.shared-view .sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

.print-row {
  margin-top: 0.8rem;
}

.result-block + .result-block {
  margin-top: 1.1rem;
}

.result-block > h3 {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
}

.chip-list li {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.14rem 0.6rem;
  font-size: 0.86rem;
}

/* ---------------------------------------------------------------- footer */

.pn-site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 1.1rem 0 1.6rem;
  font-size: 0.84rem;
}

.pn-site-footer p {
  margin: 0.2rem 0;
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 1180px) {
  .layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
  }

  .pn-brand-doc {
    max-width: 10rem;
  }
}

/* One column. The wheel is the point of the page, so it is what you land on;
   the switcher above it is how you reach the other two without scrolling past
   a wheel that fills the screen. Nothing is moved by `order` here — the source
   order is the reading order, on both layouts. */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0.7rem;
  }

  /* The header wraps onto three rows here, so it is no longer a fixed height
     the switcher could be pinned below. The switcher takes the sticky slot
     instead: it is the one control you want within reach while scrolling. */
  .pn-site-header {
    position: static;
  }

  .view-switch {
    display: flex;
    position: sticky;
    top: 0.25rem;
    z-index: 20;
    box-shadow: var(--shadow-sm);
  }

  .panel-input {
    position: static;
    max-height: none;
    overflow: visible;
  }


  .layout[data-view="wheel"] .panel-input,
  .layout[data-view="entries"] .panel-work,
  .layout[data-view="results"] .panel-work,
  .layout[data-view="entries"] #results-block,
  .layout[data-view="results"] #entries-block {
    display: none;
  }

  .pn-brand-doc {
    display: none;
  }

  .doc-actions {
    order: 3;
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
  }

  .header-utils {
    margin-left: auto;
  }

  .wheel-stage {
    width: min(100%, 420px);
  }

  .mode-group {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .bracket-round {
    min-width: 13rem;
    flex-basis: 13rem;
  }

  .present-body {
    flex-direction: column;
    gap: 0.6rem;
  }

  .present-side {
    flex: 0 0 auto;
    width: 100%;
    max-height: 30vh;
  }

  .present-stage .wheel-stage {
    height: auto;
    width: min(100%, 60vh);
  }
}

@media (max-width: 560px) {
  /* Six actions on a 390px screen. Tightened so they fit rather than being cut
     off mid-word by the container's own horizontal scroll. */
  .act {
    font-size: 0.74rem;
    padding: 0.32rem 0.4rem;
  }

  .doc-actions {
    gap: 0.05rem;
    padding: 0.15rem;
  }

  .multi-controls {
    width: 100%;
  }
}

/* ------------------------------------------------- the expanded entry row */

/* Width is not the question here — the pointer is. A phone, and equally a
   tablet at 768px whose primary input is a finger, gets 44px targets; a laptop
   with a touchscreen reports `pointer: fine` (its trackpad) and keeps the
   compact row, so nobody gets the tall version for having a touchscreen they
   do not use to point with. */
@media (max-width: 560px), (pointer: coarse) {
  /* Six controls at 44px plus a name field do not fit across 390px on one
     line, so the name takes a line of its own and the controls sit under it
     with real space between them. One line at 24px targets was the old answer
     and it put the colour well inside the weight field. */
  .entry-row {
    /* The move column is `auto`, not `1fr`: a fractional track hands out the
       leftover width, which at 390px was 131px for three 44px buttons and two
       gaps — so the buttons were squeezed to 39px each. `auto` sizes to what
       they actually need and the weight column gives up the difference. */
    grid-template-columns: var(--tap) 3.75rem var(--tap) auto;
    grid-template-areas:
      "toggle name   name  name"
      "toggle weight color move";
    column-gap: 0.4rem;
    row-gap: 0.4rem;
    padding: 0.45rem 0.4rem;
  }

  .entry-toggle {
    grid-area: toggle;
    width: var(--tap);
    height: var(--tap);
    align-self: center;
  }

  .entry-name {
    grid-area: name;
    font-size: 1rem;
    padding: 0.4rem 0.45rem;
  }

  input[type="number"].entry-weight {
    grid-area: weight;
    height: var(--tap);
    font-size: 0.95rem;
  }

  .entry-color {
    grid-area: color;
    width: var(--tap);
    height: var(--tap);
  }

  .entry-move {
    grid-area: move;
    justify-content: flex-end;
    gap: 0.4rem;
  }

  .row-btn {
    width: var(--tap);
    height: var(--tap);
    font-size: 1rem;
    flex: none;
  }

  /* The rows are about twice as tall now, so the cap that keeps Results in
     view on a wide screen would otherwise show only three names. */
  .entry-list {
    max-height: min(34rem, 62vh);
  }
}

/* ------------------------------------------------ OPUS55-B presentation pass */

/* Hierarchy without new markup. Everything below targets selectors that were
   already on the page; nothing is hidden, only grouped and given room. */

/* Entry toolbar: the primary Add first, the list tools after it, and the two
   mode-ish controls — the destructive Clear and the Plain list switch — pushed
   to the end of the line so they are not the first thing a finger lands on. */
.entry-toolbar {
  gap: 0.35rem;
  align-items: center;
}

#entry-bulk-toggle {
  margin-left: auto;
}

#entry-bulk-toggle[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

#entry-clear:hover:not(:disabled) {
  background: #fdeeed;
  border-color: #eab0ac;
  color: var(--bad);
}

/* Entries and Results are two jobs; a rule between them says so. */
.panel-input > #results-block {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

/* The wheel foot had 3px between the mode switch and the buttons under it. */
.wheel-foot {
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.wheel-foot .btn-row {
  margin: 0;
  justify-content: center;
}

/* On a wide screen, size the wheel so it and its controls fit one viewport
   instead of always 560px: bigger on a tall monitor, never under the fold on
   a short laptop. */
@media screen and (min-width: 901px) {
  .wheel-stage {
    width: min(100%, 620px, max(22rem, 100vh - 18rem));
  }
}

/* ---- one wheel's settings, laid out as a form rather than a stack */

/* The card is the container, so the settings reflow by the card's own width:
   four cards on a laptop and one card on a phone get the same narrow form,
   two cards on a wide screen get the wide one. */
.multi-card {
  container-type: inline-size;
}

.multi-card-head input[type="text"] {
  min-width: 0;
  flex: 1 1 auto;
}

/* Stays a list item: `display: flex` here would drop the ▶/▼ marker, which is
   the only thing saying this line opens. */
.multi-config > summary {
  padding: 0.4rem 0;
}

.multi-config > .field {
  vertical-align: top;
}

/* Two numbers side by side: spin seconds, then name size. */
.multi-config > label.field:has(input[type="number"]) {
  display: inline-block;
  width: 50%;
  padding-right: 0.6rem;
}

.multi-config > label.field:has(input[type="number"]) + label.field:has(input[type="number"]) {
  padding-right: 0;
}

.multi-config input[type="number"] {
  width: 100%;
  max-width: 7rem;
}

/* Volume: the value reads beside its label, the slider runs underneath. */
.multi-config > label.field:has(input[type="range"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.5rem;
}

.multi-config > label.field:has(input[type="range"]) > .field-out {
  grid-column: 2;
  grid-row: 1;
}

.multi-config > label.field:has(input[type="range"]) > input {
  grid-column: 1 / -1;
}

.multi-config .swatch-row:not(:empty) {
  margin-bottom: 0.1rem;
}

@container (min-width: 520px) {
  .multi-stage {
    width: min(100%, 320px);
  }

  .multi-config > label.field:has(> select),
  .multi-config > label.field:has(input[type="range"]),
  .multi-config > label.field:has(input[type="text"]) {
    display: inline-block;
    width: 50%;
  }

  .multi-config > label.field:has(> select),
  .multi-config > label.field:has(input[type="range"]) {
    padding-right: 0.75rem;
  }

  .multi-config > label.field:has(input[type="range"]) {
    display: inline-grid;
  }

  .multi-config > label.field:has(input[type="number"]) {
    width: 25%;
  }

  .multi-config > label.field:has(input[type="number"]) + label.field:has(input[type="number"]) {
    padding-right: 0;
  }
}

/* ---- the several-wheels arrangement bar (owner A's #arrangement-bar).
   Three jobs — name and save, pick a saved one, share — each a group of its
   own. Side by side where they fit, stacked where they do not; it wraps and
   never scrolls sideways or cuts a label. Everything that is not one of those
   groups (heading, remember switch, note, link box) takes the full width. */
.opus55-arrangement {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
  align-items: flex-end;
  padding: 0.85rem 0.95rem;
  margin: 0.7rem 0 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.opus55-arrangement > :not(.btn-row) {
  flex: 1 1 100%;
  min-width: 0;
}

/* Each group takes its natural width and shares what is left; on a phone
   each is a full line. */
.opus55-arrangement > .btn-row {
  flex: 1 1 auto;
  min-width: min(100%, 18rem);
}

.opus55-arrangement .btn {
  min-height: 2.5rem;
}

.opus55-arrangement > h3.field-label {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}

.opus55-arrangement .btn-row {
  margin: 0;
  align-items: flex-end;
  gap: 0.45rem;
  min-width: 0;
}

/* Label above its box rather than beside it, so a long Korean or English
   label never squeezes the box it names. */
.opus55-arrangement .field-inline {
  flex: 1 1 11rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
  min-width: 0;
}

.opus55-arrangement .field-inline .field-label {
  white-space: normal;
}

.opus55-arrangement .field-inline input[type="text"],
.opus55-arrangement .field-inline select {
  width: 100%;
  min-width: 0;
}

.opus55-arrangement .btn {
  white-space: normal;
  overflow-wrap: anywhere;
}

.opus55-arrangement > .panel-help,
.opus55-arrangement > .field {
  margin: 0;
}

/* ---- touch: every control a finger meets is 44px, not just the entry row.
   Same query as the entry row above, for the same reason. */
@media (max-width: 560px), (pointer: coarse) {
  .act,
  .chip,
  .lang-btn,
  .view-btn,
  .mode-btn,
  .tab,
  .btn {
    min-height: var(--tap);
  }

  .act,
  .lang-btn,
  .icon-btn {
    min-width: var(--tap);
  }

  .icon-btn {
    height: var(--tap);
  }

  .doc-actions .act {
    flex: 1 1 auto;
  }

  .header-inner {
    row-gap: 0.45rem;
  }

  select,
  input[type="text"],
  input[type="number"],
  .entry-name {
    min-height: var(--tap);
  }

  input[type="range"] {
    height: var(--tap);
  }

  .check {
    min-height: var(--tap);
  }

  .multi-config > summary,
  .usage-help > summary {
    min-height: var(--tap);
    padding-block: 0.6rem;
  }

  .multi-card-head select {
    padding: 0.3rem 0.45rem;
  }

  .swatch-item input[type="color"] {
    width: var(--tap);
    height: var(--tap);
  }

  .swatch-item .swatch-del {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
  }

  /* Tools fill each line they wrap onto instead of leaving a ragged edge. */
  .entry-toolbar .btn {
    flex: 1 1 auto;
  }

  #entry-bulk-toggle {
    margin-left: 0;
  }

  .opus55-arrangement .btn,
  .opus55-arrangement .chip {
    flex: 1 1 auto;
    min-height: var(--tap);
  }
}

/* At 44px the four utilities no longer fit one 358px line at the old padding;
   trimmed sideways only, so the height stays a full finger. */
@media (max-width: 560px) {
  .header-utils {
    gap: 0.25rem;
  }

  /* When the three modes wrap (English is longer), a pill of two lines reads
     as a blob; a rounded panel whose buttons fill each line does not. */
  .mode-group {
    border-radius: var(--radius);
  }

  .mode-btn {
    flex: 1 1 auto;
  }

  .header-utils .chip {
    padding-inline: 0.55rem;
  }

  .lang-btn {
    padding-inline: 0.5rem;
  }
}

/* ---------------------------------------------------------------- motion */

/* The system setting is the answer until the script has read the saved
   preference, which is why it comes first. */
@media (prefers-reduced-motion: reduce) {
  .winner-dialog[open] {
    animation: none;
  }
}

/* `data-motion` is written by the toolbar's Motion button, the same flag the
   wheel animation reads. Once it is set it has the last word in both
   directions: the button has to be able to switch motion off on a machine that
   never asked for it, and back on for somebody who did. */
html[data-motion="reduce"] & .winner-dialog[open] {
  animation: none;
}

html[data-motion="full"] & .winner-dialog[open] {
  animation: pop 180ms ease-out;
}

/* ---------------------------------------------------------------- print */

.print-only {
  display: none;
}

@media print {
  & {
    background: #fff;
    font-size: 11pt;
  }

  .no-print,
  .pn-site-header,
  .pn-site-footer,
  .pn-skip-link,
  .panel-input,
  .pane-controls,
  .wheel-foot,
  .spin-btn,
  .winner-dialog,
  .drawer,
  .scrim,
  .confetti,
  .present-view,
  .view-switch {
    display: none !important;
  }

  .print-only {
    display: block;
  }

  .print-heading {
    font-size: 16pt;
    border-bottom: 2pt solid #000;
    padding-bottom: 4pt;
    margin-bottom: 8pt;
  }

  .shell {
    width: 100%;
  }

  .layout {
    display: block;
    padding: 0;
  }

  .panel {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .pane[hidden] {
    display: none;
  }

  .wheel-stage {
    width: 70mm;
    margin: 0 0 6mm;
  }

  .wheel-svg {
    filter: none;
  }

  .history-list,
  .legend {
    max-height: none;
    overflow: visible;
  }

  .bracket-scroll {
    overflow: visible;
  }

  .bracket {
    min-width: 0;
  }

  .bracket-round,
  .team-card,
  .rr-round,
  .match,
  .order-list li {
    break-inside: avoid;
  }

  .round-head,
  .standings thead th,
  .number-ball {
    background: #e8e8e8 !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .match-side.is-winner {
    background: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .wheel-slice,
  .wheel-label {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .side-score,
  .rr-fixture input {
    border: 0;
    background: transparent;
    font-weight: 700;
  }

  .win-btn,
  .match-foot {
    display: none;
  }

  a[href]::after {
    content: "";
  }
}

/* ---------------------------------------------------------------- V3 */

/* ---- "Use this list to": the three everyday tools, always on screen. */
.quick-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 0 0 0.8rem;
}

.quick-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
}

.quick-btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  min-height: 2.25rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.quick-btn:hover {
  border-color: var(--indigo);
}

.quick-btn[aria-pressed="true"] {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

.quick-shared {
  flex: 1 1 100%;
  margin: 0;
}

/* ---- quick add: the main way a list is typed in. */
.quick-add {
  margin: 0 0 0.6rem;
}

.quick-add > .field-label {
  display: block;
  margin-bottom: 0.25rem;
}

.quick-add-row {
  display: flex;
  gap: 0.4rem;
}

.quick-add-row input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.quick-add-row input:focus {
  border-color: var(--indigo);
}

.quick-add-row .btn {
  flex: none;
  white-space: nowrap;
  padding-inline: 1rem;
}

.quick-add .fine-print {
  margin: 0.25rem 0 0;
}

#entry-more-toggle[aria-expanded="true"] {
  background: var(--surface-sunk);
}

#entry-more-toggle::after {
  content: " ▾";
}

#entry-more-toggle[aria-expanded="true"]::after {
  content: " ▴";
}

.entry-more {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}

.entry-more > .fine-print {
  margin: 0 0 0.4rem;
}

.entry-more > .btn-row {
  margin: 0;
}

/* Simple rows: on/off, name, delete. The weight, colour and ↑↓ controls are
   `display: none`, so they leave the Tab order too, and come back with
   "More options". */
#entries-block[data-advanced="off"] .entry-weight,
#entries-block[data-advanced="off"] .entry-color,
#entries-block[data-advanced="off"] .row-btn[data-role="up"],
#entries-block[data-advanced="off"] .row-btn[data-role="down"] {
  display: none;
}

#entries-block[data-advanced="off"] .entry-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

/* ---- templates */
.preset-bar {
  margin: 0.8rem 0 0.4rem;
}

.preset-bar > .field-label {
  margin: 0 0 0.3rem;
}

.preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.preset-bar > .fine-print {
  margin: 0.3rem 0 0;
}

.preset-tips {
  margin: 0.4rem 0 0.6rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface-sunk);
  border-radius: var(--radius-sm);
}

.preset-tips .side-title {
  margin-top: 0;
}

.preset-tips .hint-list {
  margin: 0.3rem 0 0.4rem;
}

@media (max-width: 560px), (pointer: coarse) {
  .quick-btn,
  .quick-add-row input,
  .preset-btn {
    min-height: var(--tap);
  }

  .quick-buttons {
    flex: 1 1 100%;
  }

  .quick-btn,
  .preset-btn {
    flex: 1 1 auto;
  }

  /* One line when simple: 44px toggle, the name, 44px delete. */
  #entries-block[data-advanced="off"] .entry-row {
    grid-template-columns: var(--tap) minmax(0, 1fr) auto;
    grid-template-areas: "toggle name move";
  }
}

/* The saved-arrangement picker gets a line of its own on a phone, so its
   placeholder is never cut short beside the Open and Delete buttons. */
@media (max-width: 560px) {
  .opus55-arrangement .field-inline {
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------------- V4 */

.marble-badge[hidden] {
  display: none;
}

.draw-disclosure {
  display: block;
  background: var(--indigo-tint);
  color: var(--indigo-deep);
  border-left: 4px solid var(--indigo);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.5rem 0.7rem;
  font-size: 0.86rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.draw-weight-note {
  margin-top: 0;
}

.draw-count {
  font-size: 0.84rem;
  font-weight: 600;
  margin: 0.2rem 0 0.5rem;
  color: var(--good);
}

.draw-count[data-tone="error"] {
  color: var(--bad);
}

/* ---- ladder: typed straight onto the board (RACE-EXPERIENCE finish).
   Editing is a light paper board with dashed rails; a drawn ladder is a dark
   game board with crisp rails, lane-coloured traces and lit endpoints. */
.ladder-hint {
  margin: -0.4rem 0 0.4rem;
}

/* A narrow board sits in the middle; a wide one starts at the left edge and scrolls. */
.ladder-scroll .ladder-board {
  margin: 0 auto;
}

.ladder-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.8rem;
  margin: 0 0 0.5rem;
}

.lane-count {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.lane-count .field-label {
  margin: 0 0.2rem 0 0;
}

.lane-count .fine-print {
  margin: 0 0 0 0.2rem;
}

.lane-step {
  min-width: 2.25rem;
  padding: 0.3rem 0.5rem;
  font-size: 1.1rem;
  line-height: 1;
}

#ladder-lanes {
  width: 3.6rem;
  font: inherit;
  text-align: center;
  padding: 0.3rem 0.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.ladder-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.45rem;
  padding: 0.22rem 0.7rem 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--indigo-tint);
  color: var(--indigo-deep);
}

.ladder-mode::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--indigo);
  flex: none;
}

.ladder-mode[data-view="result"] {
  background: #151b30;
  color: #f5d77a;
}

.ladder-mode[data-view="result"]::before {
  background: #f5c542;
  box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.25);
}

.ladder-top,
.ladder-bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 0 4px;
  min-width: 0;
}

.ladder-chip {
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--lane-colour, var(--ink-soft));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px var(--surface);
}

.ladder-name,
.ladder-outcome {
  width: 100%;
  min-width: 0;
  min-height: 2.35rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  padding: 0.25rem 0.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(20, 26, 50, 0.05);
}

.ladder-name {
  border-top: 4px solid var(--lane-colour, var(--line-strong));
}

.ladder-name:focus,
.ladder-outcome:focus {
  outline: 3px solid var(--indigo);
  outline-offset: 1px;
}

/* Narrow lanes: what is typed stays 16 px (readable, and phones do not zoom
   on focus); only the grey hint shrinks so "Participant 12" / "참가자 12"
   keeps its number. A long typed name is cut with an ellipsis, not shrunk. */
.ladder-board[data-narrow="true"] .ladder-name,
.ladder-board[data-narrow="true"] .ladder-outcome {
  font-size: 16px;
  padding-inline: 0.05rem;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
}

.ladder-board[data-narrow="true"] .ladder-name::placeholder,
.ladder-board[data-narrow="true"] .ladder-outcome::placeholder {
  font-size: 0.72rem;
  letter-spacing: -0.03em;
}

.ladder-board[data-narrow="true"] .ladder-slot {
  font-size: 0.72rem;
  padding-inline: 0.1rem;
  letter-spacing: -0.01em;
}

.ladder-outcome {
  border-style: dashed;
  background: #fffdf7;
}

/* The grey default is what a blank box will use, so it must be readable. */
.ladder-name::placeholder,
.ladder-outcome::placeholder {
  color: #6b7280;
  font-weight: 600;
  opacity: 1;
}

.ladder-actions {
  margin-top: 0.2rem;
}

.ladder-board-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The board scrolls inside its own box; the page never does. */
.ladder-scroll {
  overflow-x: auto;
  width: fit-content;
  min-width: min(100%, 22rem);
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.4rem 0.6rem;
  margin-bottom: 0.8rem;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background:
    linear-gradient(var(--surface-alt), var(--surface-alt)) padding-box;
}

.ladder-scroll[data-view="result"] {
  border: 1px solid #242c4a;
  background: radial-gradient(120% 90% at 50% 0%, #222b4d 0%, #161c33 55%, #10152a 100%);
  box-shadow: 0 14px 30px rgba(12, 16, 32, 0.25);
}

.ladder-board {
  min-width: min-content;
  padding: 0.5rem 0 0.2rem;
}

.ladder-tops,
.ladder-bottoms,
.ladder-whos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--lane, 84px);
}

.ladder-start,
.ladder-slot {
  margin: 0 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 0.3rem 0.25rem;
}

.ladder-start {
  margin: 0;
  min-height: 2.1rem;
  font-size: 0.78rem;
  border: 2px solid var(--lane-colour, var(--line-strong));
  background: rgba(255, 255, 255, 0.04);
  color: #f1f4fb;
  cursor: pointer;
}

.ladder-start:hover {
  background: rgba(255, 255, 255, 0.12);
}

.ladder-start:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 1px;
}

/* The lane colour is a thick bar, not the text background, so a yellow lane
   is as readable as a blue one. */
.ladder-start.is-revealed {
  box-shadow: inset 0 -6px 0 var(--lane-colour);
  background: rgba(255, 255, 255, 0.08);
}

.ladder-top.is-active .ladder-name,
.ladder-top.is-latest .ladder-name {
  box-shadow: 0 0 0 3px var(--lane-colour);
}

.ladder-slot {
  border: 1px dashed rgba(201, 210, 234, 0.45);
  background: rgba(255, 255, 255, 0.05);
  color: #c9d2ea;
  line-height: 1.6;
}

.ladder-slot.is-revealed {
  border: 2px solid var(--lane-colour);
  background: #ffffff;
  color: #151b30;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 6px 16px rgba(0, 0, 0, 0.3);
}

.ladder-slot.is-arrived {
  animation: ladder-arrive 0.5s ease-out;
  box-shadow: 0 0 0 4px var(--lane-colour), 0 8px 22px rgba(0, 0, 0, 0.4);
}

html[data-motion="reduce"] & .ladder-slot.is-arrived {
  animation: none;
}



.ladder-whos {
  margin-top: 0.3rem;
  min-height: 1.3rem;
}

.ladder-who {
  margin: 0 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--lane-colour, transparent);
}

.ladder-svg {
  display: block;
  overflow: visible;
}

.ladder-rail {
  stroke: #56628a;
  stroke-width: 4;
  stroke-linecap: round;
  transition: opacity 0.2s;
}

.ladder-rail.is-draft {
  stroke: #9aa3bd;
  stroke-width: 3;
  stroke-dasharray: 2 7;
}

.ladder-bridge {
  stroke: #aab4d4;
  stroke-width: 4;
  stroke-linecap: round;
  transition: opacity 0.2s;
}

.ladder-node {
  fill: #8d98bd;
}

.ladder-node-top {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.5;
}

.ladder-path {
  fill: none;
  stroke-width: 5.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.ladder-path.is-latest,
.ladder-path.is-tracing {
  stroke-width: 7;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
}

/* While a path is being traced, everything else steps back. */
.ladder-board.is-tracing .ladder-rail,
.ladder-board.is-tracing .ladder-bridge {
  opacity: 0.35;
}

.ladder-board.is-tracing .ladder-path:not(.is-tracing) {
  opacity: 0.2;
}

.ladder-head {
  stroke: #ffffff;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
}

.draw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.draw-table caption {
  text-align: left;
  font-weight: 800;
  padding: 0 0 0.35rem;
}

.draw-table th,
.draw-table td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.draw-table thead th {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 700;
}

.draw-table .draw-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.draw-table .draw-num {
  width: 3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--indigo);
}

.draw-outcome.is-hidden {
  color: var(--ink-faint);
  font-style: italic;
}

.draw-table tr.is-winner {
  background: var(--warn-tint);
}

.ball-chip {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

/* ---- the marble race: controls on one line, the course as the main thing */
.race-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
}

.race-head .pane-title,
.race-head .roster-bar,
.race-head .draw-count {
  margin: 0;
}

.race-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.65rem 0 0.3rem;
}

.race-notice {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-soft);
  border-left: 3px solid var(--indigo);
  padding: 0.05rem 0 0.05rem 0.55rem;
}

.race-layout {
  display: grid;
  grid-template-columns: auto minmax(15rem, 26rem);
  justify-content: center;
  gap: 1.2rem;
  align-items: start;
  margin-top: 0.35rem;
}

.marble-stage {
  position: relative;
  /* The course is 360 × 600: as tall as the window allows, never wider than
     30rem. No percentage here: it sits in an `auto` grid track. */
  width: min(30rem, calc((100vh - 18.8rem) * 0.6));
  min-width: 17rem;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(12, 16, 32, 0.34), 0 0 0 1px rgba(20, 26, 50, 0.9);
  background: #0b0f1e;
}

.marble-svg {
  display: block;
  width: 100%;
  height: auto;
}

.race-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.race-exports {
  margin: 0;
}

.race-meter {
  display: grid;
  gap: 0.25rem;
  background: #151b30;
  color: #e8ecf8;
  border-radius: 12px;
  padding: 0.6rem 0.8rem 0.7rem;
  font-variant-numeric: tabular-nums;
}

.race-meter[hidden],
.race-podium[hidden],
.roster-return[hidden],
.doc-actions[hidden] {
  display: none;
}

.race-meter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.88rem;
  min-width: 0;
}

.race-meter-label {
  flex: none;
  color: #9aa6c7;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.race-meter-value {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.race-meter-bar {
  height: 6px;
  margin-top: 0.25rem;
  background: #2b3453;
  border-radius: 999px;
  overflow: hidden;
}

.race-meter-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f5c542, #f08a4b);
}

.race-podium {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  background: linear-gradient(180deg, #fffaf0, var(--surface));
}

.race-podium-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: var(--ink-faint);
  margin: 0 0 0.35rem;
}

.race-podium-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.race-podium-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  min-width: 0;
}

.race-podium-1 {
  font-size: 1.15rem;
}

.race-podium-place {
  flex: none;
  min-width: 2.6rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.race-podium-1 .race-podium-place {
  color: #8a5e00;
}

.race-podium-name {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* The stage (RACE-EXPERIENCE): a dark arena with a tall course seen through a
   camera. World shapes scale with the camera; balls, tags, the map and the
   HUD are drawn in screen space so they stay readable. */
.rx-light {
  fill: rgba(140, 160, 255, 0.07);
}

.rx-tower {
  stroke: rgba(150, 170, 230, 0.12);
  stroke-width: 2;
}

.rx-board {
  stroke: none;
}

.rx-band {
  fill: rgba(255, 255, 255, 0.025);
}

.rx-lane {
  opacity: 0.07;
}

.rx-accent-rail {
  opacity: 0.85;
}

.rx-secnum {
  font: 900 17px system-ui, sans-serif;
  text-anchor: middle;
  opacity: 0.9;
}

.rx-plaque-bg {
  fill: rgba(8, 11, 24, 0.72);
  stroke: rgba(255, 255, 255, 0.08);
}

.rx-plaque text {
  font: 800 9.5px system-ui, sans-serif;
  letter-spacing: 0.06em;
  fill: #e5eaf8;
}

.rx-shadow {
  fill: rgba(0, 0, 0, 0.42);
}

.rx-peg .race-bumper-body {
  stroke-width: 1.4;
}

.rx-bumper .race-bumper-body {
  stroke-width: 2.6;
}

.race-bumper.is-hit .race-bumper-body {
  fill: #fff6d6;
}

.rx-bumper.is-hit .race-bumper-core {
  fill: #ffffff;
}

.rx-shadow-line {
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 6;
  stroke-linecap: round;
}

.rx-ledge,
.rx-roof,
.rx-funnel,
.rx-bar,
.rx-chute {
  stroke-width: 6;
  stroke-linecap: round;
}

.rx-ledge {
  stroke: #b8b1ee;
}

.rx-roof {
  stroke: #8fe0c2;
}

.rx-funnel {
  stroke: #d8deef;
}

.rx-chute {
  stroke: #f5c542;
  stroke-width: 4;
}

.rx-glint {
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1;
  stroke-linecap: round;
}

.rx-wall {
  stroke: #56628a;
  stroke-width: 3;
}

.rx-island {
  stroke: #4fc79a;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* Fixed parts added with the moving-obstacle course: hoppers above the
   paddle wheels and the steep fast ramps. Stroke width = 2 × half thickness. */
.rx-hopper,
.rx-ramp {
  stroke-width: 6;
  stroke-linecap: round;
}

.rx-hopper {
  stroke: #f3b89c;
}

.rx-ramp {
  stroke: #b3a6ff;
}

/* Moving parts. Their geometry is set every frame from moverShapes. */
.rx-wheel-well {
  fill: rgba(6, 9, 20, 0.45);
}

.rx-arm {
  stroke: #f08a5d;
  stroke-width: 4;
  stroke-linecap: round;
}

.rx-paddle .rx-shadow-line {
  stroke-width: 4;
}

.rx-hub {
  fill: #2b1d17;
  stroke: #f08a5d;
  stroke-width: 2;
}

.rx-hub-bolt {
  fill: #ffd9c7;
}

.rx-slide {
  stroke: #f0b64a;
  stroke-width: 6;
  stroke-linecap: butt;
}

.rx-slide-cap {
  fill: #2a2230;
  stroke: #f0b64a;
  stroke-width: 1.6;
}

.rx-slide-track {
  fill: #2a2230;
  stroke: rgba(240, 182, 74, 0.55);
  stroke-width: 1;
}

/* Round ends: the drawn leaf reaches 3 units past its end coordinate, exactly
   the capsule the planner keeps the balls clear of (INTERNATIONAL-FIX). */
.rx-leaf {
  stroke: #5fd3e0;
  stroke-width: 6;
  stroke-linecap: round;
}

.rx-shutter-house {
  fill: #13303a;
  stroke: rgba(95, 211, 224, 0.6);
  stroke-width: 1;
}

.rx-shutter-lamp {
  fill: #5a2530;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1;
}

.rx-shutter-lamp.is-open {
  fill: #54e39a;
}

.rx-gate {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(214, 222, 245, 0.3);
  stroke-width: 1.2;
}

.race-gate-floor {
  stroke: #f5c542;
  stroke-width: 4;
  stroke-linecap: round;
}

.rx-sign-bg {
  fill: #0c1020;
  stroke: #f5c542;
  stroke-width: 1.4;
}

.rx-sign text {
  font: 900 10px system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-anchor: middle;
  fill: #f5c542;
}

.rx-finish-glow {
  opacity: 0.9;
}

.race-step-num {
  font: 800 11px system-ui, sans-serif;
  text-anchor: middle;
  fill: #151b30;
}

/* Podium cards: screen-space, so names stay readable at any camera zoom. */
.race-podium-label-bg {
  fill: rgba(9, 12, 26, 0.9);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
}

.race-podium-label-1 .race-podium-label-bg {
  fill: #f5c542;
  stroke: #fff1bf;
}

.race-podium-label-medal {
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 0.8;
}

.race-podium-label-num {
  font: 900 16px system-ui, sans-serif;
  text-anchor: middle;
  fill: #1a1f33;
}

.race-podium-label-name {
  font: 800 16px system-ui, sans-serif;
  fill: #f4f6fc;
}

.race-podium-label-1 .race-podium-label-name {
  fill: #1a1f33;
}

.rx-vignette {
  pointer-events: none;
}

/* Balls (screen space). */
.marble {
  cursor: pointer;
}

.marble .marble-body {
  stroke: rgba(10, 12, 20, 0.65);
  stroke-width: 1;
}

.marble-ring {
  fill: none;
  stroke-width: 2.4;
  opacity: 0;
}

.marble.is-lead-1 .marble-ring {
  opacity: 1;
  stroke: #f5c542;
}

.marble.is-lead-2 .marble-ring {
  opacity: 1;
  stroke: #e3e8f4;
}

.marble.is-lead-3 .marble-ring {
  opacity: 1;
  stroke: #e39a5f;
}

.marble.is-watch .marble-ring {
  opacity: 1;
  stroke: #ffffff;
  stroke-dasharray: 3 2;
}

.marble.is-home.is-lead-1 .marble-ring {
  animation: race-pulse 1.1s ease-in-out infinite;
}

html[data-motion="reduce"] & .marble.is-home.is-lead-1 .marble-ring {
  animation: none;
}



.race-trail {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.28;
}

/* Name tags beside the leaders. */
.race-tag-bg {
  fill: rgba(9, 12, 26, 0.86);
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1;
}

.race-tag text {
  font: 800 10px system-ui, sans-serif;
  fill: #f4f6fc;
}

.race-tag[data-place="1"] .race-tag-bg {
  fill: #f5c542;
  stroke: #fff1bf;
}

.race-tag[data-place="1"] text {
  fill: #1a1f33;
}

.race-tag[data-place="2"] .race-tag-bg {
  stroke: #e3e8f4;
}

.race-tag[data-place="3"] .race-tag-bg {
  stroke: #e39a5f;
}

.race-tag.is-watch .race-tag-bg {
  stroke: #ffffff;
  stroke-dasharray: 3 2;
}

/* The course map on the right edge. */
.race-map-bg {
  fill: rgba(6, 8, 18, 0.62);
  stroke: rgba(255, 255, 255, 0.1);
}

.race-map-sec {
  opacity: 0.4;
}

.race-map-finish {
  stroke: #f4f6fb;
  stroke-width: 1.5;
}

.race-map-view {
  fill: rgba(255, 255, 255, 0.12);
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1;
}

.race-map-dot {
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 0.6;
}

/* The HUD over the stage (visual only; the status line and table are read). */
.race-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #eef1fa;
  font-variant-numeric: tabular-nums;
}

.race-hud-top {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  max-width: 62%;
  background: rgba(8, 11, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.3rem 0.5rem 0.35rem;
  backdrop-filter: blur(3px);
}

/* Moved to the bottom-left, above the camera buttons, while a ball waiting on
   a bar would otherwise be under it (ui/draw-v4.js `dodgeHud`). */
.race-hud-top.is-dodge {
  top: auto;
  bottom: 3.4rem;
}

.race-hud-live {
  margin: 0 0 0.15rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9aa6c7;
}

.race-hud-live:empty {
  display: none;
}

.race-hud-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.12rem;
}

.race-hud-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
}

.race-hud-row[hidden] {
  display: none;
}

.race-hud-place {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 900;
  color: #151b30;
}

.race-hud-1 .race-hud-place {
  background: #f5c542;
}

.race-hud-2 .race-hud-place {
  background: #dfe5f2;
}

.race-hud-3 .race-hud-place {
  background: #e39a5f;
}

.race-hud-chip {
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0.6rem;
  flex: none;
}

.race-hud-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.race-hud-info {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  justify-items: end;
  gap: 0.15rem;
  max-width: 40%;
}

/* Moved to the bottom-right, clear of the course map down the right edge and
   of the standings box when both have stepped aside, while a ball waiting on a
   bar would sit under the clock (see dodgeHud). */
.race-hud-info.is-dodge {
  top: auto;
  bottom: 3.4rem;
  right: 6.5%;
  max-width: 36%;
}

.race-hud-clock {
  background: rgba(8, 11, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.12rem 0.45rem;
  font-size: 0.84rem;
  font-weight: 800;
}

.race-hud-sec {
  background: rgba(8, 11, 24, 0.7);
  border-radius: 6px;
  padding: 0.08rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #cfd6ea;
  text-align: right;
  /* A long Korean section name wraps between words, not inside one. */
  word-break: keep-all;
}

.race-hud-sec:empty {
  display: none;
}

.race-hud-count {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 5.5rem;
  text-align: center;
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1.1;
  color: #f5c542;
  background: rgba(8, 11, 24, 0.84);
  border: 2px solid #f5c542;
  border-radius: 18px;
  padding: 0.2rem 0.9rem 0.3rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.race-hud-count[hidden],
.race-hud-caption[hidden],
.race-hud-winner[hidden] {
  display: none;
}

.race-hud-count.is-pop {
  animation: race-count-pop 0.45s ease-out;
}

html[data-motion="reduce"] & .race-hud-count.is-pop {
  animation: none;
}



.race-hud-caption {
  position: absolute;
  left: 50%;
  bottom: 3.6rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(8, 11, 24, 0.8);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
}

/* Right-aligned under the clock: section plaques are on the left edge of the
   course, and the finish and podium are at the bottom of the finish shot. */
.race-hud-winner {
  position: absolute;
  right: 0.6rem;
  top: 5.4rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 60%;
  background: linear-gradient(180deg, #ffe08a, #e0a92a);
  color: #1a1f33;
  border-radius: 999px;
  padding: 0.3rem 0.9rem 0.3rem 0.5rem;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.race-hud-winner-label {
  flex: none;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.race-hud-winner-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

/* Camera toggle. */
.race-cam {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(8, 11, 24, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.race-cam-btn {
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  color: #cfd6ea;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  min-height: 2.1rem;
  cursor: pointer;
}

.race-cam-btn[aria-pressed="true"] {
  background: #f5c542;
  color: #1a1f33;
}

.race-cam-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 1px;
}

/* Race length: three options in one row. */
.race-length {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.race-length-label {
  float: left;
  margin-right: 0.3rem;
  padding: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.race-length-opt {
  position: relative;
  display: inline-flex;
}

.race-length-opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.race-length-opt span {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--surface);
  color: var(--ink-mid);
  white-space: nowrap;
}

.race-length-opt input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.race-length-opt input:focus-visible + span {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
}

.race-length-opt input:disabled + span {
  opacity: 0.55;
}

.race-length-note {
  margin: 0.2rem 0 0;
}

.race-watch {
  display: grid;
  gap: 0.2rem;
}

.race-watch select {
  font: inherit;
  min-height: 2.5rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}

/* ---- tool bar */
.tool-nav {
  display: block;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.tool-nav[hidden] {
  display: none;
}

.tool-nav-inner {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0;
  min-height: var(--nav-h);
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-mid);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.38rem 0.95rem 0.38rem 0.75rem;
  min-height: 2.5rem;
  cursor: pointer;
  white-space: nowrap;
}

.tool-btn:hover {
  background: var(--surface-alt);
  color: var(--ink);
}

.tool-btn[aria-current="page"] {
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.28);
}

.tool-btn:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
}

.tool-ico {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-ico .tool-ico-fill,
.tool-ico .tool-ico-hub {
  fill: currentColor;
  stroke: none;
}

.tool-more {
  margin-left: auto;
  border-color: var(--line-strong);
}

.tool-more[data-current="true"] {
  border-color: var(--indigo);
  color: var(--indigo);
  background: var(--indigo-tint);
}

.tool-more[aria-expanded="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---- the list, when a tool asks for it */
.roster-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0 0 0.7rem;
}

.roster-bar .fine-print {
  margin: 0;
}

.roster-return {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  padding: 0.6rem 0.7rem;
  background: var(--indigo-tint);
  border-radius: var(--radius-sm);
}

.roster-return .fine-print {
  flex: 1 1 14rem;
  margin: 0;
}

.layout[data-roster="edit"] {
  grid-template-columns: minmax(0, 46rem);
  justify-content: center;
}

.layout[data-roster="edit"] .panel-work,
.layout[data-roster="edit"] #results-block {
  display: none;
}

.layout[data-roster="edit"] .panel-input {
  position: static;
  max-height: none;
  overflow: visible;
}

.pane-title.tool-title {
  font-size: 1.3rem;
}

@media (min-width: 901px) {
  .marble-result {
    max-height: min(26rem, 50vh);
    overflow: auto;
  }
}

@media (max-width: 900px) {
  .doc-actions[data-scope="share"] {
    order: 0;
    width: auto;
  }

  .race-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .marble-stage {
    width: min(100%, 30rem);
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .tool-nav-inner {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.2rem;
    padding: 0.3rem 0;
  }

  .tool-btn {
    flex-direction: column;
    justify-content: center;
    gap: 0.12rem;
    padding: 0.3rem 0.1rem;
    font-size: 0.68rem;
    line-height: 1.15;
    border-radius: 12px;
    white-space: normal;
    word-break: keep-all;
    text-align: center;
    min-height: var(--tap);
  }

  .tool-more {
    margin-left: 0;
  }

  .pane-race .race-notice {
    font-size: 0.74rem;
  }

  /* Title and "Edit participants" on one line, the count under them. */
  .race-head .roster-bar {
    display: contents;
  }

  .race-head [data-edit-roster] {
    order: 1;
  }

  .race-head .draw-count {
    order: 2;
    flex: 1 1 100%;
    font-size: 0.78rem;
  }

  .pane-race .race-controls {
    margin-top: 0.4rem;
  }

  .race-controls .btn {
    flex: 1 1 auto;
  }

  .race-length {
    flex: 1 1 100%;
    flex-wrap: nowrap;
  }

  .race-length-label {
    float: none;
    font-size: 0.7rem;
    margin: 0 0 0.15rem;
  }

  .race-length-opt {
    flex: 1 1 0;
  }

  .race-length-opt span {
    width: 100%;
    justify-content: center;
    padding-inline: 0.3rem;
    font-size: 0.76rem;
  }

  .race-hud-row {
    font-size: 0.74rem;
  }
}

@media (max-width: 560px), (pointer: coarse) {
  .race-cam-btn,
  .race-length-opt span {
    min-height: var(--tap);
  }
}

.marble-badge {
  position: absolute;
  bottom: 0.75rem;
  right: 0.6rem;
  margin: 0;
  background: var(--indigo); /* tools-hub: was #4338ca */
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.marble text {
  font: 800 7.4px system-ui, sans-serif;
  fill: #fff;
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 1.5px;
  paint-order: stroke;
}

.marble-balls.is-preview {
  opacity: 0.92;
}

.marble-progress {
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}

.marble-result {
  min-width: 0;
}

@media (max-width: 560px), (pointer: coarse) {
  .ladder-start,
  .ladder-name,
  .ladder-outcome,
  .ladder-slot,
  .lane-step,
  #ladder-lanes {
    min-height: var(--tap);
  }

  .lane-step {
    min-width: var(--tap);
  }

  .ladder-slot {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media print {
  .ladder-scroll {
    overflow: visible;
  }

  .marble-stage {
    display: none;
  }
}

/* tools-hub design alignment: the indigo UI accent becomes the shared teal, ink becomes navy.
   The wheel's own segment colours are content and stay. */
& { display: block; --indigo: #0b6169; --indigo-deep: #084a50; --indigo-tint: #e8f4f4; --ink: #0b1f3a; }
/* Same content width as the shared .container (1080px incl. 20px sides, 14px on phones). Kept as outside
   margins like the original .shell, because some controls (the welcome ✕) sit slightly past its edge. */
.shell { width: min(1040px, 100% - 40px); margin-inline: auto; }
@media (max-width: 640px) { .shell { width: calc(100% - 28px); } }
.hub-hidden { display: none !important; }
/* tools-hub focused tool view: the shared one-line bar already names the area, so the app's brand mark and
   name (and the welcome's repeat of it) go; the wheel name, wheel actions, utilities and tool bar stay. */
.tool-view & .pn-brand-mark, .tool-view & .pn-brand-name, .tool-view & .welcome-kicker { display: none; }
/* tools-hub: tool guide drawings (see TOOL_ART) — the area pink, the wheel's own colours for pieces */
.welcome-tool { transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease; }
@media (min-width: 561px) { .welcome-tool { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 10px; align-items: center; } }
.welcome-tool > strong, .welcome-tool > span:not(.welcome-tool__art) { grid-column: 2; }
.welcome-tool > .welcome-tool__art { grid-column: 1; grid-row: 1 / span 2; display: block; width: 56px; height: 40px; margin: 0; }
.welcome-tool__art svg { display: block; width: 56px; height: 40px; overflow: visible; }
.welcome-tool > .welcome-tool__art { flex: none; }
/* phones keep the original compact chips; the drawing shrinks to a 28px mark in front of the name */
@media (max-width: 560px) { .welcome-tool > .welcome-tool__art { width: 28px; height: 20px; margin-right: 6px; } .welcome-tool__art svg { width: 28px; height: 20px; } }
.welcome-tool:hover, .welcome-tool:focus-visible { transform: translateY(-2px); }
.ta-w0, .ta-fill { fill: #c23f7c; } .ta-w1 { fill: #f08bb6; } .ta-w2 { fill: #2d68c4; }
.ta-rim { fill: none; stroke: #0b1f3a; stroke-width: 2; } .ta-ink { fill: #0b1f3a; }
.ta-line { fill: none; stroke: #b9c2cf; stroke-width: 2.4; stroke-linecap: round; }
.ta-path { fill: none; stroke: #c23f7c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ta-flag { fill: none; stroke: #0b1f3a; stroke-width: 1.8; stroke-linecap: round; }
.ta-box { fill: #fbe8f1; stroke: #f0b8d0; } .ta-box--b { fill: #e8f0fb; stroke: #b9cdef; }
.ta-soft { fill: #fbe8f1; } .ta-num { fill: #6b7a90; font-weight: 800; } .ta-on { fill: #fff; font-weight: 800; }
.ta-bar { fill: #e3e8ef; } .ta-bar-strong { fill: #f08bb6; }
@media (prefers-reduced-motion: reduce) { .welcome-tool { transition: none; } .welcome-tool:hover, .welcome-tool:focus-visible { transform: none; } }
}