@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(/fonts/jetbrains-mono-var.woff2) format('woff2'); }

:root {
  --slot-grid: repeat(auto-fill, minmax(min(100%, 154px), 1fr)); --wide-grid: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  --spectrum: linear-gradient(90deg, var(--shade-white), var(--shade-grey), var(--shade-red), var(--shade-pink),
    var(--shade-orange), var(--shade-ginger), var(--shade-yellow), var(--shade-lemon), var(--shade-green),
    var(--shade-sage), var(--shade-blue), var(--shade-sky), var(--shade-purple), var(--shade-lavender),
    var(--shade-black), var(--shade-shadow), var(--shade-white));
  --g-panel: linear-gradient(180deg, var(--c-panel-hi), var(--c-panel-lo)); --shadow-card: inset 0 1px 0 var(--c-edge-hi), 0 10px 30px -18px var(--c-inset-shadow); --measure: 804px;
  color-scheme: dark;

  --c-bg-deep:var(--c-app-bg); --c-bg-panel:#0e0e1c; --c-bg-raised:#1a1a30; --c-bg-elim:#0a0716;
  --c-bg-gold:var(--c-app-bg); --c-bg-inset:#131328; --c-app-bg:#06060e; --c-danger-bg:#1c0a14;
  --c-divider:#191a30; --c-panel-hi:#13132a; --c-panel-lo:#0c0c1b;
  --c-stage-bg:var(--c-app-bg);
  --c-border:#2a2a4a; --c-border-active:#4444aa; --c-border-soft:#3a3a5a;
  --c-text-faint:#7f82ab; --c-text-dim:#898cb4; --c-text-mute:#9497bf; --c-text-label:#9fa2c9;
  --c-text-body:#aeb2d4; --c-text-bright:#e8eaf8; --c-text-dyad:#a4a6da; --c-text-link:#a3a6e4;
  --c-accent:#5555aa; --c-accent-mute:#6060a0; --c-accent-text:#7e7ebe; --c-accent-mute-text:#7f7fb2;
  --c-gold:#c8a860; --c-gold-bright:#e8b54a; --c-gold-muted:#6f5d33; --c-gold-dim:#97824f; --c-gold-vivid:#ffcc44;
  --c-gold-hi:#ecd292; --c-gold-lo:#a8853e; --c-gold-glow:rgba(201,169,98,.5);
  --c-ink:#0d0b13;
  --c-ally:#44aa66; --c-betray:#bb7722; --c-duel:#ff4040; --c-vindic:#c08858;
  --c-eg-new-b:#554433; --c-eg-new:#aa8866; --c-eg-share-b:#8866cc; --c-eg-share:#aa99dd; --c-eg-chron-b:#4a4a78;
  --c-eg-again-b:#2f5f5f; --c-eg-again:#66b3b3;
  --c-mutual-ring:#9966cc; --c-dyad-burn:#6644aa;
  --c-duel-tint:#6688dd; --c-fall:#b070d8;
  --c-echo-help:#6688aa; --c-echo-hinder:#aa8844;
  --c-val-dim-pos:#669966; --c-val-dim-neg:#be6e6e;
  --c-voice-umbrix:#888888; --c-voice-amarant:#a98ad6; --c-voice-vesper:#c2b3e0;
  --c-voice-fate:#c9b274; --c-voice-tutor:#88ccff;
  --c-danger:#cc2233; --c-danger-soft:#e06666; --c-active-bg:#1a1a3a; --c-active-border:#6666cc; --c-active-text:#9999ee;
  --c-ring:#16162c;
  --c-danger-mute:#4a2a2a; --c-betray-log:#ccaa44; --c-bg-fallstack:#0a0614; --c-win:#33dd33; --c-lose:#dd4f4f;
  --c-timer-bg:#1a0808; --c-timer-flash:#3a1010; --c-timer-text:#ff4444; --c-timer-fill:#cc4444; --c-timer-fill-hot:#ff2222;
  --c-inset-shadow:rgba(0,0,0,.4); --c-edge-hi:rgba(190,196,255,.07);
  --c-triad-blue:#4488ee; --c-cls-zealot:#555566; --c-cls-loser:#887088; --c-cls-loner:#cc8844; --c-cls-out-div:#8866cc;
  --c-mx-p2:#142814; --c-mx-p1:#0a1a0a; --c-mx-m1:#1e0a0a; --c-mx-m2:#2e0808; --c-mx-z:#07070e; --c-mx-edge:#0a0a12;

  --f-display: Georgia, serif;
  --f-serif: Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --fx-speed: 0.67;
  --fs-micro: var(--fs-label);
  --fs-label: clamp(0.845rem, 0.8rem + 0.3vw, 1.28rem);
  --fs-shade: clamp(18.7px, 17px + 0.5vw, 21px);
  --fs-small: clamp(0.95rem, 0.88rem + 0.4vw, 1.52rem);
  --fs-body:  clamp(1rem, 0.95rem + 0.4vw, 1.59rem);
  --fs-lede:  clamp(1.1rem, 1rem + 0.7vw, 2.12rem);
  --fs-title: clamp(1.6rem, 1.3rem + 1.8vw, 4.18rem);
  --fs-hero:  clamp(2.4rem, 1.7rem + 4vw, 8.1rem);
  --fs-dest:  clamp(1.95rem, 1.45rem + 2.7vw, 5.77rem);
  --track-wide: 0.18em; --track-cere: 0.22em; --track-hero: 0.42em;
  --tap: 44px;
  /* read wherever a box must fit under the sticky header */
  --hdr-h: calc(var(--tap) + 2 * var(--sp-1) + 1px); --main-pad-top: clamp(16px, 4vw, 44px);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 14px; --sp-4: 22px; --sp-5: 36px; --sp-6: 58px;
  --sp-0: 2px;
  --r-tight: 4px; --r-card: 9px; --r-door: 12px;
  --t-quick: calc(220ms * var(--fx-speed));
  --t-normal: calc(450ms * var(--fx-speed));
  --t-slow: calc(600ms * var(--fx-speed));
  --t-unfold: calc(820ms * var(--fx-speed));
  --track-data: .04em; --track-label: .08em; --track-kicker: .14em;
  --c-scrim: rgba(4,4,10,.8); --c-glass: rgba(5,5,13,.78);
  --a-fold: 1.41421356;
  --c-gloss: rgba(255,255,255,.28);
}

.gamestage, .tutcard-ov, .resolve-ov, .welcome-ov, .seatmodal {
  --fs-micro: var(--fs-label);
  --fs-label: clamp(0.85rem, 0.7rem + 0.6vw, 1.1rem);
  --fs-small: clamp(1rem, 0.85rem + 0.75vw, 1.4rem);
  --fs-body:  clamp(1.125rem, 1rem + 0.875vw, 1.625rem);
  --fs-title: clamp(1.4rem, 1.2rem + 1.5vw, 2.5rem);
  --fs-hero:  clamp(1.75rem, 1.5rem + 1.75vw, 3.5rem);
}
@media (max-width: 600px) {
  .gamestage, .tutcard-ov, .resolve-ov, .welcome-ov, .seatmodal {
    --fs-micro: var(--fs-label);
    --fs-label: clamp(1.15rem, 1rem + 0.5vw, 1.3rem);
    --fs-small: clamp(1.3rem, 1.15rem + 0.5vw, 1.5rem);
    --fs-body:  clamp(1.5rem, 1.3rem + 0.5vw, 1.65rem);
    --fs-title: clamp(1.9rem, 1.6rem + 1vw, 2.4rem);
    --fs-hero:  clamp(2.4rem, 1.9rem + 1.5vw, 3.2rem);
  }
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--c-app-bg); }
html, body { min-height: 100%; }
body { background: transparent; color: var(--c-text-body); font: var(--fs-body)/1.7 var(--f-serif);
  min-height: 100svh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-wrap: pretty; }

header.frame { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3);
  padding: var(--sp-1) clamp(12px,4vw,40px); border-bottom: 1px solid var(--c-border); position: sticky; top: 0;
  background: var(--c-glass); backdrop-filter: blur(10px); z-index: 5; min-height: var(--hdr-h); }
header.frame .brand { justify-self: start; }
header.frame .rung { justify-self: end; display: inline-flex; align-items: center; min-height: var(--tap); }
.brand { display: inline-flex; align-items: center; min-height: var(--tap);
  font: 700 clamp(17px,2vw,22px)/1 var(--f-display); letter-spacing: .26em; text-transform: uppercase; color: var(--c-gold); }
nav { display: flex; gap: clamp(var(--sp-2),2vw,var(--sp-4)); flex-wrap: wrap; margin-left: auto; }
nav a { display: inline-flex; align-items: center; min-height: var(--tap);
  font: var(--fs-label)/1 var(--f-display); letter-spacing: var(--track-label); color: var(--c-text-label);
  text-transform: uppercase; padding: var(--sp-1) var(--sp-0); border-bottom: 2px solid transparent; transition: color var(--t-quick); }
nav a:hover { color: var(--c-text-bright); }
nav a.active { color: var(--c-gold); border-bottom-color: var(--c-gold); }
.navmake { color: var(--c-text-label); border: 1px solid var(--c-border); border-radius: var(--r-card);
  padding: var(--sp-1) var(--sp-3); font: var(--fs-label)/1 var(--f-display); letter-spacing: var(--track-label);
  text-transform: uppercase; display: inline-flex; align-items: center; min-height: 34px; white-space: nowrap; }
/* under 360 the label may wrap to two lines inside its 44px box, with less padding and tracking */
@media (max-width: 359.98px) { #rung .navmake { white-space: normal; text-align: center; line-height: 1.15; padding-inline: var(--sp-2); letter-spacing: var(--track-data); } }
.rung-id { font: var(--fs-label)/1 var(--f-display); letter-spacing: var(--track-data); color: var(--c-gold-dim);
  display: inline-block; line-height: var(--tap); min-height: var(--tap); max-width: 40vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rung-id:hover { color: var(--c-gold); }
.rung-desk { margin-right: 1em; }
.eerow + .eerow { margin-top: var(--sp-3, 12px); }
a { color: var(--c-text-link); text-decoration: none; }
a:hover { color: var(--c-text-bright); }
:focus-visible { outline: 2px solid var(--c-active-border); outline-offset: 2px; }
[tabindex="-1"]:focus-visible { outline: none; }
.visually-hidden, html.nonum .dnum { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skiplink { position: fixed; top: -100px; left: var(--sp-2); z-index: 100;
  background: var(--c-bg-panel); color: var(--c-text-bright); border: 1px solid var(--c-gold);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-tight); font: 600 14px/1 var(--f-display);
  transition: top .12s ease; }
.skiplink:focus { top: var(--sp-2); }
html.still .skiplink { transition: none; }
main a { padding-block: var(--sp-1); }
main { flex: 1; width: 100%; max-width: none; margin: 0 auto; padding: var(--main-pad-top) clamp(12px,4vw,40px); }
#pavcounts { padding-top: var(--sp-3); }
#view { scroll-margin-top: 76px; animation: rise 460ms cubic-bezier(.2,.9,.3,1) backwards; }
@keyframes rise { 0% { opacity: 0; } 100% { opacity: 1; } }

/* his true text reads in the body's colour, never a caption's dim */
.tverse { max-width: 62ch; margin: 0 auto var(--sp-4); text-align: center;
  font: var(--fs-lede)/1.55 var(--f-serif); color: var(--c-text-body); }
.tverse .vl { display: block; text-wrap: balance; }
/* HUE (EMRYS 50-52): a new line of his stands further apart than a wrap inside one, so a phone reader still sees his five lines */
.tverse .vl + .vl { margin-top: var(--sp-3); }

.menu  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  min-height: 72vh; margin: var(--sp-5) auto 0; }
.mcol  { display: grid; grid-template-rows: 1fr 1fr; gap: var(--sp-3); }
.mpair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.mblock { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); text-align: center; padding: var(--sp-4); container-type: inline-size;
  background: var(--g-panel);
  border: 1px solid var(--c-border); border-radius: var(--r-door); overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-quick), border-color var(--t-quick), box-shadow var(--t-normal); }
.mblock::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 110%, var(--c-gold-glow), transparent 60%);
  transition: opacity var(--t-normal); }
.mblock:hover::after { opacity: .28; }
.mblock:active { transform: translateY(1px) scale(.995); }
.mblock .mb-g { font-size: clamp(20px, 2.4vw, 34px); line-height: 1; color: var(--c-gold-dim);
  transition: color var(--t-quick), text-shadow var(--t-normal), transform var(--t-quick); }
.mblock:hover .mb-g { color: var(--c-gold); text-shadow: 0 0 18px var(--c-gold-glow); transform: scale(1.12); }
.m-nexus .mb-g { font-size: clamp(30px, 4vw, 52px); }
.mpair .mblock .mb-t { font-size: clamp(16px, 14cqi, 27px); }
.mpair .mblock .mb-g { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.mb-g svg { display: block; width: clamp(52px, 30cqi, 96px); height: auto; }
.mb-art { display: block; overflow: clip; }
.mpair .mb-g > svg, .mb-art { width: clamp(72px, 40cqi, 128px); }
/* the mark is 0.6 of its drawing: at 1.5 times it spans 90% of the box, 5% clear each side, in a square window */
.mb-art .snow { display: block; width: 150%; height: auto; margin: -25%; }
.mb-art .snowlabel { display: none; }
.mb-art .snowring { display: none; }
.slot:has(> .mb-art) { display: flow-root; }
.slot > .mb-art { float: right; width: 64px; margin: 0 0 var(--sp-1) var(--sp-2); }
.mb-anim { position: relative; display: block; width: clamp(140px, 17vw, 230px); height: clamp(140px, 17vw, 230px); margin: 0 auto; }
#bpdock[data-mode="menu"] { animation: dock-settle var(--t-slow) ease both; }
.mblock::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: .9;
  background: var(--spectrum);
  background-size: 300% 100%; animation: spectrum 14s linear infinite; }
html.still .mblock::before { animation: none; }
.mblock:hover { transform: translateY(-2px); border-color: var(--c-gold-muted);
  box-shadow: inset 0 1px 0 var(--c-edge-hi), 0 0 26px -12px var(--c-gold-glow); }
.mblock .mb-t { font: 700 clamp(14px, 9cqi, 30px)/1.15 var(--f-display); text-transform: uppercase;
  letter-spacing: var(--track-label); color: var(--c-text-bright); }
.m-nexus .mb-t { font-size: clamp(22px, 10cqi, 44px); color: var(--c-gold); }
.m-nexus .mb-cta { display: block; margin-top: var(--sp-2); font: 700 var(--fs-small) var(--f-serif); letter-spacing: var(--track-kicker);
  text-transform: uppercase; color: var(--c-gold); white-space: nowrap; }
/* the more specific rule, or .ld's 62ch and left margin win and the line sits off the doors' centre */
.ld.home-line { text-align: center; max-width: none; margin: var(--sp-4) auto 0; text-wrap: balance; }
.home-doors { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-3); margin: var(--sp-4) auto 0; max-width: min(96vw, 1956px); }
.home-doors > #homeplace { margin: 0; }
.home-doors > #homeplace:empty { display: none; }
.home-doors .pav-door-row { margin: 0; }
@media (width <= 640px) { .home-doors { flex-direction: column; align-items: stretch; } .home-doors .pav-door { width: 100%; } }
@media (width <= 640px) { .menu { grid-template-columns: 1fr; min-height: 0; }
  .mcol { grid-template-rows: none; } .mblock { min-height: 96px; }
  .mpair .mblock { min-height: 130px; }
  .m-nexus { min-height: 160px; padding: var(--sp-3); }
  .m-nexus .mb-anim { width: 76px; height: 76px; } }
@media (orientation: portrait) and (width > 640px) {
  .menu { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
  .m-nexus { min-height: min(44vh, 440px); }
  .mpair .mblock { aspect-ratio: 1 / 1.414; min-height: 0; }
  .m-time { min-height: min(24vh, 260px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .menu { min-height: 0; }
  .m-nexus { min-height: 180px; }
}
.pagename { font: 700 var(--fs-label) var(--f-display); letter-spacing: var(--track-kicker);
  text-transform: uppercase; color: var(--c-text-label); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 44vw; justify-self: center; }
@media (width <= 640px) { .pagename { display: none; } }
@media (width <= 640px) {
  body:has(#view > h1.visually-hidden) .pagename { display: block; }
  body:has(#view > h1.visually-hidden) header.frame { grid-template-columns: auto minmax(0, 1fr) auto; }
  body:has(#view > h1.visually-hidden) .pagename { max-width: 100%; }
}
.slabel { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.slabel > .shaded { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; line-height: 1.1; }
.wield-winner .slabel { text-transform: uppercase; }
.slabel > .cicon { width: 1em; height: 1em; }
.bpmark-slot { position: relative; display: inline-block; width: 30px; height: 30px; margin-right: var(--sp-2); flex: 0 0 auto;
  transition: filter var(--t-quick), transform var(--t-quick); }
.bpmark-slot.busy { filter: drop-shadow(0 0 6px var(--c-gold-glow)) brightness(1.35); animation: markbusy .9s ease-in-out infinite; }
@keyframes markbusy { 50% { transform: scale(1.14); } }
html.still .bpmark-slot.busy { animation: none; }
.bpmark-slot:empty { display: none; }
#bpdock { position: absolute; inset: 0; }
/* the mark is a picture, never a target: a press falls through to its slot */
#bpdock, #bpdock canvas, #bpdock img { pointer-events: none; }
#bpdock img.bpstill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#bpdock[data-mode="bar"]  { animation: dock-settle var(--t-slow) ease both; }
#bpdock[data-mode="hero"] { animation: dock-arrive var(--t-slow) ease both; }
@keyframes dock-settle { 0% { transform: scale(3.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes dock-arrive { 0% { transform: scale(.55); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
html.still #bpdock { animation: none; }

.hero { position: relative; display: flex; flex-direction: column; align-items: center; }
.bp { position: relative; width: min(54svh, 78vw); height: min(54svh, 78vw); }
.lock { position: absolute; top: 7%; left: 50%; transform: translateX(-50%); pointer-events: none; width: max-content; }
.enter { margin-top: var(--sp-4); display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.enter a { font: var(--fs-label) var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-gold);
  border: 1px solid var(--c-gold-muted); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-3); text-wrap: balance;
  transition: border-color var(--t-quick), color var(--t-quick), box-shadow var(--t-normal); }
.enter a > [data-season] { display: contents; }
.enter:has(> a):has(> button) > a,
.enter:has(> a):has(> button) > button {
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--c-gold); border-color: var(--c-gold-muted); }
.enter > .eg-new { --egb: var(--c-eg-new-b); --egc: var(--c-eg-new); }
.enter > .eg-share { --egb: var(--c-eg-share-b); --egc: var(--c-eg-share); }
.enter > .eg-chron { --egb: var(--c-eg-chron-b); --egc: var(--c-text-link); }
.enter > .eg-again { --egb: var(--c-eg-again-b); --egc: var(--c-eg-again); }
.enter > .eg, .enter > .eg:hover { color: var(--egc); border-color: var(--egb); }
.enter > .eg:hover { border-color: var(--egc); box-shadow: none; }
html.contrast .enter > .eg { border-color: var(--egc); }
html.contrast .wield-ritual { color: var(--c-gold-dim); }
.fbk { margin-top: 18px; text-align: center; }
.fbk-form { margin-top: 10px; display: grid; gap: var(--sp-2); justify-items: center; }
.fbk-form select { font-size: max(16px, var(--fs-label)); min-height: var(--tap); }
.rpt-why { padding-inline: var(--sp-2); }
.rpt-why .rpt-reason { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; text-align: start; }
.fbk-form textarea { width: min(440px, 90%); background: var(--c-panel-lo); color: var(--c-text-body);
  border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-3); font: var(--fs-label) var(--f-serif); }

h1.dest { font: 700 var(--fs-hero)/1.08 var(--f-display); letter-spacing: var(--track-data); color: var(--c-gold); text-wrap: balance; }
h1.dest.shaded::after { background: linear-gradient(90deg, var(--shadec), transparent); }
h1.dest::after { content: ""; display: block; width: 68px; height: 1px; margin-top: 12px;
  background: linear-gradient(90deg, var(--c-gold), transparent); }
.charhead h1.dest { font-size: var(--fs-dest); }
#view:not(.furniture) h1.dest { font-size: var(--fs-title); letter-spacing: var(--track-cere); text-transform: uppercase; }
/* a house title is never louder than a story's: the title size, its case plain */
#view.furniture h1.dest { font-size: var(--fs-title); }
.charhead h1.dest::after { content: none; }
.ld { color: var(--c-text-body); margin: var(--sp-3) 0 0; max-width: 62ch; text-wrap: pretty; }
h1.dest + .ld { text-wrap: balance; }
.crumb { font: var(--fs-label) var(--f-mono); color: var(--c-text-mute); margin-bottom: 12px; letter-spacing: var(--track-label); }
.crumb a:hover { color: var(--c-text-bright); }
.crumb .cs { white-space: nowrap; }
/* a wrapped crumb line never starts or ends on a slash: each "/ " rides with the crumb after it, pulled back over the margin the crumb before it holds open */
.crumb { --cs-w: calc(2ch + 2 * var(--track-label)); overflow-x: clip; padding-inline-start: 4px; margin-inline-start: -4px; }
.crumb > :has(+ .cs) { margin-inline-end: var(--cs-w); }
.crumb > .cs { margin-inline-start: calc(-1 * var(--cs-w)); }
@media (width <= 760px) { .railed .crumb > .cs:last-child, .phead > .crumb > .cs:last-child { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } }
@media (width <= 640px), (pointer: coarse) {
  .crumb { line-height: 2.3; }
  .crumb [aria-current] { display: inline-block; }
  .crumb a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 3px; }
  /* inline padding widens the tap without widening the line */
  #su-note a.lonelink { display: inline; padding-block: calc((var(--tap) - 1.2em) / 2); }
  a.navmake, #pav-gate, a.lonelink, .enter a, a.epill, button.epill.held, .eres > .corridor > .epill { display: inline-flex; align-items: center; min-height: var(--tap); }
  .slots a.slot { min-height: var(--tap); }
}

.note, .card, .slot, .lslot, .actpanel, .trow, .earned, .mround, .mseat, .seat {
  box-shadow: var(--shadow-card); }
.note { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-3); background: var(--c-bg-panel); border: 1px solid var(--c-border);
  border-radius: var(--r-door); color: var(--c-text-mute); font: var(--fs-label) var(--f-mono); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sp-3); margin-top: 26px; }
.cls-group { margin-top: var(--sp-5); }
.cls-group > .grid { margin-top: var(--sp-2); }
/* a triangle is its three cards grouped by space, one edge per idea; triangles stand further apart than their cards, so three stacked on a phone still read as one */
/* at .cls-group > .grid's own specificity and after it, or that rule's sp-2 wins and the triangles run together (R2) */
.cls-group > .cls-tri { margin-top: var(--sp-5); }
.cls-group > .cls-tri:first-of-type { margin-top: var(--sp-2); }
.cls-nmrow { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cls-group .card { align-items: flex-start; }
.kv.clskey { font-size: var(--fs-small); line-height: 1.5; max-width: 40em; }
.kv.clskey dd { color: var(--c-text-body); }
.card { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-3); background: var(--g-panel);
  border: 1px solid var(--c-border); border-left: 3px solid var(--haloc, var(--c-border-soft)); border-radius: var(--r-door);
  transition: border-color var(--t-quick), transform var(--t-quick), box-shadow var(--t-normal); }
.card:not(.twolink):hover { border-color: var(--c-border-active); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--c-edge-hi), 0 0 22px -10px var(--sw, var(--c-border-active)); }
.card .sw { width: 28px; height: 28px; border-radius: var(--r-card); flex: 0 0 auto; background: var(--sw); }
.card .nm:not(.shaded) { font: 700 var(--fs-small)/1.15 var(--f-display); letter-spacing: var(--track-data); color: var(--c-text-bright); }
.card .nm.shaded { font: 700 var(--fs-small)/1.15 var(--f-display); letter-spacing: var(--track-data); }
.card .sub { color: var(--c-text-mute); font: var(--fs-label) var(--f-serif); font-style: italic; }
.card .s3 { color: var(--c-text-faint); font: var(--fs-micro) var(--f-mono); letter-spacing: var(--track-label); }
.charhead { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-1); font-size: var(--fs-hero); }
.charhead > div { font-size: 1rem; min-width: 0; }
.charhead .swatch { width: 28px; height: 28px; border-radius: var(--r-door); flex: 0 0 auto; background: var(--sw); }
.meta { color: var(--c-text-mute); font: var(--fs-label) var(--f-mono); margin-top: var(--sp-2); letter-spacing: var(--track-data); max-width: 78ch; }
#tl-meta { text-wrap: balance; }
.prosemain > p.meta, #loadout-h, #pavhistory > .meta { text-wrap: pretty; }
/* a .meta line is a sentence, serif on the stage too, as the proto's game lines (3763, 4273, 4595) */
#view .meta, #view .note:not(.gamestage *) { font-family: var(--f-serif); }
:where(#view) .meta { letter-spacing: normal; line-height: 1.5; }
#view #ch-tl-lab { font-family: var(--f-mono); letter-spacing: var(--track-data); }
#view #introClock { font-family: var(--f-mono); }
#view .enter a:not(.gamestage *), #view .equip-opt:not(.gamestage *), #view .acct .go { font-family: var(--f-display); }
footer .versedoor, #theday a { font-family: var(--f-display); }
.acct .meta { font: var(--fs-body)/1.55 var(--f-serif); letter-spacing: normal; }
#su-note { color: var(--c-text-body);
  margin-top: var(--sp-4); padding-top: var(--sp-2); border-top: 1px solid var(--c-divider); }
.slots { display: grid; grid-template-columns: var(--slot-grid); gap: var(--sp-2); margin-top: 24px; }
@media (min-width: 1600px) { .slots { grid-template-columns: repeat(10, 1fr); } }
@media (min-width: 1600px) {
  .charbody .slots { grid-template-columns: var(--slot-grid); }
  #view:has(> #loadout) .slots, #view:has(> h1.pav) .slots { grid-template-columns: var(--slot-grid); }
}
.rsec .slots { grid-template-columns: var(--wide-grid); }
.rsec .slots.rlist { grid-template-columns: 1fr; }
.rsec .slots.rthree { display: flex; flex-wrap: wrap; }
.rsec .slots.rthree .slot { flex: 1 1 0; text-align: center; padding: 8px 6px; }
@media (max-width: 400px) {
  .resolve-ov:has(.rsec) { padding-left: var(--sp-1); padding-right: var(--sp-1); }
  .resolve-ov:has(.rsec) > .rov-in { padding-left: 8px; padding-right: 8px; }
  .resolve-ov .rsec .slots.rthree { gap: var(--sp-1); }
}
.rthree .sface { display: flex; justify-content: center; margin-bottom: 5px; }
.rthree .sface .ticon { width: 1.8em; height: 1.8em; background: var(--c-gold); }
.rthree .slot .s1 { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 5px; }
.rthree .s1 .ipoly svg { width: 1.2em; height: 1.2em; }
.slots:has(.slot .lopts) { grid-template-columns: var(--wide-grid); }
.slot { padding: var(--sp-2) var(--sp-3); background: var(--g-panel);
  border: 1px solid var(--c-border); border-radius: var(--r-card); transition: border-color var(--t-quick), transform var(--t-quick); }
.slot:hover { border-color: var(--c-border-active); transform: translateY(-1px); }
.slot .s1 { font: 700 var(--fs-label)/1.25 var(--f-mono); color: var(--c-text-bright); }
.slot .s2 { font: var(--fs-label)/1.5 var(--f-serif); margin-top: var(--sp-0); max-width: 66ch; text-wrap: pretty; }
.slot .s2:not(.shaded) { color: var(--c-text-body); }
/* the shade page's one door into a story reads at the character title's tier, scaled down, never under the body or the large-text floor (HUE) */
.slot .s2.av-name { font: 700 max(19px, var(--fs-body), calc(var(--fs-dest) * .5))/1.1 var(--f-display); letter-spacing: var(--track-data); }
.slot .s3 { color: var(--c-text-faint); font: var(--fs-micro) var(--f-serif); margin-top: 5px; }
.slot .slot-answer .s3 { font-size: var(--fs-label); }
.slot .slot-answer:not(:empty) { margin-bottom: var(--sp-2); }
.ept { display: inline-block; }
.nobr { white-space: nowrap; }
.card[href^="/compendium/class/"], .slots a.slot[href^="/compendium/class/"] { min-height: var(--tap); }
.card[href^="/compendium/class/"] .nm { font-size: clamp(1.2rem, 0.82rem + 1.0vw, 3.2rem); }
.card[href^="/compendium/class/"] .sub { font-size: clamp(1rem, 0.78rem + 0.62vw, 2.1rem); font-style: normal; }
.card .sub .ept { line-height: 1.7; }
.card .sub.pair > em { display: inline-block; line-height: 1.7; }
.slots a.slot[href^="/compendium/class/"] { padding: var(--sp-3); }
.slots a.slot[href^="/compendium/class/"] .s1 { font-size: clamp(1.05rem, 0.8rem + 0.7vw, 2.2rem); }
.slots a.slot[href^="/compendium/class/"] .s2 { font-size: clamp(1rem, 0.78rem + 0.6vw, 2rem); }
.slots a.slot[href^="/compendium/class/"] .s2 svg { width: 1em; height: 1em; vertical-align: -0.15em; }
/* 460px, not 560: 1366 holds two cards and 2100 three; five at 2100 was not shorter, every row as tall as its longest card */
.grid:has(> [href^="/compendium/class/"]) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); grid-auto-rows: 1fr; }
.slots:has(> :only-child) { grid-template-columns: minmax(0, min(100%, 560px)); }
.kv { margin-top: 20px; display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-3); font: var(--fs-label) var(--f-serif); max-width: var(--measure); }
.kv dt { color: var(--c-text-faint); } .kv dd { color: var(--c-text-bright); }
.kv.kv-shade { font-size: var(--fs-body); max-width: none; }
.kv.kv-record { margin: var(--sp-3) 0 var(--sp-5); }
@media (max-width: 479.98px) { .kv.kv-record { grid-template-columns: 1fr; row-gap: 2px; } }
@media (min-width: 1100px) { .kv.kv-shade { grid-template-columns: repeat(2, max-content minmax(0, 1fr)); column-gap: var(--sp-4); } }
/* pre-line keeps his authored line breaks; never sweep the break characters in his cells */
.flav { white-space: pre-line; color: var(--c-text-dim); font-style: italic; font-family: var(--f-serif); }
footer.frame { padding: 12px clamp(12px,4vw,40px); border-top: 1px solid var(--c-border); display: flex; gap: var(--sp-3);
  align-items: center; flex-wrap: wrap; font: var(--fs-micro) var(--f-mono); letter-spacing: var(--track-data); color: var(--c-text-mute); }
footer.foot { display: block; margin-top: var(--sp-6); }
.fnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4);
  max-width: min(96vw, 1956px); margin: 0 auto; padding: var(--sp-3) 0 var(--sp-4); }
