/* Title, room entry, muster, and reference views. Arena styles live separately. */
:is(.title-screen,.entry-screen,.muster-screen,.reference-screen) {
  --screen-ink: oklch(95% .017 84);
  --screen-dim: oklch(78% .026 275);
  --screen-ember: #ee8758;
  --screen-dark: oklch(15% .023 293);
  --screen-rule: oklch(70% .03 277 / .32);
  --screen-ui: var(--font-ui, 'Segoe UI', system-ui, sans-serif);
  --screen-display: var(--font-display, Georgia, serif);
  color: var(--screen-ink);
  font-family: var(--screen-ui);
}
body[data-contrast="true"] :is(.title-screen,.entry-screen,.muster-screen,.reference-screen) {
  --screen-dim: var(--screen-ink);
  --screen-rule: oklch(76% .035 277 / .76);
}
.title-screen, .entry-screen {
  min-block-size: 100svh;
  min-block-size: 100dvh;
  display: grid;
  position: relative;
  isolation: isolate;
  align-items: center;
  background: var(--screen-dark);
}
.title-screen { grid-template-rows: auto minmax(min-content,1fr); }
body:has(:is(.title-screen,.entry-screen,.muster-screen)) > :is(.site-head,.site-footer) { display: none; }
body:has(:is(.title-screen,.entry-screen,.muster-screen)) > #event-status { inset-block-start: 0; }
.title-screen__art,
.title-screen__art::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.title-screen__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.title-screen__art::after {
  content: '';
  z-index: 1;
  background: linear-gradient(90deg, oklch(12% .028 282 / .98) 1%, oklch(13% .03 285 / .89) 26%, oklch(14% .028 283 / .19) 51%, transparent 74%),
    linear-gradient(0deg, oklch(12% .03 283 / .9), transparent 27%),
    linear-gradient(180deg, oklch(14% .03 281 / .62), transparent 16%);
}
.entry-screen .title-screen__art::after {
  background: linear-gradient(90deg, oklch(12.5% .027 298 / .98) 1%, oklch(13% .026 296 / .93) 26%, oklch(15% .026 294 / .68) 49%, oklch(15% .024 296 / .1) 79%),
    linear-gradient(0deg, oklch(13% .026 294 / .9), transparent 29%);
}
.title-screen__stage,
.entry-sheet {
  width: min(100%, 100rem);
  margin-inline: auto;
  padding-inline: clamp(1.45rem, 7vw, 7.5rem);
}
.title-screen__stage { display: grid; justify-items: start; align-self: center; padding-block: 1rem 2.5rem; }
.title-screen__tools { justify-self: end; margin-block-start: max(.32rem,env(safe-area-inset-top)); margin-inline-end: max(.7rem,env(safe-area-inset-right)); display: flex; flex-wrap: wrap; justify-content: end; gap: .26rem; max-inline-size: calc(100% - 1.4rem); }
.title-screen__tools .btn { min-height: 48px; padding-inline: .55rem; font-size: .76rem; text-shadow: 0 1px 5px var(--screen-dark); }
.title-screen__sigil { display: grid; place-items: center; width: 2.9rem; aspect-ratio: 1; margin-bottom: .12rem; border-radius: 50%; background: radial-gradient(circle,oklch(15% .03 292),transparent 73%); }
.title-screen__sigil img { width: 77%; height: auto; filter: drop-shadow(0 1px 4px oklch(12% .03 275)); }
.screen-kicker {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--screen-ember);
  font-size: .73rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.screen-kicker > span { flex: none; width: .49rem; height: .49rem; background: currentColor; transform: rotate(45deg); }
