/* Hallpass menus: a dark exorcism-club terminal with original manga artwork.
   Keep this layer scoped to .screen so combat controls retain their own grammar. */
.screen {
  --display: "Broaven", "CT Headstone", "Bahnschrift", "Arial Narrow", sans-serif;
  --menu-bg: #070910; --menu-surface: #0d1420; --menu-raised: #152131;
  --menu-text: #e5f4ff; --menu-muted: #a6b9c9; --menu-line: #2b4357;
  --menu-accent: #54e6f5; --menu-hot: #ff526f;
  --ink-dim: var(--menu-muted);
  color: var(--menu-text); scrollbar-color: #36596c var(--menu-bg);
}
#ui > .screen { z-index: 10; }
.screen :is(input, textarea, select) { font-family: var(--body); }
.screen .fbwho { min-height: 44px; }
.screen:not(.screen-title):not(.screen-intro):not(.screen-stages) {
  background: radial-gradient(ellipse at 100% 0, #ff28551c, transparent 50%),
    radial-gradient(ellipse at 0 100%, #16b9dd14, transparent 50%),
    repeating-linear-gradient(0deg, #54e6f503 0 1px, transparent 1px 4px), var(--menu-bg);
}
.screen::before { color: #54e6f505; -webkit-text-stroke-color: #54e6f512; font-family: var(--display); }
.screen .heading, .screen :is(.screenhead .heading, .card h3, .cdname) {
  font-family: var(--display); font-weight: 700; letter-spacing: .005em; text-shadow: none;
}
.screen .screenhead {
  background: #070910f5; border-bottom: 1px solid var(--menu-line); box-shadow: 0 1px 0 #54e6f50b;
  min-height: 72px; padding-block: 12px;
}
.screen .screenhead .heading { font-size: clamp(30px, 3.8vw, 52px); }
.screen .screenhead .heading::after { display: none; }
.screen .screenhead .kicker { padding: 0; color: var(--menu-accent); font: 600 10px/1.4 var(--mono); letter-spacing: .14em; }
.screen .btn {
  border-radius: 0; border-color: var(--menu-line); background: var(--menu-surface); color: var(--menu-text);
  box-shadow: none; letter-spacing: .075em; transition: background 160ms, border-color 160ms, transform 160ms;
}
.screen .btn.primary { background: #102732; color: var(--menu-accent); border-color: #54e6f5a8; box-shadow: inset 3px 0 var(--menu-accent), 0 0 18px #54e6f50c; }
.screen .btn.primary small { color: inherit; }
.screen .btn.danger { background: #ff526f08; color: #ff93a6; border-color: #ff526f65; }
.screen :is(.card.char, .card.stage) .btn:is(:disabled, .dim) {
  opacity: 1; color: var(--menu-muted); background: #0a0f17; border-color: var(--menu-line); box-shadow: none;
}
.screen :is(.card.char, .card.stage) .btn:is(:disabled, .dim) small { color: inherit; }
.screen .btn.focus:not(:disabled), .screen .btn:focus-visible {
  border-color: #e5f4ff; box-shadow: 0 0 0 2px var(--menu-bg), 0 0 0 4px var(--menu-accent); outline: none;
}
.screen .card { border-radius: 0; background: var(--menu-surface); border-color: var(--menu-line); box-shadow: 0 12px 32px #02050b80; }
.screen .card .blurb { color: var(--menu-muted); }
.screen .buildline { color: var(--menu-muted); }
.screen .folio-label { font: 600 10px/1.5 var(--mono); letter-spacing: .13em; color: var(--menu-muted); }
.screen :is(.cardpanel, .epbox, .steprow, .shoptab, .endstats) { border-radius: 0; }
.screen :is(.cardpanel, .epbox) { background: var(--menu-surface); border-color: var(--menu-line); box-shadow: 0 0 60px #02050b; }
.screen :is(.statgrid .stat, .primerstep) { border-radius: 0; background: var(--menu-surface); border-color: var(--menu-line); }
.screen :is(.statrow, .techitem, .creditlist) { border-color: var(--menu-line); }
.screen :is(.fbtext, .fbwho, .cardinput) { background: #060c13; color: var(--menu-text); border: 1px solid var(--menu-line); border-radius: 0; box-shadow: inset 0 2px 8px #02050b80; caret-color: var(--menu-accent); }
.screen :is(.fbtext, .fbwho, .cardinput)::placeholder { color: #91a8bb; }
.screen .shoptab { background: var(--menu-surface); border-color: var(--menu-line); color: var(--menu-muted); }
.screen .shoptab.on { background: #102732; color: var(--menu-accent); border-color: var(--menu-accent); }
@media (hover: hover) {
  .screen .btn:hover:not(:disabled):not(.dim) { background: #1c3041; border-color: #93d4e7; box-shadow: 0 0 16px #54e6f514; }
  .screen .btn.primary:hover:not(:disabled) { background: #173d48; color: #b0f9ff; border-color: var(--menu-accent); }
}

/* The opening title film carries the wordmark over its kanji watermark. */
.screen.screen-intro .hero { position: relative; isolation: isolate; padding-block: 22px; }
.screen.screen-intro .title-kanji {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) skewX(-6deg);
  font-family: serif; font-weight: 900; font-size: clamp(82px, min(27vw, 30vh), 240px);
  line-height: 1; white-space: nowrap; color: rgba(242,244,255,.1);
  -webkit-text-stroke: 1px rgba(242,244,255,.2); pointer-events: none; user-select: none; z-index: 0;
}
.screen.screen-intro .mainlogo {
  position: relative; z-index: 1;
  flex: 0 0 auto; flex-direction: column; align-items: center; gap: 0;
  font-size: clamp(54px, min(18vw, 22vh), 160px); line-height: .9;
  letter-spacing: .04em; margin: 0;
}
.screen.screen-title .title-actions { width: min(340px, 100%); gap: 12px; }
.screen.screen-title .title-actions .btn { width: 100%; min-width: 0; }
@media (max-height: 500px) {
  .screen.screen-intro .hero { padding-block: 8px; }
  .screen.screen-intro .mainlogo { font-size: clamp(42px, 18vh, 80px); }
  .screen.screen-title .title-actions { gap: 8px; }
  .screen.screen-title .title-actions .btn { min-height: 44px; padding-block: 7px; font-size: 20px; }
}
.screen.screen-title .btn {
  border: 2px solid var(--line-strong); border-radius: 2px; background: #12141f; color: var(--ink);
  font: 700 21px/1.15 var(--display); letter-spacing: .06em;
  transform: skewX(-7deg); box-shadow: 4px 4px 0 #000;
}
.screen.screen-title .btn.big { font-size: 28px; }
.screen.screen-title .btn.daily { flex-direction: column; gap: 4px; }
.screen.screen-title .btn.daily small { max-width: 100%; }
.screen.screen-title .btn > * { transform: skewX(7deg); }
.screen.screen-title .btn.primary {
  color: #07080f; border-color: transparent;
  background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 90%, #000));
}
.screen.screen-title .btn::after { display: block; }
.screen.screen-title .btn.focus, .screen.screen-title .btn:focus-visible {
  border-color: var(--ink); box-shadow: 4px 4px 0 #000, 0 0 22px color-mix(in srgb, var(--c) 40%, transparent);
  outline: 2px solid var(--ink); outline-offset: 3px; transform: skewX(-7deg);
}
@media (hover: hover) {
  .screen.screen-title .btn:hover:not(:disabled):not(.dim) {
    background: #1c2031; color: var(--ink); border-color: var(--ink);
    transform: skewX(-7deg) translate(-2px, -2px); box-shadow: 7px 7px 0 #000, 0 0 22px color-mix(in srgb, var(--c) 40%, transparent);
  }
  .screen.screen-title .btn.primary:hover:not(:disabled):not(.dim) {
    color: #07080f; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 85%, white), var(--c));
  }
}
.screen.screen-title .btn:active:not(:disabled):not(.dim) { transform: skewX(-7deg) translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
@media (max-width: 520px), (max-height: 500px) {
  .screen.screen-title .btn.big { font-size: 24px; }
}

/* Roster: a register beside four uninterrupted character posters. */
.screen-roster { gap: 18px; }
.screen-roster .roster-layout {
  width: min(1560px, 100%); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 3vw, 48px);
}
.roster-brief { display: flex; flex-direction: column; align-items: flex-start; padding-top: 22px; gap: 20px; text-align: left; min-width: 0; }
.roster-title { font: 700 clamp(72px, 6vw, 104px)/.82 var(--display); color: var(--menu-text); letter-spacing: -.03em; max-width: 100%; }
.roster-instruction { margin: 0; color: var(--menu-muted); font: 400 14px/1.55 var(--body); max-width: 24ch; }
.roster-register { width: 100%; margin-top: auto; border-top: 3px solid var(--menu-accent); padding-top: 12px; }
.register-line { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--menu-line); font: 600 15px var(--body); }
.register-number { color: #91a8bb; font: 500 10px var(--mono); }
.register-line.present { color: var(--c); }
.register-line small { margin-left: auto; font: 600 8px var(--mono); letter-spacing: .08em; }
.screen-roster .cards { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0; }
.screen-roster .card.char {
  width: 100%; max-width: none; min-width: 0; height: clamp(420px, 61vh, 710px); min-height: 420px;
  padding: 16px 14px; border: 1px solid var(--menu-line); border-bottom: 4px solid var(--c);
  background: var(--menu-bg); border-radius: 0; box-shadow: 0 8px 24px #02050b80; gap: 8px;
  transition: border-color 200ms, transform 200ms; animation: menuSlip 400ms var(--ease) backwards; animation-delay: calc(var(--order) * 55ms);
}
.screen-roster .card.char::before { top: 0; bottom: auto; width: 28px; height: 4px; background: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.screen-roster .card.char::after { display: block; width: 20px; height: 20px; background: linear-gradient(225deg, var(--c) 0 2px, transparent 2px 8px, var(--c) 8px 10px, transparent 10px); pointer-events: none; }
.screen-roster .card.char .portrait { position: absolute; inset: 0; background-position: 50% 18%; opacity: 1; transition: transform 400ms var(--ease); }
.screen-roster .card.char .portrait::after { background: linear-gradient(180deg, #07091000 40%, #07091024 53%, #070910ba 72%, #070910fa 90%); }
.screen-roster .card.char .charcopy { margin-top: auto; display: flex; flex-direction: column; gap: 0; }
.screen-roster .card.char h3 { margin: 0; line-height: .9; text-transform: none; color: var(--menu-text); text-shadow: 2px 3px 0 #070910, 0 0 20px color-mix(in srgb, var(--c) 24%, transparent); }
.screen-roster .char-first { display: block; font-size: clamp(36px, 3.6vw, 62px); letter-spacing: -.025em; }
.screen-roster .char-surname { display: block; font: 600 10px/1.8 var(--mono); letter-spacing: .16em; margin-top: 8px; }
.screen-roster .card.char > .num { left: 12px; top: 14px; background: #070910e8; color: var(--c); padding: 6px 8px; border-radius: 0; font: 600 10px var(--mono); }
.screen-roster .card.char .btn.detailhint { color: #bed4e4; font: 600 10px var(--mono); letter-spacing: .06em; text-shadow: 0 2px 8px #070910; }
.screen-roster .card.char > .btn { background: #070910de; color: var(--menu-text); border-color: color-mix(in srgb, var(--c) 62%, #2b4357); box-shadow: inset 2px 0 var(--c); min-height: 48px; }
.screen-roster .card.char.captain { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 28px color-mix(in srgb, var(--c) 18%, transparent); }
.screen-roster .card.char.inparty { border-color: color-mix(in srgb, var(--c) 65%, #070910); }
.screen-roster .card.char:is(.captain,.inparty) > .btn { color: #070910; background: var(--c); border-color: var(--c); }
.screen-roster .card.char.locked { filter: saturate(.3); }
.screen-roster .roster-actions { width: min(1560px, 100%); justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--menu-line); }
.screen-roster .roster-actions .btn.big { min-width: 260px; }
.screen-roster .charterrow { width: min(1560px, 100%); justify-content: space-between; }
@media (hover: hover) {
  .screen-roster .card.char:hover { transform: translateY(-5px); border-color: var(--c); box-shadow: 0 0 24px color-mix(in srgb, var(--c) 16%, transparent); }
  .screen-roster .card.char:hover .portrait { transform: scale(1.035); }
}

/* Tap-to-select roster. Owns its viewport; the header/footer never scroll
   away, and the four portraits share the available space in landscape. */
.screen.screen-roster.roster-chooser {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; justify-content: stretch;
  height: 100dvh; min-height: 0; width: 100%; overflow: hidden;
  padding: calc(12px + var(--sat)) calc(20px + var(--sar)) calc(12px + var(--sab)) calc(20px + var(--sal));
  gap: 12px; scroll-padding: 0;
}
.roster-chooser > .flexspacer, .roster-chooser::before { display: none; }
.screen.roster-chooser > .screenhead {
  position: static; width: min(1400px, 100%); min-height: 48px; margin: 0; padding: 0 0 8px;
  flex-wrap: nowrap; gap: 14px; background: transparent;
}
.screen.roster-chooser .screenhead .heading { font-size: clamp(22px, 3vw, 38px); line-height: 1; }
.roster-count { font: 700 11px var(--mono); white-space: nowrap; color: var(--menu-accent); }
.screen-roster.roster-chooser .roster-layout {
  width: min(1400px, 100%); height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center;
}
.screen-roster.roster-chooser .cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr);
  width: 100%; max-width: none; height: min(100%, 650px); min-height: 0;
  gap: 14px; padding: 8px 2px 4px; overflow: visible; scroll-snap-type: none;
}
.screen-roster.roster-chooser .card.char {
  position: relative; height: 100%; min-height: 0; width: 100%; max-width: none; min-width: 0;
  display: flex; flex-direction: column; gap: 6px; padding: 10px; margin: 0; overflow: hidden;
  border: 1px solid #415467; border-bottom: 3px solid var(--c); outline: none;
  animation: none; transform: none; transition: transform 180ms var(--ease), border-color 180ms, box-shadow 180ms;
}
.screen-roster.roster-chooser .card.char::before, .screen-roster.roster-chooser .card.char::after { display: none; }
.screen-roster.roster-chooser .card.char .portrait {
  pointer-events: none; background-position: 50% 20%; filter: saturate(.55) brightness(.64);
  transform: none; transition: filter 180ms, transform 220ms var(--ease);
}
.screen-roster.roster-chooser .card.char .portrait::after {
  background: linear-gradient(180deg, #07091060, transparent 30%, #07091010 58%, #070910d9 84%, #070910 100%);
}
.screen-roster.roster-chooser .card.char.selected {
  transform: translateY(-5px); border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 8px 25px color-mix(in srgb, var(--c) 25%, transparent);
}
.screen-roster.roster-chooser .card.char.selected .portrait { filter: saturate(1) brightness(1.08); transform: scale(1.025); }
.screen-roster.roster-chooser .card.char .btn.roster-pick {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: auto; min-height: 44px;
  margin: 0; padding: 0; border: 0; box-shadow: none; transform: none; background: transparent; border-radius: 0;
}
.screen-roster.roster-chooser .card.char .btn.roster-pick:is(.focus, :focus-visible) {
  outline: none; box-shadow: none;
}
.screen-roster.roster-chooser .card.char .btn.roster-pick:is(.focus:focus, :focus-visible) {
  outline: 2px solid var(--menu-text); outline-offset: -5px; box-shadow: inset 0 0 25px #ffffff18;
}
.screen-roster.roster-chooser .card.char.locked .btn.roster-pick { bottom: 0; }
.roster-chooser .roster-order { position: absolute; top: 12px; left: 10px; z-index: 2; pointer-events: none; color: #d4e0e9; font: 700 9px var(--mono); letter-spacing: .04em; }
.roster-chooser .selected .roster-order { color: var(--c); }
.screen-roster.roster-chooser .card.char .btn.roster-stats {
  position: absolute; top: 5px; right: 5px; z-index: 3; width: 44px; height: 44px; min-height: 44px;
  padding: 10px; margin: 0; display: grid; place-items: center;
  background: #07091070; color: #d8e9f5; border: 1px solid transparent; box-shadow: none; transform: none;
}
.roster-chooser .roster-stats svg { width: 22px; height: 22px; }
/* CREW SELECT: the name runs DOWN THE LEFT EDGE, trading-card style (Chris,
   2026-09-20). It used to sit across the bottom, where it competed with the
   kit slots for the widest part of the card and forced the portrait's focal
   point up. On its own band the name is free to be large, the portrait keeps
   the full frame, and the card gains a vertical axis.
   `--namebar` is the band's width; every element that must clear it reads
   from that one variable, so shrinking it per breakpoint moves everything. */
.screen-roster.roster-chooser .card.char { --namefont: clamp(24px, 3.2vw, 48px); --namebar: calc(var(--namefont) + 8px); padding-left: calc(var(--namebar) + 8px); }
.screen-roster.roster-chooser .card.char .charcopy {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--namebar); margin: 0;
  z-index: 2; pointer-events: none; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: 6px; padding: 14px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 42%, #070910e0), #070910e6 72%);
  /* drawn, not laid out: a real border-right steals 1px from the content box,
     so the name centres inside a box narrower than the band and leans left */
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--c) 50%, transparent);
}
.screen-roster.roster-chooser .card.char .char-first {
  writing-mode: vertical-rl; text-orientation: mixed;
  font: 700 var(--namefont)/1 var(--display); letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap; margin: 0; max-height: 100%; overflow: hidden;
  /* the inherited shadow is offset 2px to the right, which biases the ink in a
     band this narrow; drop it straight down so the glyphs sit centred */
  text-shadow: 0 3px 0 #070910, 0 0 18px color-mix(in srgb, var(--c) 30%, transparent);
  /* the BOX is centred; the INK is not. Rotated Latin glyphs hang off a
     baseline that is not the em box's centre, so they lean toward the
     band's right edge by about 0.034em. Measured, and in em because the
     lean scales with the font rather than the band. */
  transform: translateX(calc(-0.034em - 4px));
}
/* the price is the one thing that must stay readable left-to-right, so it
   steps out of the band and sits along the bottom of the card instead */
.screen-roster.roster-chooser .card.char .roster-locked-price {
  position: absolute; left: calc(var(--namebar) + 10px); right: 10px; bottom: 10px;
  writing-mode: horizontal-tb; grid-column: auto; margin: 0; z-index: 2;
}
.roster-chooser .roster-order { left: calc(var(--namebar) + 8px); }
.roster-chooser .roster-kit { position: relative; z-index: 3; align-self: flex-end; display: flex; gap: 8px; flex: 0 0 auto; margin-top: auto; }
.screen-roster.roster-chooser .card.char .btn.roster-slot {
  min-height: 52px; height: 52px; width: 52px; padding: 7px; margin: 0;
  display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--c) 65%, #415467);
  background: #0d1c2cec; color: #eefaff; box-shadow: none; transform: none;
}
.roster-chooser .slot-art { width: 36px; height: 36px; display: grid; place-items: center; position: relative; color: var(--c); }
.roster-chooser .slot-art .tech-icon, .roster-chooser .slot-art svg { width: 100%; height: 100%; min-width: 0; margin: 0; }
.roster-chooser .slot-art .tech-icon img { width: 100%; height: 100%; object-fit: contain; }
.roster-chooser .slot-plus { font: 400 32px/1 var(--body); }
.roster-chooser .summon-plus { position: absolute; bottom: -2px; right: -3px; font-size: 20px; background: #0b1420; line-height: .8; }
.roster-chooser .roster-slot:not(.empty) .summon-plus { display: none; }
.screen-roster.roster-chooser .card.char .btn.roster-slot.empty { border-style: dashed; border-color: #8094a8; background: #080f1ae8; color: #d8e6ef; }
.roster-chooser .roster-slot.empty .summon-art svg { opacity: .45; }
.deck-tabs { width: min(1220px, 100%); justify-content: flex-start; padding: 0 4px; }
.roster-chooser .roster-locked-price { grid-column: 1 / -1; font: 700 11px var(--mono); color: #eef7ff; margin: 10px 0; }
.screen-roster.roster-chooser .roster-actions {
  position: static; display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap;
  width: min(1400px, 100%); padding: 8px 0 0; margin: 0; gap: 14px; min-height: 52px;
  border-top: 1px solid var(--menu-line); background: transparent; box-shadow: none;
}
.roster-chooser .roster-summary { flex: 1; min-width: 0; display: grid; gap: 4px; text-align: left; }
.roster-chooser .roster-members { font: 600 12px var(--mono); color: var(--menu-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-roster.roster-chooser .roster-actions .btn.big { flex: 0 0 auto; min-width: 150px; min-height: 48px; margin: 0; font: 700 28px var(--display); padding: 8px 20px; }
.screen-roster.roster-chooser .roster-actions .roster-charter { order: -1; flex: 0 0 auto; min-height: 44px; font-size: 11px; margin: 0; padding: 7px 10px; }
.screen-roster.roster-chooser .roster-actions .roster-charter small { display: block; font: 700 9px var(--mono); }
.screen-roster.roster-chooser .roster-actions .roster-clubdeck { order: -2; flex: 0 0 auto; min-height: 44px; font-size: 12px; margin: 0; padding: 7px 14px; border-color: #2d6a80; color: #bff3ff; }
.screen-roster.roster-chooser .btn:is(.roster-slot, .roster-stats):is(.focus, :focus-visible) { outline: 2px solid #ecf7ff; outline-offset: -3px; }
@media (hover: hover) {
  .screen-roster.roster-chooser .card.char:not(.selected):hover { transform: translateY(-2px); border-color: var(--c); }
  .screen-roster.roster-chooser .card.char:not(.selected):hover .portrait { filter: saturate(.8) brightness(.8); }
}
@media (max-width: 700px) and (orientation: portrait) {
  .screen.screen-roster.roster-chooser { padding-left: calc(12px + var(--sal)); padding-right: calc(12px + var(--sar)); gap: 8px; }
  .screen-roster.roster-chooser .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .screen.roster-chooser > .screenhead { gap: 6px; }
  .screen.roster-chooser .screenhead .heading { font-size: 24px; }
  .roster-count { font-size: 9px; }
  .screen-roster.roster-chooser .card.char { padding: 7px 7px 7px calc(var(--namebar) + 7px); gap: 4px; }
  .screen-roster.roster-chooser .card.char { --namefont: clamp(21px, 6.8vw, 32px); }
  .screen-roster.roster-chooser .card.char .btn.roster-slot { height: 44px; width: 44px; min-height: 44px; padding: 6px; }
  .roster-chooser .slot-art { width: 30px; height: 30px; }
  .screen-roster.roster-chooser .roster-actions { gap: 6px; }
  .screen-roster.roster-chooser .roster-actions .btn.big { min-width: 96px; font-size: 24px; padding-inline: 10px; }
  .screen-roster.roster-chooser .roster-actions .roster-charter { font-size: 9px; padding-inline: 6px; }
  .screen-roster.roster-chooser .roster-actions .roster-clubdeck { font-size: 10px; padding-inline: 8px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .screen.screen-roster.roster-chooser { padding: calc(5px + var(--sat)) calc(12px + var(--sar)) calc(5px + var(--sab)) calc(12px + var(--sal)); gap: 5px; }
  .screen.roster-chooser > .screenhead { min-height: 44px; padding: 0; }
  .screen.roster-chooser .screenhead .heading { font-size: 28px; }
  .screen-roster.roster-chooser .cards { gap: 8px; padding-top: 6px; padding-bottom: 1px; }
  .screen-roster.roster-chooser .card.char { padding: 6px 6px 6px calc(var(--namebar) + 6px); gap: 3px; }
  .screen-roster.roster-chooser .card.char { --namefont: clamp(20px, 2.8vw, 30px); }
  .screen-roster.roster-chooser .card.char .btn.roster-slot { min-height: 44px; height: 44px; width: 44px; padding: 6px; }
  .roster-chooser .slot-art { width: 30px; height: 30px; }
  .roster-chooser .roster-order { font-size: 8px; top: 10px; left: calc(var(--namebar) + 6px); max-width: calc(100% - var(--namebar) - 55px); }
  .screen-roster.roster-chooser .roster-actions { min-height: 44px; padding-top: 3px; gap: 10px; }
  .screen-roster.roster-chooser .roster-actions .btn.big { min-height: 44px; min-width: 125px; font-size: 26px; padding-block: 5px; }
}
@media (max-height: 600px) and (orientation: portrait) {
  .screen-roster.roster-chooser .card.char .charcopy { row-gap: 0; }
  .screen-roster.roster-chooser .card.char { --namefont: 18px; }
}
@media (max-width: 420px) {
  .roster-chooser .roster-summary { display: none; }
  .screen-roster.roster-chooser .roster-actions { gap: 5px; }
  .screen-roster.roster-chooser .roster-actions .btn.big { flex: 1 1 0; min-width: 0; padding-inline: 6px; font-size: 20px; }
  .screen-roster.roster-chooser .roster-actions .roster-clubdeck { font-size: 9px; padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen-roster.roster-chooser .card.char, .screen-roster.roster-chooser .card.char .portrait { transition: none; }
}

/* Draft: illuminated technique modules, original art above a dark readout. */
.screen-levelup .screenhead { width: min(1100px, 100%); align-self: center; position: relative; top: auto; padding-right: 88px; background: transparent; }
.screen-levelup .screenhead .heading { flex-basis: 100%; font-size: clamp(36px, 5vw, 68px); max-width: 90%; line-height: .96; }
.level-seal { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 66px; height: 76px; border: 1px solid var(--menu-accent); color: var(--menu-accent); background: #10273280; box-shadow: inset 0 0 18px #54e6f514, 0 0 18px #54e6f50c; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.level-seal small { font: 700 9px var(--mono); letter-spacing: .15em; }
.level-seal b { font: 700 44px/.95 var(--display); }
.draft-banked { width: min(1100px, 100%); font: 600 10px var(--mono); color: var(--menu-muted); letter-spacing: .1em; margin-top: -8px; text-align: left; }
.screen-levelup .cards { width: min(1100px, 100%); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.screen-levelup .card.tech {
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  --c: var(--menu-accent); color: var(--menu-text); background: var(--menu-surface); border: 0; border-radius: 0; padding: 0; gap: 0; min-height: 0;
  box-shadow: 0 0 0 1px var(--menu-line), 0 16px 36px #02050b99; overflow: visible; animation: none;
}
.screen-levelup .card.tech:is(.focus, :focus-visible) { outline: 2px solid var(--c); outline-offset: 3px; }
.screen-levelup .card.tech::before, .screen-levelup .card.tech::after { display: none; }
.screen-levelup .tech-art { position: relative; display: flex; align-items: center; justify-content: center; height: clamp(130px, 19vh, 210px); background: radial-gradient(ellipse at 50% 100%, #54e6f510, transparent 70%), #06090e; border: 1px solid var(--menu-line); overflow: hidden; }
.screen-levelup .tech-art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #54e6f508 0 1px, transparent 1px 4px); pointer-events: none; }
.screen-levelup .card.tech .tech-icon { width: 156px; height: 156px; margin: 0; max-width: 80%; max-height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.screen-levelup .card.tech .num { position: absolute; top: 12px; left: 14px; right: auto; font: 600 12px var(--mono); color: var(--menu-accent); z-index: 1; }
.screen-levelup .tech-copy { display: flex; flex: 1; flex-direction: column; padding: 22px; gap: 12px; min-width: 0; border-top: 4px solid var(--c); background: linear-gradient(140deg, #54e6f508, transparent 65%); }
.screen-levelup .tech-type { font: 700 9px/1.4 var(--mono); letter-spacing: .12em; color: var(--c); }
.screen-levelup .card.tech h3 { margin: 0; color: var(--menu-text); font: 700 clamp(28px, 3vw, 40px)/1 var(--display); text-shadow: 0 0 20px #54e6f516; text-transform: none; }
.screen-levelup .card.tech .blurb { color: var(--menu-muted); font: 400 14px/1.5 var(--body); margin: 0; flex: 1; }
.screen-levelup .tech-rank { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.screen-levelup .card.tech .pips { margin: 0; }
.screen-levelup .card.tech .pips span { background: #2b4357; box-shadow: none; }
.screen-levelup .card.tech .pips .on { background: #acdce9; }
.screen-levelup .card.tech .pips .next { background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 45%, transparent); animation: none; }
.screen-levelup .card.tech.evo { --c: #ffd970; background: #171921; }
.screen-levelup .card.tech.evo .tech-copy { border-top-color: var(--c); background: linear-gradient(140deg, #ffd9700a, transparent 65%); }
.screen-levelup .card.tech.evo .tech-type { color: var(--c); }
.screen-levelup .rerollrow { width: min(1100px, 100%); justify-content: flex-end; }
@media (hover: hover) {
  .screen-levelup .card.tech:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px var(--c), 0 0 32px color-mix(in srgb, var(--c) 16%, transparent); }
}

/* Pause and its settings keep the held arena visible. */
#ui > .screen:is(.screen-pause, .screen-options, .screen-pauseoptions, .screen-optionguide).modal {
  background: rgba(5, 7, 14, .38); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.screen-pause::before { content: '通行証'; color: #54e6f508; }
.pause-layout { display: flex; justify-content: center; width: min(420px, 100%); position: relative; z-index: 1; }
.screen-pause .col.pause-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 12px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.screen-pause .col.pause-actions.has-hand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.screen-pause .pause-actions .btn { grid-column: 1 / -1; }
.screen-pause .pause-actions.has-hand .pause-secondary { grid-column: auto; }
.screen-pause .pause-actions .btn {
  min-height: 56px; justify-content: center; padding: 14px 18px; border: 2px solid #526c83;
  background: linear-gradient(#202e40, #111b2a); box-shadow: 4px 5px 0 #02050b, inset 0 1px 0 #e5f4ff26;
  transform: skewX(-6deg); text-shadow: 2px 2px 0 #02050b;
  font: 700 clamp(14px, 2vw, 18px)/1.2 var(--display); letter-spacing: .025em;
}
.screen-pause .pause-actions .btn > * { transform: skewX(6deg); }
.screen-pause .pause-actions .btn.primary { min-height: 72px; background: linear-gradient(160deg, #91f3ff, #33c9de); color: #070910; border-color: #a9f7ff; font-size: clamp(22px, 3vw, 30px); text-shadow: none; }
.screen-pause .pause-actions .btn.danger { color: #ffadbc; border-color: #87495d; background: linear-gradient(#362030, #20141f); }
.screen-pause .pause-actions .btn:is(:hover, .focus, :focus-visible) { transform: skewX(-6deg); border-color: var(--menu-text); box-shadow: 4px 5px 0 #02050b, inset 0 1px 0 #e5f4ff40, 0 0 18px #54e6f526; outline: 2px solid var(--menu-accent); outline-offset: 3px; }
.screen-pause .pause-actions .btn.primary:is(:hover, .focus, :focus-visible) { background: linear-gradient(160deg, #bcfaff, #54e6f5); color: #070910; }
.screen-pause .pause-actions .btn:active { transform: skewX(-6deg) translate(2px, 3px); box-shadow: 2px 2px 0 #02050b, inset 0 1px 0 #e5f4ff26; }
.screen-pause .pause-logo { position: fixed; right: max(24px, var(--sar)); bottom: calc(38px + var(--sab)); margin: 0; font-size: clamp(24px, 4.5vw, 62px); letter-spacing: .09em; pointer-events: none; opacity: .88; }
@keyframes menuSlip { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) and (min-height: 501px) {
  .screen-roster .roster-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .roster-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr); gap: 10px 24px; padding: 0; }
  .roster-brief > .folio-label { grid-column: 1; }
  .roster-title { grid-column: 1; font-size: 64px; }
  .roster-instruction { grid-column: 1; max-width: 42ch; font-size: 13px; }
  .roster-register { grid-column: 2; grid-row: 1 / 4; margin: 0; padding-top: 8px; }
  .register-line { padding: 5px 0; font-size: 13px; }
  .screen-roster .card.char { height: clamp(350px, 50vh, 560px); min-height: 350px; }
}
@media (max-width: 700px) and (min-height: 501px) {
  .screen-roster .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .screen-roster .card.char { height: 300px; min-height: 0; padding: 12px; }
  .screen-roster .char-first { font-size: 40px; }
  .screen-roster .char-surname { font-size: 9px; letter-spacing: .1em; }
  .roster-brief { display: flex; flex-direction: column; gap: 8px; }
  .roster-title { display: none; }
  .roster-brief > .folio-label { font-size: 8px; }
  .roster-instruction { max-width: none; font-size: 12px; }
  .roster-register { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; padding: 6px 0 0; border-top-width: 1px; }
  .roster-register > .folio-label { font-size: 8px; }
  .register-line { flex: 1; gap: 5px; padding-block: 6px; font-size: 10px; border: 0; }
  .register-number { font-size: 8px; }
  .register-line small { display: none; }
  .screen-roster .roster-actions .btn { flex: 1; }
  .screen-roster .roster-actions .btn.big { min-width: 0; flex-basis: 65%; }
  .screen-roster { scroll-padding-bottom: calc(112px + var(--sab)); }
  .screen-roster .roster-actions {
    position: sticky; bottom: calc(-20px - var(--sab)); z-index: 7;
    display: grid; grid-template-columns: minmax(0, 1fr) 88px;
    padding: 12px 0 calc(16px + var(--sab)); margin-bottom: calc(-20px - var(--sab));
    background: var(--menu-bg); box-shadow: 0 -8px 16px #070910c0;
  }
  .screen-roster .roster-actions .btn { padding-inline: 10px; font-size: 12px; }
  .screen-roster .roster-actions .btn.big { flex-direction: column; gap: 2px; }
  .screen-pause .pause-actions .btn { min-height: 54px; padding: 14px 18px; }
  .screen-pause .pause-actions .btn.primary { min-height: 70px; font-size: 32px; }
  .screen-pause .pause-actions .btn.danger { margin-top: 4px; }
}
@media (max-width: 600px) {
  .screen-levelup { gap: 14px; }
  .screen-levelup .screenhead { padding-right: 66px; min-height: 86px; }
  .screen-levelup .screenhead .heading { font-size: 33px; max-width: 100%; }
  .screen-levelup .screenhead .kicker { font-size: 8px; }
  .level-seal { width: 48px; height: 59px; bottom: 16px; }
  .level-seal b { font-size: 34px; }
  .level-seal small { font-size: 8px; }
  .draft-banked { font-size: 8px; }
  .screen-levelup .cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .screen-levelup .card.tech { display: grid; grid-template-columns: 82px minmax(0, 1fr); padding: 0; }
  .screen.screen-levelup .card.tech > .tech-art { grid-column: 1; grid-row: 1; height: 100%; min-height: 150px; align-items: flex-start; padding-top: 34px; }
  .screen-levelup .card.tech .tech-icon { width: 80px; height: 80px; max-width: 100%; margin: 0; }
  .screen-levelup .card.tech .num { font-size: 15px; top: 12px; left: 12px; }
  .screen-levelup .tech-copy { grid-column: 2; grid-row: 1; border-top: 0; border-left: 3px solid var(--c); padding: 14px; gap: 7px; }
  .screen-levelup .card.tech h3 { grid-column: auto; grid-row: auto; font-size: 27px; }
  .screen-levelup .tech-type { font-size: 8px; }
  .screen-levelup .card.tech .blurb { grid-column: auto; margin: 0; font-size: 12px; line-height: 1.45; }
  .screen-levelup .tech-rank { gap: 5px; margin-top: 0; }
  .screen-levelup .card.tech.evo .tech-copy { border-left-color: var(--c); }
  .screen-levelup .rerollrow { justify-content: center; }
}
@media (max-height: 500px) {
  .screen-roster .roster-layout { grid-template-columns: 130px minmax(0, 1fr); gap: 20px; }
  .roster-brief { gap: 10px; padding-top: 8px; }
  .roster-title { font-size: 55px; }
  .roster-instruction { font-size: 12px; }
  .roster-register { margin-top: 10px; }
  .register-line { padding: 5px 0; font-size: 11px; }
  .register-line small { font-size: 7px; }
  .screen-roster .cards { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 12px; padding: 4px 4px 14px; scroll-snap-type: none; }
  .screen-roster .card.char { flex: 0 0 175px; height: 380px; min-height: 380px; padding: 12px; scroll-snap-align: start; }
  .screen-roster .char-first { font-size: 38px; }
  .screen.screen-levelup { gap: 7px; padding-top: calc(8px + var(--sat)); padding-bottom: calc(8px + var(--sab)); }
  .screen-levelup > .flexspacer { display: none; }
  .screen-levelup > .hint { display: none; }
  .screen-levelup .screenhead { min-height: 52px; padding-block: 4px; }
  .screen-levelup .screenhead .heading { font-size: 36px; }
  .screen-levelup .level-seal { width: 48px; height: 54px; bottom: 10px; }
  .screen-levelup .level-seal b { font-size: 30px; }
  .screen-levelup .cards { gap: 14px; }
  .screen-levelup .tech-art { height: 60px; }
  .screen-levelup .card.tech .tech-icon { width: 60px; height: 60px; }
  .screen-levelup .tech-copy { padding: 10px 12px; gap: 5px; }
  .screen-levelup .card.tech h3 { font-size: 25px; }
  .screen-levelup .card.tech .blurb { font-size: 12px; }
  .screen-levelup .tech-rank { gap: 4px; margin-top: 2px; }
  .screen-levelup .rerollrow .btn { min-height: 44px; padding-block: 8px; }
  .screen-pause .col.pause-actions { gap: 8px; }
  .screen-pause .pause-actions .btn { min-height: 44px; padding: 10px 14px; }
  .screen-pause .pause-actions .btn.primary { min-height: 60px; font-size: 30px; }
  .screen-pause .pause-actions .btn.danger { margin-top: 0; }
}
/* Student loadout: a character calling card, compact skill deck and one focused inspector. */
.screen .chardetail {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  align-items: stretch; background: var(--menu-bg); color: var(--menu-text);
}
.screen .chardetail .cdbg {
  position: relative; inset: auto; grid-column: 1; grid-row: 1; min-width: 0; min-height: 0;
  overflow: hidden; background-color: var(--menu-bg);
}
.screen .chardetail .cdportrait {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 20%; pointer-events: none;
}
.screen .chardetail .cdshade { display: none; }
.screen .chardetail .cdfilm-label {
  position: absolute; z-index: 1; inset: auto 0 0; padding: 72px 26px calc(22px + var(--sab)) calc(26px + var(--sal));
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: auto;
  max-height: 100%; overflow-y: auto; scrollbar-width: thin; text-align: left;
  background: linear-gradient(transparent, #080b15e8 72px, #080b15fc);
}
.screen .chardetail .cdfilm-code {
  color: var(--c); border-left: 3px solid var(--c); padding-left: 8px;
  font: 600 10px/1.4 var(--body); letter-spacing: .08em;
}
.screen .chardetail .cdfilm-label .kicker { color: #c7d2df; font: 500 12px/1.3 var(--body); letter-spacing: .02em; margin: 6px 0 0; }
.screen .chardetail .cdname {
  color: #f4f5ff; margin: 0; font: 700 clamp(24px, 3vw, 46px)/1.03 var(--display);
  letter-spacing: -.025em; text-shadow: 2px 2px 0 #080b15; text-wrap: balance; overflow-wrap: anywhere;
}
.screen .chardetail .cdprofile { color: #c7d2df; font: 450 13px/1.45 var(--body); margin: 4px 0 0; text-wrap: pretty; }
.screen .chardetail .weapon { color: var(--c); font: 550 12px/1.4 var(--body); margin: 3px 0; }
.screen .chardetail .cdfieldnote { width: 100%; color: #b5bdce; font: 450 12px/1.5 var(--body); border-top: 1px solid #ffffff24; }
.screen .chardetail .cdfieldnote .btn.cdfield-toggle { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border: 0; background: none; box-shadow: none; color: #d7dce7; font: 600 11px/1.3 var(--body); letter-spacing: .02em; }
.screen .chardetail .cdfield-toggle span { font-size: 18px; }
.screen .chardetail .cdfieldnote p { margin: 0 0 10px; }
.screen .chardetail .cdfieldnote .cdrecord { font: 500 11px/1.5 var(--body); }
.screen .chardetail .cdpanel {
  grid-column: 2; grid-row: 1; width: 100%; min-width: 0; height: 100%; min-height: 0;
  color: var(--menu-text); --ink: var(--menu-text); --ink-dim: var(--menu-muted);
  background: radial-gradient(ellipse at 25% 30%, color-mix(in srgb, var(--c) 5%, transparent), transparent 65%), #0b1019;
  border-left: 1px solid color-mix(in srgb, var(--c) 35%, var(--menu-line)); box-shadow: none;
}
.screen .chardetail .btn {
  border-radius: 3px; color: var(--menu-text); border-color: #3a4a5b;
  background: linear-gradient(#202c3a, #141e2a); box-shadow: inset 0 1px #ffffff12, 0 3px 0 #03070d;
  letter-spacing: .01em; text-transform: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.screen .chardetail .btn small { color: inherit; }
.screen .chardetail .btn.primary {
  background: linear-gradient(color-mix(in srgb, var(--c) 24%, #172531), color-mix(in srgb, var(--c) 12%, #101924));
  color: #f3fbff; border-color: color-mix(in srgb, var(--c) 75%, #263844);
  box-shadow: inset 0 1px #ffffff26, 0 3px 0 #03070d;
}
.screen .chardetail .btn.dim, .screen .chardetail .btn:disabled {
  opacity: 1; cursor: default; color: #91a2b4; background: #111923; border-color: #2a3746; box-shadow: inset 0 1px #ffffff06;
}
.screen .chardetail .btn.focus:not(:disabled), .screen .chardetail .btn:focus-visible, .screen .chardetail summary:focus-visible {
  outline: 2px solid #f3faff; outline-offset: 3px; box-shadow: 0 0 0 3px #0b1019;
}
.screen .chardetail .btn:active:not(:disabled):not(.cdtab) { transform: translateY(2px); }
.screen .chardetail .cdhead {
  gap: 9px; padding: calc(22px + var(--sat)) calc(28px + var(--sar)) 0 28px;
  border: 0; border-bottom: 1px solid #293644; background: #090e16;
}
.screen .chardetail .cdfile { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-width: 0; }
.screen .chardetail .cdworktitle { color: var(--menu-text); font: 700 clamp(20px, 1.9vw, 27px)/1.2 var(--display); margin: 0; letter-spacing: -.015em; }
.screen .chardetail .cdaccount { display: flex; flex-direction: row; gap: 7px; align-items: baseline; flex-shrink: 0; }
.screen .chardetail .cdfrag { color: #efcc78; font: 650 22px/1.1 var(--body); font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.screen .chardetail .cdaccount-unit { color: #b6aa8c; font: 500 11px/1.2 var(--body); letter-spacing: 0; }
.screen .chardetail .cdtabs { display: flex; align-items: stretch; gap: 24px; margin: 0; }
.screen .chardetail .btn.cdtab {
  flex: 0 1 auto; color: #a4b2c1; background: none; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; min-width: 0; min-height: 44px; padding: 8px 0 10px; box-shadow: none; transform: none;
  font: 700 clamp(11px, 1.05vw, 14px)/1.25 var(--display); letter-spacing: -.015em; white-space: nowrap;
}
.screen .chardetail .btn.cdtab.on { color: var(--c); background: none; border-bottom-color: var(--c); box-shadow: none; }
.screen .chardetail .cdbody {
  gap: 20px; padding: 22px calc(28px + var(--sar)) 24px 28px; border: 0; color: var(--menu-text);
  scrollbar-color: #49657b #0b1019; background: none;
}
.screen .chardetail .cdtip, .screen .chardetail .cdcategory-note { color: #a9b7c7; font: 450 12px/1.45 var(--body); letter-spacing: 0; margin: 0; }
.screen .chardetail .cdstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 0 16px; border-bottom: 1px solid #ffffff12; }
.screen .chardetail .cdstat { display: flex; flex-direction: row; align-items: baseline; gap: 10px; min-width: 0; }
.screen .chardetail .cdstat > span { color: #a4b3c4; font: 500 12px/1.2 var(--body); letter-spacing: 0; }
.screen .chardetail .cdstat > strong { color: #e7f0f8; font: 650 24px/1.1 var(--body); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.screen .chardetail .cdstat-note { margin-top: -13px; font-size: 11px; }
.screen .chardetail .cdworkspace { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 28px; min-width: 0; }
.screen .chardetail .cddeck { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.screen .chardetail .cdsection-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; min-height: 20px; }
.screen .chardetail .cdsec, .screen .chardetail .heading.cdsec {
  color: #dbe7f1; font: 700 15px/1.3 var(--display); letter-spacing: -.015em; margin: 0; padding: 0; transform: none; text-shadow: none;
}
.screen .chardetail .cdsec::before, .screen .chardetail .cdsec::after { display: none; }
.screen .chardetail .cdsection-head > .cdtip { font-size: 11px; font-variant-numeric: tabular-nums; }
.screen .chardetail .cdskillgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; min-width: 0; }
.screen .chardetail .btn.cdskill {
  position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center;
  align-items: center; gap: 5px; width: 100%; min-width: 0; min-height: 0; aspect-ratio: 1;
  padding: 12px 9px 11px; margin: 0; overflow: hidden; text-align: center; white-space: normal;
  border: 1px solid #344151; border-bottom: 3px solid #070b12; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 20%, #3446585c, transparent 75%), linear-gradient(135deg, #202a37, #111923 70%);
  box-shadow: inset 0 1px #ffffff16, 0 3px 0 #05080e;
}
.screen .chardetail .btn.cdskill.selected {
  border-color: var(--c); border-bottom-color: color-mix(in srgb, var(--c) 55%, #070b12);
  background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--c) 18%, transparent), transparent 80%), linear-gradient(135deg, #263343, #15202c 70%);
  box-shadow: inset 0 1px #ffffff2b, inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent), 0 3px 0 #05080e;
}
.screen .chardetail .cdtile-art { display: grid; place-items: center; align-self: stretch; width: 100%; min-height: 0; min-width: 0; }
.screen .chardetail .cdtile-art .tech-icon {
  width: min(100%, 112px); height: 100%; max-height: 112px; min-height: 0; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; filter: none;
}
.screen .chardetail .cdtile-art .tech-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; filter: contrast(1.2); mix-blend-mode: screen; }
.screen .chardetail .cdtile-name { color: #e6eff7; font: 700 clamp(11px, 1.05vw, 14px)/1.3 var(--display); letter-spacing: -.025em; text-wrap: balance; overflow-wrap: anywhere; }
.screen .chardetail .cdtile-index { position: absolute; left: 9px; top: 8px; color: #8191a3; font: 550 10px/1 var(--body); letter-spacing: .02em; }
.screen .chardetail .selected .cdtile-index { color: var(--c); }
.screen .chardetail .cdstars { display: flex; justify-content: center; align-items: center; gap: 4px; min-height: 17px; }
.screen .chardetail .cdstars span { color: #5f6d7e; font: 700 15px/1 var(--body); }
.screen .chardetail .cdstars span.on { color: #f0cc72; text-shadow: 0 1px #765523; }
.screen .chardetail .cdtile-state { color: #9bafc1; font: 550 11px/1.4 var(--body); }
.screen .chardetail .owned .cdtile-state, .screen .chardetail .equipped .cdtile-state { color: var(--c); }
.screen .chardetail .equipped .cdtile-state::before { content: '✓ '; }
.screen .chardetail .cdsigil { display: grid; place-items: center; width: min(88%, 104px); height: 100%; max-height: 112px; color: var(--c); }
.screen .chardetail .cdsigil svg { width: 100%; height: 100%; overflow: visible; }
.screen .chardetail .cdbody[data-section="shikigami"] .cdskillgrid { grid-template-columns: minmax(0, 1fr); max-width: 215px; }
.screen .chardetail .cdstep-root {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 7px;
  border-left: 2px solid var(--c); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 9%, transparent), transparent);
}
.screen .chardetail .cdstep-root::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 21px; background: color-mix(in srgb, var(--c) 45%, #283644); }
.screen .chardetail .cdbody[data-section="step"] .cdskillgrid { position: relative; }
.screen .chardetail .cdbody[data-section="step"] .cdskillgrid::before {
  content: ''; position: absolute; left: 25%; right: 25%; top: -10px; height: 10px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, #283644); border-bottom: 0; pointer-events: none;
}
.screen .chardetail .cdstep-root .tech-icon { flex: 0 0 38px; width: 38px; height: 38px; margin: 0; filter: none; }
.screen .chardetail .cdstep-root > div:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.screen .chardetail .cdstep-root .tech-icon img { filter: contrast(1.2); mix-blend-mode: screen; }
.screen .chardetail .cdstep-root b { font: 700 13px/1.3 var(--display); letter-spacing: -.02em; }
.screen .chardetail .cdstep-root span { color: #a5b5c5; font: 450 11px/1.3 var(--body); }
.screen .chardetail .cdinspect { min-width: 0; padding: 3px 0 0 24px; border-left: 1px solid #344354; display: flex; flex-direction: column; gap: 13px; }
.screen .chardetail .cdinspect-kicker { color: var(--c); font: 550 11px/1.3 var(--body); letter-spacing: .025em; }
.screen .chardetail .cdinspect-name { margin: -3px 0 0; color: #f0f6ff; font: 700 clamp(19px, 1.8vw, 25px)/1.15 var(--display); letter-spacing: -.025em; text-wrap: balance; overflow-wrap: anywhere; }
.screen .chardetail .cdinspect-desc { color: #b6c3d1; font: 450 13px/1.5 var(--body); margin: 0; max-width: 40ch; text-wrap: pretty; }
.screen .chardetail .cdinspect-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; padding-block: 12px; border-block: 1px solid #ffffff12; }
.screen .chardetail .cdinspect-facts > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.screen .chardetail .cdinspect-facts span { color: #9eadbe; font: 500 11px/1.3 var(--body); }
.screen .chardetail .cdinspect-facts strong { color: #e4edf6; font: 650 18px/1.2 var(--body); font-variant-numeric: tabular-nums; }
.screen .chardetail .cdcomparison { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); align-items: center; gap: 10px; padding-block: 12px; border-block: 1px solid #ffffff12; }
.screen .chardetail .cdcomparison > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.screen .chardetail .cdcomparison div > span { color: #99aabb; font: 500 11px/1.25 var(--body); }
.screen .chardetail .cdcomparison strong { color: #d8e5f2; font: 650 18px/1.2 var(--body); font-variant-numeric: tabular-nums; }
.screen .chardetail .cdcomparison > div:last-child strong { color: var(--c); }
.screen .chardetail .cdarrow { color: #8295a8; font: 500 18px/1 var(--body); }
.screen .chardetail .cdranktrack { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.screen .chardetail .cdranktrack li { position: relative; display: grid; grid-template-columns: 16px 55px minmax(0, 1fr); align-items: baseline; gap: 7px; min-height: 31px; padding: 7px 0; color: #93a3b6; }
.screen .chardetail .cdranktrack li + li { border-top: 1px solid #ffffff08; }
.screen .chardetail .cdranktrack li > span { font: 600 13px/1.2 var(--body); color: #5f7082; }
.screen .chardetail .cdranktrack strong { font: 550 11px/1.25 var(--body); }
.screen .chardetail .cdranktrack small { color: #aebccc; font: 450 12px/1.35 var(--body); }
.screen .chardetail .cdranktrack li.completed > span { color: #f0cc72; }
.screen .chardetail .cdranktrack li.next { color: #e9f5ff; }
.screen .chardetail .cdranktrack li.next small, .screen .chardetail .cdranktrack li.next > span { color: var(--c); }
.screen .chardetail .cdinspect-action { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 2px; }
.screen .chardetail .cdinspect-action > .btn { width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; margin: 0; font: 700 13px/1.3 var(--display); white-space: normal; }
.screen .chardetail .cdinspect-action > .btn small { margin: 0; font: 600 14px/1.3 var(--body); }
.screen .chardetail .cdshortfall, .screen .chardetail .cdownershipnote { margin: 0; color: #a9b7c7; font: 450 11px/1.4 var(--body); }
.screen .chardetail .cdmastery { border-top: 1px solid #ffffff18; }
.screen .chardetail .btn.cdmastery-toggle { display: flex; width: 100%; min-height: 44px; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border: 0; background: none; box-shadow: none; text-align: left; font: 700 12px/1.3 var(--display); }
.screen .chardetail .cdmastery-toggle span { color: #a6b6c7; font: 500 11px/1.3 var(--body); }
.screen .chardetail .mastery[hidden] { display: none; }
.screen .chardetail .mastery { gap: 0; }
.screen .chardetail .mrank { opacity: 1; padding: 11px 0; gap: 12px; border-left: 0; border-bottom: 1px solid #ffffff12; }
.screen .chardetail .mrank .mn { flex: 0 0 24px; min-height: 24px; display: grid; place-items: center; color: #9bacbd; font: 600 12px/1 var(--body); }
.screen .chardetail .mrank.got .mn { color: var(--c); }
.screen .chardetail .mrank .mt { min-width: 0; gap: 4px; }
.screen .chardetail .mrank .mt b { color: var(--menu-text); font: 600 12px/1.3 var(--body); }
.screen .chardetail .mrank .mt span { display: block; color: #a6b6c7; font: 450 12px/1.4 var(--body); }
.screen .chardetail .mastery > .cdtip { padding-top: 12px; }
.screen .chardetail .cdfoot { gap: 10px; padding: 13px calc(28px + var(--sar)) calc(15px + var(--sab)) 28px; border-top: 1px solid #293644; background: #090e16; }
.screen .chardetail .cdfoot .btn { min-width: 0; min-height: 46px; padding: 11px 18px; font: 700 12px/1.3 var(--display); }
@media (hover: hover) {
  .screen .chardetail .btn:hover:not(:disabled):not(.dim) { color: #f4faff; border-color: var(--c); background: color-mix(in srgb, var(--c) 13%, #17222e); }
  .screen .chardetail .btn.cdtab:hover { background: none; box-shadow: none; }
  .screen .chardetail .btn.cdskill:hover { transform: translateY(-2px); background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--c) 15%, transparent), transparent 80%), #1a2735; box-shadow: inset 0 1px #ffffff26, 0 5px 0 #05080e; }
}
@media (max-width: 1100px) {
  .screen .chardetail .cdfilm-label { padding: 55px 17px calc(15px + var(--sab)) calc(17px + var(--sal)); gap: 6px; }
  .screen .chardetail .cdprofile { font-size: 12px; }
  .screen .chardetail .cdhead { padding: calc(15px + var(--sat)) calc(18px + var(--sar)) 0 18px; gap: 6px; }
  .screen .chardetail .cdbody { padding: 17px calc(18px + var(--sar)) 20px 18px; gap: 16px; }
  .screen .chardetail .cdtabs { gap: 19px; }
  .screen .chardetail .cdworkspace { gap: 18px; }
  .screen .chardetail .cdinspect { padding-left: 17px; gap: 11px; }
  .screen .chardetail .cdskillgrid { gap: 10px; }
  .screen .chardetail .cddeck { gap: 12px; }
  .screen .chardetail .btn.cdskill { padding: 10px 7px 9px; gap: 4px; }
  .screen .chardetail .cdtile-name { font-size: 11px; }
  .screen .chardetail .cdstats { gap: 12px; padding-bottom: 12px; }
  .screen .chardetail .cdstat { gap: 7px; }
  .screen .chardetail .cdstat > span { font-size: 11px; }
  .screen .chardetail .cdstat > strong { font-size: 21px; }
  .screen .chardetail .cdcomparison { gap: 6px; }
  .screen .chardetail .cdcomparison strong { font-size: 16px; }
  .screen .chardetail .cdfoot { padding: 11px calc(18px + var(--sar)) calc(13px + var(--sab)) 18px; }
}
@media (max-width: 900px) and (orientation: portrait) {
  .screen .chardetail { grid-template-columns: minmax(0, 1fr); grid-template-rows: clamp(138px, 23dvh, 205px) minmax(0, 1fr); }
  .screen .chardetail .cdbg { grid-column: 1; grid-row: 1; width: 100%; }
  .screen .chardetail .cdportrait { left: auto; width: 66%; object-position: 50% 24%; mask-image: linear-gradient(90deg, transparent, #000 24%); }
  .screen .chardetail .cdpanel { grid-column: 1; grid-row: 2; border-left: 0; border-top: 1px solid #334252; }
  .screen .chardetail .cdfilm-label { inset: 0; justify-content: flex-end; padding: calc(10px + var(--sat)) calc(16px + var(--sar)) 8px calc(16px + var(--sal)); gap: 3px; background: linear-gradient(90deg, #080b15ef, #080b1580 56%, transparent); }
  .screen .chardetail .cdname { max-width: 62%; font-size: clamp(23px, 4.6vw, 34px); }
  .screen .chardetail .cdfilm-code { font-size: 9px; }
  .screen .chardetail .cdfilm-label .kicker { margin: 0; font-size: 10px; }
  .screen .chardetail .cdprofile { max-width: min(52%, 40ch); font-size: 11px; line-height: 1.35; margin: 0; }
  .screen .chardetail .weapon { max-width: 65%; font-size: 10px; margin: 0; }
  .screen .chardetail .cdfieldnote { max-width: 270px; }
  .screen .chardetail .cdfieldnote .btn.cdfield-toggle { min-height: 44px; padding-block: 5px; }
  .screen .chardetail .cdhead { padding: 12px calc(16px + var(--sar)) 0 calc(16px + var(--sal)); gap: 4px; }
  .screen .chardetail .cdbody { padding: 16px calc(16px + var(--sar)) 20px calc(16px + var(--sal)); }
  .screen .chardetail .cdfoot { padding: 10px calc(16px + var(--sar)) calc(12px + var(--sab)) calc(16px + var(--sal)); }
}
@media (max-width: 600px) and (orientation: portrait) {
  .screen .chardetail { grid-template-rows: clamp(128px, 21dvh, 176px) minmax(0, 1fr); }
  .screen .chardetail .cdfilm-label { justify-content: flex-start; }
  .screen .chardetail .cdname { max-width: 70%; font-size: clamp(21px, 6vw, 28px); }
  .screen .chardetail .cdprofile { display: none; }
  .screen .chardetail .cdfieldnote { max-width: 60%; border-top: 0; }
  .screen .chardetail .cdfieldnote .btn.cdfield-toggle { min-height: 44px; }
  .screen .chardetail .cdfieldnote p { font-size: 11px; }
  .screen .chardetail .cdworktitle { font-size: 20px; }
  .screen .chardetail .cdfrag { font-size: 20px; }
  .screen .chardetail .cdtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .screen .chardetail .btn.cdtab { font-size: clamp(8px, 2.5vw, 11px); padding-block: 9px; letter-spacing: -.04em; }
  .screen .chardetail .cdworkspace { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .screen .chardetail .cddeck { gap: 12px; }
  .screen .chardetail .cdskillgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .screen .chardetail .btn.cdskill { padding: 11px 8px 10px; gap: 5px; }
  .screen .chardetail .cdtile-name { font-size: clamp(11px, 3vw, 13px); }
  .screen .chardetail .cdtile-art .tech-icon { max-height: 118px; }
  .screen .chardetail .cdinspect { padding: 19px 0 0; border-left: 0; border-top: 1px solid #344354; gap: 12px; }
  .screen .chardetail .cdinspect-name { font-size: 22px; }
  .screen .chardetail .cdinspect-desc { font-size: 13px; max-width: none; }
  .screen .chardetail .cdstats { gap: 8px; }
  .screen .chardetail .cdstat { flex-direction: column; gap: 4px; }
  .screen .chardetail .cdstat > strong { font-size: 22px; }
  .screen .chardetail .cdstat > span { font-size: 11px; }
  .screen .chardetail .cdsec, .screen .chardetail .heading.cdsec { font-size: 14px; }
  .screen .chardetail .cdcomparison strong { font-size: 19px; }
  .screen .chardetail .cdranktrack li { grid-template-columns: 18px 64px minmax(0, 1fr); min-height: 34px; }
  .screen .chardetail .cdfoot .btn { min-height: 44px; padding: 10px 13px; font-size: 11px; }
}
@media (max-height: 460px) and (orientation: landscape) {
  .screen .chardetail .cdfilm-label { padding: 36px 14px calc(9px + var(--sab)) calc(14px + var(--sal)); gap: 3px; }
  .screen .chardetail .cdname { font-size: clamp(18px, 2.4vw, 26px); }
  .screen .chardetail .cdprofile { font-size: 10px; line-height: 1.35; }
  .screen .chardetail .weapon { font-size: 10px; }
  .screen .chardetail .cdfilm-label .kicker, .screen .chardetail .cdfilm-code { font-size: 9px; }
  .screen .chardetail .cdhead { padding-top: calc(9px + var(--sat)); gap: 0; }
  .screen .chardetail .cdworktitle { font-size: 18px; }
  .screen .chardetail .cdfrag { font-size: 18px; }
  .screen .chardetail .cdtabs { gap: 18px; }
  .screen .chardetail .btn.cdtab { min-height: 44px; font-size: 11px; padding-block: 10px; }
  .screen .chardetail .cdbody { padding-top: 12px; padding-bottom: 16px; gap: 10px; }
  .screen .chardetail .cdworkspace { gap: 16px; }
  .screen .chardetail .cdinspect { padding-left: 15px; gap: 6px; }
  .screen .chardetail .cdcomparison { padding-block: 6px; }
  .screen .chardetail .cdinspect-action > .btn { min-height: 44px; padding-block: 10px; }
  .screen .chardetail .cdinspect-name { font-size: 18px; }
  .screen .chardetail .cdinspect-desc { font-size: 12px; }
  .screen .chardetail .cdstats { padding-bottom: 8px; gap: 9px; }
  .screen .chardetail .cdstat { gap: 6px; }
  .screen .chardetail .cdstat > span { font-size: 10px; }
  .screen .chardetail .cdstat > strong { font-size: 19px; }
  .screen .chardetail .cdskillgrid { gap: 9px; }
  .screen .chardetail .btn.cdskill { padding: 9px 5px 8px; gap: 3px; }
  .screen .chardetail .cdtile-name { font-size: 10px; }
  .screen .chardetail .cdtile-index { font-size: 9px; left: 6px; top: 6px; }
  .screen .chardetail .cdstars { gap: 2px; }
  .screen .chardetail .cdstars span { font-size: 13px; }
  .screen .chardetail .cdfoot { padding-top: 8px; padding-bottom: calc(10px + var(--sab)); }
  .screen .chardetail .cdfoot .btn { min-height: 44px; padding-block: 10px; font-size: 11px; }
}
@media (max-width: 740px) and (orientation: landscape) {
  .screen .chardetail .cdworkspace { grid-template-columns: minmax(0, 1fr); }
  .screen .chardetail .cdskillgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen .chardetail .cdinspect { padding: 16px 0 0; border-left: 0; border-top: 1px solid #344354; }
  .screen .chardetail .cdtabs { gap: 12px; }
  .screen .chardetail .btn.cdtab { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen .chardetail .btn { transition: none; }
  .screen .chardetail .btn.cdskill:hover, .screen .chardetail .btn:active:not(:disabled):not(.cdtab) { transform: none; }
}
/* Skill details appear only after choosing a card. */
.screen .chardetail .cdworkspace { display: block; }
.screen .chardetail .cddeck { width: 100%; max-width: 840px; margin-inline: auto; }
.screen .chardetail .cdskillgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.screen .chardetail .cdskillmodal {
  position: fixed; inset: 0; width: min(440px, calc(100vw - 32px - var(--sal) - var(--sar)));
  max-width: none; max-height: calc(100dvh - 32px - var(--sat) - var(--sab));
  margin: auto; padding: 0; border: 1px solid color-mix(in srgb, var(--c) 65%, #344354);
  border-top: 3px solid var(--c); border-radius: 5px; background: #101923;
  color: var(--menu-text); box-shadow: 0 22px 80px #0009; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; pointer-events: auto;
}
.screen .chardetail .cdskillmodal:not([open]) { display: none; }
.screen .chardetail .cdskillmodal::backdrop { background: #030710a8; }
.screen .chardetail .cdskillmodal .cdinspect { border: 0; padding: 24px; gap: 14px; }
.screen .chardetail .cdskillmodal .cdinspect-name { font-size: 23px; }
.screen .chardetail .cdskillmodal .cdmodal-close { min-height: 44px; width: 100%; margin: 0; font: 700 12px/1.3 var(--display); }
@media (max-width: 1100px) {
  .screen .chardetail .cdskillgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen .chardetail .cddeck { max-width: 440px; }
}
@media (max-height: 460px) and (orientation: landscape) {
  .screen .chardetail .cdskillmodal .cdinspect { padding: 16px 20px; gap: 9px; }
}
/* Options: category tabs, one centred title, and the controls themselves. */
.screen:is(.screen-options, .screen-pauseoptions, .screen-optionguide) { overflow-y: auto; overscroll-behavior-y: contain; }
.screen:is(.screen-options, .screen-pauseoptions, .screen-optionguide) > .flexspacer { display: none; }
.screen .pager.controlbook {
  --ink: var(--menu-text); --ink-dim: var(--menu-muted); --c: var(--menu-accent);
  width: min(820px, 100%); padding: 0; margin: 0 auto; border: 0; border-radius: 0;
  color: var(--menu-text); background: transparent; box-shadow: none; overflow: visible; text-shadow: 0 1px 5px #000;
}
/* Auto margins center desktop controls below the masthead and collapse when
   a category needs scrolling, keeping its first control reachable. */
body:not(.touch) .screen:is(.screen-options, .screen-pauseoptions, .screen-optionguide) > .controlbook { margin-block: auto; }
.screen .controlbook.guidebook { width: min(820px, 100%); padding: 12px 0; text-shadow: 0 1px 5px #000; }
.controlbook .booktabs {
  position: relative; display: flex; gap: 14px; width: 100%; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  scrollbar-color: var(--menu-line) transparent; padding: 0 0 4px; background: transparent;
}
.controlbook .booktab {
  flex: 1 0 auto; min-width: 44px; min-height: 44px; padding: 10px 2px; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: #c5d3df; background: transparent; font: 700 12px/1.3 var(--mono); letter-spacing: .04em;
}
.controlbook .booktab.on { color: var(--menu-accent); border-bottom-color: var(--menu-accent); }
.controlbook .booktab:hover { color: white; }
.controlbook .booktab:focus-visible, .controlbook .booktab.focus { outline: 2px solid var(--menu-accent); outline-offset: -2px; }
.screen .controlbook .pagerhead {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center;
  gap: 12px; padding: 20px 0; margin: 0 0 14px; border: 0; background: transparent;
}
.controlbook .bookchapter { min-width: 0; }
.screen .controlbook .pagertitle {
  margin: 0; color: var(--menu-text); text-align: center; font: 700 clamp(18px, 2.6vw, 30px)/1.2 var(--display);
  letter-spacing: 0; text-shadow: 0 2px 14px #000; overflow-wrap: normal;
}
.screen .controlbook .pagearrow {
  width: 44px; min-height: 44px; border: 0; border-radius: 0;
  color: var(--menu-accent); background: transparent; box-shadow: none; font: 400 36px/1 var(--body);
}
.screen .controlbook .pagearrow:is(:hover, :focus-visible, .focus) { color: white; background: #54e6f51a; outline: 2px solid var(--menu-accent); outline-offset: -2px; }
.screen .controlbook .pagerpanel {
  width: min(620px, 100%); margin: 0 auto 16px; min-height: 0; gap: 12px;
  padding: 0; border: 0; color: var(--menu-text);
}
.screen .controlbook :is(.buildline, .hint, .guidenote) { color: #c5d3df; text-shadow: 0 1px 5px #000; text-align: left; }
.screen .controlbook .buildline { font: 400 13px/1.5 var(--body); letter-spacing: 0; margin: -4px 0 8px; }
.screen .controlbook .hint { font-size: 11px; }
.screen .controlbook .btn {
  border: 2px solid #446078; border-radius: 2px; clip-path: none;
  min-height: 48px; padding: 10px 12px; color: var(--menu-text); background: linear-gradient(#1d2b3d, #111b29);
  box-shadow: 3px 4px 0 #03060c, inset 0 1px 0 #e5f4ff21;
  text-shadow: 0 1px 5px #000; transform: none; font: 700 15px/1.35 var(--display); letter-spacing: .015em;
}
.screen .controlbook .btn::before, .screen .controlbook .btn::after { display: none; }
.screen .controlbook .btn.toggle { font: 700 13px/1.35 var(--mono); letter-spacing: .035em; }
.screen .controlbook .btn em {
  position: relative; flex: 0 0 74px; min-width: 74px; height: 30px; padding: 8px 32px 8px 7px;
  border: 1px solid #7ff5b280; border-radius: 2px; color: var(--green); background: #050b12;
  font: 700 11px/1 var(--mono); text-align: center; text-shadow: none; box-shadow: inset 0 2px 5px #000b;
}
.screen .controlbook .btn em::before {
  content: ''; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 24px;
  transform: translateX(42px); background: currentColor; border-top: 2px solid #ffffff70;
  box-shadow: 0 2px 2px #0009; pointer-events: none;
}
.screen .controlbook .btn.off { opacity: 1; }
.screen .controlbook .btn.off em { color: #ff8a94; border-color: #ff8a9466; padding: 8px 7px 8px 32px; }
.screen .controlbook .btn.off em::before { transform: none; }
.screen .controlbook .btn.primary { color: #070910; background: linear-gradient(160deg, #91f3ff, #33c9de); border-color: #a9f7ff; text-shadow: none; }
.screen .controlbook .btn:is(:hover, .focus, :focus-visible):not(:disabled):not(.dim) { color: white; background: linear-gradient(#29445a, #172a3d); border-color: var(--menu-accent); outline: 2px solid var(--menu-accent); outline-offset: 2px; }
.screen .controlbook .btn.primary:is(:hover, .focus, :focus-visible):not(:disabled):not(.dim) { color: #070910; background: linear-gradient(160deg, #bcfaff, #54e6f5); }
.screen .controlbook .btn:active:not(:disabled):not(.dim) { transform: translate(1px, 2px); box-shadow: 2px 2px 0 #03060c, inset 0 1px 0 #e5f4ff21; }
.screen .controlbook .btn:disabled { color: var(--menu-muted); background: #101622; opacity: .6; box-shadow: none; }
.screen .controlbook .btn small { color: inherit; }
.screen .controlbook .guidetabs { gap: 8px; }
.screen .controlbook .guidetabs .btn { font: 700 10px/1.35 var(--mono); min-height: 44px; padding: 8px 2px; opacity: 1; }
.screen .controlbook .guidetabs .btn.on { color: var(--menu-accent); border-color: var(--menu-accent); }
.screen .controlbook .guiderows { display: flex; gap: 0; }
.screen .controlbook .guiderow { padding: 9px 0; border: 0; font-size: 13px; }
.screen .controlbook .guiderow kbd { border: 0; border-radius: 0; color: var(--menu-text); background: transparent; text-align: left; padding-left: 0; font-weight: 700; }
.screen .controlbook .guiderow span { color: #c5d3df; }
.screen .controlbook .slider { border: 2px solid #446078; border-radius: 2px; padding: 4px 12px; background: linear-gradient(#1d2b3d, #111b29); color: var(--menu-text); font-size: 12px; box-shadow: 3px 4px 0 #03060c, inset 0 1px 0 #e5f4ff21; }
.screen .controlbook .slider input[type=range] { max-width: none; }
.screen .controlbook :is(.looplab, .loopval, .loopread) { color: var(--menu-text); text-shadow: none; }
.screen .controlbook :is(.loopval, .loopread) { color: var(--menu-accent); background: transparent; box-shadow: none; }
.screen .controlbook .loopbtn { background: linear-gradient(#1d2b3d, #111b29); color: var(--menu-accent); border: 2px solid #446078; border-radius: 2px; box-shadow: 3px 4px 0 #03060c, inset 0 1px 0 #e5f4ff21; }
.screen .controlbook .loopbtn:active { box-shadow: 1px 2px 0 #03060c; }
.screen .controlbook .loopread { white-space: normal; overflow-wrap: anywhere; }
.screen .controlbook .loopslide input[type=range] { margin-inline: 0; }
@media (max-width: 520px) {
  .controlbook .booktabs { gap: 12px; }
  .controlbook .booktab { font-size: 11px; }
  .screen .controlbook .pagerhead { padding: 12px 0; gap: 6px; }
  .screen .controlbook .pagertitle { font-size: clamp(15px, 4.3vw, 21px); }
  .screen .controlbook .btn { padding: 10px 8px; font-size: 13px; }
  .screen .controlbook .btn.toggle { font-size: 12px; }
  .screen .controlbook .guidetabs .btn { font-size: 9px; }
  .screen .controlbook .guiderow { font-size: 12px; gap: 8px; }
}
@media (max-height: 500px) {
  .screen .controlbook .pagerhead { padding-block: 8px; margin-bottom: 4px; }
  .screen .controlbook .guiderows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
}
@media (max-width: 520px) and (max-height: 500px) {
  .screen .controlbook .guiderows { display: flex; }
}
/* Results: character art beside the club's illuminated incident console. */
.screen.screen-results {
  --result-signal: var(--menu-hot);
  --result-character: color-mix(in srgb, var(--c) 76%, white);
  display: flex; align-items: center; justify-content: safe center;
  padding: calc(24px + var(--sat)) calc(24px + var(--sar)) calc(24px + var(--sab)) calc(24px + var(--sal));
  overflow-x: hidden; overflow-y: auto; gap: 0;
  background-color: var(--menu-bg); background-size: cover; background-position: center;
}
.screen-results.result-win { --result-signal: #80efc0; }
.screen-results > .flexspacer { display: none; }
.screen-results .result-report {
  position: relative; display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.2fr);
  width: min(1100px, 100%); max-width: 1100px; min-width: 0; flex-shrink: 0;
  margin: auto; background: var(--menu-surface); border: 1px solid var(--menu-line);
  box-shadow: 12px 12px 0 #03060c70, 0 0 36px color-mix(in srgb, var(--c) 12%, transparent);
}
.screen-results .result-visual { position: relative; min-width: 0; overflow: hidden; background: var(--menu-bg); }
.screen-results .result-visual::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #07091000 30%, #07091033 58%, #070910f5 100%);
}
.screen-results .result-visual picture { display: block; position: absolute; inset: 0; }
.screen-results .result-portrait { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.screen-results.result-death .result-portrait { filter: saturate(.9); }
.screen-results .result-stamp {
  position: absolute; z-index: 1; top: 26px; left: 22px; max-width: calc(100% - 44px);
  padding: 5px 12px; border: 3px solid currentColor; color: var(--result-signal);
  font: 400 clamp(22px, 2.5vw, 32px)/1 var(--display); letter-spacing: .05em;
  transform: rotate(-7deg); background: #070910c9; text-align: center;
  text-shadow: 0 0 14px color-mix(in srgb, var(--result-signal) 35%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--result-signal) 12%, transparent);
}
.screen-results.result-death .result-stamp { color: #ff8398; }
.screen-results .result-identity {
  position: absolute; z-index: 1; left: 26px; right: 24px; bottom: 28px;
  display: flex; flex-direction: column; gap: 8px; color: var(--menu-text);
}
.screen-results .result-role, .screen-results .result-technique {
  font: 500 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: none;
}
.screen-results .result-role { color: #cfdfeb; }
.screen-results .result-name { font: 400 clamp(32px, 4.4vw, 62px)/.95 var(--display); text-transform: none; text-shadow: 0 0 22px color-mix(in srgb, var(--c) 35%, transparent); }
.screen-results .result-technique { color: var(--result-character); border-top: 1px solid color-mix(in srgb, var(--c) 65%, var(--menu-line)); padding-top: 10px; }
.screen-results .result-paper {
  position: relative; min-width: 0; padding: clamp(22px, 3.2vw, 40px);
  color: var(--menu-text); background: var(--menu-surface);
  background-image: repeating-linear-gradient(0deg, #a6e7ff04 0, #a6e7ff04 1px, transparent 1px, transparent 4px),
    linear-gradient(135deg, #54e6f509, transparent 48%);
  box-shadow: inset 1px 0 0 var(--menu-line);
}
.screen-results .result-head { margin-bottom: 20px; border-top: 4px solid var(--result-signal); padding-top: 12px; }
.screen-results .result-heading {
  margin: 16px 0 10px; padding: 0; color: var(--menu-text); font: 400 clamp(45px, 5.8vw, 76px)/.9 var(--display);
  letter-spacing: -.015em; text-transform: none; text-wrap: balance; text-shadow: 0 0 28px color-mix(in srgb, var(--result-signal) 14%, transparent); transform: none;
}
.screen-results .result-hour { margin-top: 16px; color: var(--result-signal); font: 600 10px/1.5 var(--mono); letter-spacing: .1em; }
.screen-results .result-duration { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 15px; }
.screen-results .result-duration strong { color: var(--menu-hot); font: 400 clamp(40px, 5.6vw, 70px)/1 var(--display); font-variant-numeric: tabular-nums; text-shadow: 0 0 24px #ff526f28; }
.screen-results .result-duration span { color: var(--menu-muted); font: 600 10px/1.5 var(--mono); letter-spacing: .1em; }
.screen-results .result-best { display: inline-block; padding: 4px 7px; margin: 10px 0 0; border: 1px solid #54e6f58c; color: var(--menu-accent); background: #54e6f509; font: 600 10px/1.3 var(--mono); letter-spacing: .1em; text-shadow: none; animation: none; }
.screen-results .endstats.result-ledger { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: none; gap: 0 20px; margin: 16px 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.screen-results .result-ledger .stat { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 10px; min-width: 0; padding: 10px 0; text-align: left; border-bottom: 1px solid var(--menu-line); background: transparent; border-radius: 0; }
.screen-results .result-ledger .k { color: var(--menu-muted); font: 600 9px/1.4 var(--mono); letter-spacing: .1em; }
.screen-results .result-ledger .v { color: var(--menu-text); font: 700 20px/1.2 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; overflow-wrap: anywhere; }
.screen-results .result-ledger .stat.dropped :is(.k, .v) { color: #ff8398; opacity: 1; }
.screen-results .result-ledger .dropped .v { text-decoration: line-through; text-decoration-color: var(--menu-hot); }
.screen-results .result-ledger .stat small { flex-basis: 100%; margin-top: -2px; color: var(--menu-muted); font: 500 9px/1.4 var(--mono); letter-spacing: .04em; }
.screen-results .result-ledger .stat.dropped small { color: #ebbac5; }
.screen-results .result-grade { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-block: 1px solid var(--menu-line); }
.screen-results .starrow { display: flex; flex-shrink: 0; gap: 4px; margin: 0; }
.screen-results .starrow .star { font-size: 25px; color: #526275; opacity: 1; text-shadow: none; }
.screen-results .starrow .star.lit { color: #ffd275; text-shadow: 0 0 14px #ffd2752e; }
.screen-results .starlabel { margin: 0; text-align: left; color: #e1c994; font: 600 10px/1.5 var(--mono); letter-spacing: .03em; }
.screen-results .result-reward { margin: 14px 0; font: 400 23px/1.15 var(--display); color: #ffd275; text-shadow: 0 0 18px #ffd2751a; }
.screen-results .result-paper .award { display: block; margin: 8px 0; padding: 0; border: 0; background: transparent; transform: none; color: #91edb8; font: 600 10px/1.5 var(--mono); letter-spacing: .03em; text-shadow: none; text-align: left; }
.screen-results .result-paper .dailychip { display: inline-block; margin: 0 0 10px; padding: 5px 8px; color: #f7d89c; border: 1px solid #907443; background: #ffd27507; transform: none; font: 600 10px/1.5 var(--mono); letter-spacing: .05em; }
.screen-results .result-actions { margin-top: 22px; }
.screen-results .result-actions .row { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 0; }
.screen-results .result-actions .btn { min-width: 0; min-height: 46px; flex: 1 1 130px; flex-direction: column; gap: 4px; padding: 10px 12px; color: var(--ink); border: 2px solid #44637c; border-radius: 2px; background: #12141f; box-shadow: 3px 3px 0 #03060c; font: 700 18px/1.2 var(--display); letter-spacing: .02em; overflow-wrap: normal; word-break: normal; text-wrap: balance; transform: skewX(-7deg); }
.screen-results .result-actions .btn > * { transform: skewX(7deg); }
.screen-results .result-actions .btn::after { display: block; }
.screen-results .result-actions .btn.primary { color: #07080f; border-color: transparent; background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 90%, #000)); box-shadow: 3px 3px 0 #03060c; }
.screen-results .result-actions .btn small { display: block; width: 100%; flex: none; color: inherit; font: 600 9px/1.4 var(--mono); letter-spacing: .035em; }
.screen-results .result-secondary { margin-top: 10px !important; padding-top: 9px; border-top: 1px solid var(--menu-line); }
.screen-results .result-secondary .btn { min-height: 44px; flex-basis: 112px; font-size: 16px; padding: 8px; }
.screen-results .result-actions :is(.hint, .favorline) { display: block; max-width: none; color: var(--menu-muted); text-align: left; font: 500 10px/1.6 var(--body); letter-spacing: .025em; overflow-wrap: anywhere; }
.screen-results .result-actions .hint { margin: 10px 0; }
.screen-results .result-actions .btn:focus-visible, .screen-results .result-actions .btn.focus { outline: 2px solid var(--menu-accent); outline-offset: 3px; box-shadow: 0 0 18px #54e6f524; transform: skewX(-7deg); }
@media (hover: hover) {
  .screen-results .result-actions .btn:hover:not(:disabled):not(.dim) { background: #1c2031; color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 #03060c, 0 0 18px color-mix(in srgb, var(--c) 30%, transparent); transform: skewX(-7deg) translate(-2px, -2px); }
  .screen-results .result-actions .btn.primary:hover:not(:disabled):not(.dim) { color: #07080f; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 85%, white), var(--c)); }
}
.screen-results .result-actions .btn:active:not(:disabled):not(.dim) { transform: skewX(-7deg) translate(2px, 2px); box-shadow: 1px 1px 0 #03060c; }
@media (min-width: 641px) and (max-width: 900px) {
  .screen-results .result-report { grid-template-columns: minmax(180px, .62fr) minmax(0, 1fr); }
  .screen-results .result-paper { padding: 24px; }
  .screen-results .result-name { font-size: 38px; }
  .screen-results .result-ledger { column-gap: 12px; }
}
@media (max-width: 640px) {
  .screen.screen-results { padding: calc(12px + var(--sat)) calc(12px + var(--sar)) calc(16px + var(--sab)) calc(12px + var(--sal)); }
  .screen-results .result-report { display: block; margin: auto; box-shadow: 5px 5px 0 #03060c70, 0 0 24px color-mix(in srgb, var(--c) 10%, transparent); }
  .screen-results .result-visual { height: 170px; }
  .screen-results .result-portrait { object-position: 20% 28%; }
  .screen-results .result-visual::after { background: linear-gradient(90deg, #07091000 25%, #07091077 56%, #070910ee); }
  .screen-results .result-identity { left: 46%; right: 15px; bottom: 18px; gap: 5px; }
  .screen-results .result-name { font-size: clamp(19px, calc(8vw - 6px), 36px); }
  .screen-results .result-role { font-size: 8px; }
  .screen-results .result-technique { font-size: 8px; padding-top: 6px; }
  .screen-results .result-stamp { top: 16px; left: 14px; border-width: 2px; font-size: 21px; padding: 4px 8px; }
  .screen-results .result-paper { padding: 20px; }
  .screen-results .result-head { margin-bottom: 14px; }
  .screen-results .result-heading { font-size: clamp(40px, 12vw, 64px); margin-top: 13px; }
  .screen-results .result-duration strong { font-size: 48px; }
  .screen-results .result-duration span { font-size: 9px; }
  .screen-results .endstats.result-ledger { gap: 0 12px; }
  .screen-results .result-ledger .stat { padding: 9px 0; }
  .screen-results .result-ledger .k { font-size: 8px; }
  .screen-results .result-ledger .v { font-size: 18px; }
  .screen-results .result-grade { gap: 10px; }
  .screen-results .starrow .star { font-size: 20px; }
  .screen-results .starlabel { font-size: 9px; }
  .screen-results .result-actions { margin-top: 16px; }
  .screen-results .result-secondary .btn { font-size: 16px; }
}
@media (max-height: 500px) and (min-width: 641px) {
  .screen.screen-results { padding: calc(10px + var(--sat)) calc(12px + var(--sar)) calc(10px + var(--sab)) calc(12px + var(--sal)); }
  .screen-results .result-report { grid-template-columns: minmax(160px, .6fr) minmax(0, 1.4fr); }
  .screen-results .result-portrait { object-position: 24% center; }
  .screen-results .result-identity { left: 16px; right: 16px; bottom: 20px; }
  .screen-results .result-name { font-size: clamp(21px, 3.15vw, 32px); }
  .screen-results .result-paper { padding: 16px 22px; }
  .screen-results .result-head { margin-bottom: 10px; padding-top: 7px; }
  .screen-results .result-heading { font-size: 44px; margin: 9px 0 6px; }
  .screen-results .result-duration strong { font-size: 42px; }
  .screen-results .result-hour { margin-top: 8px; }
  .screen-results .result-best { position: absolute; right: 22px; top: 80px; }
  .screen-results .endstats.result-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; margin: 10px 0; }
  .screen-results .result-ledger .stat { padding: 7px 0; }
  .screen-results .result-ledger .v { font-size: 18px; }
  .screen-results .result-grade { padding: 6px 0; }
  .screen-results .result-reward { margin: 9px 0; font-size: 20px; }
  .screen-results .result-actions { margin-top: 13px; }
}

/* The clear card is a decision, not the full report. Only this winning
   surface changes; death/revive and route-map layouts keep their contracts. */
#ui > .screen.round-clear, #ui > .screen.round-details {
  background: rgba(5, 7, 14, .64); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.screen.round-clear::before, .screen.round-details::before { display: none; }
.round-clear-wrap { width: min(960px, 100%); margin: auto; flex: none; display: grid; justify-items: center; gap: 10px; }
.round-clear .result-report { width: 100%; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.round-clear .result-paper { padding: clamp(24px, 3vw, 36px); }
.round-clear .result-heading { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; margin-bottom: 0; }
.round-clear .result-hour { margin-top: 0; font: 500 12px/1.4 var(--body); letter-spacing: .02em; }
.round-clear .result-name { font-size: clamp(28px, 3.8vw, 46px); }
.round-haul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: #ffdc82; }
.round-haul strong { font: 600 clamp(28px, 3vw, 38px)/1.1 var(--body); font-variant-numeric: tabular-nums; }
.round-haul > span { color: var(--menu-muted); font: 400 13px/1.4 var(--body); }
.round-haul > small { flex-basis: 100%; font: 400 11px/1.4 var(--body); }
.round-clear .result-actions { margin-top: 26px; }
.round-clear .result-primary { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 10px !important; }
.round-clear .result-primary .btn { min-height: 48px; font-size: clamp(15px, 1.7vw, 18px); }
.round-clear .result-primary .btn:only-child { grid-column: 1 / -1; }
.round-next, .round-risk { text-align: center; font: 400 12px/1.5 var(--body); letter-spacing: 0; }
.round-next { color: #d0e2ed; margin: 16px 0 0; }
.round-risk { color: #c5b5b7; margin: 2px 0 0; }
.screen .btn.round-details-link {
  min-height: 44px; padding: 8px 16px; gap: 10px; background: transparent; border-color: transparent;
  font: 500 13px/1.4 var(--body); letter-spacing: .015em; color: #c5d8e2; box-shadow: none; transform: none;
}
.screen .btn.round-details-link::after { display: none; }
.round-drop-count { padding: 2px 7px; color: #ffdc82; border-left: 1px solid #8e7949; }
.round-details-body { width: min(960px, 100%); margin: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-block: 28px; }
.round-detail-section { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.round-details .result-actions { margin: 0; }
.round-details .result-actions > .btn { flex: none; }
.round-details .result-ledger { margin: 0; }
.round-details .award, .round-details .dailychip { font: 400 13px/1.5 var(--body); color: #b6e3ce; }
.round-details .dailychip { margin: 0; align-self: flex-start; }
.round-details .result-reward { margin: 0; }
.round-details .boss-card-summary { margin: 0; }
.round-details .result-actions .hint { margin: 0; font-size: 12px; }
@media (max-width: 640px) {
  .round-clear-wrap { max-width: 440px; gap: 4px; }
  .round-clear .result-visual { height: clamp(108px, 19vh, 154px); }
  .round-clear .result-paper { padding: 20px; }
  .round-clear .result-heading { font-size: clamp(30px, 8vw, 44px); margin-top: 10px; }
  .round-clear .result-name { font-size: clamp(20px, 6vw, 30px); }
  .round-clear .result-head { padding-top: 10px; margin-bottom: 16px; }
  .round-clear .result-actions { margin-top: 18px; }
  .round-clear .result-identity { left: 48%; bottom: 16px; }
  .round-clear .result-stamp { font-size: 18px; top: 12px; }
  .round-clear .result-hour { font-size: 11px; }
  .round-next, .round-risk { font-size: 11px; }
  .round-next { margin-top: 12px; }
  .round-details-body { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 540px; padding-block: 20px; }
}
@media (max-height: 500px) and (min-width: 641px) {
  .round-clear-wrap { max-width: 800px; gap: 0; }
  .round-clear .result-paper { padding: 16px 24px; }
  .round-clear .result-heading { font-size: 32px; margin-top: 8px; }
  .round-clear .result-name { font-size: 28px; }
  .round-clear .result-head { padding-top: 8px; }
  .round-clear .result-hour { font-size: 11px; }
  .round-haul strong { font-size: 26px; }
  .round-clear .result-actions { margin-top: 14px; }
  .round-clear .result-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .round-clear .result-primary .btn { min-height: 46px; font-size: 14px; }
  .round-next { margin-top: 10px; }
  .round-next, .round-risk { font-size: 11px; }
}
@media (max-height: 360px) and (min-width: 501px) {
  #ui > .screen.round-clear { padding-block: calc(8px + var(--sat)) calc(8px + var(--sab)); }
  .round-clear-wrap { gap: 0; }
  .round-clear .result-report { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); }
  .round-clear .result-visual { height: auto; }
  .round-clear .result-identity { left: 12px; right: 12px; bottom: 14px; }
  .round-clear .result-name { font-size: 20px; }
  .round-clear .result-stamp { left: 10px; padding: 4px; font-size: 16px; }
  .round-clear .result-paper { padding: 12px 18px; }
  .round-clear .result-heading { font-size: 27px; margin-top: 6px; }
  .round-clear .result-head { margin-bottom: 10px; padding-top: 6px; }
  .round-clear .result-hour { margin-top: 0; font-size: 10px; }
  .round-clear .round-haul strong { font-size: 24px; }
  .round-clear .result-actions { margin-top: 12px; }
  .round-clear .result-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .round-clear .result-primary .btn { min-height: 44px; font-size: 12px; padding: 8px; }
  .round-next { margin-top: 8px; }
}

/* Full-width mastheads, with equal inner gutters even beside a phone notch.
   Keep the header in flow so wrapped headings reserve their actual height. */
#ui > .screen.has-menuhead {
  --menu-gutter: calc(clamp(16px, 3vw, 40px) + max(var(--sal), var(--sar)));
  padding-top: 0; padding-inline: var(--menu-gutter);
}
.screen.has-menuhead > .screenhead {
  position: sticky; top: 0; inset-inline: auto; align-self: stretch;
  width: calc(100% + 2 * var(--menu-gutter)); max-width: none;
  margin: 0 calc(-1 * var(--menu-gutter));
  padding: calc(12px + var(--sat)) var(--menu-gutter) 12px;
  min-height: calc(72px + var(--sat)); background: #070910;
  border-bottom: 1px solid #54e6f566;
}
.screen.has-menuhead > .screenhead .heading { padding: 0; transform: none; font-size: clamp(22px, 3vw, 38px); line-height: 1.15; }
.screen.has-menuhead > .screenhead .heading::before { left: -10px; width: 3px; bottom: 12%; }
.screen.has-menuhead > .screenhead .heading::after { display: none; }
.screen.has-menuhead > .screenhead .kicker { padding: 0; }
.screen.roster-chooser > .screenhead { justify-self: stretch; }
.screen.screen-levelup > .screenhead { padding-right: calc(var(--menu-gutter) + 66px); }
.screen-levelup .level-seal { right: var(--menu-gutter); }
/* Size long technique names to their own card, including narrow three-card
   tablet layouts, without splitting a name in the middle of a word. */
.screen-levelup .tech-copy { container-type: inline-size; }
.screen-levelup .card.tech h3 { font-size: clamp(18px, 10cqi, 30px); line-height: 1.12; overflow-wrap: normal; }
@media (max-width: 600px) {
  .screen.has-menuhead > .screenhead .heading { font-size: clamp(18px, 5vw, 28px); }
  .screen.roster-chooser > .screenhead .heading { font-size: clamp(14px, 4.2vw, 22px); }
}
@media (max-height: 500px) {
  .screen.has-menuhead > .screenhead { min-height: calc(56px + var(--sat)); padding-block: calc(6px + var(--sat)) 6px; }
  .screen.has-menuhead > .screenhead .heading { font-size: 22px; }
  .screen-pause .pause-logo { bottom: calc(18px + var(--sab)); font-size: 26px; }
}

/* School expedition: keep the frozen arena visible around a compact route
   and the crew's physical condition. Cleared rooms remain connected passages. */
#ui > .screen.school-screen.modal { background: rgba(5, 7, 14, .48); backdrop-filter: none; -webkit-backdrop-filter: none; gap: 18px; }
.screen.school-screen::before { display: none; }
.school-screen .school-eyebrow, .school-section-label { color: #abc2d0; font: 600 11px/1.4 var(--body); letter-spacing: .025em; margin: 0; }
.school-screen .school-progress { color: var(--menu-accent); font: 600 13px/1.3 var(--body); white-space: nowrap; }
.run-modes { width: min(820px, 100%); display: grid; gap: 16px; }
.screen .btn.run-mode { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 20px; padding: 25px 30px; min-height: 150px; overflow: hidden; border: 1px solid #627a8b; border-left: 4px solid #91a9b9; text-align: left; box-shadow: 5px 5px 0 #04070c; background: #0b1420; }
.screen .btn.run-mode.primary { border-left-color: var(--menu-hot); border-color: #bb6e82; color: var(--menu-text); }
.run-mode-art { position: absolute; inset: 0 0 0 auto; width: 64%; height: 100%; object-fit: cover; opacity: .48; z-index: -2; }
.run-mode::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0b1420 22%, #0b1420c7 62%, #0b142030); z-index: -1; }
.run-mode-copy { min-width: 0; display: grid; gap: 10px; max-width: 580px; }
.run-mode-name { font: 600 clamp(22px, 3vw, 32px)/1.1 var(--display); }
.run-mode-desc { color: #d0dce5; font: 400 14px/1.45 var(--body); letter-spacing: 0; }
.run-mode-arrow { font: 400 28px/1 var(--body); }
.school-layout { width: min(1120px, 100%); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 60px); }
.school-plan, .school-status { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.school-route-map { position: relative; display: grid; gap: 21px; max-height: min(580px, 60dvh); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; scrollbar-width: thin; scrollbar-color: #748b99 #142332; padding: 4px 10px 6px 3px; isolation: isolate; }
.school-wing { position: relative; display: grid; gap: 8px; min-width: 0; }
.school-wing + .school-wing::before { content: ''; position: absolute; height: 13px; top: -17px; left: 13px; border-left: 2px solid #667e8f; }
.school-wing-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.school-wing-head .school-section-label { color: #dce9ee; }
.school-wing-number { color: #869eac; font: 500 11px/1.4 var(--body); font-variant-numeric: tabular-nums; }
.school-wing-state { margin-left: auto; color: #a1b5c2; font: 400 10px/1.3 var(--body); text-align: right; }
.school-wing.is-open .school-wing-state, .school-wing.is-open .school-wing-number { color: var(--menu-accent); }
.school-wing.is-cleared .school-wing-state { color: #b5edcf; }
.school-wing-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.school-wing-rooms.is-single { grid-template-columns: minmax(0, 1fr); }
.screen .btn.school-room { position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; overflow: hidden; min-height: 94px; text-align: left; padding: 12px; border: 1px solid #79939f; background: #101d28; box-shadow: 3px 3px 0 #030810; opacity: 1; }
.school-room-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.school-room::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #08101cf7 2%, #08101c91 55%, #08101c0a); }
.school-room-copy { min-width: 0; display: grid; gap: 6px; }
.school-room-state { font: 600 10px/1.3 var(--body); color: #d3e3eb; letter-spacing: .01em; }
.school-room-name { font: 500 clamp(13px, 1.4vw, 18px)/1.2 var(--display); color: #ecf7fc; overflow-wrap: normal; }
.school-room-mark { font: 600 23px/1 var(--body); color: var(--menu-accent); }
.screen .btn.school-room.is-cleared { border-color: #75b99c; }
.school-room.is-cleared .school-room-state, .school-room.is-cleared .school-room-mark { color: #b5edcf; }
.school-room.is-cleared .school-room-art { filter: saturate(.5); }
.screen .btn.school-room.is-locked { border-color: #556170; }
.school-room.is-locked .school-room-art { opacity: .25; filter: grayscale(1); }
.screen .btn.school-room.is-available { border-color: var(--menu-accent); box-shadow: 4px 4px 0 #030810, inset 0 -3px var(--menu-accent); }
.school-room.is-available .school-room-state { color: var(--menu-accent); }
.screen .btn.school-room.is-available:hover, .screen .btn.school-room.is-available:focus-visible { outline: 2px solid #e0fcff; outline-offset: 2px; }
.screen .btn.school-room.is-available:active { transform: translateY(2px); }
.school-ledger { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; padding: 16px 0; border-block: 1px solid #758b9a66; }
.school-stat { min-width: 0; display: grid; align-content: start; gap: 5px; }
.school-stat > span { color: #b8cbd5; font: 400 12px/1.3 var(--body); }
.school-stat > strong { color: #edf5fb; font: 600 clamp(16px, 2vw, 25px)/1.2 var(--body); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.school-stat.school-coins > strong { color: #ffdc82; }
.school-boost { grid-column: 1 / -1; margin: 0; color: #ffdc82; font: 400 11px/1.4 var(--body); }
.school-crew { display: grid; gap: 12px; }
.school-crew-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.school-member { display: flex; gap: 12px; min-width: 0; }
.school-member > img { width: 46px; height: 58px; object-fit: cover; object-position: 50% 15%; background: #142332; border-left: 2px solid var(--member-color); }
.school-member-copy { flex: 1; min-width: 0; display: grid; align-content: center; gap: 7px; }
.school-member-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.school-member-line strong { font: 600 15px/1.2 var(--body); }
.school-member-health { color: #d1e2e9; font: 500 11px/1.4 var(--body); font-variant-numeric: tabular-nums; }
.school-health { height: 4px; background: #7b929e40; overflow: hidden; }
.school-health i { display: block; width: 100%; height: 100%; background: var(--member-color); transform-origin: left; }
.school-member-weapon { color: #aebfcf; font: 400 11px/1.25 var(--body); }
.school-member.is-ko { opacity: .66; }
.school-member.is-ko > img { filter: grayscale(1); border-color: #ba6c80; }
.school-member.is-ko .school-member-line strong { text-decoration: line-through; }
.school-member.is-ko .school-member-health { color: #ff9daf; }
.school-actions { display: grid; gap: 10px; }
.school-screen .school-actions .btn, .school-screen .school-replace .btn { min-height: 46px; font: 500 13px/1.3 var(--display); letter-spacing: .005em; box-shadow: 3px 3px 0 #030810, inset 0 1px #e4f4ff20; }
.school-screen .school-actions .btn.primary { color: #06121b; background: #9ceaf0; border-color: #e2fbff; }
.school-screen .school-risk { font-size: 12px; line-height: 1.5; color: #b7c7d1; }
.school-replace { width: min(500px, 100%); display: grid; gap: 16px; }
.crew-health { width: 100%; height: 3px; background: #879daf45; overflow: hidden; }
.crew-health[hidden] { display: none; }
.crew-health i { display: block; width: 100%; height: 100%; transform-origin: left; background: #94e3ae; }
.crew-ko { border-color: #a9667a; opacity: .65; }
.crew-ko .crew-portrait { filter: grayscale(1); }
.crew-ko .crew-name { text-decoration: line-through; }
.crew-ko .crew-mark, .crew-ko .crew-summon { color: #ff9fb5; }
.crew-ko .crew-energy { opacity: .2; }
@media (max-width: 700px) and (min-height: 501px) {
  .school-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 540px; }
  .school-plan, .school-status { gap: 16px; }
  .school-route-map { max-height: 54dvh; }
  .screen .btn.school-room { min-height: 90px; padding: 10px; }
  .school-room-name { font-size: clamp(12px, 3.3vw, 17px); }
  .school-wing-rooms { gap: 10px; }
  .school-screen .school-progress { font-size: 11px; }
  .screen .btn.run-mode { padding: 22px 18px; min-height: 156px; gap: 12px; }
  .run-mode-name { font-size: 24px; }
  .run-mode-desc, .school-screen .school-note { font-size: 13px; }
}
@media (max-height: 500px) {
  #ui > .screen.school-screen.modal { gap: 14px; }
  .school-layout { gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .school-plan, .school-status { gap: 12px; }
  .school-screen .school-risk { font-size: 11px; }
  .screen .btn.school-room { min-height: 80px; padding: 9px; }
  .school-route-map { max-height: 56dvh; gap: 19px; }
  .school-wing-rooms { gap: 8px; }
  .school-wing-head { gap: 6px; flex-wrap: wrap; }
  .school-wing-state { font-size: 9px; }
  .school-room-name { font-size: clamp(11px, 1.6vw, 14px); }
  .school-room-state { font-size: 9px; }
  .school-ledger { padding: 10px 0; gap: 8px; }
  .school-stat > strong { font-size: 16px; }
  .school-member > img { width: 36px; height: 47px; }
  .school-member-copy { gap: 5px; }
  .school-member-line strong { font-size: 13px; }
  .school-member-weapon { font-size: 10px; }
  .school-actions { gap: 8px; }
  .school-screen .school-actions .btn { font-size: 11px; min-height: 44px; padding: 8px 12px; }
  .run-modes { gap: 12px; }
  .screen .btn.run-mode { min-height: 110px; padding: 16px 20px; }
  .run-mode-copy { gap: 6px; }
  .run-mode-name { font-size: 22px; }
  .run-mode-desc { font-size: 12px; }
}

/* ---- Cards (docs/CARD-DECK-PLAN.md): one drawing at every size. The frame
   is laid out in em; --tc sets the em (3.2px = a 240×336 card). ---- */
.tcard { --tc: 3.2px; font-size: var(--tc); position: relative; flex: none; width: 75em; height: 105em; border-radius: 3.4em; overflow: hidden;
  --c: #ff3b4a; --c2: #ffb0a6; color: #eef2ff; font-family: var(--body); text-transform: none; text-align: left; letter-spacing: 0; line-height: 1.2;
  background: linear-gradient(160deg, #12162a, #07080f 60%); box-shadow: 0 2em 5em #000c, 0 0 0 1px #000; }
.tcard::before { content: ''; position: absolute; inset: 0; border-radius: 3.4em; padding: 2.2em; opacity: .92;
  background: conic-gradient(from 210deg at 50% 40%, var(--c) 0%, #ffffff33 12%, var(--c) 24%, #0a0c18 38%, var(--c2) 52%, #ffffff44 60%, var(--c) 74%, #0a0c18 88%, var(--c) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.tcard::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 3.4em;
  background: linear-gradient(115deg, transparent 30%, #ffffff10 45%, #ffffff22 50%, #ffffff10 55%, transparent 70%); }
.tcard :is(b, em, i, small, span) { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.tc-inner { position: absolute; inset: 2.2em; border-radius: 1.6em; background: #05060d;
  background-image: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px .5em), radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 55%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, #000), inset 0 0 4em #000; }
.tc-head { position: absolute; left: 3.4em; right: 3.4em; top: 3em; height: 8.8em; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2em; }
.tc-name { font-family: var(--display); font-weight: 700; font-size: 5em; line-height: .9; white-space: nowrap; min-width: 0; flex: 1 1 auto; overflow: hidden; letter-spacing: .01em;
  text-shadow: 0 0 .4em color-mix(in srgb, var(--c) 55%, transparent), .06em .06em 0 #000; }
.tc-kind { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .6em; padding-bottom: .6em; }
.tc-kind b { font-family: var(--display); font-weight: 700; font-size: 1.8em; letter-spacing: .28em; color: var(--c); }
.tc-pips { display: flex; gap: .4em; }
.tc-pips i { width: 1.2em; height: .6em; background: #232338; transform: skewX(-20deg); }
.tc-pips i.on { background: var(--c); box-shadow: 0 0 .8em var(--c); }
.tc-art { position: absolute; left: 3.4em; right: 3.4em; top: 13.2em; height: 51.1em; border-radius: .8em; overflow: hidden;
  background: #000 radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%);
  box-shadow: 0 0 0 .2em #000, 0 0 0 .4em color-mix(in srgb, var(--c) 70%, #000), 0 0 4em color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 0 1px #ffffff22; }
.tc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, #05060dcc); }
.tc-num { position: absolute; left: .8em; top: .8em; z-index: 1; padding: .4em 1em; background: #05060dd9; border: 1px solid color-mix(in srgb, var(--c) 60%, #000);
  font-family: var(--display); font-size: 1.5em; letter-spacing: .2em; color: var(--c); text-shadow: 0 0 .6em var(--c); }
.tc-owner { position: absolute; right: -.4em; bottom: 1.5em; z-index: 1; padding: .6em 2.6em .6em 1.8em; background: var(--c); color: #05060d;
  font-family: var(--display); font-weight: 700; font-size: 1.5em; letter-spacing: .22em; transform: skewX(-12deg); box-shadow: .3em .3em 0 #000; }
.tc-student { position: absolute; left: 3.4em; right: 3.4em; top: 66em; display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.tc-student b { font-size: 1.5em; letter-spacing: .08em; color: #eef2ff; font-weight: 800; white-space: nowrap; }
.tc-student em { font-size: 1.5em; font-style: italic; color: var(--c); letter-spacing: .04em; font-weight: 500; text-align: right; }
.tc-effect { position: absolute; left: 3.4em; right: 3.4em; top: 70em; min-height: 15em; padding: 2.4em 2.6em 2.2em;
  border: 1px solid color-mix(in srgb, var(--c) 40%, #000); border-left: .6em solid var(--c);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%), #0b0e1b; box-shadow: .4em .4em 0 #000; }
.tc-trig { font-family: var(--display); font-size: 1.5em; letter-spacing: .3em; color: var(--c); margin-bottom: .5em; }
.tc-text { font-size: 2.9em; line-height: 1.3; font-weight: 700; color: #eef2ff; }
.tc-flavor { position: absolute; left: 4.4em; right: 4.4em; top: 88em; text-align: center; }
.tc-flavor span { font-style: italic; font-size: 1.9em; line-height: 1.35; color: #aab2d0; }
.tc-foot { position: absolute; left: 3.4em; right: 3.4em; bottom: 2.6em; display: flex; justify-content: space-between; align-items: center; white-space: nowrap; }
.tc-foot span { font-size: 1.1em; letter-spacing: .18em; color: #8b93b3; font-weight: 700; text-transform: uppercase; }
.tc-foot .tc-seal { font-family: "Yu Mincho", "MS Mincho", "Hiragino Mincho ProN", serif; font-size: 1.8em; color: var(--c); letter-spacing: .1em; text-shadow: 0 0 .6em var(--c); text-transform: none; }
.tc-foot .tc-idx { font-family: var(--display); font-size: 1.5em; color: #eef2ff; letter-spacing: .12em; }
.tcard.kind-spirit { --c: #3ad6ff; --c2: #bff6ff; }
.tcard.kind-crew { --c: #ffd23f; --c2: #fff2b3; }
.tcard.kind-technique { --c: #ff3b4a; --c2: #ffb0a6; }
.tcard.kind-movement { --c: #7cff6b; --c2: #d9ffd2; }
.tcard.kind-body { --c: #ff9f43; --c2: #ffd9b3; }
.tcard.kind-utility { --c: #b58cff; --c2: #e4d6ff; }
.tcard.boss-signature { --c: #ffd16b; --c2: #fff3bf; }
.tcard.boss-signature .tc-art img { object-position: 33% center; }
.tcard.boss-signature .tc-art img[data-card-art="painting"] { object-position: center; }
.tc-blank.boss-signature .tc-blank-note { max-width: 90%; text-align: center; text-transform: none; }
.flow-card.boss-signature .flow-tag { letter-spacing: .02em; text-transform: none; }
/* face-down */
.tcard.back .tc-inner { background: #07080f repeating-linear-gradient(135deg, #ffffff06 0 .4em, transparent .4em 1.4em); }
.tc-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3em; }
.tc-back-seal { font-family: "Yu Mincho", "MS Mincho", "Hiragino Mincho ProN", serif; font-size: 15em; line-height: 1; writing-mode: vertical-rl; color: transparent;
  -webkit-text-stroke: .04em var(--c); text-shadow: 0 0 1em color-mix(in srgb, var(--c) 40%, transparent); }
.tc-back-word { font-family: var(--display); font-weight: 700; font-size: 3.6em; letter-spacing: .3em; color: #eef2ff; }
/* the reveal: both faces in one box, flipped a beat apart */
.tc-flip { --tc: 3.2px; font-size: var(--tc); position: relative; flex: none; width: 75em; height: 105em; perspective: 220em; }
.tc-flip .tcard { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .75s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--order, 0) * 130ms); }
.tc-flip .tcard.back { transform: rotateY(0deg); }
.tc-flip .tcard:not(.back) { transform: rotateY(180deg); }
.tc-flip.flipped .tcard.back { transform: rotateY(-180deg); }
.tc-flip.flipped .tcard:not(.back) { transform: rotateY(0deg); }
.tc-flip.instant .tcard { transition: none; }
@media (prefers-reduced-motion: reduce) { .tc-flip .tcard { transition: none; } }

/* ---- the hand and the deck ---- */
.screen-hand, .screen-deck { gap: 12px; }
.hand-layout { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.hand-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hand-tab { min-height: 44px; padding: 8px 18px; --c: var(--cyan); }
.hand-tab.on { border-color: var(--c); color: var(--ink); background: color-mix(in srgb, var(--c) 24%, #0a1321); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); }
.hand-cards { --tc: 2.4px; display: flex; gap: 12px; padding: 12px 10px 16px; width: 100%; max-width: 1180px; justify-content: safe center; overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; }
.screen .hand-slot, .screen .deck-slot { padding: 6px 6px 8px; min-width: 0; min-height: 0; margin: 0; flex: none; }
.hand-slot { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; padding: 6px 6px 8px;
  background: transparent; border: 2px solid transparent; border-radius: 14px; box-shadow: none; transform: none; scroll-snap-align: center; opacity: .74;
  transition: opacity .2s, transform .2s, border-color .2s; }
.hand-slot::before, .hand-slot::after { display: none; }
.hand-slot > * { transform: none; }
.hand-slot.kept { opacity: 1; border-color: var(--cyan); box-shadow: 0 0 22px rgba(58,214,255,.22); }
.hand-slot:hover:not(:disabled), .hand-slot:is(.focus, :focus-visible) { background: transparent; opacity: 1; z-index: 3; transform: translateY(-8px) scale(1.6); outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: none; }
.hand-cards { padding-top: 100px; }
@media (hover: none) { .hand-slot:hover:not(:disabled) { transform: none; } .hand-slot:is(.focus, :focus-visible) { transform: translateY(-4px); } .hand-cards { padding-top: 12px; } }
.hand-slot.kept:is(:hover, .focus, :focus-visible) { border-color: var(--cyan); }
.hand-slot .tc-flip, .hand-slot .tcard { --tc: inherit; }
.hand-tag { font: 700 11px var(--mono); letter-spacing: .24em; color: var(--ink-dim); text-transform: uppercase; }
.hand-slot.kept .hand-tag { color: var(--cyan); }
.hand-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; width: min(1100px, 100%); }
.hand-status { font: 700 12px var(--mono); letter-spacing: .2em; color: var(--ink); text-transform: uppercase; }
.hand-note { flex-basis: 100%; text-align: center; font: 400 12px var(--body); color: var(--ink-dim); }
.hand-ready { min-width: 220px; }
.deck-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(1220px, 100%); padding: 4px; }
.deck-slot { --tc: 2.4px; }
.deck-slot.unusable { opacity: .35; filter: grayscale(.6); }
.deck-slot.unusable .hand-tag { color: var(--red); }
.hand-slot.static { cursor: default; opacity: 1; }
.screen-pausehand { gap: 12px; }

/* A ground card above a live hand: the same two-pane grammar as Build Deck. */
#ui > .screen.screen-carddrop.modal {
  --menu-gutter: calc(24px + max(var(--sal), var(--sar)));
  background: rgba(5, 7, 14, .56); backdrop-filter: none; -webkit-backdrop-filter: none;
  gap: 0; padding: 0 var(--menu-gutter) calc(12px + var(--sab)); animation: none;
}
.screen-carddrop::before, .screen-carddrop > .flexspacer { display: none; }
.screen.screen-carddrop > .screenhead { flex: none; min-height: 56px; padding-block: calc(8px + var(--sat)) 8px; }
.screen-carddrop > .screenhead .heading { font-size: clamp(22px, 3vw, 34px); }
.carddrop-shell { width: min(1220px, 100%); min-width: 0; min-height: 0; flex: 1; display: grid; grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 12px; }
.screen-carddrop .carddrop-ground { min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 5vw, 72px); padding: 12px;
  background: radial-gradient(ellipse at 38% 50%, color-mix(in srgb, var(--reveal-color, #ffd16b) 8%, transparent), transparent 60%); border-bottom: 1px solid #9c86573b; }
.carddrop-art { flex: none; }
.carddrop-art .tcard { --tc: var(--drop-ground-tc, 2px); }
.carddrop-intro { flex: 0 1 390px; min-width: 0; }
.carddrop-kicker { color: #e9cb89; font: 600 12px/1.4 var(--body); }
.carddrop-title { margin: 12px 0; color: #fff2d5; font: 700 clamp(22px, 3vw, 38px)/1.05 var(--display); text-transform: none; overflow-wrap: anywhere; }
.carddrop-effect { margin: 0; color: #e7edf4; font: 500 16px/1.45 var(--body); }
.carddrop-bank-note { margin: 14px 0 0; color: #bdb49e; font: 400 12px/1.4 var(--body); }
.screen-carddrop .carddrop-hand-pane { height: auto; min-height: 0; width: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; }
.carddrop-hand-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 0; }
.carddrop-hand-label { color: #e8f1f9; font: 700 20px/1.2 var(--display); }
.carddrop-recipients { display: flex; gap: 6px; min-width: 0; }
.screen-carddrop .btn { transform: none; letter-spacing: 0; transition: transform 140ms ease-out, background 140ms, border-color 140ms; }
.screen-carddrop .btn > * { transform: none; }
.screen-carddrop .btn::after { display: none; }
.screen-carddrop .btn:is(.focus, :focus-visible) { outline: 2px solid #eaf7ff; outline-offset: 3px; box-shadow: none; transform: none; }
.screen-carddrop .btn:active:not(:disabled) { transform: scale(.97); }
.screen-carddrop .btn.carddrop-recipient { --c: var(--menu-accent); min-height: 44px; margin: 0; padding: 3px 9px 3px 3px; gap: 7px; font: 600 13px/1.2 var(--body); background: #0b1423e6; border-color: #465e70; }
.carddrop-recipient img { width: 30px; height: 34px; object-fit: cover; object-position: 50% 15%; background: #070b12; }
.carddrop-recipient small { color: #c5d6e1; font: 500 11px/1 var(--body); }
.screen-carddrop .carddrop-recipient[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, #0b1423); color: #fff; }
.screen-carddrop .carddrop-recipient:disabled { opacity: .42; }
.carddrop-hand { flex: 1; min-height: 0; display: flex; align-items: center; gap: 10px; width: 100%; overflow-x: auto; overflow-y: hidden; padding: 10px 12px; box-sizing: border-box; scrollbar-width: thin; }
.carddrop-hand > :first-child { margin-left: auto; } .carddrop-hand > :last-child { margin-right: auto; }
.screen-carddrop .btn.carddrop-held { flex: none; min-width: 0; min-height: 0; margin-block: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 6px; overflow: visible; }
.carddrop-held .tcard { --tc: var(--drop-hand-tc, 1.5px); box-shadow: 0 6px 18px #0009; pointer-events: none; }
.screen-carddrop .carddrop-held[aria-pressed="true"] { outline: 2px solid #ffe1a0; outline-offset: 3px; }
.screen-carddrop .btn.carddrop-open { display: flex; flex-direction: column; width: calc(var(--drop-hand-tc, 1.5px) * 75); height: calc(var(--drop-hand-tc, 1.5px) * 105);
  border: 1px dashed #638293; color: #c8dbe7; background: #15233366; font: 500 12px/1.3 var(--body); }
.carddrop-slot-plus { font-size: 28px; }
.carddrop-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 4px 0; }
.carddrop-preview { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 42px; min-width: 0; color: #c5d5e1; font: 400 13px/1.35 var(--body); }
.carddrop-loss-title { color: #ffe1a0; font-weight: 700; }
.carddrop-actions { display: flex; gap: 10px; flex: none; }
.screen-carddrop .carddrop-actions .btn { min-height: 46px; padding: 10px 20px; font: 700 20px/1.2 var(--display); }
.screen-carddrop .carddrop-actions .carddrop-take { min-width: 174px; background: #ffe1a0; border-color: #ffe9b8; color: #161109; box-shadow: 0 3px 0 #826837; }
.screen-carddrop .carddrop-actions .carddrop-take:disabled { opacity: .46; box-shadow: none; }
@media (hover: hover) {
  .screen-carddrop .carddrop-held:hover:not(:disabled) { outline: 2px solid #dbeaf3; outline-offset: 3px; transform: translateY(-3px); }
  .screen-carddrop .carddrop-actions .carddrop-take:hover:not(:disabled) { background: #fff0cf; color: #161109; border-color: #fff4db; }
}
@media (max-width: 640px) {
  #ui > .screen.screen-carddrop.modal { --menu-gutter: calc(16px + max(var(--sal), var(--sar))); }
  .carddrop-shell { gap: 8px; }
  .screen-carddrop .carddrop-ground { gap: 14px; padding-inline: 0; }
  .carddrop-title { font-size: clamp(19px, 5.6vw, 28px); margin: 8px 0; }
  .carddrop-effect { font-size: 13px; line-height: 1.35; }
  .carddrop-kicker, .carddrop-bank-note { font-size: 11px; }
  .carddrop-bank-note { margin-top: 9px; }
  .carddrop-hand-head { flex-wrap: wrap; padding: 7px 8px 0; gap: 5px; }
  .carddrop-hand-label { font-size: 17px; }
  .carddrop-recipients { width: 100%; gap: 5px; }
  .screen-carddrop .btn.carddrop-recipient { flex: 1; min-width: 0; padding: 2px; gap: 4px; font-size: 11px; }
  .carddrop-recipient img { width: 24px; height: 32px; }
  .carddrop-recipient small { display: none; }
  .carddrop-footer { flex-direction: column; align-items: stretch; gap: 6px; }
  .carddrop-preview { font-size: 12px; min-height: 36px; }
  .carddrop-actions .btn { flex: 1; }
  .screen-carddrop .carddrop-actions .btn { min-width: 0; font-size: 18px; }
}
@media (max-height: 500px) and (min-width: 641px) {
  .screen.screen-carddrop > .screenhead { min-height: 42px; padding-block: calc(3px + var(--sat)) 3px; }
  .screen-carddrop > .screenhead .heading { font-size: 22px; }
  .carddrop-shell { gap: 4px; grid-template-rows: minmax(0, 1fr) minmax(0, 1.2fr) auto; }
  .carddrop-title { font-size: 22px; margin: 4px 0; }
  .carddrop-effect, .carddrop-bank-note, .carddrop-preview { font-size: 11px; line-height: 1.25; }
  .carddrop-kicker { font-size: 10px; } .carddrop-bank-note { margin-top: 5px; }
  .carddrop-hand-head { padding-top: 2px; } .carddrop-hand-label { font-size: 16px; }
  .screen-carddrop .btn.carddrop-recipient { min-height: 44px; padding: 1px 8px 1px 1px; }
  .carddrop-recipient img { width: 25px; height: 30px; }
  .carddrop-hand { padding-block: 5px; }
  .screen-carddrop .carddrop-actions .btn { min-height: 44px; padding: 7px 14px; font-size: 17px; }
  .screen-carddrop .carddrop-actions .carddrop-take { min-width: 145px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen-carddrop .btn { transition: none; }
  .screen-carddrop .btn:active:not(:disabled), .screen-carddrop .carddrop-held:hover:not(:disabled) { transform: none; }
}
/* ---- BUILD DECK: the club's cards in one long row floating in space, the deck in your hand ---- */
.screen-deck { --tct: 1.6px; --tcf: 2px; gap: 8px; }
/* the centring spacers would take two thirds of the height; the row takes it all */
.screen-deck > .flexspacer { flex: 0 0 0; }
/* the masthead carries the crew, the pull and the coins */
.deck-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* THE FREE PULL: on the house, once a night */
.btn.deck-free { border-color: #ffd27a; box-shadow: 0 0 10px #ffb24a55; }
.btn.deck-free small { color: #ffd27a; }
/* THE CLUB'S ONE QUESTION: one line, three taps, a skip */
.deck-survey { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; padding: 8px 10px; border: 1px solid #ffffff22; border-radius: 10px; background: #0b0b14cc; }
.deck-survey-q { font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-right: auto; }
.btn.deck-survey-a { padding: 6px 10px; font-size: 12px; }
.btn.deck-survey-skip { padding: 6px 10px; font-size: 12px; opacity: .7; }
@media (max-width: 640px) { .deck-survey-q { flex-basis: 100%; margin-right: 0; } }
.deck-crew { display: flex; align-items: center; gap: 6px; }
.screen .crew-btn { display: flex; align-items: center; gap: 8px; min-height: 50px; margin: 0; padding: 4px 14px 4px 5px; --c: var(--cyan); text-transform: none; letter-spacing: .02em; }
.screen .crew-btn img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 2px solid #3b4d63; background: #0a0d16; }
.screen .crew-btn small { font: 700 10px var(--mono); letter-spacing: .1em; color: var(--gold); }
.screen .crew-btn[aria-pressed="true"] { border-color: var(--c); color: var(--ink); background: color-mix(in srgb, var(--c) 24%, #0a1321); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); }
.screen .crew-btn[aria-pressed="true"] img { border-color: var(--c); }
.deck-coins { font: 700 14px var(--mono); letter-spacing: .12em; color: var(--gold); padding-inline: 6px; }
/* the pull: a gold button that shines */
.screen .btn.deck-pull { position: relative; overflow: hidden; min-height: 52px; margin: 0; padding: 6px 22px; color: #2a1d00; font-size: 15px; letter-spacing: .06em;
  border: 1px solid #ffe9a0; border-radius: 10px; background: linear-gradient(180deg, #fff4bf, #ffd23f 46%, #e0a318); text-shadow: 0 1px 0 #fff8;
  box-shadow: 0 0 24px #ffd23f66, 0 5px 0 #8a5d05, 0 10px 24px #000a; transform: translateY(-2px); transition: transform .12s, box-shadow .12s, filter .2s; }
.screen .btn.deck-pull small { color: #4a3300; font-weight: 700; }
.screen .btn.deck-pull::after { content: ''; position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 40%, #ffffffb0 50%, transparent 60%); transform: translateX(-70%); animation: pullShine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes pullShine { 0%, 55% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
.screen .btn.deck-pull:hover:not(:disabled):not(.dim), .screen .btn.deck-pull:is(.focus, :focus-visible):not(:disabled) { transform: translateY(-4px); box-shadow: 0 0 34px #ffd23f99, 0 7px 0 #8a5d05, 0 14px 28px #000a; color: #2a1d00; background: linear-gradient(180deg, #fff8d0, #ffdb5c 46%, #e8ab1e); border-color: #fff3c0; }
.screen .btn.deck-pull:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 0 18px #ffd23f66, 0 2px 0 #8a5d05, 0 6px 14px #000a; }
.screen .btn.deck-pull:disabled { filter: grayscale(.7); opacity: .55; box-shadow: 0 3px 0 #333; transform: none; }
.screen .btn.deck-pull:disabled::after { display: none; }
.screen .btn.deck-pull3 { min-height: 44px; margin: 0; padding: 4px 12px; font-size: 12px; border-color: #8a6a1a; color: var(--gold); }
.deck-pull3[hidden], .deck-arrow[hidden] { display: none; }
/* Compact faces leave space for purchase prices, which must stay visible. */
@media (max-width: 900px) {
  .screen.screen-deck > .screenhead { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; }
  .screen-deck > .screenhead .heading { grid-column: 1; grid-row: 1; }
  .screen-deck > .screenhead .screenclose { grid-column: 2; grid-row: 1; }
  .screen-deck .deck-bar { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; gap: 6px; justify-content: space-between; }
  .screen-deck .deck-crew { gap: 4px; }
  .screen-deck .crew-btn { position: relative; flex: none; width: 44px; min-height: 44px; padding: 2px; gap: 0; }
  .screen-deck .crew-btn img { width: 32px; height: 32px; }
  .screen-deck .crew-btn small { position: absolute; bottom: 0; right: 0; padding: 1px 2px; background: #0a0d16; font-size: 9px; }
  .screen .crew-btn .crew-name { display: none; }
  .screen .btn.deck-pull { padding: 6px 8px; font-size: 12px; }
  .screen .btn.deck-pull, .screen .btn.fan-protect, .screen .btn.deck-pull3 { flex-direction: column; gap: 2px; line-height: 1.1; }
  .screen .btn.deck-pull small, .screen .btn.fan-protect small, .screen .btn.deck-pull3 small { display: block; font-size: 10px; letter-spacing: .02em; }
  .screen .btn.deck-pull3, .screen .btn.fan-protect { min-width: 48px; }
  .deck-coins { font-size: 12px; padding-inline: 2px; }
}
@media (max-width: 539px) {
  .screen-deck .deck-bar { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .screen-deck .deck-crew { grid-column: 1 / 3; grid-row: 1; gap: 4px; }
  .screen-deck .deck-coins { grid-column: 3; grid-row: 1; justify-self: end; }
  .screen-deck .btn.deck-pull { grid-column: 1; grid-row: 2; min-height: 44px; padding: 5px 4px; font-size: 12px; }
  .screen-deck .btn.deck-pull3 { grid-column: 2; grid-row: 2; min-width: 0; padding: 5px 4px; }
  .screen-deck .btn.fan-protect { grid-column: 3; grid-row: 2; font-size: 10px; }
}
/* the row: cards side by side, facing you, nothing around them; it scrolls sideways and fades at the edges */
.deck-album { position: relative; flex: 1 1 auto; min-height: 140px; width: 100%; }
.deck-flow { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: 64px; scrollbar-width: none; display: flex; align-items: center;
  mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); }
.deck-flow::-webkit-scrollbar { display: none; }
.deck-stage { display: flex; flex: none; align-items: center; gap: 14px; padding: 12px 64px 30px; width: max-content; min-width: 100%; min-height: 100%; }
.deck-stage.few { justify-content: center; }
.screen .deck-stage .btn.flow-card { position: relative; overflow: visible; flex: none; scroll-margin-inline: 64px; margin: 0; padding: 0; border: 0; gap: 0; min-height: 0; background: transparent; box-shadow: none; --tc: var(--tct); touch-action: pan-x; }
.screen .deck-stage .btn.flow-card:is(:hover, .focus, :focus-visible):not(:disabled):not(.dim) { transform: none; outline: none; background: transparent; box-shadow: none; border: 0; }
/* a tighter shadow: twenty 5em blurs painted at once were the deck's first-paint stall (measured 2026-09-14) */
.flow-card .tcard, .flow-card .tc-blank { --tc: var(--tct); box-shadow: 0 1.2em 2.2em #000c, 0 0 0 1px #000; }
.flow-card:is(.focus, :focus-visible) .tcard, .flow-card:is(.focus, :focus-visible) .tc-blank { box-shadow: 0 0 0 2px var(--ink), 0 2em 5em #000d; }
.flow-card.unusable .tcard { filter: grayscale(.5) brightness(.6); }
.flow-card.unusable .flow-tag { color: var(--red); }
.flow-card.blank .tc-blank { opacity: .85; }
.flow-card .flow-tag { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); white-space: nowrap; font: 700 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); pointer-events: none; }
.flow-card.blank .flow-tag { color: #4a566b; }
/* the card under the pointer tilts toward it and catches the light */
@media (hover: hover) {
  .flow-card:not(.blank):not(.unusable) .tcard { transition: transform .12s ease-out, filter .2s; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .flow-card:not(.blank):not(.unusable):hover .tcard { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) scale(1.05); box-shadow: 0 3em 6em #000d, 0 0 0 1px #000; }
  .flow-card:hover .tcard::after { background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), #ffffff2e, #ffffff08 35%, transparent 60%); }
}
.deck-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #6b7a90; font: 700 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; }
.screen .deck-arrow { position: absolute; top: calc(50% - 9px); z-index: 200; transform: translateY(-50%); width: 44px; min-height: 64px; margin: 0; padding: 0 0 4px; font: 700 34px var(--display); line-height: 1; color: var(--ink); background: #0b111ccc; border-color: #1f2f40; }
.screen .deck-arrow.prev { left: 6px; } .screen .deck-arrow.next { right: 6px; }
.screen .deck-arrow:hover:not(:disabled), .screen .deck-arrow:is(.focus, :focus-visible) { transform: translateY(-50%); }
.screen .deck-arrow:disabled { opacity: .2; }
/* a blank: a card-shaped nothing, no colour, no face */
.tc-blank { --tc: var(--tct); font-size: var(--tc); width: 75em; height: 105em; border-radius: 3.4em; border: 1px dashed #2b3a4d; background: #0a0d16;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; color: #4a566b; }
.tc-blank-num { font: 700 2.6em var(--display); letter-spacing: .12em; }
.tc-blank-note { font: 700 1.4em var(--mono); letter-spacing: .28em; text-transform: uppercase; }
/* the hand: a fan along the bottom; the front of the hand is the left */
.deck-hand { position: relative; width: min(1220px, 100%); height: 240px; flex: none; border-radius: 12px;
  background: linear-gradient(180deg, transparent, #0b111ccc 40%, #0b111c); box-shadow: inset 0 1px 0 #1f2f40; transition: box-shadow .15s, background .15s; }
.deck-hand.drop { box-shadow: inset 0 0 0 2px var(--cyan), inset 0 0 40px #54e6f522; }
.deck-hand.drop.swap { box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 40px #f5c54222; }
.deck-status { position: absolute; left: 0; right: 0; bottom: 9px; z-index: 70; text-shadow: 0 1px 2px #000, 0 0 8px #000; text-align: center; font: 700 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); pointer-events: none; }
.deck-hand-meta { position: absolute; bottom: 2px; left: 8px; right: 8px; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 14px; }
.deck-hand-meta .deck-status { position: static; font: 500 11px/1.3 var(--body); letter-spacing: 0; text-transform: none; }
.screen .btn.deck-awakening-status { min-height: 36px; padding: 4px 8px; margin: 0; border: 0; background: none; box-shadow: none; color: var(--c); font: 600 13px/1.25 var(--body); letter-spacing: 0; text-transform: none; transform: none; }
.deck-phone .deck-hand-meta { position: static; flex: none; gap: 0 8px; }
.deck-fan { position: absolute; inset: 0; --tc: var(--tcf); }
.screen .deck-fan .btn.fan-card, .screen .deck-fan .btn.fan-locked, .screen .deck-fan .fan-empty { position: absolute; left: 0; bottom: 48px; transform-origin: 50% 100%; transform: translateX(var(--fx, 0px)) translateY(var(--fy, 0px)) rotate(var(--fr, 0deg)); transition: transform .18s ease-out; }
/* the button itself draws nothing: its own inset highlight showed as a white sliver at the card's rounded corners */
.screen .deck-fan .fan-card, .screen .deck-fan .fan-locked { --tc: var(--tcf); padding: 0; border: 0; gap: 0; background: transparent; box-shadow: none; overflow: visible; opacity: 1; min-height: 0; }
.deck-fan .fan-card .tcard { --tc: var(--tcf); box-shadow: 0 1.2em 2.2em #000c, 0 0 0 1px #000; }
.screen .deck-fan .btn.fan-card:is(:hover, .focus, :focus-visible):not(:disabled):not(.dim), .screen .deck-fan .btn.fan-locked:is(:hover, .focus, :focus-visible):not(:disabled):not(.dim) { transform: translateX(var(--fx, 0px)) translateY(calc(var(--fy, 0px) - 26px)) rotate(var(--fr, 0deg)); z-index: 60 !important; outline: none; background: transparent; box-shadow: none; border: 0; }
.screen .deck-fan .btn.fan-card.dragging { transform: translateX(var(--fx, 0px)) translateY(var(--fy, 0px)) rotate(var(--fr, 0deg)); }
/* a card carried in from the row lifts the card it would swap with, and that card glows */
.screen .deck-fan .btn.fan-card.swap-target { transform: translateX(var(--fx, 0px)) translateY(calc(var(--fy, 0px) - 26px)) rotate(var(--fr, 0deg)); z-index: 60 !important; }
.deck-fan .fan-card.swap-target .tcard { animation: swapGlow .7s ease-in-out infinite alternate; }
@keyframes swapGlow { from { box-shadow: 0 0 0 3px var(--gold), 0 0 18px 4px #ffd23f77, 0 2em 4em #000c; } to { box-shadow: 0 0 0 4px #fff2b0, 0 0 46px 16px #ffd23fcc, 0 2em 4em #000c; } }
.deck-fan .fan-card.arrive .tcard { animation: cardArrive .3s ease-out; }
@keyframes cardArrive { from { transform: translateY(-40px) scale(.6); opacity: 0; } }
.deck-fan .fan-card:is(.focus, :focus-visible) .tcard { box-shadow: 0 0 0 2px var(--c), 0 0 24px color-mix(in srgb, var(--c) 55%, transparent), 0 2em 4em #000c; }
.deck-fan .fan-empty { --tc: var(--tcf); font-size: var(--tc); width: 75em; height: 105em; border-radius: 3.4em; border: 1px dashed #2b3a4d; display: grid; place-items: center; color: #3f4a5c; }
.deck-fan .fan-empty span { font: 700 3em var(--display); }
/* the next slot: locked until its rank is earned and its price paid */
.screen .deck-fan .btn.fan-locked:disabled { opacity: .55; }
.deck-fan .tc-lock { --tc: var(--tcf); border-style: dashed; border-color: #5a4a1e; color: #a08a4a; gap: .8em; }
.deck-fan .tc-lock svg { width: 16em; height: 16em; }
.deck-fan .tc-lock .tc-blank-num { font-size: 2.2em; color: #c9b06a; }
.deck-fan .tc-lock .tc-blank-note { color: var(--gold); }
.screen .deck-fan .btn.fan-locked:not(:disabled) .tc-lock { border-color: #8a6a1a; box-shadow: 0 0 18px #ffd23f22, inset 0 0 30px #ffd23f0c; }
.tcard img { -webkit-user-drag: none; user-select: none; }
.deck-fan .fan-card { touch-action: none; }
.hand-slot.dragging, .flow-card.dragging { opacity: .25; }
.deck-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg) scale(1.05); box-shadow: 0 3em 6em #000e, 0 0 0 1px #000; }
.screen.deck-dragging { cursor: grabbing; user-select: none; }
.screen.deck-dragging .hand-slot, .screen.deck-dragging .flow-card { cursor: grabbing; }
@media (hover: hover) { .flow-card.free, .fan-card { cursor: grab; } }
.pullreveal { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; gap: 16px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding-block: 16px; padding: calc(16px + var(--sat)) calc(16px + max(var(--sal), var(--sar))) calc(16px + var(--sab)); background: rgba(5,6,13,.93); pointer-events: auto; }
.pullreveal > * { flex-shrink: 0; max-width: 100%; }
.pullreveal > :first-child { margin-top: auto; }
.pullreveal > :last-child { margin-bottom: auto; }
.pullreveal .kicker { color: var(--gold); letter-spacing: .4em; }
.pullreveal-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; --tc: 3.2px; }
.pullreveal-cards .tc-flip { --tc: 3.2px; }
.pullreveal-cards .tc-blank { --tc: inherit; }
.cardzoom .tcard { animation: cardArrive .28s ease-out; }
/* a card that is in the hand is live: its edges glow */
.cardzoom.inhand .tcard { animation: cardArrive .28s ease-out, liveGlow 1.5s ease-in-out .28s infinite alternate; }
@keyframes liveGlow { from { box-shadow: 0 0 0 3px var(--c), 0 0 30px 8px color-mix(in srgb, var(--c) 55%, transparent), 0 2em 5em #000c; } to { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 70%, #fff), 0 0 70px 26px color-mix(in srgb, var(--c) 70%, transparent), 0 2em 5em #000c; } }
.cardzoom.inhand .kicker { color: var(--c); }
/* AT RISK: a locked slot is safe, a staked card says so, the Lost & Found rides at the front of the row */
.deck-fan .fan-safe { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 3px 9px; border-radius: 999px; background: var(--gold); color: #2a1d00; font: 700 9px var(--mono); letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 2px 8px #000a; pointer-events: none; }
.screen .btn.fan-protect { min-height: 44px; margin: 0; padding: 4px 12px; font-size: 11px; border-color: #8a6a1a; color: var(--gold); }
.fan-protect[hidden] { display: none; }
.flow-card.lost .tcard { filter: grayscale(.7) brightness(.55); }
.flow-card.lost .flow-tag { color: var(--red); }
.cardzoom.lost .kicker { color: var(--red); }
/* Recipe details belong in the inspection, never on every card face. */
.awakening-recipe { width: min(100%, 340px); text-align: left; font: 400 15px/1.35 var(--body); }
.awakening-name { margin: 0 0 5px; color: var(--c); font: 600 21px/1.2 var(--display); }
.awakening-progress { margin: 0 0 8px; color: #d9f8ee; }
.awakening-requirements { display: flex; flex-wrap: wrap; gap: 5px 16px; padding: 0; margin: 0 0 10px; list-style: none; }
.awakening-requirements .met { color: #91efcf; }
.awakening-requirements .missing { color: #dfd6bf; }
.awakening-description { margin: 0 0 8px; }
.awakening-limits { margin: 0; color: #b6b8c8; font-size: 12px; }
.cardzoom.awakening-inspection .tcard, .cardzoom.awakening-inspection .tc-blank { --tc: clamp(1.6px, calc((100dvh - 380px) / 105), 4px) !important; }
@media (min-width: 640px) {
  .cardzoom.awakening-inspection, .deck-phone .cardzoom.awakening-inspection { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 340px); grid-template-rows: auto auto auto auto;
    align-content: center; justify-content: center; align-items: center; gap: 12px 28px; }
  .cardzoom.awakening-inspection > * { margin: 0; }
  .cardzoom.awakening-inspection > .pullreveal-cards, .deck-phone .cardzoom.awakening-inspection > .pullreveal-cards { grid-column: 1; grid-row: 1 / 5; }
  .cardzoom.awakening-inspection > .kicker, .deck-phone .cardzoom.awakening-inspection > .kicker { grid-column: 2; grid-row: 1; letter-spacing: .08em; }
  .cardzoom.awakening-inspection > .awakening-recipe { grid-column: 2; grid-row: 2; }
  .cardzoom.awakening-inspection > .row, .deck-phone .cardzoom.awakening-inspection > .row { grid-column: 2; grid-row: 3; flex-wrap: wrap; }
  .cardzoom.awakening-inspection > .deck-order-actions, .deck-phone .cardzoom.awakening-inspection > .deck-order-actions { grid-column: 2; grid-row: 4; }
  .cardzoom.awakening-inspection .tcard, .cardzoom.awakening-inspection .tc-blank { --tc: clamp(1.6px, calc((100dvh - 92px) / 105), 7px) !important; }
}
/* Compact touch screens have one card surface at a time. Desktop/tablet
   selectors above retain the original carousel, fan and drag treatment. */
#ui > .screen.screen-deck.deck-phone {
  --menu-gutter: calc(12px + max(var(--sal), var(--sar)));
  gap: 0; overflow: hidden; padding-bottom: calc(8px + var(--sab));
}
.screen-deck.deck-phone::before, .screen-deck.deck-phone > .flexspacer { display: none; }
.screen.screen-deck.deck-phone > .screenhead {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px 8px; min-height: 0; padding-block: calc(8px + var(--sat)) 8px;
}
.screen-deck.deck-phone > .screenhead .heading { grid-area: 1 / 1; font-size: 22px; }
.screen-deck.deck-phone > .screenhead .heading::before { display: none; }
.screen-deck.deck-phone > .screenhead .screenclose { grid-area: 1 / 2; width: 44px; height: 44px; min-height: 44px; }
.screen-deck.deck-phone .deck-bar { display: flex; grid-area: 2 / 1 / 3 / -1; gap: 8px; flex-wrap: nowrap; width: 100%; justify-content: space-between; }
.screen-deck.deck-phone .deck-crew { display: flex; gap: 5px; min-width: 0; }
.screen-deck.deck-phone .crew-btn { width: 44px; min-height: 44px; padding: 2px; transform: none; }
.screen-deck.deck-phone .crew-btn img { width: 34px; height: 34px; }
.screen-deck.deck-phone .crew-btn .crew-name { display: none; }
.screen-deck.deck-phone .deck-coins { font: 600 13px/1.2 var(--body); letter-spacing: .02em; white-space: nowrap; }
.deck-phone .deck-views { display: flex; width: 100%; flex: none; border-bottom: 1px solid #60728755; padding: 4px 0; gap: 6px; }
.screen.deck-phone .btn.deck-view { flex: 1; min-height: 44px; margin: 0; padding: 8px 10px; gap: 8px;
  font: 700 16px/1.2 var(--display); letter-spacing: 0; text-transform: none;
  border: 1px solid transparent; border-radius: 3px; box-shadow: none; background: transparent; transform: none; color: #9aabbc; }
.screen.deck-phone .btn.deck-view[aria-selected="true"] { color: #fff0c6; border-color: #d9b668; background: #d5a84615; box-shadow: inset 0 -2px #ffd885; }
.screen.deck-phone .btn.deck-view small { font: 500 12px/1 var(--body); color: inherit; letter-spacing: 0; }
.deck-phone [hidden] { display: none !important; }
.deck-phone .deck-album, .deck-phone .deck-hand { flex: 1 1 0; min-height: 0; width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; background: none; }
.deck-phone .deck-flow { position: absolute; inset: 0; display: block; overflow: hidden auto;
  mask-image: none; -webkit-mask-image: none; scroll-padding: 12px; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; }
.deck-phone .deck-stage, .deck-phone .deck-fan { display: grid; grid-template-columns: repeat(var(--deck-columns, 2), minmax(0, 1fr));
  grid-auto-rows: max-content; align-content: start; align-items: start; justify-items: center; gap: 20px 12px; padding: 12px; width: 100%; min-width: 0; min-height: 0; box-sizing: border-box; }
.screen.deck-phone .deck-stage .btn.flow-card { display: flex; flex-direction: column; gap: 8px; scroll-margin: 10px; touch-action: pan-y; }
.deck-phone .flow-card .flow-tag { position: static; transform: none; white-space: normal; max-width: calc(var(--tct) * 75);
  font: 500 11px/1.25 var(--body); letter-spacing: 0; text-transform: none; }
.deck-phone .deck-arrow { display: none; }
.deck-phone .deck-hand { display: flex; flex-direction: column; }
.deck-phone .deck-fan { position: relative; inset: auto; flex: 1 1 0; overflow: hidden auto; scroll-padding: 12px; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; }
.screen.deck-phone .deck-fan .btn.fan-card, .screen.deck-phone .deck-fan .btn.fan-locked, .screen.deck-phone .deck-fan .fan-empty {
  position: relative; inset: auto; transform: none; transition: none; width: calc(var(--tcf) * 75); max-width: 100%;
  margin: 0; padding: 0; touch-action: pan-y; scroll-margin: 12px; cursor: pointer;
}
.screen.deck-phone .deck-fan .btn.fan-card { display: flex; flex-direction: column; gap: 7px; }
.screen.deck-phone .deck-fan .btn.fan-card:is(:hover, .focus, :focus-visible):not(:disabled):not(.dim),
.screen.deck-phone .deck-fan .btn.fan-locked:is(:hover, .focus, :focus-visible):not(:disabled):not(.dim) { transform: none; }
.deck-phone .deck-position { display: flex; justify-content: space-between; align-items: center; min-height: 18px; width: 100%;
  color: #a5b6c8; font: 600 11px/1.2 var(--body); letter-spacing: 0; text-transform: none; }
.deck-phone .deck-fan .fan-safe { position: static; transform: none; padding: 2px 5px; font: 600 10px/1 var(--body); letter-spacing: 0; text-transform: none; box-shadow: none; }
.deck-phone .deck-card-name { color: #e5edf4; font: 600 12px/1.2 var(--body); letter-spacing: 0; text-transform: none; }
.screen.deck-phone .deck-fan .fan-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: calc(var(--tcf) * 105 + 45px); min-height: 140px; background: #0e192533; border: 1px dashed #496079; box-shadow: none; border-radius: 5px; color: #b4c7d9; }
.screen.deck-phone .deck-fan .fan-empty span { font: 600 13px/1.2 var(--body); }
.screen.deck-phone .deck-fan .fan-empty small { font: 500 12px/1.2 var(--body); color: #ffe1a0; }
.screen.deck-phone .deck-fan .fan-locked { padding-top: 25px; }
.deck-phone .deck-status { position: static; flex: none; padding: 6px 0; font: 500 11px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: #a8bacb; }
.deck-phone .deck-phone-tools { width: 100%; flex: none; border-top: 1px solid #60728755; padding: 8px 0 0; }
.deck-phone .deck-collection-tools, .deck-phone .deck-hand-tools { display: flex; gap: 10px; justify-content: center; }
.screen.deck-phone .deck-phone-tools .btn { flex: 1; min-height: 46px; margin: 0; padding: 5px 12px; gap: 3px; font-size: 13px; letter-spacing: .01em; line-height: 1.2; transform: none; }
.screen.deck-phone .deck-phone-tools .btn small { display: block; font: 500 11px/1 var(--body); letter-spacing: 0; }
.screen.deck-phone .deck-phone-tools .deck-pull { box-shadow: 0 2px #8a5d05; border-radius: 4px; }
.screen.deck-phone .deck-phone-tools .deck-pull::after { display: none; }
.deck-phone .deck-exchange { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; flex: none; color: #ffe1a0; font: 600 13px/1.3 var(--body); }
.screen.deck-phone .deck-exchange .btn { flex: none; min-height: 44px; padding: 6px 10px; margin: 0; font: 600 12px/1.2 var(--body); letter-spacing: 0; transform: none; }
.deck-phone .cardzoom { gap: 12px; }
.deck-phone .cardzoom .kicker { letter-spacing: .08em; font: 600 12px/1.3 var(--body); text-align: center; }
.deck-phone .cardzoom .btn, .deck-phone .deck-swap-confirm .btn { min-height: 44px; padding: 8px 14px; font: 700 15px/1.2 var(--display); letter-spacing: 0; transform: none; }
.deck-phone .deck-order-actions { display: flex; justify-content: center; gap: 8px; }
.deck-phone .deck-order-actions .btn { font: 600 12px/1.2 var(--body); }
.deck-phone .deck-swap-title { font: 700 22px/1.2 var(--display); letter-spacing: 0; text-transform: none; margin: 0; text-align: center; }
.deck-phone .deck-compare { display: flex; gap: 14px; justify-content: center; }
.deck-phone .deck-compare-card { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.deck-phone .deck-compare-label { color: #c4d5e4; font: 600 11px/1.2 var(--body); }
.screen.deck-phone .btn:is(:focus-visible, .focus) { outline: 2px solid #c9efff; outline-offset: 2px; }
.deck-phone .flow-card .tcard, .deck-phone .fan-card .tcard { animation: none; }

/* One preparation home; content scrolls beneath the shared compact tabs. */
#ui > .screen.screen-clubhouse { height: 100dvh; min-height: 0; overflow: hidden; gap: 0; padding-bottom: calc(12px + var(--sab)); }
.screen-clubhouse > .flexspacer, .screen-clubhouse::before { display: none; }
.clubhouse-tabs { display: flex; width: min(1220px, 100%); flex: none; align-self: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid #52657955; }
.screen .clubhouse-tab { position: relative; flex: 0 1 150px; min-height: 44px; padding: 8px 18px; margin: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; box-shadow: none; color: #93a8b9; font: 700 15px/1.1 var(--display); letter-spacing: .015em; }
.screen .clubhouse-tab[aria-selected="true"] { color: #eef8ff; border-bottom-color: var(--cyan); background: #54e6f50b; }
.screen .clubhouse-tab.has-ready::after { content: ''; width: 5px; height: 5px; margin-left: 7px; border-radius: 50%; background: #ffd881; box-shadow: 0 0 8px #ffc85b66; }
.screen .clubhouse-tab:is(:focus-visible, .focus) { outline: 2px solid #c5f6ff; outline-offset: -3px; box-shadow: none; }
.screen .screenhead .club-coins { font: 600 14px/1.2 var(--body); letter-spacing: .015em; color: #ffe3a1; white-space: nowrap; }
.clubhouse-body { width: min(1100px, 100%); min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; padding: 22px 4px 14px; text-align: left; }
.club-section-title { font: 700 clamp(19px, 2.3vw, 25px)/1.2 var(--display); letter-spacing: .01em; margin: 0 0 7px; color: #eef8ff; }
.club-note { font: 500 13px/1.5 var(--body); color: #aec0ce; margin: 0 0 14px; letter-spacing: .01em; text-transform: none; }
.club-capacity { margin-bottom: 24px; }
.club-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; width: 100%; }
.screen .btn.club-slot { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; justify-items: start; min-width: 0; min-height: 86px; gap: 4px 9px; margin: 0; padding: 12px; text-align: left; border-color: #647388; background: linear-gradient(150deg, #152131, #0b1421); box-shadow: 0 3px 0 #03070c; }
.club-slot-mark { grid-row: 1 / 3; align-self: center; font: 400 26px/1 var(--body); color: #a9bdcf; }
.club-slot-label { font: 700 15px/1.15 var(--display); letter-spacing: .01em; }
.screen .club-slot .club-slot-state { font: 500 12px/1.3 var(--body); letter-spacing: 0; color: #ffe0a1; text-wrap: balance; }
.screen .btn.club-slot.unlocked { opacity: 1; border-color: #54e6f53b; background: #10242b; color: #c5edf0; box-shadow: none; }
.screen .club-slot.unlocked .club-slot-mark { color: #7adecf; }
.screen .club-slot.unlocked .club-slot-state { color: #96b7b9; }
.screen .btn.club-slot.temporary { border-style: dashed; border-color: #dbb564; }
.club-temporary-note { margin: 12px 0 0; color: #dfc995; }
.club-heroes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.screen .btn.club-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; height: clamp(210px, 29vh, 310px); min-height: 170px; min-width: 0; margin: 0; padding: 16px; overflow: hidden; text-align: left; border-color: color-mix(in srgb, var(--c) 42%, #27384b); border-bottom: 3px solid var(--c); background: #101725; box-shadow: 0 4px 0 #03070c; }
.club-hero-art { position: absolute; z-index: -2; width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: center 20%; pointer-events: none; }
.club-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #060b12 2%, #060b12e0 20%, #060b1200 75%); pointer-events: none; }
.club-hero-copy { display: flex; flex-direction: column; align-self: stretch; gap: 4px; min-width: 0; }
.club-hero-name { font: 700 clamp(20px, 2.6vw, 32px)/1.05 var(--display); letter-spacing: .01em; color: #f2f8ff; }
.club-hero-role { font: 500 12px/1.3 var(--body); color: #bdcbd6; letter-spacing: .015em; }
.club-hero-action { margin-top: 7px; font: 600 12px/1.3 var(--body); color: var(--c); letter-spacing: 0; }
.club-hero.locked .club-hero-art { filter: saturate(.35) brightness(.7); }
.club-hero.locked .club-hero-action { color: #ffe2a0; }
.club-pulls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.screen .club-pulls .btn { flex-direction: column; align-items: flex-start; text-align: left; min-height: 126px; gap: 12px; margin: 0; padding: 20px; font: 700 22px/1.2 var(--display); letter-spacing: .015em; background: linear-gradient(145deg, #17293a, #0c1522); border-color: #405872; box-shadow: 0 4px #03070c; }
.screen .club-pulls .btn small { color: #d8bb86; font: 500 13px/1.3 var(--body); letter-spacing: 0; }
.screen .club-pulls .club-free-pull.ready { color: #ffebb8; border-color: #cead66; background: linear-gradient(140deg, #3c321b, #1d1c1b); }
.screen .club-pulls .btn:disabled { opacity: .65; color: #b7c4d0; box-shadow: none; }
.club-patron { margin-top: 30px; border-top: 1px solid #53687d55; padding-top: 22px; }
.club-patron .patron { max-width: none; width: 100%; align-items: stretch; text-align: left; }
.club-patron .patron .hint { text-align: left; margin: 0; }
.club-patron .patronlist { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
.club-patron .patronlist .btn { min-height: 54px; margin: 0; font-size: 15px; }
.club-confirm-panel { width: min(450px, 100%); padding: 24px; background: #0b1420; border: 1px solid #678399; box-shadow: 0 20px 70px #0009; text-align: left; }
.club-confirm-title { font: 700 25px/1.2 var(--display); margin: 0 0 14px; letter-spacing: 0; }
.club-confirm-panel .row { justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.screen .club-confirm-panel .btn { min-height: 44px; margin: 0; font-size: 14px; letter-spacing: 0; }
.screen .club-confirm-panel .btn small { font: 500 12px var(--body); letter-spacing: 0; }
.club-reveal .kicker { font: 600 16px var(--body); letter-spacing: .03em; }
.club-reveal .row { flex-wrap: wrap; justify-content: center; }
.screen-roster.roster-chooser.has-crew-capacity { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.roster-capacity { width: min(1400px, 100%); min-width: 0; }
.screen .roster-capacity .club-slot { min-height: 48px; padding: 6px 10px; gap: 2px 7px; }
.roster-capacity .club-slot-mark { font-size: 18px; }
.roster-capacity .club-slot-label { font-size: 11px; }
.screen .roster-capacity .club-slot-state { font-size: 10px; }
.screen-deck.clubhouse-screen > .clubhouse-tabs { padding-block: 2px; }
@media (max-width: 680px) {
  .clubhouse-tabs { gap: 3px; }
  .screen .clubhouse-tab { flex: 1; padding-inline: 8px; font-size: 14px; }
  .screen.screen-clubhouse > .screenhead { flex-wrap: nowrap; gap: 8px; }
  .screen.screen-clubhouse > .screenhead .heading { font-size: clamp(17px, 4.6vw, 25px); }
  .screen .screenhead .club-coins { font-size: 12px; }
  .clubhouse-body { padding-top: 16px; }
  .club-slots { gap: 5px; }
  .screen .btn.club-slot { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 80px; gap: 5px; padding: 8px 3px; text-align: center; }
  .club-slot-mark { display: none; }
  .club-slot-label { font-size: 11px; }
  .screen .club-slot .club-slot-state { font-size: 10px; }
  .club-heroes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .screen .btn.club-hero { height: 190px; min-height: 170px; padding: 12px; }
  .club-hero-name { font-size: 24px; }
  .club-hero-role, .club-hero-action { font-size: 11px; }
  .club-pulls { grid-template-columns: 1fr; gap: 12px; margin: 16px 0; }
  .screen .club-pulls .btn { min-height: 88px; font-size: 20px; gap: 7px; padding: 16px; }
  .club-patron { margin-top: 24px; }
  .club-patron .patronlist { display: grid; grid-template-columns: minmax(0, 1fr); }
  .club-confirm-panel { padding: 20px; }
  .club-confirm-title { font-size: 22px; }
  .screen .roster-capacity .club-slot { min-height: 50px; padding: 4px 2px; gap: 3px; }
  .screen .roster-capacity .club-slot-state { font-size: 9px; }
}
@media (max-height: 500px) and (min-width: 681px) {
  .clubhouse-body { padding-top: 12px; }
  .club-capacity { margin-bottom: 18px; }
  .screen .btn.club-slot { min-height: 62px; padding-block: 8px; }
  .screen .btn.club-hero { height: 175px; min-height: 150px; padding: 10px; }
  .screen .club-pulls .btn { min-height: 96px; padding: 15px; font-size: 19px; }
  .screen .roster-capacity .club-slot { min-height: 44px; padding-block: 4px; }
}
@media (orientation: landscape) {
  .screen.screen-deck.deck-phone > .screenhead { grid-template-columns: auto minmax(0, 1fr) 44px; padding-block: calc(6px + var(--sat)) 6px; }
  .screen-deck.deck-phone > .screenhead .heading { font-size: 20px; }
  .screen-deck.deck-phone > .screenhead .screenclose { grid-area: 1 / 3; }
  .screen-deck.deck-phone .deck-bar { grid-area: 1 / 2; justify-content: flex-end; }
  .deck-phone .deck-views { padding-block: 2px; }
  .screen.deck-phone .btn.deck-view { font-size: 14px; }
  .deck-phone .deck-phone-tools { padding-top: 5px; }
  .deck-phone .cardzoom { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 270px); grid-template-rows: auto auto auto;
    align-content: center; justify-content: center; align-items: center; gap: 12px 24px; }
  .deck-phone .cardzoom > * { margin: 0; }
  .deck-phone .cardzoom > .pullreveal-cards { grid-column: 1; grid-row: 1 / 4; }
  .deck-phone .cardzoom > .kicker { grid-column: 2; grid-row: 1; }
  .deck-phone .cardzoom > .row { grid-column: 2; grid-row: 2; }
  .deck-phone .cardzoom > .deck-order-actions { grid-column: 2; grid-row: 3; flex-wrap: wrap; }
}
.hand-slot.at-stake .hand-tag { color: var(--red); }
.hand-slot.at-stake .tcard { box-shadow: 0 0 0 2px var(--red), 0 0 18px #ff3b4a66, 0 2em 4em #000c; }
.hand-slot.safe .hand-tag { color: var(--gold); }
.hand-slot.found-card { border-color: var(--gold); box-shadow: 0 0 20px #ffd16b24; }
.hand-slot.found-card .hand-tag { color: var(--gold); font-family: var(--body); letter-spacing: .04em; text-transform: none; }
.boss-card-summary { margin: 12px 0; padding: 10px 0; border-block: 1px solid #ffd16b40; text-align: left; }
.boss-card-receipt { display: flex; align-items: center; gap: 12px; }
.boss-card-receipt + .boss-card-receipt { margin-top: 8px; }
.boss-card-art { flex: none; width: 48px; height: 62px; object-fit: cover; object-position: 33% center; border: 1px solid #ffd16b99; border-radius: 4px; }
.boss-card-art[data-card-art="painting"] { object-position: center; }
.boss-card-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.boss-card-kicker { color: var(--gold); font: 600 10px/1.2 var(--body); letter-spacing: .06em; }
.boss-card-name { color: var(--ink); font: 700 19px/1.1 var(--display); letter-spacing: 0; }
.boss-card-state { color: var(--gold); font: 600 12px/1.3 var(--body); }
.boss-card-note { margin: 8px 0 0; color: var(--ink-dim); font: 500 12px/1.4 var(--body); }
.boss-card-summary.lost { border-color: #ff3b4a50; }
.boss-card-summary.lost .boss-card-art { filter: saturate(.3); border-color: #ff3b4a70; }
.boss-card-summary.lost .boss-card-state { color: var(--red); }
/* A found card uses the existing announcement lane and cached boss still. */
.banner.notice.notice--card { --notice-color: var(--gold); --display: "Broaven", "Bahnschrift", "Arial Narrow", sans-serif; }
.banner.notice--card .notice-body { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.banner.notice--card .notice-copy { text-align: left; }
.banner.notice--card .t { font-size: clamp(20px, 3.2vw, 30px); letter-spacing: 0; }
.banner.notice--card .notice-kicker { font-family: var(--body); letter-spacing: .06em; text-transform: none; }
.banner.notice--card .s { font-family: var(--body); font-size: 11px; letter-spacing: 0; text-transform: none; }
.banner.notice--card .boss-card-art { width: 48px; height: 62px; }
.result-lost { margin: 8px 0; padding: 10px 12px; border: 1px solid #5a2028; border-radius: 10px; background: #1a0d12; }
.result-lost .kicker { color: var(--red); letter-spacing: .3em; padding: 0; }
.result-lost-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 6px; }
.result-lost-card { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.result-lost-card .tcard { --tc: 1.5px; }
.result-lost-note { margin: 0; font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
@media (max-height: 520px) {
  .boss-card-summary { margin-block: 8px; padding-block: 8px; }
  .boss-card-receipt .boss-card-art, .banner.notice--card .boss-card-art { width: 36px; height: 46px; }
  .boss-card-note { font-size: 11px; }
  .screen-hand, .screen-deck { gap: 6px; }
  .hand-slot { padding: 4px; }
  .hand-cards { padding: 6px 8px 8px; gap: 8px; }
  .hand-slot:hover:not(:disabled), .hand-slot:is(.focus, :focus-visible) { transform: translateY(-3px); }
  .hand-note { display: none; }
  .pullreveal-cards, .pullreveal-cards .tc-flip { --tc: 2px; }
  .screen-deck { gap: 6px; }
}
@media (max-width: 640px) { .pullreveal-cards, .pullreveal-cards .tc-flip { --tc: 2.2px; } }
@media (max-width: 640px) { .deck-slot { --tc: 1.85px; } }

/* ---- PRELOAD: the loading card (the arrival splash, before the room is ready) ---- */
.splash.loading { display: flex; align-items: center; justify-content: center; height: auto; min-height: clamp(150px, 30vh, 250px); background: radial-gradient(ellipse at 50% 40%, #121a2c, #05060d 70%); }
/* Flex centers this copy; the arrival banner's translateY(-50%) would lift it twice. */
.splash.loading .splash-copy { position: static; transform: none; opacity: 1; text-align: center; width: min(720px, 100%); max-width: none; padding: clamp(16px, 3vh, 24px) 24px; }
.splash.loading .k { color: var(--cyan); letter-spacing: .12em; font: 700 12px var(--mono); text-transform: none; }
.splash.loading .t { font: 700 clamp(28px, 6vw, 72px)/1.1 var(--display); margin: 10px 0 8px; }
.splash.loading .s { font: 500 13px/1.4 var(--body); letter-spacing: .02em; text-transform: none; color: var(--ink); min-height: 19px; }
.splash.loading .loading-bar { width: min(420px, 100%); height: 4px; margin: 18px auto 0; background: #1a2333; border-radius: 2px; overflow: hidden; }
.splash.loading .loading-bar i { display: block; height: 100%; width: 8%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transition: width .35s ease-out; }

/* ---- MENU MOTION: chapter cuts. The rule strikes, then panels settle.
   Decorative motion never covers the screen or delays access to a control. ---- */
@media (prefers-reduced-motion: no-preference) {
  .screen.entering > .screenhead::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, var(--menu-hot) 0 22%, #fff1da 22% 29%, var(--menu-hot) 29% 48%, transparent 78%);
    transform-origin: left center; animation: chapterRule 280ms cubic-bezier(.16, 1, .3, 1) both; }
  .screen.entering > .screenhead .heading { animation: chapterTitle 200ms cubic-bezier(.22, 1, .36, 1) both; }
  .screen.entering.roster-chooser .card.char, .screen.entering.screen-levelup .card.tech {
    animation: chapterPanel 200ms cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--order) * 28ms); }
  @keyframes chapterRule { from { opacity: 1; transform: scaleX(.06); } 55% { opacity: 1; } to { opacity: 0; transform: scaleX(1); } }
  @keyframes chapterTitle { from { opacity: .55; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
  @keyframes chapterPanel { from { opacity: .55; transform: translateX(16px); } to { opacity: 1; transform: none; } }
  /* the title's wordmark: ink-revealed, then a slow breathing glow on PASS */
  .screen-title .title-mark .mainlogo > span { display: inline-block; animation: inkReveal 700ms var(--ease) both; animation-delay: 260ms; }
  .screen-title .title-mark .mainlogo > span.accent { animation-delay: 420ms; }
  .screen-title .title-mark .mainlogo > span.accent::after { content: ''; }
  @keyframes inkReveal { from { clip-path: inset(0 100% 0 0); transform: translateX(-10px); } to { clip-path: inset(0 0 0 0); transform: none; } }
  .screen-title .title-mark .title-kanji { animation: kanjiIn 1200ms var(--ease) both; }
  @keyframes kanjiIn { from { opacity: 0; transform: translate(-50%, -50%) skewX(-6deg) scale(1.15); } to { opacity: 1; transform: translate(-50%, -50%) skewX(-6deg); } }
  /* A short blade at the edge reinforces the existing physical buttons. */
  .screen :is(.title-actions, .pause-actions, .result-actions) .btn { position: relative; overflow: hidden; }
  .screen :is(.title-actions, .pause-actions, .result-actions) .btn::before { content: ''; position: absolute; left: 5px; top: 18%; bottom: 18%; width: 3px; pointer-events: none;
    background: currentColor; opacity: 0; transform: scaleY(.3); transition: transform 120ms cubic-bezier(.22, 1, .36, 1), opacity 120ms; }
  @media (hover: hover) and (pointer: fine) {
    .screen :is(.title-actions, .pause-actions, .result-actions) .btn:hover:not(:disabled)::before { transform: scaleY(1); opacity: .9; }
  }
  .screen .result-actions .btn:active:not(:disabled) { transform: translateY(2px); }
  .screen.screen-title .btn:active:not(:disabled) { transform: skewX(-7deg) scale(.97); }
  /* the loading card's art drifts; the bar's shine travels */
  .splash.loading .loading-art { animation: roomDrift 14s ease-in-out infinite alternate; }
  @keyframes roomDrift { from { transform: scale(1.06) translate(-1.5%, 0); } to { transform: scale(1.12) translate(1.5%, -2%); } }
  .splash.loading .loading-bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffff99, transparent); transform: translateX(-100%); animation: barShine 1.3s linear infinite; }
  @keyframes barShine { to { transform: translateX(100%); } }
  /* results: the stamp slams in, the portrait drifts */
  .screen-results .result-stamp { animation: stampSlam 520ms cubic-bezier(.2, 1.4, .4, 1) 160ms both; }
  @keyframes stampSlam { from { opacity: 0; transform: rotate(-16deg) scale(2.4); } 70% { opacity: 1; } to { opacity: 1; transform: rotate(-7deg) scale(1); } }
  .screen-results .result-portrait { animation: portraitDrift 16s ease-in-out infinite alternate; }
  /* death: the frozen arena behind the card loses its colour */
  #ui > .screen.screen-death.modal { backdrop-filter: saturate(.25) blur(3px); -webkit-backdrop-filter: saturate(.25) blur(3px); }
  @keyframes portraitDrift { from { transform: scale(1); object-position: 50% 15%; } to { transform: scale(1.05); object-position: 52% 10%; } }
}
/* the title mark sits at the top of the menu, compact; the film keeps the big one */
.screen.screen-title .hero.title-mark { margin-bottom: auto; margin-top: calc(6vh + var(--sat, 0px)); padding-block: 8px; isolation: isolate; }
.screen.screen-title .title-mark .title-kanji { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) skewX(-6deg); font-family: serif; font-weight: 900;
  font-size: clamp(64px, 13vw, 150px); line-height: 1; white-space: nowrap; color: #f2f4ff10; -webkit-text-stroke: 1px #f2f4ff2a; pointer-events: none; user-select: none; z-index: 0; }
.screen.screen-title .title-mark .mainlogo { position: relative; z-index: 1; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0;
  font-size: clamp(40px, min(9vw, 11vh), 96px); line-height: .9; letter-spacing: .04em; filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 18px #ff3b4a33); }
@media (max-height: 500px) { .screen.screen-title .hero.title-mark { margin-top: calc(2vh + var(--sat, 0px)); } .screen.screen-title .title-mark .mainlogo { font-size: clamp(30px, 9vh, 56px); } }
/* the loading card, full frame: the room's art behind a veil, the copy centred */
.splash.loading { position: fixed; inset: 0; top: 0; height: auto; min-height: 0; z-index: 8; background: #070910; overflow: hidden; }
.splash.loading::before, .splash.loading::after { display: none; }
.splash.loading .loading-art { position: absolute; inset: -4%; background-size: cover; background-position: center; filter: blur(6px) saturate(1.05) brightness(1.35); transform: scale(1.08); }
.splash.loading .loading-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #07091010, #0709109a 80%), linear-gradient(180deg, #070910 0, transparent 16%, transparent 84%, #070910 100%); }
.splash.loading .splash-copy, .splash.loading.in .splash-copy { margin: auto; top: auto; left: auto; transform: none; }
.splash.loading .splash-copy { position: relative; z-index: 1; padding: 24px; border-left: 3px solid var(--cyan); background: #07091080; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.splash.loading .t { text-shadow: 0 4px 0 #000, 0 0 30px #54e6f533; }
.splash.loading .loading-bar i { position: relative; overflow: hidden; }

/* ---- Technique decisions and revealed-card foil. Pointer coordinates belong
   to the hovered card, never to the entire UI tree. ---- */
.tc-holo { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    .screen-levelup .card.tech { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 140ms ease-out, box-shadow 160ms; }
    .screen-levelup .card.tech:hover { transform: perspective(900px) translateY(-3px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  }
  .screen.screen-levelup .card.tech.chosen { animation: none; z-index: 2; outline: 2px solid var(--c); outline-offset: 3px; }
  .screen-levelup .card.tech.chosen .tech-art::before { content: ''; position: absolute; inset: -30% -70%; z-index: 2; pointer-events: none;
    background: linear-gradient(118deg, transparent 42%, var(--c) 44%, #fff9e9 45% 46%, transparent 47% 49%, var(--c) 49% 49.5%, transparent 51%);
    animation: techniqueStrike 180ms cubic-bezier(.16, 1, .3, 1) both; }
  .screen-levelup .card.tech.chosen .tech-icon { animation: techniqueImpact 180ms cubic-bezier(.22, 1, .36, 1) both; }
  .screen-levelup .card.tech.chosen .tech-copy { background-color: color-mix(in srgb, var(--c) 9%, var(--menu-surface)); }
  .screen.screen-levelup .card.tech.dropped { animation: techniqueYield 180ms ease-out forwards; pointer-events: none; }
  @keyframes techniqueStrike { from { opacity: 0; transform: translateX(-32%); } 25% { opacity: 1; } to { opacity: 0; transform: translateX(32%); } }
  @keyframes techniqueImpact { from { transform: scale(.96); } 35% { transform: scale(1.1); } to { transform: scale(1.03); } }
  @keyframes techniqueYield { to { opacity: .35; transform: translateY(6px); } }
  /* Fine-pointer foil is restricted to the illustration, not the copy. */
  @media (hover: hover) and (pointer: fine) {
  .pullreveal .tc-flip { position: relative; transform: perspective(1100px) rotateY(calc((var(--px, .5) - .5) * -16deg)) rotateX(calc((var(--py, .5) - .5) * 12deg)); transition: transform 160ms ease-out; transform-style: preserve-3d; }
  }
  .pullreveal .tc-flip.flipped .tcard:not(.back) .tc-holo, .pullreveal .cardzoom-face .tc-holo, .pullreveal .tcard .tc-holo { display: block; }
  .pullreveal .tc-holo { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 3.4em; mix-blend-mode: screen; opacity: .6;
    mask-image: linear-gradient(#000 0 58%, transparent 69%);
    background:
      radial-gradient(circle at calc(var(--px, .5) * 100%) calc(var(--py, .5) * 100%), #ffffff30 0, #ffffff08 18%, transparent 42%),
      linear-gradient(calc(95deg + (var(--px, .5) - .5) * 45deg), transparent 35%, color-mix(in srgb, var(--reveal-color) 30%, transparent) 44%, color-mix(in srgb, var(--reveal-hot) 38%, transparent) 49%, transparent 58%); }
}
/* Printed manga tone stays still while the player's attention moves. */
.screen:not(.screen-title):not(.screen-intro):not(.screen-stages):not(.modal)::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, #e8f1ff12 .65px, transparent .9px) 100% 0 / 5px 5px;
  mask-image: linear-gradient(120deg, transparent 48%, #000 100%); }

/* Quiet architectural survey: independent art layers, unobstructed rooms and
   a fixed detail dock. No perpetual map animations or GPU renderer. */
.screen-stages .bpview { top: calc(84px + var(--sat, 0px)); background: #081326; user-select: none; }
.screen-stages .bpview.sheet-open { touch-action: none; }
.screen-stages .bpplan { isolation: isolate; }
.screen-stages .bppin { pointer-events: none; }
.screen-stages .bpplan .bpsvg { background: none; pointer-events: none; }
.screen-stages .bp-toolbar { position: absolute; z-index: 3; top: 8px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; pointer-events: auto; background: #081326; box-shadow: 0 0 0 12px #081326; }
.screen-stages .bp-room-select { min-width: 0; width: min(290px, 100%); height: 44px; padding: 0 34px 0 12px; border: 1px solid #a9cdec55; border-radius: 3px; color: #c7dff2; background: #0b1b30; font: 13px var(--body); text-overflow: ellipsis; }
.screen-stages .bp-room-select:focus-visible { outline: 2px solid #d7c594; outline-offset: 2px; }
.screen-stages .bp-room-select option { background: #0b1b30; }
.screen-stages .bp-zoom { display: flex; gap: 4px; margin-left: auto; }
.screen-stages .bp-tool.btn { min-width: 44px; min-height: 44px; padding: 6px 10px; font: 15px var(--body); color: #bbd9f0; background: #0b1b30; border: 1px solid #a9cdec45; border-radius: 3px; box-shadow: none; text-shadow: none; transform: none; }
.screen-stages .bp-tool:disabled { opacity: .35; }
.screen-stages .bp-floors { order: 1; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.screen-stages .bp-zoom { order: 2; }
.screen-stages .bp-floor.btn { min-width: 44px; min-height: 44px; padding: 6px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: #9bb5ca; font: 13px var(--body); text-shadow: none; transform: none; flex-shrink: 0; }
.screen-stages .bp-floor.btn[aria-pressed=true] { border-color: #d8c49c; color: #efddb9; background: #d8c49c0a; }
.screen-stages .bp-floor.btn:focus-visible { outline: 1px solid #d8c49c; outline-offset: -3px; }
.screen-stages .bp-floor.btn::before, .screen-stages .bp-floor.btn::after { display: none; }
.screen-stages .bp-room-label { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 3px; max-width: 230px; padding: 7px 11px; border-left: 2px solid #d8c49c; background: #081326f5; color: #dfebf5; pointer-events: none; box-shadow: 0 2px 12px #06102055; }
.screen-stages .bp-room-label[hidden] { display: none; }
.screen-stages .bp-labels-visible .bp-room-label { display: none; }
.screen-stages .bp-room-label strong { font: 14px var(--body); }
.screen-stages .bp-room-label span { font: 11px var(--body); color: #a8bfd1; }
.quiet-blueprint .qb-room-outline { pointer-events: none; fill: transparent; stroke: transparent; stroke-width: 1.5; stroke-linejoin: round; }
.quiet-blueprint .qb-room-outline.is-haunted { fill: #ed627522; stroke: #e38590b3; }
.quiet-blueprint .qb-room-outline.is-cleared { fill: #7cc8a529; stroke: #9fd8bfc9; }
.quiet-blueprint .qb-room-outline.is-sealed { fill: #030c1933; stroke: #a2b6c57a; stroke-dasharray: 4 5; }
.quiet-blueprint .qb-room-outline:is(.is-hovered,.is-selected) { fill: #e6d3a62d; stroke: #f5d899; stroke-width: 2.5; stroke-dasharray: none; }
.screen-stages .bp-caption { position: absolute; bottom: 10px; left: 18px; right: 18px; color: #b5cde0; font: 12px/1.4 var(--body); pointer-events: none; }
.screen-stages .bpview.sheet-open .bp-caption { visibility: hidden; }
.screen-stages .bp-legend { position: absolute; right: 18px; bottom: 10px; display: flex; gap: 18px; pointer-events: none; color: #b5cde0; font: 12px var(--body); }
.screen-stages .bp-key { display: inline-flex; gap: 6px; align-items: center; }
.screen-stages .bp-key::before { content: ''; width: 9px; height: 9px; background: #ed62752b; border: 1px solid #e38590; }
.screen-stages .bp-key.cleared::before { background: #7cc8a540; border-color: #9fd8bf; }
.screen-stages .bp-key.sealed::before { background: transparent; border-color: #a2b6c5; border-style: dashed; }
.screen-stages .bproom.btn { display: block; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #c6e1f7; transform: none; cursor: pointer; opacity: 1; animation: none; text-shadow: none; pointer-events: none; overflow: visible; }
.screen-stages .bp-room-hit { position: absolute; inset: 0; pointer-events: auto; }
.screen-stages .bproom.btn::before, .screen-stages .bproom.btn::after { display: none; }
.screen-stages .bproom.btn:is(:hover, :focus-visible, .focus, [aria-expanded=true]) { border-color: transparent; background: transparent; transform: none; box-shadow: none; outline: none; }
.screen-stages .bproom.btn:is(:focus-visible,.focus) .bphour { outline: 2px solid #fff1ce; outline-offset: 3px; }
.screen-stages .bp-room-copy { position: absolute; display: none; flex-direction: column; gap: 3px; padding: 5px 8px; min-width: 100px; width: max-content; max-width: 180px; border-left: 2px solid #a2b6c5; background: #081326f2; color: #d4e4ef; text-align: left; white-space: nowrap; pointer-events: auto; }
.screen-stages .bp-labels-visible .bp-room-copy { display: flex; }
.screen-stages .bp-room-copy[data-align=end] { transform: translateX(-100%); }
.screen-stages .bproom .bpname { position: static; display: block; padding: 0; margin: 0; font: 600 var(--bp-label-size, 14px)/1.2 var(--body); letter-spacing: 0; text-transform: none; }
.screen-stages .bproom .bpstat { position: static; display: block; padding: 0; margin: 0; font: 10px/1.2 var(--body); letter-spacing: .02em; color: #aabfce; text-transform: none; }
.screen-stages .bproom.haunt .bp-room-copy { border-color: #e38590; }
.screen-stages .bproom.haunt .bpstat { color: #e9acb3; }
.screen-stages .bproom.done .bp-room-copy { border-color: #9fd8bf; }
.screen-stages .bproom.done .bpstat { color: #a8ddc3; }
.screen-stages .bproom.sealed .bp-room-copy { border-left-style: dashed; }
.screen-stages .bproom:is(:hover,:focus-visible,.focus,[aria-expanded=true]) .bp-room-copy { border-color: #f5d899; color: #fff2d2; background: #112034; }
.screen-stages .bproom .bphour { position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; display: grid; place-items: center; width: 25px; height: 22px; transform: translate(-50%,-50%); border: 1px solid #a9cdec8c; border-radius: 2px; background: #081326ed; color: #c5def1; opacity: 1; font: 600 10px var(--body); letter-spacing: .02em; pointer-events: auto; }
.screen-stages .bproom .bphour::before { content: ''; position: absolute; width: 44px; height: 44px; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%,-50%); }
.screen-stages .bproom.haunt .bphour { border-color: #e38590; color: #ffd6dc; }
.screen-stages .bproom.sealed .bphour { border-style: dashed; color: #819cb3; }
.screen-stages .bproom.done .bphour { border-color: #a3c6b3; color: #b5dac1; }
.screen-stages .bproom.tonight .bphour { border-color: #d8c49c; color: #ead6a6; }
.screen-stages .bproom[aria-expanded=true] .bphour { color: #081326; background: #d8c49c; border-color: #d8c49c; }
.screen-stages .bppop { top: var(--bp-map-top, 116px); right: 12px; bottom: auto; width: min(298px, calc(100% - 24px)); max-height: calc(100% - var(--bp-map-top, 116px) - 12px); display: flex; flex-direction: column; overflow: hidden; border-radius: 3px; padding: 0; background: #0b1524fa; filter: none; box-shadow: 0 8px 24px #02071055; touch-action: pan-y; }
.screen-stages .bppop .card.stage { margin: 0; padding: 16px; border: 0; border-top: 2px solid #d8c49c; border-radius: 0; gap: 10px; background: transparent; box-shadow: none; transform: none; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.screen-stages .bppop .card.stage::before, .screen-stages .bppop .card.stage::after { display: none; }
.screen-stages .bp-sheet-head { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.screen-stages .bppop .card.stage .num { position: static; font: 12px var(--body); color: #bdcbd7; }
.screen-stages .bp-challenge { font: 13px/1.45 var(--body); color: #c8ddec; flex-shrink: 0; }
.screen-stages .bp-challenge.lockreq { border: 0; background: none; padding: 0; margin: 0; font: 12px/1.5 var(--body); color: #b8cadb; }
.screen-stages .bp-details { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.screen-stages .bp-details > * { flex-shrink: 0; }
.screen-stages .bp-details[hidden] { display: none; }
.screen-stages .bppop .card.stage .thumb { height: 80px; }
.screen-stages .bppop .card.stage h3 { font-size: 20px; margin: 0; text-transform: none; }
.screen-stages .bppop .card.stage .blurb { font: 12px/1.5 var(--body); }
.screen-stages .bppop .bpactions { position: static; flex-shrink: 0; display: flex; gap: 6px; padding: 0; border: 0; background: none; }
.screen-stages .bppop.details-open .bpactions { background: #0b1524; box-shadow: 0 -8px 0 #0b1524; }
.screen-stages .bppop .bpactions .btn { min-height: 44px; padding: 8px 10px; flex: 1 1 auto; font-size: 12px; }
.screen-stages .bppop .bpactions .bp-details-toggle, .screen-stages .bppop .bpactions .bp-close { flex: 0 0 auto; font: 12px var(--body); color: #bdd0df; background: #0d2131; box-shadow: none; border: 1px solid #a9cdec38; }
.screen-stages .bp-element { opacity: 1; }
.screen-stages .bpplan.art-unavailable .qb-art { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .screen-stages .bpplan.bp-reveal .bp-element { animation: quietBlueprintIn 280ms cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--bp-index, 0) * 35ms); }
@keyframes quietBlueprintIn { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 850px) {
  .screen-stages .bp-floors { order: 2; flex-basis: 100%; }
  .screen-stages .bp-zoom { order: 1; }
}
@media (max-width: 600px) {
  .screen-stages .bp-toolbar { left: 10px; right: 10px; gap: 6px; }
  .screen-stages .bp-room-select { flex: 1 1 0; font-size: 11px; padding-left: 8px; padding-right: 22px; }
  .screen-stages .bp-floors { gap: 2px; }
  .screen-stages .bp-floor.btn { flex: 1 0 auto; padding: 6px 4px; font-size: 12px; }
  .screen-stages .bp-zoom { flex: 0 0 auto; gap: 2px; }
  .screen-stages .bp-caption { left: 12px; right: 12px; font-size: 11px; }
  .screen-stages .bp-caption { display: none; }
  .screen-stages .bp-legend { right: 12px; left: 12px; justify-content: center; font-size: 11px; }
  .screen-stages .sheet-open .bp-legend { display: none; }
  .screen-stages .bppop { top: auto; right: 10px; bottom: 8px; width: calc(100% - 20px); max-height: calc(100% - var(--bp-map-top, 116px) - 100px); }
  .screen-stages .bppop .card.stage { padding: 12px; gap: 8px; }
  .screen-stages .bp-sheet-head { gap: 3px; }
  .screen-stages .bppop .card.stage h3 { font-size: 18px; }
  .screen-stages .bp-room-label { max-width: 200px; padding: 5px 9px; }
  .screen-stages .bppop .card.stage .thumb { height: 64px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .screen-stages .bppop { top: var(--bp-map-top, 116px); right: 8px; bottom: auto; width: min(280px, 40vw); max-height: calc(100% - var(--bp-map-top, 116px) - 8px); }
  .screen-stages .bppop .card.stage { padding: 10px; gap: 6px; }
  .screen-stages .bppop.details-open .bp-challenge { display: none; }
  .screen-stages .bppop .card.stage .thumb, .screen-stages .bppop .card.stage .blurb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .screen-stages .bp-element, .screen-stages .bproom.btn { animation: none !important; transition: none !important; }
}

/* ---- MENU MOTION III (2026-09-19): the coin bump, the blueprint inking
   itself, sliders that fill, roster portraits that lean, stats that tally. ---- */
.slider input[type=range] { background: linear-gradient(90deg, var(--cyan, #54e6f5) var(--v, 50%), rgba(255,255,255,.14) var(--v, 50%)); box-shadow: 0 0 10px #54e6f522; }
.slider input[type=range]::-webkit-slider-thumb { box-shadow: 2px 2px 0 #000, 0 0 12px #54e6f5aa; }
@media (prefers-reduced-motion: no-preference) {
  .deck-coins.bump { animation: coinBump 620ms cubic-bezier(.2, 1.4, .4, 1); }
  @keyframes coinBump { 0% { transform: scale(1); } 30% { transform: scale(1.22); color: #fff; text-shadow: 0 0 18px #ffd23f, 0 0 4px #ffd23f; } 100% { transform: scale(1); } }
  .bpplan.drawing :is(path, rect, line, polyline, polygon, circle, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bpDraw 1100ms ease-out var(--d, 0ms) forwards; }
  .bpplan.drawing text { animation: bpFade 600ms ease-out 900ms both; }
  @keyframes bpDraw { to { stroke-dashoffset: 0; } }
  @keyframes bpFade { from { opacity: 0; } }
}

/* ---- MENU MOTION IV (2026-09-19): the crew on the loading card, the pause
   breath, the purchase flourish. ---- */
.splash.loading .loading-crew { display: flex; justify-content: center; gap: 14px; margin-top: 16px; min-height: 0; }
.splash.loading .loading-face { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; opacity: 0; transform: translateY(14px); }
.splash.loading .loading-face img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; border: 2px solid var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 45%, transparent), 0 3px 0 #000; }
.splash.loading .loading-face figcaption { font: 700 10px var(--mono); letter-spacing: .18em; color: var(--c); }
.splash.loading .loading-crew.in .loading-face { opacity: 1; transform: none; transition: opacity 320ms var(--ease), transform 420ms var(--ease); transition-delay: calc(var(--i) * 90ms); }
@media (prefers-reduced-motion: reduce) { .splash.loading .loading-face { opacity: 1; transform: none; } }
.bought-ring { position: absolute; inset: 0; border: 2px solid #ffd23f; border-radius: inherit; pointer-events: none; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  body.paused .hud .hud-top, body.paused .hud .hud-bottom { opacity: 0; }
  .hud .hud-top, .hud .hud-bottom { transition: opacity 160ms ease-out; }
  .btn.bought { animation: boughtSweep 700ms var(--ease) both; position: relative; overflow: visible; }
  @keyframes boughtSweep { 0% { box-shadow: 0 0 0 0 #ffd23f00; } 20% { transform: scale(1.04); box-shadow: 0 0 0 3px #ffd23f, 0 0 32px 6px #ffd23f88; } 100% { transform: scale(1); box-shadow: 0 0 0 0 #ffd23f00; } }
  .btn.bought .bought-ring { animation: boughtRing 800ms cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes boughtRing { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
}
@media (prefers-reduced-motion: no-preference) {
  .screen-roster .card.char.bought { animation: boughtCard 900ms var(--ease) both; }
  @keyframes boughtCard { 0% { box-shadow: 0 8px 24px #02050b80; } 25% { box-shadow: 0 0 0 3px #ffd23f, 0 0 48px 10px #ffd23f88; transform: scale(1.02); } 100% { box-shadow: 0 8px 24px #02050b80; transform: none; } }
  .screen-roster .card.char .bought-ring { z-index: 5; }
}

/* ---- BOSS BAR DAMAGE GHOST (2026-09-19): a pale bar trails the red fill after a hit ---- */
.track.boss .ghost { position: absolute; inset: 0; transform-origin: left center; background: #ffd9a8; opacity: .85; transition: transform 520ms cubic-bezier(.2, .8, .2, 1) 260ms; }
.track.boss .fill { position: relative; width: 100%; transform-origin: left center; transition: transform 90ms linear; }
@media (prefers-reduced-motion: reduce) { .track.boss .ghost { transition: none; } }

/* Card acquisitions: authored marks emerge across the illustration and edges.
   Every effect finishes; reading a card has no particle or animation loop. */
.card-reveal { position: relative; isolation: isolate; }
.card-reveal > .tcard { z-index: 1; }
.carddrop-art.card-reveal > .tcard { position: relative; }
.card-reveal > .tcard:not(.back) { outline: 1px solid color-mix(in srgb, var(--reveal-color) 65%, transparent); outline-offset: 2px; }
.reveal-fx { position: absolute; top: 0; left: -8%; width: 116%; height: 100%; max-width: none; z-index: 2; pointer-events: none; overflow: hidden;
  --reveal-mask: linear-gradient(transparent 9%, #000 20% 57%, transparent 68%);
  mask-image: var(--reveal-mask); -webkit-mask-image: var(--reveal-mask); }
.reveal-fx g { transform-box: fill-box; transform-origin: center; opacity: 0; }
.reveal-mark, .reveal-echo { fill: none; stroke: var(--reveal-color); stroke-width: 1.1; stroke-linecap: square; stroke-linejoin: bevel; }
.reveal-echo { stroke: var(--reveal-hot); stroke-width: .45; }
.reveal-sparks { fill: var(--reveal-hot); }
.card-reveal[data-reveal="impact"] { --reveal-from: scale(.76) rotate(-8deg); --reveal-to: scale(1.1) rotate(3deg); }
.card-reveal[data-reveal="thread"] { --reveal-from: translateY(12%) scaleY(.7); --reveal-to: translateY(-6%) scaleY(1.08); }
.card-reveal[data-reveal="orbit"] { --reveal-from: rotate(-55deg) scale(.78); --reveal-to: rotate(30deg) scale(1.08); }
.card-reveal[data-reveal="paper"] { --reveal-from: translateY(5%) rotate(-10deg) scale(.78); --reveal-to: translateY(-5%) rotate(10deg) scale(1.08); }
.card-reveal[data-reveal="sweep"] { --reveal-from: rotate(-34deg) scale(.86); --reveal-to: rotate(22deg) scale(1.1); }
.card-reveal[data-reveal="mark"] { --reveal-from: translateX(-8%) scaleX(.8); --reveal-to: translateX(4%) scaleX(1.06); }
.card-reveal[data-reveal="double"] { --reveal-from: translateX(-6%) scale(.94); --reveal-to: translateX(6%) scale(1.02); }
.card-reveal[data-reveal="seal"] { --reveal-from: rotate(12deg) scale(1.18); --reveal-to: rotate(0deg) scale(1); }
.card-reveal[data-reveal="cage"] { --reveal-from: scaleX(.6); --reveal-to: scaleX(1.14); }
.card-reveal[data-reveal="links"] { --reveal-from: rotate(-12deg) scale(.9); --reveal-to: rotate(4deg) scale(1.08); }
.card-reveal[data-reveal="eye"] { --reveal-from: scaleY(.25); --reveal-to: scaleY(1.08); }
.card-reveal[data-reveal="verdict"] { --reveal-from: translateY(-10%) scale(1.1); --reveal-to: translateY(4%) scale(1); }
@media (prefers-reduced-motion: no-preference) {
  .tc-flip.card-reveal:not(.instant) .tcard { transition-duration: 540ms; transition-delay: calc(var(--order, 0) * 90ms); }
  .card-reveal.reveal-play::before { content: ''; position: absolute; inset: 0 -4%; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--reveal-color) 32%, transparent), transparent 70%);
    animation: revealAura var(--reveal-duration) ease-out var(--reveal-delay) both; }
  .reveal-play .reveal-mark, .reveal-play .reveal-echo { animation: revealMark var(--reveal-duration) cubic-bezier(.16, .85, .25, 1) var(--reveal-delay) both; }
  .reveal-play .reveal-echo { animation-delay: calc(var(--reveal-delay) + 55ms); }
  .reveal-play .reveal-sparks { animation: revealSparks var(--reveal-duration) ease-out calc(var(--reveal-delay) + 35ms) both; }
  .reveal-play .tc-holo::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(112deg, transparent 35%, var(--reveal-hot) 49%, transparent 54%);
    animation: revealGlint 380ms ease-out var(--reveal-delay) both; }
  @keyframes revealMark { from { opacity: 0; transform: var(--reveal-from); } 18% { opacity: var(--reveal-strength); } 58% { opacity: var(--reveal-strength); } to { opacity: 0; transform: var(--reveal-to); } }
  @keyframes revealSparks { from { opacity: 0; transform: scale(.86) translateY(4%); } 20% { opacity: var(--reveal-strength); } to { opacity: 0; transform: scale(1.08) translateY(-4%); } }
  @keyframes revealAura { from { opacity: 0; transform: scale(.86); } 30% { opacity: 1; } to { opacity: 0; transform: scale(1.05); } }
  @keyframes revealGlint { from { opacity: 0; transform: translateX(-100%); } 25% { opacity: .35; } to { opacity: 0; transform: translateX(100%); } }
}

/* Map screen shows only the map (Chris, 2026-09-24: "terribly cluttered").
   Tap a room to open its sheet; drag and pinch still pan and zoom. The
   toolbar collapses to zero height, so layout() gives its space to the map. */
.screen-stages .bp-toolbar,
.screen-stages .bp-caption,
.screen-stages .bp-legend,
.screen-stages .bp-room-label { display: none !important; }

/* Recipe hints are separate targets: inspecting never selects a technique. */
.screen-levelup .tech-choice { display: flex; flex-direction: column; min-width: 0; }
.screen-levelup .tech-choice > .card.tech { flex: 1; width: 100%; max-width: none; }
.screen-levelup .btn.tech-evolution {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 10px;
  width: 100%; min-width: 0; min-height: 44px; margin: 7px 0 0; padding: 8px 10px;
  border: 0; border-left: 2px solid #857b62; border-radius: 0; background: #0d151de8;
  color: #eee2c7; box-shadow: none; font: 500 14px/1.25 var(--body); letter-spacing: 0;
  text-align: left; text-transform: none; transform: none; clip-path: none;
}
.screen-levelup .btn.tech-evolution small { color: #bac6d2; font: 400 12px/1.25 var(--body); letter-spacing: 0; }
.screen-levelup .btn.tech-evolution.ready { border-left-color: #ffd970; }
.screen-levelup .btn.tech-evolution.ready small { color: #ffd970; }
.screen-levelup .btn.tech-evolution:is(.focus, :focus-visible) { outline: 2px solid #ffd970; outline-offset: 2px; }
.screen-levelup .btn.tech-evolution:active { transform: scale(.98); }
.screen-levelup .cards[data-picked] .tech-evolution { pointer-events: none; opacity: .45; }
.screen-levelup .evolution-inspection {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: max(12px, var(--sat)) max(16px, var(--sar)) max(12px, var(--sab)) max(16px, var(--sal));
  background: #02060cad; pointer-events: auto; overflow: auto;
}
.evolution-recipe-panel {
  width: min(480px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  margin: auto; padding: 24px; border: 1px solid #53616c; border-top: 2px solid #ffd970;
  background: #0d1520; box-shadow: 0 14px 60px #0008; text-align: left;
}
.evolution-recipe-panel .kicker { color: #dac697; font: 500 12px/1.3 var(--body); letter-spacing: .03em; }
.evolution-recipe-panel h2 { margin: 8px 0 12px; font: 700 clamp(24px, 4vw, 34px)/1.1 var(--display); color: #fff0c9; }
.evolution-recipe-panel p { color: #d1dbe4; font: 400 15px/1.45 var(--body); margin: 12px 0; }
.evolution-requirements { list-style: none; padding: 0; margin: 16px 0; }
.evolution-requirements li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 10px 0; border-bottom: 1px solid #35424f; font: 400 15px/1.35 var(--body); color: #d1dbe4; }
.evolution-requirements b { font-weight: 500; font-variant-numeric: tabular-nums; }
.evolution-requirements .met b { color: #ffd970; }
.evolution-requirements small { grid-column: 1 / -1; font: 400 12px/1.3 var(--body); color: #a8c1d1; }
.evolution-recipe-panel p.evolution-next { color: #aabac9; font-size: 13px; }
.screen .evolution-recipe-panel .btn { width: 100%; min-height: 44px; margin: 8px 0 0; padding: 10px 14px; font-size: 15px; }
.weapon-footer .weapon-awakening-loss { margin: 0 0 10px; padding-left: 10px; border-left: 2px solid #ffd970; color: #c6d0db; font: 400 13px/1.35 var(--body); }
.weapon-awakening-loss strong { color: #ffe1a0; font-weight: 600; }
@media (max-height: 500px) {
  .screen-levelup .btn.tech-evolution { margin-top: 5px; font-size: 13px; }
  .evolution-recipe-panel { padding: 14px 20px; }
  .evolution-recipe-panel h2 { margin: 5px 0 8px; }
  .evolution-recipe-panel p { margin: 8px 0; font-size: 13px; }
  .evolution-requirements { margin: 8px 0; }
  .evolution-requirements li { padding: 6px 0; font-size: 13px; }
  .weapon-footer .weapon-awakening-loss { margin-bottom: 7px; font-size: 12px; }
}

/* ======================================================================
   MENU POLISH PASS (2026-09-29, pre-submission). One grammar for every
   menu: a single-line masthead, content that reads top-down from it,
   one filled primary action, a neutral Off. Last in the cascade on
   purpose, so it states the final word instead of editing thirty rules.
   ====================================================================== */

/* Menus read top-down from the masthead. The generic "safe centring"
   (:first-child/:last-child auto margins) floated short screens in a dead
   band under the header. */
#ui > .screen.has-menuhead > :first-child { margin-top: 0; }
#ui > .screen.has-menuhead > .screenhead + * { margin-top: 4px; }

/* One line of masthead, always. Titles were shortened so none needs two. */
.screen.has-menuhead > .screenhead .heading { white-space: nowrap; }
@media (max-width: 600px) {
  .screen.has-menuhead > .screenhead { min-height: calc(58px + var(--sat)); padding-block: calc(7px + var(--sat)) 7px; }
}

/* ---- title: two ways in, a half-width pair for the visited screens ---- */
.screen.screen-title { justify-content: center; padding-bottom: calc(72px + var(--sab)); }
.screen.screen-title .title-actions { gap: 10px; }
.screen.screen-title .title-minor { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.screen.screen-title .title-minor .btn { width: 100%; min-width: 0; min-height: 50px; font-size: 19px; padding-inline: 8px; }
.screen.screen-title .title-actions .btn.big small { display: block; font-size: 11px; letter-spacing: .04em; margin-top: 2px; }
.screen.screen-title .title-actions .btn.big:has(small) { flex-direction: column; gap: 0; line-height: 1.1; }
@media (max-height: 500px) {
  .screen.screen-title { padding-bottom: calc(14px + var(--sab)); }
  .screen.screen-title .title-minor .btn { min-height: 44px; font-size: 17px; }
}
/* the assignment: tag | name over description | reward, nothing clipped */
.screen .assignslot {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px;
  align-items: center; width: min(340px, 100%); max-width: 100%; padding: 8px 12px;
  font-size: 11px; letter-spacing: .04em; line-height: 1.3;
}
.screen .assignslot .atag { grid-row: 1 / span 2; align-self: stretch; display: flex; align-items: center; }
.screen .assignslot b { grid-column: 2; grid-row: 1; white-space: normal; letter-spacing: .06em; }
.screen .assignslot .adesc { grid-column: 2; grid-row: 2; }
.screen .assignslot small { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; font-size: 12px; }
.screen.screen-title .mutechip { bottom: calc(14px + var(--sab)); }

/* ---- one primary action: the title's filled red, everywhere ---- */
.screen:not(.screen-title):not(.screen-results):not(.screen-pause) .btn.primary:not(.run-mode):not(.pchip):not(.shoptab):not(.cdtab),
.screen .bpactions .btn.primary {
  color: #07080f; border-color: #ff8a94; text-shadow: none;
  background: linear-gradient(160deg, #ff5a6b, #e2334a); box-shadow: 0 3px 0 #611e31;
}
.screen .controlbook .btn.primary { color: #070910; background: linear-gradient(160deg, #91f3ff, #33c9de); border-color: #a9f7ff; box-shadow: none; }
@media (hover: hover) {
  .screen:not(.screen-title):not(.screen-results):not(.screen-pause) .btn.primary:not(.run-mode):not(.pchip):not(.shoptab):not(.cdtab):hover:not(:disabled) {
    color: #07080f; background: linear-gradient(160deg, #ff7a88, #f0445a); border-color: #ffc2c8;
  }
}
.screen .btn.primary:disabled { filter: saturate(.35) brightness(.7); }

/* ---- options: the tab row is the navigation; the ‹ page › echo goes ---- */
.screen .controlbook .pagerhead { display: none; }
.screen .controlbook .btn.off em { color: #8d9cb0; border-color: #8d9cb055; }

/* ---- records ---- */
@media (max-width: 600px) {
  .screen-stats .statgrid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- credits: one tidy row of equal links ---- */
.screen-credits > .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; width: min(560px, 100%); }
.screen-credits > .row .btn { width: 100%; margin: 0; }
.screen-credits .credit.lead .cwho { font-size: clamp(24px, 6.6vw, 46px); }
.screen-credits .crole, .screen-credits .cnote { font-size: 11px; }
/* the deck masthead wears the same slash as every other screen */
.screen-deck.deck-phone > .screenhead .heading::before { display: block; }
.screen-deck > .screenhead .heading { padding-left: 0; }
@media (max-height: 500px) {
  .screen-credits .credit.lead .cwho { font-size: clamp(22px, 7vh, 34px); }
  .screen-credits .creditlist { gap: 8px; }
  .screen-credits .credrule { margin-block: 2px; }
}

/* ---- results: say it once. The stamp names the night; the duplicate
   heading stays for screen readers only, the time survived leads. ---- */
.screen.result-death .result-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ---- level-up: the three cards sit under the masthead, not mid-screen ---- */
.screen.screen-levelup { justify-content: flex-start; }
/* ---- pause: the brand already fills the loading screen and film ---- */
.screen-pause .pause-logo { display: none; }
/* ---- feedback: masthead screen now, the form reads from the top ---- */
.screen-feedback > .blurb { max-width: min(560px, 100%); margin: 0; }
.screen-feedback > .fbtext { width: min(560px, 100%); }
/* A masthead screen reads from its masthead down: the top centring spacer
   collapses (the bottom one keeps short screens from stretching). Pause
   keeps its centred stack, which is a deliberate hold, not a menu page. */
#ui > .screen.has-menuhead:not(.screen-pause) > .flexspacer:not(.bot) { display: none; }
#ui > .screen.has-menuhead:not(.screen-pause) > .screenhead + .flexspacer + * { margin-top: 4px; }

/* ---- focus rings belong to keys and pads: a tap never paints the first
   control as "selected" (Deck tab, Career tab, Sound Library, Slot 3) ---- */
/* cards (fan, row, hand) position themselves with transforms: never reset those */
#ui:not([data-ui-input="keys"]) .screen .btn.focus:not(:focus-visible):not(:hover):where(:not(.fan-card, .flow-card, .hand-slot, .tc-flip)) {
  border-color: var(--line-strong, #3a4a5c); box-shadow: none; outline: none; transform: none;
}
#ui:not([data-ui-input="keys"]) .screen .btn.primary.focus:not(:focus-visible):not(:hover) { border-color: #ff8a94; box-shadow: 0 3px 0 #611e31; }
#ui:not([data-ui-input="keys"]) .screen .btn.focus:not(:focus-visible)::after { transform: none; transition: none; }
/* outline only: hand and fan cards are placed by transforms (a reset broke drag-reorder) */
#ui:not([data-ui-input="keys"]) .screen .hand-slot.focus:not(:focus-visible):not(.kept) { outline: none; }
#ui:not([data-ui-input="keys"]) .screen.screen-title .btn.primary.focus:not(:focus-visible):not(:hover) { border-color: transparent; box-shadow: 4px 4px 0 #000; outline: none; transform: skewX(-7deg); }
#ui:not([data-ui-input="keys"]) .screen.screen-title .btn:not(.primary).focus:not(:focus-visible):not(:hover) { border-color: var(--line-strong); box-shadow: 4px 4px 0 #000; outline: none; transform: skewX(-7deg); }

/* ---- your hand (pause): a phone shows the hand as a readable grid ---- */
@media (max-width: 600px) {
  .hand-cards { --tc: 2.1px; display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 10px 14px; overflow: visible; padding: 8px 0 16px; }
  .hand-slot { scroll-snap-align: none; }
}

/* ---- results: equal primary pair, secondaries on one row ---- */
.screen-results:not(.round-clear) .result-primary { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px !important; align-items: stretch; }
.screen-results:not(.round-clear) .result-primary .btn { margin: 0; min-height: 56px; }
.screen-results:not(.round-clear) .result-primary .btn:only-child { grid-column: 1 / -1; }
.screen-results:not(.round-clear) .result-primary .btn small { font-size: 11px; line-height: 1.25; }
.screen-results .result-secondary { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; }
.screen-results .result-secondary .btn { margin: 0; min-width: 0; flex: none; }
/* ---- options: tabs and rows share one column; landscape rows go two-up ---- */
.screen .pager.controlbook { width: min(620px, 100%); }
.screen .controlbook .booktabs { margin-bottom: 12px; }
#ui:not([data-ui-input="keys"]) .controlbook .booktab.focus:not(:focus-visible) { outline: none; }
@media (max-height: 500px) and (min-width: 640px) {
  .screen .pager.controlbook { width: min(760px, 100%); }
  .screen .controlbook .pagerpanel.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .screen .controlbook .pagerpanel.settings > :is(.hint, .buildline, .guidenote, .sliders, .loopbox) { grid-column: 1 / -1; }
  .screen .controlbook .pagerpanel .btn { min-height: 48px; }
}
/* ---- feedback: Send spans the field it sends ---- */
.screen-feedback > .row { width: min(560px, 100%); }
.screen-feedback > .row .btn { width: 100%; margin: 0; }
/* ---- roster footer: Club Deck is a real secondary button beside Next ---- */
.screen-roster.roster-chooser .roster-actions .roster-clubdeck { font-size: 13px; padding-inline: 14px; min-width: 104px; }
@media (max-width: 600px) { .screen-roster.roster-chooser .roster-actions .roster-clubdeck { font-size: 12px; min-width: 92px; } }
/* ---- records tabs and credits links: no phantom focus, one row of three ---- */
#ui:not([data-ui-input="keys"]) .screen .shoptab.focus:not(:focus-visible):not(.on) { outline: none; box-shadow: none; border-color: var(--menu-line); }
#ui:not([data-ui-input="keys"]) .screen .shoptab.on.focus:not(:focus-visible) { outline: none; box-shadow: none; }
.screen-credits > .row { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.screen-credits > .row .btn { font-size: 13px; padding-inline: 6px; }
#ui:not([data-ui-input="keys"]) .screen .chardetail .btn.cdtab.focus:not(:focus-visible) { outline: none; box-shadow: none; border-color: transparent; border-bottom-color: transparent; }
#ui:not([data-ui-input="keys"]) .screen .chardetail .btn.cdtab.on.focus:not(:focus-visible) { border-bottom-color: var(--c); }

/* ======================= round 7: consensus fixes ======================= */
/* ---- ONE TAB LANGUAGE: the Options underline, cyan when current ---- */
.screen .shoptabs { gap: 4px; border-bottom: 1px solid #52657955; margin: 0 0 12px; width: 100%; }
.screen .shoptab {
  flex: 1 1 0; min-height: 44px; padding: 10px 6px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; box-shadow: none; outline: none; color: #93a8b9; font: 700 13px/1.2 var(--mono); letter-spacing: .03em;
}
.screen .shoptab.on { background: #54e6f50b; color: #eef8ff; border-bottom-color: var(--menu-accent); box-shadow: none; }
.screen .shoptab:focus-visible, [data-ui-input="keys"] .screen .shoptab.focus { outline: 2px solid #c5f6ff; outline-offset: -3px; }
#ui:not([data-ui-input="keys"]) .screen .clubhouse-tab.focus:not(:focus-visible) { outline: none; }
/* the collection/hand switch speaks the same language, one level down */
.screen.deck-phone .btn.deck-view { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: #93a8b9; }
.screen.deck-phone .btn.deck-view[aria-selected="true"] { color: #eef8ff; border-bottom-color: var(--menu-accent); background: #54e6f50b; box-shadow: none; }

/* ---- a disabled primary reads as waiting, not broken ---- */
.screen .btn.primary:disabled, .screen .btn.primary:disabled:hover {
  opacity: 1; filter: none; background: #151c28; color: #7f93a6; border-color: #33475a; box-shadow: none; text-shadow: none;
}

/* ---- collection placeholders: one caption, not two ---- */
.tc-blank .tc-blank-note { display: none; }
.tc-lock .tc-blank-note { display: block; }
.tc-blank .tc-blank-num { font-size: max(11px, calc(var(--tc, 2px) * 5)); opacity: .8; }

/* ---- pause: one accent family, a quiet exit ---- */
.screen-pause .pause-actions .btn.primary { background: linear-gradient(160deg, #ff5a6b, #e2334a); color: #07080f; border-color: #ff8a94; }
.screen-pause .pause-actions .btn.primary:is(:hover, .focus, :focus-visible) { background: linear-gradient(160deg, #ff7a88, #f0445a); color: #07080f; }
.screen-pause .pause-actions .btn.danger { background: transparent; color: #ff8a94; border-color: #ff8a9455; }

/* ---- records › stages: a table, stars in one column, 44px rows ---- */
.screen .statrows .statrow:not(.assign) { display: grid; grid-template-columns: minmax(0, 1fr) 64px 76px; align-items: center; min-height: 44px; padding: 6px 12px; }
.screen .statrows .statrow:not(.assign) .sstars { margin: 0; padding: 0; text-align: center; letter-spacing: .12em; font-size: 13px; }
.screen .statrows .statrow:not(.assign) small { text-align: right; font-size: 12px; }
.screen .statrows .statrow:not(.assign):not(.has) small { color: #6d8093; }
.screen .statrows .statrow b { font-size: 13px; }

/* ---- results: legible technique line under the name ---- */
.screen-results .result-technique { color: #d8dfe8; }
/* ---- disabled primary beats the one-primary rule above ---- */
#ui .screen .btn.primary:disabled, #ui .screen .btn.primary:disabled:hover {
  opacity: 1; filter: none; background: #151c28; color: #7f93a6; border-color: #33475a; box-shadow: none; text-shadow: none;
}
/* ---- death: the lost card is a compact row, so the screen fits a phone ---- */
.result-lost { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 8px 10px; }
.result-lost > .kicker { grid-column: 1 / -1; margin-bottom: 4px; }
.result-lost .result-lost-cards { grid-column: 1; margin: 0; gap: 6px; flex-wrap: nowrap; }
.result-lost .result-lost-card .tcard { --tc: .9px !important; }   /* beats the inline size _cardEl sets */
.result-lost .result-lost-card .hand-tag { font-size: 10px; letter-spacing: .12em; }
.result-lost .result-lost-note { grid-column: 2; grid-row: 2; text-transform: none; letter-spacing: .02em; font: 500 12px/1.4 var(--body); color: #d8dfe8; }

/* ======================= round 9 ======================= */
/* a current tab keeps its underline even while it holds focus */
#ui:not([data-ui-input="keys"]) .screen .clubhouse-tab[aria-selected="true"].focus:not(:focus-visible) { border-bottom-color: var(--cyan); color: #eef8ff; }
#ui:not([data-ui-input="keys"]) .screen .shoptab.on.focus:not(:focus-visible) { border-bottom-color: var(--menu-accent); color: #eef8ff; }
#ui:not([data-ui-input="keys"]) .screen.deck-phone .btn.deck-view[aria-selected="true"].focus:not(:focus-visible) { border-bottom-color: var(--menu-accent); color: #eef8ff; }
/* parent tabs outrank the collection/hand switch beneath them */
.screen .clubhouse-tab[aria-selected="true"] { border-bottom-width: 3px; }
.screen.deck-phone .btn.deck-view { min-height: 38px; font-size: 13px; }
/* death: Revive and Retry are one shape, the price sits underneath */
.screen-results:not(.round-clear) .result-primary .btn { transform: none; }
.screen-results .result-revive-cost { margin: 6px 0 0; font: 500 12px/1.4 var(--body); color: #b8c6d4; text-align: center; }
/* options: How to Play is a way somewhere, not a switch */
.screen .controlbook .btn .navchev { margin-left: auto; font: 700 20px/1 var(--body); color: var(--menu-accent); }
.screen .controlbook .buildline:empty { display: none; }
/* your hand: an odd last card sits centred under the pair */
@media (max-width: 600px) { .hand-cards > .hand-slot:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; } }
/* records: the last row of stat tiles centres instead of leaving a hole */
.screen-stats .statgrid { display: flex !important; flex-wrap: wrap; justify-content: center; }
.screen-stats .statgrid > * { flex: 0 1 calc(25% - 10px); min-width: 140px; }
@media (max-width: 600px) { .screen-stats .statgrid > * { flex-basis: calc(50% - 8px); min-width: 0; } }

/* ======================= round 11 ======================= */
.screen-credits .cwho .cquote { font-family: var(--body); font-weight: 700; margin-inline: .04em; }
.screen-results .result-ledger .k { font-size: 11px; letter-spacing: .04em; }
.screen .chardetail .cdfield-toggle span { margin-left: 8px; color: var(--menu-accent); }
/* records: square tiles like every other card, display-face tabs like the Clubhouse */
.screen .statgrid .statbox { border-radius: 0; }
.screen .statbox .sl { font-size: 11px; letter-spacing: .06em; }
.screen .shoptab { font: 700 14px/1.1 var(--display); letter-spacing: .015em; }
/* stages dock: Play and Details share the row */
.screen-stages .bpactions { grid-template-columns: 2fr 1fr; }
/* deck: the note that explains an all-blank collection spans the grid */
.deck-stage > .deck-note { grid-column: 1 / -1; align-self: center; margin: 4px 4px 2px; font: 500 13px/1.45 var(--body); color: #c5d3df; text-align: left; }
.deck-flow .deck-stage:not(.deck-phone *) > .deck-note { flex: 0 0 220px; white-space: normal; }
/* ---- club card: code + copy on one line, the form in one column ---- */
.screen .cardpanel { text-align: left; display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.screen .cardpanel > .heading.small { margin: 0; font-size: 24px; }
.screen .cardpanel > .heading.small::after { display: none; }
.screen .cardpanel .hint { margin: 0; text-align: left; font-size: 13px; }
.screen .cardcoderow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.screen .cardpanel .cardcode { margin: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--menu-line); background: #070b12; color: var(--menu-text);
  text-decoration: none; font: 600 13px/1.2 var(--mono); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.screen .cardpanel .btn.cardcopy { margin: 0; min-height: 44px; padding-inline: 16px; }
.screen .cardpanel .cardsec { margin: 8px 0 0; font: 700 15px/1.2 var(--display); color: var(--menu-text); }
.screen .cardpanel .cardrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.screen .cardpanel .cardrow .btn { margin: 0; min-height: 44px; }
.screen .cardpanel .cardinput { min-width: 0; min-height: 44px; }
.screen .cardpanel .buildline { margin: 0; text-align: left; font-size: 12px; }
.screen .cardpanel .cardfoot { justify-content: flex-end; margin: 4px 0 0; }
.screen .cardpanel .cardfoot .btn { margin: 0; min-width: 104px; }
/* ---- death: one decision up top, the rest a quiet row; no clipped ghost word ---- */
.screen-results .result-secondary .btn { transform: none; min-height: 40px; font: 600 14px/1.1 var(--body); letter-spacing: .01em; border-width: 1px; box-shadow: none; background: transparent; color: #c5d3df; }
.screen-results .result-secondary .btn > * { transform: none; }
@media (max-width: 600px) { .screen.screen-results::before { display: none; } }
/* ---- clubhouse crew, landscape phones: slots compact so the crew shows ---- */
@media (max-height: 500px) {
  .clubhouse-screen .club-capacity .club-note { display: none; }
  .clubhouse-screen .club-section-title { margin: 4px 0; font-size: 16px; }
  .screen .btn.club-hero { height: 200px; min-height: 0; padding: 10px; }
  .club-hero-art { object-position: center 12%; }
}

/* ======================= round 14 ======================= */
/* records tabs: the display face must fit three labels on a phone */
@media (max-width: 600px) { .screen .shoptab { font-size: 12px; letter-spacing: 0; padding-inline: 2px; min-width: 0; white-space: nowrap; } }
/* clubhouse tabs span the content width, like every tab row below them */
.clubhouse-tabs { width: 100%; }
.screen .clubhouse-tab { flex: 1 1 0; }
/* death and results: nothing under 11px */
.screen-results :is(.result-duration span, .result-technique, .result-role, .dropped .why, small.why) { font-size: 11px; }
/* level-up: the banked count reads, beside the masthead */
.screen-levelup .draft-banked { font-size: 12px; color: #c5d3df; letter-spacing: .03em; }
/* club card: the whole code is visible (wraps inside its field) */
.screen .cardpanel .cardcode { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.35; }
/* options, landscape phones: back to one column, the help text under its row */
@media (max-height: 500px) and (min-width: 640px) {
  .screen .pager.controlbook { width: min(620px, 100%); }
  .screen .controlbook .pagerpanel.settings { display: flex; }
}
/* loadout: the current tab is cyan, like every tab row */
.screen .chardetail .btn.cdtab.on { color: var(--menu-accent); border-bottom-color: var(--menu-accent); }
/* win: Run Details is a real (quiet) button, the width of the card */
.screen .btn.round-details-link { min-height: 44px; margin-top: 10px; width: min(480px, 100%); border: 1px solid #44637c; background: #0d1420cc; color: #d8e4ee; font: 600 14px/1.2 var(--body); text-decoration: none; }

/* ======================= round 15 ======================= */
/* title, landscape phones: the ghost kanji clears the assignment strip */
@media (max-height: 500px) { .screen-title::before { display: none; } }
/* choose your run, portrait: the two choices sit in the middle of the page */
@media (max-width: 600px) and (min-height: 560px) { .screen-runmode > .run-modes { margin-block: auto; } }
/* level-up, phones: cards size to their content */
@media (max-width: 600px) {
  .screen.screen-levelup .card.tech > .tech-art { min-height: 108px; padding-top: 30px; }
  .screen-levelup .card.tech .tech-icon { width: 64px; height: 64px; }
  .screen-levelup .tech-copy { padding: 12px 14px; gap: 5px; }
  .screen-levelup .card.tech .blurb { font-size: 13px; }
  .screen-levelup .tech-type { font-size: 10px; }
}
/* your hand, phones: one readable card per row, swipe down the hand */
@media (max-width: 600px) {
  .hand-cards { --tc: 3.4px; grid-template-columns: max-content; gap: 14px; }
  .hand-cards > .hand-slot:last-child:nth-child(odd) { grid-column: auto; }
}
/* build deck: Pull Card is the gold action, Pull 3 its quiet sibling */
.screen .btn.deck-pull3:not(.fan-protect) { background: transparent; border-color: #5b6b7d; color: #d8e4ee; }
.screen .btn.deck-pull3:not(.fan-protect) small { color: var(--gold); }
@media (max-width: 600px) and (min-height: 560px) { .screen-runmode > .flexspacer { display: none; } }
@media (max-width: 600px) and (min-height: 560px) { #ui > .screen.has-menuhead.screen-runmode > .run-modes.run-modes { margin-block: auto; } }

/* ======================= round 17 ======================= */
/* win: both decisions are the same shape */
.round-clear .result-primary .btn { transform: none; }
.round-clear .result-primary .btn > * { transform: none; }
/* club card: the screen behind is fully dimmed, one close control */
.screen .cardmodal { background: rgba(4, 6, 12, .9); }
/* primer: Back matches Enter The Hour */
.screen-primer .row .btn { min-height: 52px; min-width: 104px; }
/* level-up, phones: every title on one line so the cards match */
@media (max-width: 600px) { .screen-levelup .card.tech h3 { font-size: clamp(18px, 6.2vw, 24px) !important; white-space: nowrap; } }
/* results: the coins note reads */
.screen-results .dropped .why { font-size: 12px; }
.screen .assignslot { font-size: 12px; }
.deck-phone .flow-card .flow-tag, .flow-card.blank .flow-tag { color: #aebdcb; font-size: 12px; }
.screen .cardpanel .cardcode { overflow-wrap: normal; word-break: normal; }
/* the drawing's title plate is decoration: hidden while a room is framed (it was cut at the edge) */
.screen-stages .bpview.sheet-open [data-bp-survey="title-block"] { display: none; }

/* ======================= LANDSCAPE PASS (the store app is landscape-only) ======================= */
@media (max-height: 500px) {
  /* results: New Best sits in the header row beside the time, never over the ledger */
  .screen-results .result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .screen-results .result-best { position: static; margin: 0; }
  .screen-results .result-duration strong { font-size: 36px; }
  .screen-results .result-lost { padding: 6px 8px; }
  /* primer: the heading is a heading, not half the screen */
  .screen-primer .heading.big { font-size: clamp(26px, 7vh, 34px) !important; }
  .screen-primer .primersteps, .screen-primer .primer-steps { margin-top: 2px; }
  /* one masthead + tab rows as short as touch allows */
  .clubhouse-tabs { padding: 2px 0; }
  .screen .clubhouse-tab { min-height: 40px; padding-block: 6px; }
  .screen.deck-phone .btn.deck-view { min-height: 36px; padding-block: 4px; }
  .deck-stage > .deck-note { margin: 2px 4px 0; font-size: 12px; }
}
@media (max-height: 500px) {
  /* crew: the crew leads, the slot purchases follow (roster shows slots too) */
  .clubhouse-screen[data-club-tab="crew"] .clubhouse-body { display: flex; flex-direction: column; }
  .clubhouse-screen[data-club-tab="crew"] .clubhouse-body > .club-capacity { order: 3; margin: 14px 0 0; }
  .clubhouse-screen[data-club-tab="crew"] .clubhouse-body > .club-section-title { order: 1; }
  .clubhouse-screen[data-club-tab="crew"] .clubhouse-body > .club-heroes { order: 2; }
  .screen .btn.club-hero { height: min(210px, calc(100vh - 170px)); }
  .screen .btn.club-slot { min-height: 52px; padding: 8px 10px; }
  /* records: the daily line gives way so the tiles fit */
  .screen-stats .shoppane > .hint { display: none; }
  .screen-stats .dailyrow { margin: 0 0 6px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  .club-heroes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .screen .btn.club-hero { height: min(200px, calc(100vh - 170px)); padding: 10px; }
  .club-hero-name { font-size: 20px; }
  .club-pulls { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .club-pulls .btn { margin: 0; min-height: 88px; }
}

/* ======================= LANDSCAPE PASS 2 ======================= */
@media (max-height: 500px) {
  /* student sheet: training tiles short enough to show whole above Pick/Close */
  .screen .chardetail .cdskillgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  /* club card fits a 375px-tall phone: tighter panel, Close never clipped */
  .screen .cardmodal { align-items: flex-start; overflow-y: auto; }
  .screen .cardpanel { max-height: none; gap: 6px; padding: 12px 16px; margin-block: auto; }
  .screen .cardpanel > .hint, .screen .cardpanel > .buildline:last-of-type { font-size: 12px; }
  /* death: the lost card waits in Run Details, the screen ends at its actions */
  .screen.result-death .result-lost { display: none; }
  /* level-up: one-line titles at every landscape width */
  .screen-levelup .card.tech h3 { font-size: clamp(16px, 2.6vw, 24px) !important; white-space: nowrap; }
  /* results: both decisions on one line */
  .round-clear .result-primary .btn { font-size: 14px; white-space: nowrap; padding-inline: 8px; }
  /* stages dock: Details is a full 44px secondary */
  .screen-stages .bpactions .btn { min-height: 44px; }
  /* primer: step copy reads */
  .screen-primer .primercopy > span { font-size: 11px; line-height: 1.3; }
}
/* pause: Resume wears the same skew as its siblings */
.screen-pause .pause-actions .btn.primary { transform: skewX(-7deg); }
#ui .screen.screen-pause .pause-actions .btn.primary:not(:active) { transform: skewX(-7deg); }

/* ---- painted store tiles and empty-collection art (2026-09-30) ----
   Art fills the tile; the label sits on a dark fade at the bottom, so it
   reads at every tile width. (::after is the shared hover-shine sweep.) */
.screen .club-pulls .btn { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  text-align: left; min-height: 150px; padding: 12px 14px;
  background: linear-gradient(180deg, #0b142100 25%, #0b1421dd 70%, #0b1421 100%), var(--tile-art) center 30% / cover no-repeat, #0b1421 !important; }
.screen .club-pulls .btn:disabled { opacity: .6; }
.deck-stage > .deck-note.has-art { position: relative; overflow: hidden; min-height: 120px; display: flex; align-items: center;
  padding: 14px 16px 14px max(40%, 150px); border: 1px solid var(--menu-line);
  background: linear-gradient(90deg, #0b142100 28%, #0b1421 60%), var(--tile-art) left center / cover no-repeat, #0b1421; }
@media (max-height: 500px) { .screen .club-pulls .btn { min-height: 128px; } .deck-stage > .deck-note.has-art { min-height: 96px; } }
@media (max-width: 600px) { .screen .club-pulls .btn { min-height: 120px; } }
/* your hand: cards open full size on tap */
.screen .hand-slot[role="button"] { cursor: zoom-in; pointer-events: auto; }
.handzoom { cursor: zoom-out; justify-content: center; background: rgba(4, 6, 12, .92); }
.handzoom .hint { font-size: 12px; color: #aebdcb; }

/* Credits is one entry now (2026-10-08): centre it in the free space instead of
   pinning it under the header like the long headed screens. */
#ui > .screen.screen-credits.has-menuhead > .flexspacer:not(.bot) { display: block; }

/* ==== MOBILE PASS 2026-10-10 · deck: deck building, card reveal, pause hand (iPhone landscape audit) ==== */
/* .deck-phone is set only on phones (ui.js showDeck). The landscape rules use
   (orientation: landscape), like the deck-phone block above, because the JS
   sizes cards on the same test (innerWidth > innerHeight, s.clientWidth > h). */
/* The locked next slot states its slot and its price at reading size. Its em
   sizes resolve to 2-3px at a phone's --tcf, in either orientation. */
.screen.deck-phone .deck-fan .tc-lock { gap: 6px; }
.screen.deck-phone .deck-fan .tc-lock svg { width: 22px; height: 22px; }
.screen.deck-phone .deck-fan .tc-lock :is(.tc-blank-num, .tc-blank-note) { font: 600 12px/1.2 var(--body); letter-spacing: 0; text-transform: none; opacity: 1; }
/* Opening that slot on a phone asks first (ui.js confirmSlot). */
.deck-phone .deck-slot-title { margin: 0; font: 700 22px/1.2 var(--display); letter-spacing: 0; text-transform: none; text-align: center; }
.deck-phone .deck-slot-price { margin: 0; max-width: 380px; color: #dfe8f0; font: 500 14px/1.4 var(--body); letter-spacing: 0; text-align: center; }
.deck-phone .deck-slot-confirm .btn { min-height: 44px; padding: 8px 14px; font: 700 15px/1.2 var(--display); letter-spacing: 0; transform: none; }
/* The zoom's readable rule (ui.js cardRule) shows only in landscape; a
   portrait zoom keeps its tall card and its old stack. */
.deck-phone .cardzoom-info { display: none; }
@media (orientation: landscape) {
  /* One pulled card stands beside its actions, as an inspection does. Its
     height leaves only 64px (bigTc), so actions under it fell off-screen. */
  .deck-phone .pullreveal.deck-reveal { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 270px); grid-template-rows: 1fr auto auto 1fr;
    justify-content: center; align-items: center; gap: 12px 24px; }
  .deck-phone .pullreveal.deck-reveal > * { margin: 0; }
  .deck-phone .pullreveal.deck-reveal > .pullreveal-cards { grid-column: 1; grid-row: 1 / -1; }
  .deck-phone .pullreveal.deck-reveal > .kicker { grid-column: 2; grid-row: 2; font: 600 14px/1.3 var(--body); letter-spacing: .08em; text-align: center; }
  .deck-phone .pullreveal.deck-reveal > .row { grid-column: 2; grid-row: 3; }
  .deck-phone .pullreveal.deck-reveal .btn { min-height: 44px; padding: 8px 14px; font: 700 15px/1.2 var(--display); letter-spacing: 0; transform: none; }
  /* An owned card's rule and requirement sit between the kicker and the
     actions; the side column centres on the card. */
  .deck-phone .cardzoom.has-rule { grid-template-rows: 1fr auto auto auto auto 1fr; }
  .deck-phone .cardzoom.has-rule > .pullreveal-cards { grid-row: 1 / -1; }
  .deck-phone .cardzoom.has-rule > .kicker { grid-row: 2; }
  .deck-phone .cardzoom.has-rule > .cardzoom-info { grid-column: 2; grid-row: 3; }
  .deck-phone .cardzoom.has-rule > .row { grid-row: 4; }
  .deck-phone .cardzoom.has-rule > .deck-order-actions { grid-row: 5; }
  .deck-phone .cardzoom-info { display: flex; flex-direction: column; gap: 6px; }
  .deck-phone .cardzoom-rule { margin: 0; color: #e5edf4; font: 600 14px/1.35 var(--body); letter-spacing: 0; text-align: center; }
  .deck-phone .cardzoom-req { margin: 0; color: #a8bacb; font: 500 12px/1.3 var(--body); letter-spacing: 0; text-align: center; }
  .deck-phone .cardzoom-req.blocked { color: #ff9aa4; }
  /* The hand is one row that fits its pane: ui.js fit() caps --tcf by the
     pane's height, counting 8px of padding top and bottom. A long name ends
     in an ellipsis; the zoom and the aria-label carry it whole. */
  .screen.deck-phone .deck-fan { padding-block: 8px; }
  .deck-phone .deck-fan .deck-card-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .screen.deck-phone .deck-fan .fan-safe { font-size: 11px; }
  /* Past 900px wide (Plus, Pro Max) the compact badge above never applied:
     the count wrapped a character per line and squashed the portrait. */
  .screen-deck.deck-phone .crew-btn { position: relative; gap: 0; }
  .screen-deck.deck-phone .crew-btn small { position: absolute; right: 0; bottom: 0; padding: 1px 3px; border-radius: 3px; background: #0a0d16;
    font-size: 11px; line-height: 1.1; letter-spacing: 0; white-space: nowrap; }
}
/* Review round 2 (2026-10-10): Done shares one row with Add To Hand.
   (Taller Collection/Hand tabs and awakening status shifted the collection's
   restored scroll position in test/deck-phone.browser.mjs; left at 36px.) */
@media (max-height: 500px) {
  .deck-phone .pullreveal.deck-reveal { grid-template-columns: minmax(0, auto) minmax(0, 300px); }
  .deck-phone .pullreveal.deck-reveal > .row { gap: 10px; flex-wrap: nowrap; }
}
/* the desktop deck's awakening status meets the 44px target floor */
.screen-deck:not(.deck-phone) .btn.deck-awakening-status { min-height: 44px; }
/* ==== END MOBILE PASS · deck ==== */


/* ==== MOBILE PASS 2026-10-10 · blueprint: Pick Your Hour blueprint and run primer (iPhone landscape audit) ==== */
/* Pick Your Hour: showStages moves the room list into the masthead. Desktop
   names rooms on the map and portrait keeps its layout, so the list shows
   only on short landscape phones, where the map frames tonight's room and the
   other hours are unnamed badges or out of view. Picking "Explore the school"
   closes the dock and fits the whole school. */
.screen-stages > .screenhead .bp-room-select { display: none; }
@media (max-height: 500px) {
  .screen-stages.has-menuhead > .screenhead { flex-wrap: nowrap; }
  .screen-stages.has-menuhead > .screenhead .heading { flex: 0 0 auto; }
  .screen-stages.has-menuhead > .screenhead .bp-room-select {
    display: block; flex: 0 1 280px; width: auto; min-width: 0; height: 44px; margin: 0 0 0 auto;
    padding: 0 32px 0 12px; border: 1px solid #d8c49c80; border-radius: 3px; color: #e4eef6; font: 14px var(--body);
    -webkit-appearance: none; appearance: none; cursor: pointer; pointer-events: auto;
    background: linear-gradient(45deg, transparent 50%, #d8c49c 50%) calc(100% - 20px) 50% / 5px 5px no-repeat,
      linear-gradient(135deg, #d8c49c 50%, transparent 50%) calc(100% - 15px) 50% / 5px 5px no-repeat, #0b1b30;
  }
  #ui[data-ui-input="keys"] .screen-stages > .screenhead .bp-room-select.focus { outline: 2px solid #d7c594; outline-offset: 2px; }
  /* The map starts at the real 61px masthead, not the 84px desktop offset,
     and without the 4px gap that follows other mastheads. ui.js layout()
     drops the reserves for the hidden toolbar and legend to match. */
  .screen-stages .bpview { top: var(--menu-head-height, calc(61px + var(--sat, 0px))); }
  #ui > .screen.screen-stages.has-menuhead > .bpview.bpview { margin-top: 0; }
  /* Run primer: the control chips read as large as the copy under them. */
  .screen-primer .primercopy kbd { font-size: 11px; padding: 2px 6px; }
}

/* ==== END MOBILE PASS · blueprint ==== */


/* ==== MOBILE PASS 2026-10-10 · menus: pause, level-up, options, guide, club card, records (iPhone landscape audit) ==== */
/* pause: the run exit arms on the first press and quits on the second
   (showPause). Armed, it wears warning stripes and a hot border, so it reads
   as a different state without looking like the red Resume above it. */
.screen-pause .pause-actions .btn.danger.armed { color: #ffe1e6; border-color: #ff5a6b; background: repeating-linear-gradient(-45deg, #5c1526 0 10px, #43101d 10px 20px); box-shadow: 4px 5px 0 #02050b, 0 0 16px #ff5a6b55; }
.screen-pause .pause-actions .btn.danger.armed small { color: #ffadbc; }
/* options: a row and the note that explains it travel together in .optcell
   (_optionPages). gap: inherit keeps the one-column spacing exactly as before. */
.screen .controlbook .optcell { display: flex; flex-direction: column; gap: inherit; min-width: 0; }
/* club: "Link your save across devices." sat 4px up under the Club Card
   button, which painted over the tops of its letters */
.screen .controlbook .fbline > .buildline { margin-top: 8px; }
/* volume: a bigger knob on touch screens (the row is already 44px tall) */
@media (pointer: coarse) {
  .screen .slider input[type=range]::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -12px; }
  .screen .slider input[type=range]::-moz-range-thumb { width: 30px; height: 30px; }
}
@media (max-height: 500px) {
  /* pause: the exit stands clear of Options / Suspend instead of 8px under them */
  .screen-pause .pause-actions .btn.danger { margin-top: 14px; }
  /* level-up: showLevelUp sets --len to the hand's longest name, so the
     titles share one size that fits the text column (was 2.6vw, which ran
     long names past the card onto the next one) */
  @supports (width: 1cqi) {
    .screen-levelup .cards .card.tech h3 { font-size: clamp(13px, calc(118cqi / var(--len, 13)), 24px) !important; }
  }
  .screen-levelup .tech-copy .tech-type { font-size: 11px; }
  /* how to play: the control names are the point of the screen */
  .screen .controlbook .guiderow kbd { font-size: 12px; letter-spacing: .02em; }
  .screen .controlbook .guidetabs .btn { font-size: 12px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  /* options: switches pair up two to a row with each note under its own
     switch, so no category hides a setting below the fold. Beats the
     round-14 one-column rule (.pagerpanel.settings, 0,4,0). */
  .screen .controlbook .pagerpanel.settings.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: start; margin-bottom: 4px; }
  .screen .controlbook .pagerpanel.settings > * { grid-column: 1 / -1; }
  .screen .controlbook .pagerpanel.settings > :is(.btn.toggle, .optcell, .fbline) { grid-column: auto; }
  .screen .controlbook .pagerpanel.settings > .btn.toggle:has(+ .sliders) { grid-column: 1 / -1; }
  .screen .controlbook .pagerpanel.settings > .fbline { margin: 0; }
  .screen .controlbook .pagerpanel.settings > .optcell { gap: 6px; }
  .screen .controlbook .pagerpanel.settings > .optcell > .buildline { margin: 0; line-height: 1.4; }
  .screen .controlbook .pagerpanel.settings > .fbline > .buildline { margin: 6px 0 0; line-height: 1.4; }
  .screen .controlbook .pagerpanel.settings .btn { min-height: 44px; padding-block: 5px; }
  /* records: rows go two-up; an assignment's reward sits beside its name
     instead of alone on a third line at 9px, and the note on highlighted
     rows leads the list instead of trailing it */
  .screen-stats .shoppane > .statrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
  .screen-stats .statrows > .statrow.assign { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; }
  .screen-stats .statrow.assign > :is(b, .adesc) { grid-column: 1; }
  .screen-stats .statrow.assign > small { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 12px; }
  .screen-stats .shoppane > .dailyline { order: -1; }
}
/* Review round 2: two-up stage rows keep each name on one line. */
@media (max-height: 500px) and (min-width: 600px) {
  .screen-stats .statrows > .statrow:not(.assign) > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
/* ==== END MOBILE PASS · menus ==== */


/* ==== MOBILE PASS 2026-10-10 · results: win and death results (iPhone landscape audit) ==== */
/* The round-14 and round-17 rules meant to lift the coins note to 11-12px are
   (0,3,0) and lose to `.result-ledger .stat small` (0,3,1), so it stayed 9px.
   (0,4,1) here. The same floor for New Best and the assignment line. */
.screen-results .result-ledger .stat small:is(.why, .best) { font-size: 11px; line-height: 1.3; }
.screen-results .result-best.newbest { font-size: 11px; }
.screen-results .result-paper .award { font-size: 11px; }
/* death: Stages / Share / Roster keep the quiet look at the full 44px target */
.screen-results .result-secondary .btn { min-height: 44px; }
/* death: the lost card is one line on a landscape phone (thumbnails elsewhere).
   This replaces LANDSCAPE PASS 2's display:none: death has no Run Details. */
.result-lost-line { display: none; }
@media (max-height: 500px) {
  .screen.result-death .result-lost { display: block; margin: 6px 0 0; padding: 3px 8px; border-radius: 2px; }
  .screen.result-death .result-lost > :not(.result-lost-line) { display: none; }
  .screen.result-death .result-lost .result-lost-line { display: block; margin: 0; font: 500 12px/1.35 var(--body); color: #d8dfe8; text-align: left; }
  .screen.result-death .result-lost-line b { margin-right: 4px; font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
}
/* death, landscape phone (two columns): the whole report fits the screen.
   The coins note leaves its cell for one line under the ledger, so row 2 is
   as short as row 1; the rest is spacing. */
@media (max-height: 500px) and (min-width: 641px) {
  .screen.screen-results.result-death { padding-top: calc(6px + var(--sat)); padding-bottom: max(6px, var(--sab)); }
  .screen.result-death .result-paper { padding-block: 8px; }
  .screen.result-death .result-head { margin-bottom: 6px; padding-top: 5px; }
  .screen.result-death .endstats.result-ledger { margin: 6px 0; }
  .screen.result-death .result-ledger .stat { padding-block: 5px; }
  .screen.result-death .endstats.result-ledger.has-dropped { position: relative; padding-bottom: 18px; }
  .screen.result-death .result-ledger .stat.dropped { position: static; }
  .screen.result-death .result-ledger .stat.dropped small.why { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .screen.result-death .result-actions { margin-top: 8px; }
  .screen.result-death .result-primary .btn { padding-block: 6px; gap: 2px; }
  .screen.result-death .result-revive-cost { margin-top: 4px; line-height: 1.3; }
  .screen.result-death .result-secondary { margin-top: 6px !important; padding-top: 6px; }
  .screen.result-death .result-paper .award { margin: 4px 0 0; line-height: 1.4; }
}
/* Review round 2: the shorter death card keeps the stamp off the student's
   eyes, and Retry keeps air above the secondary row when there is no Revive. */
@media (max-height: 500px) and (min-width: 641px) {
  .screen.result-death .result-stamp { top: 10px; }
  .screen.result-death .result-primary + .result-secondary { margin-top: 10px !important; }
}
/* ==== END MOBILE PASS · results ==== */


/* ==== MOBILE PASS 2026-10-10 · roster: crew picker and student sheet (iPhone landscape audit) ==== */
/* Crew picker. The inline `.card.char > *:not(.portrait)` rule (0,3,0) made
   the badge `position: relative`, so it fell into the card's flex flow: on a
   locked card "Locked" dropped onto the bottom edge and was half clipped, and
   "★ Captain" / "✓ 2" lost its corner. The unlock price is absolute inside
   the namebar-wide .charcopy, so `left + right` left it a negative width and
   it stacked one word per line; it sizes to its own text instead. */
.screen-roster.roster-chooser .card.char > .roster-order { position: absolute; z-index: 2; }
.screen-roster.roster-chooser .card.char .roster-locked-price { right: auto; width: max-content; white-space: nowrap; }
@media (max-height: 500px) and (orientation: landscape) {
  .screen-roster.roster-chooser .card.char > .roster-order { font-size: 11px; }
}
/* Student sheet, Shikigami tab: the lone-tile rule (0,5,0) outranked the
   short-landscape 4-column grid (0,3,0), so the tile grew to 215px square and
   its name and Locked state sat under Pick/Close. It now matches the 101-104px
   tiles of the other tabs. */
@media (max-height: 500px) {
  .screen .chardetail .cdbody[data-section="shikigami"] .cdskillgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
}
/* Student sheet on landscape phones: the body is the only scroller and shows
   no scroll cue, so Mastery (Character) and the Flash Step tiles' stars must
   fit above Pick/Close. Tighter gaps, a one-line base-technique node, the
   Character note folded away, and a footer that clears the home bar with its
   own padding instead of adding the two together. */
@media (max-height: 460px) and (orientation: landscape) {
  .screen .chardetail .cdbody { gap: 6px; }
  .screen .chardetail .cddeck { gap: 8px; }
  .screen .chardetail .cdbody[data-section="character"] .cdcategory-note { display: none; }
  .screen .chardetail .cdstep-root { padding: 4px 10px; margin-bottom: 4px; }
  .screen .chardetail .cdstep-root .tech-icon { flex-basis: 28px; width: 28px; height: 28px; }
  .screen .chardetail .cdstep-root > div:last-child { flex-direction: row; align-items: baseline; gap: 8px; }
  /* root bottom to the branch bracket: 4px margin + 8px gap - 10px bracket */
  .screen .chardetail .cdstep-root::after { height: 2px; }
  .screen .chardetail .cdfoot { padding-bottom: max(10px, var(--sab)); }
  /* Field Notes keeps sharing Pick's bottom edge */
  .screen .chardetail .cdfilm-label { padding-bottom: max(9px, var(--sab)); }
  /* what the player reads to choose stays at the 11px floor */
  .screen .chardetail .cdprofile { font-size: 11px; }
  .screen .chardetail .cdstat > span { font-size: 11px; }
  .screen .chardetail .cdtile-name { font-size: 11px; }
}
@media (max-width: 740px) and (orientation: landscape) {
  .screen .chardetail .btn.cdtab { font-size: 11px; }
}
/* Review round 2: the shikigami sigil stays inside its art row; every tile
   reserves two name lines so icons share one size; badges stay legible on
   light portraits; the category notes hide only where they cannot fit. */
@media (max-height: 500px) {
  .screen .chardetail .cdbody[data-section="shikigami"] .cdsigil { width: 40px; height: 40px; max-height: 40px; }
  .screen .chardetail .cdtile-name { line-height: 1.12; min-height: 2.24em; display: grid; place-items: center; }
  .screen-roster.roster-chooser .card.char > .roster-order:not(:empty) { padding: 2px 6px; border-radius: 3px; background: rgb(5 8 14 / .78); text-shadow: 0 1px 1px #000; }
  .screen .chardetail .cdbody[data-section="character"] .cdcategory-note { display: block; }
}
@media (max-height: 400px) and (orientation: landscape) {
  .screen .chardetail .cdbody:is([data-section="character"], [data-section="step"]) .cdcategory-note { display: none; }
}
/* ==== END MOBILE PASS · roster ==== */


/* ==== MOBILE PASS 2026-10-10 · r3-blueprint (round 3) ==== */
/* Pick Your Hour on landscape phones. showStages layout() now frames the
   whole school beside the dock (all ten rooms on screen, none under the
   card), and placeTags() gives each room a one-line name tag wherever one
   fits: .bp-tags on the view, [data-tag] on each tag it placed. Badges read
   open / cleared / sealed at a glance, and on touch the ring marks the
   selected room: the first focus used to stay on tonight's room after the
   player picked another, so two badges looked chosen. */
@media (max-height: 500px) {
  /* one colour per state, shared by a room's badge and its tag */
  .screen-stages .bproom.haunt { --bp-tag-edge: #e38590; --bp-tag-ink: #ffe1e6; }
  .screen-stages .bproom.done { --bp-tag-edge: #9fd8bf; --bp-tag-ink: #d6f0e3; }
  .screen-stages .bproom.sealed { --bp-tag-edge: #7f97ab; --bp-tag-ink: #a9bccb; }
  .screen-stages .bproom.tonight { --bp-tag-edge: #d8c49c; }
  .screen-stages .bproom[aria-expanded=true] { --bp-tag-edge: #f5d899; --bp-tag-ink: #fff2d2; }
  #ui[data-ui-input="keys"] .screen-stages .bproom.focus { --bp-tag-edge: #f5d899; --bp-tag-ink: #fff2d2; }

  /* name tags: laid out but hidden until placeTags() finds room for one,
     then a single 11px line that taps as its room. Longhand borders keep the
     dashed edge sealed rooms already wear; (0,5,0) beats the gold hover/focus
     tag, so on touch only the selected room's tag turns gold. */
  .screen-stages .bpview.bp-tags .bproom .bp-room-copy {
    display: flex; visibility: hidden; min-width: 0; max-width: none; gap: 0; padding: 2px 6px 2px 5px; transform: none;
    border-left-width: 2px; border-left-color: var(--bp-tag-edge, #a2b6c5); border-radius: 0 2px 2px 0;
    background: #081326eb; color: var(--bp-tag-ink, #d4e4ef); box-shadow: 0 1px 4px #02071080;
  }
  .screen-stages .bpview.bp-tags .bproom .bp-room-copy[data-tag] { visibility: visible; }
  .screen-stages .bpview.bp-tags .bproom .bpname { font: 600 11px/13px var(--body); }
  .screen-stages .bpview.bp-tags .bproom .bpstat { display: none; }
  .screen-stages .bpview.bp-tags .bproom[aria-expanded=true] .bp-room-copy { background: #142338; }

  /* badges: open and cleared rooms are filled, sealed ones stay hollow and
     dashed with a padlock on the corner; numerals at the 11px floor */
  .screen-stages .bproom .bphour { font-size: 11px; }
  .screen-stages .bproom.haunt .bphour { background: #4a1b2b; border-color: #e38590; color: #ffe1e6; }
  .screen-stages .bproom.done .bphour { background: #173a2d; border-color: #9fd8bf; color: #d6f0e3; }
  .screen-stages .bproom.sealed .bphour { background: #081326; border-color: #7f97ab; color: #93a9bb; }
  .screen-stages .bproom.tonight .bphour { border: 2px solid #d8c49c; }
  .screen-stages .bproom.sealed .bphour::after {
    content: ''; position: absolute; top: -7px; right: -6px; width: 11px; height: 12px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12'%3E%3Cpath d='M3.5 6V4.2a2 2 0 0 1 4 0V6' fill='none' stroke='%23081326' stroke-width='3.4'/%3E%3Crect x='1.5' y='5.5' width='8' height='5.5' rx='1.4' fill='%23081326' stroke='%23081326' stroke-width='2'/%3E%3Cpath d='M3.5 6V4.2a2 2 0 0 1 4 0V6' fill='none' stroke='%23b4c6d4' stroke-width='1.3'/%3E%3Crect x='2' y='6' width='7' height='4.5' rx='.8' fill='%23b4c6d4'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* the selected room is gold and ringed; a touch never leaves a second
     ring on the room that merely held the first focus */
  .screen-stages .bproom.btn[aria-expanded=true] .bphour { background: #d8c49c; border-color: #f5d899; color: #081326; outline: 2px solid #fff1ce; outline-offset: 1px; }
  #ui:not([data-ui-input="keys"]) .screen-stages .bproom.btn.focus:not(:focus-visible):not([aria-expanded=true]) .bphour { outline: none; }

  /* dock: Play reads at the size of the room details above it */
  .screen-stages .bppop .bpactions .btn.primary { font-size: 14px; }
}
/* ==== END MOBILE PASS · r3-blueprint ==== */


/* ==== MOBILE PASS 2026-10-10 · r3-sheets (round 3) ==== */
/* A locked special or summon names its price on the tile (_charDetail), in
   the coin gold of the balance above it; muted when the wallet is short. */
.screen .chardetail .cdtile-state.cdtile-price { color: #efcc78; font-weight: 650; font-variant-numeric: tabular-nums; }
.screen .chardetail .cdtile-state.cdtile-price.short { color: #a99c80; }
@media (max-height: 500px) and (orientation: landscape) {
  /* The deck was capped at 440px and centred, so on i15/max the section
     heads and tiles sat 33-58px in from the stats and Mastery rows. It now
     spans the body and shares their left edge. Tiles take a fixed height
     instead of a square, so a wider tile never costs height: art, names and
     stars stay the same size on every tab and phone, and the 375px SE keeps
     its 101px row so Mastery and the Flash Step stars still clear the footer. */
  .screen .chardetail .cddeck { max-width: 640px; margin-inline: 0; }
  .screen .chardetail .btn.cdskill { aspect-ratio: auto; height: clamp(96px, 27vh, 104px); }
  /* The Flash Step bracket was drawn for two columns (25%-75%), so in this
     four-tile row its ends dropped into the gaps. It now runs from the first
     tile's centre to the last (8px gap: 12.5% - 3px) with a drop to each. */
  .screen .chardetail .cdbody[data-section="step"] .cdskillgrid::before {
    left: calc(12.5% - 3px); right: calc(12.5% - 3px);
    background:
      linear-gradient(color-mix(in srgb, var(--c) 45%, #283644), color-mix(in srgb, var(--c) 45%, #283644)) 33.333% 0 / 1px 100% no-repeat,
      linear-gradient(color-mix(in srgb, var(--c) 45%, #283644), color-mix(in srgb, var(--c) 45%, #283644)) 66.667% 0 / 1px 100% no-repeat;
  }
  /* Labels the player reads stay at the 11px floor; Pick/Close read as the
     sheet's two actions rather than captions on a 44px bar. */
  .screen .chardetail .cdfilm-label .kicker, .screen .chardetail .cdfilm-code, .screen .chardetail .weapon { font-size: 11px; }
  .screen .chardetail .cdtile-index { font-size: 11px; }
  .screen .chardetail .cdfoot .btn { font-size: 13px; }
  /* Skill details (the buy) on a landscape phone: the 440px single column is
     taller than the i15's 337px dialog, so Done sat below the fold and a
     Flash Step rank track pushed Upgrade to the bottom edge. Two columns
     instead: what the skill does on the left, the buy at the top right where
     the eye lands after the name, Done at the bottom right. The tallest case
     (a summon's four facts) comes to about 305px, so nothing scrolls. */
  .screen .chardetail .cdskillmodal { width: min(620px, calc(100vw - 32px - var(--sal) - var(--sar))); }
  .screen .chardetail .cdskillmodal .cdinspect {
    display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-rows: repeat(5, auto);
    column-gap: 20px; row-gap: 8px; align-content: start;
  }
  .screen .chardetail .cdskillmodal .cdinspect > * { grid-column: 1; min-width: 0; }
  .screen .chardetail .cdskillmodal .cdinspect > .cdinspect-action { grid-column: 2; grid-row: 1 / 5; align-self: start; margin-top: 0; }
  .screen .chardetail .cdskillmodal .cdinspect > .cdmodal-close { grid-column: 2; grid-row: 5; align-self: end; }
  .screen .chardetail .cdskillmodal .cdinspect-desc { max-width: none; }
}

/* ==== END MOBILE PASS · r3-sheets ==== */


/* ==== MOBILE PASS 2026-10-10 · r3-deck (round 3) ==== */
/* Collection, phones in either orientation: a thumbnail prints its title at
   about 6px, so the name sits under the card as it does in the hand (ui.js
   showDeck paint). A free card has no "Take" line under it now; a lost or
   unusable card keeps its reason under the name. Two lines at most, each
   15px like the tag it replaces; the zoom and the aria-label carry it whole. */
.deck-phone .flow-card .deck-card-name { max-width: calc(var(--tct) * 75); line-height: 1.25; text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.deck-phone .flow-card .deck-card-name + .flow-tag { margin-top: -4px; }
/* Your Hand (pause): the name under each card and the readable rule beside
   a zoomed card exist only on a landscape phone (ui.js HAND_LANDSCAPE, the
   same query). Desktop and portrait keep their faces, which read there. */
.hand-name, .handzoom-info { display: none; }
@media (max-height: 500px) and (min-width: 600px) {
  /* ui.js _fitHand measures this chrome, so five cards fit across an SE
     (was a sixth of the last card off the edge) and the row clears the home
     bar on its own padding instead of 18px on top of it */
  #ui > .screen.screen-pausehand { padding-bottom: max(10px, var(--sab)); }
  .screen-pausehand .hand-cards { gap: 6px; }
  .screen.screen-pausehand .hand-slot { gap: 4px; padding: 4px 4px 6px; }
  .screen-pausehand .hand-name { display: block; max-width: calc(var(--tc) * 75); color: #eef4fa; font: 600 13px/1.25 var(--body);
    letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* a tapped card stands beside its rule; any tap still closes it */
  .pullreveal.handzoom { display: grid; grid-template-columns: auto minmax(0, 280px); grid-template-rows: 1fr auto auto 1fr;
    justify-content: center; align-items: center; gap: 14px 24px; }
  .pullreveal.handzoom > * { margin: 0; }
  .pullreveal.handzoom > .pullreveal-cards { grid-column: 1; grid-row: 1 / -1; }
  .pullreveal.handzoom > .handzoom-info { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 8px; text-align: left; }
  .pullreveal.handzoom > .hint { grid-column: 2; grid-row: 3; text-align: left; }
  .handzoom-info > p { margin: 0; letter-spacing: 0; }
  .handzoom-info .handzoom-kicker { color: var(--cyan); font: 700 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
  .handzoom-info .handzoom-rule { color: #eef4fa; font: 600 16px/1.35 var(--body); }
  .handzoom-info .handzoom-req { color: #a8bacb; font: 500 13px/1.3 var(--body); }
}
/* the Collection/Hand tabs meet the 44px target floor on landscape phones;
   chooseView now restores the collection's scroll after the refit */
@media (max-height: 500px) { .screen.deck-phone .btn.deck-view.deck-view { min-height: 44px; } }
/* ==== END MOBILE PASS · r3-deck ==== */


/* ==== MOBILE PASS 2026-10-10 · r3-records (round 3) ==== */
/* Field Report: showFeedback wraps the field and Send in .fbform. Outside
   short landscape it lays them out exactly as before: one centred column at
   the screen's own gap, both 560px wide. */
.screen-feedback > .fbform { display: flex; flex-direction: column; align-items: center; gap: inherit; width: 100%; }
.screen-feedback > .fbform > .fbtext { width: min(560px, 100%); }
.screen-feedback > .fbform > .row { width: min(560px, 100%); }
.screen-feedback > .fbform > .row .btn { width: 100%; margin: 0; }
@media (max-height: 500px) {
  /* title: the music chip reads at the 11px floor like every other label */
  .screen.screen-title .mutechip { font-size: 11px; letter-spacing: .12em; }
}
@media (max-height: 500px) and (min-width: 640px) {
  /* records: showStats moves the tabs into the masthead between the title
     and ✕ (same media query), so every list starts ~70px higher and the tabs
     stay put while Assignments scrolls. Each tab runs from the ✕'s top edge
     down to the masthead rule, so the current tab's underline sits on it. */
  .screen-stats.has-menuhead > .screenhead { flex-wrap: nowrap; column-gap: 14px; }
  .screen-stats.has-menuhead > .screenhead .heading { flex: 0 0 auto; }
  .screen-stats > .screenhead > .shoptabs { flex: 0 1 480px; align-self: stretch; width: auto; min-width: 0; margin: 0 0 -6px auto; gap: 2px; border-bottom: 0; }
  .screen-stats > .screenhead > .shoptabs > .shoptab { min-width: 0; min-height: 44px; padding-inline: 4px; white-space: nowrap; overflow: hidden; }
}
@media (max-height: 500px) and (min-width: 600px) {
  /* records › assignments: compact cards, the reward on the name line so
     the description gets the full width (one line for all but the longest),
     and three columns wherever a 214px card fits (iPhone 12 mini and up;
     the SE keeps two). */
  .screen-stats .shoppane[data-pane="board"] { gap: 6px; }
  .screen-stats .shoppane[data-pane="board"] > .statrows { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 5px 6px; }
  .screen-stats .statrows > .statrow.assign.assign { align-items: baseline; gap: 1px 8px; padding: 5px 9px 6px 10px; }
  .screen-stats .statrow.assign.assign > b { grid-area: 1 / 1; line-height: 1.25; }
  .screen-stats .statrow.assign.assign > small { grid-area: 1 / 2; }
  .screen-stats .statrow.assign.assign > .adesc { grid-area: 2 / 1 / 3 / 3; line-height: 1.35; letter-spacing: 0; }
  /* records › stages: stars hold the right-hand column of every row and the
     score sits just before them, so no empty score column floats the stars
     mid-row and stars still line up whether or not a room has a score */
  .screen-stats .shoppane[data-pane="stages"] > .statrows > .statrow { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; }
  .screen-stats .shoppane[data-pane="stages"] > .statrows > .statrow > small { grid-area: 1 / 2; }
  .screen-stats .shoppane[data-pane="stages"] > .statrows > .statrow > .sstars { grid-area: 1 / 3; }
  /* Field Report: field and Send share one row right under the masthead, so
     both stay above the on-screen keyboard (it covers roughly the lower half
     of a landscape phone); the note follows them as helper text. Nothing
     moves on focus, so a tap on Send cannot land on a shifting layout. */
  .screen-feedback.has-menuhead > .fbform { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; width: min(700px, 100%); }
  .screen-feedback.has-menuhead > .fbform > .fbtext { width: auto; height: 84px; min-height: 0; margin: 0; resize: none; }
  .screen-feedback.has-menuhead > .fbform > .row { width: auto; flex-wrap: nowrap; align-items: stretch; }
  .screen-feedback.has-menuhead > .fbform > .row .btn { height: auto; padding-inline: 12px; }
  .screen-feedback.has-menuhead > .blurb { order: 1; width: min(700px, 100%); max-width: 100%; }
  .screen-feedback.has-menuhead > .flexspacer.bot { order: 2; }
}
/* ==== END MOBILE PASS · r3-records ==== */


/* ==== MOBILE PASS 2026-10-10 · r4-hud (in-run HUD on landscape iPhones) ==== */
/* Touch phones held sideways only (body.touch + short landscape): desktop,
   tablets and portrait keep their HUD. Four things the layout flags miss:
   1. The meter words were 7-8px, and DOMAIN READY was white type on a bar that
      goes white-hot when ready, so the one state worth reading vanished. The
      words grow (the bars by 1px to hold them), get a hard outline, and READY
      is dark ink on the lit bar: 5.4:1 or better on all four student colours
      before the glow even brightens it (white managed 1.4-3.5:1).
   2. Life and XP at arm's length: a 10px outlined life number, a 6px XP bar.
   3. Upgrade is 36px tall. An invisible margin makes its target 44px, the
      trick Pause already uses, so nothing moves: the notice lane and the boss
      labels are measured from the button's own box, not this margin.
   4. Notices are centred, the action arc is not. On a narrow notched phone a
      380px toast ran under the Shikigami button. The lane now stays left of
      the arc (Shikigami's rim and ring sit 146px in from the right inset, plus
      a 6px gap); on wider phones the 380px cap wins and nothing changes. */
@media (max-height: 500px) and (orientation: landscape) {
  body.touch .meterstack .track.ce { height: 14px; }
  body.touch .track.dom { height: 16px; }
  body.touch .meterword { font-size: 10px; line-height: 1; letter-spacing: .1em; color: #fff;
    text-shadow: 1px 0 0 #05060d, -1px 0 0 #05060d, 0 1px 0 #05060d, 0 -1px 0 #05060d; }
  body.touch .domain .label { font-size: 11px; line-height: 1; letter-spacing: .04em; }
  body.touch .domain.ready .label { color: #160a22; text-shadow: 0 0 3px #ffffffc0; }
  body.touch .domain.locked .label { color: #f2f4ff;
    text-shadow: 1px 0 0 #05060d, -1px 0 0 #05060d, 0 1px 0 #05060d, 0 -1px 0 #05060d; }

  body.touch .hud .track.hp .val { font-size: 10px; letter-spacing: 0;
    text-shadow: 1px 0 0 #2a0a16, -1px 0 0 #2a0a16, 0 1px 0 #2a0a16, 0 -1px 0 #2a0a16; }
  body.touch .hud .track.xp { height: 6px; }

  /* 2px out at the top keeps it clear of Pause's own 4.4px margin above */
  body.touch #btn-bank::after { content: ''; position: absolute; inset: -2px -2px -6px; }

  /* menu-open keeps its own 360px cap */
  body.touch:not(.menu-open) #ui {
    --notice-width: min(380px, calc(100vw - 2 * max(var(--sal), var(--sar)) - 40px),
      max(220px, calc(100vw - 2 * var(--sar) - 304px))); }
}
/* ==== END MOBILE PASS · r4-hud ==== */

/* ==== MOBILE PASS 2026-10-10 · r5-club (Clubhouse crew/store/deck on landscape iPhones) ==== */
/* Clubhouse tabs (all three screens): 44px targets, bar height unchanged.
   LANDSCAPE PASS made them 40px tall inside 2px of nav padding. The padding
   goes to the tab instead, so the bar is the same 45px and nothing under it
   moves, the Deck screen included (ui.js showDeck measures this bar). */
@media (max-height: 500px) {
  .screen.clubhouse-screen > .clubhouse-tabs { padding-block: 0; }
  .screen.clubhouse-screen .clubhouse-tab { min-height: 44px; }
}
/* Crew: the crew slots (the Coins purchase on this tab) sat under the four
   students with their chips 30-35px below the fold of an iPhone and no
   scroll cue, and on a 667px SE their prices printed at 10px. They are now
   one strip under the students: "Crew slots" stacked on two lines, then
   four 44px chips with the state or price at 11px. The students take
   whatever height is left (about 180px on an iPhone, 200px before), so the
   strip always shows. The "Your crew" heading gives way: the selected Crew
   tab already names it. Under 600px wide the students are two rows and keep
   their scroll. */
@media (max-height: 500px) and (min-width: 600px) {
  .screen.screen-clubhouse[data-club-tab="crew"] > .clubhouse-body { padding: 8px 4px 6px; }
  .screen-clubhouse[data-club-tab="crew"] .clubhouse-body > .club-section-title { display: none; }
  .screen-clubhouse[data-club-tab="crew"] .clubhouse-body > .club-heroes { flex: 1 1 0; grid-auto-rows: minmax(150px, 1fr); }
  .screen.screen-clubhouse[data-club-tab="crew"] .btn.club-hero { height: auto; min-height: 0; }
  .screen-clubhouse[data-club-tab="crew"] .clubhouse-body > .club-capacity { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
  .screen-clubhouse[data-club-tab="crew"] .club-capacity > .club-section-title { flex: none; width: min-content; margin: 0; font-size: 14px; line-height: 1.1; }
  .screen-clubhouse[data-club-tab="crew"] .club-capacity > .club-slots { flex: 1 1 0; min-width: 0; gap: 6px; }
  .screen.screen-clubhouse[data-club-tab="crew"] .btn.club-slot { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center;
    min-height: 44px; gap: 1px; padding: 4px 6px; text-align: center; }
  .screen-clubhouse[data-club-tab="crew"] .club-slot .club-slot-mark { display: none; }
  .screen-clubhouse[data-club-tab="crew"] .club-slot .club-slot-label { font-size: 12px; }
  .screen.screen-clubhouse[data-club-tab="crew"] .club-slot .club-slot-state { font-size: 11px; line-height: 1.2; }
}
/* Store: the native Support the club shelf (boosts, Supporter, Restore; app
   builds only) sat wholly under the fold, its heading 57px of margin and
   padding below the pull tiles, and on a 667px SE (the portrait rule at
   max-width 680px) it stacked each 54px button on its own row. The margins
   tighten so its heading shows above the fold (about 330-350px down on a
   375-390px phone) as the cue to scroll, and the shelf is two 44px buttons
   to a row. Web builds have no shelf; their tiles just sit about 15px higher. */
@media (max-height: 500px) {
  .screen.screen-clubhouse[data-club-tab="store"] > .clubhouse-body { padding-top: 10px; }
  .screen-clubhouse[data-club-tab="store"] .clubhouse-body > .club-note { margin-bottom: 8px; }
  .screen-clubhouse[data-club-tab="store"] .clubhouse-body > .club-pulls { margin: 8px 0 10px; }
  .screen-clubhouse[data-club-tab="store"] .clubhouse-body > .club-patron { margin-top: 12px; padding-top: 10px; }
  .screen-clubhouse .club-patron .patronlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .screen.screen-clubhouse .club-patron .patronlist .btn { min-height: 44px; padding: 0 12px; font-size: 13px; }
}
/* ==== END MOBILE PASS · r5-club ==== */

/* ==== DECK RAIL 2026-10-12 (Chris: cards take the screen on a landscape phone) ====
   ui.js fit() sets .deck-rail on the deck screen on a landscape phone. The
   masthead and the tabs stand in two thin columns on the left, their words
   reading bottom to top; the cards take the rest at nearly full height.
   Column A: close, the Clubhouse sections (or the title), the coins.
   Column B: whose deck, Collection / Hand.  Then the pulls (Build Deck only).
   The Clubhouse's Crew and Store tabs share column A so the rail never jumps. */
#ui > .screen.screen-deck.deck-rail {
  display: grid; overflow: hidden; gap: 0 10px;
  grid-template-columns: 50px 52px auto minmax(0, 1fr);
  grid-template-rows: 44px auto minmax(0, 1fr) auto;
  grid-template-areas:
    "close crew  tools main"
    "tabs  crew  tools main"
    "tabs  views tools main"
    "coins views tools main";
  padding: 6px max(8px, var(--sar)) max(6px, var(--sab)) max(6px, var(--sal));
  height: 100dvh; min-height: 0;
}
#ui > .screen.deck-rail > :is(.flexspacer, .flexspacer.bot) { display: none; }
#ui > .screen.deck-rail::before { display: none; }
#ui > .screen.deck-rail > .screenhead,
#ui > .screen.deck-rail > .screenhead > .deck-bar { display: contents; }

/* column A */
#ui > .screen.deck-rail > .screenhead > .screenclose { grid-area: close; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; align-self: start; justify-self: center; }
#ui > .screen.deck-rail > .screenhead > .heading {
  grid-area: tabs; writing-mode: vertical-rl; rotate: 180deg; transform: none !important; align-self: center; justify-self: center;
  margin: 0; font-size: 22px; line-height: 1; white-space: nowrap; letter-spacing: .02em;
}
#ui > .screen.deck-rail.clubhouse-screen > .screenhead > .heading { display: none; }
#ui > .screen.deck-rail > .screenhead > .heading::before, #ui > .screen.deck-rail > .screenhead > .heading::after { display: none; }
/* contain: size keeps the vertical words from sizing the rail's rows; each
   group simply fills its slot (the rows are close / crew / tabs / coins) */
#ui > .screen.deck-rail > .clubhouse-tabs {
  contain: size; align-self: stretch; height: auto; max-height: none; grid-area: tabs; display: flex; flex-direction: column; gap: 4px; margin: 8px 0; padding: 0; border: 0; min-height: 0; width: auto;
}
#ui > .screen.deck-rail > .clubhouse-tabs > .btn.clubhouse-tab {
  flex: 1 1 0; min-height: 0; min-width: 44px; width: 100%; margin: 0; padding: 6px 0;
  writing-mode: vertical-rl; rotate: 180deg; transform: none !important; font-size: 15px; letter-spacing: .02em; white-space: nowrap;
  border: 0; border-radius: 6px; background: transparent; box-shadow: none;
}
/* the selected section's bar faces the cards (rotated, so it is the physical left) */
#ui > .screen.deck-rail > .clubhouse-tabs > .btn.clubhouse-tab[aria-selected="true"] { background: #54e6f512; box-shadow: inset 3px 0 0 var(--menu-accent); color: #eef8ff; }
#ui > .screen.deck-rail > .screenhead > .deck-bar > .deck-coins {
  grid-area: coins; writing-mode: vertical-rl; rotate: 180deg; transform: none !important; align-self: end; justify-self: center;
  font: 700 12px/1 var(--body); letter-spacing: .02em; white-space: nowrap; padding: 4px 0; margin: 0;
}

/* column B */
#ui > .screen.deck-rail > .screenhead > .deck-bar > .deck-crew { grid-area: crew; display: flex; flex-direction: column; gap: 4px; align-items: center; margin: 0; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; flex: none; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn .crew-name { display: none; }
#ui > .screen.deck-rail > .deck-views {
  contain: size; align-self: stretch; height: auto; max-height: none; grid-area: views; display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 0; border: 0; height: auto; min-height: 0;
}
#ui > .screen.deck-rail > .deck-views > .btn.deck-view {
  flex: 1 1 auto; min-height: 0; min-width: 44px; width: 100%; margin: 0; padding: 6px 0; gap: 5px;
  writing-mode: vertical-rl; rotate: 180deg; transform: none !important; font-size: 12px; letter-spacing: 0; white-space: nowrap;
  border: 0; border-radius: 6px; background: transparent; box-shadow: none;
}
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[aria-selected="true"] { background: #54e6f512; box-shadow: inset 3px 0 0 var(--menu-accent); color: #eef8ff; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view small { font-size: 11px; }

/* the pulls: a slim column of tall tiles beside the row (Build Deck only) */
#ui > .screen.deck-rail > .deck-phone-tools { grid-area: tools; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0; border: 0; min-height: 0; }
#ui > .screen.deck-rail > .deck-phone-tools[hidden], #ui > .screen.deck-rail > .deck-phone-tools > [hidden] { display: none !important; }
#ui > .screen.deck-rail .deck-collection-tools { display: flex; flex-direction: column; gap: 8px; width: 104px; }
#ui > .screen.deck-rail .deck-collection-tools > .btn { flex: 0 0 auto; min-height: 64px; width: 100%; margin: 0; padding: 8px 6px; font-size: 13px; line-height: 1.2; white-space: normal; }
#ui > .screen.deck-rail .deck-collection-tools > .btn small { display: block; font-size: 11px; }
/* protecting lives on the card now */
#ui > .screen.deck-rail .deck-hand-tools { display: none !important; }

/* the cards */
#ui > .screen.deck-rail > :is(.deck-album, .deck-hand) { grid-area: main; min-height: 0; height: 100%; width: 100%; position: relative; }
#ui > .screen.deck-rail > :is(.deck-album, .deck-hand)[hidden] { display: none; }
#ui > .screen.deck-rail > .deck-survey { grid-area: main; align-self: start; z-index: 4; }
#ui > .screen.deck-rail .deck-album .deck-flow {
  position: absolute; inset: 0; overflow: auto hidden; overscroll-behavior: contain; touch-action: pan-x;
  scrollbar-width: none;
}
#ui > .screen.deck-rail .deck-album .deck-flow::-webkit-scrollbar { display: none; }
#ui > .screen.deck-rail .deck-album .deck-stage {
  display: flex; flex-wrap: nowrap; grid-template-columns: none; align-items: center; gap: 12px;
  height: 100%; width: max-content; min-width: 100%; padding: 0 4px; margin: 0;
}
#ui > .screen.deck-rail .deck-stage > .btn.flow-card { flex: none; touch-action: pan-x; gap: 6px; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card .flow-tag { font-size: 12px; max-width: calc(var(--tct) * 75); }
#ui > .screen.deck-rail .deck-stage > .deck-note { flex: none; width: min(340px, 60vw); align-self: center; margin: 0; }
#ui > .screen.deck-rail .deck-hand { display: flex; flex-direction: column; gap: 6px; }
#ui > .screen.deck-rail .deck-hand .deck-fan {
  flex: 1 1 0; display: flex; flex-wrap: nowrap; grid-template-columns: none; align-items: center; justify-content: safe center; gap: 10px;
  overflow: auto hidden; overscroll-behavior: contain; touch-action: pan-x; scrollbar-width: none;
  padding: 0 8px; min-height: 0;
}
#ui > .screen.deck-rail .deck-hand .deck-fan::-webkit-scrollbar { display: none; }
#ui > .screen.deck-rail .deck-hand .deck-fan > * { touch-action: pan-x; }
#ui > .screen.deck-rail .deck-hand .deck-fan > :is(.btn.fan-card, .btn.fan-locked, .fan-empty) { flex: none; width: calc(var(--tcf) * 75); position: relative; }
/* spare and locked slots are slim columns, so the cards in hand get the width */
#ui > .screen.deck-rail .deck-hand .deck-fan > :is(.fan-empty, .btn.fan-locked) { width: 64px; min-width: 64px; height: calc(var(--tcf) * 105); align-self: center; padding: 8px 4px; }
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-empty :is(span, small) { writing-mode: vertical-rl; rotate: 180deg; transform: none !important; }
#ui > .screen.deck-rail .deck-hand .deck-fan > .btn.fan-locked .tc-blank { width: 100%; height: 100%; }
#ui > .screen.deck-rail .deck-hand .deck-hand-meta { flex: none; margin: 0; padding: 0 0 2px; justify-content: center; }

/* the shield chip: tap it to protect this slot */
#ui > .screen.deck-rail .fan-protect-chip, .screen.deck-phone .fan-protect-chip {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px; white-space: nowrap;
  border-radius: 999px; border: 1px solid #ffd885; background: rgb(18 14 4 / .92); color: #ffe1a0;
  font: 600 12px/1 var(--body); letter-spacing: 0; box-shadow: 0 2px 10px #0009; cursor: pointer;
}
.screen.deck-phone .fan-protect-chip svg { width: 15px; height: 15px; flex: none; color: #ffd885; }
.screen.deck-phone .fan-protect-chip b { font-weight: 700; color: #ffd885; }
.screen.deck-phone .fan-protect-chip.needs-rank { border-color: #8d7a52; color: #c6b48a; background: rgb(12 12 16 / .9); }
/* an invisible margin makes the chip a 44px target without growing it */
.screen.deck-phone .fan-protect-chip::after { content: ''; position: absolute; inset: -6px -6px; }
/* The Clubhouse's Crew and Store tabs stand on the same rail as its Deck, so
   switching sections never moves the controls (touch landscape phones). */
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen {
    display: grid; overflow: hidden; gap: 0 12px;
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-rows: 44px minmax(0, 1fr) auto;
    grid-template-areas: "close main" "tabs main" "coins main";
    padding: 6px max(8px, var(--sar)) max(6px, var(--sab)) max(6px, var(--sal));
    height: 100dvh; min-height: 0;
  }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen::before,
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .flexspacer { display: none; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .screenhead { display: contents; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .screenhead > .heading { display: none; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .screenhead > .screenclose { grid-area: close; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; align-self: start; justify-self: center; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .screenhead > .club-coins {
    grid-area: coins; writing-mode: vertical-rl; rotate: 180deg; transform: none !important; align-self: end; justify-self: center;
    font: 700 12px/1 var(--body); white-space: nowrap; padding: 4px 0; margin: 0;
  }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs {
    contain: size; align-self: stretch; height: auto; max-height: none; grid-area: tabs;
    display: flex; flex-direction: column; gap: 4px; margin: 8px 0; padding: 0; border: 0; width: auto;
  }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab {
    flex: 1 1 0; min-height: 0; min-width: 44px; width: 100%; margin: 0; padding: 6px 0;
    writing-mode: vertical-rl; rotate: 180deg; transform: none !important; font-size: 15px; letter-spacing: .02em; white-space: nowrap;
    border: 0; border-radius: 6px; background: transparent; box-shadow: none;
  }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab[aria-selected="true"] { background: #54e6f512; box-shadow: inset 3px 0 0 var(--menu-accent); color: #eef8ff; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-body { grid-area: main; min-height: 0; height: 100%; overflow: hidden auto; margin: 0; }
}
/* -- iteration 2 (judge round 1) -- */
/* no pull column: the cards start right after the rail */
#ui > .screen.screen-deck.deck-rail.rail-no-tools {
  grid-template-columns: 50px 52px minmax(0, 1fr);
  grid-template-areas:
    "close crew  main"
    "tabs  crew  main"
    "tabs  views main"
    "coins views main";
}
#ui > .screen.deck-rail.rail-no-tools > .deck-phone-tools { display: none !important; }

/* Collection / Hand is a segmented switch, unlike the section tabs beside it */
#ui > .screen.deck-rail > .deck-views { padding: 3px; border: 1px solid #a9cdec33; border-radius: 10px; background: #0a1220; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view { border-radius: 7px; color: #9fb3c4; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[aria-selected="true"] { background: #54e6f51f; box-shadow: none; color: #eef8ff; outline: 1px solid #54e6f566; outline-offset: -1px; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view { width: 44px; }

/* captions: the rule, readable, under the card (the name is big on the face) */
#ui > .screen.deck-rail .deck-card-rule {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  width: calc(var(--tct) * 75); max-width: 100%; margin: 0 auto; text-align: center;
  font: 500 12px/1.3 var(--body); letter-spacing: 0; color: #c9d6e2; text-transform: none; white-space: normal;
}
#ui > .screen.deck-rail .deck-fan .deck-card-rule { width: calc(var(--tcf) * 75); }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card .flow-tag { font-size: 11px; color: #ffb8a8; }

/* one-tap add on a usable card in the row */
#ui > .screen.deck-rail .flow-add-chip {
  position: absolute; top: calc(var(--tct) * 105 * .15); right: 10px; z-index: 3;
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border-radius: 999px;
  border: 1px solid #7fe8ff; background: rgb(6 20 28 / .9); color: #dff9ff; font: 700 13px/1 var(--body); letter-spacing: 0;
  box-shadow: 0 2px 10px #0009;
}
#ui > .screen.deck-rail .flow-add-chip::after { content: ''; position: absolute; inset: -7px -6px; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card { position: relative; }

/* the blanks as one tile */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more { width: calc(var(--tct) * 75); }
#ui > .screen.deck-rail .tc-more {
  width: calc(var(--tct) * 75); height: calc(var(--tct) * 105); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed #a9cdec40; border-radius: 10px; background: #0a1220aa; color: #9fb3c4;
}
#ui > .screen.deck-rail .tc-more .tc-more-n { font: 700 46px/1 var(--display); color: #dfeaf4; }
#ui > .screen.deck-rail .tc-more .tc-more-label { font: 600 14px/1.2 var(--body); }
#ui > .screen.deck-rail .tc-more .tc-more-how { font: 600 12px/1.2 var(--body); color: #ffe1a0; }

/* the hand: no slot row; Safe and Protect wear the card's top-right corner */
#ui > .screen.deck-rail .deck-fan .btn.fan-card { gap: 8px; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .deck-position {
  position: absolute; top: calc(var(--tcf) * 105 * .15); right: 8px; z-index: 3; margin: 0; padding: 0; font-size: 0; line-height: 0; color: transparent;
}
#ui > .screen.deck-rail .deck-fan .deck-position > .fan-safe {
  display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 9px; border-radius: 999px;
  background: #ffd885; color: #241a04; font: 700 12px/1 var(--body); box-shadow: 0 2px 8px #0008;
}
#ui > .screen.deck-rail .deck-fan .deck-position > .fan-safe::before { content: '\1F6E1\FE0E'; font-size: 12px; }
/* badges sit on the art's corner, under the title bar, never over the name */
#ui > .screen.deck-rail .fan-protect-chip { top: calc(var(--tcf) * 105 * .15); right: 8px; left: auto; bottom: auto; transform: none; min-height: 32px; padding: 0 10px; }
#ui > .screen.deck-rail .deck-fan > .fan-add .fan-protect-chip { top: auto; bottom: 10px; left: 50%; right: auto; transform: translateX(-50%); padding: 0 6px; font-size: 11px; }
#ui > .screen.deck-rail .deck-fan > .fan-add .fan-protect-chip span { display: none; }

/* the open slots as one "+ Add" column */
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-empty.fan-add {
  width: 72px; min-width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed #ffd88566; border-radius: 10px; background: #12100a80; color: #ffe1a0;
}
#ui > .screen.deck-rail .deck-fan > .fan-add .fan-add-plus { font: 700 30px/1 var(--display); writing-mode: horizontal-tb; rotate: 0deg; }
#ui > .screen.deck-rail .deck-fan > .fan-add :is(span, small) { writing-mode: horizontal-tb; rotate: 0deg; transform: none; text-align: center; }
#ui > .screen.deck-rail .deck-fan > .fan-add span { font: 600 12px/1.2 var(--body); }
#ui > .screen.deck-rail .deck-fan > .fan-add small { font: 500 11px/1.2 var(--body); color: #c6b48a; }

/* the awakening line is news, not an error */
#ui > .screen.deck-rail .deck-hand-meta .btn.deck-awakening-status { color: #ffd885; min-height: 44px; }

/* the Protect sheet stands on a panel */
#ui .deck-phone .pullreveal.deck-protect-confirm, #ui .deck-rail ~ .pullreveal.deck-protect-confirm { align-content: center; }
.screen.deck-phone .pullreveal.deck-protect-confirm > :is(.deck-slot-title, .deck-slot-price, .row) { max-width: 460px; }
.screen.deck-phone .pullreveal.deck-protect-confirm > .deck-slot-price { line-height: 1.45; }

/* the Build Deck pull tiles: label over price, always */
#ui > .screen.deck-rail .deck-collection-tools > .btn { flex-direction: column; gap: 4px; }
/* one spare column: "+ Add" over the locked slot */
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare { flex: none; display: flex; flex-direction: column; gap: 8px; width: 72px; height: calc(var(--tcf) * 105); align-self: center; }
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare > .fan-empty.fan-add { flex: 1 1 0; height: auto; min-height: 0; width: 100%; }
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare > .btn.fan-locked { flex: 0 0 auto; height: auto; min-height: 76px; width: 100%; padding: 6px 2px; }
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare > .btn.fan-locked .tc-blank { height: auto; gap: 3px; }
/* -- iteration 4 (judge round 2) -- */
/* the "+ Add" tile lives in .fan-spare now: style it wherever it sits */
#ui > .screen.deck-rail .deck-fan .fan-empty.fan-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%;
  border: 2px dashed #ffd88570; border-radius: 10px; background: #14100680; color: #ffe1a0; font-size: 14px;
}
#ui > .screen.deck-rail .deck-fan .fan-add .fan-add-plus { display: block; font: 700 32px/1 var(--display); color: #ffd885; writing-mode: horizontal-tb; rotate: 0deg; }
#ui > .screen.deck-rail .deck-fan .fan-add :is(span, small) { display: block; writing-mode: horizontal-tb; rotate: 0deg; transform: none !important; text-align: center; }
#ui > .screen.deck-rail .deck-fan .fan-add span { font: 600 12px/1.2 var(--body); color: #ffe1a0; }
#ui > .screen.deck-rail .deck-fan .fan-add small { font: 500 11px/1.2 var(--body); color: #c6b48a; }
#ui > .screen.deck-rail .deck-fan .fan-spare > .btn.fan-locked .tc-blank { width: 100%; }

/* Safe is a quiet state; Protect is the action. Both sit on the card's top
   corner, overhanging the frame, off the title and most of the art. */
#ui > .screen.deck-rail .deck-hand .deck-fan { padding-top: 12px; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .deck-position { top: -8px; right: -6px; }
#ui > .screen.deck-rail .deck-fan .deck-position > .fan-safe {
  background: rgb(10 10 14 / .92); color: #ffd885; border: 1px solid #ffd885; min-height: 24px; padding: 0 8px; font-size: 11px;
}
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .fan-protect-chip {
  top: -8px; right: -6px; min-height: 30px; padding: 0 10px; gap: 5px;
  background: #ffd885; color: #241a04; border-color: #ffd885; font: 700 12px/1 var(--body);
}
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .fan-protect-chip svg { color: #241a04; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .fan-protect-chip b { color: #241a04; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .fan-protect-chip.needs-rank { background: rgb(10 10 14 / .92); color: #c6b48a; border-color: #8d7a52; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .fan-protect-chip.needs-rank svg { color: #c6b48a; }

/* whose deck: the selected student's name under their portrait */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn.on { height: auto; flex-direction: column; gap: 2px; padding-bottom: 2px; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn.on small { bottom: 15px; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn.on .crew-name {
  display: block; position: static; font: 700 10px/1.1 var(--body); letter-spacing: 0; color: #eef8ff; text-transform: none;
  max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* both rows fade at the right edge: there is more to swipe */
#ui > .screen.deck-rail .deck-album .deck-flow,
#ui > .screen.deck-rail .deck-hand .deck-fan {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}

/* sheets: centred on a panel, never pinned to the top */
#ui .screen.deck-phone .pullreveal.deck-sheet { justify-content: center; }
#ui .screen.deck-phone .pullreveal.deck-sheet > .deck-panel {
  margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(460px, calc(100vw - 32px)); padding: 20px 24px; box-sizing: border-box;
  border: 1px solid #ffd88540; border-radius: 14px; background: #0c111cf2; box-shadow: 0 18px 50px #000b;
}
#ui .screen.deck-phone .pullreveal.deck-sheet .deck-slot-title { font-size: 22px; margin: 0; }
#ui .screen.deck-phone .pullreveal.deck-sheet .deck-panel > .row { margin: 4px 0 0; }
#ui .screen.deck-phone .pullreveal.deck-sheet .deck-slot-what { margin: 0; max-width: 420px; color: #c9d6e2; font: 500 14px/1.45 var(--body); text-align: center; letter-spacing: 0; }
#ui .screen.deck-phone .pullreveal.deck-sheet .deck-slot-price { color: #ffd885; font: 700 15px/1.2 var(--body); }

/* the zoom's Lost & Found line: sentence case, no orphaned word */
#ui .screen.deck-phone .cardzoom .reveal-kicker, #ui .screen.deck-phone .cardzoom :is(.cardzoom-kicker, .kicker) { text-transform: none; text-wrap: balance; }

/* the Store fits one landscape screen */
@media (max-height: 400px) and (orientation: landscape) {
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen :is(.club-free-pull, .club-pull) { min-height: 0; height: 96px; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen :is(.club-free-pull, .club-pull) { white-space: nowrap; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-body { padding-bottom: max(12px, var(--sab)); }
}
/* badges move to the card's bottom-right corner (over the footer strip, off the title); Protect is just the shield and the price */
#ui > .screen.deck-rail .deck-fan .btn.fan-card > :is(.deck-position, .fan-protect-chip) { top: auto; bottom: calc(var(--tcf) * 105 * .03 + 34px); right: -4px; }
#ui > .screen.deck-rail .deck-fan .fan-protect-chip .fan-protect-word { display: none; }
#ui .screen.deck-phone .fan-protect-chip i { font-style: normal; }
/* -- iteration 6 (judge round 3) -- */
#ui > .screen.screen-deck.deck-rail { column-gap: 12px; }
/* Collection / Hand: the switch you use most reads as large as the tabs */
#ui > .screen.deck-rail > .deck-views > .btn.deck-view { font-size: 13px; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view small { font-size: 11px; }

/* Build Deck: the pulls stand in the left column where the title was */
#ui > .screen.deck-rail.rail-no-tools.rail-pulls > .deck-phone-tools {
  display: flex !important; grid-area: tabs; contain: size; align-self: stretch; height: auto; margin: 8px 0; padding: 0;
}
#ui > .screen.deck-rail.rail-pulls > .screenhead > .heading { display: none; }
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools { flex: 1 1 auto; width: 100%; height: 100%; gap: 6px; }
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn {
  flex: 1 1 auto; min-height: 0; width: 100%; padding: 6px 0; gap: 4px;
  writing-mode: vertical-rl; rotate: 180deg; transform: none !important; white-space: nowrap; font-size: 13px; border-radius: 8px;
}
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn small { display: block; font-size: 11px; }
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn.deck-free small { display: none; }

/* slot numbers on the hand's cards; a safe slot's number wears a gold ring */
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .slot-n {
  position: absolute; top: -9px; left: -7px; z-index: 3; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; background: #0c111c; border: 1px solid #a9cdec66;
  color: #eef8ff; font: 700 12px/1 var(--body); box-shadow: 0 2px 6px #0009;
}
#ui > .screen.deck-rail .deck-fan .btn.fan-card.is-safe > .slot-n { background: #ffd885; border: 2px solid #ffd885; color: #241a04; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card.is-safe > .slot-n::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #ffd88588; }
#ui > .screen.deck-rail .deck-fan .deck-position > .fan-safe { display: none; }
#ui > .screen.deck-rail .deck-hand .deck-fan { gap: 8px; padding-inline: 8px; }
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare { width: 64px; gap: 6px; }

/* Protect says so, inside the frame, with a full 44px target */
#ui > .screen.deck-rail .deck-fan .fan-protect-chip .fan-protect-word { display: inline; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .fan-protect-chip { right: 6px; font-size: 11px; padding: 0 8px; }
#ui > .screen.deck-rail .deck-fan .fan-protect-chip::after { inset: -8px -6px; }

/* the hand's status is a chip at the pane's top-right; the count lives on the Hand switch */
#ui > .screen.deck-rail .deck-hand { padding-top: 2px; }
#ui > .screen.deck-rail .deck-hand .deck-hand-meta {
  position: absolute; top: -4px; right: 4px; left: auto; bottom: auto; z-index: 4; width: auto; height: auto; min-height: 0;
  display: flex; justify-content: flex-end; margin: 0; padding: 0; pointer-events: none;
}
#ui > .screen.deck-rail .deck-hand .deck-hand-meta > * { pointer-events: auto; }
#ui > .screen.deck-rail .deck-hand .deck-hand-meta .deck-status { display: none; }
#ui > .screen.deck-rail .deck-hand .deck-hand-meta .btn.deck-awakening-status {
  min-height: 30px; padding: 0 12px; border: 1px solid #ffd88566; border-radius: 999px; background: #12100acc; font-size: 12px;
}
#ui > .screen.deck-rail .deck-hand .deck-hand-meta .btn.deck-awakening-status::after { content: ' ›'; }
#ui > .screen.deck-rail .deck-hand .deck-hand-meta .btn.deck-awakening-status::before { content: ''; position: absolute; inset: -7px -2px; }
#ui > .screen.deck-rail .deck-hand .deck-fan { padding-top: 22px; }

/* the zooms: a calm kicker for a hand card; balance beside the price */
#ui .screen.deck-phone .cardzoom .kicker.kicker-hand { color: #9fe3f2; }
#ui .screen.deck-phone .cardzoom .cardzoom-balance { margin: 4px 0 0; color: #ffd885; font: 700 13px/1.3 var(--body); }
#ui .screen.deck-phone .cardzoom .btn.deck-putback { font-size: 15px; }

/* Crew: the slots line up under the students they belong to */
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen[data-club-tab="crew"] .club-slots { gap: 10px; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen[data-club-tab="crew"] .club-capacity { display: flex; flex-direction: column; gap: 4px; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen[data-club-tab="crew"] .club-capacity > .club-section-title { margin: 0; font-size: 12px; letter-spacing: .04em; }
}
/* on the narrow rail the collection's switch reads "Cards" (its accessible name stays Collection) */
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[data-deck-view="collection"] { font-size: 0; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[data-deck-view="collection"]::before { content: 'Cards'; font-size: 13px; }
/* -- iteration 7 (judge round 4) -- */
/* the pull reveal keeps its side column in order: kicker, rule, actions */
@media (max-height: 500px) {
  .deck-phone .pullreveal.deck-reveal.has-rule { grid-template-rows: 1fr auto auto auto 1fr; }
  .deck-phone .pullreveal.deck-reveal.has-rule > .kicker { grid-column: 2; grid-row: 2; }
  .deck-phone .pullreveal.deck-reveal.has-rule > .cardzoom-info { grid-column: 2; grid-row: 3; }
  .deck-phone .pullreveal.deck-reveal.has-rule > .row { grid-column: 2; grid-row: 4; }
}
/* sheets hide the screen behind them on a phone */
#ui .screen.deck-phone .pullreveal { background: rgba(5, 6, 13, .975); }

/* hand cards: whole titles; the slot number stands above the card; a safe
   slot is a gold "Safe" pill and a gold frame */
#ui > .screen.deck-rail .deck-fan .tcard .tc-name { line-height: 1.1; overflow: visible; }
#ui > .screen.deck-rail .deck-hand .deck-fan { align-items: flex-start; padding-top: 30px; }
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare { align-self: flex-start; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .slot-n { top: -26px; left: 50%; translate: -50% 0; width: auto; min-width: 24px; padding: 0 7px; border-radius: 999px; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card.is-safe > .slot-n { border-width: 1px; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card.is-safe > .slot-n::before { content: '\1F6E1\FE0E\00a0'; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card.is-safe > .slot-n::after { content: '\00a0·\00a0Safe'; position: static; inset: auto; border: 0; border-radius: 0; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card.is-safe .tcard { box-shadow: 0 0 0 2px #ffd885, 0 0 16px #ffd88555; border-radius: 10px; }
#ui > .screen.deck-rail .deck-hand .deck-hand-meta { top: 2px; }

/* zoom actions: one tidy two-column grid; Protect is gold, not the red primary */
@media (max-height: 500px) {
  .deck-phone .cardzoom.has-rule > .row, .deck-phone .cardzoom.has-rule > .deck-order-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(270px, 100%); justify-self: center;
  }
  .deck-phone .cardzoom.has-rule > .row > .btn, .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn { width: 100%; margin: 0; min-height: 44px; font-size: 14px; }
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-zoom-protect { grid-column: 1 / -1; background: #1a1406; border: 1px solid #ffd885; color: #ffe1a0; }
  .deck-phone .cardzoom.has-rule > .row > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn { font-size: 13px; }
}
/* the Lost line is a warning, not an error */
#ui .screen.deck-phone .cardzoom.lost .kicker { color: #ffb36b; }

/* the blanks: one slim column, so the row is cards */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more { width: 104px; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more .tc-more { width: 104px; padding: 10px 6px; text-align: center; }
#ui > .screen.deck-rail .tc-more .tc-more-n { font-size: 36px; }
#ui > .screen.deck-rail .tc-more .tc-more-how { line-height: 1.35; }

/* swap: the banner over the cards and the row's chips */
#ui > .screen.deck-rail .deck-album > .deck-swapbar {
  position: absolute; top: 0; left: 0; right: 26px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 0 6px 0 14px; border: 1px solid #7fe8ff; border-radius: 10px; background: #061a22f2;
  color: #dff9ff; font: 600 13px/1.2 var(--body);
}
#ui > .screen.deck-rail .deck-album > .deck-swapbar[hidden] { display: none; }
#ui > .screen.deck-rail .deck-album > .deck-swapbar .btn { min-height: 36px; padding: 0 14px; font-size: 13px; margin: 0; }
#ui > .screen.deck-rail .deck-album:has(> .deck-swapbar:not([hidden])) .deck-flow { top: 52px; }
#ui > .screen.deck-rail .flow-add-chip.is-swap { border-color: #ffd885; color: #ffe1a0; background: #1a1406e6; }

/* Crew: the slot caption sits on its own line, left-aligned, above the slots */
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen[data-club-tab="crew"] .club-capacity > .club-section-title {
    width: auto; white-space: nowrap; align-self: flex-start; text-align: left;
  }
}
/* the slot badge is one line (number, or shield · number · Safe) */
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .slot-n { display: inline-flex; align-items: center; justify-content: center; height: 24px; white-space: nowrap; }
/* the awakening chip sits in the band under the cards, clear of the slot numbers */
#ui > .screen.deck-rail .deck-hand .deck-hand-meta { top: auto; bottom: 4px; right: auto; left: 50%; translate: -50% 0; }
/* a hand card's zoom: where it sits first (the moves), then what to do, Close last and full width */
@media (max-height: 500px) {
  .deck-phone .cardzoom.has-rule.inhand { grid-template-rows: 1fr auto auto auto auto 1fr; }
  .deck-phone .cardzoom.has-rule.inhand > .deck-order-actions { grid-column: 2; grid-row: 4; }
  .deck-phone .cardzoom.has-rule.inhand > .row { grid-column: 2; grid-row: 5; }
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-zoom-protect + .btn { grid-column: 1 / -1; }
}
/* -- iteration 8 (judge round 5) -- */
/* the focus ring is for keys and pads; a thumb never sees a cursor */
#ui:not([data-ui-input="keys"]) .screen.deck-phone .btn:is(:focus-visible, .focus),
#ui:not([data-ui-input="keys"]) .screen.clubhouse-screen .btn:is(:focus-visible, .focus) { outline: none; }

/* Protect leaves the card face: an outlined gold pill in the badge row above
   the card (the filled gold pill there means Safe) */
#ui > .screen.deck-rail .deck-fan .btn.fan-card.has-protect > .slot-n { display: none; }
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .fan-protect-chip {
  top: -27px; bottom: auto; left: 50%; right: auto; translate: -50% 0; transform: none;
  min-height: 26px; padding: 0 10px; background: rgb(10 10 14 / .92); color: #ffe1a0; border: 1px solid #ffd885; font: 700 12px/1 var(--body);
}
#ui > .screen.deck-rail .deck-fan .btn.fan-card > .fan-protect-chip svg, #ui > .screen.deck-rail .deck-fan .btn.fan-card > .fan-protect-chip b { color: #ffd885; }
#ui > .screen.deck-rail .deck-fan .fan-protect-chip::after { inset: -10px -6px; }

/* one button language in the zooms and sheets: 44px, one line, price inline */
@media (max-height: 500px) {
  .deck-phone .pullreveal :is(.row, .deck-order-actions) > .btn { min-height: 44px; height: 44px; white-space: nowrap; flex-direction: row; gap: 6px; }
  .deck-phone .pullreveal :is(.row, .deck-order-actions) > .btn small { display: inline; font-size: 12px; }
  .deck-phone .cardzoom.lost.has-rule > .row > .btn:first-child { grid-column: 1 / -1; }
  .deck-phone .cardzoom.lost.has-rule > .row > .btn:last-child { grid-column: 1 / -1; }
  .deck-phone .cardzoom .cardzoom-info > p { text-align: center; }
  /* "Move to" names what the slot buttons do */
  .deck-phone .cardzoom.has-rule > .deck-order-actions::before {
    content: 'Move to'; grid-column: 1 / -1; justify-self: center; color: #9fb3c4; font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase;
  }
}
/* Protect is gold everywhere, the confirm too */
#ui .screen.deck-phone .pullreveal .btn.deck-confirm-protect { background: #ffd885; border-color: #ffd885; color: #241a04; box-shadow: none; }
#ui .screen.deck-phone .pullreveal .btn.deck-confirm-protect small { color: #241a04; }

/* the swap banner's Cancel is a full target */
#ui > .screen.deck-rail .deck-album > .deck-swapbar { min-height: 52px; }
#ui > .screen.deck-rail .deck-album > .deck-swapbar .btn { min-height: 44px; }
#ui > .screen.deck-rail .deck-album:has(> .deck-swapbar:not([hidden])) .deck-flow { top: 60px; }

/* pseudo markers the base button rule hides: the Store's free-pull dot, the awakening chevron */
#ui .screen .btn.clubhouse-tab.has-ready::after { display: block; position: absolute; top: 8px; left: 50%; translate: -50% 0; margin: 0; }
#ui > .screen.deck-rail .deck-hand .deck-hand-meta .btn.deck-awakening-status::after { display: inline; position: static; }
#ui > .screen.deck-rail .deck-hand .deck-hand-meta .btn.deck-awakening-status { min-height: 40px; overflow: visible; }

/* the "nothing to add" tile */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-none { width: 150px; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-none .tc-none { width: 150px; padding: 12px; text-align: center; border-color: #ffd88566; }
#ui > .screen.deck-rail .tc-none .tc-more-label { font: 700 15px/1.25 var(--body); color: #eef8ff; }
#ui > .screen.deck-rail .deck-hand .deck-hand-meta .btn.deck-awakening-status { white-space: nowrap; }
/* -- iteration 9 (judge round 6): the cards take the height -- */
/* the rail's card face: the micro rows go, the rule reads at size, and the
   footer strip holds the card's one badge or action (slot, Safe, Protect,
   + Hand, Swap in, Lost). The zoom keeps the full face. */
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard :is(.tc-student, .tc-flavor, .tc-foot) { display: none; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-effect {
  top: 67em; bottom: 14em; min-height: 0; padding: 2.6em 2.8em 2em; display: flex; flex-direction: column; gap: .6em;
}
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig { font-size: max(8px, 2em); margin: 0; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-text {
  font-size: max(11px, 4.2em); line-height: 1.22; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
#ui > .screen.deck-rail .deck-stage > .btn.flow-card,
#ui > .screen.deck-rail .deck-fan > .btn.fan-card { padding: 0; gap: 0; }
#ui > .screen.deck-rail .deck-hand .deck-fan { padding: 6px 8px; align-items: center; }
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare { align-self: center; }
#ui > .screen.deck-rail .deck-hand .deck-hand-meta { display: none; }

/* the footer badge: one pill, centred in the card's footer strip */
#ui > .screen.deck-rail .deck-fan > .btn.fan-card > .slot-n,
#ui > .screen.deck-rail .deck-fan > .btn.fan-card > .fan-protect-chip {
  top: auto; bottom: calc(var(--tcf) * 7.2 - 14px); left: 50%; right: auto; translate: -50% 0; transform: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; min-height: 28px; min-width: 28px; padding: 0 10px;
  border-radius: 999px; white-space: nowrap; font: 700 13px/1 var(--body); letter-spacing: 0; z-index: 3; box-shadow: 0 2px 8px #000a;
}
#ui > .screen.deck-rail .deck-fan > .btn.fan-card > .slot-n { background: #0c111ce6; border: 1px solid #a9cdec66; color: #eef8ff; }
#ui > .screen.deck-rail .deck-fan > .btn.fan-card > .slot-n::before,
#ui > .screen.deck-rail .deck-fan > .btn.fan-card > .slot-n::after { content: none; }
#ui > .screen.deck-rail .deck-fan > .btn.fan-card.is-safe > .slot-n { background: #ffd885; border-color: #ffd885; color: #241a04; }
#ui > .screen.deck-rail .deck-fan > .btn.fan-card > .fan-protect-chip { background: rgb(18 14 4 / .94); border: 1px solid #ffd885; color: #ffe1a0; }
#ui > .screen.deck-rail .deck-fan .fan-protect-chip .fan-protect-n { font-style: normal; color: #ffe1a0; }
#ui > .screen.deck-rail .deck-fan > .fan-spare .fan-protect-chip .fan-protect-n,
#ui > .screen.deck-rail .deck-fan > .fan-add .fan-protect-chip .fan-protect-n { display: none; }
#ui > .screen.deck-rail .deck-fan .deck-shield { width: 14px; height: 14px; flex: none; }
#ui > .screen.deck-rail .deck-fan > .btn.fan-card > .fan-protect-chip .deck-shield { color: #ffd885; }
#ui > .screen.deck-rail .deck-fan > .btn.fan-card > .fan-protect-chip::after { inset: -9px -6px; }

/* the row's action or state in the same strip */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card > .flow-add-chip {
  top: auto; bottom: calc(var(--tct) * 7.2 - 15px); left: 50%; right: auto; translate: -50% 0; min-height: 30px; height: 30px; white-space: nowrap;
}
#ui > .screen.deck-rail .deck-stage > .btn.flow-card > .flow-tag {
  position: absolute; left: 50%; bottom: calc(var(--tct) * 7.2 - 13px); translate: -50% 0; transform: none; z-index: 3; margin: 0;
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; max-width: calc(var(--tct) * 75 - 16px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgb(10 10 14 / .92); border: 1px solid #a9cdec55;
  color: #c9d6e2; font: 700 12px/1 var(--body); letter-spacing: 0; text-transform: none;
}
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.lost > .flow-tag { color: #ffc4b4; border-color: #ff8a7066; }

/* a recipe card's awakening rides the rule box's top edge */
#ui > .screen.deck-rail .tcard .tc-effect > .tc-awaken {
  position: absolute; right: 1.6em; top: 0; translate: 0 -55%; z-index: 2; max-width: calc(100% - 3.2em);
  padding: 3px 8px; border-radius: 999px; border: 1px solid #ffd885; background: #141006; color: #ffe1a0;
  font: 700 10px/1.15 var(--body); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
#ui > .screen.deck-rail .tcard .tc-effect > .tc-awaken.is-ready { background: #ffd885; color: #241a04; box-shadow: 0 0 10px #ffd88566; }

/* the blanks: one tile, the card's height */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more { width: 150px; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more .tc-more { width: 150px; height: calc(var(--tct) * 105); padding: 12px 10px; text-align: center; }
#ui > .screen.deck-rail .tc-more .tc-none-head { font: 700 15px/1.25 var(--body); color: #eef8ff; margin-bottom: 6px; }
#ui > .screen.deck-rail .tc-more.tc-none { border-color: #ffd88566; }

/* swapping: the outgoing card stands first in the row */
#ui > .screen.deck-rail .deck-stage > .deck-swap-tile {
  flex: none; align-self: center; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 8px; border: 1px solid #ffd885; border-radius: 12px; background: #1a1406d9; color: #ffe1a0; text-align: center;
}
#ui > .screen.deck-rail .deck-swap-tile > .deck-swap-kicker { font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
#ui > .screen.deck-rail .deck-swap-tile > .tcard { opacity: .85; }
#ui > .screen.deck-rail .deck-swap-tile > .deck-swap-rule { font: 600 12px/1.3 var(--body); color: #eef8ff; }
#ui > .screen.deck-rail .deck-swap-tile > .deck-swap-ask { font: 600 11px/1.2 var(--body); color: #c6b48a; }
#ui > .screen.deck-rail .deck-swap-tile > .btn.deck-swap-cancel { width: 100%; min-height: 44px; margin: 0; padding: 0; font: 700 14px/1 var(--body); }

/* Build Deck: the pulls hold column A in both views; Pull Card is outlined
   (only a free pull is filled gold), so the cards stay the loudest thing */
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn.deck-pull:not(.deck-free),
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn.deck-pull3 { background: #1a1406; border: 1px solid #ffd885; color: #ffe1a0; box-shadow: none; }
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn:disabled { opacity: .5; }

/* the rail's free-pull dot: past the end of the rotated word (bottom-left
   before the 180° turn is the physical top-right), not on its first letter */
#ui > .screen.deck-rail > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after { top: auto; bottom: 6px; left: 6px; translate: none; }
#ui > .screen.deck-rail > .clubhouse-tabs { margin-bottom: 16px; }
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after { top: auto; bottom: 6px; left: 6px; translate: none; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs { margin-bottom: 16px; }
}

/* the zooms and sheets: one face for every button; no ring under a thumb */
@media (max-height: 500px) {
  .deck-phone .pullreveal :is(.row, .deck-order-actions) > .btn { font: 700 15px/1 var(--body); letter-spacing: .01em; text-transform: none; }
  .deck-phone .pullreveal :is(.row, .deck-order-actions) > .btn small { font: 600 12px/1 var(--body); }
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-swap:disabled { opacity: .6; }
  /* Protect: the card it holds beside the words; Cancel as wide as Protect */
  #ui .screen.deck-phone .pullreveal.deck-sheet > .deck-panel.has-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 10px; align-items: center; width: min(600px, calc(100vw - 32px));
  }
  #ui .screen.deck-phone .pullreveal.deck-sheet > .deck-panel.has-card > .tcard { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
  #ui .screen.deck-phone .pullreveal.deck-sheet > .deck-panel.has-card > :not(.tcard) { grid-column: 2; margin: 0; text-align: left; justify-self: stretch; }
  #ui .screen.deck-phone .pullreveal.deck-sheet > .deck-panel > .row { display: flex; gap: 10px; width: 100%; }
  #ui .screen.deck-phone .pullreveal.deck-sheet > .deck-panel > .row > .btn { flex: 1 1 0; min-width: 0; margin: 0; padding: 0 12px; }
}
:where(#ui:not([data-ui-input="keys"])) .screen.deck-phone .pullreveal .btn:not(.primary, .deck-zoom-protect, .deck-confirm-protect):is(:focus-visible, .focus) { border-color: var(--menu-line); box-shadow: none; }
/* a safe slot's pill already carries its shield and word (ui.js) */
#ui > .screen.deck-rail .deck-fan > .btn.fan-card.is-safe > .slot-n::before,
#ui > .screen.deck-rail .deck-fan > .btn.fan-card.is-safe > .slot-n::after { content: none; }
#ui > .screen.deck-rail .deck-fan > .btn.fan-card.is-safe > .slot-n .deck-shield { width: 14px; height: 14px; }
/* Crew: four open slots say nothing a phone needs; the students take the height */
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen[data-club-tab="crew"] .club-capacity.all-open { display: none; }
}
/* -- iteration 10 (judge round 7) -- */
/* a tighter rail: 44px columns, 6px apart, the same on every Clubhouse tab */
#ui > .screen.screen-deck.deck-rail { column-gap: 6px; }
#ui > .screen.screen-deck.deck-rail.rail-no-tools { grid-template-columns: 44px 44px minmax(0, 1fr); }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view { width: 100%; }
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen { grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; }
}
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn { padding: 6px 0; }

/* whose deck: the portrait fills its tile; the count is a strip under the face */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn { overflow: hidden; border-radius: 8px; padding: 0; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn img {
  width: 100%; height: 44px; border: 0; border-radius: 0; object-fit: cover; object-position: 50% 14%; flex: none;
}
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn small {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto; padding: 1px 0; border-radius: 0; text-align: center;
  background: #0a0d16d9; font: 700 10px/1.2 var(--body); letter-spacing: 0;
}
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn.on { gap: 0; padding: 0 0 2px; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn.on small { bottom: 16px; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn.on .crew-name { max-width: 44px; }
:where(#ui:not([data-ui-input="keys"])) .screen.deck-rail .deck-crew > .btn.crew-btn.on.focus { box-shadow: none; }

/* swapping: the rail's second column says what goes out, with its Cancel */
#ui > .screen.deck-rail.rail-swapping > .deck-views { display: none; }
#ui > .screen .deck-swap-pill[hidden] { display: none !important; }
#ui > .screen.deck-rail > .deck-swap-pill {
  grid-area: views; contain: size; align-self: stretch; min-height: 0; margin: 8px 0 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 0 0; border: 0; box-shadow: inset 0 0 0 1px #ffd885; border-radius: 10px; background: #1a1406; color: #ffe1a0; overflow: hidden;
}
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label {
  flex: 1 1 0; min-height: 0; writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 13px/1 var(--body); letter-spacing: 0; color: #fff1cf;
}
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label small { font: 700 10px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #c6b48a; margin-inline-end: 4px; }
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel {
  flex: none; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-top: 1px solid #ffd88555; border-radius: 0 0 10px 10px;
  background: #0c0a04; color: #ffe1a0; font: 700 18px/1 var(--body);
}
#ui > .screen.deck-rail.rail-swapping.rail-pulls .deck-collection-tools > .btn { opacity: .35; }

/* the hand settles on a card's edge after a flick (the long row does not:
   a snap there pulled scrollIntoView back past its target) */
#ui > .screen.deck-rail .deck-hand .deck-fan { scroll-snap-type: x proximity; scroll-padding-inline: 8px; }
#ui > .screen.deck-rail .deck-fan > :is(.btn.fan-card, .fan-spare, .fan-add, .btn.fan-locked) { scroll-snap-align: start; }

/* the rail's card face, cleaner: no serial on the art, a readable kind, the
   rule a step larger and centred in its box */
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-num { display: none; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-kind b { font-size: max(9px, 1.8em); letter-spacing: .12em; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-effect { justify-content: center; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig { font-size: max(10px, 2.3em); }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-text { font-size: max(13px, 4.4em); }
#ui > .screen.deck-rail .tcard .tc-effect > .tc-awaken { left: 50%; right: auto; translate: -50% -55%; font-size: 11px; padding: 3px 9px; }
#ui > .screen.deck-rail .deck-fan > .btn.fan-card.is-safe > .slot-n { gap: 4px; }

/* the zooms: step between hand cards; a lone move spans the row; Get cards */
@media (max-height: 500px) {
  .deck-phone .cardzoom.has-rule > .btn.cardzoom-step {
    grid-column: 1; grid-row: 1 / -1; align-self: center; z-index: 4; width: 44px; min-width: 44px; height: 72px; min-height: 72px; margin: 0; padding: 0;
    border: 1px solid #a9cdec55; border-radius: 10px; background: #05070dd9; color: #eef8ff; font: 700 28px/1 var(--body); box-shadow: 0 2px 10px #000c;
  }
  .deck-phone .cardzoom.has-rule > .btn.cardzoom-step.prev { justify-self: start; margin-left: -10px; }
  .deck-phone .cardzoom.has-rule > .btn.cardzoom-step.next { justify-self: end; margin-right: -10px; }
  .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn:only-of-type { grid-column: 1 / -1; }
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-getcards { border-color: #ffd88588; color: #ffe1a0; }
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-getcards small { color: #c6b48a; }
  /* the reveal: a loud header, the actions stacked at the sheet width */
  .deck-phone .pullreveal.deck-reveal > .kicker.kicker-reveal { font: 700 20px/1.15 var(--display); letter-spacing: .02em; color: #ffd885; }
  .deck-phone .pullreveal.deck-reveal > .row { display: grid; grid-template-columns: 1fr; gap: 8px; width: min(270px, 100%); justify-self: center; }
  .deck-phone .pullreveal.deck-reveal > .row > .btn { width: 100%; margin: 0; }
  .deck-phone .pullreveal.deck-reveal > .row > .btn.deck-pull-again { border-color: #ffd88588; color: #ffe1a0; }
}

/* Store's free pull on the rail: a gold "Free" tag past the end of the word */
#ui > .screen.deck-rail > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after {
  content: 'Free'; width: auto; height: auto; padding: 4px 2px; border-radius: 6px; background: #ffd885; color: #241a04;
  font: 800 9px/1 var(--body); letter-spacing: .04em; box-shadow: 0 0 8px #ffd88566; left: 50%; translate: -50% 0; bottom: 4px;
}
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after {
    content: 'Free'; width: auto; height: auto; padding: 4px 2px; border-radius: 6px; background: #ffd885; color: #241a04;
    font: 800 9px/1 var(--body); letter-spacing: .04em; box-shadow: 0 0 8px #ffd88566; left: 50%; translate: -50% 0; bottom: 4px;
  }
}
/* -- iteration 11 (judge round 8) -- */
/* the Free tag sits inside its tab (rotated, CSS bottom is the physical top) */
#ui > .screen.deck-rail > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after,
body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after {
  transform: none !important; top: auto; right: auto; bottom: 5px; left: 50%; translate: -50% 0; font-size: 10px; padding: 4px 3px;
}

/* the hand's open slots: one card-sized tile at the end, the locked slot under it */
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare,
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-empty.fan-add,
#ui > .screen.deck-rail .deck-hand .deck-fan > .btn.fan-locked { width: calc(var(--tcf) * 75); min-width: calc(var(--tcf) * 75); height: calc(var(--tcf) * 105); }
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare > .fan-empty.fan-add { width: 100%; min-width: 0; }
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare > .btn.fan-locked { min-height: 30%; }
#ui > .screen.deck-rail .deck-fan .fan-add .fan-add-plus { font-size: 48px; }
#ui > .screen.deck-rail .deck-fan > :is(.fan-add, .fan-spare > .fan-add) span { font: 700 16px/1.2 var(--body); }
#ui > .screen.deck-rail .deck-fan > :is(.fan-add, .fan-spare > .fan-add) small { font: 600 13px/1.2 var(--body); }
#ui > .screen.deck-rail .deck-fan .btn.fan-locked .tc-blank :is(.tc-blank-num, .tc-blank-note) { font-size: 13px; }

/* the row starts at the rail; its blanks are one card-sized tile with an action */
#ui > .screen.deck-rail .deck-album .deck-stage { justify-content: flex-start; padding-right: max(8px, var(--sar)); }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more { width: calc(var(--tct) * 75); }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more .tc-more { width: 100%; gap: 10px; padding: 16px 14px; cursor: default; }
#ui > .screen.deck-rail .tc-more .tc-more-how { color: #c9d6e2; font: 600 13px/1.3 var(--body); }
#ui > .screen.deck-rail .tc-more .tc-none-head { font-size: 17px; }
#ui > .screen.deck-rail .tc-more > .btn.tc-more-act {
  width: 100%; min-height: 44px; margin: 6px 0 0; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid #ffd885; border-radius: 10px; background: #1a1406; color: #ffe1a0; font: 700 15px/1 var(--body); letter-spacing: 0; text-transform: none;
}
#ui > .screen.deck-rail .tc-more > .btn.tc-more-act small { font: 600 12px/1 var(--body); color: inherit; }
#ui > .screen.deck-rail .tc-more > .btn.tc-more-act.is-free { background: #ffd885; color: #241a04; box-shadow: 0 0 14px #ffd88555; }

/* a lost card: lifted from grey, its footer chip the gold buy-back */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.lost .tcard { filter: saturate(.7) brightness(.85); }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.lost > .flow-tag { color: #ffe1a0; border-color: #ffd885; background: #1a1406f2; }

/* the rows run under the right inset to the screen's edge */
#ui > .screen.deck-rail .deck-album .deck-flow { right: calc(-1 * max(8px, var(--sar))); }
#ui > .screen.deck-rail .deck-hand .deck-fan { margin-right: calc(-1 * max(8px, var(--sar))); padding-right: max(8px, var(--sar)); }

/* the switch: "Spare" and "Hand", flush with the portraits, readable counts */
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[data-deck-view="collection"]::before { content: 'Spare'; }
#ui > .screen.deck-rail > .deck-views { padding: 0; border: 0; box-shadow: inset 0 0 0 1px #a9cdec33; gap: 2px; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view small { font: 700 12px/1 var(--body); color: #c9d6e2; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[aria-selected="true"] small { color: #eef8ff; }

/* column A: the pulls are the column's width; their prices read */
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn { min-width: 0; width: 100%; }
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn small { font-size: 11px; color: #e6cf96; }
#ui > .screen.deck-rail.rail-swapping.rail-pulls .deck-collection-tools { visibility: hidden; }

/* swapping: Cancel says so */
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel { font: 700 11px/1 var(--body); letter-spacing: 0; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label small { font-size: 11px; letter-spacing: .04em; }

/* rail text floor: 11px */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn small { font-size: 11px; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn.on .crew-name { font-size: 11px; }

/* the rail face: no rarity pips; the kind label stays clear of long names */
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-pips { display: none; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-kind b { letter-spacing: .06em; }

@media (max-height: 500px) and (orientation: landscape) {
  /* the zoom wears the row's face: the rule large, the micro rows gone, the
     flavour beside the card */
  .deck-phone .pullreveal .pullreveal-cards .tcard :is(.tc-num, .tc-student, .tc-flavor, .tc-foot, .tc-pips) { display: none; }
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-effect { top: 67em; bottom: 9em; min-height: 0; padding: 2.6em 2.8em 2em; display: flex; flex-direction: column; justify-content: center; gap: .6em; }
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-trig { font-size: max(10px, 2.3em); margin: 0; }
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-text { font-size: max(14px, 4.4em); line-height: 1.22; }
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-kind b { font-size: max(9px, 1.8em); letter-spacing: .06em; }
  .deck-phone .cardzoom .cardzoom-flavor { margin: 0; color: #9fb3c4; font: italic 500 12px/1.35 var(--body); letter-spacing: 0; text-align: center; }
  /* browse in the kicker line */
  .deck-phone .cardzoom > .kicker.has-steps { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: min(270px, 100%); justify-self: center; }
  .deck-phone .cardzoom > .kicker.has-steps > .kicker-text { flex: 1 1 auto; text-align: center; }
  .deck-phone .cardzoom > .kicker.has-steps > :is(.btn.cardzoom-step, .cardzoom-step-gap) {
    flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0;
  }
  .deck-phone .cardzoom > .kicker.has-steps > .btn.cardzoom-step {
    border: 1px solid #a9cdec55; border-radius: 22px; background: #0c111c; color: #eef8ff; font: 700 24px/1 var(--body); letter-spacing: 0;
  }
  /* the moves name themselves now */
  .deck-phone .cardzoom.has-rule > .deck-order-actions::before { content: none; display: none; }
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-getcards { border-color: var(--menu-line); color: var(--menu-text); }
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-getcards small { color: #9fb3c4; }
  .deck-phone .cardzoom .btn .deck-shield { width: 15px; height: 15px; flex: none; color: #ffd885; }
}
/* Buy back spends: gold, as Protect is */
#ui .screen.deck-phone .pullreveal .btn.deck-buyback { background: #ffd885; border-color: #ffd885; color: #241a04; box-shadow: none; }
#ui .screen.deck-phone .pullreveal .btn.deck-buyback small { color: #241a04; }
/* the Store tab with a free pull waiting: its word turns gold and a gold dot
   glows in its corner (a word-sized tag collided with the short tab) */
#ui > .screen.deck-rail > .clubhouse-tabs > .btn.clubhouse-tab.has-ready,
body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab.has-ready { color: #ffd885; }
#ui > .screen.deck-rail > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after,
body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after {
  content: ''; width: 9px; height: 9px; padding: 0; border-radius: 50%; left: 5px; bottom: 5px; translate: none;
  background: #ffd885; box-shadow: 0 0 0 2px #0a1220, 0 0 10px #ffd885;
}
/* -- iteration 12 (judge round 9) -- */
/* the kind label moves from the head (9px, crowding long names) into the
   rule box's trigger line on the rail and in the phone zoom */
.tc-trig-kind { display: none; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-kind { display: none; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig,
#ui .screen.deck-phone .pullreveal .pullreveal-cards .tcard .tc-trig {
  display: flex; justify-content: space-between; gap: 1em; font-size: max(11px, 2.4em); letter-spacing: .12em;
}
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig-kind,
#ui .screen.deck-phone .pullreveal .pullreveal-cards .tcard .tc-trig-kind { display: inline; color: #c9d6e2; letter-spacing: .08em; }
@media (max-height: 500px) and (orientation: landscape) {
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-kind { display: none; }
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-effect { bottom: 4em; }
  /* the face prints the rule large: the side column keeps the requirement and the flavour */
  .deck-phone .pullreveal .cardzoom-info > .cardzoom-rule { display: none; }
  .deck-phone .pullreveal .cardzoom-flavor { margin: 0; color: #9fb3c4; font: italic 500 13px/1.35 var(--body); letter-spacing: 0; text-align: center; }
  .deck-phone .pullreveal :is(.row, .deck-order-actions) > .btn { font-size: 14px; }
  .deck-phone .pullreveal :is(.row, .deck-order-actions) > .btn small { font-size: 12px; }
  /* the Protect sheet's card wears the rail face */
  .deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard :is(.tc-num, .tc-student, .tc-flavor, .tc-foot, .tc-pips, .tc-kind) { display: none; }
  .deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-effect { top: 67em; bottom: 6em; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: .6em; }
  .deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-trig { display: flex; justify-content: space-between; font-size: max(9px, 2.4em); margin: 0; }
  .deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-trig { letter-spacing: .1em; }
  .deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-trig-kind { display: none; }
  .deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-text { font-size: max(11px, 4.6em); line-height: 1.2; }
}

/* swapping: the card going out leads the row, dimmed, with its slot */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-going { cursor: default; margin-right: 6px; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-going .tcard { opacity: .6; filter: saturate(.6); }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-going > .flow-tag { color: #241a04; background: #ffd885; border-color: #ffd885; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-going::after {
  content: ''; position: absolute; top: 8%; bottom: 8%; right: -10px; width: 1px; background: #ffd88566; transform: none; left: auto;
}
#ui > .screen.deck-rail.rail-swapping .deck-crew > .btn.crew-btn:not(.on) { opacity: .4; pointer-events: none; }
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel { font-size: 12px; }

/* one geometry for the hand and the spare row: the hand's pane bleeds to the
   screen's edge (the fan's own margin never reached it), the same padding and gap */
#ui > .screen.deck-rail > .deck-hand { margin-right: calc(-1 * max(8px, var(--sar))); padding: 0; gap: 0; width: auto; max-width: none; justify-self: stretch; }
#ui > .screen.deck-rail .deck-hand .deck-fan { margin-right: 0; padding: 0 max(8px, var(--sar)) 0 4px; gap: 12px; }
#ui > .screen.deck-rail .deck-hand > .deck-exchange { margin-right: max(8px, var(--sar)); }

/* a lost card says so on its face; the empty tile grows into a short row */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.lost .tc-art::before {
  content: 'Lost'; position: absolute; top: 8px; left: 8px; z-index: 2; padding: 4px 10px; border-radius: 999px;
  background: #ff8a70; color: #1d0904; font: 800 12px/1 var(--body); letter-spacing: .06em; text-transform: uppercase;
}
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more { flex: 1 0 auto; max-width: 420px; min-width: calc(var(--tct) * 75); width: auto; }

/* the rail: the Store word keeps its colour (the dot is the news); the
   selected student keeps its ring under focus; rotated small text at 12px */
#ui > .screen.deck-rail > .clubhouse-tabs > .btn.clubhouse-tab.has-ready:not([aria-selected="true"]),
body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab.has-ready:not([aria-selected="true"]) { color: inherit; }
:where(#ui:not([data-ui-input="keys"])) .screen.deck-rail .deck-crew > .btn.crew-btn.on.focus { box-shadow: 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); }
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn small,
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label small,
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn small { font-size: 12px; }
/* -- iteration 13 (judge round 10) -- */
/* the hand-card zoom: one size for every button, one gap between the grids */
@media (max-height: 500px) {
  .deck-phone .cardzoom.has-rule :is(.row, .deck-order-actions) > .btn { font: 700 14px/1 var(--body); letter-spacing: 0; }
  .deck-phone .cardzoom.has-rule :is(.row, .deck-order-actions) > .btn small { font: 600 12px/1 var(--body); color: #9fb3c4; }
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-zoom-protect small { color: #ffd885; }
  .deck-phone .cardzoom.has-rule > :is(.row, .deck-order-actions) { gap: 8px; }
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-getcards { border-style: dashed; color: #c9d6e2; }
  /* the Lost zoom's headline reads like the others */
  .deck-phone .cardzoom.lost > .kicker { font: 700 17px/1.2 var(--display); letter-spacing: .01em; }
}

/* the Store word keeps the inactive tabs' colour; the dot alone is the news */
#ui > .screen.deck-rail > .clubhouse-tabs > .btn.clubhouse-tab.has-ready:not([aria-selected="true"]),
body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab.has-ready:not([aria-selected="true"]) { color: #93a8b9; }

/* each student tile wears its colour, chosen or not */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn:not(.on) { border-color: color-mix(in srgb, var(--c) 55%, transparent); }

/* the empty tile: card-sized, bright, its paid route under the free pull */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more { flex: none; width: calc(var(--tct) * 75); max-width: none; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more .tc-more { opacity: 1; filter: none; }
#ui > .screen.deck-rail .tc-more > .btn.tc-more-link {
  min-height: 44px; margin: 0; padding: 0 8px; border: 0; background: none; box-shadow: none; color: #c9d6e2;
  font: 600 13px/1 var(--body); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px;
}

/* the awakening tag: a full thumb target */
#ui > .screen.deck-rail .tcard .tc-effect > .tc-awaken { overflow: visible; }
#ui > .screen.deck-rail .tcard .tc-effect > .tc-awaken::after { content: ''; position: absolute; inset: -12px -6px; }

/* swapping is a mode: one rail column (close, the swap, the coins), the
   outgoing card a small reference so two candidates show beside it */
#ui > .screen.screen-deck.deck-rail.rail-swapping {
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "close main" "views main" "views main" "coins main";
}
#ui > .screen.deck-rail.rail-swapping > :is(.clubhouse-tabs, .deck-phone-tools),
#ui > .screen.deck-rail.rail-swapping > .screenhead > .deck-bar > .deck-crew { display: none !important; }
#ui > .screen.deck-rail.rail-swapping > .deck-swap-pill { margin: 8px 0 12px; }
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel {
  width: 44px; border-top: 1px solid #ffd885; background: #241a04; color: #ffe1a0; font: 700 12px/1 var(--body);
}
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label { font-size: 14px; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-going { align-self: center; --tct-going: calc(var(--tct) * .62); }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-going .tcard { --tc: var(--tct-going); }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-going > .flow-tag { bottom: auto; top: calc(100% + 8px); max-width: none; }

/* the Protect sheet's card: larger, its title and trigger at reading size */
@media (max-height: 500px) and (orientation: landscape) {
  .deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-trig { font-size: max(11px, 2.4em); }
  .deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-text { font-size: max(12px, 4.6em); }
}
/* room in the hand: its count turns gold */
#ui > .screen.deck-rail > .deck-views > .btn.deck-view small.has-open { color: #ffd885; }
/* the outgoing card is a small reference: its face drops to a few words */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-going .tcard .tc-trig { display: none; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-going .tcard .tc-text { font-size: max(10px, 4.4em); -webkit-line-clamp: 2; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-going .tcard .tc-awaken { display: none; }
/* -- iteration 14 (judge round 11) -- */
/* the awakening tag rides the trigger line in the kind label's place */
#ui > .screen.deck-rail .tcard .tc-trig > .tc-awaken {
  position: relative; top: auto; right: auto; left: auto; translate: none; flex: 0 1 auto; min-width: 0; max-width: 72%; align-self: center;
}
#ui > .screen.deck-rail .tcard .tc-trig:has(> .tc-awaken) > .tc-trig-kind { display: none; }

/* swap: the rail tag carries what goes out (slot, name, rule); Cancel stands apart */
#ui > .screen.deck-rail > .deck-swap-pill { background: none; box-shadow: none; padding: 0; gap: 8px; overflow: visible; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label {
  flex: 1 1 0; width: 44px; padding: 8px 0; border-radius: 10px; box-shadow: inset 0 0 0 1px #ffd885; background: #1a1406;
  display: flex; flex-direction: column; gap: 3px; align-items: center; text-overflow: clip;
}
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > * {
  display: block; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0;
}
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > small { font: 700 10px/1.15 var(--body); letter-spacing: .06em; text-transform: uppercase; color: #c6b48a; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > b { font: 700 14px/1.15 var(--body); color: #fff1cf; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-rule { font: 600 12px/1.15 var(--body); color: #eef8ff; }
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel {
  flex: none; width: 44px; height: 56px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid #ffd885; border-radius: 10px; background: #241a04; color: #ffe1a0; font: 700 18px/1 var(--body);
}
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel small { display: block; font: 700 11px/1 var(--body); color: #ffe1a0; }

/* the zooms: the actions at the right thumb, the card centred in what is
   left, the steppers in its gutters at mid-height */
@media (max-height: 500px) and (orientation: landscape) {
  .deck-phone .pullreveal:is(.cardzoom.has-rule, .deck-reveal) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 270px); justify-content: stretch; padding-right: max(16px, var(--sar));
  }
  .deck-phone .pullreveal:is(.cardzoom.has-rule, .deck-reveal) > .pullreveal-cards { justify-self: center; }
  .deck-phone .cardzoom.has-rule > .btn.cardzoom-step {
    grid-column: 1; grid-row: 1 / -1; align-self: center; z-index: 4; width: 44px; min-width: 44px; height: 72px; min-height: 72px; margin: 0; padding: 0;
    border: 1px solid #a9cdec55; border-radius: 12px; background: #0c111c; color: #eef8ff; font: 700 26px/1 var(--body); letter-spacing: 0;
  }
  .deck-phone .cardzoom.has-rule > .btn.cardzoom-step.prev { justify-self: start; margin-left: 8px; }
  .deck-phone .cardzoom.has-rule > .btn.cardzoom-step.next { justify-self: end; margin-right: 8px; }
  /* the hand zoom keeps its rows for decisions: no flavour line */
  .deck-phone .cardzoom.inhand .cardzoom-flavor { display: none; }
  /* no spare to swap in: a solid, two-line Swap that says where it goes */
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-getcards {
    border-style: solid; flex-direction: column; gap: 3px; white-space: normal; line-height: 1; padding: 4px 6px; color: #eef8ff;
  }
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-getcards small { font-size: 11px; color: #9fb3c4; }
}

/* the empty state: a number that reads, a card that says Lost & Found, a tile
   that fills a short row */
#ui > .screen.deck-rail .tc-more .tc-more-n { font: 700 42px/1 var(--body); font-variant-numeric: tabular-nums; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.lost .tc-art::before { content: 'Lost & Found'; letter-spacing: .02em; }
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more { flex: 1 0 auto; max-width: 420px; }

/* whose deck: the chosen tile is 44px too, its name where the count was */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn.on { height: 44px; min-height: 44px; padding: 0; flex-direction: row; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn.on small { display: none; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn.on .crew-name {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: none; padding: 1px 0; text-align: center; background: #0a0d16d9; font: 700 11px/1.2 var(--body);
}

/* Build Deck's pull tiles share column A evenly */
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn { flex: 1 1 0; }
/* the awakening tag in the trigger line: a one-line pill; the trigger word
   never wraps; the kind label steps aside for it */
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig { white-space: nowrap; align-items: center; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig:has(> .tc-awaken) > .tc-trig-kind { display: none; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig > .tc-awaken {
  position: relative; flex: 0 1 auto; min-width: 0; max-width: 74%; padding: 3px 8px; border-radius: 999px; border: 1px solid #ffd885;
  background: #141006; color: #ffe1a0; font: 700 11px/1.15 var(--body); letter-spacing: 0; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig > .tc-awaken.is-ready { background: #ffd885; color: #241a04; box-shadow: 0 0 10px #ffd88566; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig > .tc-awaken::after { content: ''; position: absolute; inset: -12px -6px; }
/* -- iteration 15 (judge round 12) -- */
/* THE TAIL: the hand's open and locked slots in a fixed 64px column beside
   the scroller; the cards scroll and fade to its left, never under it */
#ui > .screen.deck-rail > .deck-hand { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 8px; }
#ui > .screen.deck-rail > .deck-hand > .deck-exchange { grid-column: 1 / -1; grid-row: 1; }
#ui > .screen.deck-rail > .deck-hand > .deck-fan { grid-column: 1; grid-row: 2; min-width: 0; }
#ui > .screen.deck-rail > .deck-hand:has(> .fan-tail) { margin-right: 0; }
#ui > .screen.deck-rail > .deck-hand:has(> .fan-tail) > .deck-fan { padding-right: 4px; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail {
  grid-column: 2; grid-row: 2; align-self: center; position: relative; width: 64px; min-width: 64px; height: calc(var(--tcf) * 105);
  display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0;
}
#ui > .screen.deck-rail > .deck-hand > .fan-tail.fan-add, #ui > .screen.deck-rail > .deck-hand > .fan-tail > .fan-add {
  flex: 1 1 0; min-height: 0; width: 100%; height: auto; margin: 0; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed #ffd88566; border-radius: 10px; background: #12100a; color: #ffe1a0; box-shadow: none; transform: none;
}
#ui > .screen.deck-rail > .deck-hand > .fan-tail :is(.fan-add-plus, span, small) { writing-mode: horizontal-tb; rotate: 0deg; transform: none; text-align: center; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .fan-add-plus { font: 700 34px/1 var(--display); color: #ffd885; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .fan-add > span, #ui > .screen.deck-rail > .deck-hand > .fan-tail.fan-add > span { font: 700 13px/1.15 var(--body); color: #ffe1a0; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .fan-add > small, #ui > .screen.deck-rail > .deck-hand > .fan-tail.fan-add > small { font: 600 12px/1.15 var(--body); color: #c6b48a; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail.btn.fan-locked, #ui > .screen.deck-rail > .deck-hand > .fan-tail > .btn.fan-locked {
  flex: 0 0 auto; width: 100%; min-width: 0; min-height: 96px; height: auto; margin: 0; padding: 8px 2px; border-radius: 10px;
}
#ui > .screen.deck-rail > .deck-hand > .fan-tail.btn.fan-locked { flex: 1 1 0; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .tc-blank { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .tc-blank svg { width: 18px; height: 18px; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .tc-blank :is(.tc-blank-num, .tc-blank-note) { font: 600 12px/1.15 var(--body); text-align: center; letter-spacing: 0; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .fan-protect-chip { left: 50%; right: auto; bottom: 8px; top: auto; translate: -50% 0; transform: none; padding: 0 6px; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .fan-protect-chip :is(span, .fan-protect-n) { display: none; }

/* swapping: the pull column really leaves (an !important show rule outranked
   the hide and left an implicit grid track: 16px off the row's height);
   the rail is 64px so the outgoing rule wraps; one exit, the coins rest */
#ui > .screen.deck-rail.rail-no-tools.rail-pulls.rail-swapping > .deck-phone-tools,
#ui > .screen.deck-rail.rail-swapping > .deck-phone-tools { display: none !important; }
#ui > .screen.screen-deck.deck-rail.rail-swapping { grid-template-columns: 64px minmax(0, 1fr); }
#ui > .screen.deck-rail.rail-swapping > .screenhead > .screenclose { visibility: hidden; }
#ui > .screen.deck-rail.rail-swapping > .screenhead > .deck-bar > .deck-coins { display: none; }
#ui > .screen.deck-rail.rail-swapping > .deck-swap-pill { grid-row: 1 / -1; margin: 0; width: 64px; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label { width: 64px; gap: 4px; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > small { font-size: 12px; color: #ffd885; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-rule { white-space: normal; font-size: 13px; line-height: 1.2; }
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel { width: 64px; }

/* the empty tile: card-sized for good, plain border, the headline first */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more { flex: none; width: calc(var(--tct) * 75); max-width: none; }
#ui > .screen.deck-rail .tc-more.tc-none { border-style: solid; border-width: 1px; border-color: #a9cdec33; }
#ui > .screen.deck-rail .tc-more.tc-none .tc-more-how { display: none; }
#ui > .screen.deck-rail .tc-more.tc-none .tc-more-n { font-size: 32px; }

@media (max-height: 500px) and (orientation: landscape) {
  /* the steppers hug the card, 10px out from its edges */
  .deck-phone .cardzoom.has-rule > .pullreveal-cards { position: relative; overflow: visible; }
  .deck-phone .cardzoom.has-rule > .pullreveal-cards > .btn.cardzoom-step {
    position: absolute; top: 50%; translate: 0 -50%; z-index: 4; width: 44px; min-width: 44px; height: 72px; min-height: 72px; margin: 0; padding: 0;
    border: 1px solid #a9cdec55; border-radius: 12px; background: #0c111c; color: #eef8ff; font: 700 26px/1 var(--body); letter-spacing: 0; transform: none;
  }
  .deck-phone .cardzoom.has-rule > .pullreveal-cards > .btn.cardzoom-step.prev { right: calc(100% + 10px); }
  .deck-phone .cardzoom.has-rule > .pullreveal-cards > .btn.cardzoom-step.next { left: calc(100% + 10px); }
  /* one headline style for the zooms: display 18px, coloured by state */
  .deck-phone .pullreveal:is(.cardzoom, .deck-reveal) > .kicker { font: 700 18px/1.2 var(--display); letter-spacing: .01em; }
  .deck-phone .cardzoom > .kicker.kicker-hand { color: #9fe3f2; }
  .deck-phone .cardzoom.lost .cardzoom-clock { color: #ffc4b4; }
  /* two-line buttons: the verb, then what it means */
  .deck-phone .pullreveal > .row > .btn:is(.deck-getcards, .deck-putback),
  .deck-phone .pullreveal.deck-reveal > .row > .btn:last-child { flex-direction: column; gap: 3px; white-space: normal; line-height: 1; }
  .deck-phone .pullreveal > .row > .btn:is(.deck-getcards, .deck-putback) small,
  .deck-phone .pullreveal.deck-reveal > .row > .btn:last-child small { display: block; font-size: 11px; color: #9fb3c4; }
}
/* -- iteration 16 (judge round 13) -- */
/* one colour per verb: cyan moves cards in the hand, gold spends coins (and
   marks Safe), the Store's red is for real money only */
#ui .screen.deck-phone .pullreveal .btn.primary:not(.deck-buyback, .deck-confirm-protect) {
  background: #54e6f5; border-color: #54e6f5; color: #04121a; box-shadow: none;
}
#ui .screen.deck-phone .pullreveal .btn.primary:not(.deck-buyback, .deck-confirm-protect) small { color: #04323c; }
#ui > .screen.deck-rail .flow-add-chip.is-swap { border-color: #7fe8ff; color: #dff9ff; background: rgb(6 20 28 / .9); }
#ui > .screen.deck-rail .deck-hand :is(.fan-add, .fan-spare > .fan-add) { border-color: #7fe8ff88; color: #dff9ff; background: #06141c; }
#ui > .screen.deck-rail .deck-hand :is(.fan-add, .fan-spare > .fan-add) :is(.fan-add-plus, span) { color: #7fe8ff; }
#ui > .screen.deck-rail .deck-hand :is(.fan-add, .fan-spare > .fan-add) small { color: #9fc9d4; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view small.has-open { color: #7fe8ff; }
/* awakening ready: an outlined glow, not a second filled-gold pill beside Safe */
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig > .tc-awaken.is-ready {
  background: #141006; color: #ffe1a0; box-shadow: 0 0 0 1px #ffd885, 0 0 12px #ffd88588;
}
/* on a narrow card the tag drops under the trigger word rather than clipping */
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig:has(> .tc-awaken) { flex-wrap: wrap; row-gap: .4em; white-space: normal; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig > .tc-awaken { max-width: 100%; }

/* Spare / Hand is a toggle, not a fourth section: the chosen half is filled */
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[aria-selected="true"] { background: #54e6f5; color: #04121a; outline: 0; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[aria-selected="true"] small,
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[aria-selected="true"] small.has-open { color: #04121a; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[data-deck-view="collection"][aria-selected="true"]::before { color: #04121a; }
/* the Store's dot on its outer corner, away from the Spare switch */
#ui > .screen.deck-rail > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after,
body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after { left: auto; right: 5px; }

/* the sheets hide what is behind them */
#ui .screen.deck-phone .pullreveal { background: #05060d; }

/* swap's tag is a reference, not a button: it hugs its words beside a gold
   bar; Cancel is plain */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label {
  flex: 0 1 auto; margin-block: auto; padding: 10px 0; background: #0c111c; box-shadow: inset 3px 0 0 #ffd885; border-radius: 8px;
}
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel { background: #0c111c; border-color: #a9cdec55; color: #eef8ff; }
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel small { color: #c9d6e2; }

/* the empty tile: the headline leads, the count and its sources beneath */
#ui > .screen.deck-rail .tc-more.tc-none .tc-none-head { font-size: 18px; margin-bottom: 4px; }
#ui > .screen.deck-rail .tc-more.tc-none .tc-more-n { font-size: 24px; }
#ui > .screen.deck-rail .tc-more.tc-none .tc-more-how { display: block; }

@media (max-height: 500px) and (orientation: landscape) {
  /* the moves say what they trade places with, on a second line */
  .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn { flex-direction: column; gap: 3px; white-space: normal; line-height: 1; }
  .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn small { display: block; font: 600 11px/1.1 var(--body); color: #9fb3c4; }
  .deck-phone .cardzoom .cardzoom-out { margin: 0; color: #ffe1a0; font: 600 13px/1.35 var(--body); text-align: center; letter-spacing: 0; }
}
/* -- iteration 17 (judge round 14) -- */
/* the compact tail (an SE): "+" and the count in 44px, the locked slot hidden */
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact { width: 44px; min-width: 44px; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact > .btn.fan-locked { display: none; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact :is(.fan-add > span, .fan-add-plus + span) { display: none; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact .fan-add-plus { font-size: 28px; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact small { font-size: 11px; white-space: normal; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .tc-blank :is(.tc-blank-num, .tc-blank-note) { color: #8a9bb0; }

/* the empty Spare tile leads the row and takes its free width; one stat line */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more.deck-none,
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more:has(> .tc-none) { flex: 1 0 auto; max-width: 420px; min-width: calc(var(--tct) * 75); }
#ui > .screen.deck-rail .tc-more.tc-none > * { max-width: 280px; }
#ui > .screen.deck-rail .tc-more .tc-more-stat { display: block; font: 600 15px/1.2 var(--body); color: #c9d6e2; }
#ui > .screen.deck-rail .tc-more .tc-more-stat .tc-more-n { display: inline; font-size: 30px; vertical-align: -3px; margin-right: 4px; color: #eef8ff; }
#ui > .screen.deck-rail .tc-more .tc-more-stat .tc-more-label { font: inherit; }

/* whose deck: the counts in the rail's neutral, not coin gold */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn small { color: #c9d6e2; }

/* the rail's numbers read upright (13px; the words still run bottom to top) */
#ui > .screen.deck-rail > .deck-views > .btn.deck-view small { writing-mode: horizontal-tb; rotate: 180deg; font-size: 13px; }
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn small { writing-mode: horizontal-tb; rotate: 180deg; font-size: 12px; white-space: nowrap; }
/* the chosen half of Spare / Hand: a deep filled cyan, not neon */
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[aria-selected="true"] { background: #0f4650; color: #eef8ff; box-shadow: inset 0 0 0 1px #54e6f5; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[aria-selected="true"] small,
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[aria-selected="true"] small.has-open { color: #7fe8ff; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view[data-deck-view="collection"][aria-selected="true"]::before { color: #eef8ff; }

/* swap: the tag fills the column, its lines on one spine; Cancel at the foot
   where the thumb rests; a long rule keeps to two lines */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label { flex: 1 1 auto; margin: 0; align-items: flex-start; justify-content: flex-start; padding: 14px 0; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-rule { max-width: 2.5em; overflow: hidden; }
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel { height: 64px; min-height: 64px; }

@media (max-height: 500px) and (orientation: landscape) {
  /* the moves: room for two lines; a protection cost in gold */
  .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn { height: auto; min-height: 52px; padding: 6px 8px; }
  .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn small { white-space: normal; text-wrap: balance; max-width: 100%; font-size: 12px; line-height: 1.15; }
  .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn .move-main { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn small.move-cost { color: #ffd885; }
  .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn .deck-shield { width: 13px; height: 13px; color: #ffd885; vertical-align: -1px; }
  #ui .screen.deck-phone .cardzoom .btn.deck-putback { font-size: 14px; }
  /* the zoomed face gives the art more room; its rule starts at the top */
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-art { height: 55em; }
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-effect { top: 70.5em; justify-content: flex-start; padding-top: 2.4em; }
  /* a lost card keeps its sticker and its dimming in the zoom; the clock reads */
  .deck-phone .cardzoom.lost .pullreveal-cards .tcard { filter: saturate(.7) brightness(.9); }
  .deck-phone .cardzoom.lost .pullreveal-cards .tc-art::before {
    content: 'Lost & Found'; position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px;
    background: #ff8a70; color: #1d0904; font: 800 12px/1 var(--body); letter-spacing: .04em; text-transform: uppercase;
  }
  .deck-phone .cardzoom.lost .cardzoom-clock { font-size: 13px; }
  /* Protect's price as large as its verb */
  #ui .screen.deck-phone .pullreveal .btn.deck-confirm-protect small { font-size: inherit; }
}
/* on wider phones the zoom is one centred group: card, a gap for the
   steppers, the actions */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 800px) {
  .deck-phone .pullreveal:is(.cardzoom.has-rule, .deck-reveal) {
    grid-template-columns: auto minmax(0, 280px); justify-content: center; column-gap: 96px; padding-inline: max(16px, var(--sal)) max(16px, var(--sar));
  }
}
/* -- iteration 18 (judge round 15) -- */
/* the pull tiles: one bottom-to-top line, "Pull ◆ 120" (round 14's upright
   price sat beside the word across 44px and clipped both) */
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn { flex-direction: row; justify-content: center; align-items: center; gap: 6px; }
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn small { writing-mode: inherit; rotate: none; display: inline; font-size: 12px; white-space: nowrap; }

/* a compact tail (an SE): the third card dissolves rather than showing a sliver */
#ui > .screen.deck-rail > .deck-hand:has(> .fan-tail.is-compact) > .deck-fan {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}

/* swap: the outgoing card's art heads the tag, framed in its kind's colour */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art {
  flex: none; align-self: center; width: 52px; height: 52px; margin-top: 8px; border-radius: 8px; overflow: hidden;
  border: 2px solid var(--c, #ffd885); background: #0c111c;
}
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art:empty { display: none; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }

/* the empty Spare tile is card-sized for good; its buy-back is a gold spend */
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more.deck-none,
#ui > .screen.deck-rail .deck-stage > .btn.flow-card.deck-more:has(> .tc-none) { flex: none; width: calc(var(--tct) * 75); max-width: none; min-width: 0; }
#ui > .screen.deck-rail .tc-more > .btn.tc-more-act.tc-more-buyback { background: #1a1406; border-color: #ffd885; color: #ffe1a0; box-shadow: none; }
#ui > .screen.deck-rail .tc-more > .btn.tc-more-act.tc-more-buyback small { color: #ffd885; }

/* the rail's two columns start on one line */
#ui > .screen.deck-rail > .clubhouse-tabs, #ui > .screen.deck-rail > .deck-views { margin-top: 4px; }

@media (max-height: 500px) and (orientation: landscape) {
  /* the hand zoom: moving and spending read as two groups */
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-zoom-protect { margin-top: 6px; }
}
/* -- iteration 19 (judge round 16) -- */
/* whose deck: every student named; the chosen one ringed in cyan, the others
   quieter (the slot counts stay in the labels; Hand shows the chosen one's) */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn small { display: none; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn .crew-name {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; max-width: none; padding: 1px 0; text-align: center;
  background: #0a0d16d9; color: #eef8ff; font: 700 10px/1.2 var(--body); letter-spacing: 0; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn:not(.on) { opacity: .75; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn.on { box-shadow: 0 0 0 2px #54e6f5; }

/* the SE's compact hand: two cards fill the row; no ghost of a third */
#ui > .screen.deck-rail > .deck-hand:has(> .fan-tail.is-compact) > .deck-fan {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent);
}
/* ...and its locked slot stays in view as a small lock with its number */
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact > .btn.fan-locked { display: flex; flex: 0 0 auto; min-height: 56px; padding: 4px 0; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact > .btn.fan-locked .tc-blank-note { display: none; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .tc-blank-note { text-transform: none; }

/* swap: the outgoing card at card proportions; art and words one centred
   block, Cancel at the foot */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art { width: 60px; height: 84px; margin-top: auto; object-position: 50% 30%; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art > img { object-position: 50% 30%; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label { flex: 0 1 auto; margin: 0; justify-content: center; align-items: center; padding: 12px 6px; }
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel { margin-top: auto; }

/* the empty tile's free pull: the verb, then its note */
#ui > .screen.deck-rail .tc-more > .btn.tc-more-act.is-free { flex-direction: column; gap: 3px; line-height: 1; }
#ui > .screen.deck-rail .tc-more > .btn.tc-more-act.is-free small { display: block; }

/* one radius: the zoom and sheet buttons and the rail's close, 8px */
#ui > .screen.deck-rail > .screenhead > .screenclose { border-radius: 8px; }
@media (max-height: 500px) and (orientation: landscape) {
  .deck-phone .pullreveal :is(.row, .deck-order-actions) > .btn { border-radius: 8px; }
  /* the zoom gives its art the rule panel's empty space */
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-art { height: 62em; }
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-effect { top: 77.5em; bottom: 4em; }
  .deck-phone .pullreveal.deck-reveal > .row > .btn:last-child small,
  .deck-phone .pullreveal.deck-reveal > .row > .btn small { color: #9fb3c4; }
}
@media (max-height: 500px) and (orientation: landscape) and (min-width: 800px) {
  /* the hand zoom's group centres with its stepper gutter counted */
  .deck-phone .pullreveal.cardzoom.has-rule:has(.cardzoom-step) { padding-left: calc(max(16px, var(--sal)) + 54px); }
}
/* -- iteration 20 (judge round 17) -- */
/* an armed pull tile: gold, "Tap again ◆ 120" (a second tap within 2.5s pulls) */
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn.is-armed { background: #ffd885; border-color: #ffd885; color: #241a04; font-size: 0; }
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn.is-armed::before { content: 'Tap again'; font: 800 13px/1 var(--body); color: #241a04; }
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn.is-armed small { color: #241a04; font-size: 12px; }

/* whose deck: open slots wait as a cyan count on the portrait; names 11px */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn[data-open]:not([data-open=""])::after {
  content: attr(data-open); position: absolute; top: 2px; right: 2px; left: auto; bottom: auto; inset: 2px 2px auto auto; transform: none;
  display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #7fe8ff; color: #04121a; font: 800 10px/1 var(--body); letter-spacing: 0; opacity: 1; box-shadow: 0 0 0 2px #0a0d16;
}
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn .crew-name { font-size: 11px; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn:not(.on) { opacity: .85; }

/* the hand's "+N ›": at the row's edge, beside the tail, while cards are past it */
#ui > .screen.deck-rail > .deck-hand > .btn.deck-fan-more[hidden] { display: none; }
#ui > .screen.deck-rail > .deck-hand > .btn.deck-fan-more {
  position: absolute; top: 50%; right: 8px; translate: 0 -50%; z-index: 5; width: 44px; min-width: 44px; height: 56px; min-height: 56px; margin: 0; padding: 0;
  border: 1px solid #7fe8ff88; border-radius: 10px; background: #06141cf0; color: #dff9ff; font: 800 13px/1 var(--body); letter-spacing: 0; box-shadow: 0 2px 12px #000c;
}
/* with a tail, it heads the tail's column (over its empty top), never over a card */
#ui > .screen.deck-rail > .deck-hand:has(> .fan-tail) > .btn.deck-fan-more { position: relative; top: auto; right: auto; translate: none; grid-column: 2; grid-row: 2; align-self: start; justify-self: stretch; margin-top: 8px; width: 64px; height: 44px; min-height: 44px; }
#ui > .screen.deck-rail > .deck-hand:has(> .fan-tail.is-compact) > .btn.deck-fan-more { width: 44px; }
#ui > .screen:not(.deck-rail) .deck-hand > .btn.deck-fan-more { display: none; }

/* the rail: one geometry on every Clubhouse tab; Spare and Hand equal halves */
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs { margin-top: 4px; }
}
#ui > .screen.deck-rail.rail-pulls > .deck-phone-tools { margin-top: 4px; }
#ui > .screen.deck-rail > .deck-views > .btn.deck-view { flex: 1 1 0; }

/* swap's kicker in sentence case, its lines on one edge */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > small { text-transform: none; letter-spacing: 0; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label { align-items: flex-start; }

/* rules break evenly */
.tcard .tc-text { text-wrap: balance; }

@media (max-height: 500px) and (orientation: landscape) {
  /* the zoom prints the rule larger than the row does */
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-art { height: 61em; }
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-effect { top: 76.5em; }
  .deck-phone .pullreveal .pullreveal-cards .tcard .tc-text { font-size: max(15px, 4.6em); }
  /* Buy back to spare: the second, outlined spend */
  .deck-phone .cardzoom.lost > .row > .btn.deck-buyback-spare { border-color: #ffd885; color: #ffe1a0; background: #1a1406; }
  .deck-phone .cardzoom.lost > .row > .btn.deck-buyback-spare small { color: #ffd885; }
  /* the reveal's spend stands apart from its free choices */
  .deck-phone .pullreveal.deck-reveal > .row > .btn.deck-pull-again { margin-top: 14px; }
}
@media (max-height: 500px) and (orientation: landscape) and (min-width: 800px) {
  .deck-phone .pullreveal:is(.cardzoom.lost, .deck-reveal) { column-gap: 40px; }
}
/* -- iteration 21 (judge round 18) -- */
@media (max-height: 500px) {
  /* the Lost zoom: every action a full row (round 17's "to spare" landed in a
     half cell and clipped) */
  .deck-phone .cardzoom.lost.has-rule > .row > .btn { grid-column: 1 / -1; white-space: nowrap; }
}

/* "N more ›" heads the tail as its own item; the tail's tiles start below it */
#ui > .screen.deck-rail > .deck-hand:has(> .btn.deck-fan-more:not([hidden])) > .fan-tail { padding-top: 52px; box-sizing: border-box; }
#ui > .screen.deck-rail > .deck-hand > .btn.deck-fan-more { border-color: #a9cdec66; background: #0c111c; color: #eef8ff; font: 700 12px/1.1 var(--body); }
#ui > .screen.deck-rail > .deck-hand > .btn.deck-fan-more b { font-size: 15px; margin-left: 2px; }
#ui > .screen.deck-rail > .deck-hand:has(> .fan-tail.is-compact) > .btn.deck-fan-more { flex-direction: column; gap: 1px; white-space: normal; padding: 2px 0; font-size: 11px; }

/* the portrait badge: "+2" on one line */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn[data-open]:not([data-open=""])::after { min-width: 22px; white-space: nowrap; padding: 0 4px; font-size: 10px; }
/* the compact tail's lock keeps its rank */
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact > .btn.fan-locked .tc-blank-note { display: block; font-size: 10px; }

/* a short Spare row centres; a long one still starts at the rail */
#ui > .screen.deck-rail .deck-album .deck-stage { justify-content: safe center; }

/* the rail's quieter words still read (4.5:1) */
#ui > .screen.deck-rail > .clubhouse-tabs > .btn.clubhouse-tab:not([aria-selected="true"]),
#ui > .screen.deck-rail > .deck-views > .btn.deck-view:not([aria-selected="true"]) { color: #b8c6d4; }
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab:not([aria-selected="true"]) { color: #b8c6d4; }
}
/* -- iteration 22 (judge round 19) -- */
/* swap keeps the rail's width (two 44px columns and their 6px gap), so the
   row never jumps; the outgoing card at card proportions heads the column,
   its words read across beneath it, Cancel at the foot */
#ui > .screen.screen-deck.deck-rail.rail-swapping { grid-template-columns: 94px minmax(0, 1fr); }
#ui > .screen.deck-rail.rail-swapping > .deck-swap-pill { width: 94px; justify-content: flex-start; gap: 8px; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art { flex: none; width: 94px; height: auto; aspect-ratio: 75 / 105; margin: 0; border-radius: 8px; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label {
  writing-mode: horizontal-tb; rotate: 0deg; width: 94px; flex: 0 1 auto; min-height: 0; margin: 0; padding: 8px 6px 8px 11px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; text-align: left; white-space: normal; overflow: hidden;
}
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > * { white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > small { font: 700 12px/1.2 var(--body); color: #ffd885; letter-spacing: 0; text-transform: none; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > b { font: 700 14px/1.15 var(--body); color: #fff1cf; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-rule {
  font: 600 13px/1.25 var(--body); color: #eef8ff; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel { width: 94px; height: 48px; min-height: 48px; margin-top: auto; flex-direction: row; gap: 6px; font-size: 16px; }
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel small { font: 700 13px/1 var(--body); }

/* the hand fades its last 56px only while more lies past the edge (a hard
   sliver of a third card read as a clipped card) */
#ui > .screen.deck-rail > .deck-hand:not(:has(> .fan-tail.is-compact)) > .deck-fan.has-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
/* "N more ›": one line beside a full tail; stacked in a compact one, the
   chevron kept with its word */
#ui > .screen.deck-rail > .deck-hand > .btn.deck-fan-more { flex-direction: row; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
#ui > .screen.deck-rail > .deck-hand > .btn.deck-fan-more b.fm-n { margin: 0; font: 800 13px/1 var(--body); }
#ui > .screen.deck-rail > .deck-hand > .btn.deck-fan-more .fm-w { font: 700 12px/1 var(--body); }
#ui > .screen.deck-rail > .deck-hand:has(> .fan-tail.is-compact) > .btn.deck-fan-more { flex-direction: column; gap: 3px; padding: 4px 0; }
#ui > .screen.deck-rail > .deck-hand:has(> .fan-tail.is-compact) > .btn.deck-fan-more b.fm-n { font-size: 16px; }
#ui > .screen.deck-rail > .deck-hand:has(> .fan-tail.is-compact) > .btn.deck-fan-more .fm-w { font-size: 11px; }
/* the locked slot's number and rank read (they were 10px at 0.55 opacity) */
#ui > .screen.deck-rail > .deck-hand > .fan-tail > .btn.fan-locked { opacity: 1; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .tc-blank .tc-blank-num { color: #c9d6e2; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .tc-blank .tc-blank-note { color: #b8c6d4; font-size: 11px; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail .tc-blank svg { color: #8a9bb0; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact > .btn.fan-locked .tc-blank-note { font-size: 11px; }

/* the awakening tag: its words ellipsize inside, so its 12px tap slop is not
   clipped by the tag itself */
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig > .tc-awaken { display: inline-flex; align-items: center; overflow: visible; font-size: 12px; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig > .tc-awaken > .tc-awaken-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-height: 500px) {
  /* the Protect sheet's card prints as the zoom does: large rule, its kind named */
  #ui .screen.deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-art { height: 61em; }
  #ui .screen.deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-effect { top: 76.5em; bottom: 4em; justify-content: flex-start; padding: 2.4em 2.8em 2em; }
  #ui .screen.deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-trig { gap: 1em; font-size: max(11px, 2.4em); letter-spacing: .12em; }
  #ui .screen.deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-trig-kind { display: inline; color: #c9d6e2; letter-spacing: .08em; }
  #ui .screen.deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-text { font-size: max(15px, 4.6em); line-height: 1.22; }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* the Store's pull titles hold their own over bright art */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-pulls .btn { text-shadow: 0 1px 2px #000, 0 0 12px #000; }
}
/* swap's column stands exactly as tall as the cards and level with them */
#ui > .screen.deck-rail.rail-swapping > .deck-swap-pill { align-self: center; height: calc(var(--tct, 3px) * 105); }
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-pulls .btn { text-shadow: 0 0 2px #000, 0 0 6px #000, 0 1px 12px #000; }
}
/* -- iteration 23 (judge round 20) -- */
/* the Spare / swap row starts where the hand starts (the toggle never moves a
   card sideways), and while more lies past its edge it fades out at the safe
   edge, not under the notch, with "N more ›" there, as the hand has */
#ui > .screen.deck-rail .deck-album .deck-stage { justify-content: flex-start; }

/* whose deck: the fill badge sits in the portrait's corner, off the face, and
   the face fills the tile */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn img { object-position: 50% 12%; scale: 1.3; transform-origin: 50% 15%; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn[data-open]:not([data-open=""])::after {
  inset: 0 0 auto auto; width: auto; min-width: 0; height: 14px; padding: 0 3px; border-radius: 0 7px 0 6px; box-shadow: none; font: 800 11px/14px var(--body);
}

@media (max-height: 500px) {
  /* Protect reads as the zooms do: the card at the zoom's size, the words and
     the two buttons beside it, no boxed panel */
  #ui .screen.deck-phone .pullreveal.deck-sheet.deck-protect-confirm > .deck-panel.has-card {
    width: auto; max-width: calc(100vw - 2 * max(16px, var(--sal), var(--sar))); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    grid-template-columns: auto minmax(0, 300px); column-gap: 32px; row-gap: 14px;
  }
  #ui .screen.deck-phone .pullreveal.deck-sheet.deck-protect-confirm .deck-slot-title { font: 700 20px/1.2 var(--display); letter-spacing: .01em; color: #ffd885; }
  #ui .screen.deck-phone .pullreveal.deck-sheet.deck-protect-confirm .deck-slot-what { text-wrap: pretty; }
  /* its trigger line fits the card at any size */
  #ui .screen.deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-trig { letter-spacing: .06em; min-width: 0; }
  #ui .screen.deck-phone .pullreveal.deck-sheet .deck-panel.has-card > .tcard .tc-trig-kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; letter-spacing: .04em; }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* the Store: the three offers one row, title over price; Supporter outlined
     (the free pull stays the loudest thing); Restore a quiet link under them */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-patron .patronlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-patron .patronlist > .btn:not(.patron-restore) {
    flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 4px 8px; line-height: 1.15; white-space: normal; text-align: center;
  }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-patron .patronlist > .btn.primary { background: #160a10; border: 1px solid #ff6b81; color: #ffe1e6; box-shadow: none; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-patron .patronlist > .btn.primary small { color: #ff8fa0; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-patron .patronlist > .btn.patron-restore {
    grid-column: 1 / -1; justify-self: end; min-height: 44px; padding: 0 10px; border: 0; background: none; box-shadow: none;
    color: #b8c6d4; font: 600 13px/1 var(--body); text-decoration: underline; text-underline-offset: 3px;
  }
}
/* -- iteration 24 (judge round 21) -- */
/* the Spare / swap row, when it runs past the screen, keeps a column of its
   own at the right as the hand keeps its tail (64px; 44px where the hand's is
   compact, so an SE's two cards fill both rows alike): "N more ›" there is a
   real button, as tall as the cards; the row fades over its last 56px beside it */
#ui > .screen.deck-rail .deck-album.has-overflow .deck-flow { right: 72px; }
#ui > .screen.deck-rail .deck-album.has-overflow.is-compact .deck-flow { right: 52px; }
#ui > .screen.deck-rail .deck-album.has-overflow .deck-stage { padding-right: 4px; }
#ui > .screen.deck-rail .deck-album .deck-flow.has-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
#ui > .screen .deck-album > .btn.deck-flow-more[hidden], #ui > .screen:not(.deck-rail) .deck-album > .btn.deck-flow-more { display: none; }
#ui > .screen.deck-rail .deck-album > .btn.deck-flow-more {
  position: absolute; top: 50%; right: 0; translate: 0 -50%; z-index: 5; width: 64px; min-width: 64px; height: calc(var(--tct, 3px) * 105); min-height: 56px; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;
  border: 1px solid #a9cdec55; border-radius: 10px; background: #0c111c; color: #eef8ff; letter-spacing: 0; box-shadow: none;
}
#ui > .screen.deck-rail .deck-album.is-compact > .btn.deck-flow-more { width: 44px; min-width: 44px; }
#ui > .screen.deck-rail .deck-album > .btn.deck-flow-more b.fm-n { font: 800 20px/1 var(--body); }
#ui > .screen.deck-rail .deck-album > .btn.deck-flow-more .fm-w { font: 700 12px/1 var(--body); color: #c9d6e2; }
#ui > .screen.deck-rail .deck-album.is-compact > .btn.deck-flow-more .fm-w { font-size: 11px; }

/* a full hand's fill reads too, muted ("3/3") */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn[data-open]:not([data-open=""])[data-full="1"]::after { background: #1c2533; color: #b8c6d4; }

/* swap: the outgoing art takes the column's free height, so no band lies
   empty between its words and Cancel */

@media (max-height: 500px) {
  /* Protect: the title, words, price and buttons one block beside the card */
  #ui .screen.deck-phone .pullreveal.deck-sheet.deck-protect-confirm > .deck-panel.has-card { grid-template-rows: 1fr repeat(4, auto) 1fr; row-gap: 12px; }
  #ui .screen.deck-phone .pullreveal.deck-sheet.deck-protect-confirm > .deck-panel.has-card > .tcard { grid-row: 1 / -1; }
  #ui .screen.deck-phone .pullreveal.deck-sheet.deck-protect-confirm > .deck-panel.has-card > .deck-slot-title { grid-row: 2; }
  #ui .screen.deck-phone .pullreveal.deck-sheet.deck-protect-confirm > .deck-panel.has-card > .deck-slot-what { grid-row: 3; }
  #ui .screen.deck-phone .pullreveal.deck-sheet.deck-protect-confirm > .deck-panel.has-card > .deck-slot-price { grid-row: 4; }
  #ui .screen.deck-phone .pullreveal.deck-sheet.deck-protect-confirm > .deck-panel.has-card > .row { grid-row: 5; margin-top: 6px; }
}
/* -- iteration 25 (judge round 22) -- */
/* swap: the outgoing art at its card's own proportions, the face in frame;
   the tag takes the free height and ends with what to do */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art { flex: none; aspect-ratio: 75 / 105; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art > img { object-position: 50% 18%; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label { flex: 1 1 auto; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-hint { margin-top: auto; padding-top: 6px; font: 600 12px/1.25 var(--body); color: #9fe3f2; }

/* the row's more column: a button at the cards' top line, not a blank slab;
   a hidden Lost & Found named apart in coral */
#ui > .screen.deck-rail .deck-album > .btn.deck-flow-more { top: calc(50% - var(--tct, 3px) * 105 / 2); translate: none; height: auto; min-height: 72px; padding: 10px 0; }
#ui > .screen.deck-rail .deck-album > .btn.deck-flow-more .fm-lost { margin-top: 4px; padding: 2px 5px; border-radius: 6px; background: #3a1712; color: #ffb3a1; font: 700 11px/1.1 var(--body); }

/* three golds were three meanings: the awakening tag is violet, gold stays
   for Safe (filled) and Protect (a spend) */
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig > .tc-awaken { border-color: #c4a5ff; background: #170f26; color: #e6d9ff; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-trig > .tc-awaken.is-ready { border-color: #c4a5ff; background: #c4a5ff; color: #170f26; box-shadow: 0 0 10px #c4a5ff66; }
/* the commit chips are drawn as tall as they act */
#ui > .screen.deck-rail .flow-add-chip { min-height: 36px; padding: 0 13px; font-size: 14px; }

@media (max-height: 500px) {
  /* Protect: centred like its sibling sheets; the spend stacked over Cancel */
  #ui .screen.deck-phone .pullreveal.deck-sheet.deck-protect-confirm > .deck-panel.has-card > :not(.tcard) { text-align: center; justify-self: center; }
  #ui .screen.deck-phone .pullreveal.deck-sheet.deck-protect-confirm > .deck-panel.has-card > .row { flex-direction: column; width: min(270px, 100%); gap: 8px; }
  #ui .screen.deck-phone .pullreveal.deck-sheet.deck-protect-confirm > .deck-panel.has-card > .row > .btn { flex: none; width: 100%; min-height: 48px; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 799px) {
  /* zooms with no steppers sit centred, not in a stepper gutter */
  .deck-phone .pullreveal:is(.cardzoom.lost, .deck-reveal) { grid-template-columns: auto minmax(0, 270px); justify-content: center; column-gap: 32px; padding-inline: max(16px, var(--sal)) max(16px, var(--sar)); }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* the Clubhouse's ✕ keeps its corners on every tab */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .screenhead > .screenclose { border-radius: 8px; }
}
/* -- iteration 26 (judge round 23) -- */
/* a Spare row that fits the screen centres (only a row that scrolls starts at
   the rail, where the hand starts) */
#ui > .screen.deck-rail .deck-album:not(.has-overflow) .deck-stage { justify-content: center; }

/* swap's tag: the hint follows the rule; the slack falls above Cancel; the
   tag a visible surface */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label { flex: 0 0 auto; background: #101826; box-shadow: inset 3px 0 0 #ffd885, inset 0 0 0 1px #ffd88533; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-hint { margin-top: 4px; padding-top: 0; }

/* the hand's "N more ›" is the Spare row's: the count over its word, 72px */
#ui > .screen.deck-rail > .deck-hand > .btn.deck-fan-more { flex-direction: column; gap: 4px; min-height: 72px; height: auto; padding: 10px 0; }
#ui > .screen.deck-rail > .deck-hand > .btn.deck-fan-more b.fm-n { font: 800 20px/1 var(--body); }
#ui > .screen.deck-rail > .deck-hand > .btn.deck-fan-more .fm-w { font: 700 12px/1 var(--body); color: #c9d6e2; }
#ui > .screen.deck-rail > .deck-hand:has(> .btn.deck-fan-more:not([hidden])) > .fan-tail { padding-top: 80px; }
/* an SE's compact add tile keeps its verb */
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact :is(.fan-add > span, .fan-add-plus + span) { display: block; font: 700 11px/1.15 var(--body); white-space: normal; text-align: center; }

@media (max-height: 500px) {
  /* a move that costs Safe reads as a cost, not in Safe's gold */
  .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn small.move-cost { color: #ffab8f; }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* one corner radius across the Clubhouse */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen :is(.club-hero, .club-free-pull, .club-pull, .patronlist > .btn:not(.patron-restore)) { border-radius: 10px; }
}
/* -- iteration 27 (judge round 24) -- */
/* whose deck: each portrait crops to its own face (--fx/--fy from
   PORTRAIT_FACE), zoomed so the face fills the tile, eyes about a third down,
   between the fill tab and the name strip */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn img {
  object-position: 50% 0; transform-origin: var(--fx, 50%) var(--fy, 27%); scale: 1.7;
  translate: calc(50% - var(--fx, 50%)) calc(24% - var(--fy, 27%));
}

/* the hand's "N more ›" at the Spare row's 72px (an older :has() rule held it
   at 44px, leaving a band above Add) */
#ui > .screen.deck-rail > .deck-hand:has(> .fan-tail) > .btn.deck-fan-more { height: auto; min-height: 72px; }

/* Safe is a state: a quiet pill (the card's gold ring already says Safe);
   only Protect, the spend, is drawn to be pressed */
#ui > .screen.deck-rail .deck-fan > .btn.fan-card.is-safe > .slot-n { background: #0c111ce6; color: #ffd885; border: 1px solid #ffd88566; }
#ui > .screen.deck-rail .deck-fan > .btn.fan-card.is-safe > .slot-n .deck-shield { color: #ffd885; }

/* swap: the kicker one line; the outgoing art grows into the slack, the face kept in frame */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > small { white-space: nowrap; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art { flex: 1 1 auto; aspect-ratio: auto; min-height: 132px; max-height: 200px; }

/* a hidden Lost & Found reads plainly, outlined rather than on a maroon fill */
#ui > .screen.deck-rail .deck-album > .btn.deck-flow-more .fm-lost { background: none; border: 1px solid #ffb3a1; color: #ffc4b5; white-space: normal; text-align: center; max-width: 56px; line-height: 1.15; }
#ui > .screen.deck-rail .deck-album.is-compact > .btn.deck-flow-more .fm-lost { max-width: 40px; padding: 2px 3px; }
/* -- iteration 28 (judge round 25) -- */
/* the Spare column's free height: a thumbnail of each card past the edge
   (art, name), a tap scrolls to it; a Lost & Found one outlined in coral */
#ui > .screen .deck-album > .deck-flow-peek[hidden], #ui > .screen:not(.deck-rail) .deck-album > .deck-flow-peek { display: none; }
#ui > .screen.deck-rail .deck-album > .deck-flow-peek {
  position: absolute; right: 0; width: 64px; z-index: 5; bottom: calc(50% - var(--tct, 3px) * 105 / 2);
  display: flex; flex-direction: column; gap: 8px; overflow: hidden;
}
#ui > .screen.deck-rail .deck-album.is-compact > .deck-flow-peek { width: 44px; }
#ui > .screen.deck-rail .deck-album > .deck-flow-peek > .btn.deck-peek {
  flex: none; position: relative; width: 100%; height: 64px; min-height: 0; margin: 0; padding: 0; border-radius: 8px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c, #a9cdec) 70%, transparent); background: #0c111c; box-shadow: none;
}
#ui > .screen.deck-rail .deck-album.is-compact > .deck-flow-peek > .btn.deck-peek { height: 56px; }
#ui > .screen.deck-rail .deck-album > .deck-flow-peek > .btn.deck-peek img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
#ui > .screen.deck-rail .deck-album > .deck-flow-peek > .btn.deck-peek .deck-peek-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 3px; background: #0a0d16e0; color: #eef8ff;
  font: 700 11px/1.2 var(--body); letter-spacing: 0; text-transform: none; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ui > .screen.deck-rail .deck-album > .deck-flow-peek > .btn.deck-peek.lost { border: 1px solid #ffb3a1; }
#ui > .screen.deck-rail .deck-album > .deck-flow-peek > .btn.deck-peek.lost img { filter: saturate(.7) brightness(.85); }
/* the lost card shown as a thumbnail, the "+1 lost card" line says it twice */
#ui > .screen.deck-rail .deck-album:has(> .deck-flow-peek.has-lost:not([hidden])) > .btn.deck-flow-more .fm-lost { display: none; }

/* the rail's numbers stand upright: the coin count under its ◆, the pull
   prices at the end of their words (the words still read bottom to top) */
#ui > .screen.deck-rail > .screenhead > .deck-bar > .deck-coins,
body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .screenhead > .club-coins {
  writing-mode: horizontal-tb; rotate: 0deg; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
}
:is(#ui > .screen.deck-rail > .screenhead > .deck-bar > .deck-coins, body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .screenhead > .club-coins) > .cn-d { font: 700 12px/1 var(--body); color: #ffd885; }
:is(#ui > .screen.deck-rail > .screenhead > .deck-bar > .deck-coins, body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .screenhead > .club-coins) > .cn-n { font: 800 12px/1 var(--body); color: #ffe1a0; white-space: nowrap; }
:is(#ui > .screen.deck-rail > .screenhead > .deck-bar > .deck-coins, body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .screenhead > .club-coins) > .cn-w { font: 600 11px/1 var(--body); color: #c6b48a; }
#ui > .screen.deck-rail.rail-pulls .deck-collection-tools > .btn small { writing-mode: horizontal-tb; rotate: 180deg; display: block; font-size: 12px; white-space: nowrap; }

/* the rail's locked slot answers a tap with the rank it needs; it looks shut */
#ui > .screen.deck-rail > .deck-hand > .fan-tail > .btn.fan-locked.needs-rank { cursor: default; }

@media (max-height: 500px) {
  /* what a zoom action will do reads, not squints (12px, #c9d6e2) */
  .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn small:not(.move-cost),
  .deck-phone .cardzoom.has-rule > .row > .btn:is(.deck-getcards, .deck-putback) small { font-size: 12px; color: #c9d6e2; }
  /* no widow under a Lost card's clock */
  .deck-phone .cardzoom .cardzoom-clock { text-wrap: balance; }
}
/* -- iteration 29 (judge round 26) -- */
/* the Spare column's thumbnails are card-shaped, nameless (names truncated to
   "Passi…"): the art and the kind's border say which; the lost one says "Lost" */
#ui > .screen.deck-rail .deck-album > .deck-flow-peek > .btn.deck-peek,
#ui > .screen.deck-rail .deck-album.is-compact > .deck-flow-peek > .btn.deck-peek { height: auto; aspect-ratio: 75 / 105; border-width: 2px; }
#ui > .screen.deck-rail .deck-album > .deck-flow-peek > .btn.deck-peek img { object-position: 50% 20%; }
#ui > .screen.deck-rail .deck-album > .deck-flow-peek > .btn.deck-peek.lost { border-width: 2px; }
#ui > .screen.deck-rail .deck-album > .deck-flow-peek > .btn.deck-peek.lost .deck-peek-name { background: #3a1712; color: #ffc4b5; }

/* no clipped title shows at a row's edge: the fade is clear before the column */
#ui > .screen.deck-rail > .deck-hand:not(:has(> .fan-tail.is-compact)) > .deck-fan.has-more,
#ui > .screen.deck-rail .deck-album .deck-flow.has-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent calc(100% - 20px)); mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent calc(100% - 20px));
}

/* the hand's "N more ›" heads the tail's column, level with the cards' top */
#ui > .screen.deck-rail > .deck-hand > .fan-tail > .btn.deck-fan-more[hidden] { display: none; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail > .btn.deck-fan-more {
  position: static; translate: none; flex: none; width: 100%; min-width: 0; height: auto; min-height: 72px; margin: 0; padding: 10px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;
  border: 1px solid #a9cdec66; border-radius: 10px; background: #0c111c; color: #eef8ff; box-shadow: none; letter-spacing: 0;
}
#ui > .screen.deck-rail > .deck-hand > .fan-tail > .btn.deck-fan-more b.fm-n { margin: 0; font: 800 20px/1 var(--body); }
#ui > .screen.deck-rail > .deck-hand > .fan-tail > .btn.deck-fan-more .fm-w { font: 700 12px/1 var(--body); color: #c9d6e2; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact > .btn.deck-fan-more { min-height: 64px; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact > .btn.deck-fan-more .fm-w { font-size: 11px; }

/* whose deck: the hand's fill a bar along the portrait's foot (cyan, muted
   when full, coral when empty), the face clear of any tab */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn[data-open]:not([data-open=""])::after,
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn[data-open]:not([data-open=""])[data-full="1"]::after {
  content: ''; inset: auto 0 0 0; width: auto; min-width: 0; height: 3px; padding: 0; border-radius: 0; box-shadow: none; font-size: 0;
  background: linear-gradient(90deg, #7fe8ff calc(var(--fill, 0) * 100%), #ffffff2e 0);
}
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn[data-open]:not([data-open=""])[data-full="1"]::after { background: #8a9bb0; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn.is-empty[data-open]:not([data-open=""])::after { background: #ff8f7a; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn .crew-name { bottom: 3px; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn img { scale: 1.45; translate: calc(50% - var(--fx, 50%)) calc(30% - var(--fy, 27%)); }

/* Protect is the button (filled gold, as every coin spend); Safe a plain state */
#ui > .screen.deck-rail .deck-fan > .btn.fan-card > .fan-protect-chip { background: #ffd885; border-color: #ffd885; color: #241a04; }
#ui > .screen.deck-rail .deck-fan > .btn.fan-card > .fan-protect-chip :is(*, b, svg) { color: #241a04; }
#ui > .screen.deck-rail .deck-fan > .btn.fan-card.is-safe > .slot-n { background: none; border: 0; box-shadow: none; }

@media (max-height: 500px) {
  /* the hand zoom's four actions one height */
  .deck-phone .cardzoom.has-rule > .deck-order-actions > .btn,
  .deck-phone .cardzoom.has-rule > .row > .btn:is(.deck-getcards, .deck-putback) { min-height: 59px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* the Store's offers: prices that read */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-patron .patronlist > .btn:not(.patron-restore) { font-size: 14px; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-patron .patronlist > .btn small { font-size: 13px; }
}
/* -- iteration 30 (judge round 27) -- */
/* an SE's Spare / swap row ends at its own column with two whole cards: a 12px
   fade, as its hand has (80px erased the second card's frame) */
#ui > .screen.deck-rail .deck-album.is-compact .deck-flow.has-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent);
}
/* wider phones: the fade is sized to the sliver of the next card (--peek-w,
   set as the row scrolls), so only its frame's edge shows, never its words */
#ui > .screen.deck-rail > .deck-hand:not(:has(> .fan-tail.is-compact)) > .deck-fan.has-more,
#ui > .screen.deck-rail .deck-album:not(.is-compact) .deck-flow.has-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--peek-w, 60px) - 4px), transparent calc(100% - var(--peek-w, 60px) + 14px));
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--peek-w, 60px) - 4px), transparent calc(100% - var(--peek-w, 60px) + 14px));
}

/* the hand's column shows its cards past the edge, as the Spare column does */
#ui > .screen.deck-rail > .deck-hand > .fan-tail > .fan-peek[hidden] { display: none; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail > .fan-peek { flex: none; display: flex; flex-direction: column; gap: 8px; }
:is(#ui > .screen.deck-rail > .deck-hand > .fan-tail > .fan-peek) > .btn.deck-peek {
  flex: none; position: relative; width: 100%; height: auto; aspect-ratio: 75 / 105; min-height: 0; margin: 0; padding: 0; border-radius: 8px; overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--c, #a9cdec) 70%, transparent); background: #0c111c; box-shadow: none;
}
:is(#ui > .screen.deck-rail > .deck-hand > .fan-tail > .fan-peek) > .btn.deck-peek img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
:is(#ui > .screen.deck-rail > .deck-hand > .fan-tail > .fan-peek) > .btn.deck-peek .deck-peek-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 2px; background: #0a0d16e0; color: #eef8ff;
  font: 700 11px/1.2 var(--body); letter-spacing: 0; text-transform: none; text-align: center; white-space: nowrap;
}
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact > .fan-peek .pk-w { display: none; }
/* "+ Add card" keeps a floor; the thumbnails that would breach it are not drawn */
#ui > .screen.deck-rail > .deck-hand > .fan-tail > .fan-add { min-height: 88px; }
#ui > .screen.deck-rail > .deck-hand > .fan-tail.is-compact > .fan-add { min-height: 80px; }
/* the lock needs ~70px of its 96 for its glyph, number and rank */
#ui > .screen.deck-rail > .deck-hand > .fan-tail > .btn.fan-locked { min-height: 72px; }

/* the Store's free-pull dot sits on its tab's axis, past the word's end */
#ui > .screen.deck-rail > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after,
body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after { left: 50%; right: auto; top: auto; bottom: 6px; translate: -50% 0; }

/* the portraits' fill bar a little thicker */
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn[data-open]:not([data-open=""])::after { height: 4px; }
#ui > .screen.deck-rail .deck-crew > .btn.crew-btn .crew-name { bottom: 4px; }

@media (max-height: 500px) {
  /* Protect in the hand zoom is the filled gold spend it is on the card and the confirm */
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-zoom-protect { background: #ffd885; border-color: #ffd885; color: #241a04; }
  .deck-phone .cardzoom.has-rule > .row > .btn.deck-zoom-protect :is(*, small, svg) { color: #241a04; }
}
/* -- iteration 31 (Chris, 2026-10-13: "still a lot of UI on the right and left, getting in the way";
   the ✕ on the right; a student's hand is reached from their profile, never switched here) --
   the deck is one student's page: Spare / <name>'s hand down one 44px column at the left, the coins at
   its foot; the ✕ alone at the top right; everything else is cards */
#ui > .screen.screen-deck.deck-rail.rail-no-tools {
  grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "views main close" "views main ." "coins main .";
}
#ui > .screen.screen-deck.deck-rail.rail-no-tools.rail-pulls {
  grid-template-columns: 44px auto minmax(0, 1fr) 44px;
  grid-template-areas: "views tools main close" "views tools main ." "coins tools main .";
}
#ui > .screen.screen-deck.deck-rail.rail-no-tools.rail-swapping {
  grid-template-columns: 94px minmax(0, 1fr) 44px;
  grid-template-areas: "views main close" "views main ." "coins main .";
}
#ui > .screen.deck-rail > .screenhead > .screenclose { grid-area: close; justify-self: end; align-self: start; }
#ui > .screen.deck-rail > .screenhead > .deck-bar > .deck-crew,
#ui > .screen.deck-rail > .clubhouse-tabs { display: none !important; }
#ui > .screen.deck-rail > .deck-views { grid-area: views; grid-row: 1 / 3; margin: 0; }
#ui > .screen.deck-rail > .screenhead > .deck-bar > .deck-coins { grid-area: coins; }

/* the rows end at the ✕'s column: nothing runs under it; no column of their own at the right */
#ui > .screen.deck-rail > .deck-hand { margin-right: 0; }
#ui > .screen.deck-rail .deck-hand .deck-fan { padding-right: 4px; }
#ui > .screen.deck-rail .deck-album .deck-flow,
#ui > .screen.deck-rail .deck-album.has-overflow .deck-flow,
#ui > .screen.deck-rail .deck-album.has-overflow.is-compact .deck-flow { right: 0; }
#ui > .screen.deck-rail .deck-album .deck-stage,
#ui > .screen.deck-rail .deck-album.has-overflow .deck-stage { padding-right: 4px; }
#ui > .screen.deck-rail :is(.deck-hand > .btn.deck-fan-more, .deck-album > .btn.deck-flow-more, .deck-album > .deck-flow-peek) { display: none !important; }
/* the open and locked slots: one card-sized tile at the end of the hand row (their styles above) */
/* the stand-alone Build Deck keeps its pull tiles in a column of their own */
#ui > .screen.screen-deck.deck-rail.rail-no-tools.rail-pulls {
  grid-template-columns: 44px 44px minmax(0, 1fr) 44px;
  grid-template-areas: "tools views main close" "tools views main ." "coins views main .";
}
#ui > .screen.deck-rail.rail-no-tools.rail-pulls > .deck-phone-tools { grid-area: tools; grid-row: 1 / 3; }
/* with no column at the right, the next card's sliver is the "more": a plain 48px fade */
#ui > .screen.deck-rail .deck-hand .deck-fan.has-more,
#ui > .screen.deck-rail .deck-album .deck-flow.has-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent) !important; mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent) !important;
}
/* swap mode wins over the pull tiles' layout (both are .rail-pulls) */
#ui > .screen.screen-deck.deck-rail.rail-no-tools.rail-pulls.rail-swapping,
#ui > .screen.screen-deck.deck-rail.rail-no-tools.rail-swapping {
  grid-template-columns: 94px minmax(0, 1fr) 44px; grid-template-areas: "views main close" "views main ." "coins main .";
}
/* a student's sheet: "Hand N/M ›" opens their hand (cyan, the hand's colour) */
#ui .chardetail .btn.cdhand { border-color: #7fe8ff88; color: #dff9ff; background: #06141c; }
#ui .chardetail .btn.cdhand small { color: #7fe8ff; margin-left: 6px; }
/* -- iteration 32 (judge round 28, on Chris's 10-13 ask: the ✕ on the right, less at the sides) --
   one ✕ for every Clubhouse page on a landscape phone: floated at the top right, owning no column */
#ui > .screen.screen-deck.deck-rail.rail-no-tools,
#ui > .screen.screen-deck.deck-rail.rail-no-tools.rail-pulls {
  grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "views main" "views main" "coins main";
}
#ui > .screen.screen-deck.deck-rail.rail-no-tools.rail-pulls { grid-template-columns: 44px 44px minmax(0, 1fr); grid-template-areas: "tools views main" "tools views main" "coins views main"; }
#ui > .screen.screen-deck.deck-rail.rail-no-tools.rail-swapping,
#ui > .screen.screen-deck.deck-rail.rail-no-tools.rail-pulls.rail-swapping { grid-template-columns: 94px minmax(0, 1fr); grid-template-areas: "views main" "views main" "coins main"; }
#ui > .screen.deck-rail > .screenhead > .screenclose,
#ui > .screen.deck-rail.rail-swapping > .screenhead > .screenclose {
  position: absolute; top: 6px; right: max(8px, var(--sar)); z-index: 8; grid-area: auto; visibility: visible;
  background: #0c111ce6; box-shadow: 0 2px 10px #000a;
}
/* the rows run to the edge under the fade; the last tile can scroll clear of the ✕ */
#ui > .screen.deck-rail .deck-album .deck-stage,
#ui > .screen.deck-rail .deck-album.has-overflow .deck-stage { padding-right: 56px; }
#ui > .screen.deck-rail .deck-hand .deck-fan::after { content: ''; flex: 0 0 52px; height: 1px; }
/* swap: the ✕ is its Cancel; the column keeps only what goes out */
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel { display: none; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art { flex: 1 1 auto; aspect-ratio: auto; min-height: 132px; max-height: 220px; }

@media (max-height: 500px) and (orientation: landscape) {
  /* Crew and Store: the tabs (no Deck tab: a hand opens from its student's profile) and the coins at
     the left, the ✕ floated top right as on the deck */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen { grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "tabs main" "coins main"; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .screenhead > .screenclose {
    position: absolute; top: 6px; right: max(8px, var(--sar)); z-index: 8; grid-area: auto; background: #0c111ce6; border-radius: 8px;
  }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-body { padding-right: 52px; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab[data-club-tab="deck"] { display: none; }
  /* a student's profile: its Close is the same ✕ at the top right; Hand the cyan way into the hand */
  body.touch #ui .chardetail .cdfoot > .btn.cdclose {
    position: absolute; top: 6px; right: max(8px, var(--sar)); z-index: 9; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0;
    font-size: 12px; color: transparent; border-radius: 8px; background: #0c111ce6;
  }
  body.touch #ui .chardetail .cdfoot > .btn.cdclose::before { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; font: 400 22px/1 var(--body); color: #eef8ff; }
  body.touch #ui .chardetail .cdfoot:has(> .btn.cdclose:only-child) { height: 0; min-height: 0; margin: 0; padding: 0; border: 0; overflow: visible; }
  body.touch #ui .chardetail .cdhead { padding-right: calc(56px + var(--sar)); }
  body.touch #ui .chardetail .btn.cdhand { background: #7fe8ff; border-color: #7fe8ff; color: #04161c; }
  body.touch #ui .chardetail .btn.cdhand small { color: #04161c; }
}
/* an SE's swap column at 80px, so its second candidate clears the floating ✕ */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 700px) {
  #ui > .screen.screen-deck.deck-rail.rail-no-tools.rail-swapping,
  #ui > .screen.screen-deck.deck-rail.rail-no-tools.rail-pulls.rail-swapping { grid-template-columns: 80px minmax(0, 1fr); }
  #ui > .screen.deck-rail.rail-swapping > .deck-swap-pill,
  #ui > .screen.deck-rail > .deck-swap-pill > :is(.deck-swap-pill-art, .deck-swap-pill-label) { width: 80px; }
}
/* the replacement bar's Cancel clears the floating ✕ */
#ui > .screen.deck-rail > .deck-hand > .deck-exchange { margin-right: 52px; }
/* -- iteration 33 (judge round 29) -- */
/* the floating ✕ never slices a title: the rows fade to clear under it (a soft patch at the top right),
   at their right edge while more lies past, and at their left while scrolled from the start */
#ui > .screen.deck-rail :is(.deck-hand .deck-fan, .deck-album .deck-flow):is(.has-more, .has-less) {
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
#ui > .screen.deck-rail :is(.deck-hand .deck-fan, .deck-album .deck-flow).has-more:not(.has-less) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent), radial-gradient(130px 72px at 100% 0, transparent 50%, #000 100%) !important;
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent), radial-gradient(130px 72px at 100% 0, transparent 50%, #000 100%) !important;
}
#ui > .screen.deck-rail :is(.deck-hand .deck-fan, .deck-album .deck-flow).has-more.has-less {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent), radial-gradient(130px 72px at 100% 0, transparent 50%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent), radial-gradient(130px 72px at 100% 0, transparent 50%, #000 100%) !important;
}
#ui > .screen.deck-rail :is(.deck-hand .deck-fan, .deck-album .deck-flow).has-less:not(.has-more) {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px) !important; mask-image: linear-gradient(90deg, transparent, #000 24px) !important;
}
/* swap: the ✕ says what it does here ("✕ Cancel", gold), and the patch under it is as wide */
#ui > .screen.deck-rail.rail-swapping > .screenhead > .screenclose {
  width: auto; min-width: 44px; padding: 0 12px 0 10px; display: flex; align-items: center; gap: 6px; border: 1px solid #ffd885; color: #ffe1a0;
}
#ui > .screen.deck-rail.rail-swapping > .screenhead > .screenclose::after { content: 'Cancel'; display: inline; position: static; inset: auto; width: auto; height: auto; transform: none; background: none; font: 700 13px/1 var(--body); color: #ffe1a0; }
#ui > .screen.deck-rail.rail-swapping .deck-album .deck-stage { padding-right: 112px; }
#ui > .screen.deck-rail.rail-swapping .deck-album .deck-flow:is(.has-more, .has-less) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent), radial-gradient(220px 76px at 100% 0, transparent 50%, #000 100%) !important;
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent), radial-gradient(220px 76px at 100% 0, transparent 50%, #000 100%) !important;
}
/* the outgoing card carries its name; the tag keeps the slot, the rule and the hint (no name twice) */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art { position: relative; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art > .deck-swap-pill-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px; background: #0a0d16e6; color: #fff1cf;
  font: 700 12px/1.15 var(--body); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > b { display: none; }
@media (max-width: 700px) { #ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-hint { display: none; } }
/* a touch never leaves a card looking pre-selected */
#ui:not([data-ui-input="keys"]) .screen.deck-rail :is(.deck-stage > .btn.flow-card, .deck-fan > .btn.fan-card:not(.is-safe)).focus:not(:focus-visible) .tcard { box-shadow: 0 2em 5em #000d; }
#ui:not([data-ui-input="keys"]) .screen.deck-rail :is(.deck-stage > .btn.flow-card, .deck-fan > .btn.fan-card).focus:not(:focus-visible) { outline: none; }
/* the slot number alone, quiet, for a slot that is neither safe nor offered */
#ui > .screen.deck-rail .deck-fan > .btn.fan-card:not(.is-safe) > .slot-n { min-width: 30px; justify-content: center; color: #c9d6e2; }

@media (max-height: 500px) and (orientation: landscape) {
  /* Crew / Store's rail speaks the deck rail's language: boxed tabs, the chosen one filled cyan,
     14px words; the free-pull dot sits inside the Store tab */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs { gap: 6px; margin-top: 0; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab {
    border: 0; border-radius: 7px; background: #0c111c; box-shadow: inset 0 0 0 1px #a9cdec33; color: #b8c6d4; font: 700 14px/1 var(--body); letter-spacing: 0; text-transform: none;
  }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab[aria-selected="true"] { background: #0f4650; box-shadow: inset 0 0 0 1px #54e6f5; color: #eef8ff; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-tabs > .btn.clubhouse-tab.has-ready::after { bottom: 10px; }
  /* the Crew card's hint: two whole lines */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-hero-action.is-split { display: flex; flex-direction: column; gap: 2px; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-hero-action.is-split > span { white-space: nowrap; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-hero-action.is-split > .club-hero-hand { color: #7fe8ff; font-weight: 800; }
}
#ui > .screen.deck-rail > .deck-views > .btn.deck-view { font: 700 14px/1 var(--body); }
/* -- iteration 34 (judge round 30) -- */
/* swap: the top-right ✕ goes back to 44px (gold-ringed: it cancels); the words "✕ Cancel" stand at the
   foot of the swap column, where the outgoing card is (round 29's 99px pill covered the third title) */
#ui > .screen.deck-rail.rail-swapping > .screenhead > .screenclose { width: 44px; min-width: 44px; padding: 0; gap: 0; display: grid; place-items: center; }
#ui > .screen.deck-rail.rail-swapping > .screenhead > .screenclose::after { content: none; display: none; }
#ui > .screen.deck-rail.rail-swapping .deck-album .deck-stage { padding-right: 56px; }
#ui > .screen.deck-rail.rail-swapping .deck-album .deck-flow:is(.has-more, .has-less) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent), radial-gradient(180px 96px at 100% 0, transparent 50%, #000 100%) !important;
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent), radial-gradient(180px 96px at 100% 0, transparent 50%, #000 100%) !important;
}
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel {
  display: flex; flex: none; width: 100%; height: 44px; min-height: 44px; margin: auto 0 0; flex-direction: row; gap: 6px;
  border: 1px solid #ffd885; border-radius: 10px; background: #1a1406; color: #ffe1a0; font: 700 14px/1 var(--body);
}
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel small { display: inline; font: 700 13px/1 var(--body); color: #ffe1a0; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art { max-height: 168px; }
/* the instruction shows on an SE too, in two words */
@media (max-width: 700px) {
  #ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-hint { display: block; }
  #ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-rule { display: none; }
  #ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art { max-height: 140px; }
}
/* the corner patch under the floating ✕ wider, so a title fades out before it */
#ui > .screen.deck-rail :is(.deck-hand .deck-fan, .deck-album .deck-flow).has-more:not(.has-less) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent), radial-gradient(180px 96px at 100% 0, transparent 50%, #000 100%) !important;
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent), radial-gradient(180px 96px at 100% 0, transparent 50%, #000 100%) !important;
}
#ui > .screen.deck-rail :is(.deck-hand .deck-fan, .deck-album .deck-flow).has-more.has-less {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent), radial-gradient(180px 96px at 100% 0, transparent 50%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent), radial-gradient(180px 96px at 100% 0, transparent 50%, #000 100%) !important;
}
/* a slot that is neither safe nor offered: its number as quiet text, no ring */
#ui > .screen.deck-rail .deck-fan > .btn.fan-card:not(.is-safe):not(.has-protect) > .slot-n { background: none; border: 0; box-shadow: none; min-width: 0; color: #9fb3c4; }
/* a short Spare row starts at the rail, as a long one does */
#ui > .screen.deck-rail .deck-album:not(.has-overflow) .deck-stage { justify-content: flex-start; }
/* the hand's end: "+ Add card" in words that match its size; the lock fills its share */
#ui > .screen.deck-rail .deck-fan .fan-add > span { font: 700 17px/1.2 var(--body) !important; }
#ui > .screen.deck-rail .deck-fan .fan-add > small { font: 600 14px/1.2 var(--body) !important; }
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare > .btn.fan-locked { flex: 1 1 0; }
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare > .btn.fan-locked .tc-blank { height: 100%; box-sizing: border-box; }
@media (max-height: 500px) and (orientation: landscape) and (max-width: 700px) {
  /* an SE's Store pull titles keep clear of their tile's border */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-pulls .btn { font-size: 17px; padding-inline: 12px; }
}
/* -- iteration 35 (judge round 31) -- */
/* swap: one Cancel, the gold-ringed ✕ at the top right; the column gives its space to the outgoing card,
   and an SE keeps the rule (what is given up) */
#ui > .screen.deck-rail > .deck-swap-pill > .btn.deck-swap-pill-cancel { display: none; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art { max-height: 212px; }
@media (max-width: 700px) {
  #ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-rule { display: block; font: 600 12px/1.2 var(--body); white-space: normal; }
  #ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art { max-height: 180px; }
}
/* the floating ✕ owns its corner: a ring of the page's colour around it, and a larger clear core in the
   rows' corner patch */
#ui > .screen.deck-rail > .screenhead > .screenclose { box-shadow: 0 0 0 6px #0a0d16, 0 4px 14px #000a; }
#ui > .screen.deck-rail :is(.deck-hand .deck-fan, .deck-album .deck-flow).has-more:not(.has-less),
#ui > .screen.deck-rail.rail-swapping .deck-album .deck-flow:is(.has-more, .has-less) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent), radial-gradient(210px 112px at 100% 0, transparent 52%, #000 100%) !important;
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent), radial-gradient(210px 112px at 100% 0, transparent 52%, #000 100%) !important;
}
#ui > .screen.deck-rail :is(.deck-hand .deck-fan, .deck-album .deck-flow).has-more.has-less {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent), radial-gradient(210px 112px at 100% 0, transparent 52%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent), radial-gradient(210px 112px at 100% 0, transparent 52%, #000 100%) !important;
}
/* an unprotected slot: "3 · at risk" in quiet coral (no ring) */
#ui > .screen.deck-rail .deck-fan > .btn.fan-card:not(.is-safe):not(.has-protect) > .slot-n { gap: 4px; color: #b8c6d4; }
#ui > .screen.deck-rail .deck-fan > .btn.fan-card > .slot-n .slot-risk { color: #ff9f8a; font-weight: 600; }
/* the awakening tag at the art's top-left, clear of the card's centre (where a tap opens the card);
   the trigger line keeps its kind word again */
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard > .tc-awaken {
  position: absolute; left: calc(var(--tc, 3.2px) * 4.6); top: calc(var(--tc, 3.2px) * 14.6); bottom: auto; z-index: 3; display: inline-flex; align-items: center; max-width: calc(100% - var(--tc, 3.2px) * 9.2);
  padding: 3px 8px; border-radius: 999px; border: 1px solid #c4a5ff; background: #170f26eb; color: #e6d9ff;
  font: 700 12px/1.15 var(--body); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 8px #000a;
}
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard > .tc-awaken.is-ready { background: #c4a5ff; color: #170f26; box-shadow: 0 0 10px #c4a5ff66; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard > .tc-awaken > .tc-awaken-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard > .tc-awaken::after { content: ''; position: absolute; inset: -10px -6px; }
@media (max-height: 500px) and (orientation: landscape) {
  /* the zooms close with the same ✕ at the top right as every Clubhouse page */
  .deck-phone .pullreveal.cardzoom .btn.zoom-close {
    position: absolute; top: 6px; right: max(8px, var(--sar)); z-index: 6; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0;
    font-size: 12px; color: transparent; border: 1px solid #a9cdec55; border-radius: 8px; background: #0c111ce6; grid-column: auto;
  }
  .deck-phone .pullreveal.cardzoom .btn.zoom-close::before { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; font: 400 22px/1 var(--body); color: #eef8ff; }
  /* the profile's Hand: in the ✕'s 44px band, a clear 24px from it */
  body.touch #ui .chardetail .cdhead { padding-right: calc(68px + var(--sar)); }
  body.touch #ui .chardetail .btn.cdhand { height: 44px; min-height: 44px; padding: 0 14px; align-self: flex-start; margin-top: -3px; }
  body.touch #ui .chardetail .btn.cdhand small { margin-left: 4px; }
}
/* -- iteration 36 (judge round 32) -- */
/* swap: the gold ✕ carries a small "Cancel" caption under it (the ✕ alone read as "leave the Clubhouse") */
#ui > .screen.deck-rail.rail-swapping > .screenhead > .screenclose { overflow: visible; }
#ui > .screen.deck-rail.rail-swapping > .screenhead > .screenclose::after {
  content: 'Cancel'; display: block; position: absolute; top: calc(100% + 4px); left: 50%; right: auto; bottom: auto; translate: -50% 0; transform: none;
  width: auto; height: auto; padding: 1px 5px; border-radius: 4px; background: #0a0d16; color: #ffe1a0; font: 700 11px/1.2 var(--body); white-space: nowrap; pointer-events: none;
}
/* -- iteration 37 (judge round 33) -- */
/* the Spare tab says when a Lost & Found card waits in its row ("1 lost", coral) */
#ui > .screen.deck-rail > .deck-views > .btn.deck-view small.tab-lost { margin-top: 2px; padding: 2px 4px; border-radius: 5px; border: 1px solid #ffb3a1; color: #ffc4b5; font: 700 11px/1 var(--body); white-space: nowrap; }
/* every ✕ in the Clubhouse drawn alike: the zoom's and the profile's in the page ✕'s weight and frame */
.deck-phone .pullreveal.cardzoom .btn.zoom-close::before,
body.touch #ui .chardetail .cdfoot > .btn.cdclose::before { font: 750 22px/1 var(--body) !important; color: #e5f4ff !important; }
.deck-phone .pullreveal.cardzoom .btn.zoom-close,
body.touch #ui .chardetail .cdfoot > .btn.cdclose { border: 1px solid #2b4357 !important; box-shadow: 0 0 0 6px #0a0d16, 0 4px 14px #000a; }
#ui > .screen.deck-rail > .screenhead > .screenclose:not(.rail-swapping *) { border-color: #2b4357; }
@media (max-height: 500px) and (orientation: landscape) {
  /* Crew and Store run to the safe edge as the deck does; only the Store's first heading keeps clear of the ✕ */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .clubhouse-body { padding-right: 0; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen[data-club-tab="store"] .clubhouse-body > :is(h3, .club-section-title, .club-note):first-of-type { padding-right: 56px; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .screenhead > .screenclose { box-shadow: 0 0 0 6px #0a0d16, 0 4px 14px #000a; }
}
/* -- iteration 38 (judge round 34) -- */
@media (max-height: 500px) and (orientation: landscape) {
  /* Crew's four students don't scroll, so the ✕ keeps a lane of its own beside them (the deck's rows fade
     under it instead) */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen[data-club-tab="crew"] .clubhouse-body > .club-heroes { padding-right: 56px; box-sizing: border-box; }
  /* "Hand 3/5" is status, not a link: the whole card opens the profile, where Hand is */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-hero-action.is-split > .club-hero-hand { color: #c9d6e2; font-weight: 600; }
}
/* a safe card is marked by its footer and a quiet gold edge, not a glowing ring that reads as "selected" */
#ui > .screen.deck-rail .deck-fan .btn.fan-card.is-safe .tcard { box-shadow: 0 0 0 1px #ffd88599; }
/* -- iteration 39 (judge round 35) -- */
@media (max-height: 500px) and (orientation: landscape) {
  /* the Crew card says where a hand lives: both lines open the profile, both in the student's colour */
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen .club-hero-action.is-split > .club-hero-hand { color: inherit; font-weight: 800; }
  /* a 12px floor on the phone's labels */
  .screen .chardetail .btn.cdtab, .screen .chardetail .cdfield-toggle { font-size: 13px !important; }
  body.touch #ui > .screen.screen-clubhouse.clubhouse-screen > .screenhead > .club-coins > .cn-w { font-size: 12px; }
  .deck-phone .cardzoom.has-rule > :is(.deck-order-actions, .row) > .btn small { font-size: 12px !important; }
}
#ui > .screen.deck-rail > .deck-views > .btn.deck-view small.tab-lost { font-size: 12px; }
#ui > .screen.deck-rail.rail-swapping > .screenhead > .screenclose::after { font-size: 12px; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > :is(small, .deck-swap-pill-rule, .deck-swap-pill-hint) { font-size: 13px !important; }
#ui > .screen.deck-rail > .screenhead > .deck-bar > .deck-coins > .cn-w { font-size: 12px; }
/* a row scrolled from its start fades out the whole sliver of the card cut at the left (--less-w, set as
   it scrolls; a 24px fade left a cut fragment); a card that starts at the edge keeps its face */
#ui > .screen.deck-rail :is(.deck-hand .deck-fan, .deck-album .deck-flow).has-more.has-less {
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--less-w, 12px) - 8px), #000 calc(var(--less-w, 12px) + 8px), #000 calc(100% - 48px), transparent), radial-gradient(210px 112px at 100% 0, transparent 52%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent calc(var(--less-w, 12px) - 8px), #000 calc(var(--less-w, 12px) + 8px), #000 calc(100% - 48px), transparent), radial-gradient(210px 112px at 100% 0, transparent 52%, #000 100%) !important;
}
#ui > .screen.deck-rail :is(.deck-hand .deck-fan, .deck-album .deck-flow).has-less:not(.has-more) {
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--less-w, 12px) - 8px), #000 calc(var(--less-w, 12px) + 8px)) !important; mask-image: linear-gradient(90deg, transparent calc(var(--less-w, 12px) - 8px), #000 calc(var(--less-w, 12px) + 8px)) !important;
}
/* -- iteration 40 (judge round 36) -- */
/* the hand's end spacer is sized by fanEdge (--end-pad) so the fully scrolled row starts on a card's edge */
#ui > .screen.deck-rail .deck-hand .deck-fan::after { flex: 0 0 var(--end-pad, 52px); }
/* the hand's left fade swallows a card cut mid-swipe, its edge and glow too (round 35's ramp straddled the
   edge and left a ghost of it); with no card cut (--less-w < 0) there is no left fade */
#ui > .screen.deck-rail .deck-hand .deck-fan.has-more.has-less {
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--less-w, -24px) + 4px), #000 calc(var(--less-w, -24px) + 16px), #000 calc(100% - 48px), transparent), radial-gradient(210px 112px at 100% 0, transparent 52%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent calc(var(--less-w, -24px) + 4px), #000 calc(var(--less-w, -24px) + 16px), #000 calc(100% - 48px), transparent), radial-gradient(210px 112px at 100% 0, transparent 52%, #000 100%) !important;
}
#ui > .screen.deck-rail .deck-hand .deck-fan.has-less:not(.has-more) {
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--less-w, -24px) + 4px), #000 calc(var(--less-w, -24px) + 16px)) !important;
  mask-image: linear-gradient(90deg, transparent calc(var(--less-w, -24px) + 4px), #000 calc(var(--less-w, -24px) + 16px)) !important;
}
/* swap: the tag takes the column's remaining height, its hint at its foot, so the column ends on the cards'
   bottom line (the outgoing art keeps its card proportions: stretched, it cropped the face) */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label { flex: 1 1 auto; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-hint { margin-top: auto; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-art { flex: none; aspect-ratio: 75 / 105; max-height: none; }
/* -- iteration 41 (judge round 37) -- */
/* swap: the outgoing card and its tag one block centred in the column (no empty middle), the hint right
   under the rule; the tag says what the slot risks */
#ui > .screen.deck-rail.rail-swapping > .deck-swap-pill { justify-content: center; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label { flex: none; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-hint { margin-top: 6px; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-slot { font: 700 12px/1.2 var(--body); color: #ff9f8a; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-slot.is-safe { color: #ffd885; }
/* the locked slot's words in readable gold */
#ui > .screen.deck-rail .deck-fan .btn.fan-locked .tc-blank .tc-blank-note { color: #ffd885; }
/* -- iteration 42 (judge round 38) -- */
/* the Hand tab says how many slots are open (the Add tile lies past the edge) */
#ui > .screen.deck-rail > .deck-views > .btn.deck-view small.tab-open { margin-top: 2px; padding: 2px 4px; border-radius: 5px; border: 1px solid #7fe8ff; color: #bff4ff; font: 700 12px/1 var(--body); white-space: nowrap; }
/* row cards' rule boxes start on one line whatever their length (centred, a one-line rule sat 10px lower than its neighbour) */
#ui > .screen.deck-rail :is(.deck-fan > .btn.fan-card, .deck-stage > .btn.flow-card) .tcard .tc-effect { justify-content: flex-start; padding-top: 2.4em; }
/* -- iteration 43 (judge round 39) -- */
/* swap: the tag leads with what to do, then the slot in the hand row's words, then the rule (an SE drops
   the rule: the outgoing card's name is on its art) */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-hint { order: 0; margin: 0 0 4px; font: 700 13px/1.2 var(--body) !important; color: #7fe8ff; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-slot { font: 700 12px/1.2 var(--body); white-space: nowrap; }
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-rule { color: #c9d6e2; }
@media (max-width: 700px) {
  #ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-rule { display: none !important; }
  #ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-slot { white-space: normal; }
}
/* "2 open" fits the 44px tab as "1 lost" does */
#ui > .screen.deck-rail > .deck-views > .btn.deck-view small.tab-open { font-size: 11px; padding: 2px 3px; }
/* -- iteration 44 (judge round 40) -- */
@media (max-height: 500px) {
  /* the hand card's zoom title: whose hand small above, the slot and its risk whole */
  .deck-phone .cardzoom > .kicker.kicker-hand:has(> .kh-slot) { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .deck-phone .cardzoom > .kicker.kicker-hand > .kh-who { font: 700 12px/1.1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: #9fb3c4; }
  .deck-phone .cardzoom > .kicker.kicker-hand > .kh-slot { white-space: nowrap; }
  .deck-phone .cardzoom > .kicker.kicker-hand .kh-risk { font-style: normal; color: #ff9f8a; }
  .deck-phone .cardzoom > .kicker.kicker-hand .kh-safe { font-style: normal; color: #ffd885; }
}
/* swap: an SE keeps the rule (what is given up), the status unbroken */
@media (max-width: 700px) { #ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-rule { display: block !important; } }
/* the hand's end: the open and locked slots one narrower column (about 150px), so the scrolled end shows two
   whole cards and the column, not one card and a blank band */
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare,
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-empty.fan-add,
#ui > .screen.deck-rail .deck-hand .deck-fan > .btn.fan-locked { width: calc(var(--tcf) * 42); min-width: calc(var(--tcf) * 42); }
/* the end spacer sits flush after the column (no flex gap before it) */
#ui > .screen.deck-rail .deck-hand .deck-fan::after { margin-left: -12px; }
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare > :is(.fan-empty.fan-add, .btn.fan-locked) { width: 100%; min-width: 0; }
/* -- iteration 45 (judge round 41) -- */
/* the hand's end column: as wide as the room beside the ✕ (--spare-w, from fanEdge) */
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-spare,
#ui > .screen.deck-rail .deck-hand .deck-fan > .fan-empty.fan-add,
#ui > .screen.deck-rail .deck-hand .deck-fan > .btn.fan-locked { width: var(--spare-w, calc(var(--tcf) * 42)); min-width: var(--spare-w, calc(var(--tcf) * 42)); }
#ui > .screen.deck-rail .deck-fan .fan-add > span { font-size: 15px !important; }
/* an SE's swap status stacks "Slot 2" over "at risk" (it broke at the dot) */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-slot > span { white-space: nowrap; }
@media (max-width: 700px) {
  #ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-slot > span { display: block; }
  #ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label > .deck-swap-pill-slot > .st-sep { display: none; }
}
/* the hand tab's "2 open" as plain cyan words at the rail's 12px floor (no pill, which needed 11px to fit) */
#ui > .screen.deck-rail > .deck-views > .btn.deck-view small.tab-open { font-size: 12px; padding: 0; border: 0; color: #7fe8ff; }
/* -- iteration 46 (judge round 42) -- */
/* swap: the outgoing card on the cards' top line (centred, it floated 50-65px lower) */
#ui > .screen.deck-rail.rail-swapping > .deck-swap-pill { justify-content: flex-start; }
@media (max-height: 500px) {
  /* the zoom says once what "at risk" means */
  .deck-phone .cardzoom > .kicker.kicker-hand > .kh-why { font: 600 12px/1.2 var(--body); letter-spacing: 0; text-transform: none; color: #ffb3a1; }
}
/* -- iteration 47 (judge round 43) -- */
/* a short Spare row: the empty-state tile takes the room the row leaves (no blank right third) */
#ui > .screen.deck-rail .deck-album:not(.has-overflow) .deck-stage > .btn.flow-card.deck-more:has(> .tc-none) { flex: 1 1 auto; width: auto; max-width: 420px; }
/* (round 43 ran the swap tag's surface to the cards' foot: it read as an empty framed box, reverted) */
#ui > .screen.deck-rail > .deck-swap-pill > .deck-swap-pill-label { flex: none; }
/* ==== END DECK RAIL ==== */