.fnav .fcol { display: flex; flex-direction: column; }
.fnav a { display: inline-flex; align-items: center; min-height: 34px;
  font: var(--fs-label)/1.25 var(--f-display); letter-spacing: var(--track-label); text-transform: uppercase; }
.fnav a { color: var(--c-text-label); border-bottom: 0; text-wrap: balance; }
.fnav a:hover { color: var(--c-text-bright); }
.fnav a.active { color: var(--c-gold); }
.fnav .fh { font-family: var(--f-display); font-weight: 700; color: var(--c-text-body); }
.footline { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; max-width: min(96vw, 1956px); margin: 0 auto;
  padding-top: var(--sp-2); border-top: 1px solid var(--c-divider); }
@media (width <= 640px) { .fnav { grid-template-columns: 1fr; } }

.card .sw, .charhead .swatch, .seat .sw, .mseat .sw, .dface .sw {
  box-shadow: 0 0 0 1px var(--c-inset-shadow) inset, 0 0 0 1px var(--haloc, var(--c-edge-hi)), 0 0 12px -4px var(--sw); }

/* THE SHADE RULE (his word, 2026-10-27 19:32-19:33 PDT: every shade defined once, uniformly; proto 1195-1275). Every shade-named word is drawn
   one way, Black as the other fifteen: its hex for the fill, its resonant outline (OUTLINE_RESONANT, generated as --haloc) for the rim, on the
   proto's one ladder (TEXT_STROKE_W 1.75 / 2.5 / 3.5 / 4.5px) as one line that grows with the word. The fill is the shade's, whatever else
   colours the element (a link, a heading, its hover). A shade's look changes here, or in the generated block, and nowhere else. */
.shaded, .shade-go, .dmrow.dmt-own .dmk { color: var(--shadec) !important; font-weight: 700;
  -webkit-text-stroke: clamp(1.75px, .11em, 4.5px) var(--haloc, var(--c-border)); paint-order: stroke fill; }
@supports not (paint-order: stroke fill) {
  .shaded, .shade-go, .dmrow.dmt-own .dmk { -webkit-text-stroke-width: 0 !important; }
}
html.contrast .shaded { -webkit-text-stroke-color: var(--anchorc); }
.shaded.sh-own { font-weight: inherit; }
/* a lone shade name stands at the large-text tier, 19px bold or more, so its own hue clears 3:1 (HUE, DAVID; EMRYS's sweep 11-04); inside a sentence it keeps the sentence's size */
.shaded, .card .nm.shaded { font-size: max(1em, 19px); }
:is(p, li, dd, .ld, .tc-p, .tc-i, .tc-d, .rlog-line, .verse, .invoke) .shaded { font-size: inherit; }
.grid.corridors .card { flex-wrap: wrap; align-content: flex-start; }
/* a card's two names are two links, each a 24px target (WCAG 2.5.8), shown as links by more than colour (WCAG 1.4.1) */
.grid.corridors .card a { display: inline-block; min-height: 24px; text-decoration: underline dotted 1px; text-underline-offset: 3px; }
.grid.corridors .card a:not(.shaded) { color: inherit; }
.grid.corridors .card a:is(:hover, :focus-visible) { text-decoration-style: solid; }
.grid.corridors .card > span:not(.sw) { flex: 1 1 calc(11.6 * var(--fs-label)); min-width: 0; }
.poly-zero-inline { width: .7em; height: 1em; overflow: visible; }
.poly-vis { overflow: visible; }

.lex { border-bottom: 1px solid transparent; transition: border-color var(--t-quick), color var(--t-quick); }
.lex:hover { border-bottom-color: currentColor; }
.lex:not(.shaded) { color: inherit; }
.lex:not(.shaded):hover { color: var(--c-gold); }
.lex:focus-visible { border-radius: 2px; }

.push { margin-left: auto; }
.dim { opacity: .8; }
.gamestage .dim { opacity: 1; }
.sig { max-width: min(100%, clamp(360px, 30vw, 760px)); margin: 24px auto 0; }
.sigcap { text-align: center; color: var(--c-text-faint); font: var(--fs-label) var(--f-serif); margin-top: 6px; }
.sigcap .sigcap-t { font-family: var(--f-serif); }
.sigcap .sigcap-d { font-family: var(--f-mono); white-space: nowrap; }
.enter.left { justify-content: flex-start; margin: 18px 0 var(--sp-1); }
.ld.sub { margin-top: var(--sp-1); }
.resolve-ov .rsec .ld { font-size: var(--fs-body); }
.resolve-ov .rsec .rh { font-size: var(--fs-title); }

.lobby-label { color: var(--c-text-dim); font: var(--fs-label) var(--f-mono); letter-spacing: var(--track-cere); text-transform: uppercase; margin: 20px 0 9px; }
@media (max-width: 400px) { #view:not(.furniture) h1.dest, .lobby-label { letter-spacing: var(--track-data); } #view:not(.furniture) h1.dest { font-size: max(1.4rem, min(var(--fs-title), 8.1vw)); } }
.slot:has(.fitline) { container-type: inline-size; }
.fitline { text-wrap: balance; letter-spacing: var(--track-data); font-size: clamp(0.72rem, 4.4cqi, 1.05rem); }
.shade-pick { display: grid; }
.shade-opt .chosen-mark { position: absolute; right: 4px; bottom: 2px; font-size: .72em; line-height: 1; opacity: .9; pointer-events: none; }
.shade-opt { position: relative; font: 700 max(19px, var(--fs-shade))/1.1 var(--f-mono); padding: 12px 6px; border-radius: 8px; cursor: pointer; text-align: center;
  background: color-mix(in srgb, var(--sw, var(--c-bg-panel)) 87%, transparent); border: 1px solid var(--haloc, var(--c-inset-shadow));
  box-shadow: inset 0 1px 0 var(--c-gloss), inset 0 -8px 16px rgba(0,0,0,.22);
  transition: transform var(--t-quick), box-shadow var(--t-quick); }
.shade-opt:hover { transform: scale(1.03); }
.shade-opt[data-on="1"] { border-color: var(--c-gold); transform: scale(1.04);
  box-shadow: 0 0 0 2px var(--c-gold), 0 0 16px -4px var(--c-gold), inset 0 1px 0 var(--c-gloss); }
.shade-opt.fate { background: transparent; border: 1px solid var(--c-gold-muted); grid-column: 1 / -1; box-shadow: none; }
.shade-opt.fate[data-on="1"] { border-color: var(--c-gold); box-shadow: 0 0 0 1px var(--c-gold), 0 0 16px -6px var(--c-gold-glow); }
.shade-opt.fate:hover, .shade-opt.fate[data-on="1"] { transform: none; }
button:disabled { color: var(--c-text-faint); border-color: var(--c-border); cursor: default; }
button:disabled:hover { background: transparent; filter: none; transform: none; }
.gold-cta { display: block; width: 100%; margin-top: 18px; padding: var(--sp-3) var(--sp-3); border-radius: 10px; cursor: pointer;
  font: 700 var(--fs-small) var(--f-serif); letter-spacing: var(--track-kicker); text-transform: uppercase; text-align: center;
  background: var(--c-gold); color: var(--c-ink); border: 1px solid var(--c-gold);
  transition: filter var(--t-quick); }
.gold-cta:hover:not([disabled]):not([aria-disabled="true"]) { filter: brightness(1.08); }
.lopts > .gold-cta { width: auto; margin-top: 0; }
.gold-cta[disabled], .gold-cta[aria-disabled="true"] { background: transparent; color: var(--c-accent-mute); border-color: var(--c-border); cursor: default; }
/* the room's two primaries set their line height, so the tick in Ready (a fallback font) does not grow it */
#rbtn.gold-cta, #sbtn.gold-cta { line-height: 1.1; }
/* Join and Ready share one cell and swap in place, so the cell keeps the taller box in both states */
.lob-act { display: grid; }
.lob-act > * { grid-area: 1 / 1; }
.lob-act > .go { justify-self: start; align-self: center; margin-top: 0; }
.lob-act > .off { visibility: hidden; }
#rbtn.gold-cta[aria-pressed="true"], #rbtn.gold-cta.rb-host { background: transparent; color: var(--c-gold); }
.shade-go { display: block; width: 100%; margin-top: 18px; padding: var(--sp-3) var(--sp-3); border-radius: var(--r-card); cursor: pointer;
  font: 700 var(--fs-small) var(--f-serif); letter-spacing: var(--track-cere); text-transform: uppercase; text-align: center;
  background: color-mix(in srgb, var(--sw, var(--c-gold)) 9%, transparent);
  border: 1.5px solid var(--sw, var(--c-gold)); transition: filter var(--t-quick); }
.shade-go:hover { filter: brightness(1.15); }
.pas-opt { font: var(--fs-label) var(--f-serif); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-card); cursor: pointer; background: transparent;
  color: var(--c-text-label); border: 1px solid var(--c-border); transition: color var(--t-quick), border-color var(--t-quick); }
/* the hover lift, one rule (dry-sweep-site.md C2): each selector beats only its own base rule, so its place in the cascade is free */
.pas-opt:hover,
.gh-chip:hover,
.rov-tbtn:hover,
.rov-back:hover,
.rov-ctl .rov-ghost:hover,
.nxp-cards:hover,
.rov-headbtn:hover,
.lob-menu a:hover { color: var(--c-text-bright); border-color: var(--c-border-active); }
.lopts input.pas-opt { font-size: max(16px, var(--fs-label)); }
.lopts input.pas-opt { flex: 1 1 calc(21ch + 30px); min-width: 0; max-width: 100%; font-family: var(--f-mono); }
.pas-opt[data-on="1"] { color: var(--c-gold); border-color: var(--c-gold); }
.pas-opt[data-queue] { display: grid; align-content: start; }
.seatgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); --seat-gap: var(--sp-1); gap: var(--seat-gap); margin-bottom: 18px; }
@media (min-width: 1280px) { .seatgrid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.seat { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-2); background: var(--c-bg-panel);
  border: 1px solid var(--haloc, var(--c-border)); border-left: 3px solid var(--haloc, var(--c-border-soft)); border-radius: var(--r-card); }
.seat .sw { width: 14px; height: 14px; border-radius: var(--r-tight); background: var(--sw); flex: 0 0 auto; }
.seat .nm { font: 700 var(--fs-label)/1.1 var(--f-serif); }
.seat .sub { color: var(--c-text-mute); font: var(--fs-micro) var(--f-mono); }
.seat .sub .dnum { font-size: inherit; }
.seat.out { opacity: .26; }
.seat.me { border-color: var(--c-gold); box-shadow: 0 0 0 1px var(--c-gold-muted), 0 0 14px -6px var(--c-gold-glow); }
.actpanel { background: var(--g-panel); border: 1px solid var(--c-border); border-radius: var(--r-door); padding: var(--sp-3) var(--sp-3); }
.tgt { font: var(--fs-label) var(--f-mono); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-card); cursor: pointer; background: transparent;
  color: var(--shadec, var(--c-text-mute)); border: 1px solid var(--sw, var(--c-border)); transition: box-shadow var(--t-quick); }
.tgt:hover { box-shadow: 0 0 10px -4px var(--sw, var(--c-border-active)); }
.tgt[data-on="1"] { background: var(--sw, var(--c-gold-muted)); color: var(--c-ink); font-weight: 700; }
.go { margin-top: 12px; font: var(--fs-label) var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-gold);
  background: transparent; border: 1px solid var(--c-gold-muted); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-3); cursor: pointer;
  transition: border-color var(--t-quick), color var(--t-quick), box-shadow var(--t-normal); }
/* the gold hover with its glow, one rule (dry-sweep-site.md C4), at the second one's place: each rule between out-ranks .enter a:hover or never meets it */
.enter a:hover,
.go:hover:not([disabled]):not([aria-disabled="true"]) { border-color: var(--c-gold); color: var(--c-gold-vivid); box-shadow: 0 0 18px -8px var(--c-gold-glow); }
.go.big { display: block; width: 100%; margin-top: 8px; padding: 8px; font-size: var(--fs-body); }
#commit { white-space: nowrap; }
.go[disabled], .go[aria-disabled="true"] { opacity: .5; cursor: default; color: var(--c-accent-mute); border-color: var(--c-border); }
#nextr.ebtn:not(.fv-go)[aria-disabled="true"] { opacity: .5; color: var(--c-accent-mute); border-color: var(--c-border); background: transparent; }
#commit-why, #nextr-why { text-align: center; color: var(--c-accent-mute-text); opacity: 1; margin-top: 3px; max-width: none; }
.flash { margin: 0 0 12px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-danger); border-radius: var(--r-card); color: var(--c-danger-soft); font: var(--fs-label) var(--f-serif); background: var(--c-danger-bg); }
.lesson { margin: 0 0 10px; padding: var(--sp-1) var(--sp-3); border-left: 3px solid var(--c-gold-muted); color: var(--c-text-mute); font: var(--fs-label)/1.6 var(--f-serif); }
/* the proto's invocation (4210-4228): a 20% shade hairline, the words, then the speaker */
.invoke { margin: var(--sp-2) 0 0; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--sw, var(--c-border)) 20%, transparent); }
.invoke blockquote { margin: 0; font: var(--fs-small)/1.4 var(--f-mono); letter-spacing: var(--track-data); overflow-wrap: break-word; text-wrap: pretty; }
.invoke figcaption { margin-top: 3px; font-size: var(--fs-label); line-height: 1.3; overflow-wrap: break-word; }
.invoke .ep { color: var(--c-text-mute); font-style: italic; }
.resolve-ov { position: fixed; inset: 0; z-index: 40; background: var(--c-scrim); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 6vh var(--sp-3) var(--sp-5);
  animation: cask-overlay-fade calc(220ms * var(--fx-speed)) ease-out both; }
@keyframes cask-overlay-fade { 0% { opacity: 0; } 100% { opacity: 1; } }

/* the sheet scrolls inside, so a tall card keeps its button reachable */
.tutcard-ov { position: fixed; inset: 0; z-index: 60; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center; --ov-pad: 16px; padding: var(--ov-pad);
  background: var(--c-scrim); backdrop-filter: blur(4px);
  animation: cask-overlay-fade calc(220ms * var(--fx-speed)) ease-out both; }
/* one scroller per card, its body; the call to action stands below it on the card's ground, so no text passes under it (DISSENT; HUE's rules) */
.tutcard { width: min(640px, 92vw); max-width: 100%; max-height: 100%; display: flex; flex-direction: column; container-type: inline-size;
  background: var(--g-panel);
  border: 1px solid var(--c-border-soft); border-left: 4px solid var(--haloc, var(--c-gold));
  border-radius: var(--r-card); padding: clamp(20px, 4vw, 32px);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4), 0 0 30px -14px var(--sw, var(--c-gold-glow));
  animation: cask-intro-rise calc(360ms * var(--fx-speed)) cubic-bezier(.2,.9,.3,1) both; }
@keyframes cask-intro-rise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
.tc-sec { font: var(--fs-small) var(--f-serif); letter-spacing: var(--track-cere); text-transform: uppercase; color: var(--c-text-dim); margin-bottom: 6px; }
.tc-head { font: 700 var(--fs-title)/1.1 var(--f-serif); letter-spacing: var(--track-label); text-transform: uppercase; margin: 0 0 6px; font-size: min(var(--fs-title), 12cqi); }
.tc-sub { font: italic var(--fs-small)/1.5 var(--f-serif); color: var(--c-text-dyad); margin-bottom: var(--sp-3); }
.tc-foot > .tc-go { margin-top: 0; }
.tutcard > .tc-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--c-border) transparent; }
.tc-foot { flex: none; margin: var(--sp-2) 0 0; padding: 0; }
.tc-p { color: var(--c-text-body); font-size: var(--fs-small); line-height: 1.7; margin: 10px 0; }
.tc-p, .tc-i, .tc-d, .tc-sub { text-wrap: pretty; }
.tc-i { color: var(--c-text-mute); font: italic var(--fs-small)/1.6 var(--f-serif); margin: 10px 0; }
.tc-chain { margin: 12px 0; padding: var(--sp-2) var(--sp-3); background: var(--c-bg-deep); border: 1px solid var(--c-divider); border-radius: var(--r-card); container-type: inline-size; }
.tc-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--c-divider); }
.tc-row:last-child { border-bottom: 0; }
.tc-k { flex: 0 0 84px; font: 700 var(--fs-label) var(--f-mono); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--shadec, var(--c-gold)); }
.tc-d { flex: 1 1 7em; color: var(--c-text-body); font-size: min(var(--fs-small), 12cqi); line-height: 1.6; }
@container (width < 300px) { .tc-k { flex-basis: 100%; } .tc-row { row-gap: 0; } }
.tc-tok .ticon { width: 1em; height: 1em; vertical-align: -0.125em; background: var(--shadec, var(--c-gold)); }
.tc-dash { color: var(--c-text-mute); }
.tutcard .nobr .tc-em { white-space: normal; }
.tc-char { font-style: italic; }
.t-duel { color: var(--c-duel); } .t-link { color: var(--c-text-link); } .t-ally { color: var(--c-ally); }
.t-betray { color: var(--c-betray); } .t-gold { color: var(--c-gold); }

.coachgap { width: min(560px, 92vw); max-width: 100%; background: var(--c-bg-panel); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: clamp(18px, 4vw, 28px); }
.cg-h { font: 700 var(--fs-body)/1.3 var(--f-serif); color: var(--c-text-bright); margin: 0 0 var(--sp-2); }
.cg-p { color: var(--c-text-body); font-size: var(--fs-small); line-height: 1.7; margin: 0 0 16px; }
.cg-on { display: block; margin: 10px auto 0; background: none; border: 0; cursor: pointer;
  font: var(--fs-label) var(--f-mono); letter-spacing: var(--track-kicker); color: var(--c-text-mute);
  text-decoration: underline; text-underline-offset: 3px; padding: var(--sp-1); }
.cg-on:hover { color: var(--c-text-bright); }

.tc-fates { padding: 6px var(--sp-2); margin: var(--sp-2) 0; background: var(--c-bg-deep, rgba(0,0,0,.35));
  border: 1px solid var(--c-divider); border-radius: var(--r-tight); }
.tc-frow { display: flex; justify-content: space-between; align-items: center;
  font: var(--fs-label)/1.6 var(--f-mono); padding: var(--sp-0) 0; }