.title-screen__logo {
  width: fit-content;
  color: var(--screen-ink);
  font: 900 clamp(4.3rem, 8.9vw, 8.8rem)/.88 var(--screen-display);
  letter-spacing: -.064em;
  text-transform: uppercase;
  margin: .12rem 0 .65rem;
  padding-inline-end: .07em;
  text-shadow: 0 .08em .4em oklch(11% .033 293 / .52);
}
.title-screen__line {
  color: var(--screen-dim);
  font-size: clamp(.94rem, 1.55vw, 1.18rem);
  max-width: 31ch;
  font-weight: 520;
  text-shadow: 0 2px 5px var(--screen-dark);
}
.title-access { max-width: 34rem; margin-block: .18rem 0; color: var(--screen-dim); font-size: .78rem; }
.title-access strong { color: var(--screen-ink); margin-inline-end: .35rem; }
.title-access .btn { margin-block-start: .3rem; }
.title-actions { width: min(100%, 20rem); display: grid; margin-block-start: 1rem; }
.title-action.btn {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: min(.8rem,2.2vw);
  padding-inline: min(.72rem,3vw);
  text-align: start;
  font-size: 1rem;
  line-height: 1.2;
}
.title-action > span { overflow-wrap: anywhere; }
.title-action.btn.primary { margin-block-end: .24rem; min-height: 3.35rem; font-weight: 790; }
.title-action.btn:not(.primary) { border-radius: 0; border-color: transparent; border-block-end-color: var(--screen-rule); background: oklch(14% .029 281 / .79); }
.title-action.btn:not(.primary):hover { background: var(--raised); }
.title-action:not(.primary) .icon:last-child { color: var(--screen-ember); }
.title-action.btn:focus-visible { outline-offset: -2px; }
.title-links { display: flex; flex-wrap: wrap; gap: 0 .5rem; margin-top: .1rem; }
.title-links .btn { padding-inline: .54rem; color: var(--screen-ink); font-size: .84rem; }

.entry-sheet { padding-block: clamp(2.4rem, 6vw, 6.25rem); }
.entry-sheet form { max-width: 29rem; }
.screen-title {
  max-width: 18ch;
  margin: .25rem 0 .5rem;
  color: var(--screen-ink);
  font: 740 clamp(2.15rem, 4.25vw, 4.2rem)/1.09 var(--screen-display);
  letter-spacing: -.041em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.screen-copy { color: var(--screen-dim); line-height: 1.48; max-width: 50ch; }
.entry-sheet > .screen-copy { margin-bottom: 1.35rem; }
.entry-sheet > .screen-back { margin: 0 0 1.15rem -.65rem; }
.screen-back { color: var(--screen-dim); white-space: nowrap; }
.screen-back:hover:not(:disabled) { color: var(--screen-ink); }
:is(.entry-sheet,.catalog-screen) .field > :is(input,select) {
  color: var(--screen-ink);
  border-color: var(--screen-rule);
  border-radius: .16rem;
  background: oklch(21% .031 295 / .97);
  min-height: 3rem;
}
.entry-sheet .form-submit { margin-block-start: .9rem; }
.entry-sheet .form-note:empty { display: none; }
.entry-sheet .form-note { color: oklch(83% .114 48); }
.screen-commit { min-height: 3.25rem; border-radius: .16rem; min-width: min(100%, 11.5rem); }
.entry-invite .invite-code { letter-spacing: .085em; }
.entry-invite .screen-commit { width: 100%; justify-content: space-between; }
.entry-invite .learn-name { margin-block-start: .42rem; }
.room-options { border-block: 1px solid var(--screen-rule); }
.room-options summary { min-height: 3rem; padding: .34rem .3rem; align-content: center; }
.room-options summary > span { display: inline-grid; vertical-align: middle; margin-inline-start: .3rem; }
.room-options summary strong { font-size: .91em; }
.room-options summary small { color: var(--screen-dim); font-size: .81em; }
.room-options .form-2 { padding: .35rem .3rem .8rem; }

.learn-entry { min-block-size: calc(100svh - 7.65rem); }
.learn-sheet > .screen-back { margin-block-end: .5rem; }
.learn-return { max-width: 55rem; margin-block: .55rem .8rem; }
.learn-return .caption { margin-top: .35rem; }
.learn-paths {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(.85rem, 2vw, 1.65rem);
  max-width: 53rem;
}
.learn-guide {
  padding: clamp(1rem, 2.7vw, 1.85rem);
  border: 1px solid oklch(62% .08 52 / .68);
  background: linear-gradient(155deg, oklch(23% .036 311), oklch(17% .023 292) 76%);
  box-shadow: 0 .9rem 2rem oklch(10% .022 294 / .48);
}
.learn-guide h2 { font-size: 1.55em; font-weight: 780; line-height: 1.12; letter-spacing: -.035em; }
.learn-guide .screen-copy { margin-block: .45rem .65rem; font-size: .91em; }
.learn-guide__pace { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-block-end: .95rem; color: var(--screen-dim); font-size: .77em; font-weight: 640; }
.learn-guide__pace > span + span::before { content: '·'; margin-inline-end: .45rem; }
.learn-guide__pace .icon { color: var(--screen-ember); width: .94rem; height: .94rem; }
.learn-guide .screen-commit { display: flex; justify-content: space-between; width: 100%; text-align: start; }
.learn-guide .form-note { margin-block-start: .55rem; }
.learn-guide > [data-op="resume-guided"] { margin-block-end: .45rem; }
.learn-name summary { display: list-item; align-content: center; min-height: 48px; padding-inline: .25rem; color: var(--screen-ink); font-size: .83em; }
.learn-name summary span { color: var(--screen-dim); }
.learn-name .field { padding-block-end: .35rem; }
.learn-alternatives { display: grid; min-width: 0; background: oklch(16% .027 294 / .96); border-block: 1px solid var(--screen-rule); }
.learn-option {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .75rem;
  min-height: 56px;
  border: 0;
  background: none;
  padding: .72rem .8rem;
  text-align: start;
}
.learn-option + .learn-option { border-top: 1px solid var(--screen-rule); }
.learn-option:hover, .learn-option:focus-visible { background: oklch(24% .035 299); }
.learn-option:focus-visible { outline-offset: -3px; }
.learn-option:active { background: oklch(29% .04 299); }
.learn-option .icon { color: var(--screen-ember); }
.learn-option .icon:last-child { color: var(--screen-dim); }
.learn-option strong, .learn-option small { display: block; }
.learn-option strong { font-weight: 720; font-size: .95em; line-height: 1.2; }
.learn-option small { margin-top: .22rem; color: var(--screen-dim); font-size: .77em; line-height: 1.22; }
.challenge-sheet form { max-width: 42rem; }
.training-continue { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; max-width: 42rem; margin-block: .65rem 1rem; padding: .55rem 0; border-block: 1px solid var(--screen-rule); }
.training-continue h2 { font-size: .95rem; line-height: 1.2; overflow-wrap: anywhere; }
.training-continue .btn { min-height: 48px; }
.challenge-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; min-width: 0; margin: .9rem 0 0; padding: 0; border: 0; }
.challenge-list legend { padding: 0 0 .35rem; font-size: .79rem; font-weight: 700; color: var(--screen-dim); }
.challenge-option { display: flex; align-items: start; gap: .62rem; min-height: 3.5rem; padding: .6rem .65rem; border: 1px solid var(--screen-rule); background: #171322e8; border-radius: .15rem; cursor: pointer; }
.challenge-option:hover, .challenge-option:has(input:checked) { border-color: var(--screen-ember); }
.challenge-option:has(input:checked) { background: #29202c; }
.challenge-option > input { flex: none; margin: .15rem 0 0; accent-color: var(--screen-ember); }
.challenge-option span { display: grid; gap: .17rem; min-width: 0; }
.challenge-option strong { font-size: .79rem; }
.challenge-option small { color: var(--screen-dim); font-size: .69rem; line-height: 1.35; }

.reference-screen {
  width: min(100%, 83rem);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 5.8rem) clamp(1.15rem, 5.5vw, 5rem) clamp(2.5rem, 6vw, 5.5rem);
}
.reference-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  border-bottom: 1px solid var(--screen-rule);
  padding-bottom: 1.25rem;
  margin-bottom: clamp(1.35rem, 3.5vw, 2.5rem);
}
.reference-head .screen-back { margin-inline-end: -.65rem; }
.reference-layout h2 {
  color: var(--screen-ink);
  font: 740 1.42rem/1.23 var(--screen-display);
  letter-spacing: -.027em;
}

