@font-face { font-family: Inter; src: url('/assets/fonts/inter-400-900.woff2') format('woff2'); font-style: normal; font-weight: 400 900; font-display: swap; }
@font-face { font-family: Cinzel; src: url('/assets/fonts/cinzel-400-900.woff2') format('woff2'); font-style: normal; font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/barlow-700.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/barlow-800.woff2') format('woff2'); font-style: normal; font-weight: 800; font-display: swap; }

:root {
  color-scheme: dark;
  --canvas: oklch(17% .018 300);
  --bg: var(--canvas);
  --layer: oklch(22% .022 290);
  --raised: oklch(27% .025 289);
  --line: oklch(43% .038 286);
  --subtle-line: oklch(34% .027 285);
  --ink: oklch(95% .021 83);
  --dim: oklch(77% .025 285);
  --ember: oklch(77% .126 46);
  --ice: oklch(80% .052 191);
  --brass: var(--ember);
  --brass-hover: oklch(85% .101 52);
  --button-ink: oklch(19% .036 31);
  --rust: oklch(75% .137 24);
  --rust-fill: oklch(28% .071 21);
  --green: var(--ice);
  --paper: oklch(91% .038 81);
  --paper-ink: oklch(25% .045 35);
  --paper-dim: oklch(38% .065 37);
  --focus: oklch(89% .079 192);
  --font-display: Cinzel, Georgia, serif;
  --font-ui: Inter, 'Segoe UI', system-ui, sans-serif;
  --font-score: 'Barlow Condensed', 'Bahnschrift Condensed', var(--font-ui);
  --display: var(--font-display);
  --body: var(--font-ui);
  --ease: cubic-bezier(.17, .84, .25, 1);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.5 var(--body); }
body[data-text="large"] { font-size: 1.125rem; }
body[data-text="large"] .detail { font-size: 1.2rem; }
body[data-text="large"] .caption, body[data-text="large"] .player-meta, body[data-text="large"] .mini-label { font-size: .92rem; }
body[data-text="large"] .btn, body[data-text="large"] .field, body[data-text="large"] .check { font-size: 1rem; }
body[data-contrast="true"] { --dim: var(--ink); --line: oklch(63% .056 67); --subtle-line: var(--line); --raised: oklch(21% .019 25); --rust: oklch(83% .12 36); }
body[data-motion="true"] *, body[data-motion="true"] *::before, body[data-motion="true"] *::after { animation-duration: .001s !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
button, input, select, textarea { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button, summary { cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
a { color: var(--brass); text-underline-offset: .22em; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
#main:focus { outline: 0; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; display: block; }
.sr-only { position: absolute; overflow: hidden; clip-path: inset(50%); width: 1px; height: 1px; white-space: nowrap; }
.skip { position: fixed; z-index: 12; top: .5rem; left: .5rem; padding: 1rem; background: var(--brass); color: var(--button-ink); transform: translateY(-160%); }
.skip:focus-visible { transform: none; }
.site-head { border-bottom: 1px solid var(--subtle-line); background: var(--bg); }
.head-inner, .site-footer { max-width: 95rem; margin: auto; padding-inline: clamp(1rem, 4vw, 4rem); }
.head-inner { min-height: 4.65rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.head-nav { display: flex; align-items: center; gap: clamp(.2rem, 2vw, 1.6rem); }
.head-nav a { min-height: 3rem; display: inline-flex; align-items: center; padding-inline: .48rem; color: var(--dim); font-size: .88rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.head-nav a:hover, .head-nav a[aria-current="page"] { color: var(--ink); }
.wordmark { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); font: 700 2.15rem/.9 var(--display); letter-spacing: -.09em; }
.wordmark img { width: 1.8rem; height: 1.8rem; }
.wordmark-dot { color: var(--brass); }
.icon { display: inline-block; width: 1.15rem; height: 1.15rem; flex: none; vertical-align: -.16em; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn, .btn { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 1px solid var(--line); background: var(--layer); border-radius: .35rem; font-weight: 690; font-size: .9rem; text-decoration: none; color: var(--ink); transition: background .18s var(--ease), border-color .18s var(--ease); }
.btn { padding: .6rem .96rem; text-align: center; }
.icon-btn { min-width: 3rem; padding: .45rem; }
.icon-btn:hover:not(:disabled), .btn:hover:not(:disabled) { background: var(--raised); border-color: var(--dim); }
.btn.primary { background: var(--brass); border-color: var(--brass); color: var(--button-ink); }
.btn.primary:hover:not(:disabled) { background: var(--brass-hover); }
.btn.danger { color: var(--rust); background: var(--rust-fill); }
.btn.quiet { background: transparent; border-color: transparent; }
.btn.quiet:hover:not(:disabled) { background: var(--raised); }
.btn.active { color: var(--brass); border-color: var(--brass); }
.btn.row { justify-content: space-between; }
.btn.wide { width: 100%; }
.btn svg { margin-top: .03rem; }
.eyebrow, .mini-label { color: var(--brass); font-size: .69rem; font-weight: 760; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow.rule { display: inline-flex; align-items: center; gap: .6rem; }
.eyebrow.rule::before { content: ''; width: 1.5rem; border-top: 1px solid currentColor; }
.caption { color: var(--dim); font-size: .84rem; }
.subtle { color: var(--dim); }
.display { font-family: var(--display); font-weight: 600; letter-spacing: -.035em; line-height: 1.03; }
.home { max-width: 95rem; margin: auto; padding: clamp(1.1rem, 3vw, 2.8rem) clamp(1rem, 4vw, 4rem) 0; }
.hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: 35.5rem; border: 1px solid var(--line); background: var(--layer); }
.hero-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; padding: clamp(1.25rem, 4.3vw, 4.7rem); }
.hero h1 { font-size: 5.15rem; margin: 1.05rem 0 1.1rem; }
.hero h1 em { color: var(--brass); font-weight: inherit; }
.hero-body > .intro { font-size: 1.04rem; color: var(--dim); max-width: 34ch; margin-bottom: 1.65rem; }
.hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; width: 100%; }
.hero-actions .btn { padding-inline: .95rem; white-space: nowrap; }
.hero-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .8rem; margin-top: .55rem; }
.hero-secondary .btn { margin-left: -.45rem; padding-inline: .45rem; font-size: .84rem; color: var(--dim); }
.hero-secondary .btn:hover { color: var(--ink); }
.hero-visual { position: relative; overflow: hidden; margin: 0; background: #302326; min-height: 100%; }
.hero-visual img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.hero-visual figcaption { position: absolute; right: 6%; bottom: 6.5%; color: oklch(88% .058 74); background: oklch(21% .03 20 / .88); padding: .36rem .6rem; letter-spacing: .12em; font-size: .66rem; text-transform: uppercase; }
.hero-form { width: 100%; max-width: 28rem; }
.hero-form h1 { font-size: 2.9rem; }
.hero-form > p { margin-bottom: 1rem; }
.home-notes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-block: 1.7rem 2rem; border-block: 1px solid var(--subtle-line); }
.home-notes section { display: grid; grid-template-columns: auto 1fr; gap: .2rem .85rem; align-content: center; min-height: 6.5rem; padding: .8rem clamp(.6rem,2vw,1.6rem); }
.home-notes section + section { border-left: 1px solid var(--subtle-line); }
.home-notes section .icon { grid-row: span 2; color: var(--brass); width: 1.4rem; height: 1.4rem; }
.home-notes h2 { font-size: .96rem; }
.home-notes p { color: var(--dim); font-size: .8rem; }
.site-footer { min-height: 5rem; display: flex; justify-content: space-between; align-items: center; gap: .9rem; font-size: .77rem; color: var(--dim); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.site-footer a { color: var(--dim); }
form .fields { display: grid; gap: .75rem; }
.field { display: flex; flex-direction: column; gap: .32rem; min-width: 0; font-size: .88rem; font-weight: 650; }
.field > span:first-child { color: var(--ink); }
.field > input:not([type=checkbox]), .field > select, input[type=search] { width: 100%; min-height: 3rem; border: 1px solid var(--line); border-radius: .3rem; background: var(--bg); color: var(--ink); padding: .57rem .7rem; }
input::placeholder { color: var(--dim); opacity: .8; }
.check { display: flex; align-items: center; gap: .65rem; min-height: 3rem; font-size: .88rem; font-weight: 620; cursor: pointer; }
input[type=checkbox], input[type=range] { accent-color: var(--brass); }
input[type=checkbox] { width: 1.15rem; height: 1.15rem; flex: none; }
.form-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem .85rem; }
.form-submit { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.form-note { color: var(--dim); font-size: .8rem; margin-block: .5rem; }
.back { margin: -.6rem 0 .45rem -.55rem; }
.room, .read-view { max-width: 79rem; margin: auto; padding: clamp(1.1rem,3vw,3rem) clamp(1rem,4vw,3rem); }
.room-top, .read-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 1.05rem 0 1.65rem; border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; }
.room-top h1, .read-top h1 { margin: .35rem 0 .5rem; font-size: 3.3rem; }
.room-code { color: var(--brass); letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.room-columns { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr); align-items: start; gap: 1.25rem; }
.lobby-roster { display: grid; gap: .45rem; }
.lobby-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; min-height: 3.7rem; border: 1px solid var(--line); padding: .45rem .8rem; background: var(--layer); border-radius: .3rem; }
.lobby-row.open { border-style: dashed; color: var(--dim); background: transparent; }
.identity { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.identity strong { overflow-wrap: anywhere; }
.avatar { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; flex: none; border-radius: 50%; background: oklch(38% .055 44); color: var(--ink); font-size: .85rem; font-weight: 760; }
.avatar.tone-1 { background: oklch(37% .071 274); }
.avatar.tone-2 { background: oklch(37% .072 147); }
.avatar.tone-3 { background: oklch(37% .07 25); }
.pill { display: inline-flex; gap: .32rem; align-items: center; min-height: 1.5rem; padding: .13rem .45rem; border-radius: .2rem; border: 1px solid var(--line); color: var(--dim); font-size: .69rem; font-weight: 700; line-height: 1.2; }
.pill.good { color: var(--green); }
.pill.warn { color: var(--rust); }
.pill.gold { color: var(--brass); }
.pill .icon { width: .86rem; height: .86rem; }
.panel { background: var(--layer); border: 1px solid var(--line); border-radius: .42rem; }
.settings { padding: 1rem; }
.settings h2, .roster-title { margin-bottom: .75rem; font-size: 1.05rem; }
.settings-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem .85rem; font-size: .84rem; }
.settings-list dt { color: var(--dim); }
.settings-list dd { margin: 0; font-weight: 680; text-align: right; overflow-wrap: anywhere; }
.lobby-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1.15rem; }
.lobby-actions .caption { max-width: 40ch; }
.table { max-width: 104rem; margin: auto; padding: .9rem clamp(.8rem,2vw,2rem) 1.5rem; }
.table-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.table-head h1 { font-size: 1.35rem; letter-spacing: -.012em; }
.table-head p { font-size: .78rem; color: var(--dim); }
.table-tools { display: flex; gap: .35rem; }
.table-tools .icon-btn { background: transparent; }
.table-grid { display: grid; grid-template-columns: minmax(11rem, .73fr) minmax(22rem, 2.72fr) minmax(12rem,.93fr); grid-template-areas: 'players encounter log' 'players hand log'; gap: .75rem; align-items: start; }
.players { grid-area: players; }
.encounter { grid-area: encounter; min-width: 0; }
.game-log { grid-area: log; }
.hand { grid-area: hand; min-width: 0; }
.sidebar { padding: .8rem; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .72rem; }
.panel-title h2 { font-size: .99rem; }
.player-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.player-card { display: flex; width: 100%; min-height: 4rem; flex-direction: column; gap: .34rem; align-items: stretch; text-align: left; padding: .55rem; border: 1px solid var(--subtle-line); border-radius: .27rem; background: var(--raised); }
.player-card:hover { border-color: var(--dim); }
.player-card.turn { border-color: var(--brass); }
.player-name { font-size: .88rem; overflow-wrap: anywhere; }
.player-meta { color: var(--dim); display: flex; flex-wrap: wrap; column-gap: .52rem; font-size: .75rem; }
.player-meta b { color: var(--ink); }
.decks { display: grid; grid-template-columns: 1fr 1fr; gap: .38rem; margin-top: .65rem; }
.decks button { display: grid; place-content: center; min-width: 0; min-height: 3.15rem; padding: .3rem; text-align: center; border-radius: .28rem; border: 1px solid var(--line); background: transparent; }
.decks button:hover { background: var(--raised); }
.decks b { color: var(--brass); font-variant-numeric: tabular-nums; }
.decks span { font-size: .66rem; color: var(--dim); }
.encounter-top { min-height: 3.4rem; display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .55rem .9rem; border-bottom: 1px solid var(--line); }
.encounter-top h2 { font-size: 1.06rem; }
.phase-mark { color: var(--brass); font-size: .74rem; font-weight: 740; }
.empty-encounter { display: grid; place-items: center; text-align: center; min-height: 16rem; padding: 1.45rem 1rem; background: radial-gradient(ellipse at 50% 35%, oklch(31% .033 31), var(--layer) 72%); }
.empty-encounter .sigil { width: 4.25rem; height: 4.25rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--brass); margin: 0 auto .65rem; box-shadow: 0 0 0 .32rem var(--layer), 0 0 0 calc(.32rem + 1px) var(--subtle-line); }
.empty-encounter .sigil .icon { width: 2.05rem; height: 2.05rem; }
.empty-encounter .display { font-size: 1.85rem; margin: .45rem 0; }
.empty-encounter .caption { max-width: 43ch; margin: auto; }
.score { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); padding: .75rem .9rem; text-align: center; align-items: center; gap: .3rem; }
.score button { border: 0; color: var(--ink); background: transparent; border-radius: .3rem; min-width: 0; padding: .2rem; }
.score button:hover { background: var(--raised); }
.score .display { display: block; font-size: 3.8rem; font-variant-numeric: tabular-nums; }
.score .caption { display: block; font-size: .71rem; overflow-wrap: anywhere; }
.score-vs { color: var(--dim); font: 2rem/1 var(--display); }
.score .monsters-label, .score .monsters-number { color: var(--rust); }
.monsters { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(80%,14rem),1fr); gap: .5rem; overflow-x: auto; padding: .2rem .75rem .65rem; }
.monster { position: relative; min-height: 9rem; overflow: hidden; display: flex; align-items: end; justify-content: space-between; gap: .5rem; text-align: left; border: 1px solid var(--line); border-radius: .3rem; padding: .55rem .65rem; color: var(--ink); background: #472d34; }
.monster:hover { border-color: var(--brass); }
.monster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.monster .monster-field { object-position: center 31%; opacity: .52; }
.monster .monster-portrait { object-fit: contain; object-position: right center; inset: 0 .5rem 0 auto; width: 48%; height: 100%; }
.monster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(18% .03 22 / .84), transparent 84%), linear-gradient(0deg, oklch(18% .03 22 / .88), transparent 55%); }
.monster > span { position: relative; z-index: 1; font-size: .9rem; }
.combat-reward { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; padding: .58rem .75rem; margin: 0 .75rem .75rem; background: var(--raised); border: 1px solid var(--subtle-line); border-radius: .28rem; }
.combat-reward strong { font-size: .9rem; }
.action-area { padding: .72rem; margin-top: .55rem; }
.action-meta { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.action-meta .mini-label { color: var(--rust); }
.clock { font-size: 1.33rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brass); white-space: nowrap; }
.clock.urgent { color: var(--rust); }
.action-row { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: .56rem; }
.action-row .btn { flex: 0 1 auto; }
.action-row .btn.primary { min-width: 8rem; }
.hand { padding: .72rem; }
.hand-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 7.05rem; gap: .45rem; overflow-x: auto; padding: .15rem .15rem .45rem; scroll-padding: .3rem; scroll-snap-type: x proximity; }
.card { scroll-snap-align: start; min-width: 0; padding: .32rem; border-radius: .33rem; border: 1px solid var(--line); background: var(--paper); color: var(--paper-ink); text-align: left; display: flex; flex-direction: column; min-height: 7.8rem; }
.card:hover { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.card[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--focus); }
.card-art { width: 100%; aspect-ratio: 4/3; border-radius: .16rem; overflow: hidden; position: relative; background: oklch(37% .083 328); }
.card-art img { width: 100%; height: 100%; object-fit: cover; }
.art-frame { position: relative; overflow: hidden; }
.art-frame > .icon { position: absolute; inset: 0; margin: auto; width: min(2rem,65%); height: min(2rem,65%); color: var(--brass); }
.art-frame > img { position: relative; z-index: 1; display: block; }
img[data-art-state]:not([data-art-state="ready"]) { visibility: hidden; }
.badge-number { position: absolute; z-index: 1; right: .15rem; bottom: .15rem; background: var(--paper); color: var(--paper-ink); font-weight: 800; font-variant-numeric: tabular-nums; padding: .01rem .28rem; border-radius: .13rem; }
.card .card-name { padding: .37rem .08rem .08rem; line-height: 1.18; font-weight: 710; font-size: .74rem; overflow-wrap: anywhere; hyphens: auto; }
.card .card-kind { color: var(--paper-dim); font-size: .65rem; margin: auto .08rem .05rem; }
.card .usable { color: var(--paper-ink); font-size: .64rem; font-weight: 730; }
.hand[data-list="true"] .hand-strip { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit,minmax(min(100%,11rem),1fr)); }
.hand[data-list="true"] .card { min-height: 3.4rem; }
.hand[data-list="true"] .card-art { display: none; }
.log-list { margin: 0; list-style: none; padding: 0; max-height: 28rem; overflow: auto; }
.log-list li { padding: .55rem 0 .6rem; border-bottom: 1px solid var(--subtle-line); overflow-wrap: anywhere; font-size: .82rem; }
.log-list li:first-child { padding-top: .1rem; }
.log-list li:last-child { border-bottom: 0; }
.log-list time { display: block; font-size: .67rem; color: var(--dim); }
.log-list li:first-child time { color: var(--brass); }
.latest { display: none; }
.tutorial-tip { border: 1px solid var(--line); background: var(--layer); border-radius: .35rem; margin: 0 0 .7rem; padding: .75rem; }
.tutorial-tip summary { min-height: 2.75rem; }
.tutorial-tip summary strong { display: inline-block; margin-left: .65rem; font-size: .98rem; }
.tutorial-tip .btn { margin-top: .35rem; }
.result { padding: 1.8rem 1rem; text-align: center; }
.result h2 { font-size: 2.65rem; margin: .5rem 0; }
.result .action-row { justify-content: center; }
.detail { max-width: min(39rem, calc(100% - 2rem)); max-height: min(85vh,47rem); max-height: min(85dvh,47rem); padding: 0; border: 1px solid var(--line); background: var(--layer); color: var(--ink); border-radius: .52rem; width: 100%; }
.detail::backdrop { background: oklch(12% .02 23 / .8); }
.detail-head { position: sticky; top: 0; z-index: 2; background: var(--layer); border-bottom: 1px solid var(--line); padding: .65rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .45rem; }
.detail-head h2 { font-size: 1.32em; overflow-wrap: anywhere; line-height: 1.15; }
.detail-body { padding: .9rem 1rem 1rem; }
.detail-body, .detail-body dt { overflow-wrap: anywhere; }
.detail-body > * + * { margin-top: .75rem; }
.detail .card-art { max-height: 13rem; width: 100%; aspect-ratio: auto; height: 13rem; }
.detail .card-art img { object-position: center; }
.detail-body p { max-width: 62ch; overflow-wrap: anywhere; }
.detail-body h3 { font-size: 1em; }
.detail-body blockquote { margin-inline: 0; color: var(--dim); font-style: italic; }
.detail-body .detail-actions { display: grid; gap: .45rem; }
.account-seats { list-style: none; padding: 0; }
.account-seats .caption { display: block; }
.detail-section-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.detail-actions .btn { width: 100%; justify-content: space-between; text-align: left; }
.notice { position: fixed; z-index: 8; bottom: max(1rem,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(30rem,calc(100% - 1.5rem)); color: var(--ink); background: var(--raised); border: 1px solid var(--brass); border-radius: .4rem; padding: .7rem .9rem; box-shadow: 0 .3rem 1rem oklch(12% .02 20 / .52); text-align: center; pointer-events: none; }
.notice:empty { display: none; }
.notice[data-tone="error"] { border-color: var(--rust); }
.rules-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(13rem,.42fr); gap: 2rem; }
.rules-layout article { max-width: 67ch; }
.rules-layout article h2 { font-size: 1.18rem; margin: 1.15rem 0 .3rem; }
.rules-layout article h2:first-child { margin-top: 0; }
.rules-layout article p { color: var(--dim); }
.rules-layout li { margin-bottom: .4rem; }
.rules-layout aside { align-self: start; padding: .8rem; }
.rules-layout dt { color: var(--brass); font-weight: 700; margin-top: .55rem; }
.rules-layout dd { margin: 0; color: var(--dim); font-size: .87rem; }
.catalog-controls { display: flex; gap: .7rem; flex-wrap: wrap; align-items: end; }
.catalog-controls .field { flex: 1 1 10rem; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(8rem,1fr)); gap: .55rem; margin-block: 1rem; }
.catalog-grid .card { min-height: 9rem; }
.catalog-grid .card-name { font-size: .87rem; }
.count { color: var(--dim); font-size: .84rem; margin-top: .7rem; }
.muted-block { padding: 1rem; color: var(--dim); }
.connect-status { white-space: nowrap; }
.loading-state { padding: 3rem 1rem; text-align: center; color: var(--dim); }
.lobby-settings-button { margin-top: .75rem; }
.choice-list { min-width: 0; border: 1px solid var(--line); border-radius: .3rem; margin: 0; padding: .3rem .65rem .5rem; }
.choice-list legend { padding-inline: .32rem; font-weight: 700; }
.choice-list .check { border-bottom: 1px solid var(--subtle-line); }
.choice-list .check:last-child { border-bottom: 0; }
.meta-inline { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.text-btn { border: 0; background: transparent; min-height: 3rem; padding: .2rem .25rem; text-align: left; color: var(--brass); text-decoration: underline; text-underline-offset: .2em; }
.inline-list { margin: .2rem 0 0; padding-left: 1.15rem; }
.loot-strip { padding: .5rem .75rem; }
.pref-help { display: block; font-weight: 400; }
.pref-stack { display: grid; gap: .25rem; }
.pref-stack .field { margin: .4rem 0; }
.connection-banner { padding: .6rem .75rem; margin-bottom: .6rem; border: 1px solid var(--rust); color: var(--rust); border-radius: .3rem; font-size: .86rem; }
@media (max-width: 1240px) { .hero h1 { font-size: 4.45rem; } .hero-form h1 { font-size: 2.7rem; } }
@media (max-width: 970px) {
  .hero { min-height: 31rem; }
  .hero h1 { font-size: 3.6rem; }
  .hero-form h1 { font-size: 2.45rem; }
  .table-grid { grid-template-columns: minmax(0,1fr) minmax(12rem,.4fr); grid-template-areas: 'players players' 'encounter log' 'hand log'; }
  .players .panel-title { margin-bottom: .42rem; }
  .table .player-list { display: flex; overflow-x: auto; padding: .15rem .14rem .35rem; }
  .table .player-list li { flex: 1 0 8.7rem; }
  .players .decks { display: none; }
}
@media (max-width: 680px) {
  .head-inner { min-height: 3.55rem; }
  .head-nav a { font-size: .79rem; padding-inline: .4rem; }
  .head-nav .icon-btn { border-color: transparent; background: transparent; }
  .wordmark { font-size: 1.78rem; }
  .wordmark img { width: 1.45rem; }
  .hero { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .hero-body { padding: 1.4rem 1.2rem 1.25rem; }
  .hero h1 { font-size: 3.15rem; margin-block: .65rem .72rem; }
  .hero-form h1 { font-size: 2.45rem; }
  .hero-body > .intro { margin-bottom: 1rem; font-size: .94rem; }
  .hero-visual { min-height: 0; aspect-ratio: 4/2.8; }
  .hero-visual img { object-position: center 52%; }
  .hero-visual figcaption { right: 4%; bottom: 5%; font-size: .6rem; }
  .home-notes { grid-template-columns: 1fr; margin-block: 1.15rem; }
  .home-notes section { min-height: 3.85rem; padding: .5rem .25rem; }
  .home-notes section + section { border-left: 0; border-top: 1px solid var(--subtle-line); }
  .site-footer { min-height: 3.6rem; flex-wrap: wrap; padding-block: .65rem; }
  .room-top, .read-top { align-items: start; flex-direction: column; gap: .65rem; margin-bottom: 1rem; padding-block: .5rem 1rem; }
  .room-top h1, .read-top h1 { font-size: 2.6rem; }
  .room-columns, .rules-layout { grid-template-columns: minmax(0,1fr); gap: .9rem; }
  .table-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: 'players' 'encounter' 'hand' 'log'; gap: .5rem; }
  .table { padding: .55rem .65rem 1.2rem; }
  .table-head h1 { font-size: 1.09rem; }
  .table-head p { font-size: .71rem; }
  .table-head .table-tools { gap: .2rem; }
  .table-tools .icon-btn { min-width: 2.75rem; }
  .sidebar { padding: .48rem; }
  .player-list li { flex-basis: 8.2rem; }
  .player-card { gap: .13rem; padding: .35rem .44rem; }
  .player-card .avatar { width: 1.65rem; height: 1.65rem; }
  .player-card .pill { font-size: .62rem; min-height: 1.25rem; }
  .encounter-top { min-height: 2.7rem; padding: .43rem .65rem; }
  .empty-encounter { min-height: 9.2rem; padding: .8rem .75rem; }
  .empty-encounter .sigil { width: 3.2rem; height: 3.2rem; }
  .empty-encounter .display { font-size: 1.65rem; }
  .score { padding: .45rem .38rem; }
  .score .display { font-size: 2.9rem; }
  .score .mini-label { display: block; font-size: .63rem; letter-spacing: .095em; }
  .monsters { padding-inline: .5rem; }
  .monster { min-height: 6.6rem; }
  .combat-reward { margin-inline: .5rem; margin-bottom: .5rem; }
  .latest { display: block; margin: .35rem .15rem 0; font-size: .75rem; color: var(--dim); }
  .action-area { padding: .48rem; }
  .action-row .btn { flex: 1 1 auto; padding-inline: .55rem; }
  .action-row .btn.primary { min-width: min(100%,8rem); }
  .hand { padding: .5rem; }
  .hand-strip { grid-auto-columns: 6.25rem; }
  .hand-strip .card { min-height: 7rem; }
  .game-log .log-list { max-height: 12rem; }
  .detail { inset: auto 0 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 86dvh; border-radius: .6rem .6rem 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .catalog-grid { grid-template-columns: repeat(auto-fill,minmax(6.65rem,1fr)); }
}
@media (max-width: 365px) {
  .hero h1 { font-size: 2.72rem; }
  .hero-form h1 { font-size: 2.25rem; }
  .hero-actions .btn { padding-inline: .64rem; font-size: .83rem; }
  .head-nav { gap: .12rem; }
  .table-tools .icon-btn { min-width: 2.55rem; }
}
@media (max-width: 330px) {
  .head-inner, .table-head { flex-wrap: wrap; }
  .form-2 { grid-template-columns: minmax(0,1fr); }
  .detail-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; scroll-behavior: auto !important; } }

/* Shell and shared controls. The arena and entry screens own their geometry. */
.site-head { background: var(--canvas); border-bottom: 1px solid oklch(69% .042 282 / .16); }
.head-inner { min-height: 3.9rem; }
.wordmark { font: 850 1.44rem/.9 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.wordmark img { width: 1.7rem; height: 1.7rem; }
.wordmark-dot { display: none; }
.head-nav a { font-size: .74rem; letter-spacing: .065em; font-weight: 650; }
.site-footer { min-height: 3.75rem; }
.icon-btn, .btn { border-radius: .22rem; border-color: oklch(54% .045 282 / .58); background: var(--layer); }
.btn.primary { font-weight: 820; box-shadow: inset 0 1px 0 oklch(95% .029 74 / .55), 0 3px 0 oklch(30% .087 30 / .55); }
.btn:active:not(:disabled), .icon-btn:active:not(:disabled) { translate: 0 1px; }
.btn.danger:hover:not(:disabled) { background: oklch(35% .09 22); }
.field > input:not([type=checkbox]), .field > select, input[type=search] { background: oklch(16% .018 290); }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.045em; }
.skip { z-index: 100; }

body[data-screen="arena"] > .site-head,
body[data-screen="arena"] > .site-footer { display: none; }
body[data-screen="arena"] { background: var(--canvas); }
body[data-screen="arena"] > #main { min-height: 100svh; }

.detail {
  border-radius: .38rem;
  border: 1px solid oklch(73% .06 282 / .48);
  background: oklch(22% .025 291);
  box-shadow: 0 1.5rem 5rem oklch(9% .02 293 / .7);
  max-height: min(86dvh, 48rem);
  overscroll-behavior: contain;
}
.detail[open] { animation: detail-enter .19s var(--ease) both; }
.detail::backdrop { background: oklch(12% .024 291 / .72); }
.detail-head {
  background: oklch(23% .032 289);
  border-bottom-color: oklch(64% .053 286 / .33);
  gap: .8rem;
  padding: .72rem 1.05rem;
}
.detail-head h2 { font: 780 1.25em/1.15 var(--font-ui); letter-spacing: -.028em; }
.detail-head-tools { display: flex; align-items: center; gap: .45rem; flex: none; }
.detail-head-tools .clock { min-width: 2.3ch; text-align: end; white-space: nowrap; }
.detail-head .icon-btn { border-color: transparent; background: transparent; }
.detail-head .icon-btn:hover:not(:disabled) { background: var(--raised); }
.detail-body { padding: 1rem 1.05rem 1.25rem; }
.detail-body > :is(p, ol, ul, dl) { line-height: 1.52; }
.detail:is([data-context="card"],[data-context="discard-choice"]) .card-art { height: clamp(7rem, 25dvh, 15rem); max-height: none; border-radius: .2rem; background: radial-gradient(ellipse at center,#2b2634,#161620 76%); }
.detail:is([data-context="card"],[data-context="discard-choice"]) .card-art img { object-fit: contain; }
.detail-card-description > * + * { margin-block-start: .75rem; }
.detail-card-dock { flex: none; padding: .44rem clamp(.6rem, 3vw, 1.05rem) max(.56rem,env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: oklch(22% .033 289); }
.detail-card-dock h3 { margin: 0 0 .28rem; color: var(--ice); font-size: .72em; font-weight: 780; }
.detail-card-choices { display: grid; gap: .38rem; }
.detail-card-choices[data-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.detail-card-choices .btn { display: flex; justify-content: space-between; gap: .45rem; min-inline-size: 0; min-block-size: 48px; padding: .4rem .56rem; font-size: .87em; line-height: 1.22; overflow-wrap: anywhere; white-space: normal; text-align: start; }
.detail-card-choices .btn .icon { flex: none; width: .9rem; height: .9rem; }
.detail-card-choices [data-op="card-targets-back"] { justify-content: flex-start; }
.detail-card-unavailable { color: var(--dim); font-size: .84em; }
.detail-card-dock:has(.gear-fit) { max-block-size: min(54dvh,21rem); overflow: auto; overscroll-behavior: contain; }
.gear-fit { margin-block-end: .25rem; }
.gear-fit-head { display: flex; align-items: center; gap: .48rem; margin-block-end: .37rem; }
.gear-fit-head > .icon { width: 1.1rem; height: 1.1rem; flex: none; color: oklch(85% .087 76); }
.detail-card-dock .gear-fit-head h3 { margin: 0; color: oklch(88% .089 76); font: 780 .82em/1.2 var(--font-ui); }
.gear-fit-head p { color: var(--dim); font-size: .68em; line-height: 1.22; }
.gear-fit-current {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr));
  gap: .28rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gear-fit-current li { display: grid; min-width: 0; }
.gear-fit-piece {
  display: grid;
  grid-template-columns: min(2.1rem,24%) minmax(0,1fr);
  align-items: center;
  gap: .35rem;
  min-width: 48px;
  min-height: 48px;
  padding: .23rem .28rem;
  border: 1px solid oklch(63% .073 71);
  border-radius: .27rem;
  background: oklch(24% .025 241);
  color: var(--ink);
  text-align: start;
}
.gear-fit-piece:is(:hover,:focus-visible) { border-color: var(--ice); background: oklch(30% .035 227); }
.gear-fit-art { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 1px solid oklch(60% .053 71); border-radius: .18rem; }
.gear-fit-art > .icon { width: .85rem; height: .85rem; color: var(--dim); }
.gear-fit-copy { display: grid; gap: .12rem; overflow-wrap: anywhere; }
.gear-fit-copy strong { font: 730 .73em/1.15 var(--font-ui); }
.gear-fit-copy small { color: var(--ice); font: 690 .64em/1.18 var(--font-ui); }
.gear-fit + .detail-card-choices { margin-block-start: .3rem; }
.detail-card-targets > h3 { margin-block-end: .55rem; }
.detail-card-targets > h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.detail-card-targets .card-rules { margin-block-start: .95rem; }
@media (min-width: 681px) { .detail-card-targets .detail-card-choices { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.card-player-formation { container: target-formation / inline-size; }
.card-player-formation h3:focus-visible { width: fit-content; outline: 2px solid var(--focus); outline-offset: 2px; }
.card-target-hint { margin: .2rem 0 .52rem; color: var(--dim); font-size: .76em; line-height: 1.25; }
.card-player-targets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; list-style: none; margin: 0; padding: 0; }
.card-player-targets li { display: grid; min-width: 0; }
.card-player-target {
  display: grid; justify-items: center; align-content: start; gap: .3rem; min-width: 0; min-height: 48px;
  padding: .4rem .2rem; border: 1px solid oklch(52% .06 225); border-radius: .32rem; color: var(--ink);
  background: radial-gradient(ellipse at 50% 12%,oklch(32% .046 229),oklch(20% .03 247) 77%);
  box-shadow: inset 0 0 0 2px oklch(15% .027 242); text-align: center;
}
.card-player-target[data-target-mark="self"] { border-color: var(--ice); }
.card-player-target[data-target-mark="turn"] { border-color: var(--ember); }
.card-player-target:hover:not(:disabled) { border-color: var(--ink); background: radial-gradient(ellipse at 50% 12%,oklch(39% .052 223),oklch(24% .034 243) 77%); }
.card-player-target:focus-visible { outline-offset: -3px; }
.card-player-target:active:not(:disabled) { border-color: var(--ember); }
.card-player-target .avatar { width: 2.08rem; height: 2.08rem; border: 1px solid currentColor; border-radius: .22rem .22rem 35% 35%; color: var(--dim); }
.card-player-target[data-target-mark="turn"] .avatar { color: var(--ember); }
.card-player-target[data-target-mark="self"] .avatar { color: var(--ice); }
.card-target-copy { display: grid; min-width: 0; align-content: center; gap: .16rem; overflow-wrap: anywhere; line-height: 1.14; }
.card-target-copy strong { font-size: .76rem; }
.card-target-copy small { color: var(--dim); font-size: .64rem; }
.card-target-rule { margin-top: .48rem; border-top: 1px solid var(--subtle-line); }
.card-target-rule summary { display: list-item; align-content: center; width: fit-content; min-height: 48px; padding-inline: .25rem; color: var(--ice); font-size: .79em; }
.card-target-rule p { margin-bottom: .45rem; color: var(--ink); font-size: .85em; line-height: 1.42; }
body[data-text="large"] .card-target-copy strong { font-size: .91rem; }
body[data-text="large"] .card-target-copy small { font-size: .78rem; }
@container target-formation (max-width: 14rem) { .card-player-targets { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-height: 520px) and (orientation: landscape) {
  .detail:has(.detail-card-targets:not([hidden]) .card-player-formation) .detail-body { padding-block: .48rem; }
  .card-player-target { grid-template-columns: auto minmax(0,1fr); align-items: center; align-content: center; justify-items: start; gap: .3rem; padding-inline: .35rem; text-align: start; }
  .card-player-target .avatar { width: 1.72rem; height: 1.72rem; }
}
.help-offer-list { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.help-offer.btn { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: .55rem; width: 100%; min-height: 64px; padding: .52rem .65rem; text-align: start; }
.help-offer :is(strong,small,b) { display: block; }
.help-offer small { color: var(--dim); font-size: .74em; }
.help-offer-score { text-align: end; }
.help-offer-score b { color: var(--ice); font: 800 1.35em/1 var(--font-score); white-space: nowrap; }
.help-offer .icon { width: .9rem; height: .9rem; }
.help-back[hidden] { display: none; }
.help-score-review { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
.help-score-review > div { display: grid; align-content: start; gap: .16rem; min-width: 0; padding: .45rem .56rem; border: 1px solid var(--line); background: oklch(21% .033 289); }
.help-score-review > div:last-child { border-color: var(--ice); }
.help-score-review :is(span,small) { color: var(--dim); font-size: .76em; }
.help-score-review strong { color: var(--ink); font: 800 1.75em/1 var(--font-score); font-variant-numeric: tabular-nums; }
.help-score-review > div:last-child strong { color: var(--ice); }
.detail-body .help-terms { gap: .32rem .6rem; }
.help-split { padding: .42rem .55rem; border-inline-start: 2px solid var(--ice); background: oklch(23% .032 289); font-size: .84em; }
:is(.help-review-actions,.sale-actions,.trade-actions,.discard-actions):not([hidden]) { display: flex; flex-wrap: wrap; gap: .34rem; }
:is(.help-review-actions,.sale-actions,.trade-actions,.discard-actions) .btn { flex: 1 1 auto; min-height: 48px; padding: .4rem .5rem; font-size: .82em; }
@media (min-width: 681px) { .detail[data-context="help-proposal"] form .fields { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.sale-groups { display: grid; align-items: start; gap: .62rem; }
.sale-group { min-inline-size: 0; margin: 0; padding: .18rem .4rem .25rem; border: 1px solid var(--line); background: oklch(20% .026 290); }
.sale-group legend { padding: 0 .28rem; color: var(--ice); font-size: .8em; font-weight: 750; }
.sale-group legend .icon { display: inline-block; width: .86rem; height: .86rem; margin-inline-end: .27rem; vertical-align: -.12rem; }
.sale-group .sale-item { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .35rem; padding: .29rem .26rem; border-bottom: 1px solid var(--subtle-line); font-size: .78em; line-height: 1.16; }
.sale-item:last-child { border-bottom: 0; }
.sale-item:hover, .sale-item:has(:focus-visible) { background: oklch(29% .033 290); }
.sale-item:has(:checked) { background: oklch(35% .035 193 / .53); }
.sale-item :is(strong,small) { display: block; }
.sale-item strong { font-weight: 740; hyphens: auto; }
.sale-item b { color: var(--ice); font-variant-numeric: tabular-nums; text-align: end; }
.sale-item small { margin-top: .12rem; color: var(--dim); font-size: .82em; }
.sale-summary { margin: 0 0 .4rem; }
.sale-summary dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .3rem; margin: 0; }
.sale-summary dl > div { padding: .22rem .4rem; border: 1px solid var(--line); background: oklch(19% .029 289); }
.sale-summary dt { color: var(--dim); font-size: .69em; }
.sale-summary dd { margin: 0; font: 800 1.4em/1 var(--font-score); font-variant-numeric: tabular-nums; }
.sale-summary dd[data-sale-value="levels"] { color: var(--ice); }
.sale-summary dd[data-sale-value="lost"] { color: var(--ember); }
.sale-summary p { margin: .28rem 0 0; color: var(--dim); font-size: .75em; overflow-wrap: anywhere; }
.sale-summary p:empty { display: none; }
@media (min-width: 681px) { .sale-groups { grid-template-columns: repeat(auto-fit,minmax(8.6rem,1fr)); } }
@media (max-height: 520px) and (orientation: landscape) {
  .sale-group { padding-inline: .24rem; }
  .sale-group .sale-item { gap: .23rem; padding-inline: .15rem; }
  .sale-item b { font-size: .92em; }
  .sale-item b small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.trade-columns { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,10rem),1fr)); align-items: start; gap: .55rem; }
.trade-side { min-width: 0; }
.trade-side { padding: .48rem .52rem; border: 1px solid var(--line); background: oklch(20% .027 289); }
.trade-side h3 { color: var(--ice); margin-block-end: .3rem; }
.trade-side ul { margin: 0; padding: 0; list-style: none; }
.trade-side li { padding: .29rem 0; font-size: .86em; font-weight: 700; line-height: 1.25; }
.trade-side li + li, .trade-item + .trade-item { border-top: 1px solid var(--subtle-line); }
.trade-side p, .trade-state { color: var(--dim); font-size: .86em; }
.trade-side small, .trade-item small { display: block; margin-top: .13rem; color: var(--dim); font-size: .76em; }
.sale-group .trade-item { min-height: 48px; gap: .38rem; padding: .28rem .25rem; font-size: .84em; line-height: 1.2; }
.trade-item strong { overflow-wrap: anywhere; hyphens: auto; }
.trade-item:has(:checked) { background: oklch(35% .035 193 / .53); }
.trade-draft-summary { margin: 0 0 .34rem; color: var(--ice); font-size: .8em; }
.discard-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap: .3rem; margin: .58rem 0 0; padding: 0; list-style: none; }
.discard-option { display: grid; grid-template-columns: minmax(0,1fr) auto; min-width: 0; align-items: stretch; border: 1px solid var(--line); background: oklch(20% .027 289); }
.discard-option:has(input:checked) { border-color: var(--ice); background: oklch(35% .035 193 / .53); }
.discard-option label { display: grid; grid-template-columns: auto 2rem minmax(0,1fr); align-items: center; gap: .34rem; min-width: 0; min-height: 48px; padding: .28rem; cursor: pointer; }
.discard-option label:has(input:disabled) { cursor: default; }
.discard-card-art { display: block; width: 2rem; height: 2rem; border-radius: .18rem; background: var(--layer); }
.discard-card-art img { width: 100%; height: 100%; object-fit: cover; }
.discard-option :is(strong,small) { display: block; overflow-wrap: anywhere; hyphens: auto; }
.discard-option strong { font-size: .79em; line-height: 1.18; }
.discard-option small { color: var(--dim); font-size: .69em; }
.discard-option[data-table-item] { border-color: oklch(63% .065 70 / .55); border-radius: .32rem; background: oklch(22% .032 49); }
.discard-option[data-table-item]:has(input:checked) { border-color: var(--ice); background: oklch(31% .045 192); }
.discard-option[data-table-item] label { grid-template-columns: auto 2.55rem minmax(0,1fr); gap: .4rem; }
.discard-option[data-table-item] .discard-card-art { width: 2.55rem; height: 2.55rem; }
.discard-option[data-table-item] .discard-option-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .12rem .4rem; margin-top: .16rem; }
.discard-option[data-table-item] input { accent-color: var(--ember); }
.discard-option .discard-item-value { color: oklch(86% .09 74); font-weight: 780; }
.discard-progress[data-enough="false"] { color: oklch(86% .09 74); }
.discard-source { display: flex; align-items: center; gap: .34rem; color: var(--ember); font-size: .77em; line-height: 1.2; font-weight: 760; }
.discard-source .icon { flex: none; width: .9rem; height: .9rem; }
.discard-source + .caption { margin-top: .27rem; }
.discard-group { margin-top: .57rem; }
.discard-group h3 { color: var(--ice); font-size: .77em; line-height: 1.2; }
.discard-group .discard-options { margin-top: .24rem; }
.detail[data-context="discard-choice"]:has(.discard-source) .detail-head { padding-block: .25rem; }
.detail[data-context="discard-choice"]:has(.discard-source) .detail-body { padding-block: .53rem; }
@media (max-width: 365px) and (orientation: portrait) {
  .detail[data-context="discard-choice"]:has(.discard-source) { max-height: min(83dvh,44rem); }
}
@media (min-width: 1080px) and (min-height: 641px) {
  .detail[data-context="discard-choice"]:has(.discard-source) { inset: auto max(.9rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) auto; margin: 0; max-width: min(36rem,49vw); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .detail[data-context="discard-choice"]:has(.discard-source) { inset: auto .65rem .65rem auto; margin: 0; max-width: min(32rem,calc(100% - 1.3rem)); }
  .detail[data-context="discard-choice"]:has(.discard-source) .discard-options { grid-template-columns: repeat(auto-fit,minmax(min(100%,13.1rem),1fr)); }
}
.discard-option .icon-btn { min-width: 48px; min-height: 48px; border-block: 0; border-inline-end: 0; border-radius: 0; background: transparent; color: var(--ice); }
.discard-option .icon-btn:hover { background: var(--raised); }
.discard-option .icon-btn .icon { width: 1rem; height: 1rem; }
.discard-progress { color: var(--ice); font-size: .82em; font-weight: 780; margin: 0 0 .36rem; }
.detail:has([data-charity]) { border-color: oklch(67% .07 72); background: oklch(17% .023 239); }
.detail:has([data-charity]) :is(.detail-head,.detail-card-dock) { background: oklch(21% .028 234); border-color: oklch(68% .066 72 / .45); }
.detail:has([data-charity]) .detail-head { padding-block: .36rem; }
.detail:has([data-charity]) .detail-head h2 { font: 800 1.09em/1.15 var(--font-display); }
.detail:has([data-charity]) .detail-card-dock { padding-block: .36rem max(.36rem,env(safe-area-inset-bottom)); }
.detail:has([data-charity]) .discard-actions .btn { white-space: normal; overflow-wrap: anywhere; }
.charity-fields { display: grid; gap: .7rem; min-width: 0; }
.charity-fields > div { min-width: 0; }
.charity-fields .discard-options { margin-block-start: .38rem; }
.charity-fields .discard-option { border-color: oklch(66% .06 72 / .59); border-radius: .25rem; background: oklch(23% .028 236); }
.charity-fields .discard-option:has(input:checked) { border-color: var(--ice); background: oklch(31% .038 210); }
.charity-recipients { display: grid; align-content: start; gap: .28rem; min-width: 0; padding-block: .55rem; border-block-start: 1px solid oklch(68% .066 72 / .45); }
.charity-recipients h3 { color: oklch(87% .079 74); }
.charity-recipients ul { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); gap: .3rem; margin: .14rem 0 0; padding: 0; list-style: none; }
.charity-recipients li { min-width: 0; border: 1px solid var(--line); border-radius: .24rem; background: oklch(21% .029 246); }
.charity-recipients li:has(input:checked) { border-color: var(--ice); }
.charity-seat { display: flex; flex-wrap: wrap; gap: .25rem .36rem; align-items: center; min-height: 48px; padding: .25rem; }
label.charity-seat { cursor: pointer; }
.charity-seat .avatar { width: 1.65rem; height: 1.65rem; }
.charity-seat-stats { flex: 1 1 3rem; display: grid; min-width: 0; line-height: 1.17; overflow-wrap: anywhere; }
.charity-seat-stats strong { font-size: .8em; }
.charity-seat-stats small { color: var(--ice); font-size: .68em; }
.charity-seat input { flex: none; accent-color: var(--ice); }
.charity-recipients [data-charity-cards]:not([hidden]) { display: block; padding: .24rem .35rem; border-block-start: 1px solid var(--line); color: var(--dim); font-size: .7em; line-height: 1.25; overflow-wrap: anywhere; }
.charity-destination { display: flex; align-items: start; gap: .4rem; padding: .46rem; border: 1px solid oklch(67% .07 72 / .56); color: var(--ink); font-size: .8em; }
.charity-destination .icon { flex: none; width: .9rem; height: .9rem; color: var(--brass); }
@media (max-width: 680px) and (orientation: portrait) {
  .detail:has([data-charity]) { max-height: min(93dvh,44rem); }
}
@media (min-width: 750px) {
  .detail:has([data-charity]) { max-width: min(52rem,calc(100% - 1.4rem)); }
  .charity-fields { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); align-items: start; }
  .charity-recipients { padding: .38rem 0 .38rem .58rem; border-block-start: 0; border-inline-start: 1px solid oklch(68% .066 72 / .45); }
}
.discard-actions .btn[hidden] { display: none; }
.discard-reading > h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.detail .clock { color: var(--ember); font: 800 1.35rem/1 var(--font-score); font-variant-numeric: tabular-nums; }
.notice { background: oklch(24% .028 294); border-color: oklch(74% .068 189 / .6); }
body[data-screen="arena"] .notice {
  top: max(3.4rem, calc(env(safe-area-inset-top) + 2.9rem));
  bottom: auto;
  width: min(26rem,calc(100% - 1.5rem));
  font-size: .83rem;
  padding: .55rem .8rem;
}

@keyframes detail-enter {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 680px) {
  .head-inner { min-height: 3.4rem; padding-inline: .8rem; gap: .4rem; }
  .head-nav { gap: .1rem; }
  .head-nav a { font-size: .72rem; letter-spacing: .015em; padding-inline: .4rem; }
  .wordmark { font-size: 1.05rem; gap: .32rem; letter-spacing: .08em; }
  .wordmark img { width: 1.45rem; height: 1.45rem; }
  .detail { margin: auto 0 0; max-width: 100%; max-height: min(79dvh,44rem); border-radius: .55rem .55rem 0 0; }
  .detail:is([data-context="card"],[data-context="discard-choice"]) .card-art { height: clamp(6rem, 17dvh, 10rem); }
  .detail-body { padding-bottom: max(1rem,env(safe-area-inset-bottom)); }
}

/* Only the detail body scrolls. The dialog title and close control stay reachable at large text sizes. */
.detail[open] { display: flex; flex-direction: column; overflow: hidden; }
.detail-head { flex: none; position: static; align-items: start; padding-inline: clamp(.6rem, 3vw, 1.05rem); }
.detail-head-title { min-width: 0; align-self: center; }
.detail-send-status { margin-top: .18rem; color: var(--ember); font-size: .72em; font-weight: 780; }
.detail-send-status:empty { margin: 0; }
.detail-send-status[data-error="true"] { overflow-wrap: anywhere; }
.detail-head-tools { gap: clamp(.2rem, 1vw, .45rem); }
.detail-head .icon-btn { min-inline-size: 48px; min-block-size: 48px; }
.detail-body { flex: 1 1 auto; min-block-size: 0; min-inline-size: 0; overflow: auto; overscroll-behavior: contain; scroll-padding-block: .45rem; padding-inline: clamp(.6rem, 3vw, 1.05rem); }
.detail-body .detail-actions { grid-template-columns: minmax(0,1fr); }
.detail-body :is(.btn, .card-kind, legend, dt, dd) { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.detail-body .settings-list { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.detail-body .card-rules h3 { margin-block-end: .3em; }
.detail-body .card-rules p { line-height: 1.52; }
.card-list-stat { display: none; }
.detail[data-context="player"] { max-width: min(55rem, calc(100% - 1.3rem)); background: oklch(17% .025 246); }
.detail[data-context="player"] .detail-head, .detail[data-context="player"] [data-gear-commands] { border-color: oklch(48% .058 64 / .55); background: oklch(20% .029 246); }
.detail[data-context="player"] .detail-head { padding-block: .32rem; }
.gear-sheet { container: gear / inline-size; }
.gear-sheet-grid { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "profile" "table" "stowage" "moderation"; gap: .62rem; }
.gear-profile { grid-area: profile; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .3rem .54rem; padding: .08rem .16rem .48rem; }
.gear-person { display: grid; justify-items: center; gap: .24rem; }
.gear-person .avatar { display: grid; width: 2.65rem; height: auto; aspect-ratio: 1; border-radius: 50%; border: 1px solid oklch(71% .09 64); }
.gear-profile-state { color: var(--dim); font-size: .67rem; text-align: center; overflow-wrap: anywhere; }
.gear-profile-stats { display: flex; justify-content: end; flex-wrap: wrap; gap: .22rem clamp(.36rem, 2.3vw, .8rem); margin: 0; text-align: center; }
.gear-profile-stats > div { display: grid; justify-items: center; align-content: start; gap: .25rem; }
.gear-profile-stats dt { grid-row: 2; color: var(--ink); font-size: .69rem; font-weight: 740; line-height: 1.14; }
.gear-profile-stats dd { display: grid; place-items: center; min-width: 2.28rem; min-height: 2.28rem; margin: 0; padding: .12rem .24rem; border: 1px solid currentColor; border-radius: 50%; background: oklch(22% .042 235); box-shadow: inset 0 0 0 .16rem oklch(14% .024 243), 0 2px .23rem oklch(12% .025 243); font: 800 1.67rem/.95 var(--font-score); font-variant-numeric: tabular-nums; }
.gear-profile-stats [data-stat="level"] dd { color: var(--ember); border-radius: .34rem; }
.gear-profile-stats [data-stat="force"] dd { color: var(--ice); }
.gear-profile-stats [data-stat="cards"] dd { color: var(--dim); border-radius: .19rem; font-size: 1.29rem; }
.gear-table {
  grid-area: table;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-template-areas: "lineage head class" "hand-a body hand-b" "satchel feet .";
  align-content: start;
  gap: .34rem;
  min-inline-size: 0;
  padding: .45rem;
  border: 1px solid oklch(59% .075 63);
  border-radius: .55rem;
  background: repeating-linear-gradient(135deg,transparent 0 6px,oklch(79% .05 210 / .022) 6px 7px), radial-gradient(ellipse at 50% 29%,oklch(31% .048 218),oklch(20% .031 245) 71%);
  box-shadow: inset 0 0 0 .16rem oklch(13% .02 240), inset 0 0 1.9rem oklch(11% .02 251 / .8), 0 .3rem .8rem oklch(11% .024 247 / .68);
}
.gear-pocket[data-slot="lineage"] { grid-area: lineage; }
.gear-pocket[data-slot="head"] { grid-area: head; }
.gear-pocket[data-slot="class"] { grid-area: class; }
.gear-pocket[data-slot="hand-a"] { grid-area: hand-a; }
.gear-pocket[data-slot="body"] { grid-area: body; }
.gear-pocket[data-slot="hand-b"] { grid-area: hand-b; }
.gear-pocket[data-slot="feet"] { grid-area: feet; }
.gear-satchel { grid-area: satchel; }
.gear-pocket { display: flex; flex-direction: column; gap: .18rem; min-inline-size: 0; min-block-size: 4.9rem; padding: .22rem; border: 1px solid oklch(48% .039 210); border-radius: .37rem; background: oklch(16% .028 239 / .65); box-shadow: inset 0 0 0 .15rem oklch(12% .022 245 / .78); }
.gear-pocket[data-occupied="true"] { border-color: oklch(64% .095 67); }
.gear-pocket h3 { margin: .04rem 0; color: var(--ink); font: 760 .72rem/1.14 var(--font-ui); text-align: center; overflow-wrap: anywhere; }
.gear-slot-mark { display: grid; flex: 1; justify-items: center; align-content: center; gap: .16rem; padding: .22rem .12rem; color: var(--dim); text-align: center; }
.gear-slot-mark .icon { inline-size: 1.65rem; block-size: 1.65rem; color: var(--ice); opacity: .64; }
.gear-pocket[data-occupied="true"] .gear-slot-mark .icon { color: var(--ember); opacity: 1; }
.gear-slot-mark p { margin: 0; font-size: .63rem; line-height: 1.13; overflow-wrap: anywhere; }
.gear-item { display: grid; gap: .24rem; min-width: 0; min-height: 48px; padding: .22rem; border: 1px solid oklch(66% .085 64); border-radius: .24rem; background: oklch(23% .038 329); color: var(--ink); text-align: start; white-space: normal; overflow-wrap: anywhere; }
.gear-pocket .gear-item { flex: 1; grid-template-rows: 3.55rem minmax(0,1fr); }
.gear-item:hover { border-color: var(--ice); background: oklch(28% .049 329); }
.gear-item:focus-visible { outline-offset: 1px; }
.gear-item[data-inactive="true"] { border-style: dashed; }
.gear-item[data-inactive="true"] img { filter: saturate(.5); }
.gear-item-art { position: relative; display: block; min-height: 2rem; overflow: hidden; border-radius: .12rem; background: oklch(22% .048 314); }
.gear-item-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.gear-item-art > .icon { width: 1.25rem; height: 1.25rem; }
.gear-item-art b { position: absolute; z-index: 2; right: .14rem; top: .12rem; padding: .08rem .19rem; border-radius: .12rem; background: oklch(22% .041 327); color: var(--ink); font: 800 .97rem/.94 var(--font-score); }
.gear-item-copy { display: grid; align-content: start; min-width: 0; gap: .12rem; padding: .19rem .19rem .22rem; border-radius: .13rem; background: oklch(86% .061 76); color: oklch(22% .047 342); }
.gear-item-copy strong { font-size: .70rem; line-height: 1.12; }
.gear-item-copy small { color: oklch(34% .058 324); font-size: .61rem; line-height: 1.12; }
.gear-satchel { display: grid; justify-items: center; align-content: center; gap: .18rem; min-inline-size: 0; min-block-size: 48px; padding: .2rem; color: var(--ink); text-align: center; overflow-wrap: anywhere; background: transparent; border: 1px solid transparent; border-radius: .35rem; }
.gear-satchel:hover { border-color: var(--ice); background: oklch(24% .035 231); }
.gear-satchel .icon { width: 1.55rem; height: 1.55rem; color: var(--ember); }
.gear-satchel strong { font-size: .75rem; }
.gear-satchel span { color: var(--dim); font-size: .65rem; }
.gear-stowage { grid-area: stowage; display: grid; align-content: start; gap: .66rem; min-width: 0; }
.gear-shelf { padding: .3rem .11rem .11rem; border-top: 1px solid oklch(48% .058 64 / .7); scroll-margin-block: .45rem; }
.gear-shelf:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gear-shelf h3 { display: flex; align-items: center; gap: .36rem; margin: 0 0 .38rem; font: 760 .82rem/1.14 var(--font-ui); }
.gear-shelf h3 .icon { width: 1rem; height: 1rem; color: var(--ember); }
.gear-shelf-cards { display: grid; gap: .27rem; }
.gear-shelf .gear-item { grid-template-columns: 2.38rem minmax(0,1fr); align-items: stretch; }
.gear-shelf .gear-item-copy { align-content: center; padding-inline: .36rem; }
.gear-moderation { grid-area: moderation; }
.detail-head .gear-return { display: inline-flex; gap: .3rem; min-block-size: 48px; color: var(--ice); font: 750 .72rem/1.12 var(--font-ui); }
.detail-head .gear-return .icon { flex: none; }
body[data-text="large"] .gear-item-copy strong, body[data-text="large"] .gear-pocket h3 { font-size: .83rem; }
body[data-text="large"] .gear-item-copy small, body[data-text="large"] .gear-slot-mark p, body[data-text="large"] .gear-profile-stats dt { font-size: .76rem; }
@container gear (min-width: 39rem) {
  .gear-sheet-grid { grid-template-columns: minmax(0,1.53fr) minmax(0,1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "table profile" "table stowage" "moderation moderation"; gap: .68rem 1.05rem; }
  .gear-profile { justify-content: center; gap: .38rem .68rem; }
  .gear-table { gap: .48rem; padding: .56rem; }
  .gear-pocket { min-block-size: 5.28rem; }
  .gear-pocket .gear-item { grid-template-rows: 5.3rem minmax(0,1fr); }
}
@media (min-width: 700px) {
  .detail[data-context="player"] [data-gear-commands] { justify-content: end; }
  .detail[data-context="player"] [data-gear-commands] .btn { flex-grow: 0; min-inline-size: 10rem; }
}
@container gear (max-width: 14rem) {
  .gear-table { grid-template-columns: minmax(0,1fr); grid-template-areas: "lineage" "head" "class" "hand-a" "body" "hand-b" "satchel" "feet"; }
  .gear-profile-stats { justify-content: start; }
  .gear-pocket { min-block-size: 0; }
  .gear-pocket h3 { text-align: start; padding-inline: .25rem; }
  .gear-slot-mark { grid-template-columns: auto minmax(0,1fr); align-items: center; justify-items: start; text-align: start; }
  .gear-pocket .gear-item { grid-template-columns: 2.38rem minmax(0,1fr); grid-template-rows: auto; }
  .gear-satchel { grid-template-columns: auto minmax(0,1fr) auto; align-items: center; }
}
@media (max-width: 680px) and (orientation: portrait) {
  .detail[data-context="player"] { max-width: 100%; max-height: calc(100dvh - max(.38rem,env(safe-area-inset-top))); }
  .detail[data-context="player"] .detail-body { padding-inline: .48rem; }
}
@media (max-height: 640px) and (orientation: portrait) {
  @container gear (width > 14rem) {
    .gear-pocket .gear-item { grid-template-rows: 2.15rem minmax(0,1fr); }
    .gear-pocket .gear-item-copy { padding-inline: .13rem; }
    .gear-pocket .gear-state-simple { display: none; }
  }
  .gear-profile { padding-block-end: .22rem; }
  .gear-person { display: flex; }
  .gear-person .avatar { width: 2rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  @container gear (min-width: 39rem) {
    .gear-sheet-grid { grid-template-columns: minmax(0,1.95fr) minmax(0,1fr); gap: .55rem .75rem; }
  }
  .detail[data-context="player"] .detail-head { padding-block: .15rem; }
  .detail[data-context="player"] .detail-body { padding-block: .48rem; }
  .detail[data-context="player"] [data-gear-commands] { justify-content: end; }
  .detail[data-context="player"] [data-gear-commands] .btn { flex-grow: 0; min-inline-size: 8.5rem; }
  .gear-table { gap: .29rem; padding: .38rem; }
  .gear-pocket { min-block-size: 3.45rem; }
  .gear-pocket .gear-item { grid-template-columns: 2.14rem minmax(0,1fr); grid-template-rows: auto; }
  .gear-pocket .gear-item-copy { align-content: center; padding: .12rem .15rem; }
  .gear-slot-mark { grid-template-columns: auto minmax(0,1fr); align-items: center; }
  .gear-slot-mark .icon { width: 1.25rem; height: 1.25rem; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .detail { inset: 0; margin: auto; max-width: min(35rem, calc(100% - 1.25rem)); max-height: calc(100dvh - .75rem); border-radius: .42rem; }
  .detail-head { padding-block: .28rem; }
  .detail:is([data-context="card"],[data-context="discard-choice"]) .card-art { height: clamp(4rem, 23dvh, 8rem); }
}
@media (prefers-reduced-motion: reduce) { .detail[open] { animation: none; } }
body[data-motion="true"] .detail[open] { animation: none; }

.detail[data-context="reactions"] {
  inset: auto 0 max(.65rem,env(safe-area-inset-bottom));
  margin: 0 auto;
  max-width: min(39rem,calc(100% - 1.2rem));
  max-height: min(77dvh,29rem);
  border-color: oklch(67% .071 74 / .72);
  background: oklch(20% .029 246);
  animation: none;
}
.detail[data-context="reactions"]::backdrop { background: oklch(11% .021 248 / .53); }
.detail[data-context="reactions"] .detail-head { padding-block: .23rem; background: oklch(23% .025 245); border-color: oklch(67% .071 74 / .5); }
.detail[data-context="reactions"] .detail-head h2 { font-size: 1.05em; letter-spacing: 0; }
.detail[data-context="reactions"] .detail-head-tools { gap: .67rem; }
.detail[data-context="reactions"] .detail-body { padding-block: .48rem .55rem; }
.detail .reaction-instruction { color: var(--dim); font-size: .75rem; line-height: 1.2; }
.detail .reaction-totals { display: none; }
.detail .reaction-cards {
  display: flex;
  justify-content: safe center;
  align-items: stretch;
  gap: .36rem;
  min-width: 0;
  padding: .28rem .26rem .36rem;
  margin: .32rem 0 0;
  overflow: auto hidden;
  list-style: none;
  scrollbar-width: thin;
}
.reaction-cards li { display: flex; flex: 0 0 clamp(5.4rem,26vw,8.3rem); min-width: 0; }
.reaction-card {
  display: grid;
  grid-template-rows: auto minmax(min-content,1fr);
  gap: .14rem;
  width: 100%;
  min-height: 48px;
  min-width: 0;
  padding: .25rem;
  border: 1px solid oklch(71% .084 74);
  border-radius: .3rem;
  background: oklch(28% .043 53);
  text-align: start;
}
.reaction-card[data-deck="door"] { background: oklch(29% .048 326); border-color: oklch(68% .075 326); }
.reaction-card:hover, .reaction-card:focus-visible { border-color: var(--focus); }
.reaction-card-art { display: grid; place-items: center; overflow: hidden; height: clamp(3.55rem,11dvh,5.4rem); color: var(--ember); border: 1px solid oklch(74% .038 61 / .44); background: oklch(23% .021 249); }
.reaction-card-art img { width: 100%; height: 100%; object-fit: cover; }
.reaction-card-copy { display: grid; align-content: space-between; gap: .24rem; padding: .24rem .25rem; color: oklch(24% .035 47); background: oklch(88% .053 76); }
.reaction-card-copy strong { font-size: .77rem; line-height: 1.13; overflow-wrap: anywhere; }
.reaction-card-copy small { font-size: .65rem; line-height: 1.1; font-weight: 690; }
.reaction-other { margin-block-start: .32rem; }
.detail .reaction-other .detail-actions { grid-template-columns: repeat(auto-fit,minmax(min(100%,10.5rem),1fr)); justify-items: start; }
.reaction-other .btn { min-height: 48px; }
.detail .reaction-other[data-pass-only] .detail-actions { display: flex; justify-content: end; }
.detail .reaction-other[data-pass-only] .btn { width: auto; min-width: 6.2rem; justify-content: center; }
body[data-text="large"] .reaction-card-copy strong { font-size: .88rem; }
.detail[data-context="die-picker"] {
  inset: auto 0 max(.65rem,env(safe-area-inset-bottom));
  margin: 0 auto;
  max-width: min(32rem,calc(100% - .9rem));
  max-height: min(88dvh,36rem);
  border-color: oklch(70% .082 68 / .76);
  background: oklch(20% .029 245);
}
.detail[data-context="die-picker"]::backdrop { background: oklch(11% .021 248 / .53); }
.detail[data-context="die-picker"] .detail-body { padding-block: .48rem max(.55rem,env(safe-area-inset-bottom)); }
.detail[data-context="die-picker"] .detail-body > * + * { margin-block-start: .45rem; }
.die-picker-current { display: flex; align-items: center; gap: .5rem; padding-block-end: .35rem; border-block-end: 1px solid var(--line); }
.die-picker-current p { display: grid; gap: .14rem; min-inline-size: 0; }
.die-picker-current p span { color: var(--dim); font: 680 .7rem/1.18 var(--font-ui); }
.die-picker-current p strong { color: var(--ink); font: 780 .98rem/1.13 var(--font-ui); }
.detail .die-picker-instruction { color: var(--dim); font: 620 .69rem/1.21 var(--font-ui); }
.die-picker-source { display: flex; align-items: center; gap: .38rem; margin-block-end: .28rem; }
.detail-body .die-picker-source h3 { font: 740 .78rem/1.18 var(--font-ui); }
.die-picker-art { flex: none; width: 1.55rem; }
.die-picker-faces { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .28rem; }
.detail .die-picker-face {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .15rem;
  min-block-size: 48px;
  padding: .27rem .15rem;
  color: var(--ink);
  background: oklch(25% .029 242);
  text-align: center;
  font: 730 .68rem/1.1 var(--font-ui);
}
.detail .die-picker-face .arena-die-face { width: 1.6rem; padding: .14rem; }
.die-picker-face small { display: block; margin-block-start: .13rem; font-size: .92em; }
.detail .die-picker-face[data-die-outcome="success"] { border-color: var(--ice); }
.die-picker-face[data-die-outcome="success"] small { color: var(--ice); }
.die-picker-face[data-die-outcome="failure"] small { color: var(--ember); }
.detail .die-picker-face:is(:hover,:focus-visible) { background: oklch(31% .031 242); }
@media (max-width: 680px) and (orientation: portrait) {
  .detail[data-context="die-picker"] { inset-block-end: 0; max-width: 100%; border-radius: .55rem .55rem 0 0; }
}
@media (min-width: 1080px) and (min-height: 641px) {
  .detail[data-context="die-picker"] { inset-inline: auto 1.1rem; max-width: min(32rem,44vw); }
  .die-picker-faces { grid-template-columns: repeat(6,minmax(0,1fr)); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .detail[data-context="die-picker"] { inset-inline: auto .65rem; max-width: min(22rem,47vw); max-height: calc(100dvh - 1.3rem); }
  .detail[data-context="die-picker"] .detail-head { padding-block: .22rem; }
}
@media (max-width: 680px) and (orientation: portrait) {
  .detail[data-context="reactions"] { inset-block-end: 0; max-width: 100%; border-radius: .55rem .55rem 0 0; }
  .detail[data-context="reactions"] .detail-body { padding-block-end: max(.55rem,env(safe-area-inset-bottom)); }
  .reaction-card-copy strong { font-size: .72rem; }
}
@media (max-width: 365px) and (orientation: portrait) {
  .reaction-cards li { flex-basis: max(5.4rem,29vw); }
  .reaction-card { padding-inline: .16rem; }
  .reaction-card-copy { padding-inline: .18rem; }
}
@media (min-width: 1080px) and (min-height: 641px) {
  .detail[data-context="reactions"] { inset-inline: auto max(1.1rem,env(safe-area-inset-right)); max-width: min(36rem,49vw); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .detail[data-context="reactions"] { inset-inline: auto .65rem; max-width: min(22rem,calc(100% - 1.3rem)); }
  .detail .reaction-totals { display: flex; align-items: center; gap: .55rem; color: var(--dim); font-size: .76rem; font-weight: 690; }
  .reaction-totals span:first-child b { color: var(--ice); }
  .reaction-totals span:last-child b { color: var(--ember); }
  .reaction-totals + .reaction-instruction { display: none; }
  .reaction-cards li { flex-basis: 5.9rem; }
  .reaction-card-art { height: clamp(2.55rem,13dvh,3.65rem); }
}

/* Card inspection keeps the illustration and its rules in one frame. */
.detail[data-context="card"] {
  border-color: #ae8a5b82;
  background: #171a1e;
}
.detail[data-context="card"] .detail-head,
.detail[data-context="card"] .detail-card-dock {
  border-color: #ae8a5b50;
  background: #1e211f;
}
.detail[data-context="card"] .detail-head h2 {
  font-family: var(--font-display);
  font-weight: 770;
}
.card-inspection {
  --inspection-trim: #ad8da6;
  display: grid;
  align-items: start;
  gap: .9rem;
  min-inline-size: 0;
}
.card-inspection[data-deck="treasure"] { --inspection-trim: #ca9d69; }
.card-inspection-art {
  min-inline-size: 0;
  padding: .24rem;
  border: 1px solid var(--inspection-trim);
  border-radius: .34rem;
  background: #211821;
}
.card-inspection-copy {
  display: grid;
  align-content: start;
  gap: .72rem;
  min-inline-size: 0;
}
.card-inspection-copy .card-rules h3 { color: var(--ice); font-size: .82em; font-weight: 790; }
.card-inspection-copy .settings-list { padding-block: .66rem; border-block: 1px solid #9e866551; }
.detail .card-inspection .card-art { height: clamp(6.8rem,23dvh,12.25rem); background: #151419; }
.detail .card-inspection .card-art img { object-fit: contain; }
@media (min-width: 750px) {
  .detail[data-context="card"] { max-width: min(53rem,calc(100% - 2.4rem)); }
  .detail[data-context="card"] .card-inspection { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 1.15rem; }
  .detail[data-context="card"] .card-inspection .card-art { height: clamp(8rem,37dvh,22rem); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .detail .card-inspection .card-art { height: 6.8rem; }
  .detail[data-context="card"] .card-inspection { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); }
}

.detail[data-context="consequence"] { border-color: oklch(66% .071 66); background: oklch(20% .03 248); }
.detail[data-context="consequence"] .detail-head { padding-block: .25rem; background: oklch(23% .03 248); }
.detail[data-context="consequence"] .detail-body { padding-block: .65rem; }
.consequence-review-summary { display: flex; align-items: center; gap: .64rem; }
.consequence-review-summary h3 { margin-block: .2rem .4rem; }
.consequence-review-art { display: grid; place-items: center; flex: none; width: 3.85rem; aspect-ratio: 1; overflow: hidden; border: 1px solid oklch(67% .076 65); border-radius: .31rem; background: var(--canvas); }
.consequence-review-art img { width: 100%; height: 100%; object-fit: cover; }
.consequence-review-status { color: var(--ember); margin-bottom: .45rem; font-size: .83em; }
.consequence-review-status:empty { display: none; }
@media (min-width: 1080px) and (min-height: 641px), (max-height: 520px) and (orientation: landscape) {
  .detail[data-context="consequence"] { inset: auto .75rem .75rem auto; margin: 0; max-width: min(29rem,calc(100% - 1.5rem)); }
}

.detail[data-context="help-proposal"] { border-color: oklch(65% .061 72); background: oklch(20% .028 247); }
.detail[data-context="help-proposal"] .detail-head { padding-block: .25rem; background: oklch(23% .029 247); }
.detail[data-context="help-proposal"] .detail-body { padding-block: .5rem; }
.detail[data-context="help-proposal"] .help-split { border-inline: 0; padding: .3rem .42rem; margin-bottom: .42rem; }
.detail[data-context="help-proposal"] .help-contract-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .48rem .4rem; }
.help-contract-fields > .field:has(select:is([name="helperId"],[name="itemId"])) { grid-column: 1 / -1; }
.help-contract-fields .field { font-size: .77rem; }
.help-contract-fields select { min-width: 0; min-height: 48px; font-size: .82rem; }
.help-treasure-stepper { display: grid; grid-template-columns: 48px minmax(48px,1fr) 48px; }
.help-treasure-stepper .btn { justify-content: center; min-width: 48px; min-height: 48px; padding: 0; color: var(--ember); font: 800 1.24rem/1 var(--font-score); }
.help-treasure-stepper .btn:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.help-treasure-stepper .btn:last-child { border-start-start-radius: 0; border-end-start-radius: 0; }
.help-treasure-stepper select { border: 1px solid var(--line); border-radius: 0; padding-inline: .18rem; background: oklch(17% .023 254); color: var(--ink); text-align: center; font: 800 1.08rem/1 var(--font-score); }
.help-draft { display: grid; gap: .25rem; padding: .34rem .44rem; margin-bottom: .42rem; border: 1px solid oklch(63% .053 193 / .52); border-radius: .28rem; background: oklch(24% .032 216); }
.help-draft-overview { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .17rem .5rem; color: var(--dim); font-size: .69rem; line-height: 1.2; }
.help-draft-overview span { display: inline-flex; gap: .28rem; }
.help-draft-overview b { color: var(--ice); font-weight: 800; }
.help-draft-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .38rem; margin: 0; }
.help-draft-split > div { display: flex; align-items: center; justify-content: space-between; gap: .24rem; min-width: 0; padding: .18rem .28rem; background: oklch(18% .026 234); }
.help-draft-split dt { min-width: 0; font-size: .75rem; line-height: 1.12; font-weight: 730; overflow-wrap: anywhere; }
.help-draft-split dd { margin: 0; color: var(--ember); font: 810 1.2rem/1 var(--font-score); }
.help-draft-note { color: var(--dim); font-size: .7rem; line-height: 1.2; }
@media (max-width: 380px) and (orientation: portrait) {
  .help-contract-fields > .field:has([name="treasures"],[name="first"]) > :is(label,span):first-child { min-height: 2.1em; }
}
@media (min-width: 1080px) and (min-height: 641px), (max-height: 520px) and (orientation: landscape) {
  .detail[data-context="help-proposal"] { inset: auto .75rem .75rem auto; margin: 0; max-width: min(30rem,calc(100% - 1.5rem)); }
}