.tc-fv { display: inline-flex; align-items: center; }
.tc-go { margin-top: 18px; width: 100%; font-size: min(var(--fs-small), 8.5cqi); }
.ipoly { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.ipoly svg { width: 1.4em; height: 1.4em; }
.tutcard .ipoly svg { width: 1em; height: 1em; }
.tutcard .ipoly.v-lg svg { width: 1.4em; height: 1.4em; }
.rsum-line .ipoly svg { width: 1.2em; height: 1.2em; }
.ipoly.pos  { color: var(--c-ally); }
.ipoly.neg  { color: var(--c-danger-soft); }
.ipoly.zero { color: var(--c-text-dim); gap: 0; }
.ipoly .dnum { color: inherit; font-family: var(--f-mono); }
.ipoly.bidir { gap: 1px; color: var(--c-text-body); }
.ipoly.bidir .dnum { margin-left: 3px; }
.ipoly.v-gold { color: var(--c-gold); }
.ipoly.v-gold .poly { color: inherit; }
.gamestage { max-width: min(96vw, 1600px); margin: 0 auto; background: var(--c-stage-bg); }
.gamestage > .gold-cta { max-width: min(96vw, 520px); margin-inline: auto; }
main:has(.gamestage) { background: var(--c-stage-bg); max-width: none; flex: 0 0 auto; }
/* the game pads less than the site, so the seat names keep their width at 390 */
main:has(.gamestage) { padding-inline: clamp(6px, 2vw, 24px); }
body:has(.gamestage):not(:has(#lobtables)) header.frame { position: static; }
body:has(.gamestage) footer.foot { margin-top: auto; }
.at-table header.frame, .at-table footer.foot { display: none; }
.at-table, .at-table body { background: var(--c-stage-bg); }
.gh { text-align: center; margin-bottom: 6px; overflow-x: clip; }
.gh { container-type: inline-size; }
.gh-title { font: 700 max(1.4rem, min(var(--fs-title), 100cqi / 12.6))/1.1 var(--f-serif); letter-spacing: max(var(--track-data), min(var(--gh-track, var(--track-hero)), (100cqi - 12em) / 17.01));
  text-transform: uppercase; color: var(--c-gold); margin: 0 0 var(--sp-0); }
.gh-title.anim-final-pulse { animation: cask-final-pulse calc(1400ms * var(--fx-speed)) ease-in-out infinite; }
@keyframes cask-final-pulse { 0%, 100% { transform: scale(1); letter-spacing: var(--gh-track, var(--track-hero)); } 40% { transform: scale(1.06); letter-spacing: calc(var(--gh-track, var(--track-hero)) + .1em); } }
@media (max-width: 400px) { .gh-title { --gh-track: var(--track-cere); } }
html.still .gh-title.anim-final-pulse { animation: none; }
.gh-round { font: var(--fs-small) var(--f-serif); letter-spacing: var(--track-label); color: var(--c-text-dyad); margin-top: var(--sp-0); }
.gh-round .ghd { color: var(--c-text-faint); }
.gh-sub { font: var(--fs-small) var(--f-serif); color: var(--c-text-dim); margin-top: 4px; }
.gh-menu { --bal-x: 6px; --bal-y: 6px; text-align: center; margin-top: 6px; margin-bottom: -6px; }
.gh-chip { font: var(--fs-label) var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase;
  padding: var(--sp-1) 10px; border-radius: var(--r-card); cursor: pointer; text-decoration: none;
  background: transparent; border: 1px solid var(--c-border); color: var(--c-text-dyad); }
.gh-chip.danger { border-color: var(--c-danger-mute); color: var(--c-danger-soft); }
.gh-chip.danger:hover { border-color: var(--c-duel); color: var(--c-danger-soft); }
@media (width <= 640px) {
  .gh:has(.gh-menu) { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: var(--sp-1); row-gap: 2px; margin-bottom: 4px; }
  .gh:has(.gh-menu) .gh-title { font-size: 1.05rem; --gh-track: var(--track-label); margin: 0; }
  .gh:has(.gh-menu) .gh-round { margin-top: 0; font-size: var(--fs-micro); }
  .gh:has(.gh-menu) .gh-menu { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
  .gh:has(.gh-menu) .gh-menu > * { margin: 0; }
  .gh:has(.gh-menu) .gh-chip { flex: 1 1 0; min-width: auto; padding: 0 4px; font-size: clamp(0.8rem, 0.7rem + 0.5vw, 0.95rem); letter-spacing: 0; white-space: nowrap; }
  .gh:has(.gh-menu) .gh-chip.danger { flex-basis: 100%; }
}
@media (width <= 360px) {
  .gh:has(.gh-menu) .gh-chip:not(.danger) { flex: 1 1 calc(50% - 3px); }
}

.coach { position: static; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 0; margin: 0 0 var(--sp-1); }
.coach .coach-line { max-width: min(100%, 520px); padding: 5px 14px; border-radius: 999px;
  background: rgba(5, 5, 16, .94); border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  font: var(--fs-body)/1.4 var(--f-serif); text-align: center;
  -webkit-text-stroke: 1.75px #000000; paint-order: stroke fill;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.coach .coach-line:not(.voice-fate) { letter-spacing: .04em; }
body:has(.tutcard-ov) .coach, body:has(.welcome-ov) .coach,
body:has(.rov-pager) .coach:not(.rov-pager .coach) { display: none; }
/* the coach holds the top: the band is the stage, full width, and takes the tap, so nothing hidden behind it can be pressed */
.coach:not(.rov-pager .coach) { position: sticky; top: 0; z-index: 6; pointer-events: auto;
  background: var(--c-stage-bg); padding-block: 4px; }

/* a picker tile is filled with its shade, its name in the table's ink (--tileink) on the table's rim (--tilerim), as the proto's lobby */
.shade-opt { font-family: var(--f-serif); color: var(--tileink);
  text-shadow: 0 0 1px color-mix(in srgb, var(--tilerim) 95%, transparent), 0 0 1px color-mix(in srgb, var(--tilerim) 95%, transparent), 0 1px 1px color-mix(in srgb, var(--tilerim) 70%, transparent); }
.shade-opt.fate { color: var(--c-gold); text-shadow: none; }

.welcome-ov { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.93);
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 8vh var(--sp-3) var(--sp-5);
  animation: cask-overlay-fade calc(220ms * var(--fx-speed)) ease-out both; }
.welcome-card { width: min(620px, 94vw); max-height: 100%; overflow-y: auto;
  background: var(--g-panel);
  border: 1px solid var(--c-gold-muted); border-left: 4px solid var(--c-gold);
  border-radius: var(--r-card); padding: clamp(20px, 4vw, 32px);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 30px -14px var(--c-gold-glow);
  animation: cask-intro-rise calc(360ms * var(--fx-speed)) cubic-bezier(.2,.9,.3,1) both; }
.wc-title { font: 700 var(--fs-title)/1.1 var(--f-serif); letter-spacing: var(--track-cere); text-transform: uppercase;
  color: var(--c-gold); text-align: center; margin-bottom: var(--sp-1); }
@media (max-width: 400px) { .wc-title { letter-spacing: var(--track-label); } }
.wc-sub { font: italic var(--fs-small) var(--f-serif); color: var(--c-text-dyad); text-align: center; margin-bottom: var(--sp-3); text-wrap: balance; }
.wc-intro { color: var(--c-text-body); font: var(--fs-body)/1.8 var(--f-serif); margin: 0 0 18px; }
@media (max-width: 600px) {
  .wc-intro { font-size: var(--fs-small); line-height: 1.5; }
}
.wc-choice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-0); width: 100%; text-align: left;
  margin: var(--sp-1) 0; padding: 10px var(--sp-3); border-radius: var(--r-card); cursor: pointer; font-family: var(--f-serif);
  background: transparent; border: 1.5px solid var(--c-border-active); color: var(--c-text-link); }
.wc-choice .wc-l { font: 700 var(--fs-body) var(--f-serif); letter-spacing: var(--track-label);
  text-transform: uppercase; }
.wc-choice .wc-d { font: var(--fs-label) var(--f-serif); color: var(--c-text-mute); }
.wc-choice.primary { border-color: var(--c-gold); color: var(--c-gold); background: rgba(200,168,96,.08); }
.wc-choice.dim2 { border-color: var(--c-border-soft); }

.rov-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin-bottom: 10px; }
.rov-tl { display: flex; gap: 5px; justify-content: flex-start; min-width: 0; }
.rov-tr { display: flex; justify-content: flex-end; }
.rov-title { text-align: center; white-space: nowrap; }
.rov-nexus { display: block; font: var(--fs-body) var(--f-serif); letter-spacing: var(--track-cere); text-transform: uppercase; color: var(--c-gold); }
.rov-count { display: block; margin-top: 1px; font: var(--fs-body) var(--f-mono); color: var(--c-text-faint); white-space: nowrap; }
.rov-tbtn { font: var(--fs-label) var(--f-mono); text-transform: uppercase; white-space: nowrap; padding: 3px 8px; border: 1px solid var(--c-border-soft);
  border-radius: var(--r-card); background: transparent; color: var(--c-text-faint); cursor: pointer; }
@media (max-width: 600px) {
  .rov-top { display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .rov-tl:empty, .rov-tr:empty { display: none; }
  .rov-title { flex: 1 0 100%; order: -1; text-align: left; white-space: normal; letter-spacing: var(--track-wide); }
  .rov-count { font-size: var(--fs-small); }
}
@media (pointer: coarse) { .rov-ctl button, .rov-tbtn { min-height: 48px; } }
.rov-sum-h { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 1px;
  font: var(--fs-label) var(--f-serif); letter-spacing: normal; color: var(--c-accent-text); margin-bottom: 7px; }
.rov-sum-h > span { white-space: nowrap; }
.rov-sum-h .rov-sum-dot { color: var(--c-text-faint); }
.rov-page { margin: 6px 0; }
.rov-ctl { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; margin-top: 12px; }
.rov-ctl button { flex: 1 1 auto; white-space: nowrap; font: var(--fs-label) var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-card); cursor: pointer; background: transparent; }
.rov-back { color: var(--c-text-dim); border: 1px solid var(--c-border); }
.rov-next { color: var(--c-gold); border: 1px solid var(--c-gold-muted); }
.rov-next:hover { color: var(--c-gold-vivid); border-color: var(--c-gold); box-shadow: 0 0 14px -7px var(--c-gold-glow); }
.rov-ctl.rov-final { justify-content: center; }
.rov-ctl.rov-sumctl { margin-top: 8px; container-type: inline-size; }
.rov-ctl.rov-sumctl .rov-next { flex: 1 1 100%; padding: 7px; font: min(var(--fs-body), calc((100cqi - 18px) * 0.1)) var(--f-serif); letter-spacing: var(--track-wide);
  color: var(--c-text-link); border: 1.5px solid var(--c-border-active); border-radius: 6px; }
.rov-ctl.rov-sumctl .rov-next:hover { color: var(--c-text-bright); border-color: var(--c-active-border); box-shadow: none; }
.rov-ctl.rov-final .rov-next { flex: 0 0 auto; padding: 7px 18px; font: var(--fs-body) var(--f-serif); letter-spacing: var(--track-wide);
  border: 1.5px solid var(--c-gold); border-radius: 6px; }
.rov-ctl.rov-final:has(.rov-exit) { flex-direction: column; align-items: center; gap: 6px; }
.rov-ctl { position: sticky; bottom: 0; z-index: 1; padding-block: 8px; background: var(--c-bg-panel); }
/* the 16px band sits in the card's margin, not the scroller's padding, so nothing shows through below the sticky foot */
.rov-ctl .rov-exit { text-decoration: none; text-align: center; text-transform: uppercase; }
.rov-ctl .rov-ghost { padding: 5px 14px; font: var(--fs-small) var(--f-serif); letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-text-link); border: 1px solid var(--c-border-soft); border-radius: 4px; }
.rov-focal { font: 700 var(--fs-title)/1.15 var(--f-serif); letter-spacing: var(--track-label); text-transform: uppercase; text-align: center;
  padding-bottom: var(--sp-1); margin-bottom: var(--sp-2); border-bottom: 1px solid color-mix(in srgb, var(--sw, var(--c-border)) 27%, transparent); }
.rov-fallstack { text-align: center; margin: 12px 0 var(--sp-1); padding: 12px 10px; background: var(--c-bg-fallstack);
  border: 1px solid var(--c-divider); border-left: 3px solid var(--haloc, var(--c-border)); border-radius: var(--r-card); }
.rov-fallstack { container-type: inline-size; }
.rfs-name { font: 700 var(--fs-title) var(--f-serif); font-size: min(var(--fs-title), 12cqi); letter-spacing: var(--track-cere); text-transform: uppercase; }
.rfs-cls { font: var(--fs-small) var(--f-serif); color: var(--c-text-dyad); margin-top: var(--sp-0); }
.rfs-verdict { font: 700 var(--fs-small) var(--f-mono); font-size: min(var(--fs-small), calc(100cqi / 6.8)); letter-spacing: var(--track-cere); color: var(--c-fall); margin-top: 6px; }
.rfs-remain { font: italic var(--fs-label) var(--f-serif); color: var(--c-text-mute); margin-top: var(--sp-1); }
.rov-closer { text-align: center; margin: 10px 0 var(--sp-0); font: 700 var(--fs-body) var(--f-serif); letter-spacing: var(--track-label); text-transform: uppercase; }
.rov-narrow { font: italic var(--fs-label) var(--f-serif); color: var(--c-text-mute); text-transform: none; letter-spacing: normal; margin-top: var(--sp-0); }

.boardrow { display: flex; flex-direction: row-reverse; gap: 7px; flex-wrap: wrap; align-items: flex-start; margin: 12px 0; }
.boardrow .seatgrid { flex: 99 1 320px; min-width: 0; margin: 0; padding: var(--sp-2); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-accent) 20%, transparent);
  transition: background .2s, border-color .2s; }
.boardrow.mode-ally .seatgrid { background: color-mix(in srgb, var(--c-ally) 10%, transparent); border-color: color-mix(in srgb, var(--c-ally) 20%, transparent); }
.boardrow.mode-betray .seatgrid { background: color-mix(in srgb, var(--c-betray) 10%, transparent); border-color: color-mix(in srgb, var(--c-betray) 20%, transparent); }
/* proto 7167: duel tints with accent */
.boardrow.mode-duel .seatgrid { background: color-mix(in srgb, var(--c-accent) 10%, transparent); border-color: color-mix(in srgb, var(--c-accent) 20%, transparent); }
.actcol { flex: 1 0 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* the board's step: 8 columns where eight fit at the 150px floor, else 4, else 2, subtracting the gap the grid takes (--seat-gap); (W - 100%) * 999 is huge below W and negative at or above it */
.boardrow .seatgrid, .boardrow .seatgrid.cast { --seat-w: max((100% - 7 * var(--seat-gap)) / 8, min(max((100% - 3 * var(--seat-gap)) / 4, min((100% - var(--seat-gap)) / 2, (4 * 150px + 3 * var(--seat-gap) - 100%) * 999)), (8 * 150px + 7 * var(--seat-gap) - 100%) * 999));
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--seat-w) - 0.5px), 1fr)); }
.actcol .actpanel { margin: 0; }
@media (min-width: 1280px) { .actcol { position: sticky; top: env(safe-area-inset-top, 0px); align-self: flex-start; } }

.yc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px; align-items: start; }
.yc-main { min-width: 0; }
.yc-wide { grid-column: 1 / -1; min-width: 0; }
.yc-kicker { font: 700 var(--fs-label) var(--f-mono); letter-spacing: var(--track-cere); color: var(--c-gold); }
.yc-main > .yc-kicker { font-weight: 400; color: var(--c-text-faint); }
.yc-name { font: 700 var(--fs-body)/1.15 var(--f-serif); letter-spacing: var(--track-label); white-space: nowrap; }
.yc-char { font: var(--fs-small) var(--f-serif); margin-top: 1px; }
.yc-epi { color: var(--c-text-dyad); }
.yc-char .ept { white-space: normal; }
.yc-cls { font: 700 var(--fs-small) var(--f-serif); margin-top: 3px; }
.yc-ult { font: var(--fs-label) var(--f-serif); color: var(--c-text-body); margin-top: var(--sp-0); }
.yc-pas { font: 700 var(--fs-small) var(--f-serif); margin-top: 6px; }
.yc-pasd { font: italic var(--fs-label)/1.5 var(--f-serif); color: var(--c-text-mute); }
.yc-dyad { min-width: 0; background: var(--c-bg-panel); border: 1px solid var(--c-divider);
  border-left: 3px solid var(--haloc, var(--c-divider)); border-radius: var(--r-card); padding: 7px 9px; }
.yc-dtop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.yc-dmx { font: 700 var(--fs-label) var(--f-mono); }
.yc-dwho { font: var(--fs-small) var(--f-serif); }
.yc-dchar { color: inherit; }
.yc-plans { font: var(--fs-label) var(--f-mono); margin-top: var(--sp-1); display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: baseline; }
.yc-pls { --bal-x: var(--sp-2); --bal-y: var(--sp-2); flex: 1 1 0; margin-bottom: calc(-1 * var(--bal-y)); }
.yc-pl { white-space: nowrap; }
.yc-pl.ally { color: var(--c-ally); }
.yc-pl.betray { color: var(--c-betray); }
.yc-pl.duel { color: var(--c-duel); }

.seat .nm { padding-right: 1.4em; }
.stok { position: absolute; top: 4px; right: 6px; color: var(--shadec, var(--c-text-dim)); font-size: 1.05em; line-height: 1; }
.kstrip { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: baseline; }
.kstrip .cicon { width: .95em; height: .95em; }
.kstrip .kmark { width: 7px; height: 7px; }
.kmark { width: .7em; height: .7em; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px var(--haloc, var(--c-border)); display: inline-block; }

.incoming { width: 100%; margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--c-border);
  display: flex; flex-direction: column; gap: var(--sp-0); font-size: var(--fs-micro); }
.incoming.panel { margin-top: 5px; padding-top: var(--sp-1); gap: 3px; font-size: var(--fs-label); }
.inhdr { color: var(--c-text-dim); letter-spacing: var(--track-data); }
.inrow { display: flex; align-items: center; gap: var(--sp-0); min-height: .95em; }
.incoming.panel .inrow { gap: var(--sp-1); min-height: 1em; }
.indots { display: flex; flex-wrap: wrap; gap: 1px; flex: 1; min-width: 0; }
.incoming.panel .indots { gap: var(--sp-0); }
.inrow .kmark { width: .6em; height: .6em; }
.incoming.panel .inrow .kmark { width: .75em; height: .75em; }
.inrow.act-ally { color: var(--c-ally); }
.inrow.act-betray { color: var(--c-betray); }
.inrow.act-duel { color: var(--c-duel); }

.fvcards { display: flex; flex-direction: column; margin-top: var(--sp-2); }
.tgt.fvcard { display: flex; flex-direction: column; align-items: center; gap: var(--sp-0); width: 100%; margin: 0 0 var(--sp-1);
  padding: var(--sp-2) 6px; border-radius: 5px; text-align: center; font: var(--fs-body) var(--f-display); color: var(--c-text-bright);
  background: var(--c-bg-deep); border: 1px solid var(--c-border); transition: all .12s; }
.tgt.fvcard.chosen { border: 2px solid var(--sw); background: color-mix(in srgb, var(--sw) 13.3%, var(--c-bg-deep)); }
.fvcard .fv-nm { font-size: var(--fs-body); font-weight: 700; line-height: 1.1; }
.fvcard .fv-cls { font-size: var(--fs-small); font-weight: 700; line-height: 1.1; color: var(--c-text-faint); }
.fvcard > .cicon { width: 1.3em; height: 1.3em; }
.fv-kills { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; margin-top: var(--sp-0); min-height: 1em; }
.fv-kills .ticon { width: .85em; height: .85em; background: var(--c-accent-mute); }
.fv-kills .kmark { width: 7px; height: 7px; }
.fv-kill { display: inline-flex; align-items: center; line-height: 0; }
.fv-kills .cicon { width: .95em; height: .95em; }
.fv-kills .dim { font: var(--fs-label) var(--f-mono); color: var(--c-text-mute); opacity: 1; }
.fv-last { display: flex; flex-direction: column; align-items: center; gap: var(--sp-0); width: 100%; }
.fv-lhdr { color: var(--c-text-dim); font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: var(--track-data); }
.fv-lrow { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); }
.fv-lrow.act-ally { color: var(--c-ally); } .fv-lrow.act-betray { color: var(--c-betray); } .fv-lrow.act-duel { color: var(--c-duel); }
.fv-lrow .cicon, .fv-lrow .kmark { width: .95em; height: .95em; }
.fvcard .fv-mine { font-size: var(--fs-label); margin-top: 3px; }
.fv-m, .fv-mhint { display: none; }
/* what silence casts in the final, at every width (EMRYS: .fv-mhint is the phone's own hint and hides above it) */
.fv-silent { text-align: center; font-style: italic; margin-bottom: var(--sp-2); color: var(--c-text-mute); font-size: var(--fs-small); }
@media (max-width: 600px) {
  .fvcards { flex-direction: row; gap: 6px; margin-bottom: var(--sp-2); }
  .tgt.fvcard { flex: 1; margin: 0; padding: 10px 6px; border-radius: 6px; }
  .fvcard .fv-nm { text-transform: uppercase; }
  .fv-d { display: none; }
  .fv-m { display: inline; }
  .fv-mhint { display: block; text-align: center; font-style: italic; margin-bottom: var(--sp-2); color: var(--c-text-mute); font-size: var(--fs-small); }
}
.actpanel.echo { background: var(--c-bg-panel); border: 1px solid var(--c-bg-raised); border-radius: 8px; padding: 9px; }
.actpanel.echo .dp-head { font-size: var(--fs-small); color: var(--c-text-label); margin-bottom: 5px; }
/* each label one line: the type is at most 6cqi of the pair */
.wmodes { display: flex; gap: 4px; margin-bottom: 5px; container-type: inline-size; }
.tgt.wmode { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 0;
  font: inherit; font-size: min(var(--fs-body), 6cqi); white-space: nowrap; letter-spacing: .06em; text-transform: uppercase;
  background: transparent; border: 1.5px solid var(--c-border); color: var(--c-text-dim); border-radius: 5px; }
.tgt.wmode .cb { width: 1em; height: 1em; color: currentColor; }
.ycard .yrow .ygrudge { white-space: nowrap; }
.ycard .yrow.yvindic { color: var(--c-vindic); }
.dli { white-space: nowrap; }
.dli.dlb { display: inline-block; max-width: 100%; white-space: inherit; vertical-align: top; text-wrap-style: balance; }
/* the dot paints only inside its space, so a wrap shows none */
.dlg { position: relative; white-space: normal; word-spacing: .4em; clip-path: inset(-1em 0); }
.dlg > .dld { position: absolute; left: 50%; transform: translateX(-50%); word-spacing: 0; }
.tgt.wmode .dnum { color: inherit; font: inherit; }
.tgt.wmode.wm-help { --wc: var(--c-ally); } .tgt.wmode.wm-hinder { --wc: var(--c-duel); }
.tgt.wmode[aria-pressed="true"] { background: color-mix(in srgb, var(--wc) 16%, transparent); border-color: var(--wc); color: var(--wc); }
.wtbox { text-align: center; padding: 4px 6px; margin-bottom: 5px; background: var(--c-bg-deep); border-radius: 4px; border: 1px solid var(--c-bg-raised); font-size: var(--fs-small); color: var(--c-text-dyad); }
.wtbox.set { display: flex; align-items: center; justify-content: center; gap: 6px; border-color: color-mix(in srgb, var(--c-duel-tint) 33%, transparent); color: var(--c-text-bright); }
.wtbox .cb { width: .95em; height: .95em; }
.wtbox.wm-help .cb { color: var(--c-ally); } .wtbox.wm-hinder .cb { color: var(--c-duel); }
.ebtn { width: 100%; padding: 7px; font: inherit; font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  background: var(--c-bg-deep); border: 1px solid var(--c-accent); border-radius: var(--r-card); color: var(--c-text-bright); }
.ebtn.fv-go { background: transparent; border-color: var(--c-border); color: var(--c-accent-mute); }
.ebtn.fv-go.on { background: var(--c-bg-deep); border-color: var(--c-gold); color: var(--c-gold); }
.fv-gorow { display: flex; align-items: center; gap: var(--sp-2); }
.fv-gorow .ebtn.fv-go { flex: 1; min-width: 0; }
.fv-secs { flex: none; font: 700 var(--fs-small) var(--f-mono); color: var(--c-gold); }
.tgt.fvcard[aria-disabled="true"] { cursor: default; }
.ebtn[aria-disabled="true"] { cursor: default; }
.fv-head { color: var(--c-gold); font-size: var(--fs-small); letter-spacing: .12em; margin-bottom: 4px; }
.fv-line { color: var(--c-text-mute); font-size: var(--fs-label); font-style: italic; margin-bottom: 8px; }
@media (max-width: 600px) {
  .actpanel.echo .dp-head, .wmodes, .wtbox { margin-bottom: 7px; }
  .tgt.wmode { padding: 5px 0; }
  .wtbox { padding: 5px 7px; }
  .ebtn { padding: 8px; font-size: var(--fs-body); }
  .fv-line { font-size: var(--fs-small); margin-bottom: 10px; }
}
.hchip { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em;
  margin-left: 6px; line-height: 1; color: var(--shadec); }
.dchip { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; padding: 1px 3px;
  line-height: 1; border-radius: 3px; color: var(--shadec); border: 1.5px solid var(--sw);
  background: color-mix(in srgb, var(--sw) 13.3%, transparent); }
.dchip .aicon { width: .85em; height: .85em; }
.shints { display: inline-flex; align-items: center; gap: 4px; }
html.nohint .hchip { display: none; }
html.nohint .sbadge:not(:has(.dchip, .sface)) { display: none; }
.sface { margin-left: 6px; font-size: .95em; }
.seat.targetable { border-style: dashed; }
.seat.picked-duel { border-color: var(--c-duel); border-width: 2px; }
.seat.picked-ally { border-color: var(--c-ally); border-width: 2px; }
.seat.picked-betray { border-color: var(--c-betray); border-width: 2px; }
.seat.wt-help { border-color: var(--c-ally); border-width: 2px; border-style: solid; }
.seat.wt-hinder, .seat.wt-vote { border-color: var(--c-duel); border-width: 2px; border-style: solid; }
.stok.wtmark { top: 2px; right: 4px; }
.wt-help .wtmark .cb { color: var(--c-ally); } .wt-hinder .wtmark .cb { color: var(--c-duel); } .wt-vote .wtmark .cb { color: var(--c-gold); }

.dmath { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--sp-2) 0; }
.dmcol { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; background: var(--c-bg-deep); border: 1px solid var(--c-divider);
  border-left: 2px solid var(--haloc, var(--c-divider)); border-radius: var(--r-card); padding: 6px var(--sp-2); }
/* under 360 the duel page's chain cards drop their box and keep the shade's left rule, so the chain stops wrapping every two or three words */
@media (width <= 360px) {
  .dmcol { background: none; border-width: 0 0 0 2px; border-radius: 0; padding: 2px 0 2px 6px; }
  .resolve-ov.rov-pager { padding-left: 6px; padding-right: 6px; }
  .resolve-ov.rov-pager > .rov-in { padding-left: 8px; padding-right: 8px; }
  .rov-pager .dcard { padding-left: 8px; padding-right: 8px; }
}
.dmwho { font: 700 var(--fs-body) var(--f-serif); margin-bottom: 1px; }
.dmpas { color: var(--c-text-dim); font: italic var(--fs-label) var(--f-serif); letter-spacing: .06em; margin-bottom: 4px; }
.dmrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2); container-type: inline-size;
  font: var(--fs-label) var(--f-mono); padding: var(--sp-0) 0; }