.muster-screen {
  --muster-medallion: clamp(3.75rem,6.2vw,5.3rem);
  --muster-brass: oklch(80% .075 76);
  --muster-ice: oklch(86% .044 190);
  --muster-ember: oklch(80% .101 54);
  --muster-edge: oklch(71% .063 75 / .64);
  --muster-score: var(--font-score,'Arial Narrow',var(--screen-ui));
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template: auto minmax(min-content,1fr) / minmax(0,1fr) clamp(15.8rem,24vw,23.5rem);
  min-block-size: 100svh;
  min-block-size: 100dvh;
  container: muster-shell / inline-size;
  background: radial-gradient(ellipse at 27% 40%,oklch(27% .039 222),oklch(16% .028 240) 72%);
}
.muster-head {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(.42rem,1.3vw,1.1rem);
  padding: max(.38rem,env(safe-area-inset-top)) clamp(.6rem,2.1vw,1.8rem) .42rem;
  border-block-end: 1px solid oklch(68% .069 75 / .34);
  background: oklch(16% .027 242 / .88);
}
.muster-brand { width: clamp(1.65rem,4vw,2.45rem); height: auto; }
.muster-head .screen-kicker { color: var(--muster-brass); font-size: .63rem; gap: .35rem; }
.muster-head .screen-kicker span { background: currentColor; }
.muster-head .screen-title { margin: .1rem 0 0; color: var(--screen-ink); font-size: clamp(1.17rem,2.3vw,1.95rem); line-height: 1.02; overflow-wrap: anywhere; }
.muster-head-actions { display: flex; justify-self: end; align-items: center; flex-wrap: wrap; justify-content: end; gap: .2rem .45rem; }
.muster-head .muster-leave { margin: 0; min-width: 48px; min-height: 48px; }