.dmk { color: var(--c-text-mute); white-space: nowrap; font-size: min(1em, calc((100cqi - 0.95 * var(--fs-body) - 2px - var(--sp-2) - 2.5em) / 6.8)); }
.dmrow.dmcls { flex-wrap: nowrap; }
.dmrow.dmcls .dmk { min-width: 0; white-space: normal; overflow: visible; font-size: min(1em, calc((100cqi - 44px) / 7.3)); }
.dmk .ticon { width: .95em; height: .95em; background: currentColor; }
.dmv { flex: 0 0 auto; margin-left: auto; font-weight: 700; }
.dmv.pos { color: var(--c-ally); }
.dmv.neg { color: var(--c-danger-soft); }
.dmv.zero { color: var(--c-text-faint); }
.dmv.pos-dim { color: var(--c-val-dim-pos); }
.dmv.neg-dim { color: var(--c-val-dim-neg); }
.dmv.ally { color: var(--c-ally); }
.dmv.betray { color: var(--c-betray); }
.dmv.vindic { color: var(--c-vindic); }
.dmrow.echo-h .dmk { color: var(--c-echo-help); }
.dmrow.echo-x .dmk { color: var(--c-echo-hinder); }
.dwatched { color: var(--c-text-mute); font: italic var(--fs-label) var(--f-serif); text-align: center; margin-bottom: 4px; }
.dmv .dnum { color: inherit; font: inherit; }
/* a fixed-width sign and digit, so the column holds whichever glyph sits before it */
html:not(.nonum) .dmath .dmrow .dmv .dnum { display: inline-block; min-width: 2ch; margin-left: 3px; text-align: right; font-family: var(--f-mono); }
.dmv .ticon { width: 1.1em; height: 1.1em; background: currentColor; }
.dmath .dmv .poly, .dmath .dmv .cb { color: inherit; }
.dmath .dmv .cb { width: 1.1em; height: 1.1em; }
.dmath .dmv .poly:not(.poly-zero-inline) { width: 1.3em; height: 1.3em; }
.dmath .dmrow.dmbase .dmv .poly { width: 1.2em; height: 1.2em; }
.dmspace { flex: 1 1 0; min-height: 0; }
.dmrow.dmbase { border-top: 1px solid var(--c-border); margin-top: 3px; padding-top: var(--sp-1); }
.dmrow.dmbase .dmk { color: var(--c-accent-mute); text-transform: uppercase; letter-spacing: var(--track-data); }
.dmrow.dmt-pos .dmk { color: var(--c-win); } .dmrow.dmt-pos-dim .dmk { color: var(--c-val-dim-pos); }
.dmrow.dmt-neg .dmk { color: var(--c-lose); } .dmrow.dmt-neg-dim .dmk { color: var(--c-val-dim-neg); }
.dmrow.dmt-zero .dmk { color: var(--c-text-dim); }
.dmrow.dmt-vindic .dmk { color: var(--c-vindic); }
.dmk .aicon { margin-right: 1px; }

.tut-selfintro { margin: var(--sp-1) 0 18px; }
.tsi { font: 700 var(--fs-title)/1.25 var(--f-serif); margin: 3px 0; }

.timerwrap { margin-top: 5px; padding: 0 var(--sp-1); border-radius: 6px; transition: all .3s; }
.timerwrap.urgent { padding: 6px var(--sp-2); background: var(--c-timer-bg); border: 1px solid rgba(204,68,68,.27); }
.timerwrap.critical { animation: cask-timer-flash calc(800ms * var(--fx-speed)) ease-in-out infinite; }
@keyframes cask-timer-flash { 0%, 100% { background: var(--c-timer-bg); } 50% { background: var(--c-timer-flash); } }
html.still .timerwrap.critical { animation: none; }
.timerpin { position: sticky; top: 0; z-index: 6; background: var(--c-stage-bg); padding-block: 4px; }
html:has(.timerpin) { scroll-padding-top: 64px; }
html:has(.timerpin .timerwrap.critical) { scroll-padding-top: 112px; }
.timerpin .timerwrap { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); margin-top: 0; line-height: 1.2; }
.timerpin .timer-label { display: contents; }
/* the pinned timer keeps one box in every state, so a turn from calm to urgent to critical moves nothing below */
.timerpin .timerwrap { padding: 6px var(--sp-2); border: 1px solid transparent; }
.timerpin .timerwrap.urgent { border-color: rgba(204,68,68,.27); }
/* the words wrap rather than clip, and the box reserves the critical words: the live words and a hidden copy of the longest share one cell */
.timerpin #timer-msg { flex: 1 1 auto; display: grid; }
.timerpin #timer-msg > * { grid-area: 1 / 1; }
.timerpin .tm-ghost { visibility: hidden; font-weight: 700; }
/* R2e (HUE; EMRYS live at 320): under 600 the play view raises the small size to 20.8px, so the critical words ran 333px in a 290px box and
   the reserve took two lines (97px). Under 400 they take the label size, a shade tighter (about 286px at 320), so it stays one line, near 72px */
@media (max-width: 399.98px) { .timerpin #timer-msg { font-size: var(--fs-label); letter-spacing: -0.02em; } }
.timerpin .timer-secs { order: 1; white-space: nowrap; font-size: var(--fs-body); }
.timerpin .timer-track { order: 2; flex: 1 0 100%; height: 6px; }
/* "⚠ AUTO-RESOLVE IMMINENT" stays whole: under 390 the words take the first line and the seconds sit beside the track */
@media (max-width: 389.98px) {
  .timerpin #timer-msg { flex-basis: 100%; }
  .timerpin .timer-track { flex: 1 1 0; }
  .timerpin .timer-secs { order: 3; }
}
.timer-label { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--c-text-dim); margin-bottom: var(--sp-0); }
.timerwrap.urgent .timer-label { color: var(--c-danger-soft); font-weight: 700; }
.timer-secs { font: 700 var(--fs-small) var(--f-mono); color: var(--c-text-label); }
.timerwrap.urgent .timer-secs { color: var(--c-timer-text); font-size: var(--fs-body); }
.timer-track { height: 4px; background: var(--c-bg-panel); border-radius: 2px; overflow: hidden; }
.timerwrap.urgent .timer-track { height: 6px; }
.timer-fill { height: 100%; border-radius: 2px; background: var(--c-border-active); transition: width 1s linear; }
.timerwrap.urgent .timer-fill { background: var(--c-timer-fill); }
.timerwrap.critical .timer-fill { background: var(--c-timer-fill-hot); }

.nxp { background: var(--c-bg-panel); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 9px; margin: 0 0 7px; }
.nxp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.nxp-title { flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 6px; row-gap: 1px;
  font: var(--fs-small) var(--f-serif); letter-spacing: var(--track-label); text-align: center; color: var(--c-text-link); }
.nxp-title span { white-space: nowrap; }
.nxp-nav { flex: 0 0 24px; background: transparent; border: none; padding: 0 var(--sp-1); font-size: var(--fs-body);
  min-height: 24px; color: var(--c-border-active); cursor: pointer; }
.nxp-nav:disabled { color: var(--c-text-faint); cursor: default; }
.nxp-spacer { flex: 0 0 24px; width: 24px; display: inline-block; }
.nxp-tokens { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; align-items: center; margin-bottom: 6px;
  font-size: var(--fs-body); }
.nxp-tok { display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em;
  border-radius: 50%; flex: 0 0 auto; }
.nxp-tok.fallen { opacity: .45; }
.nxp-tok.told { width: auto; gap: .12em; padding: 0 .16em 0 .04em; border-radius: 1em; }
.nxp-tok.told .cicon { width: 1.35em; height: 1.35em; }
/* sixteen tokens in even rows, never a lone one; sizes in the tokens' em: sixteen need 45.72em, eight 22.76em; the queries ask 47em and 24em, room for rounding and the 2px ring */
.nxp:has(.nxp-tok.told) { container-type: inline-size; font-size: var(--fs-body); }
.nxp-tokens:has(> .told) { display: grid; grid-template-columns: repeat(8, auto); gap: .2em; justify-content: center; }
@container (min-width: 47em) { .nxp-tokens:has(> .told) { grid-template-columns: repeat(16, auto); } }
@container (max-width: 24em) { .nxp-tokens:has(> .told) { grid-template-columns: repeat(4, auto); } }
.nxp-dot { width: 1em; height: 1em; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px var(--haloc, var(--c-border)); }
.nxp-tok.me { box-shadow: 0 0 0 2px rgba(200,168,96,.4); }
.nxp-tok.me.acted { box-shadow: 0 0 0 2px rgba(200,168,96,.8); }
.nxp-tok.acted:not(.me) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sw) 40%, transparent); }
.lobgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 7em)); grid-auto-rows: 1fr; justify-content: center; gap: var(--sp-2) var(--sp-1); list-style: none; margin: 0 0 18px; padding: 0;
  font-size: var(--fs-body); }
.lob-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.lob-cell.open .nxp-dot { opacity: .35; }
.lob-nm.unused { visibility: hidden; }
.lob-cell.away .nxp-tok { opacity: .5; }
.lob-cell.ready .nxp-tok { outline: 2px solid var(--c-text-bright); outline-offset: 2px; }
.lob-clock { margin: 0 0 12px; font: 400 var(--fs-body)/1.4 var(--f-serif); }
.lob-clock b { font-variant-numeric: tabular-nums; }
.lob-nm { font: 700 var(--fs-label)/1.1 var(--f-serif); text-align: center; overflow-wrap: anywhere; }
.lob-you { font-weight: 400; color: var(--c-gold); letter-spacing: var(--track-label); text-transform: uppercase; font-size: var(--fs-micro); }
.nxp-body { overflow-x: auto; }
.nxp-table { width: 100%; border-collapse: collapse; font: var(--fs-label) var(--f-mono); }
.nxp-table td { padding: 3px var(--sp-1); border-bottom: 1px solid var(--c-divider); vertical-align: baseline; }
.nxp-table tr:last-child td { border-bottom: 0; }
.nxp-name { white-space: nowrap; }
.nxp-name .cicon { width: 1em; height: 1em; margin-left: 3px; vertical-align: -0.15em; }
.nxp-act { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.nxp-act.ally { color: var(--c-ally); }
.nxp-act.betray { color: var(--c-betray); }
.nxp-act.duel-elim { color: var(--c-fall); }
.nxp-act.duel-negtie { color: var(--c-mutual-ring); }
.nxp-act.duel-tie { color: var(--c-text-faint); }
.nxp-act.duel-win { color: var(--c-win); }
.nxp-act.duel-loss { color: var(--c-danger-soft); }
.nxp-act .aicon { font-size: inherit; }
.nxp-act .ticon { width: .95em; height: .95em; background: currentColor; }
.nxp-hold { white-space: nowrap; }
.nxp-act[class*="duel-"] { display: inline; white-space: normal; }
.nxp-act[class*="duel-"] .aicon { vertical-align: -3px; margin-right: 3px; }
@media (max-width: 600px) {
  .nxp-table, .nxp-table tbody { display: block; }
  .nxp-table tr { display: block; padding: 3px 0; border-bottom: 1px solid var(--c-divider); }
  .nxp-table td { display: block; border-bottom: 0; padding: 1px 3px; }
  .nxp-table td + td { padding-left: 11px; }
  .nxp-table td:last-child { padding-right: 0; }
  .nxp-act[class*="duel-"] .aicon { margin-right: 1px; }
}
.nxp-pending { display: flex; gap: 12px; font: var(--fs-label) var(--f-mono); padding: 3px var(--sp-0); flex-wrap: wrap; justify-content: center; }
.nxp-pend { display: inline-flex; align-items: center; gap: 1ch; color: var(--c-text-mute); }
.nxp-pend.set-ally { color: var(--c-ally); }
.nxp-pend.set-betray { color: var(--c-betray); }
.nxp-pend.set-duel { color: var(--c-duel); }
.nxp-cards { width: 100%; margin-top: 6px; padding: 5px; font: var(--fs-label) var(--f-mono);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-text-link);
  background: transparent; border: 1px solid var(--c-border); border-radius: var(--r-card); cursor: pointer; }
.rov-in { width: 100%; max-width: min(1100px, 96vw);
  background: var(--g-panel);
  border: 1px solid var(--c-border-soft); border-radius: var(--r-card);
  padding: clamp(20px, 4vw, 32px);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); }
.resolve-ov.rov-pager { background: #000000ee; backdrop-filter: none; padding: 16px 16px 0; }
/* the pager is the duel page's one scroller: each page ends a bar's height above the Back/Next bar, and focus scrolls clear of it */
.resolve-ov.rov-pager { --rov-bar: calc(max(48px, var(--tap)) + 16px); scroll-padding-bottom: var(--rov-bar); }
.rov-pager .rov-page { padding-bottom: var(--rov-bar); }
.rov-pager > .rov-in { background: var(--c-bg-panel); border-color: var(--c-border-active); border-radius: 8px; padding: 9px; box-shadow: none; margin-bottom: 16px; }

.gate-ov { z-index: 80; background: transparent; backdrop-filter: none; }
.gate-ov > .rov-in { margin-top: auto; display: flex; flex-direction: column; max-height: 100%; }
.gate-ov .rov-head, .gate-ov .meta, .gate-ov .enter { flex-shrink: 0; }
.gate-ov #gate-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 600px) {
  .gate-ov { padding: var(--sp-2); }
  .gate-ov > .rov-in { padding: var(--sp-3); }
  .gate-ov .rov-head { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
}
body:has(.gate-ov) #rung .navmake { display: none; }
.gate-ov .enter { display: flex; gap: var(--sp-2); align-items: stretch; flex-wrap: wrap; container-type: inline-size; }
.gate-ov .enter > * { flex: 1 1 auto; width: auto; margin-top: 0; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; }
/* "Yes, remember me" keeps one line at any width (DISSENT, EMRYS 390): its type steps down with the row, about 16.5em of tracked caps inside a 34px pad */
.gate-ov #gate-yes { flex-grow: 1000; white-space: nowrap; font-size: min(var(--fs-small), calc((100cqi - 34px) / 16.5)); }
/* declining reads as easy to pick as accepting: "Not yet" takes Enter's own type and a gold outline; Enter keeps only its gold fill */
.gate-ov #gate-no { flex: 1 1 40%; min-width: max-content; white-space: nowrap; font: 700 var(--fs-small) var(--f-serif); letter-spacing: var(--track-kicker);
  text-transform: uppercase; color: var(--c-gold); border-color: var(--c-gold); }
.rov-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); font: 700 var(--fs-title) var(--f-display); color: var(--c-text-bright); margin-bottom: 10px; }
.rov-head.rov-shell { font: var(--fs-body) var(--f-serif); color: var(--c-gold); letter-spacing: var(--track-cere); text-transform: uppercase; align-items: flex-start; column-gap: 0; }
.rov-shell > .rov-shtitle { flex: 1 1 0; }
.rov-x { margin-left: auto; flex-shrink: 0; position: relative; background: transparent; border: none; color: var(--c-text-dyad); padding: 2px 6px; font: var(--fs-title)/1 var(--f-serif); cursor: pointer; }
.rov-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--tap); height: var(--tap); transform: translate(-50%, -50%); }
.rov-x:hover { color: var(--c-text-bright); }
.rov-headbtn { margin-left: auto; font: var(--fs-label) var(--f-mono); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--c-text-dim);
  background: transparent; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-1) var(--sp-2); cursor: pointer; }
.dhide { display: none; }
.transpired { margin-top: var(--sp-2); }
.disclosure > summary { list-style: none; display: flex; align-items: center; gap: .5ch; min-height: var(--tap); cursor: pointer; }
.transpired summary, .acct-forgot summary { font: var(--fs-label) var(--f-mono); padding: var(--sp-1) 0; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--c-text-label); }
.transpired summary:hover, .acct-forgot summary:hover, .kept summary:hover { color: var(--c-text-bright); }
.kept ul { list-style: none; margin: 0; padding: 0; }
.acct-forgot > .acct + .acct { margin-top: var(--sp-4); }
.trow2 { font: var(--fs-micro) var(--f-mono); color: var(--c-text-mute); margin: 3px 0; }

.voice-lumina { color: var(--shade-white); } .voice-paradox { color: var(--shade-grey); }
.voice-gloam { color: var(--shade-shadow); }
.voice-umbrix { color: var(--c-voice-umbrix); }
.voice-amarant { color: var(--c-voice-amarant); } .voice-vesper { color: var(--c-voice-vesper); }
.voice-paradox.voice-paradox.voice-paradox,
.voice-vesper.voice-vesper.voice-vesper { font-style: italic; }
.voice-fate { color: var(--c-voice-fate); letter-spacing: .22em; }
.voice-tutor { color: var(--c-voice-tutor); }

.fallenstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 7px; padding: 5px 9px;
  background: var(--c-bg-panel); border: 1px solid var(--c-bg-raised); border-radius: 8px; }
.fs-h { color: var(--c-accent-mute); font-size: var(--fs-label); margin: 0 4px 0 2px; }
.fs-m { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; opacity: .5; }
.fs-m .cicon { width: 14px; height: 14px; }
.fs-m .kmark { width: 10px; height: 10px; }
.fs-h ~ .fs-h ~ .fs-m { width: 16px; height: 16px; opacity: 1; border-radius: 50%; }
.fs-h ~ .fs-h ~ .fs-m .kmark { width: 12px; height: 12px; }
.fs-m.me { border: 2px solid var(--c-gold); }
.seat { cursor: pointer; }
.seatmodal { position: fixed; inset: 0; z-index: 45; background: var(--c-scrim); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  animation: cask-overlay-fade calc(220ms * var(--fx-speed)) ease-out both; }
.seatmodal .ycard.smx { max-width: 380px; width: 100%; border-left: 3px solid var(--haloc, var(--c-border)); }
.smclose { margin-top: 10px; }
/* relative: the icons' absolute labels scroll inside, not past the footer */
.rlog { position: relative; margin-top: 16px; display: block; background: var(--c-bg-raised, var(--c-bg-panel));
  border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 9px;
  max-height: min(400px, 60vh); overflow-y: auto; transition: max-height 0.3s; }
@media (max-width: 600px) { .rlog { max-height: min(240px, 60vh); } }
.rlog.expanded { max-height: min(1600px, 60vh); }
.rlog-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-bottom: 4px;
  font: var(--fs-body) var(--f-serif); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--c-text-dim); }
.rlog-tog { padding: 3px 8px; font: var(--fs-label) var(--f-serif); letter-spacing: .12em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--c-border); color: var(--c-text-dyad); border-radius: 3px; cursor: pointer; }

.rlog-line { font: var(--fs-small)/1.65 var(--f-mono); padding: var(--sp-0) 0; margin: 0;
  border-bottom: 1px solid var(--c-divider); overflow-wrap: break-word; }
.rlog-line.lc-duel:not(.shaded)  { color: var(--c-duel-tint); }
.rlog-line.lc-ally:not(.shaded)  { color: var(--c-ally); }
.rlog-line.lc-betray:not(.shaded) { color: var(--c-betray-log); }
.rlog-line.lc-fall:not(.shaded)  { color: var(--c-fall); }
.rlog-line.lc-fate:not(.shaded)  { color: var(--c-text-bright); }
.rlog-line.lc-round:not(.shaded) { color: var(--c-accent-mute-text); }
.rlog-line.lc-init:not(.shaded)  { color: var(--c-text-dim); }
.rlog-line.lc-info:not(.shaded)  { color: var(--c-accent-text); }
.rlog-line.lc-stalemate:not(.shaded) { color: var(--c-text-body); }
.rlog-line .ticon { width: .95em; height: .95em; vertical-align: -0.15em; background: currentColor; }
.rlog-line .ticon.icon-t-fate-smile { background: var(--c-win); }
.rlog-line .ticon.icon-t-fate-frown { background: var(--c-lose); }
.rlog-line .ipoly svg { width: 1.2em; height: 1.2em; }
.rsum-line { text-wrap: pretty; }
.rsum-line.rsum-echo { text-wrap: balance; }
.rsum-line .ipoly.pos { color: var(--c-win); }
.rsum-line .ipoly.neg { color: var(--c-lose); }

.ycard { margin: 0 0 10px; padding: var(--sp-2) var(--sp-3); background: var(--c-bg-deep); border: 1px solid var(--c-divider);
  border-left: 3px solid var(--haloc, var(--c-divider)); border-radius: var(--r-card); }
.yc-fold > .yc-sum { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: var(--tap);
  margin: 0 0 10px; padding: var(--sp-1) var(--sp-3); background: var(--c-bg-deep); border: 1px solid var(--c-divider);
  border-left: 3px solid var(--haloc, var(--c-divider)); border-radius: var(--r-card); cursor: pointer; }
.yc-fold[open] > .yc-sum > :not(.yc-smx) { display: none; }
.yc-fold .yc-sdy { display: inline-flex; align-items: center; gap: .5ch; }
.yc-fold .yc-sult { display: inline-flex; align-items: center; gap: .4ch; white-space: nowrap; }
.yc-fold .yc-spl { flex: 1 1 100%; margin-bottom: 0; }
.intro-ov { position: fixed; inset: 0; z-index: 48; background: #000000dd; display: flex; align-items: flex-start; justify-content: center;
  overflow: hidden; padding: 16px; animation: cask-overlay-fade calc(220ms * var(--fx-speed)) ease-out both; }
.ycard.intro { width: min(720px, 94vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
  margin: 0; padding: 9px; background: var(--c-bg-panel); border: 1px solid color-mix(in srgb, var(--sw) 40%, transparent);
  border-left: 4px solid var(--haloc, var(--sw)); border-radius: 8px; animation: cask-intro-rise calc(360ms * var(--fx-speed)) cubic-bezier(.2,.9,.3,1) both; }
.ycard.intro > .in-body, .welcome-card, .gate-ov #gate-body, .rlog, .chron-list, .songov, .mxwrap { scrollbar-width: thin; scrollbar-color: var(--c-border) transparent; }
.ycard.intro .tut-selfintro { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--sw) 20%, transparent); line-height: 1.7; }
.ycard.intro .tsi { font-size: var(--fs-body); margin: 0 0 6px; }
.ycard.intro .tsi:last-child { margin-bottom: 0; }
.in-kick { color: var(--c-text-dim); font: var(--fs-small) var(--f-serif); letter-spacing: var(--track-cere); text-transform: uppercase; margin-bottom: 8px; text-align: center; }
.in-name { font: 700 var(--fs-title)/1.1 var(--f-serif); letter-spacing: var(--track-cere); text-transform: uppercase; margin-bottom: 4px; text-align: center; }
.in-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.in-stack > span { white-space: nowrap; line-height: 1.1; }
.in-stack .cicon { width: 1em; height: 1em; }
.in-rule { border-bottom: 1px solid color-mix(in srgb, var(--sw) 20%, transparent); margin: 10px 0; }
.in-pas { margin-bottom: 10px; }
.in-pasn { color: var(--c-text-link); font: 700 var(--fs-small) var(--f-serif); letter-spacing: .12em; margin-bottom: 2px; }
.in-pasd { color: var(--c-text-body); font-size: var(--fs-small); line-height: 1.6; }
.in-dyad { padding: 8px 10px; background: var(--c-bg-deep); border-radius: 5px; border: 1px solid color-mix(in srgb, var(--sw) 20%, transparent); margin-bottom: 14px; }
.in-dk { color: var(--c-text-dyad); font-size: var(--fs-small); letter-spacing: .12em; margin-bottom: 4px; text-align: center; }
.in-dname { font: 700 var(--fs-body) var(--f-serif); letter-spacing: var(--track-wide); text-transform: uppercase; text-align: center; }
.in-dmx { color: var(--c-text-mute); font-size: var(--fs-label); margin-top: 3px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.in-dmx > div { display: inline-flex; align-items: center; gap: 6px; }
.in-dmx .cb { width: 1.05em; height: 1.05em; }
.in-mx { margin-bottom: 14px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--sw) 20%, transparent); }
.in-mxp { color: var(--c-text-body); font-size: var(--fs-small); line-height: 1.6; margin-bottom: 5px; }
.in-mxh { color: var(--c-text-dim); font: var(--fs-label) var(--f-mono); letter-spacing: .12em; margin: 4px 0 2px; }
.in-mx .cb { width: 1em; height: 1em; }
.in-mxi { color: var(--c-text-mute); font-size: var(--fs-label); font-style: italic; margin-top: 5px; }
.ycard.intro .meta { margin: 0 0 10px; text-align: center; max-width: none; }
.ycard.intro .shade-go { margin: 0; padding: 10px; font-size: var(--fs-body); border-radius: 6px; background: color-mix(in srgb, var(--sw) 9.4%, transparent); }
.ycard.intro > .in-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.ycard.intro > .shade-go { flex: none; margin-top: 10px;
  background: linear-gradient(color-mix(in srgb, var(--sw) 9.4%, transparent), color-mix(in srgb, var(--sw) 9.4%, transparent)), var(--c-bg-panel); }