.muster-board {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template: minmax(min-content,1fr) auto minmax(min-content,1fr) / minmax(0,1fr);
  gap: clamp(.5rem,3.4dvh,2.1rem);
  min-inline-size: 0;
  min-block-size: 0;
  padding: clamp(.75rem,4dvh,2.5rem) clamp(.6rem,8vw,8.5rem);
}
.muster-board::before, .muster-board::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.muster-board::before { background: url('/assets/arena-v2.webp') center / 100% 100% no-repeat; }
.muster-board::after { background: linear-gradient(90deg,transparent 81%,oklch(16% .029 242 / .69)),radial-gradient(ellipse at center,transparent 39%,oklch(13% .026 245 / .35)); }
.muster-center {
  grid-area: 2 / 1;
  align-self: center;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: .43rem;
  inline-size: min(100%,21rem);
  max-width: 100%;
  min-width: 0;
  container-type: inline-size;
}
.muster-occupancy { display: grid; justify-items: center; gap: .25rem; }
.muster-count {
  margin: 0;
  color: var(--muster-ice);
  font: 730 .74rem/1.14 var(--screen-ui);
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 4px oklch(11% .03 240);
}
.muster-pegs { display: flex; justify-content: center; flex-wrap: wrap; gap: .26rem; }
.muster-pegs i {
  width: .4rem;
  height: .4rem;
  border: 1px solid var(--muster-brass);
  transform: rotate(45deg);
  background: oklch(15% .022 241);
}
.muster-pegs [data-filled] { background: var(--muster-brass); }
.muster-invite {
  display: grid;
  grid-template: auto auto / minmax(0,1fr) auto;
  align-items: center;
  gap: .25rem .7rem;
  inline-size: fit-content;
  max-inline-size: 100%;
  min-width: 0;
  padding: .55rem .6rem .6rem .78rem;
  border: 1px solid var(--muster-edge);
  background: linear-gradient(154deg,oklch(36% .058 71),oklch(25% .038 59) 53%,oklch(20% .029 55));
  box-shadow: inset 0 0 0 3px oklch(85% .082 78 / .12),0 .4rem 0 oklch(14% .023 241 / .86),0 .64rem 1.45rem oklch(10% .02 240 / .82);
  color: var(--screen-ink);
}
.muster-invite-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .33rem;
  color: var(--muster-brass);
  font: 730 .66rem/1.15 var(--screen-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.muster-invite-title .icon { width: .8rem; height: .8rem; }
.muster-invite .room-code {
  display: block;
  color: var(--screen-ink);
  font: 820 clamp(1.3rem,9vw,2.55rem)/1 var(--muster-score);
  letter-spacing: .08em;
  white-space: nowrap;
  user-select: all;
}
.muster-screen .muster-copy {
  min-width: 48px;
  min-height: 48px;
  padding-inline: .68rem;
  border-color: var(--muster-edge);
  border-radius: .16rem;
  background: oklch(21% .026 241);
  color: var(--screen-ink);
  font-size: .76rem;
}
.muster-screen .muster-copy:hover { background: oklch(31% .039 232); border-color: var(--muster-brass); }
.muster-copy, .muster-actions .screen-commit { scroll-margin-block: .38rem; }
@container (max-width: 12.5rem) {
  .muster-invite { grid-template-columns: minmax(0,1fr); }
  .muster-invite .room-code { font-size: clamp(1.15rem,9vw,2.1rem); }
  .muster-invite .muster-copy > span { display: inline; }
}
.muster-practice-mark { display: grid; place-items: center; width: 3.8rem; aspect-ratio: 1; border: 1px solid var(--muster-edge); border-radius: 50%; color: var(--muster-brass); background: oklch(22% .038 222 / .85); }
.muster-practice-mark .icon { width: 1.8rem; height: 1.8rem; }

.muster-roster {
  grid-area: 1 / 1 / 4 / 2;
  display: grid;
  grid-template: minmax(min-content,1fr) 7rem minmax(min-content,1fr) / repeat(6,minmax(0,1fr));
  grid-template-rows: subgrid;
  align-self: stretch;
  justify-self: stretch;
  justify-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.muster-seat {
  display: grid;
  justify-items: center;
  align-self: end;
  gap: .23rem;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  line-height: 1.16;
}
.muster-seat:nth-child(1) { grid-area: 3 / 3 / 4 / 5; align-self: start; }
.muster-seat:nth-child(2) { grid-area: 3 / 5 / 4 / 7; align-self: start; }
.muster-seat:nth-child(3) { grid-area: 1 / 5 / 2 / 7; }
.muster-seat:nth-child(4) { grid-area: 1 / 3 / 2 / 5; }
.muster-seat:nth-child(5) { grid-area: 1 / 1 / 2 / 3; }
.muster-seat:nth-child(6) { grid-area: 3 / 1 / 4 / 3; align-self: start; }
.muster-roster[data-seats="3"] .muster-seat:nth-child(2) { grid-area: 1 / 4 / 2 / 6; align-self: end; }
.muster-roster[data-seats="3"] .muster-seat:nth-child(3) { grid-area: 1 / 2 / 2 / 4; }
.muster-roster:is([data-seats="4"],[data-seats="5"]) .muster-seat:nth-child(1) { grid-column: 2 / 4; }
.muster-roster:is([data-seats="4"],[data-seats="5"]) .muster-seat:nth-child(2) { grid-column: 4 / 6; }
.muster-roster[data-seats="4"] .muster-seat:nth-child(3) { grid-column: 4 / 6; }
.muster-roster[data-seats="4"] .muster-seat:nth-child(4) { grid-column: 2 / 4; }
.muster-plate {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--muster-medallion) + .35rem);
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--muster-edge);
  background: radial-gradient(circle,oklch(30% .038 229),oklch(16% .022 242));
  box-shadow: inset 0 0 0 2px oklch(74% .062 79 / .14),0 .24rem .6rem oklch(10% .02 240 / .72);
}
.muster-seat .avatar, .muster-seat__empty {
  display: grid;
  place-items: center;
  width: var(--muster-medallion);
  height: var(--muster-medallion);
  max-width: 100%;
  border-radius: 50%;
}
.muster-seat .avatar { border: 1px solid oklch(68% .049 222); }
.muster-seat[data-you="true"] .muster-plate { border-color: var(--muster-brass); box-shadow: inset 0 0 0 2px oklch(74% .062 79 / .28),0 .2rem .75rem oklch(11% .023 237 / .8); }
.muster-seat[data-seat-state="ready"] .avatar { border-color: var(--muster-ice); }
.muster-seat__empty { border: 1px dashed oklch(75% .048 205 / .62); color: oklch(81% .036 212); }
.muster-seat__empty .icon { width: 38%; height: 38%; }
.muster-seat-no {
  position: absolute;
  inset: auto -.05rem -.05rem auto;
  display: grid;
  place-items: center;
  min-inline-size: 1.18rem;
  min-block-size: 1.13rem;
  padding-inline: .14rem;
  border: 1px solid var(--muster-edge);
  background: oklch(20% .029 240);
  color: var(--muster-brass);
  font: 780 .7rem/1 var(--muster-score);
}
.muster-seat__person { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .04rem .3rem; }
.muster-seat__person strong { color: var(--screen-ink); font-size: clamp(.72rem,1.45vw,1.02rem); overflow-wrap: anywhere; }
.muster-seat__person small { color: var(--muster-brass); font-size: .65rem; }
.muster-seat--open strong { color: var(--screen-dim); font-weight: 600; }
.muster-state {
  --state-ink: var(--screen-dim);
  display: inline-flex;
  gap: .3rem;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--state-ink);
  font-size: .69rem;
  font-weight: 720;
  overflow-wrap: anywhere;
}
.muster-state::before { content: ''; flex: none; width: .31rem; height: .31rem; transform: rotate(45deg); background: currentColor; }
.muster-state[data-tone="ready"], .muster-state[data-tone="bot"] { --state-ink: var(--muster-ice); }
.muster-state[data-tone="host"] { --state-ink: var(--muster-brass); }
.muster-state[data-tone="away"], .muster-state[data-tone="waiting"] { --state-ink: var(--muster-ember); }
.muster-state[data-tone="waiting"]::before,
.muster-state[data-tone="open"]::before { background: transparent; border: 1px solid currentColor; }

.muster-foot {
  display: grid;
  align-content: center;
  min-inline-size: 0;
  gap: clamp(.55rem,2.8dvh,1.65rem);
  padding: .6rem clamp(.65rem,1.8vw,1.55rem) max(.6rem,env(safe-area-inset-bottom));
  border-inline-start: 1px solid oklch(67% .068 74 / .48);
  background: linear-gradient(140deg,oklch(27% .032 239),oklch(17% .027 242) 64%);
}
.muster-actions { display: grid; min-width: 0; gap: .4rem; }
.muster-rally {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .17rem .58rem;
  color: var(--screen-dim);
  font: 730 .73rem/1.2 var(--screen-ui);
}
.muster-rally > span { display: inline-flex; align-items: center; gap: .25rem; }
.muster-rally > span + span { padding-inline-start: .56rem; border-inline-start: 1px solid var(--muster-edge); }
.muster-rally > span:first-child { color: var(--muster-ice); }
.muster-rally > span[data-waiting] { color: var(--muster-ember); }
.muster-rally .icon { width: .86rem; height: .86rem; }
.muster-actions .screen-commit {
  justify-content: space-between;
  min-width: 0;
  width: 100%;
  min-height: 48px;
  border-radius: .15rem;
  border-color: var(--muster-brass);
  font-weight: 800;
  text-align: start;
  white-space: normal;
}
.muster-actions .screen-commit.primary { color: oklch(23% .043 62); background: linear-gradient(155deg,oklch(90% .085 82),oklch(74% .113 69)); }
.muster-actions .screen-commit.primary:hover:not(:disabled) { background: oklch(92% .09 83); }
.muster-actions .screen-commit:disabled { opacity: 1; color: var(--screen-dim); background: oklch(24% .027 240); border-color: var(--muster-edge); box-shadow: none; }
.muster-action-hint { color: var(--screen-dim); font-size: .76rem; line-height: 1.22; }
.muster-brief { display: grid; min-width: 0; gap: .46rem; }
.muster-rules { display: flex; flex-wrap: wrap; gap: .42rem .82rem; padding-block: .57rem; margin: 0; border-block: 1px solid oklch(67% .068 74 / .36); }
.muster-rules > div { display: grid; gap: .09rem; }
.muster-rules dt { color: var(--screen-dim); font-size: .63rem; line-height: 1.16; }
.muster-rules dd { margin: 0; color: var(--screen-ink); font-size: .73rem; line-height: 1.18; font-weight: 690; }
.muster-tools { display: flex; flex-wrap: wrap; gap: .12rem .2rem; }
.muster-tools .btn { min-height: 48px; padding: .26rem .35rem; color: var(--screen-ink); font-size: .7rem; text-align: start; }
.muster-tools .icon { width: .86rem; height: .86rem; color: var(--muster-brass); }