/* under a tutorial overlay the page holds still, so the card's body is the one scroller */
html:has(.intro-ov, .tutcard-ov, .rov-pager) { overflow: hidden; }
.shade-go .nb { white-space: nowrap; }
.ycard.intro .meta.dim:has(#introClock) { font: 700 var(--fs-body) var(--f-mono); color: var(--c-text-bright); opacity: 1; }
.ycard .yrow { font: var(--fs-label) var(--f-mono); margin: 3px 0; }
/* a seat card's rows are labels and values, mono as the proto's (3701, 3731, 3977); its sentences serif (4293) */
.ycard .yrow.yprose, .ycard .yrow .ygrudge { font-family: var(--f-serif); }
/* proto 1479-1480: fs-label mono, marginTop 4; the head textDim, TRACK.normal, marginBottom 2 */
.ymx { margin-top: 4px; font: var(--fs-label) var(--f-mono); }
.ymx-h { color: var(--c-text-dim); letter-spacing: .12em; margin-bottom: 2px; }
.dp-head { font: 700 var(--fs-label) var(--f-mono); letter-spacing: var(--track-cere); text-transform: uppercase;
  color: var(--c-text-dim); margin-bottom: 6px; text-align: center; }
.dp-head > span:not(.dlg) { white-space: nowrap; }
.dp-head.decl { font: var(--fs-label) var(--f-serif);
  letter-spacing: .12em; text-transform: none; color: var(--c-accent-text); text-align: left; }
.dp-head.decl .dp-dot { color: var(--c-text-faint); }
.mbtns { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.mbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1 1 5em; white-space: nowrap; min-width: max-content; padding: 5px 8px; cursor: pointer;
  font: var(--fs-body) var(--f-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-dim); background: transparent;
  border: 1.5px solid var(--c-border); border-radius: 5px; transition: border-color var(--t-quick), background var(--t-quick); }
.mbtn[disabled], .mbtn[aria-disabled="true"] { opacity: .35; color: var(--c-accent-mute); cursor: default; }
.mbtn.m-ally[aria-pressed="true"] { --mc: var(--c-ally); } .mbtn.m-betray[aria-pressed="true"] { --mc: var(--c-betray); } .mbtn.m-duel[aria-pressed="true"] { --mc: var(--c-duel); }
.mbtn[aria-pressed="true"] { color: var(--mc); border-color: var(--mc); background: color-mix(in srgb, var(--mc) 16%, transparent); }
.mbtn .mverb { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 359px) { .mbtn .mverb { font-size: .8em; } }
.mbtn .mtgt { font: var(--fs-micro) var(--f-serif); letter-spacing: 0; text-transform: none; color: var(--c-text-faint); }
.mbtn.set .mtgt { color: var(--c-text-bright); }
/* the final duel's target is set by the table: it reads whole, never dimmed */
.mbtn.set:not([data-arm]) { opacity: 1; color: var(--c-text-label); }
.slots-declare { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.slots-declare.opt-leave { margin-top: var(--sp-4); }
.seat { position: relative; overflow: visible; }
.seat .sub.last { font-size: var(--fs-micro); letter-spacing: var(--track-data); }
.seat .act-duel { color: var(--c-duel); } .seat .act-ally { color: var(--c-ally); } .seat .act-betray { color: var(--c-betray); }
.seat .act-duel.grudge { color: var(--c-vindic); font-weight: 700;
  border: 1px solid var(--c-vindic); border-radius: var(--r-tight); padding: 0 3px; }
.cbubble { position: relative; margin: 0 auto 10px; width: fit-content;
  min-width: min(120px, 100%); max-width: min(240px, 100%); box-sizing: border-box; padding: 5px 10px; background: #05050f;
  border: 1px solid color-mix(in srgb, currentColor 53%, transparent);
  border-radius: 8px; font-family: var(--f-serif); text-align: center;
  animation: cask-modal-enter calc(280ms * var(--fx-speed)) cubic-bezier(0.2, 0.9, 0.3, 1) both;
  pointer-events: none; }
.cbubble::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 6px solid color-mix(in srgb, currentColor 53%, transparent); }
.cbubble .cb-line { font-size: var(--fs-label); line-height: 1.35; letter-spacing: .04em; font-style: normal;
  overflow-wrap: break-word; -webkit-text-stroke: 1.75px #000000; paint-order: stroke fill; }
.cbubble .cb-line + .cb-line { margin-top: 3px; }
@keyframes cask-modal-enter { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
.seatgrid { overflow: visible; }

.seatgrid.cast .seat.tutdim:not(:has(.cbubble)) { opacity: .55; }

.lobbyfoot { text-align: center; margin-top: 6px; color: var(--c-text-mute);
  font-size: var(--fs-label); letter-spacing: 0.12em; line-height: 1.5; }

.lob-panel { background: var(--c-bg-panel); border: 1px solid var(--c-border); border-radius: 8px; padding: 9px; margin-bottom: 10px; }
.lob-panel.raised { border-color: var(--c-bg-raised); }
.lob-panel .lobby-label { font: var(--fs-small) var(--f-serif); letter-spacing: var(--track-wide); margin: 0 0 8px; }
:has(> .roomlink) > .lobby-label { font: var(--fs-small) var(--f-serif); letter-spacing: var(--track-wide); }
.lob-panel .lobby-label .dim, :has(> .roomlink) > .lobby-label .dim { color: var(--c-text-mute); text-transform: none; letter-spacing: var(--track-label); }
.shade-pick.lob-shades { margin-bottom: 6px; }
.lob-shades .shade-opt { font: 700 max(19px, var(--fs-label))/1.4 var(--f-serif); padding: 8px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; min-width: 0;
  color: var(--tileink, #000000); -webkit-text-stroke: 1px var(--tilerim, #ffffff); paint-order: stroke fill; box-shadow: none; text-shadow: none; transition: all .12s; }
.lob-shades .shade-opt:hover { transform: none; }
.lob-shades .shade-opt[data-on="1"] { border-color: var(--c-gold); transform: scale(1.04); box-shadow: inset 0 0 0 2px var(--c-gold); }
.lob-shades .shade-opt .chosen-mark { font-weight: 400; }
.lob-bar, .lob-panel .pas-opt.lob-bar { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; padding: 7px 6px; border-radius: 6px;
  font: var(--fs-small) var(--f-serif); background: var(--c-bg-panel); border: 1px solid var(--c-border); color: var(--c-text-body); box-shadow: none; }
.lob-bar.shade-opt:hover { transform: none; }
/* a Random bar's two labels share one cell, so the bar keeps the taller box in both states */
.lob-bar .rlab { display: inline-grid; justify-items: center; }
.lob-bar .rlab > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; }
.lob-bar .rlab > .off { visibility: hidden; font-weight: 700; }
/* proto 6015-6019; the doubled selector outranks .lob-panel .pas-opt.lob-bar (0-3-0) */
.lob-bar[data-on="1"], .lob-panel .pas-opt.lob-bar[data-on="1"] { background: var(--c-active-bg); border-color: var(--c-gold); color: var(--c-gold); font-weight: 700; box-shadow: inset 0 0 0 1px var(--c-gold); transform: none; }
.lob-pas { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.lob-pas > .pas-opt { flex: 1 1 130px; min-width: 0; }
.lob-pas .pas-opt { display: grid; align-content: start; text-align: left; padding: 6px 8px; border-radius: 5px; }
.lob-pas .pas-opt strong { display: block; color: var(--c-text-label); font-size: var(--fs-small); }
.lob-pasd { display: block; color: var(--c-accent-mute-text); margin-top: 2px; line-height: 1.5; }
.lob-pasd, .in-pasd, .yc-pasd { text-wrap: wrap; }
.lob-pas .pas-opt[data-on="1"] { background: var(--c-active-bg); border-color: var(--c-text-link); }
.lob-pas .pas-opt[data-on="1"] strong { color: var(--c-text-bright); }
.lob-pas .lob-pasd, .lob-pas .pas-opt[data-on="1"] .lob-pasd, .lob-secs .lob-note { color: var(--c-text-body); }
.lob-pas .pas-opt { justify-content: stretch; }
.lob-queue .pas-opt[data-queue] { border-color: var(--c-border-active); }
.lob-queue .pas-opt[data-queue] strong::after { content: " →" / ""; }
.lob-queue .pas-opt[data-queue]:is(:hover, :focus-visible) { border-color: var(--c-gold); }
.lob-queue .pas-opt[data-queue]:is(:hover, :focus-visible) strong { color: var(--c-gold); }
.lob-queue .pas-opt[data-enter="1"] { border-color: var(--c-gold); box-shadow: inset 0 0 0 1px var(--c-gold); }
.lob-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin-bottom: 10px; }
.lob-secs { flex: 1 1 340px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.lob-secs .lobby-label { letter-spacing: 0.12em; margin: 0; }
.lob-chips { --bal-x: 6px; --bal-y: 6px; margin-bottom: -6px; }
.lob-chips .pas-opt { font: var(--fs-small) var(--f-serif); padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text-dim); }
.lob-chips .pas-opt[data-on="1"] { background: var(--c-active-bg); border-color: var(--c-active-border); color: var(--c-active-text); }
.lob-note { color: var(--c-text-mute); font-size: var(--fs-label); line-height: 1.5; }
.lob-note.i { font-style: italic; line-height: 1.4; }
.gold-cta.lob-enter { flex: 1 1 260px; width: auto; min-width: 0; margin: 0; padding: 12px 16px; border-radius: 8px; border-width: 2px;
  border-color: var(--c-gold-bright); font-size: var(--fs-body); letter-spacing: var(--track-cere); overflow-wrap: break-word;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--c-gold) 33%, transparent); }
.gold-cta.lob-enter[aria-disabled="true"] { border-color: var(--c-border); box-shadow: none; color: var(--c-text-faint); }
.lob-start { margin: 0 0 var(--sp-3); }
.lob-start.spent { visibility: hidden; }
.gold-cta.lob-go { margin: 0 0 6px; padding: 12px 16px; border-radius: 8px; border-width: 2px; border-color: var(--c-gold-bright); min-height: max(44px, var(--tap));
  font-size: var(--fs-body); letter-spacing: var(--track-cere); overflow-wrap: break-word; box-shadow: 0 4px 20px color-mix(in srgb, var(--c-gold) 33%, transparent); }
/* under 640 Enter keeps to the screen's foot while the player picks (it sat 2.4 screens below the shades it starts), then settles in its own place */
@media (width <= 640px) {
  #game .lob-row:has(> .lob-enter) { display: contents; }
  #game .gold-cta.lob-enter { position: sticky; bottom: 0; z-index: 3; width: 100%; min-height: max(44px, var(--tap)); margin: 10px 0; padding-block: 10px;
    font-size: var(--fs-small); letter-spacing: var(--track-label); box-shadow: 0 10px 0 0 var(--c-stage-bg), 0 -22px 18px -4px var(--c-stage-bg);
    container-type: inline-size; }
  /* H213 (HUE): the longest label, 23 capitals, keeps to one line at any width, its size read from the bar's own */
  #game .gold-cta.lob-enter .elab { font-size: min(1em, 4.8cqi); white-space: nowrap; }
  html:has(#game .lob-enter) { scroll-padding-bottom: calc(max(44px, var(--tap)) + 20px); }
  #game .gold-cta.lob-enter[aria-disabled="true"] { background: var(--c-stage-bg); }
  #game .gold-cta.lob-go { letter-spacing: var(--track-wide); }
}
.lob-enter .elab { display: inline-grid; justify-items: center; }
.lob-enter .elab > * { grid-area: 1 / 1; }
.lob-enter .elab > .off { visibility: hidden; }
.lob-menu { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; min-width: 0; }
.lob-menu a { display: flex; align-items: center; justify-content: center; padding: 6px 10px; border: 1.5px solid var(--c-border); border-radius: 6px;
  font: var(--fs-small) var(--f-serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-dim); text-decoration: none; white-space: nowrap; }
.lob-ver { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; color: var(--c-text-dim); }
.lob-sound { padding: 3px 8px; font: var(--fs-label) var(--f-serif); letter-spacing: 0.12em; text-transform: uppercase; background: transparent;
  border: 1px solid var(--c-border); border-radius: 3px; color: var(--c-gold); cursor: pointer; }
.lob-sound.off { color: var(--c-text-dim); }
@media (width <= 640px), (pointer: coarse) { .lob-menu a, .lob-sound { min-height: var(--tap); } }

.seat.targetable:hover { box-shadow: 0 0 12px -6px var(--sw, var(--c-gold-glow)); filter: brightness(1.15); }
/* the keyboard ring is solid and bright, apart from the shade border and the hover: 7.8:1 */
.seat:focus-visible { outline: 2px solid var(--c-active-text); outline-offset: 3px; }

.tapprev { position: absolute; left: 4px; right: 4px; bottom: 3px; z-index: 5; pointer-events: none;
  padding: 1px var(--sp-1); border-radius: var(--r-tight); text-align: center; text-transform: uppercase;
  font: 700 var(--fs-micro)/1.3 var(--f-mono); letter-spacing: var(--track-kicker);
  background: transparent; border: 1px dashed var(--c-border-active); color: var(--c-text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity var(--t-quick); }
/* one ghost at a time: the hovered seat's, else the focused seat's */
.seat:hover > .tapprev { opacity: 1; }
.seatgrid:not(:has(.seat:hover)) .seat:focus > .tapprev { opacity: 1; }
html.still .tapprev { transition: none; }
.seat.arm-ally > .tapprev { border-color: var(--c-ally); }
.seat.arm-betray > .tapprev { border-color: var(--c-betray); }
.seat.arm-duel > .tapprev { border-color: var(--c-duel); }
.seat.arm-wtarget > .tapprev { border-color: var(--c-gold); }
.tapprev-card { border-color: var(--c-border); }
/* a picked seat shows its pick at rest; hover and focus govern only the unpicked preview */
.tapprev.tapprev-set { opacity: 1; background: var(--c-bg-deep); border-style: solid; color: var(--c-text-bright); }
.seat.arm-wtarget > .tapprev.tapprev-set { color: var(--c-gold); }
.seat[class*=" picked-"]:focus:not(:hover) > .tapprev:not(.tapprev-set),
.seat[class*=" wt-"]:focus:not(:hover) > .tapprev:not(.tapprev-set) { opacity: 0; }
@media (max-width: 600px) { .gamestage .tapprev { font-size: 14px; letter-spacing: 0; } }

.roomlink { margin: 6px 0 var(--sp-1); padding: var(--sp-2) var(--sp-3); background: var(--c-bg-deep); border: 1px solid var(--c-gold-muted);
  border-radius: var(--r-card); font: var(--fs-label) var(--f-mono); color: var(--c-gold); word-break: break-all; user-select: all; }
.qr { display: block; width: 12rem; max-width: 100%; height: auto; margin: var(--sp-1) 0; }
.hero.nx .bp { width: min(34svh, 62vw); height: min(34svh, 62vw); }
@keyframes spectrum { 100% { background-position: 300% 0; } }

footer.frame .bpmark { color: var(--c-gold-dim); margin-right: var(--sp-0); }
html.contrast .snowlabel { fill: var(--c-text-bright); }
html.contrast .epill, html.contrast .slot { border-width: 2px; }

.railed { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.crail { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--sp-0); position: sticky; top: 64px;
  border-right: 1px solid var(--c-divider); padding-right: var(--sp-3); margin-left: 0;
  max-height: calc(100vh - max(64px, var(--hdr-h) + var(--main-pad-top))); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: var(--c-border) transparent; }
.crail > *, .crail-list > * { flex-shrink: 0; }
.crail-list { display: contents; }
.crail-tog { display: none; }
.crail.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }
@media (width > 760px) { .crail { scroll-padding-bottom: 48px; } }
.crail a { font: var(--fs-label)/1.4 var(--f-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-text-mute); padding: 3px var(--sp-1); border-radius: var(--r-tight); min-height: 0; }
@media (width <= 640px), (pointer: coarse) { .crail a { min-height: var(--tap); } }
.crail a.on { background: var(--c-divider); font-weight: 700; }
.crail .crail-h { font: 700 var(--fs-label) var(--f-display); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--c-gold); white-space: nowrap; }
.crail .crail-g { font: var(--fs-micro) var(--f-display); letter-spacing: var(--track-kicker); text-transform: uppercase;
  color: var(--c-text-faint); margin-top: var(--sp-2); }
/* on a phone the rail is one sticky Contents row; open, it lies over the page and moves nothing being read */
@media (width <= 760px) {
  /* a block, not a grid: a grid item sticks only within its own row */
  .railed { display: block; }
  .comp-doors { display: none; }
  .crail { position: sticky; top: var(--hdr-h); z-index: 4; max-height: none; overflow: visible; margin: 0 0 var(--sp-5); padding: 0; border-right: 0;
    border-bottom: 1px solid var(--c-divider); background: var(--c-app-bg); }
  .crail.more { -webkit-mask-image: none; mask-image: none; }
  /* main's side gutter is painted too, so nothing scrolling under shows at its ends */
  .crail, .crail.open .crail-list { --gut: clamp(12px, 4vw, 40px); box-shadow: var(--gut) 0 var(--c-app-bg), calc(-1 * var(--gut)) 0 var(--c-app-bg); }
  .crail-tog { display: flex; align-items: center; gap: .5ch; width: 100%; min-height: var(--tap); padding: 0 var(--sp-1); background: none; border: 0;
    font: var(--fs-label) var(--f-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-text-mute); text-align: left; cursor: pointer; }
  .crail-tog::after { content: "\25BE" / ""; margin-left: auto; }
  .crail-here { text-wrap: balance; }
  .crail.open .crail-tog::after { content: "\25B4" / ""; }
  .crail-list { display: none; }
  .crail.open .crail-list { display: flex; flex-direction: column; gap: var(--sp-0); position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - var(--hdr-h) - var(--main-pad-top) - var(--tap) - 1px); overflow-y: auto; overscroll-behavior-y: contain;
    padding: 0 0 var(--sp-2); background: var(--c-app-bg); border-bottom: 1px solid var(--c-divider); }
  #view.railed, .optlist, .optlist > .slot[id], .dz-h { scroll-margin-top: calc(var(--hdr-h) + var(--tap) + var(--sp-3)); }
}
@media (width > 760px) { .optrail { display: none; } }
.optfold > summary, .transpired > summary { gap: var(--sp-1); }
.su-again > summary { font-size: var(--fs-body); }
.foot:not(.fold) .fmap > summary { display: none; }
.fmap-h { display: flex; align-items: center; gap: .5ch; min-height: var(--tap); cursor: pointer; font: var(--fs-label) var(--f-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-text-mute); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before, .disclosure:is(button, span)::before { content: "\25B8" / ""; color: var(--c-text-faint); }
.disclosure[open] > summary::before, .disclosure[aria-expanded="true"]::before, [aria-expanded="true"] .disclosure:is(span)::before { content: "\25BE" / ""; }
button.disclosure::before { margin-right: .5ch; }

.cmain { container-type: inline-size; }
@media (min-width: 1280px) {
  .cmain:has(> .phead + .pset):has(> .phead .flav) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-5); align-items: start; }
  .cmain:has(> .phead .flav) > .pset > .meta:first-child { margin-top: 0; }
  /* tiles of 154px fill the half, not ten columns (which overflowed) */
  .cmain:has(> .phead .flav) > .pset > .slots { grid-template-columns: var(--slot-grid); }
}

main:has(#g) .cmain > :not(#g):not(h1.dest) { max-width: var(--measure); }
:is(.mseats, .grid.corridors, .slots.corridors, .shade-pick, .lob-queue, .calgrid) { gap: var(--g16);
  grid-template-columns: repeat(auto-fill, minmax(calc((100% - 7 * var(--g16)) / 8
    + clamp(0px, (var(--w8, calc(8 * var(--t16) + 7 * var(--g16))) - 100%) * 10000, (100% - 3 * var(--g16)) / 4 - (100% - 7 * var(--g16)) / 8)
    + clamp(0px, (var(--w4, calc(4 * var(--t16) + 3 * var(--g16))) - 100%) * 10000, (100% - var(--g16)) / 2 - (100% - 3 * var(--g16)) / 4)
    + clamp(0px, (var(--w2, calc(2 * var(--t16) + var(--g16))) - 100%) * 10000, 100% - (100% - var(--g16)) / 2) - 0.1px), 1fr)); }
.mseats { --t16: max(196px, 10 * var(--fs-micro) + 50px); --g16: var(--sp-2); --w2: 300px; }
.slots.corridors { --t16: 154px; --g16: var(--sp-2); --w2: 300px; }
.lob-queue { --g16: 5px; display: flex; flex-wrap: wrap; }
.lob-queue > .pas-opt { flex: 1 1 220px; min-width: 0; }
.calgrid { --t16: 240px; --g16: var(--sp-2); }
/* the sixteen Avatars go two across from a 300px grid, so a phone sees each corridor's pair side by side */
.grid.corridors { --g16: var(--sp-3); --w2: 300px; --w4: 846px; --w8: 1362px; }
.shade-pick { --t16: calc(6.9 * var(--fs-shade)); --g16: var(--sp-2); }
.shade-pick.lob-shades { --t16: max(140px, 6.9 * var(--fs-label)); }

.lboard { max-width: var(--measure); }
.lbrows { list-style: none; margin: 0; padding: 0; }
.lbrows > li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: 4px 8px; border-bottom: 1px solid var(--c-divider); }
.lbrows .shaded { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--track-data); }
.lb-who { font-size: var(--fs-small); color: var(--c-text-body); }
.lb-who.you { color: var(--c-gold); text-transform: uppercase; letter-spacing: var(--track-label); }
.lb-who.none, .lb-none { color: var(--c-text-mute); font-style: italic; }
.lb-none { font-size: var(--fs-small); text-align: center; padding: 12px; }
.fateflake { max-width: 340px; margin: var(--sp-3) auto; }
.fateflake .sig svg { width: 100%; height: auto; }
@media (min-width: 1280px) { .fateflake { max-width: clamp(480px, 30vw, 640px); } }
@media (min-width: 1280px) and (orientation: landscape) {
  #view:has(> #tl) { display: grid; grid-template-columns: minmax(0, 1fr) clamp(480px, 30vw, 640px); column-gap: var(--sp-5); align-items: start; }
  #view:has(> #tl) > :not(#tl, #tallies, #fateflake) { grid-column: 1 / -1; }
  #view > #tl { grid-column: 1; grid-row: 3; }
  #view > #tallies { grid-column: 1; grid-row: 4; }
  #view > #fateflake { grid-column: 2; grid-row: 3 / span 2; margin: 0; max-width: none; position: sticky; top: calc(var(--hdr-h) + var(--sp-3)); }
}
/* the season's tallies (HUE): the Class matchups' table shape; the name column stays put while the numbers scroll */
.tallies { margin-top: var(--sp-5); }
.tally-togs { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-2) 0 0; }
.tally-tog { display: inline-flex; }
.tally-tog button { font: var(--fs-label) var(--f-mono); padding: var(--sp-1) var(--sp-3); min-height: var(--tap); background: none; border: 1px solid var(--c-border); color: var(--c-text-mute); cursor: pointer; }
.tally-tog button + button { border-left: 0; }
.tally-tog button[aria-pressed="true"] { color: var(--c-text-bright); border-color: var(--c-gold-muted); background: var(--c-bg-raised); }
.tallytable th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; min-height: var(--tap); cursor: pointer; }
#hver { padding-block: 3px; }
.tallytable [aria-sort="descending"] button::after { content: "\00a0\25BE" / ""; }
.tallytable [aria-sort="ascending"] button::after { content: "\00a0\25B4" / ""; }
.mnum { margin-top: var(--sp-5); }
.mnum > summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; gap: var(--sp-1); font: var(--fs-label) var(--f-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-text-label); }
.tallytable .tally-name { text-align: left; white-space: nowrap; position: sticky; left: 0; background: var(--c-app-bg); font-weight: 400; }
.tallytable .tally-name .cicon { width: 1em; height: 1em; margin-right: var(--sp-1); vertical-align: -0.15em; }
.tallytable .tally-of { color: var(--c-text-mute); font-size: var(--fs-small); }
.tallytable .tally-z { white-space: nowrap; color: var(--c-text-mute); }
.tallytable .tally-out { color: var(--c-text-bright); font-weight: 700; }

.charbody { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); gap: var(--sp-4); align-items: start; }
.charflake .sig svg { width: 100%; height: auto; }
.charflake { min-width: 0; }
.charflake .sig { max-width: min(100%, clamp(340px, 30vw, 760px)); margin-inline: auto; }
@media (orientation: portrait) { .charbody { grid-template-columns: 1fr; }
  .charflake .sig { max-width: min(78vw, 380px); } }
@media (max-width: 700px) { .charbody { grid-template-columns: 1fr; } }

.adframe { margin: var(--sp-4) auto 0; text-align: center; max-width: 100%; }
.adframe iframe { display: block; margin: 0 auto; border: 0; max-width: 100%; }
.adframe-by { font: var(--fs-micro) var(--f-mono); color: var(--c-text-mute); letter-spacing: var(--track-label); margin-top: var(--sp-1); }

@media (max-width: 540px) {
  :root { --hdr-h: calc(var(--tap) + 1px); }
  header.frame { gap: 0 var(--sp-2); padding: 0 var(--sp-2); }
  .brand { font-size: 15px; letter-spacing: var(--track-kicker); min-height: var(--tap); }
  .bpmark-slot { width: 24px; height: 24px; margin-right: 6px; }
}

.acct-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); max-width: 760px; margin-top: var(--sp-4);
  container: acctforms / inline-size; }
.acct { display: flex; flex-direction: column; gap: var(--sp-2); }
.slot > form.acct { margin-top: 20px; }
.acct label { display: flex; flex-direction: column; gap: var(--sp-0); font: var(--fs-label) var(--f-mono);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-text-label); }
:is(.acct, .lopts) input { background: transparent; border: 1px solid var(--c-text-faint); }
.acct input { border-radius: var(--r-card);
  color: var(--c-text-bright); font: var(--fs-body) var(--f-mono); padding: var(--sp-2) var(--sp-3); min-height: var(--tap); }
.acct input:focus { outline: 2px solid var(--c-active-border); outline-offset: 1px; border-color: var(--c-accent); }
/* an error reads apart from the help around it: a marked field keeps the danger border in every state; the guardian's refusal is in the danger colour (5.07:1 or more) */
:is(.acct, .lopts) input[aria-invalid="true"], :is(.acct, .lopts) input[aria-invalid="true"]:is(:focus, :hover) { border-color: var(--c-danger-soft); }
#su-guard-msg, #su-bday-msg, .refused { color: var(--c-danger-soft); }
.acct-alt { border-left: 1px solid var(--c-divider); padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.acct-forms > .acct-alt:only-child { border: 0; padding: 0; }
.jumparrow::after { content: "\2193" / ""; }
@container acctforms (width >= 556px) { .jumparrow::after { content: "\2192" / ""; } }
@container acctforms (width >= 556px) { #su::before { content: "\200b" / ""; font: var(--fs-label) var(--f-serif); letter-spacing: var(--track-data); margin-top: var(--sp-2); } }
@container acctforms (width < 556px) { .acct-alt { border-left: 0; padding-left: 0; border-top: 1px solid var(--c-divider); padding-top: var(--sp-3); } }
/* one :has each, since a :has inside a :has is dropped */
@media (min-width: 720px) {
  #view:has(> .acct-forms > #su) { max-width: min(100%, 960px); }
  .acct-forms:has(> #su) { grid-template-columns: minmax(320px, 3fr) minmax(260px, 2fr); max-width: 960px; }
}
.surung { margin-top: var(--sp-4); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-card);
  background: var(--g-panel); font: var(--fs-label)/1.6 var(--f-serif); color: var(--c-text-body); }
.surung .navmake { display: flex; width: fit-content; max-width: 100%; margin: var(--sp-2) 0 0; white-space: normal; }

#startup { position: fixed; inset: 0; z-index: 55; background: var(--c-app-bg); display: flex;
  flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
  transition: opacity .65s ease; }
#startup.gone { opacity: 0; pointer-events: none; }

html:not(.nojs):has(#boot),
html:has(#startup) { overflow: hidden; scrollbar-gutter: stable; }

#startup.hushing .supwm, #startup.hushing .supskip,
#boot.hushing .bootwm { opacity: 0; transition: opacity .22s ease; }
#startup .bp { position: relative; width: min(72svh, 86vw); height: min(72svh, 86vw); }
#startup .supwm { font: 900 clamp(16px, 2.6vw, 34px)/1 var(--f-display); letter-spacing: var(--track-cere);
  padding-left: .22em; color: var(--c-text-bright); margin-top: -2%; transition: color .7s ease, text-shadow .7s ease; }
#startup .supskip { position: absolute; bottom: var(--sp-4); right: var(--sp-4);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--r-card);
  font: var(--fs-label) var(--f-mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--c-text-label); }

main:has(.menu-a4) { max-width: none; }
.menu-a4 { margin-top: var(--sp-4);
  max-width: min(96vw, 1956px); margin-inline: auto; }
#homeplace { max-width: min(96vw, 1956px); margin-inline: auto; }
@media (width > 640px) { .menu-a4 { min-height: min(70vh, 680px); } }

#boot { position: fixed; inset: 0; z-index: 50; background: var(--c-app-bg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; transition: opacity var(--t-unfold) ease; }
#boot.gone { opacity: 0; pointer-events: none; }
#boot .bp { position: relative; width: min(64svh, 82vw); height: min(64svh, 82vw); }
.bootwm { font: 900 clamp(14px, 2.2vw, 29px)/1 var(--f-display); letter-spacing: .3em; padding-left: .3em;
  color: var(--c-text-bright); margin-top: -2%; transition: color .7s ease, text-shadow .7s ease; }

html.still *, html.still *::before, html.still *::after {
  animation-delay: -1ms !important; animation-duration: 1ms !important;
  animation-iteration-count: 1 !important; transition: none !important; }

html.nonum .mbase { display: none; }

.song { max-width: min(100%, 86ch); margin: var(--sp-6) auto var(--sp-4); }
.verse { color: var(--c-text-body); font-family: var(--f-serif); line-height: 1.8; margin: 0 0 16px; text-align: center; }
.verse:first-of-type { color: var(--c-text-bright); font-size: var(--fs-small); font-weight: 600; letter-spacing: .01em; }
.song .vl { display: block; text-wrap: balance; }

.pav-door-row { text-align: center; margin-top: var(--sp-4); }
.pav-door { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
  padding: var(--sp-2) var(--sp-5); border: 1px solid var(--c-gold-muted); border-radius: var(--r-card);
  color: var(--c-gold); font: var(--fs-small)/1 var(--f-display); letter-spacing: var(--track-label);
  text-transform: uppercase; white-space: nowrap; transition: color var(--t-quick), border-color var(--t-quick); }
#homeplace .pav-door { white-space: normal; text-align: center; line-height: 1.3; max-width: 100%; }
.pav-door-row.card-door { text-align: left; margin: var(--sp-2) 0; }
.rung-door { display: block; margin-top: var(--sp-2); }
.pav-door-row.card-door .pav-door { max-width: 100%; white-space: normal; text-align: center; }

#view:has(> #loadout), #view:has(> h1.pav), #view:has(> #tl), #view:has(> .optlist),
#view:has(> .acct-forms) { max-width: var(--measure); margin-inline: auto; }
#view:has(> .rc-row) { max-width: var(--measure); margin-inline: auto; }
.rc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0 var(--sp-1); }
.rc-row > .roomlink { max-width: 100%; margin: 0; font: min(var(--fs-title), 36px) var(--f-mono); letter-spacing: var(--track-wide); word-break: normal; }
.rc-row > .lopts { margin: 0; }
.pavsig { margin-top: var(--sp-4); }
.pavmain, .pavsig { min-width: 0; }
#view.pav-noloot #lootbyshade, #view.pav-noplay .pavrecs { display: none; }
.pmore > summary { cursor: pointer; margin-top: var(--sp-1); font: var(--fs-micro) var(--f-serif); color: var(--c-text-link); }
.pmore > summary:hover, .pmore > summary:focus-visible { text-decoration: underline; }
/* the disclosure is a full tap target, its marker drawn as the native one was */
.pmore > summary { list-style: none; display: flex; align-items: center; gap: .5ch; width: fit-content; min-height: var(--tap); margin: var(--sp-1) 0; }
.guild-found { margin-top: var(--sp-3); }
.guild-found > summary { list-style: none; display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; margin: var(--sp-1) 0; }
.guild-found > summary::-webkit-details-marker { display: none; }
@media (min-width: 1100px) and (orientation: landscape) {
  #view:has(> h1.pav), #view:has(> h1.pav):has(> #loadout) { max-width: min(100%, 1400px); }
  #view:has(> h1.pav) > :not(.pavcols, h1) { max-width: var(--measure); }
  #view:has(> h1.pav) .pavcols { column-count: 2; column-gap: var(--sp-4); }
  #view:has(> h1.pav) .pavcols > * { break-inside: avoid; }
  #view:has(> h1.pav) .pavsig { margin-top: 0; }
  #view:has(> h1.pav) .pavside > .credits-h:first-child { margin-top: var(--sp-3); }
  #view:has(> h1.pav) #pavcircle { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); column-gap: var(--sp-4); align-items: start; }
  #view:has(> h1.pav) #pavcircle > :not(.slot) { grid-column: 1 / -1; }
  .pavsig .sig { margin-top: 0; }
  #view:has(> #tl) { max-width: min(96vw, 1956px); }
  /* a row is its own height, never stretched to a neighbour's */
  #tl:not(.note) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); column-gap: var(--sp-4); align-items: start; }
  #tl > :not(.trow) { grid-column: 1 / -1; } }
.meta:has(+ .optlist) { font-style: italic; color: var(--c-text-label); }
.optlist { display: flex; flex-direction: column; }
.optlist > .slot { padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--c-divider); border-radius: 0; transform: none; box-shadow: none; }
.optlist > .slot:has(> .st) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.optlist .st { flex: 1 1 220px; min-width: 0; }
.optlist .slot .s1 { font: 700 var(--fs-small)/1.25 var(--f-serif); margin-bottom: 2px; }
.optlist .slot h2.s1 { margin-top: 0; }
.optlist .st .s2 { color: var(--c-text-label); line-height: 1.5; margin-top: 0; }
.optlist .st + .lopts { flex-shrink: 0; margin-top: 0; }
.optlist .st + .lopts:has(> .setsw) { flex-basis: 100%; }
/* (width < 600px), not max-width: 599px, so a fractional width meets one rule or the other */
@media (width < 600px) {
  .optlist > .slot:has(> .lopts > .setsw) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "s1 sw" "s2 s2"; column-gap: 10px; row-gap: 2px; align-items: start; }
  .optlist > .slot:has(> .lopts > .setsw) > .st { display: contents; }
  .optlist > .slot:has(> .lopts > .setsw) > .st > .s1 { grid-area: s1; align-self: center; }
  .optlist > .slot:has(> .lopts > .setsw) > .st > .s2 { grid-area: s2; }
  .optlist > .slot > .lopts:has(> .setsw) { grid-area: sw; }
}
@media (min-width: 600px) {
  #view .optlist { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 10px; }
  .optlist > .slot { grid-column: 1 / -1; }
  .optlist > .slot:has(> .lopts > .setsw) { display: grid; grid-template-columns: subgrid; }
  .optlist > .slot > .lopts:has(> .setsw) { flex-direction: column; }
}
@media (min-width: 1100px) and (orientation: landscape) {
  #view:has(> .optlist) { max-width: min(100%, 1400px); }
  #view:has(> .optlist) > :not(.optlist) { max-width: var(--measure); }
  /* the settings flow down two columns, each keeping its switch column at the widest switch's width; the order heard is the order seen */
  #view .optlist { display: block; columns: 2; column-gap: var(--sp-5); }
  .optlist > .slot { break-inside: avoid; }
  .optlist > .slot:has(> .lopts > .setsw) { grid-template-columns: minmax(0, 1fr) 11.25rem; }
}
.lslot { padding: var(--sp-2) var(--sp-3); background: var(--g-panel); border: 1px solid var(--c-border); border-radius: var(--r-card); }
.lslot .s1 { font: 700 var(--fs-label)/1.2 var(--f-display); color: var(--c-text-bright); }
.lslot .s1 { display: block; }
/* columns floor at 160px so every item name fits its select */
#view #loadout > .slots { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
#loadout .lslot { padding-inline: var(--sp-1); }
.lslot .eqsel { display: block; width: 100%; margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-1); font: var(--fs-label) var(--f-serif);
  color: var(--c-text-bright); background-color: var(--c-bg-panel); border: 1px solid var(--c-border); border-radius: var(--r-card); cursor: pointer; }
.lslot .eqsel:hover, .lslot .eqsel:focus-visible { border-color: var(--c-border-active); }
.lslot .eqsel:disabled { color: var(--c-text-mute); cursor: default; }
.lslot .eqsel:has(option[value=""]:checked) { color: var(--c-text-dim); }
.lslot .eqsel option { color: var(--c-text-bright); }
@media (width < 640px), (pointer: coarse) { .lslot .eqsel { min-height: var(--tap); } }
@media (width < 640px) {
  #view #loadout > .slots { grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--sp-3); }
  #loadout .lslot { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 0;
    background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--c-divider); }
  #loadout .lslot .eqsel { margin-top: 0; }
}
.lopts { margin-top: 7px; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.lopts > span.s3 { align-self: center; margin-right: var(--sp-2); }
.gate-ov .lonelink, .gate-ov .equip-opt { font-family: var(--f-display); }
.gate-ov .meta { font-family: var(--f-serif); }
.equip-opt { font: var(--fs-label) var(--f-mono); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-card); cursor: pointer; background: transparent; color: var(--shadec, var(--c-text-mute)); border: 1px solid var(--sw, var(--c-border)); box-shadow: 0 0 0 1px var(--haloc, transparent); transition: background var(--t-quick); }
.equip-opt:hover:not([aria-disabled="true"]) { background: var(--c-bg-raised); }
.equip-opt[aria-disabled="true"] { opacity: .4; cursor: default; }
.equip-opt.danger { color: var(--c-danger-soft); border-color: var(--c-danger-mute); }
.equip-opt.danger:hover:not([aria-disabled="true"]) { background: var(--c-danger-bg); border-color: var(--c-danger); }
.dangerzone { margin-top: var(--sp-5); padding: var(--sp-3); border: 1px solid var(--c-danger-mute); border-radius: var(--r-card); background: var(--c-danger-bg); }
.dangerzone .dz-h { font: 700 var(--fs-label) var(--f-display); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--c-danger-soft); margin: 0 0 var(--sp-1); }
.dangerzone .dz-p { font: var(--fs-body)/1.5 var(--f-serif); color: var(--c-text-body); margin: 0 0 var(--sp-2); max-width: 62ch; }
.equip-opt[aria-pressed="true"], .equip-opt.setsw[aria-checked="true"] { color: var(--c-gold); border-color: var(--c-gold); background: var(--c-bg-raised); }
.slot .lopts:not(:has(input)) .equip-opt { flex: 1 1 auto; }
/* W61, H90: a setting's switch shows its state as a word; both words share one cell, so the switch keeps the longer one's width and a press moves nothing */
.setsw .setsw-w { display: grid; }
.setsw-w > [data-w] { grid-area: 1 / 1; }
.setsw[data-on="true"] [data-w="off"], .setsw:not([data-on="true"]) [data-w="on"] { visibility: hidden; }

.ownmark { color: var(--c-gold); font: var(--fs-micro) var(--f-serif); }
.slot.owned { border-color: var(--c-gold-muted); }
.slot.equipped { border-color: var(--c-gold); box-shadow: inset 0 1px 0 var(--c-edge-hi), 0 0 16px -8px var(--c-gold-glow); }
/* not dead: half of a reversible ruling (§32); the emitter returns if he reverses it */
.flav.flav-locked { color: var(--c-text-faint); }

.trow { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-1) var(--sp-3); align-items: baseline; padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-2);
  background: var(--c-bg-panel); border: 1px solid var(--c-border); border-radius: var(--r-card); font: var(--fs-label) var(--f-mono); transition: border-color var(--t-quick); }
a.trow:hover { border-color: var(--c-border-active); }
.trow .tm { display: contents; }
.trow .tm > .dlg { display: none; }
.trow .t1 { grid-area: 1 / 1; color: var(--c-text-mute); white-space: nowrap; }
.trow .t2 { grid-area: 1 / 2; font-weight: 700; }
.trow .t3 { grid-area: 1 / 3; color: var(--c-text-mute); white-space: nowrap; }
.trow .t4 { grid-column: 1 / -1; color: var(--c-text-label); }
@media (width <= 480px) {
  .trow { display: flex; flex-wrap: wrap; align-items: baseline; }
  .trow .t2 { order: -1; flex-basis: 100%; }
  .trow .tm { display: block; flex-basis: 100%; color: var(--c-text-mute); font-size: var(--fs-micro); }
  .trow .tm > .dlg { display: inline; }
  .trow .t1, .trow .t3 { font-size: var(--fs-micro); }
  .trow .t4 { flex-basis: 100%; }
}
@media (width > 480px) {
  #tl .trow { grid-template-columns: auto 1fr; }
  #tl .trow .tm { display: block; grid-area: 1 / 2; white-space: nowrap; color: var(--c-text-mute); }
  #tl .trow .tm > .dlg { display: inline; }
  #tl .trow .t2 { grid-area: 1 / 1; }
}
#view .trow:not(.gamestage *) { font-family: var(--f-serif); }
.tl-day { font: var(--fs-label) var(--f-mono); color: var(--c-text-mute); letter-spacing: var(--track-label); margin: var(--sp-4) 0 0; }
#tl > .tl-day:first-of-type { margin-top: var(--sp-2); }
#view .trow:not(.gamestage *) .tm, #view .trow:not(.gamestage *) .t1, #view .trow:not(.gamestage *) .t3 { font-family: var(--f-mono); }
.chron-list { max-height: 44vh; overflow-y: auto; }
.chron-list .trow:hover { border-color: var(--c-border); }

.earned { margin: 0 0 18px; padding: var(--sp-3) var(--sp-3); background: var(--c-bg-gold); border: 1px solid var(--c-gold-muted); border-radius: var(--r-door); }
.earned > .meta { font-family: var(--f-serif); font-style: italic; color: var(--c-text-label); letter-spacing: normal; }
.ekey { display: flex; gap: var(--sp-3); margin-top: var(--sp-1); font: var(--fs-micro) var(--f-mono); color: var(--c-text-label); }
.ekey span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.earned { text-align: center; }
.earned .ekey { justify-content: center; }
.eres { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-1); }
.corridor { display: inline-flex; flex-wrap: nowrap; gap: var(--sp-1); }
.epill { font: var(--fs-micro) var(--f-mono); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-card); border: 1px solid var(--sw, var(--c-border)); color: var(--c-text-bright);
  box-shadow: 0 0 0 1px var(--haloc, var(--c-edge-hi)); }
button.epill.held { background: none; cursor: pointer; }
.epill.drop:hover, button.epill.held:hover, button.epill.held[aria-expanded="true"] { background: var(--c-bg-raised); box-shadow: 0 0 12px -6px var(--sw, var(--c-gold)); }
/* one balance rule: a row breaks into even lines, so no item sits alone; each gap sits before its item and the row reaches back by it, so an overflow never widens the page */
.eres:where(:not(.ehist, #pavhistory *)) { --bal-x: var(--sp-1); --bal-y: var(--sp-1); margin-bottom: 0; }
.enter.eg-row { --bal-x: var(--sp-3); --bal-y: var(--sp-3); text-align: center; margin-bottom: calc(-1 * var(--bal-y)); }
.eres:where(:not(.ehist, #pavhistory *)), .enter.eg-row, .gh-menu, .yc-pls, .lob-chips, .ymx-names { display: block; text-wrap: balance; margin-left: calc(-1 * var(--bal-x)); }
:where(.eres:not(.ehist, #pavhistory *), .enter.eg-row, .gh-menu, .yc-pls, .lob-chips, .ymx-names) > * { display: inline-block; }
.eres:where(:not(.ehist, #pavhistory *)) > *, .enter.eg-row > *, .gh-menu > *, .yc-pls > *, .lob-chips > *, .ymx-names > * { margin: 0 0 var(--bal-y) var(--bal-x); vertical-align: top; }
/* under 480 the end buttons stand in one column, each the row's width, its label on one line */
@media (width <= 480px) {
  .enter.eg-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); margin: var(--sp-4) 0 0; text-wrap: wrap; }
  .enter.eg-row > * { margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
}
#pavhistory .eres, .eres.ehist { display: grid; grid-template-columns: max-content 1fr max-content; column-gap: var(--sp-3); row-gap: 0; }
#pavhistory .epill, .ehist .epill { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; font: var(--fs-small) var(--f-serif);
  padding: var(--sp-1) 0; border: 0; border-bottom: 1px solid var(--c-divider); border-radius: 0; box-shadow: none; }
#pavhistory .epill > :nth-child(2), .ehist .epill > :nth-child(2) { text-wrap: balance; }
/* a row with a replay ends in a quiet mark, silent to a reader since the link names itself */
#pavhistory a.epill > :last-child::after, .ehist a.epill > :last-child::after { content: "\00a0\203A" / ""; }
#pavhistory .epill > :last-child, .ehist .epill > :last-child { font: var(--fs-micro) var(--f-mono); }
@media (width <= 480px) { #pavhistory .eres, .eres.ehist { grid-template-columns: max-content 1fr min-content; } }
@media (width > 480px) { #pavhistory .eres, .eres.ehist { grid-template-columns: max-content max-content 1fr; } }
.eres.ehist.bare { grid-template-columns: 1fr min-content; }
@media (width > 480px) { .eres.ehist.bare { grid-template-columns: max-content 1fr; } }
.ehist.bare .epill > :first-child { text-wrap: balance; }
@media (width <= 420px) { #pavhistory .eres, .eres.ehist:not(.bare) { grid-template-columns: 1fr min-content; } #pavhistory .epill > :nth-child(2), .ehist:not(.bare) .epill > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }

.rsec { margin-top: 38px; }
.rh { font: 700 var(--fs-lede)/1.15 var(--f-display); color: var(--c-text-bright); letter-spacing: var(--track-data); }
.mxwrap { margin-top: 18px; overflow-x: auto; }
.mxwrap:has(> .tallytable) { background: linear-gradient(to left, var(--c-app-bg) 40%, transparent) right center / 36px 100% no-repeat local, linear-gradient(to left, color-mix(in srgb, var(--c-text-faint) 45%, transparent), transparent) right center / 18px 100% no-repeat scroll; }
@media (width > 900px) {
  .rpager .mxwrap > .mxtable { margin-inline: auto; }
  .rpager .mxwrap > :not(.mxtable) { max-width: var(--measure); margin-inline: auto; }
}
.mxtable { border-collapse: collapse; font: var(--fs-label) var(--f-mono); font-variant-numeric: tabular-nums; }
.polyref { display: flex; align-items: flex-end; gap: var(--sp-3); padding: var(--sp-3) var(--sp-1); background: var(--c-bg-panel); border: 1px solid var(--c-bg-inset); border-radius: var(--r-card); }
.polyref-cell { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); flex: 0 0 auto; min-width: var(--tap); }
.polyref-cell .prc-g .poly.pos { color: var(--c-ally); } .polyref-cell .prc-g .poly.neg { color: var(--c-danger-soft); }
.polyref-cell .prc-n { font: var(--fs-micro) var(--f-mono); color: var(--c-text-mute); }
.mxtable th, .mxtable td { padding: var(--sp-0) var(--sp-1); text-align: center; border: 1px solid var(--c-divider); }
.mxtable th { color: var(--c-text-label); font-weight: 700; }
.mxtable tbody th { white-space: nowrap; }
.mxtable tbody td { width: 48px; min-width: 48px; height: 22px; padding: 0 3px; border: 1px solid var(--c-mx-edge); font-weight: 400; }
.mxtable td.p2 { background: var(--c-mx-p2); color: var(--c-win); font-weight: 700; }
.mxtable td.p1 { background: var(--c-mx-p1); color: var(--c-val-dim-pos); }
.mxtable td.z  { background: var(--c-mx-z); color: var(--c-text-faint); }
.mxtable td.m1 { background: var(--c-mx-m1); color: var(--c-val-dim-neg); }
.mxtable td.m2 { background: var(--c-mx-m2); color: var(--c-lose); font-weight: 700; }
.mxtable td .cb { width: 1.05em; height: 1.05em; vertical-align: middle; color: inherit; }
.mxtable td .dnum { color: inherit; font: inherit; }
.mxtable thead th.mxh { writing-mode: vertical-lr; height: 140px; vertical-align: bottom; white-space: nowrap; padding: 1px 2px; }
.mxtable .mxt-r { color: var(--c-duel); } .mxtable .mxt-o { color: var(--c-gold-bright); }
.mxtable .mxt-b { color: var(--c-triad-blue); } .mxtable .mxt-g { color: var(--c-ally); }
.mxtable .mxt-berserker { color: var(--c-fall); } .mxtable .mxt-zealot { color: var(--c-cls-zealot); }
.mxtable .mxt-lucky { color: var(--c-gold); } .mxtable .mxt-loser { color: var(--c-cls-loser); } .mxtable .mxt-loner { color: var(--c-cls-loner); }
.mxtable .cd-r { border-left: 2px solid color-mix(in srgb, var(--c-duel) 13%, transparent); }
.mxtable .cd-b { border-left: 2px solid color-mix(in srgb, var(--c-triad-blue) 13%, transparent); }
.mxtable .cd-p { border-left: 2px solid color-mix(in srgb, var(--c-cls-out-div) 13%, transparent); }
.mxtable tr.gs > * { border-top: 2px solid var(--c-bg-raised); }
.mxtable td .ipoly svg { width: 1.2em; height: 1.2em; }
.mxtable td .ipoly { color: inherit; }
.mxkey { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; font: var(--fs-label) var(--f-mono); }
.mxk { display: inline-flex; align-items: center; gap: 4px; }
.mxk svg { width: 1.3em; height: 1.3em; }
.mxk.pos { color: var(--c-win); } .mxk.neg { color: var(--c-lose); } .mxk.zero { color: var(--c-text-dim); }
.rsec.rnums { padding: 10px 12px; background: var(--c-bg-deep); border: 1px solid var(--c-border); border-radius: 6px; }
.rsec.rnums .rh { color: var(--c-gold); }
.rbox { margin-top: var(--sp-4); padding: 10px 12px; background: var(--c-bg-deep); border: 1px solid var(--c-border); border-radius: 6px; }
.rbox-h { color: var(--c-gold); font-size: var(--fs-small); letter-spacing: .12em; margin-bottom: 8px; }
.rsec .ld + .rbox-h { margin-top: 24px; }
.rcall p { margin: 0; color: var(--c-text-mute); font-size: var(--fs-label); }
.rbox .slots { grid-template-columns: 1fr; gap: 8px; margin-top: 0; }
.rbox .slot, .rbox .slot:hover { padding: 0; background: none; border: 0; border-radius: 0; transform: none; }
/* the accent's text weight, #7e7ebe, reads 4.55:1 or more on every ground, where --c-accent read 3.14:1 */
.rbox .slot .s1 { font: var(--fs-small) var(--f-mono); color: var(--c-accent-text); margin-bottom: 1px; }
.rbox .slot .s2 { font-size: var(--fs-small); margin-top: 0; max-width: none; }
.rnums-key { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 8px 0; align-items: center; font-size: var(--fs-label); line-height: 1.5; color: var(--c-text-body); }
.rnums-key .rnk { color: var(--c-text-label); font-family: var(--f-mono); }
.rnums-key > span:not(.rnk) { text-wrap: pretty; }
.rnums .polyref-cell.pos .prc-g, .rnums .polyref-cell.pos .prc-n { color: var(--c-win); }
.rnums .polyref-cell.neg .prc-g, .rnums .polyref-cell.neg .prc-n { color: var(--c-lose); }
.rnums .polyref-cell.zero .prc-g, .rnums .polyref-cell.zero .prc-n { color: var(--c-text-dim); }
.rnums-foot { margin-top: 6px; font-size: var(--fs-label); font-style: italic; color: var(--c-text-mute); }

.cicon { display: inline-block; width: 44px; height: 44px; flex: 0 0 auto; vertical-align: middle; line-height: 0;
  --icon-blur: calc(.05px * var(--iconk, 1));
  filter: drop-shadow(0 0 var(--icon-blur) var(--haloc, transparent)) drop-shadow(0 0 var(--icon-blur) var(--haloc, transparent))
          drop-shadow(0 0 var(--icon-blur) var(--haloc, transparent)) drop-shadow(0 0 var(--icon-blur) var(--haloc, transparent)); }
.cicon::before { content: ""; display: block; width: 100%; height: 100%;
  -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background: var(--sw, var(--c-text-bright)); }
.fvcard > .cicon { --icon-blur: calc(.10px * var(--iconk, 1)); }
.cicon.sm { width: 34px; height: 34px; }
.cicon.big { width: .82em; height: .82em; }
.icon-saber{--icon-url:url(/icons/saber.png)}
.icon-rapier{--icon-url:url(/icons/rapier.png)}
.icon-lancer{--icon-url:url(/icons/lancer.png)}
.icon-ram{--icon-url:url(/icons/ram.png)}
.icon-archer{--icon-url:url(/icons/archer.png)}
.icon-artillery{--icon-url:url(/icons/artillery.png)}
.icon-rider{--icon-url:url(/icons/rider.png)}
.icon-cavalry{--icon-url:url(/icons/cavalry.png)}
.icon-mage{--icon-url:url(/icons/mage.png)}
.icon-fae{--icon-url:url(/icons/fae.png)}
.icon-assassin{--icon-url:url(/icons/assassin.png)}
.icon-poisoner{--icon-url:url(/icons/poisoner.png)}
.icon-berserker{--icon-url:url(/icons/berserker.png)}
.icon-zealot{--icon-url:url(/icons/zealot.png)}
.icon-lucky{--icon-url:url(/icons/lucky.png)}
.icon-loser{--icon-url:url(/icons/loser.png)}
.icon-loner{--icon-url:url(/icons/loner.png)}

.credits-h { margin-top: 30px; }
.credits-h, .pav-h { letter-spacing: var(--track-cere); text-transform: uppercase; }
.credits { margin-top: 10px; color: var(--c-text-dim); font: var(--fs-label)/1.8 var(--f-serif); max-width: 72ch; }
.credits em { color: var(--c-text-label); font-style: normal; }

.snow { display: block; width: 100%; height: auto; overflow: visible; }
.snowring { fill: none; stroke: var(--c-ring); stroke-width: 1; }
.snowtri { fill: var(--sw); fill-opacity: .55; stroke: var(--haloc, var(--sw)); stroke-width: 1; stroke-opacity: .9; stroke-linejoin: round;
  filter: drop-shadow(0 0 1px var(--haloc, transparent)); }
.snowspine { fill: var(--c-gold); }
.snowdot { fill: var(--sw); stroke: var(--haloc, var(--c-bg-deep)); stroke-width: 1;
  filter: drop-shadow(0 0 1px var(--haloc, transparent)); }
.snowlabel { fill: var(--c-text-label); font-size: 8px; text-anchor: middle; dominant-baseline: middle; }

.mshow { animation: rise 420ms cubic-bezier(.2,.9,.3,1) backwards; }
.mresult { font: 700 var(--fs-lede) var(--f-serif); margin: 18px 0 20px; letter-spacing: var(--track-data); color: var(--c-text-bright); }
.mresult:not(.wield-winner) { text-wrap: balance; }
#madmit { width: fit-content; max-width: 100%; }
.mseats { display: grid; margin-bottom: 26px; }
.mfinish { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2) var(--sp-3); margin: 0 0 26px; }
.mfin-art { flex: 0 0 auto; width: min(100%, clamp(190px, 24vw, 720px)); }
@container mbook (max-width: 26em) { .mfin-art { width: 100%; } }
.mfin-text { flex: 1 1 12em; min-width: 0; }
.mfin-list { margin: 0; padding: 0; list-style: none; max-width: 62ch; }
.mfin-list li { margin: 0 0 4px; text-wrap: pretty; }
.mfin-desk { margin: var(--sp-2) 0 0; color: var(--c-text-dim); font-size: var(--fs-micro); }
.mbook { container: mbook / inline-size; }
.mtop { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.mtop > .mfinish, .mtop > .mseats { margin: 0; }
.mkey { color: var(--c-text-mute); font-size: var(--fs-small); max-width: var(--measure); margin: var(--sp-3) 0; text-wrap: pretty; }
.mcols { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19em), 1fr)); align-items: start; }
@container mbook (min-width: 2400px) { .mtop { grid-template-columns: fit-content(30%) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "text seats" "text flake"; align-items: start; } .mtop > .mfinish { display: contents; } .mtop .mfin-text { grid-area: text; } .mtop .mfin-art { grid-area: flake; contain: size; width: auto; height: 100%; min-height: clamp(190px, 24vw, 720px); aspect-ratio: 1; justify-self: start; } .mtop > .mseats { grid-area: seats; --g16: 4px; } .mcols { grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); } }
.mcols > .mrcol { margin: 0; padding: var(--sp-2); min-width: 0; }
.mfronts { display: flex; flex-direction: column; gap: 6px; }
.mfront { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5em; width: 100%; padding: 6px 10px; margin: 0; background: var(--c-bg-deep); border: 1px solid var(--c-divider); border-radius: var(--r-card); font: var(--fs-small) var(--f-mono); color: var(--c-text-body); text-align: left; cursor: pointer; }
.mfront:hover { border-color: var(--c-text-mute); }
.mfront[aria-expanded="true"] { border-color: var(--c-text-bright); }
.mf-a, .mf-d { white-space: nowrap; }
.mf-x { color: var(--c-text-faint); }
.mf-v { flex-basis: 100%; font-size: var(--fs-micro); color: var(--c-fall); }
.mback .dcard { margin: 0; }
.mrcol .dmath { flex-direction: column; flex-wrap: nowrap; }
.mrcol .dmrow { justify-content: flex-start; }
.mrcol .dmv { margin-left: .6em; }
.mrcol .dmcol { flex: none; }
.mrcol .dmspace { display: none; }
.mrcol details { margin-top: var(--sp-2); font-size: var(--fs-small); }
.mseat { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-2); background: var(--c-bg-panel); border: 1px solid var(--c-border); border-left: 3px solid var(--haloc, var(--c-border-soft)); border-radius: var(--r-card); position: relative; }
.mseat .sw { width: 20px; height: 20px; border-radius: var(--r-tight); flex: 0 0 auto; background: var(--sw); }
.mseat .nm { font: 700 var(--fs-label)/1.1 var(--f-mono); }
/* a link inside a line shows by more than colour: a dotted underline in its shade (WCAG 1.4.1) */
.eg-door > span, .mseat .nm a.lex { text-decoration: underline dotted 1px; text-underline-offset: 3px; }
.mseat .sub { color: var(--c-text-mute); font: var(--fs-micro) var(--f-mono); margin-top: 1px; }
/* a fallen seat's name keeps its colour and halo (information, not a spent control); the strike says fallen, the swatch and border dim */
.mseats .mseat.fallen .sw { opacity: .45; }
.mseats .mseat.fallen { border-color: color-mix(in srgb, var(--c-border) 45%, transparent); border-left-color: color-mix(in srgb, var(--haloc, var(--c-border-soft)) 45%, transparent); }
.mseats .mseat.fallen .nm { text-decoration: line-through; text-decoration-thickness: 1px; }
.mseats .mseat.induel { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sw) 55%, transparent); }
.mseats .mseat { transition: opacity .35s ease, box-shadow .2s ease; }
.mseats .mseat > :not(.mstar) { transition: opacity .35s ease; }
html.still .mseats .mseat, html.still .mseats .mseat > * { transition: none; }

.mctl { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-2); }
.mctl-b { font: var(--fs-micro) var(--f-mono); letter-spacing: var(--track-data); text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-tight); border: 1px solid var(--c-border);
  background: var(--c-bg-panel); color: var(--c-text-body); cursor: pointer; }