@media (max-width: 760px) and (orientation: portrait) {
  .muster-screen { --muster-medallion: clamp(2.55rem,12.2vw,3.75rem); grid-template: auto minmax(min-content,1fr) auto / minmax(0,1fr); }
  .muster-head { padding-inline: .55rem; gap: .34rem; }
  .muster-head .muster-leave { padding: 0; }
  .muster-leave span { display: none; }
  .muster-board { gap: clamp(.4rem,2dvh,1rem); padding: .62rem 8%; }
  .muster-board::before { background-image: url('/assets/arena-mobile-v2.webp'); }
  .muster-board::after { background: radial-gradient(ellipse at center,transparent 35%,oklch(13% .026 245 / .4)); }
  .muster-seat__person strong { font-size: .79rem; }
  .muster-foot { border-inline-start: 0; border-block-start: 1px solid var(--muster-edge); gap: .35rem; padding-inline: .58rem; }
  .muster-brief { gap: .18rem; }
  .muster-rules { gap: .25rem .64rem; padding-block: .35rem; }
}
@media (max-width: 380px) and (orientation: portrait) {
  .muster-head .screen-title { font-size: 1.02rem; }
  .muster-head-actions .muster-state { font-size: .62rem; }
  .muster-board { padding-inline: .55rem; }
  .muster-invite { padding-inline: .54rem; gap: .24rem .55rem; }
  .muster-copy > span { display: none; }
  .muster-rules { gap: .22rem .51rem; }
  .muster-tools .btn { padding-inline: .25rem; font-size: .65rem; }
}
@media (max-height: 590px) and (min-width: 621px) and (orientation: landscape) {
  .muster-screen { --muster-medallion: 2.65rem; grid-template-columns: minmax(0,1fr) clamp(13.7rem,31vw,21rem); }
  .muster-board { gap: .46rem; padding: .42rem 8%; }
  .muster-seat__person strong { font-size: .74rem; }
  .muster-seat .muster-state { font-size: .64rem; }
  .muster-foot { gap: .55rem; }
  .muster-rules { padding-block: .38rem; gap: .3rem .63rem; }
}
body[data-text="large"] .muster-seat__person strong { font-size: 1.03rem; }
body[data-text="large"] :is(.muster-state,.muster-seat__person small,.muster-action-hint,.muster-rally) { font-size: .9rem; }
@container muster-shell (max-width: 13rem) {
  .muster-board { grid-template-rows: auto auto; }
  .muster-center { grid-area: 1 / 1; }
  .muster-roster { grid-area: 2 / 1; grid-template: none / minmax(0,1fr); gap: .32rem; }
  .muster-roster[data-seats] .muster-seat:nth-child(n) {
    grid-area: auto;
    grid-template-columns: auto minmax(0,1fr);
    align-self: start;
    align-items: center;
    justify-items: start;
    inline-size: 100%;
    gap: .15rem .38rem;
    padding: .25rem;
    border-block-end: 1px solid var(--muster-edge);
    background: oklch(17% .026 240 / .88);
    text-align: start;
  }
  .muster-seat .muster-plate { grid-row: span 2; }
  .muster-seat__person { justify-content: start; }
  .muster-actions .screen-commit { padding-inline: .45rem; }
}

.reference-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(15rem,.65fr); align-items: start; gap: clamp(2rem, 6vw, 5rem); }
.reference-chapters { counter-reset: chapters; }
.reference-chapters section { counter-increment: chapters; padding-bottom: 1.3rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--screen-rule); }
.reference-chapters h2 { margin-block-end: .45rem; }
.reference-chapters h2::before { content: counter(chapters, decimal-leading-zero); margin-inline-end: .65rem; color: var(--screen-ember); font: 720 .76rem var(--screen-ui); font-variant-numeric: tabular-nums; vertical-align: .15em; }
.reference-chapters p,
.reference-chapters ol { color: var(--screen-dim); max-width: 69ch; }
.reference-chapters ol { padding-inline-start: 1.25rem; margin-block: .55rem 0; }
.reference-chapters li + li { margin-top: .45rem; }
.reference-chapters li::marker { color: var(--screen-ember); font-weight: 700; }
.reference-glossary dl { margin-block: .7rem 0; }
.reference-glossary dt { color: var(--screen-ink); font-weight: 730; }
.reference-glossary dd { margin: .1rem 0 .85rem; color: var(--screen-dim); font-size: .91rem; }
.catalog-screen .catalog-controls { display: grid; grid-template-columns: minmax(12rem,1.55fr) repeat(2,minmax(10rem,.72fr)); gap: .7rem 1rem; margin-block: 0 1.35rem; }
.catalog-screen .count { color: var(--screen-dim); font-size: .8rem; }
.catalog-screen .catalog-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%, 9.4rem), 1fr)); gap: .85rem; }
.catalog-screen .catalog-grid .card { background: oklch(21% .032 295); border-color: var(--screen-rule); border-radius: .15rem; color: var(--screen-ink); padding: 0; min-height: 8rem; transition: border-color .18s ease-out; }
.catalog-screen .catalog-grid .card:hover { border-color: var(--screen-ember); box-shadow: none; }
.catalog-screen .catalog-grid .card-art { aspect-ratio: 1.35; border-radius: 0; }
.catalog-screen .catalog-grid .card-name { color: var(--screen-ink); padding: .46rem .58rem .15rem; font-size: .9rem; }
.catalog-screen .catalog-grid .card-kind { color: var(--screen-dim); margin: auto .58rem .45rem; font-size: .69rem; }

body[data-text="large"] .title-action.btn { font-size: 1.1rem; }
body[data-text="large"] .reference-glossary dd { font-size: .94rem; }