.mctl-b:hover { border-color: var(--c-border-soft); }
.mctl-auto { font: var(--fs-micro) var(--f-mono); color: var(--c-text-mute); letter-spacing: var(--track-data); }
.mctl.mctl-paused .mctl-auto { color: var(--c-text-body); }
.mstar { position: absolute; top: 5px; right: 7px; color: var(--c-gold); font-size: var(--fs-micro); }
.mround { margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-3); background: var(--c-bg-panel); border: 1px solid var(--c-border); border-radius: var(--r-door); }
.mrh { font: 700 var(--fs-label) var(--f-mono); color: var(--c-text-bright); margin-top: 0; margin-bottom: var(--sp-2); letter-spacing: var(--track-label); }
.mbadge { font: var(--fs-micro) var(--f-mono); padding: 0 var(--sp-2); border-radius: var(--r-tight); letter-spacing: var(--track-data); }
.mbadge.elim { color: var(--c-danger-soft); border: 1px solid var(--c-danger); }
.mbadge.ult { color: var(--c-gold-vivid); border: 1px solid var(--c-gold-muted); }
.mbadge.fate { color: var(--c-fall); border: 1px solid var(--c-mutual-ring); }
.mbadge .dnum { color: inherit; font: inherit; }
.mfate .mbadge .poly { color: inherit; width: 1.3em; height: 1.3em; }
.mfate { font: 700 var(--fs-label) var(--f-mono); letter-spacing: var(--track-kicker); color: var(--c-fall);
  margin: var(--sp-0) 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.mwatch { margin-top: var(--sp-2); color: var(--c-text-mute); font: var(--fs-micro) var(--f-mono); }
.mutter { margin: var(--sp-2) 0 var(--sp-1); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--haloc, var(--c-gold-muted));
  background: var(--c-bg-deep); border-radius: 0 var(--r-card) var(--r-card) 0; font: italic var(--fs-small)/1.5 var(--f-serif); text-wrap: balance; }
.mutter .mwho { display: block; margin-top: 3px; font: var(--fs-micro) var(--f-mono); color: var(--c-text-mute); letter-spacing: var(--track-label); }
.wield { text-align: center; margin: var(--sp-4) 0 24px; container-type: inline-size; }
/* proto 3336-3346: the row follows the banner's last line; the status is gold italic under it, absent when empty */
.wield > .enter { margin-top: 0; }
.wield > .enter:first-child { margin-bottom: var(--sp-2); }
.wield > .shareres { color: var(--c-gold); font: italic var(--fs-small) var(--f-serif); margin-top: 8px; }
.wield > .shareres:empty { display: none; }
.wield.endgame { margin: 0 0 10px; padding: 14px; background: var(--c-bg-panel); border: 1px solid rgb(200 168 96 / .2); border-radius: var(--r-card); }
.wield-stanza { color: var(--c-text-label); font: var(--fs-label)/1.9 var(--f-mono); letter-spacing: var(--track-wide); text-transform: uppercase; margin: 0 auto 10px; }
.wield-awakens { color: var(--c-gold); font: var(--fs-body) var(--f-display); letter-spacing: var(--track-cere); text-transform: uppercase; margin-bottom: 12px; }
.wield-winner.mresult { font-size: min(var(--fs-hero), 11cqi); letter-spacing: var(--track-cere); margin: 0 0 6px; }
.wield-carries { color: var(--c-gold); font: var(--fs-body) var(--f-serif); letter-spacing: var(--track-wide); text-transform: uppercase; margin-bottom: var(--sp-1); }
/* --c-gold-muted is proto goldMuted's lifted twin; about 3:1, so contrast mode keeps gold-dim */
.wield-ritual { color: var(--c-gold-muted); font-size: var(--fs-small); font-style: italic; font-family: var(--f-serif); margin-bottom: var(--sp-2); }
.wield-dark { color: var(--c-gold-dim); font-family: var(--f-serif); margin-bottom: var(--sp-2); }
.wield-voice { margin: var(--sp-3) auto var(--sp-1); max-width: 46ch; font: var(--fs-body)/1.7 var(--f-mono); }
.wield-step { margin-top: 6px; color: var(--c-text-bright); font-style: italic; font-family: var(--f-serif); }
.eg-carries { color: var(--c-gold-dim); font-size: var(--fs-body); margin-bottom: 10px; }
.eg-own { color: var(--c-text-label); font-size: min(var(--fs-small), max(15px, 4vw)); line-height: 1.35; margin: -4px 0 10px; text-wrap: balance; }
.eg-own a.eg-door { color: inherit; }
.mbase { color: var(--c-text-faint); }
.mflav { flex-basis: 100%; margin-top: var(--sp-0); color: var(--c-text-body); font-family: var(--f-serif); font-style: italic; font-size: var(--fs-label); text-wrap: balance; }

@keyframes cask-clash-L { 0% { transform: translateX(0) scale(1); } 45% { transform: translateX(14px) scale(1.04); } 100% { transform: translateX(0) scale(1); } }
@keyframes cask-clash-R { 0% { transform: translateX(0) scale(1); } 45% { transform: translateX(-14px) scale(1.04); } 100% { transform: translateX(0) scale(1); } }
.fx-clash > *:first-child { animation: cask-clash-L calc(500ms * var(--fx-speed)) cubic-bezier(0.2, 0.8, 0.3, 1); }
.fx-clash > *:last-child { animation: cask-clash-R calc(500ms * var(--fx-speed)) cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes cask-fate-pulse { 0% { opacity: 0; transform: scale(0.98); } 25% { opacity: 1; transform: scale(1.02); } 75% { opacity: 1; transform: scale(1.0); } 100% { opacity: 0; transform: scale(1.0); } }
.fx-fate-pulse { animation: cask-fate-pulse calc(700ms * var(--fx-speed)) ease-out; }
@keyframes cask-coin-spin { 0% { transform: rotate(0deg) scale(1, 1); } 10% { transform: rotate(-80deg) scale(0.3, 1); } 20% { transform: rotate(-160deg) scale(1, 1); } 30% { transform: rotate(-240deg) scale(0.3, 1); } 40% { transform: rotate(-320deg) scale(1, 1); } 48% { transform: rotate(-360deg) scale(1.25, 1.25); } 60% { transform: rotate(-360deg) scale(0.95, 0.95); } 100% { transform: rotate(-360deg) scale(1, 1); } }
@keyframes cask-ult-spin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } }
.fx-ult-spin { display: inline-block; animation: cask-ult-spin calc(700ms * var(--fx-speed)) cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes cask-ult-halo { 0% { opacity: 0; transform: scale(0.9); } 20% { opacity: 1; transform: scale(1.02); } 80% { opacity: 0.6; transform: scale(1.0); } 100% { opacity: 0; transform: scale(1.0); } }
@keyframes cask-shield-glow { 0% { opacity: 0; transform: scale(0.85); } 25% { opacity: 1; transform: scale(1.03); } 60% { opacity: 0.7; transform: scale(1.01); } 100% { opacity: 0; transform: scale(1.0); } }
@keyframes cask-retreat-fade { 0% { opacity: 1; transform: translateY(0); } 40% { opacity: 0.55; transform: translateY(3px); } 100% { opacity: 1; transform: translateY(0); } }
.fx-retreat-fade { animation: cask-retreat-fade calc(500ms * var(--fx-speed)) ease-out; }
@keyframes cask-tie-hold { 0% { opacity: 1; } 30% { opacity: 0.6; } 60% { opacity: 0.85; } 100% { opacity: 1; } }
.fx-tie-hold > * { animation: cask-tie-hold calc(450ms * var(--fx-speed)) ease-in-out; }
@keyframes cask-elim-name { 0% { opacity: 0; letter-spacing: 0.30em; transform: scale(0.94); } 50% { opacity: 0.6; letter-spacing: 0.24em; transform: scale(0.98); } 100% { opacity: 1; letter-spacing: 0.18em; transform: scale(1); } }
@keyframes cask-elim-verdict { 0% { opacity: 0; transform: translateY(-2px); } 100% { opacity: 1; transform: translateY(0); } }
.fx-elim .elim-name { display: inline-block; animation: cask-elim-name calc(1000ms * var(--fx-speed)) ease-out; animation-fill-mode: both; }
.fx-elim .elim-verdict { animation: cask-elim-verdict calc(600ms * var(--fx-speed)) calc(600ms * var(--fx-speed)) ease-out; animation-fill-mode: both; }
@keyframes cask-mutual-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(0.8); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); } }
.fx-mutual-ring { opacity: 0; animation: cask-mutual-ring calc(1400ms * var(--fx-speed)) ease-out; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; border: 2px solid var(--c-mutual-ring); border-radius: 50%; pointer-events: none; }
@keyframes cask-wield-banner { 0% { opacity: 0; transform: scale(0.7); } 70% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cask-wield-fade-up { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes cask-wield-winner { 0% { opacity: 0; transform: scale(0.85); letter-spacing: 0.1em; } 70% { opacity: 1; transform: scale(1.04); letter-spacing: 0.28em; } 100% { opacity: 1; transform: scale(1); letter-spacing: 0.3em; } }
.anim-wield-entrance { animation: cask-wield-banner calc(900ms * var(--fx-speed)) cubic-bezier(0.34, 1.56, 0.64, 1); animation-fill-mode: both; }
.wield-banner { margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-2); border: 2px solid var(--sw, var(--c-gold)); border-radius: var(--r-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sw, var(--c-gold)) 13.3%, transparent) 0%, color-mix(in srgb, var(--sw, var(--c-gold)) 3.1%, transparent) 100%); }
.wield-banner .wb-you { color: var(--c-gold); font: var(--fs-small) var(--f-mono); letter-spacing: var(--track-cere); text-transform: uppercase; margin-bottom: 6px; }
.wield-banner .wb-head { font: 700 min(var(--fs-hero), 10vw)/1.1 var(--f-serif); letter-spacing: var(--track-cere); text-transform: uppercase; margin-bottom: var(--sp-1); }
.wield-banner .wb-sub { color: var(--c-gold); font: var(--fs-body) var(--f-mono); letter-spacing: var(--track-wide); text-transform: uppercase; text-wrap: balance; }
.anim-wield-stanza  { opacity: 0; animation: cask-wield-fade-up calc(900ms * var(--fx-speed)) calc(800ms * var(--fx-speed)) ease-out forwards; }
.anim-wield-awakens { opacity: 0; animation: cask-wield-fade-up calc(900ms * var(--fx-speed)) calc(1400ms * var(--fx-speed)) ease-out forwards; }
.anim-wield-winner  { opacity: 0; animation: cask-wield-winner calc(1000ms * var(--fx-speed)) calc(2000ms * var(--fx-speed)) cubic-bezier(0.2, 0.9, 0.3, 1.05) forwards; }
.anim-wield-carries { opacity: 0; animation: cask-wield-fade-up calc(900ms * var(--fx-speed)) calc(2800ms * var(--fx-speed)) ease-out forwards; }
.anim-wield-ritual  { opacity: 0; animation: cask-wield-fade-up calc(1100ms * var(--fx-speed)) calc(3300ms * var(--fx-speed)) ease-out forwards; }
.anim-wield-voice   { opacity: 0; animation: cask-wield-fade-up calc(1100ms * var(--fx-speed)) calc(3900ms * var(--fx-speed)) ease-out forwards; }
@keyframes cask-round-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.anim-round-pulse { animation: cask-round-pulse calc(900ms * var(--fx-speed)) ease-out; }

.dcard { position: relative; margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); background: var(--c-bg-deep); border: 1px solid var(--c-divider); border-radius: var(--r-card); overflow: hidden; }
.dfaces { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--c-bg-raised); }
.dnames { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dface { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.dface .fname { font: 700 var(--fs-body) var(--f-serif); }
.dface .cicon { width: .95em; height: .95em; }
.dpair { display: contents; }
.dnames.held .dpair { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dvs { color: var(--c-accent-mute); display: inline-flex; }
.dvs .aicon { width: .9em; height: .9em; }
.dtail { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dcomp { display: none; align-items: center; gap: 6px; }
.dcomp em { font-style: normal; color: var(--c-accent-mute); font-size: var(--fs-label); }
.dcomp .dnum { color: var(--c-text-faint); font: var(--fs-label) var(--f-mono); }
.dchev { font-size: var(--fs-label); margin-left: 2px; }
.dfaces.chev { cursor: pointer; }
.dcard.collapsed > .dfaces { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.dcard.collapsed > .dfaces .dcomp { display: flex; }
.dcard.collapsed > .dbody { display: none; }
.elim-name { font: 700 var(--fs-small) var(--f-serif); letter-spacing: var(--track-wide); text-transform: uppercase; }
.elim-verdict { font: var(--fs-micro) var(--f-mono); font-size: min(var(--fs-micro), calc(100cqi / 7.6)); color: var(--c-danger-soft); letter-spacing: var(--track-kicker); text-transform: uppercase; margin-top: var(--sp-0); }
.poly, .cb { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.yc-dmx .cb, .intro .meta .cb, .smx .cb { width: 1.05em; height: 1.05em; }
.ymx .cb { width: 1em; height: 1em; }
.ymx-row { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 2px; font: var(--fs-label) var(--f-mono); }
.ymx-mk { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 3.2em; }
.ymx-names { --bal-x: 6px; --bal-y: 2px; margin-bottom: -2px; min-width: 0; flex: 1 1 auto; }
.ymx-row.mx .cb { color: inherit; }
.ymx-row .dnum { font-weight: bold; }
.ymx-cls { display: inline-flex; align-items: center; gap: 2px; }
.ymx-cls .cicon { width: .95em; height: .95em; }
.ymx-cls .cicon::before { background: currentColor; }
.ultcarried { margin: 5px auto var(--sp-0); padding: var(--sp-1) var(--sp-2); max-width: 40ch; text-align: center;
  border: 1px dashed var(--c-gold-muted); border-radius: var(--r-card); font: var(--fs-micro) var(--f-mono);
  color: var(--c-text-mute); font-style: italic; animation: cask-ult-pulse-carried calc(550ms * var(--fx-speed)) ease-out; }
@keyframes cask-ult-pulse-carried { 0% { opacity: 0; transform: scale(0.97); } 30% { opacity: .85; transform: scale(1.01); } 70% { opacity: .5; transform: scale(1.0); } 100% { opacity: 0; transform: scale(1.0); } }

.dgroup { margin: var(--sp-2) 0; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--r-door); background: var(--c-bg-panel); }
.dgroup-h { font: 700 var(--fs-label) var(--f-mono); padding: var(--sp-1) var(--sp-1) var(--sp-1); text-wrap: balance; }
.dgroup .dcard { margin: 6px 0; }
.poly.pos { color: var(--c-ally); } .poly.neg { color: var(--c-danger-soft); } .poly.zero { color: var(--c-text-dim); }
.cb.pos { color: var(--c-ally); } .cb.neg { color: var(--c-danger-soft); } .cb.zero { color: var(--c-text-dim); }

.yc-elim { color: var(--c-accent); font-size: var(--fs-small); font-style: italic; margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--c-bg-raised); }
.wfb { margin-top: 4px; padding: 4px 6px; background: var(--c-bg-deep); border: 1px solid var(--c-bg-raised); border-radius: 3px; }
.wfb-hdr { font-size: var(--fs-label); color: var(--c-text-dim); letter-spacing: var(--track-label); margin-bottom: 2px; }
.wfb-line { font-size: var(--fs-small); }
.wfb-tip { color: var(--c-gold); font-style: italic; font-size: var(--fs-label); margin-top: var(--sp-0); }

.mx.pos { color: var(--c-ally); }
.mx.neg { color: var(--c-danger-soft); }
.mx.pos-dim { color: var(--c-val-dim-pos); }
.mx.neg-dim { color: var(--c-val-dim-neg); }
.mx.zero { color: var(--c-text-dim); }
span.mx .cb, span.mx .poly { color: inherit; }
.mx .dnum { color: inherit; }

.ticon { display: inline-block; width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle;
  -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; background: var(--c-gold); }
svg.aicon { font-size: var(--fs-body); width: .95em; height: .95em; vertical-align: -0.12em; }
/* an action icon reads by its rim; the mask sits on ::before so the rim falls outside it */
.aicon { filter: drop-shadow(1px 0 0 var(--haloc, transparent)) drop-shadow(-1px 0 0 var(--haloc, transparent))
                 drop-shadow(0 1px 0 var(--haloc, transparent)) drop-shadow(0 -1px 0 var(--haloc, transparent)); }
.aicon.masked { display: inline-block; font-size: var(--fs-body); width: .95em; height: .95em; vertical-align: -0.12em; }
.aicon.masked::before { content: ""; display: block; width: 100%; height: 100%;
  -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background: currentColor; }
.icon-a-ally{--icon-url:url(/icons/ally.png)}
.icon-a-betray{--icon-url:url(/icons/betray.png)}
.icon-t-ult{--icon-url:url(/icons/ult.png)} .icon-t-recharge{--icon-url:url(/icons/recharge.png)}
.icon-t-random{--icon-url:url(/icons/random.png)}
.icon-t-auto{--icon-url:url(/icons/auto.png)} .icon-t-watch{--icon-url:url(/icons/watch.png)}
.icon-t-fall{--icon-url:url(/icons/fall.png)} .icon-t-shield{--icon-url:url(/icons/shield.png)}
.icon-t-fate-smile{--icon-url:url(/icons/fate-smile.png)} .icon-t-fate-neutral{--icon-url:url(/icons/fate-neutral.png)} .icon-t-fate-frown{--icon-url:url(/icons/fate-frown.png)}

/* visibility pairs with opacity; the html.nojs and scripting: none rules must move with it */
.beat { opacity: 0; visibility: hidden; transition: opacity calc(400ms * var(--fx-speed)) ease-out; }
.beat.on { opacity: 1; visibility: visible; }
html.still .beat { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.nojs *, html.nojs *::before, html.nojs *::after {
    animation-delay: -1ms !important; animation-duration: 1ms !important;
    animation-iteration-count: 1 !important; transition: none !important; }
}

html.nojs .beat { opacity: 1; visibility: visible; }
html.nojs #boot { display: none; }
html.founded #boot { display: none; }

.nojs-essence { max-width: 720px; margin: 10vh auto; padding: 0 var(--sp-3); color: var(--c-text-body); }
.nojs-essence h1 { font: 700 1.4rem var(--f-serif); color: var(--c-text-bright); margin-bottom: var(--sp-2); }
.nojs-essence p { line-height: 1.6; margin-bottom: var(--sp-2); }
.nojs-essence ul { padding-left: 1.25em; margin-bottom: var(--sp-2); }
.nojs-essence a { color: var(--c-gold); }

@media (scripting: none) { .beat { opacity: 1; visibility: visible; } }

.abhorblock { margin-top: var(--sp-1); padding: 6px 10px; background: var(--c-bg-gold);
  border: 1px solid color-mix(in srgb, var(--c-gold) 20%, transparent); border-radius: var(--r-tight);
  font-size: var(--fs-small); line-height: 1.6; overflow-wrap: anywhere; container-type: inline-size; }
.abhorblock .desc { color: var(--c-text-body); font-style: italic; }
.abhor-voice { margin-top: 3px; color: var(--c-gold); font-weight: 700; letter-spacing: var(--track-data); font-size: min(1em, 10cqi); text-wrap: balance; }

.fcoin2 { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em;
  border-radius: 50%; border: 1.5px solid currentColor; font-family: var(--f-mono); font-weight: 700;
  line-height: 1; flex: 0 0 auto; vertical-align: middle; transform-origin: center; }
.fcoin2::before { font-size: .66em; }
.fcoin2[data-sign="1"]::before { content: "+"; }
.fcoin2[data-sign="-1"]::before { content: "-"; }
.fcoin2[data-sign="0"]::before { content: "\00B7"; }
.fcoin2.pos { color: var(--c-ally); } .fcoin2.neg { color: var(--c-danger-soft); } .fcoin2.zero { color: var(--c-text-faint); }
.beat.on .fcoin2 { animation: cask-coin-spin calc(800ms * var(--fx-speed)) cubic-bezier(0.3, 0.1, 0.3, 1); }
html.still .beat.on .fcoin2 { animation: none; }

.ultblock { margin-top: var(--sp-1); padding: var(--sp-2) 10px; text-align: center; position: relative; overflow: visible;
  background: color-mix(in srgb, var(--sw) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--sw) 33%, transparent); border-radius: var(--r-tight); }
.ultblock .ult-title { font-size: var(--fs-body); font-weight: 700; line-height: 1.25;
  letter-spacing: var(--track-data); overflow-wrap: anywhere; }
.ultblock .ult-cls { margin-top: 3px; font-size: var(--fs-small); }
.ultblock .ult-burst { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: 5px; }
.ultblock .ult-boost { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: var(--sp-1); }
.ult-boost .poly { width: 1.2em; height: 1.2em; }
.ultcarried .ult-boost { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-1); vertical-align: middle; }
.ultblock .ult-invocation { margin-top: var(--sp-2); padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--sw) 33%, transparent);
  font-family: var(--f-mono); font-size: var(--fs-small); line-height: 1.4;
  overflow-wrap: break-word; text-wrap: balance; }