@media (max-width: 760px) {
  .title-screen__art img { object-position: center 40%; }
  .title-screen__logo { font-size: min(clamp(4rem,18vw,7rem),23vw); }
  .title-screen__stage { justify-items: center; align-self: end; text-align: center; padding-block: 1rem max(.9rem, env(safe-area-inset-bottom)); }
  .title-screen__art::after { background: linear-gradient(0deg, oklch(12% .027 284) 2%, oklch(13% .028 284 / .94) 29%, oklch(13% .028 284 / .53) 55%, transparent 77%), linear-gradient(180deg, oklch(14% .03 281 / .61), transparent 17%); }
  .title-access { max-width: 20rem; }
  .entry-screen { align-items: start; }
  .entry-screen .title-screen__art { bottom: auto; height: 21rem; }
  .entry-screen .title-screen__art::after { background: linear-gradient(0deg, var(--screen-dark) 3%, oklch(14% .026 294 / .91) 43%, oklch(14% .026 294 / .45) 83%); }
  .invite-entry { align-items: end; }
  .invite-entry .title-screen__art { height: 100%; }
  .invite-entry .title-screen__art::after { background: linear-gradient(0deg, var(--screen-dark) 0%, oklch(14% .026 294 / .96) 30%, oklch(14% .026 294 / .48) 55%, transparent 76%), linear-gradient(180deg, oklch(14% .026 294 / .72), transparent 22%); }
  .invite-entry .entry-invite { padding-block: 5.1rem max(1.2rem, env(safe-area-inset-bottom)); }
  .entry-invite > .screen-back { position: absolute; inset: max(.55rem, env(safe-area-inset-top)) auto auto max(.75rem, env(safe-area-inset-left)); margin: 0; max-inline-size: calc(100% - 1.5rem); white-space: normal; text-align: start; color: var(--screen-ink); }
  .entry-sheet { padding-block: clamp(1.15rem, 5svh, 4.8rem) 2.3rem; }
  .learn-sheet, .challenge-sheet { padding-block: .5rem 1rem; }
  .learn-sheet > .screen-back { margin-block-end: .25rem; }
  :is(.learn-entry,.challenge-entry) .title-screen__art { height: 15.5rem; }
  :is(.learn-entry,.challenge-entry) .title-screen__art::after { background: linear-gradient(0deg, var(--screen-dark) 2%, oklch(14% .025 294 / .69) 52%, oklch(14% .025 294 / .27)); }
  .screen-title { font-size: clamp(2.1rem, 8vw, 3.5rem); }
  .reference-head { align-items: flex-start; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: 1.3rem; padding-bottom: .8rem; }
  .reference-head .screen-back { margin-inline: -.62rem 0; }
  .reference-layout { grid-template-columns: minmax(0,1fr); gap: .45rem; }
  .catalog-screen .catalog-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .catalog-screen .catalog-controls .field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .title-screen__stage { padding-inline: .75rem; }
  .title-actions { margin-block-start: .64rem; }
  .title-screen__line { font-size: .92rem; }
  .challenge-list { grid-template-columns: minmax(0,1fr); }
  .learn-paths { grid-template-columns: minmax(0,1fr); gap: .65rem; }
  .learn-guide { padding-block-end: .3rem; }
}
@media (max-width: 380px) {
  .catalog-screen .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
}
@media (max-height: 640px) and (max-width: 620px) {
  .title-screen__sigil { display: none; }
  .title-screen__logo { margin-block-end: .42rem; }
  .entry-sheet:not(.learn-sheet,.challenge-sheet) > .screen-back { margin-block-end: .55rem; }
  .entry-sheet:not(.learn-sheet,.challenge-sheet) > .screen-copy { margin-block-end: .8rem; }
}
@media (max-height: 590px) and (min-width: 621px) {
  .title-screen__stage { justify-items: start; align-self: center; text-align: start; padding-block: .4rem .55rem; }
  .title-screen__logo { font-size: clamp(3.4rem,13dvh,5.2rem); margin-bottom: .25rem; }
  .title-screen__sigil { display: none; }
  .title-actions { width: min(49vw,19rem); margin-block-start: .64rem; }
  .title-screen__art::after { background: linear-gradient(90deg, oklch(12% .028 282 / .98), oklch(13% .03 285 / .91) 34%, oklch(14% .028 283 / .20) 68%, transparent); }
}
@media (min-width: 620px) and (max-height: 545px) {
  .learn-entry { align-items: start; }
  .learn-sheet { padding: .15rem clamp(1rem, 5vw, 7rem) .85rem; }
  .learn-sheet > .screen-title { font-size: 2.15rem; margin-block-end: .45rem; }
  .learn-guide { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 .55rem; padding: .75rem .9rem .1rem; }
  .learn-guide h2 { font-size: 1.3em; }
  .learn-guide .screen-copy { grid-column: 1 / -1; margin-block: .35rem .5rem; }
  .learn-guide form { grid-column: 1 / -1; }
  .learn-guide > [data-op="resume-guided"] { grid-column: 1 / -1; }
  .learn-guide__pace { grid-area: 1 / 2; align-self: center; margin: 0; }
  .learn-guide__pace .icon { display: none; }
}