.ultblock .ult-who { margin-top: 3px; font-size: var(--fs-label); line-height: 1.3; font-weight: 700; text-wrap: balance; }
.ultblock .ult-who .ult-epithet { color: var(--c-text-mute); font-style: italic; font-weight: 400; }
.beat.on.ultblock .cicon { animation: cask-ult-spin calc(700ms * var(--fx-speed)) cubic-bezier(0.4, 0, 0.2, 1); }
html.still .beat.on.ultblock .cicon { animation: none; }
.ultblock.ultagain { background: color-mix(in srgb, var(--sw) 4%, transparent); border-color: color-mix(in srgb, var(--sw) 20%, transparent); }
.beat.on.ultblock.ultagain .cicon { animation: none; }
.ultblock.ultagain .ult-burst > [class^="uspin-"] { opacity: 0.8; }
.ultblock .ult-burst .cicon { width: 1.6em; height: 1.6em; }
.ultblock .ult-burst .ticon { width: 1.1em; height: 1.1em; }
.ultblock.ultagain .ult-burst .cicon { width: 1.3em; height: 1.3em; }
.ultblock.ultagain .ult-burst .ticon { width: 0.9em; height: 0.9em; }
.beat.on.ultblock { animation: cask-ult-halo calc(800ms * var(--fx-speed)) ease-out; }
@keyframes cask-ult-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } }
.beat.on.ultblock:not(.ultagain)::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
  border-radius: 6px; border: 2px solid var(--sw); pointer-events: none; opacity: 0;
  animation: cask-ult-ring calc(700ms * var(--fx-speed)) ease-out; }
html.still .beat.on.ultblock, html.still .beat.on.ultblock::after { animation: none; }

.beat.ultcarried { animation: none; }
.beat.on.ultblock.ultagain, .beat.on.ultcarried { animation: cask-ult-pulse-carried calc(550ms * var(--fx-speed)) ease-out; }

.shieldblock { margin-top: var(--sp-1); padding: 6px 10px; position: relative; background: var(--c-bg-gold);
  border: 1px solid color-mix(in srgb, var(--c-gold) 33%, transparent); border-radius: var(--r-tight);
  font-size: var(--fs-small); }
.notyet-line { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.notyet-line .ny-label { color: var(--c-gold); font-weight: 700; }
.notyet-line .ny-holds { color: var(--c-text-body); font-style: italic; }
.notyet-line .poly { width: 1.2em; height: 1.2em; }
.beat.on .shieldblock { animation: cask-shield-glow calc(700ms * var(--fx-speed)) ease-out; }
html.still .beat.on .shieldblock { animation: none; }

.clashpanel { display: flex; gap: var(--sp-1); padding: 6px; margin-top: 6px; background: var(--c-bg-deep); container-type: inline-size;
  border: 1px solid var(--c-bg-raised); border-radius: var(--r-tight); }
.clash-side { flex: 1; min-width: 0; text-align: center; }
.clash-side .clash-name { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; justify-content: center; gap: var(--sp-1); font-size: min(var(--fs-small), 8.5cqi); }
.clash-side .clash-name .cicon { width: 1.1em; height: 1.1em; }
.clash-side .clash-val { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); margin-top: var(--sp-1); }
.clash-val.pos { color: var(--c-win); } .clash-val.neg { color: var(--c-lose); } .clash-val.zero { color: var(--c-text-dim); }
.clash-val .poly { color: inherit; }
.clash-val .dnum { color: inherit; font: 700 var(--fs-body) var(--f-mono); }
.clash-vs { align-self: center; color: var(--c-accent-mute); font-size: var(--fs-body); font-style: italic; }

.nonfocal-fall { margin-top: 6px; padding: 10px var(--sp-2); text-align: center; position: relative; container-type: inline-size;
  background: var(--c-bg-elim); border-radius: var(--r-card);
  border: 1px solid color-mix(in srgb, var(--sw) 44%, transparent); }
.nonfocal-fall .nf-dyad { color: var(--c-dyad-burn); font-size: var(--fs-label); font-style: italic; }

.dnum { font-family: var(--f-mono); color: var(--c-text-faint); font-size: var(--fs-label); }
.dnum.fatenum { margin-left: 3px; }
.fatev { display: inline-flex; align-items: center; vertical-align: middle; }
.fatev.pos { color: var(--c-val-dim-pos); } .fatev.neg { color: var(--c-val-dim-neg); } .fatev.zero { color: var(--c-text-dim); }
.fatev .ticon { background: currentColor; } .fatev .dnum { color: inherit; font-weight: bold; }
.sface .fatev.zero { color: var(--c-text-label); }
.yfate-own .fatev.zero { color: var(--c-accent); }

.prosepage { --fs-prose: clamp(1.0625rem, 1rem + 0.35vw, 1.625rem);
  display: grid; grid-template-columns: minmax(180px, max(230px, 13.2 * var(--fs-label) + 24px)) minmax(0, 1fr);
  gap: var(--sp-5); align-items: start; margin-top: var(--sp-4); }
.prosemain { min-width: 0; }
.prosemain .ld { font-size: var(--fs-prose); }
.prosemain .ld > ul { margin: var(--sp-1) 0; padding-left: 1.25em; }
/* the policy's measure is set in em, near 75 characters at every width: 34em gives a mean of 72 a line, 90% at 78 or under (measured on /guardians) */
.prosemain :is(p, li, dd, .ld) { max-width: 34em; }
.yesnote { max-width: 34em; line-height: 1.7; font-size: var(--fs-body); }
.yesnote .ld { font-size: var(--fs-prose); }
.entry-notice { max-width: 34em; margin-inline: auto; text-align: center; }
.entry-notice .ld { margin-inline: auto; }
.door-doors { justify-content: center; }
.acct label.terms-agree input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--c-gold); }
.acct label.terms-agree { flex-direction: row; align-items: center; gap: var(--sp-2); min-height: var(--tap); font: var(--fs-body) var(--f-serif); letter-spacing: normal; text-transform: none; color: var(--c-text-body); }
button.navmake, button.pav-door { background: none; cursor: pointer; }
button.navmake { min-height: var(--tap); }
.entry-h { font: 700 var(--fs-title)/1.15 var(--f-display); color: var(--c-gold); margin: var(--sp-5) 0 var(--sp-2); text-wrap: balance; }
.door-doors .equip-opt { min-height: var(--tap); }
.tverse.door-poem, .song.door-poem .verse, .song.door-poem .verse:first-of-type { font: 400 var(--fs-body)/1.7 var(--f-serif); letter-spacing: normal; }
.song.door-poem .verse:first-of-type { color: var(--c-text-body); }
html[data-door="0"] #doorstatic { display: none; }
html:not([data-door="0"]) #nav .fcol:not(:last-child), html:not([data-door="0"]) #nav [data-v="pavilion"], html:not([data-door="0"]) #theday, html:not([data-door="0"]) #versedoor { display: none; }
.door-doors .equip-opt { font-size: var(--fs-body); }
.door-bands-h { text-align: center; }
.prose-h { font: 700 var(--fs-lede)/1.2 var(--f-display); color: var(--c-gold);
  letter-spacing: var(--track-label); text-transform: uppercase;
  margin-top: var(--sp-5); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border);
  scroll-margin-top: 76px; text-wrap: balance; }
.proserail { position: sticky; top: 64px;
  display: flex; flex-direction: column; gap: var(--sp-0);
  border-right: 1px solid var(--c-divider); padding-right: var(--sp-3); }
.proserail a { display: flex; align-items: center; min-height: var(--tap);
  padding: var(--sp-0) var(--sp-1); border-radius: var(--r-tight);
  font: var(--fs-label)/1.35 var(--f-serif); color: var(--c-text-mute); text-wrap: balance; }
.proserail a:hover { color: var(--c-gold); }
@media (max-width: 900px) {
  .prosepage { display: block; }
  .proserail { position: static; border-right: 0; padding-right: 0;
    border-bottom: 1px solid var(--c-divider); padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); }
}

/* >>> generated:shades - from the workbook's Shades sheet by scripts/generate.mjs. DO NOT EDIT BY HAND; the Shades sheet is the one source. <<< */
:root{
  --shade-white:#ffffff;
  --shade-grey:#d9d9d9;
  --shade-red:#cc0000;
  --shade-pink:#e06666;
  --shade-orange:#e69138;
  --shade-ginger:#f6b26b;
  --shade-yellow:#f1c232;
  --shade-lemon:#ffd966;
  --shade-green:#6aa84f;
  --shade-sage:#93c47d;
  --shade-blue:#3c78d8;
  --shade-sky:#6d9eeb;
  --shade-purple:#674ea7;
  --shade-lavender:#8e7cc3;
  --shade-black:#000000;
  --shade-shadow:#b7b7b7;
  --halo-white:#b7b7b7;
  --halo-grey:#ffffff;
  --halo-red:#e06666;
  --halo-pink:#cc0000;
  --halo-orange:#f6b26b;
  --halo-ginger:#e69138;
  --halo-yellow:#ffd966;
  --halo-lemon:#f1c232;
  --halo-green:#93c47d;
  --halo-sage:#6aa84f;
  --halo-blue:#6d9eeb;
  --halo-sky:#3c78d8;
  --halo-purple:#8e7cc3;
  --halo-lavender:#674ea7;
  --halo-black:#b7b7b7;
  --halo-shadow:#000000;
  --anchor-white:#000000;
  --anchor-grey:#ffffff;
  --anchor-red:#ffffff;
  --anchor-pink:#000000;
  --anchor-orange:#ffffff;
  --anchor-ginger:#000000;
  --anchor-yellow:#000000;
  --anchor-lemon:#000000;
  --anchor-green:#ffffff;
  --anchor-sage:#000000;
  --anchor-blue:#ffffff;
  --anchor-sky:#000000;
  --anchor-purple:#ffffff;
  --anchor-lavender:#000000;
  --anchor-black:#ffffff;
  --anchor-shadow:#000000;
}
/* a node names only WHICH shade it is (class shade-<name>); the rules below turn it into color.
   Every shade renders its own hex inside its resonant outline (proto OUTLINE_RESONANT), word, edge and icon alike, the same for all sixteen.
   --iconk is the proto's icon blur factor (ICON_BLUR_BLACK); a shade without one blurs at 1. */
.shade-white{--sw:var(--shade-white);--shadec:var(--shade-white);--haloc:var(--halo-white);--anchorc:var(--anchor-white);--tileink:#000000;--tilerim:#ffffff}
.shade-grey{--sw:var(--shade-grey);--shadec:var(--shade-grey);--haloc:var(--halo-grey);--anchorc:var(--anchor-grey);--tileink:#000000;--tilerim:#ffffff}
.shade-red{--sw:var(--shade-red);--shadec:var(--shade-red);--haloc:var(--halo-red);--anchorc:var(--anchor-red);--tileink:#ffffff;--tilerim:#000000}
.shade-pink{--sw:var(--shade-pink);--shadec:var(--shade-pink);--haloc:var(--halo-pink);--anchorc:var(--anchor-pink);--tileink:#ffffff;--tilerim:#000000}
.shade-orange{--sw:var(--shade-orange);--shadec:var(--shade-orange);--haloc:var(--halo-orange);--anchorc:var(--anchor-orange);--tileink:#000000;--tilerim:#ffffff}
.shade-ginger{--sw:var(--shade-ginger);--shadec:var(--shade-ginger);--haloc:var(--halo-ginger);--anchorc:var(--anchor-ginger);--tileink:#000000;--tilerim:#ffffff}
.shade-yellow{--sw:var(--shade-yellow);--shadec:var(--shade-yellow);--haloc:var(--halo-yellow);--anchorc:var(--anchor-yellow);--tileink:#000000;--tilerim:#ffffff}
.shade-lemon{--sw:var(--shade-lemon);--shadec:var(--shade-lemon);--haloc:var(--halo-lemon);--anchorc:var(--anchor-lemon);--tileink:#000000;--tilerim:#ffffff}
.shade-green{--sw:var(--shade-green);--shadec:var(--shade-green);--haloc:var(--halo-green);--anchorc:var(--anchor-green);--tileink:#ffffff;--tilerim:#000000}
.shade-sage{--sw:var(--shade-sage);--shadec:var(--shade-sage);--haloc:var(--halo-sage);--anchorc:var(--anchor-sage);--tileink:#000000;--tilerim:#ffffff}
.shade-blue{--sw:var(--shade-blue);--shadec:var(--shade-blue);--haloc:var(--halo-blue);--anchorc:var(--anchor-blue);--tileink:#ffffff;--tilerim:#000000}
.shade-sky{--sw:var(--shade-sky);--shadec:var(--shade-sky);--haloc:var(--halo-sky);--anchorc:var(--anchor-sky);--tileink:#000000;--tilerim:#ffffff}
.shade-purple{--sw:var(--shade-purple);--shadec:var(--shade-purple);--haloc:var(--halo-purple);--anchorc:var(--anchor-purple);--tileink:#ffffff;--tilerim:#000000}
.shade-lavender{--sw:var(--shade-lavender);--shadec:var(--shade-lavender);--haloc:var(--halo-lavender);--anchorc:var(--anchor-lavender);--tileink:#ffffff;--tilerim:#000000}
.shade-black{--sw:var(--shade-black);--shadec:var(--shade-black);--haloc:var(--halo-black);--anchorc:var(--anchor-black);--tileink:#ffffff;--tilerim:#000000;--iconk:4}
.shade-shadow{--sw:var(--shade-shadow);--shadec:var(--shade-shadow);--haloc:var(--halo-shadow);--anchorc:var(--anchor-shadow);--tileink:#000000;--tilerim:#ffffff}
/* >>> end:shades <<< */

.mcol { position: relative; }
.songov { position: absolute; inset: 0; z-index: 3; overflow-y: auto; overscroll-behavior: contain;
  background: var(--c-bg-panel); border: 1px solid var(--c-border); border-radius: var(--r-card);
  padding: var(--sp-4); box-shadow: 0 18px 48px -24px rgba(0,0,0,.75); }
.songov .song { margin: 0; }
.tverse-ov { max-width: none; margin: 0; display: flex; flex-direction: column;
  justify-content: center; min-height: 100%; }
@media (width > 640px) {
  .menu-a4:has(.songov:not(.shut)) .mcol { position: static; }
  .songov:not(.shut) { inset: 0 0 auto 0; overflow-y: visible; scroll-margin-top: calc(var(--hdr-h) + var(--sp-2)); }
  .songov:not(.shut) .tverse-ov { width: fit-content; margin-inline: auto;
    min-height: 0; justify-content: flex-start; }
}
@media (width > 640px) {
  .menu-a4 { position: relative; }
  .menu-a4:has(.songov:not(.shut))::before { content: ""; position: absolute; inset: 0; z-index: 2;
    background: var(--c-scrim); pointer-events: none;
    border-radius: var(--r-door); }
}
@media (width <= 640px) {
  .songov:not(.shut) { position: relative; overflow-y: visible; display: flex; flex-direction: column; }
  .songov:not(.shut) .songov-x { position: static; order: 1; align-self: flex-end; }
  .songov:not(.shut) .tverse-ov { min-height: 0; justify-content: flex-start; }
  /* fixed holds to the viewport: no ancestor may set transform, filter, backdrop-filter, contain or will-change */
  .songov.atdoor:not(.shut) { position: fixed; left: var(--sp-3); right: var(--sp-3); top: auto;
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); z-index: 40;
    max-height: min(70vh, 70dvh); overflow-y: auto; }
}
.songov-x { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 1;
  background: transparent; border: 1px solid var(--c-border); border-radius: var(--r-tight); cursor: pointer;
  color: var(--c-text-mute); font: var(--fs-micro)/1 var(--f-display); letter-spacing: var(--track-label);
  text-transform: uppercase; padding: var(--sp-2) var(--sp-3); min-height: var(--tap); }
.songov-x:hover { color: var(--c-text-bright); border-color: var(--c-gold-muted); }
.songov.shut { display: none; }

.markref { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3); margin: var(--sp-3) 0; }
@media (width <= 640px) { .markref { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); } }
.markref-cell { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: var(--sp-3); align-items: center; align-content: start;
  background: var(--g-panel);
  border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-3); }
.mrc-g { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--c-text-bright); }
.mrc-n { font: 700 var(--fs-label) var(--f-mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--c-text-bright); }
.mrc-d { font: var(--fs-small)/1.4 var(--f-serif); color: var(--c-text-mute); text-wrap: pretty; }

.rpager.turned { min-height: 100vh; }
.rtabs { display: flex; flex-wrap: wrap; gap: 3px; margin: 24px 0 10px; }
.rtab { font: var(--fs-label) var(--f-mono); letter-spacing: var(--track-data); padding: 3px 7px; min-height: var(--tap); border-radius: var(--r-card); cursor: pointer;
  background: transparent; border: 1px solid var(--c-bg-raised); color: var(--c-text-faint); }
.rtab[aria-current="page"] { background: var(--c-active-bg); border-color: var(--c-accent); color: var(--c-active-text); }
.rnav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(12px, 1.2vw, 32px); margin: 24px 0 var(--sp-1); }
.rnav-b { font: clamp(1rem, 0.72rem + 0.5vw, 1.9rem) var(--f-mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--c-gold); background: transparent;
  border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 0.55em 1em;
  min-height: var(--tap); cursor: pointer; }
/* the gold hover, one rule (dry-sweep-site.md C3), at the last one's place: no rule after any of these ties it */
.navmake:hover,
.wc-choice:hover,
.pav-door:hover, .pav-door:focus-visible,
.rnav-b:hover:not(:disabled) { border-color: var(--c-gold); color: var(--c-gold-vivid); }
.rnav-ct { font: clamp(1rem, 0.72rem + 0.5vw, 1.9rem) var(--f-mono); letter-spacing: var(--track-label);
  color: var(--c-text-mute); text-align: center; text-wrap: balance; }
@media (max-width: 560px) {
  .rnav-ct { grid-column: 1 / -1; grid-row: 1; }
  .rnav-b { grid-row: 2; }
  .rnav-b:last-child { grid-column: 3; }
}
.rsub { color: var(--c-text-mute); }

.fmark { font: var(--fs-micro)/1 var(--f-mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--c-gold); }

.calgrid { display: grid; margin: var(--sp-4) 0; }
.calrow { display: grid; grid-template-columns: 1fr; gap: var(--sp-2);
  align-content: start; padding: var(--sp-3);
  background: var(--g-panel);
  border: 1px solid var(--c-border); border-radius: var(--r-card); }
.calrow.now { border-color: var(--c-gold-muted); }
.cal-d { font: 700 var(--fs-label) var(--f-mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--c-text-label); }
.calrow.now .cal-d { color: var(--c-text-bright); }
.cal-c { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.seatgrid.cast { --seat-gap: var(--sp-3); }
@media (min-width: 990px) { .seatgrid.cast { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.seatgrid.cast .seat { flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; gap: 1px; min-height: 72px; padding: calc(1.05em + 10px) 6px 4px 7px; background: var(--c-bg-deep); border-radius: 5px; }
.seatgrid.cast .seat { padding-bottom: calc(var(--fs-micro) * 1.3 + 10px); }
.seatgrid.cast .seat .nm { font: 700 var(--fs-body)/1.1 var(--f-serif); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 0; box-sizing: border-box; }
/* a name never truncates where its card has room (ruling 56): a name of 7+ letters steps down to fit its card; the ellipsis stays the floor */
.seatgrid.cast .seat { container-type: inline-size; }
@container (max-width: 170px) { .seatgrid.cast .tapprev { letter-spacing: 0; } }
.seatgrid.cast .seat .nm.long { font-size: min(var(--fs-body), 19cqi); }
.seatgrid.cast .seat .pnm { font: italic var(--fs-label)/1.15 var(--f-serif); max-width: 100%;
  overflow-wrap: break-word; min-width: 0; }
.seatgrid.cast .seat .pcls { font: 700 var(--fs-small)/1.1 var(--f-serif); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.seatgrid.cast .seat .pcls.unknown { color: var(--c-text-dim); }
.seatgrid.cast .seat .srow { display: flex; justify-content: center; align-items: center; gap: var(--sp-1);
  min-height: 1.3em; min-width: 0; font-size: var(--fs-small); }
.seatgrid.cast .seat .srow .dnum { font-size: inherit; }
.seatgrid.cast .seat .srow.kills { min-height: 0; }
.seatgrid.cast .seat .kstrip { margin-left: 0; font-size: min(1em, 14cqi); }
.seatgrid.cast .seat .sbadge { display: flex; justify-content: space-between; align-items: center; width: 100%;
  gap: 3px; min-height: 1.1em; margin-top: var(--sp-0); }
.seatgrid.cast .seat .sbadge .sb-gap { width: 1px; }
.seatgrid.cast .seat .sbadge .hchip, .seatgrid.cast .seat .sbadge .dchip,
.seatgrid.cast .seat .sbadge .sface { margin-left: 0; }
.seatgrid.cast .seat .sub.last { color: var(--c-text-label); font-family: var(--f-mono); }
.seatgrid.cast .seat { border-style: solid; border-left: 3px solid var(--haloc, var(--c-border-soft)); }
.seatgrid.cast .seat:not(.me):not([class*=" picked-"]):not([class*=" wt-"]) { border-color: var(--haloc, var(--c-border)); }
.seatgrid.cast .seat.me { border-width: 2px 2px 2px 3px; }
.seatgrid.cast .seat .sub.last { width: 100%; padding-top: 3px; border-top: 1px solid var(--c-bg-raised);
  display: flex; flex-direction: column; gap: 2px; text-align: left; }
.seatgrid.cast .seat .lr-h { color: var(--c-text-dim); font-size: min(var(--fs-label), 15cqi); white-space: nowrap; }
.seatgrid.cast .seat .sub.last { margin-top: auto; min-height: calc(var(--fs-label) * 1.3 + var(--fs-micro) * 4.2 + 10px); }
.seatgrid.cast:has(.pnm) .seat:not(:has(.pnm)) .pcls { margin-top: calc(var(--fs-label) * 1.15); }
.seatgrid.cast .seat .lr-row { display: flex; align-items: center; gap: 4px; }
.seatgrid.cast .seat .lr-row .cicon, .seatgrid.cast .seat .lr-row .kmark { width: .95em; height: .95em; }
.seatgrid.cast .seat .syou { margin-top: 4px; color: var(--c-gold); font-size: var(--fs-label); }

/* must stay last: earlier equal-specificity min-heights would win */
@media (width <= 640px), (pointer: coarse) {
  .fnav a { min-height: var(--tap); display: flex; align-items: center; }
  .fnav .fcol { gap: var(--sp-1); }
  .tgt, .go, .pas-opt, .equip-opt,
  .gh-chip, .nxp-nav, .mbtn, .shade-opt, .navmake, .lonelink,
  .rlog-tog, #theday a, footer .versedoor {
    min-height: var(--tap); }
  .tgt, .go, .pas-opt, .equip-opt,
  .gh-chip, .nxp-nav, #theday a, footer .versedoor {
    display: inline-flex; align-items: center; justify-content: center; }
  .pas-opt[data-pas] { display: grid; align-content: start; }
  .pas-opt[data-queue] { flex-direction: column; }
  #rung { grid-column: 3; }
}
/* while a note stands the footer is hidden, so nothing seen moves when the body lands (a 0.94 layout shift) */
body:has(#view > .note.opening) .foot { visibility: hidden; }