@font-face {
  font-family: "Equestria";
  src: url("assets/fonts/equestria/Equestria.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #f8f4ff;
  --muted: #bdb2d1;
  --panel: rgba(35, 24, 54, .88);
  --purple: #9b65d2;
  --gold: #ffd65b;
  --pink: #ff7abb;
  --line: rgba(255,255,255,.14);
  font-family: Inter, ui-rounded, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 15% 10%, #643775 0, transparent 34%), radial-gradient(circle at 85% 2%, #264f7b 0, transparent 30%), #171120; min-height: 100vh; }
button, select, input, textarea { font: inherit; }
button { border: 1px solid #d5b6ff; border-radius: 999px; color: #1c122a; background: linear-gradient(135deg, #ffe47b, #ff9dcc); padding: .7rem 1.15rem; font-weight: 800; cursor: pointer; }
button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px #0007; }
button:disabled { filter: grayscale(1); opacity: .45; cursor: not-allowed; transform: none; }
.uniform-panel-button { width: 190px; min-height: 44px; padding: .65rem .9rem; font-size: .8rem; line-height: 1.15; text-align: center; }
.masthead { display: flex; justify-content: space-between; gap: 2rem; align-items: center; padding: 2rem clamp(1rem, 5vw, 5rem); border-bottom: 1px solid var(--line); background: #110c19b8; backdrop-filter: blur(16px); }
.masthead-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: .25rem; font-size: clamp(2rem, 5vw, 4.2rem); line-height: .92; letter-spacing: -.05em; } h2 { font-size: 1.2rem; }
.masthead h1 { font-family: "Equestria", ui-rounded, system-ui, sans-serif; font-weight: 400; line-height: 1.1; letter-spacing: .015em; }
.eyebrow { margin-bottom: .7rem; color: var(--gold); letter-spacing: .15em; font-size: .72rem; font-weight: 900; }
main { width: min(1500px, 96vw); margin: 1.5rem auto 5rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 1.2rem; box-shadow: 0 18px 60px #0004; }
.setup-title { margin-bottom: 1rem; }
.setup-title h2 { margin-bottom: 0; }
#setup-content[hidden] { display: none; }
.setup-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: end; }
.setup-content .fineprint { grid-column: 1 / -1; }
label { display: grid; gap: .4rem; color: var(--muted); font-size: .82rem; font-weight: 700; }
select, input, textarea { width: 100%; color: var(--ink); background: #171020; border: 1px solid var(--line); border-radius: 10px; padding: .75rem; }
textarea { resize: vertical; }
.seed-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.seed-controls button { padding-inline: .85rem; border-radius: 10px; }
.turnbar { position: sticky; z-index: 5; top: .5rem; display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: center; gap: .7rem 1rem; padding: .85rem 1rem; margin-bottom: 1rem; background: #21172df0; border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(14px); }
.turnbar strong { display: block; font-size: 1.2rem; }
.turn-summary p { max-width: 760px; margin: .25rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.phase-track { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .42rem; margin: 0; padding: 0; list-style: none; }
.phase-track li { min-width: 0; display: grid; gap: .08rem; padding: .42rem .55rem; color: #9f96aa; background: #ffffff08; border: 1px solid #ffffff14; border-radius: 9px; }
.phase-track li strong { color: inherit; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; }
.phase-track li span { overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.phase-track li.complete { color: #b7e7d5; background: #2f896026; border-color: #62d5a95c; }
.phase-track li.active { color: #24172e; background: linear-gradient(135deg, var(--gold), #ff9dcc); border-color: var(--gold); box-shadow: 0 0 0 2px #ffd65b2a; }
.winner { margin: 1rem 0; padding: 1.3rem; color: #21172d; background: linear-gradient(135deg, var(--gold), #fff5c7); border-radius: 16px; font-weight: 900; font-size: 1.25rem; }
.choice-panel { margin: 1rem 0; border-color: var(--gold); box-shadow: 0 0 0 2px #ffd65b44, 0 18px 60px #0005; }
.choice-panel > p { color: var(--muted); }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .8rem; }
.choice-card { display: grid; align-content: start; gap: .55rem; }
.choice-card .card { height: 100%; }
.choice-card > button { padding: .55rem .7rem; border-radius: 10px; font-size: .72rem; }
.choice-state { margin: 0; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #ffffff0b; font-size: .7rem; line-height: 1.35; }
.choice-state strong { color: var(--accent); }
.choice-option-text { min-height: 7rem; display: grid; place-items: center; padding: 1rem; color: var(--ink); background: #ffffff12; border: 1px solid var(--line); border-radius: 14px; text-align: center; font-weight: 800; }
.choice-pass .choice-option-text { color: var(--muted); }
.ability-panel { margin: 1rem 0; }
.ability-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.player-board { --mat-accent: #6dc7e2; --mat-ink: #16465c; margin: 1rem 0; padding: .8rem; background: linear-gradient(135deg, #2a1c3ddd, #19263ddd); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.player-board.player-2 { --mat-accent: #c89bd8; --mat-ink: #55305f; }
.player-board.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.player-head, .section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.player-head { padding: .15rem .35rem .65rem; }
.player-head h2 { margin-bottom: 0; }
.stats { color: var(--muted); font-size: .85rem; }
.playmat-surface { display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; gap: .75rem; min-height: 470px; padding: 1rem; color: var(--mat-ink); background: radial-gradient(circle at 25% 20%, #ffffffa8 0, transparent 25%), linear-gradient(145deg, color-mix(in srgb, var(--mat-accent) 38%, white), color-mix(in srgb, var(--mat-accent) 68%, #dce5ed)); border: 3px solid color-mix(in srgb, var(--mat-accent) 72%, white); border-radius: 18px; box-shadow: inset 0 0 0 1px #ffffffb8, inset 0 0 55px #ffffff6b; transform-origin: center; }
.is-opponent .playmat-surface { transform: rotate(180deg); }
.mat-center { min-width: 0; display: grid; grid-template-rows: minmax(220px, 1fr) auto auto; gap: .65rem; }
.mat-rail { display: flex; flex-direction: column; justify-content: space-around; gap: .75rem; min-width: 0; }
.main-character-zone, .pile-zone { display: grid; justify-items: center; gap: .35rem; }
.zone-label, .mat-zone-heading, .stage-label { color: color-mix(in srgb, var(--mat-ink) 80%, #281739); font-size: .64rem; font-weight: 1000; letter-spacing: .09em; line-height: 1.1; text-align: center; text-transform: uppercase; }
.adventure-zone, .story-plan-zone, .scene-zone { position: relative; padding: 1.3rem .65rem .55rem; border: 2px solid #ffffffc2; border-radius: 15px; background: #ffffff35; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mat-accent) 45%, transparent); }
.mat-zone-heading { position: absolute; z-index: 2; top: .25rem; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; height: 100%; }
.lane { position: relative; min-height: 205px; display: grid; place-items: center; padding: 1rem .4rem .35rem; border: 1px dashed color-mix(in srgb, var(--mat-ink) 48%, transparent); border-radius: 12px; background: #ffffff21; }
.lane-label { position: absolute; top: .28rem; color: color-mix(in srgb, var(--mat-ink) 72%, transparent); text-align: center; font-size: .58rem; font-weight: 1000; text-transform: uppercase; letter-spacing: .12em; }
.mat-card { position: relative; display: grid; place-items: center; width: min(100%, 118px); aspect-ratio: 5 / 7; padding: .22rem; overflow: hidden; background: #2a1c38; border: 2px solid #ffffffcf; border-radius: 9px; box-shadow: 0 5px 12px #27304155; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.mat-card:hover:not(.empty) { z-index: 5; transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 20px #27304175; }
.mat-card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.mat-card.empty { cursor: default; color: color-mix(in srgb, var(--mat-ink) 48%, transparent); background: #ffffff19; border-style: dashed; box-shadow: none; font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.mat-card-caption { position: absolute; right: .2rem; bottom: .2rem; left: .2rem; overflow: hidden; padding: .24rem .3rem; color: white; background: #170d22d9; border-radius: 5px; font-size: .55rem; font-weight: 900; line-height: 1.15; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.mat-card-badge { position: absolute; z-index: 2; top: .28rem; right: .28rem; min-width: 1.45rem; padding: .2rem .3rem; color: #24172e; background: var(--gold); border: 1px solid #76550b; border-radius: 999px; box-shadow: 0 2px 5px #0005; font-size: .58rem; line-height: 1; text-align: center; }
.adventure-card { width: min(100%, 132px); max-height: 190px; }
.adventure-card.tapped { transform: rotate(90deg) scale(.77); }
.adventure-card.tapped:hover { transform: rotate(90deg) scale(.8); }
.main-character-card { width: 95px; }
.pile-card { width: 74px; cursor: default; }
.story-plan-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.story-plan-slot { position: relative; display: grid; justify-items: center; min-width: 0; padding-top: .8rem; }
.story-plan-slot .stage-label { position: absolute; top: 0; }
.story-card { width: 100%; aspect-ratio: 750 / 537; }
.story-card img { object-fit: contain; }
.story-plan-slot.completed .story-card { border-color: var(--gold); box-shadow: 0 0 0 2px #fff4b2, 0 5px 12px #27304155; }
.story-plan-slot.current .story-card { border-color: #fff; }
.story-plan-slot.upcoming .story-card { filter: saturate(.78); }
.plan-card { position: absolute; z-index: 3; right: -.15rem; bottom: -.15rem; width: 30%; min-width: 34px; cursor: default; transform: rotate(4deg); }
.scene-strip { display: flex; justify-content: center; gap: .38rem; min-height: 92px; overflow-x: auto; padding: .1rem .1rem .25rem; }
.scene-card { flex: 0 0 62px; width: 62px; }
.scene-card.face-down-scene { filter: saturate(.62) brightness(.86); }
.scene-card.tapped { transform: rotate(90deg) scale(.78); }
.hand-panel { margin: 1rem 0; padding: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hand, .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .8rem; }
.card { position: relative; min-height: 222px; padding: .8rem; color: #24172e; background: linear-gradient(165deg, #fff, #eee4f7); border: 3px solid #a56bd4; border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: 0 9px 20px #0005; }
.card[data-set="SD01"] { border-color: #4bbfd8; }
.card[data-set="BP02"] { border-color: #eb6ea9; }
.card.has-alternate-art .id { display: block; padding-right: 2.2rem; }
.alternate-art-badge { position: absolute; z-index: 2; top: .45rem; right: .5rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; color: #251531; background: linear-gradient(135deg, var(--gold), #fff3b5); border: 1px solid #8b6a18; border-radius: 999px; box-shadow: 0 3px 9px #0005; font-size: 1.05rem; font-weight: 1000; line-height: 1; }
.card-art-frame { display: grid; place-items: center; margin: .65rem -.2rem .7rem; padding: .25rem; overflow: hidden; background: #24172e; border: 1px solid #ffffff80; border-radius: 10px; }
.card-art { display: block; width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 7px; }
.card[data-type="story"] .card-art { aspect-ratio: 7 / 5; object-fit: contain; }
.hand .card-art-frame { height: 190px; }
.hand .card-art { height: 100%; aspect-ratio: auto; object-fit: cover; }
.card h3 { margin: .45rem 0 .25rem; line-height: 1; font-size: 1.05rem; }.card .id { color: #6d5879; font-size: .7rem; font-weight: 900; }.card .effect { font-size: .72rem; line-height: 1.32; }.card .type { color: #745184; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.card-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-top: .65rem; }
.card-stat { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; padding: .34rem .25rem; color: #2f2037; background: #f5cf55; border: 1px solid #8b6a18; border-radius: 8px; font-size: .6rem; font-weight: 900; line-height: 1.1; text-align: center; }
.card-stat strong { font-size: .95rem; line-height: 1.1; }.inspiration-stat { color: white; background: #8e55bc; border-color: #633384; }.detail-stats { max-width: 390px; margin: .9rem 0 1.15rem; }.detail-stats .card-stat { flex-direction: row; justify-content: space-between; padding: .65rem .8rem; font-size: .82rem; text-align: left; }.detail-stats .card-stat strong { font-size: 1.15rem; }.item-name { padding-top: .4rem; color: #8b4b81; font-size: .7rem; font-weight: 900; }
.card-actions { display: grid; gap: .3rem; margin-top: .6rem; }.card-actions button { padding: .35rem .5rem; font-size: .7rem; }
.log-title { align-items: flex-start; margin-bottom: .8rem; }
.log-title h2 { margin-bottom: 0; }
.log-player-legend { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.log-panel ol { counter-reset: match-entry; max-height: 310px; overflow-y: auto; overflow-x: hidden; margin: 0; padding: .15rem .2rem .15rem 0; color: var(--muted); list-style: none; }
.log-panel li { counter-increment: match-entry; display: grid; grid-template-columns: 2.2rem 4.6rem minmax(190px, .55fr) minmax(0, 1fr); gap: .65rem; align-items: center; min-width: 0; margin: .35rem 0; padding: .5rem .65rem .5rem .2rem; background: #100b1870; border: 1px solid transparent; border-radius: 12px; }
.log-panel li::before { content: counter(match-entry) "."; width: 100%; color: var(--gold); font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 1000; line-height: 1; text-align: right; }
.log-panel li.current-turn { background: #ffd65b0d; border-color: #ffd65b55; box-shadow: inset 3px 0 var(--gold); }
.log-turn { color: #f3e8ff; font-variant-numeric: tabular-nums; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.log-player { --log-player-color: #6dc7e2; min-width: 0; display: grid; gap: .08rem; padding: .38rem .55rem; color: #f8f4ff; background: color-mix(in srgb, var(--log-player-color) 20%, #171020); border: 1px solid color-mix(in srgb, var(--log-player-color) 68%, white); border-radius: 10px; line-height: 1.12; }
.log-player-1 { --log-player-color: #6dc7e2; }
.log-player-2 { --log-player-color: #ff7abb; }
.log-player.current { border-color: var(--gold); box-shadow: 0 0 0 2px #ffd65b2e; }
.log-player-label { color: var(--log-player-color); font-size: .58rem; font-weight: 1000; letter-spacing: .06em; text-transform: uppercase; }
.log-player strong { min-width: 0; overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.log-player small { color: #d8cde3; font-size: .58rem; font-weight: 800; }
.log-player.legend { width: min(250px, 34vw); }
.log-message { min-width: 0; color: var(--muted); font-size: .76rem; line-height: 1.35; overflow-wrap: anywhere; }
.library { margin-top: 2rem; }.filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
.library-title { margin-bottom: 1rem; }
.library-title > div { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.library-title h2 { margin-bottom: 0; }
.library-title button { padding: .48rem .85rem; font-size: .75rem; }
#library-content[hidden] { display: none; }
.deck-builder { margin-top: 1rem; }
.deck-builder-title { margin-bottom: 1rem; }
.deck-builder-title > div { display: grid; gap: .25rem; }
.deck-builder-title .eyebrow, .deck-builder-title h2 { margin-bottom: 0; }
.deck-builder-title span { color: var(--muted); font-size: .78rem; }
#deck-builder-content[hidden] { display: none; }
.deck-builder-toolbar { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 1rem; align-items: end; }
.deck-builder-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; }
.deck-builder-actions button, .deck-save-bar button { padding: .58rem .85rem; font-size: .75rem; }
.builder-notice { margin: 1rem 0; padding: .8rem 1rem; color: #25182e; background: var(--gold); border-radius: 12px; font-size: .8rem; }
.deck-metadata { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: .8rem; margin-top: 1rem; }
.deck-status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; margin: 1rem 0; }
.deck-status-grid > div { display: flex; justify-content: space-between; gap: .5rem; padding: .75rem; color: var(--muted); background: #100b1899; border: 1px solid var(--line); border-radius: 11px; font-size: .72rem; }
.deck-status-grid strong { color: var(--gold); }
.builder-validation { padding: .85rem 1rem; color: #ffd9df; background: #5a2034a8; border: 1px solid #ff8ca8; border-radius: 12px; font-size: .76rem; }
.builder-validation strong, .builder-validation span { display: block; }
.builder-validation ul { margin: .45rem 0 0; padding-left: 1.2rem; columns: 2; }
.builder-validation.legal { display: flex; justify-content: space-between; gap: 1rem; color: #dffff1; background: #153f32c9; border-color: #63d8aa; }
.deck-zone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.deck-zone { min-width: 0; padding: .9rem; background: #100b1899; border: 1px solid var(--line); border-radius: 14px; }
.deck-zone h3, .deck-picker h3 { margin: 0; font-size: .95rem; }
.deck-zone .section-title span, .deck-picker .section-title span { color: var(--muted); font-size: .68rem; }
.story-builder-zone { grid-column: span 1; }
.deck-single-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; margin-top: .65rem; }
.deck-single-slot > button, .builder-story-slot > button { padding: .4rem .65rem; font-size: .68rem; }
.builder-story-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .65rem; }
.builder-story-slot { display: grid; gap: .35rem; min-width: 0; padding: .5rem; background: #ffffff08; border: 1px solid var(--line); border-radius: 10px; }
.builder-story-slot > span { color: var(--gold); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.deck-list { display: grid; align-content: start; gap: .38rem; max-height: 390px; margin-top: .65rem; overflow: auto; }
.deck-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .35rem; background: #ffffff08; border-radius: 9px; }
.deck-mini-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .55rem; align-items: center; color: var(--ink); cursor: pointer; }
.deck-mini-card img { width: 42px; height: 58px; object-fit: cover; background: #24172e; border: 1px solid #ffffff55; border-radius: 5px; }
.deck-mini-card > div { min-width: 0; display: grid; gap: .15rem; }
.deck-mini-card strong, .deck-mini-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-mini-card strong { font-size: .72rem; }.deck-mini-card span { color: var(--muted); font-size: .62rem; }
.deck-mini-card.empty { min-height: 58px; display: grid; place-items: center; color: var(--muted); background: #ffffff08; border: 1px dashed var(--line); border-radius: 8px; cursor: default; font-size: .68rem; }
.deck-row-actions { display: grid; grid-template-columns: 30px 22px 30px; gap: .2rem; align-items: center; text-align: center; }
.deck-row-actions button { width: 30px; height: 30px; padding: 0; }
.deck-row-actions strong { color: var(--gold); font-size: .75rem; }
.deck-empty { margin: .8rem 0; color: var(--muted); font-size: .72rem; }
.deck-picker { margin-top: 1rem; padding: .9rem; background: #100b1899; border: 1px solid var(--line); border-radius: 14px; }
.builder-filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .6rem; margin: .75rem 0; }
.builder-card-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .48rem; max-height: 540px; overflow: auto; padding-right: .25rem; }
.builder-picker-card { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .5rem; background: #ffffff08; border: 1px solid var(--line); border-radius: 10px; }
.builder-card-preview { width: 48px; height: 66px; padding: 0; overflow: hidden; background: #24172e; border: 1px solid #ffffff55; border-radius: 6px; }
.builder-card-preview:hover { transform: none; }
.builder-card-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.builder-picker-card > div { min-width: 0; display: grid; gap: .18rem; }
.builder-picker-card strong, .builder-picker-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-picker-card strong { font-size: .74rem; }.builder-picker-card span { color: var(--muted); font-size: .61rem; }
.builder-picker-card > button:last-child { padding: .45rem .62rem; font-size: .66rem; }
.deck-save-bar { position: sticky; z-index: 4; bottom: .5rem; display: flex; align-items: center; gap: .6rem; margin-top: 1rem; padding: .75rem; background: #21172df2; border: 1px solid var(--gold); border-radius: 13px; box-shadow: 0 12px 35px #0009; }
.deck-save-bar p { flex: 1; margin: 0; color: var(--muted); font-size: .68rem; }
.fineprint { color: var(--muted); font-size: .78rem; line-height: 1.5; }
dialog { width: min(900px, 92vw); color: var(--ink); background: #21172d; border: 1px solid var(--purple); border-radius: 18px; box-shadow: 0 30px 90px #000b; } dialog::backdrop { background: #08050ab8; backdrop-filter: blur(5px); }.close { position: relative; z-index: 2; float: right; padding: .3rem .7rem; }.detail-effect { line-height: 1.6; color: #e8dff1; }
.detail-layout { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; padding: 1rem .35rem .35rem; }
.detail-art { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #100b18; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 35px #0007; }
.detail-art-button { display: block; width: 100%; padding: 0; overflow: hidden; color: inherit; background: transparent; border: 0; border-radius: 14px; cursor: zoom-in; }
.detail-art-button:hover { transform: none; box-shadow: 0 0 0 3px var(--gold); }
.story-side-gallery { display: grid; gap: 1rem; min-width: 0; }
.story-side-gallery figure { margin: 0; }
.story-side-gallery figcaption { margin-bottom: .4rem; color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.detail-layout[data-type="story"] { grid-template-columns: minmax(390px, 1.25fr) minmax(240px, .75fr); }
.detail-layout[data-type="story"] .detail-art { aspect-ratio: 750 / 537; max-height: none; }
.image-dialog { width: min(1180px, 96vw); max-width: none; padding: 1rem; }
.image-dialog #image-zoom-art { display: block; width: 100%; max-height: 86vh; object-fit: contain; background: #100b18; border-radius: 14px; }
.image-dialog .eyebrow { padding-right: 3rem; }
.alternate-art { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.alternate-art h2 { margin-bottom: .7rem; color: var(--gold); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.alternate-art-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .55rem; }
.alternate-art-link { display: grid; width: 100%; gap: .2rem; padding: .7rem .8rem; color: var(--ink); background: #ffffff0b; border: 1px solid #d8b7ff55; border-radius: 10px; text-align: left; text-decoration: none; }
.alternate-art-link:hover { background: #ffffff16; border-color: var(--gold); transform: translateY(-1px); }
.alternate-art-link strong { color: #f4c9ff; font-size: .78rem; overflow-wrap: anywhere; }.alternate-art-link span { color: var(--muted); font-size: .68rem; }
.lan-dialog { width: min(820px, 94vw); max-height: 90vh; padding: 1.35rem; overflow-y: auto; }
.lan-dialog h1 { margin-bottom: .65rem; font-size: clamp(2rem, 5vw, 3.4rem); }
.lan-intro { max-width: 680px; color: var(--muted); line-height: 1.5; }
.lan-profile { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(240px, 1.3fr) auto; gap: .7rem; align-items: end; padding: 1rem; background: #100b1899; border: 1px solid var(--line); border-radius: 14px; }
.lan-profile-actions { display: flex; gap: .45rem; }
.lan-secondary { color: var(--ink); background: #ffffff12; border-color: var(--line); }
.lan-message { margin: .8rem 0; padding: .7rem .85rem; color: #f4eaff; background: #6b3b8b42; border: 1px solid #bd83e780; border-radius: 11px; font-size: .78rem; font-weight: 800; }
.lan-message.error { color: #ffe3e8; background: #822c414f; border-color: #ff8ca8; }
.lan-section { margin-top: 1rem; }
.lan-section h2 { margin-bottom: 0; }
.lan-section .section-title > span { color: var(--muted); font-size: .7rem; }
.lan-list { display: grid; gap: .55rem; margin-top: .6rem; }
.lan-profile select:disabled, .lan-profile input:disabled { opacity: .5; color: #b4adbc; background: #24212a; cursor: not-allowed; }
#lan-chat-log { height: 210px; overflow-y: auto; margin: .7rem 0; padding: .75rem; background: #100b1899; border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.lan-chat-message + .lan-chat-message { margin-top: .7rem; }
.lan-chat-message strong { color: var(--gold); font-size: .82rem; }
.lan-chat-message time { color: var(--muted); font-size: .68rem; }
.lan-chat-message p { margin: .2rem 0 0; font-size: .85rem; white-space: pre-wrap; }
.lan-chat-compose { display: flex; gap: .55rem; align-items: center; }
.lan-chat-compose input { flex: 1; min-width: 0; }
#lan-chat-warning { color: #ffbdc7; }
.lan-player, .lan-challenge { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .75rem .85rem; background: #ffffff0a; border: 1px solid var(--line); border-radius: 11px; }
.lan-player > div, .lan-challenge > div:first-child { min-width: 0; display: grid; gap: .15rem; }
.lan-player strong, .lan-challenge strong { color: var(--ink); }
.lan-player span, .lan-challenge span { color: var(--muted); font-size: .68rem; }
.lan-challenge-actions { display: flex; gap: .4rem; }
.lan-waiting { border-color: var(--gold); box-shadow: inset 3px 0 var(--gold); }
.lan-game-badge { display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem; padding: .25rem .5rem; color: #25182e; background: var(--gold); border-radius: 999px; font-size: .62rem; font-weight: 1000; vertical-align: middle; }
.lan-connection { position: sticky; z-index: 6; top: .5rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .75rem; align-items: center; margin: 0 0 1rem; padding: .85rem 1rem; border: 2px solid #ff7897; border-radius: 14px; color: #fff2f5; background: #7b2039f2; box-shadow: 0 12px 32px #0008; }
.lan-connection[hidden] { display: none; }
.lan-connection::before { content: "!"; grid-row: 1 / 3; display: grid; place-items: center; width: 2rem; height: 2rem; color: #7b2039; background: #ffd5df; border-radius: 50%; font-size: 1.2rem; font-weight: 1000; }
.lan-connection strong { font-size: .88rem; }
.lan-connection span { color: #ffe1e8; font-size: .72rem; line-height: 1.4; }
.lan-connection.reconnected { color: #eafff1; background: #155b42f2; border-color: #70e0af; }
.lan-connection.reconnected::before { content: "✓"; color: #155b42; background: #c9ffe4; }
.lan-connection.reconnected span { color: #d5ffea; }
@media (max-width: 1000px) { .playmat-surface { grid-template-columns: 82px minmax(0, 1fr) 82px; min-height: 400px; padding: .65rem; }.adventure-card { max-height: 155px; }.lane { min-height: 170px; }.main-character-card { width: 70px; }.pile-card { width: 58px; }.scene-card { flex-basis: 52px; width: 52px; } }
@media (max-width: 850px) { .setup-content { grid-template-columns: 1fr 1fr; }.turnbar { grid-template-columns: 1fr; }.turnbar .actions { justify-content: flex-start; }.phase-track { grid-column: 1; }.masthead { align-items: flex-start; flex-direction: column; }.lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }.filters, .builder-filters, .deck-builder-toolbar, .deck-metadata, .lan-profile { grid-template-columns: 1fr; }.deck-builder-actions { justify-content: flex-start; }.deck-zone-grid { grid-template-columns: 1fr; }.builder-validation ul { columns: 1; }.detail-layout, .detail-layout[data-type="story"] { grid-template-columns: 1fr; }.detail-art { max-height: 58vh; }.log-title { flex-direction: column; }.log-player-legend { width: 100%; justify-content: flex-start; }.log-player.legend { width: min(290px, calc(50% - .25rem)); }.log-panel li { grid-template-columns: 2.2rem 4.6rem minmax(170px, .7fr) minmax(0, 1fr); } }
@media (max-width: 680px) { .playmat-surface { grid-template-columns: 1fr; }.is-opponent .playmat-surface { transform: none; }.mat-rail { flex-direction: row; } }
@media (max-width: 560px) { .phase-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }.lanes { grid-template-columns: 1fr; }.lane { min-height: 150px; }.story-plan-strip, .builder-story-slots, .deck-status-grid { grid-template-columns: 1fr 1fr; }.playmat-surface { padding: .5rem; }.player-head { align-items: flex-start; flex-direction: column; }.deck-save-bar { position: static; flex-wrap: wrap; }.deck-save-bar p { flex-basis: 100%; }.log-player.legend { width: 100%; }.log-panel li { grid-template-columns: 2rem minmax(0, 1fr); align-items: start; }.log-panel li::before { grid-row: 1 / 4; padding-top: .25rem; }.log-turn, .log-panel li .log-player, .log-message { grid-column: 2; }.log-panel li .log-player { width: 100%; } }

/* Continuous 1080px-minimum two-player table. Lane order is explicit in play-view.js:
   keep the opponent's Right opposite our Left at every viewport width. */
#game .table-layout { display: grid; grid-template-columns: minmax(1080px, 1fr) minmax(240px, 320px); justify-content: center; align-items: start; gap: 1rem; }
#game .battlefield-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 14px; }
#game #players { min-width: 1080px; }
#game .turnbar { max-width: 1100px; margin-inline: auto; }
#game .turnbar strong { font-size: .9rem; }
#game .turnbar .actions button { padding: .6rem .75rem; font-size: .75rem; }
#game .phase-track li strong { font-size: .65rem; }
.table-main, .play-dock { min-width: 0; }
.play-dock { position: sticky; top: calc(var(--turnbar-height, 160px) + 1.25rem); max-height: calc(100vh - var(--turnbar-height, 160px) - 2rem); overflow-y: auto; scrollbar-gutter: stable; display: grid; gap: .8rem; }
#game .player-board { margin: 0; padding: .4rem; border-radius: 14px 14px 0 0; overflow: visible; }
#game .player-board.is-home { border-radius: 0 0 14px 14px; }
#game .player-head { flex-direction: row; align-items: center; gap: .5rem; padding: .15rem .35rem .4rem; }
#game .player-head h2 { font-size: 1rem; line-height: 1.35; }
#game .player-head small { display: block; color: var(--muted); font-size: .8rem; font-weight: 500; }
#game .player-head .stats { font-size: .85rem; text-align: right; line-height: 1.45; }
#game .is-home .player-head { order: 2; }
#game .is-home { display: flex; flex-direction: column; }
#game .is-home .player-head { padding-top: .4rem; padding-bottom: 0; }
#game .playmat-surface { --rail: 96px; min-height: 0; padding: .65rem; grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail); grid-template-areas: ". adventure ." "main story retirement" "scene-deck scenes main-deck"; gap: .45rem .65rem; border-width: 1px; border-radius: 10px; transform: none; }
#game .is-opponent .playmat-surface { grid-template-areas: "main-deck scenes scene-deck" "retirement story main" ". adventure ."; }
#game .mat-center, #game .mat-rail { display: contents; }
#game .main-character-zone { grid-area: main; }
#game .left-rail > .pile-zone { grid-area: scene-deck; }
#game .right-rail > .pile-zone:first-child { grid-area: retirement; }
#game .right-rail > .pile-zone:last-child { grid-area: main-deck; }
#game .adventure-zone { grid-area: adventure; }
#game .story-plan-zone { grid-area: story; }
#game .scene-zone { grid-area: scenes; }
#game .main-character-zone, #game .pile-zone { gap: .15rem; align-content: center; }
#game .main-character-zone, #game .pile-zone, #game .zone-label { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#game .zone-label, #game .mat-zone-heading, #game .stage-label { font-size: .75rem; letter-spacing: .025em; line-height: 1.2; }
#game .adventure-zone, #game .story-plan-zone, #game .scene-zone { padding: 1.3rem .45rem .45rem; border-width: 1px; border-radius: 8px; }
#game .adventure-zone { border-color: transparent; background: transparent; box-shadow: none; }
#game .lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
#game .lane { min-height: 166px; padding: 1rem .3rem .3rem; border-radius: 8px; }
#game .lane-label { top: .1rem; font-size: .7rem; }
#game .mat-card { padding: 1px; border-width: 1px; border-radius: 5px; }
#game .mat-card img { border-radius: 4px; object-fit: contain; }
#game .pile-card.empty { font-size: .65rem; white-space: nowrap; }
#game .adventure-card { width: 100px; max-height: none; }
.adventure-stack { position: relative; }
.treat-token { position: absolute; top: 27px; left: 4px; z-index: 5; padding: 4px 7px; border: 1px solid #ffe6a1; border-radius: 12px; background: #492151; color: #fff1b5; font: 700 12px/1.2 system-ui, sans-serif; pointer-events: none; box-shadow: 0 1px 4px #0009; }
#game .equipped-item { position: absolute; right: -25px; bottom: 2px; width: 44px; z-index: 3; border: 2px solid var(--gold); transform: rotate(8deg); }
#game .mat-harmony { position: absolute; top: 2px; left: 2px; padding: 2px 4px; color: #271734; background: var(--gold); border-radius: 5px; font-size: .8rem; font-weight: 900; }
#game .main-character-card, #game .pile-card { width: 64px; }
#game .mat-card-caption { display: none; }
#game .mat-card-badge { top: .12rem; right: .1rem; min-width: 1.4rem; padding: .2rem .3rem; font-size: .85rem; }
#game .adventure-card .mat-card-badge { top: auto; bottom: .1rem; font-size: 1.1rem; min-width: 1.8rem; color: white; background: #7241a3; border-color: #402652; }
#game .story-plan-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; max-width: 650px; margin: auto; }
#game .story-plan-slot { padding-top: .95rem; }
#game .story-card { width: 100%; max-width: 106px; }
#game .plan-card { min-width: 0; width: 28%; max-width: 39px; bottom: .1rem; right: 12%; }
#game .scene-strip { min-height: 82px; justify-content: flex-start; align-items: center; gap: .55rem; padding: .1rem .45rem .4rem; }
#game .is-opponent .scene-strip { justify-content: flex-end; }
#game .is-opponent .story-plan-strip { direction: rtl; }
#game .is-opponent .equipped-item img { transform: rotate(180deg); }
#game .is-opponent [data-motion-zone$=":main-deck"] img,
#game .is-opponent [data-motion-zone$=":scene-deck"] img { transform: rotate(180deg); }
#game .scene-card { flex: 0 0 50px; width: 50px; }
#game .scene-card .mat-card-badge { font-size: .65rem; top: auto; bottom: .05rem; right: .05rem; left: .05rem; padding: .16rem .05rem; }
#game .is-opponent .adventure-card img, #game .is-opponent .main-character-card img, #game .is-opponent .scene-card img, #game .is-opponent .story-card img, #game .is-opponent .plan-card img { transform: rotate(180deg); }
#game .scene-card.tapped, #game .scene-card.choice-selected { transform: rotate(90deg) scale(.8); }
#game .scene-card.tapped:hover, #game .scene-card.choice-selected:hover { transform: rotate(90deg) scale(.84); }
.lane-play { position: absolute; z-index: 4; bottom: .15rem; left: 50%; transform: translateX(-50%); padding: .45rem .5rem; min-height: 32px; width: max-content; max-width: 100%; border-radius: 7px; font-size: .6rem; }
.lane-play:hover { transform: translateX(-50%); }
#game .legal-destination { border: 2px solid #6ce6ff; background: #89eaff48; box-shadow: inset 0 0 16px #5be5ff66; cursor: pointer; }
#game .legal-choice { outline: 3px solid #70e5ff; outline-offset: 2px; box-shadow: 0 0 15px #34cbff90; cursor: pointer; }
#game .choice-selected { outline: 3px solid var(--gold); outline-offset: 2px; }
#game .drag-over { background: #ffe99199; outline: 3px solid var(--gold); }
#game [role="button"]:focus-visible, #game button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#game .hand-panel { margin: .55rem 0 1rem; padding: .65rem .45rem; background: #110c1970; border-radius: 12px; }
#game .hand-panel .section-title { gap: .5rem; margin-bottom: .35rem; flex-wrap: wrap; }
#game .hand-panel h2 { font-size: .85rem; margin: 0; }
#game #harmony { color: var(--gold); font-size: .68rem; }
#game .hand { display: flex; gap: .5rem; overflow-x: auto; padding: .7rem .4rem .6rem; min-height: 142px; align-items: flex-start; }
.hand-entry { flex: 0 0 104px; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.hand-play-actions { display: grid; gap: .25rem; width: 100%; }
.hand-play-actions button { width: 100%; min-height: 30px; padding: .3rem .35rem; font-size: .68rem; line-height: 1.2; white-space: normal; border-radius: 7px; }
.hand-card { position: relative; flex: 0 0 83px; width: 83px; padding: 2px; color: white; background: #261a36; border: 2px solid #8e7ca3; border-radius: 7px; touch-action: none; user-select: none; -webkit-user-select: none; }
.hand-entry > .hand-card { flex: none; }
.hand-card img { width: 100%; display: block; aspect-ratio: 5 / 7; object-fit: contain; pointer-events: none; border-radius: 4px; }
.hand-card-name { display: block; padding: .25rem .05rem; font-size: .56rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.hand-cost, .hand-inspiration { position: absolute; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; font-size: .8rem; border-radius: 50%; top: -.4rem; left: -.25rem; color: #21152c; background: var(--gold); border: 1px solid #402652; }
.hand-inspiration { top: auto; left: auto; right: -.2rem; bottom: 1.3rem; color: white; background: #7241a3; }
.hand-card.playable { border-color: #6ee4ff; box-shadow: 0 0 9px #6ee4ff70; }
.hand-card.selected { border-color: var(--gold); outline: 2px solid var(--gold); transform: translateY(-5px); }
.hand-drag-ghost { position: fixed; z-index: 1000; width: 88px; transform: translate(-50%, -65%) rotate(-4deg); pointer-events: none; border: 3px solid var(--gold); border-radius: 7px; box-shadow: 0 12px 30px #0008; }
#game .choice-panel { margin: .65rem 0; padding: .75rem; }
#game .choice-panel .section-title { align-items: center; }
#game .choice-panel h2 { margin: 0; font-size: .9rem; }
#game .choice-panel > p { font-size: .75rem; line-height: 1.4; margin: .4rem 0; }
#game .choice-cards { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .65rem; }
#game .choice-card { justify-items: center; gap: .35rem; }
#game .choice-card > button { min-height: 40px; width: 100%; }
#game .choice-thumbnail { width: 53px; }
#game .choice-option-text { min-height: 0; padding: .5rem; font-size: .75rem; }
#game .choice-state { font-size: .6rem; padding: .35rem; }
.selected-card-panel { padding: 1rem; }
.selected-card-panel h2 { margin: 0; font-size: 1rem; }
.selected-card-panel p { font-size: .8rem; line-height: 1.5; }
.selected-card-panel #clear-hand { padding: .1rem .45rem; border-radius: 6px; }
.selected-art { display: grid; justify-items: center; gap: .3rem; margin: .75rem auto; padding: 0; background: transparent; color: var(--muted); border: 0; font-size: .65rem; }
.selected-art img { width: 120px; height: 168px; object-fit: contain; border-radius: 6px; }
.selected-card-panel .eyebrow { margin: .5rem 0; font-size: .62rem; }
.selected-effect { margin-top: .8rem; white-space: pre-line; }
.play-dock .ability-panel { margin: 0; padding: 1rem; }
.play-dock .section-title { flex-wrap: wrap; }
.play-dock .section-title span { font-size: .65rem; color: var(--muted); }
.play-dock .ability-actions { margin-top: .6rem; }
.play-dock .ability-actions button { font-size: .75rem; }
.action-replay { grid-column: 1 / -1; min-width: 0; padding-top: .55rem; border-top: 1px solid var(--line); color: #c6f2ff; }
.action-narration { display: grid; gap: .3rem; flex: 1; min-width: 200px; }
.action-narration > span { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #adf0ff; }
.action-replay strong { font-size: .9rem; line-height: 1.4; }
.action-narration p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.playback-speed, .motion-toggle { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--muted); }
.playback-speed select { width: auto; padding: .4rem; }
.motion-toggle input { width: auto; }
.opponent-hand { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .6rem; color: var(--muted); font-size: .72rem; }
.back-fan { display: flex; padding-inline: 16px; height: 57px; align-items: end; }
.back-fan img { width: 36px; height: 50px; object-fit: cover; margin-left: -13px; border: 1px solid #daccef; border-radius: 4px; transform: rotate(var(--fan-angle)); transform-origin: 50% 130%; }
.plan-anchor { display: contents; }
#game .story-progress-character { position: absolute; z-index: 4; left: 5%; bottom: .1rem; width: 36%; max-width: 50px; border: 2px solid var(--gold); transform: rotate(-7deg); }
#game .is-opponent .story-progress-character img { transform: rotate(180deg); }
.resolution-strip { display: flex; justify-content: center; align-items: center; gap: .6rem; padding: .4rem; border: 1px solid #bd9eeb; border-radius: 10px; }
#game .resolving-effect-card { width: 64px; }
#game .resolving-card { outline: 3px solid #89efff; outline-offset: 3px; box-shadow: 0 0 22px #6be6ffd0; }
#game .contact-lane { border-color: #dec2ff; background: #ae78ee42; box-shadow: inset 0 0 26px #c393f688; }
.action-card { padding: .9rem; border-color: #95e9ff; box-shadow: 0 0 22px #5ee2ff25; }
.action-card img { width: min(100%, 160px); max-height: 230px; object-fit: contain; display: block; margin: 0 auto .7rem; border-radius: 8px; }
.action-card[data-type="story"] img { width: 100%; max-height: 180px; }
.action-card strong { display: block; font-size: 1rem; margin-top: .3rem; }
.action-card p { font-size: .8rem; line-height: 1.5; white-space: pre-line; }
.card-flight { position: fixed; pointer-events: none; z-index: 1001; border-radius: 8px; filter: drop-shadow(0 8px 16px #0009); }
.card-flight img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.card-spotlight { position: fixed; z-index: 1004; pointer-events: none; filter: drop-shadow(0 0 20px #6ceaffaa) drop-shadow(0 10px 26px #000c); }
.card-spotlight img { display: block; width: 100%; max-height: 280px; object-fit: contain; border-radius: 10px; }
#game [hidden] { display: none !important; }
.inspiration-float { position: fixed; pointer-events: none; z-index: 1002; padding: .4rem .7rem; background: #6d379c; color: white; border: 1px solid #e5c5ff; border-radius: 999px; white-space: nowrap; font-size: .8rem; font-weight: 800; }
.phase-announcement { position: fixed; pointer-events: none; z-index: 1003; padding: .8rem 1.1rem; text-align: center; color: white; text-shadow: 0 2px 3px #10324b; background: linear-gradient(90deg, #36cce300, #148dcfed 15%, #7550c9f5 85%, #925ed300); border-block: 1px solid #b6f2ff; font-size: clamp(1rem, 2vw, 1.7rem); font-weight: 900; }
.phase-announcement.promote { background: linear-gradient(90deg, #ffa8e200, #885ac7f2 15%, #a24fabf5 85%, #ffa8e200); }
.phase-announcement.contact { font-size: 1.15rem; }
#game.is-presenting .hand-card { cursor: progress; }
#game.is-presenting .mat-card { transition: none; }
#game.is-presenting .hand-card.playable { box-shadow: none; border-color: #8e7ca3; }
#game.instant-playback *, #game.instant-playback *::before, #game.instant-playback *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  #game *, .card-flight, .phase-announcement, .inspiration-float { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 1460px) {
  #game .table-layout { grid-template-columns: minmax(0, 1080px); }
  .play-dock { position: static; max-height: none; overflow: visible; margin-bottom: 1rem; }
  .selected-art { float: left; margin: .75rem .9rem .5rem 0; }
  .selected-card-panel::after { content: ""; display: table; clear: both; }
}
@media (max-width: 560px) {
  #game .player-head small { max-width: 185px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #game .hand { min-height: 123px; }
  .hand-card { flex-basis: 70px; width: 70px; }
  .hand-entry { flex-basis: 92px; }
  .hand-cost, .hand-inspiration { font-size: .72rem; width: 1.2rem; height: 1.2rem; }
}
#retirement-dialog { width: min(1000px, 92vw); max-height: 88vh; overflow-y: auto; }
#retirement-dialog h2 { padding-right: 2rem; }
#retirement-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; }
.retirement-card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 12px; background: #282038; color: #fff3b0; text-align: left; }
.retirement-card img { width: 100%; border-radius: 8px; }
[data-retirement-seat] { cursor: pointer; }
[data-retirement-seat]:focus-visible { outline: 3px solid #ffdc76; outline-offset: 3px; }
.present-tokens { position: absolute; left: 3%; right: 3%; top: 18%; display: flex; flex-wrap: wrap; gap: 3px; z-index: 4; pointer-events: none; }
.present-token { pointer-events: auto; font-size: 10px; padding: 3px 5px; min-height: 24px; color: #fff; background: #5b247c; border: 1px solid #e8b6ff; border-radius: 8px; box-shadow: 0 1px 4px #0008; }
.present-token[data-table-choice] { outline: 2px solid #6fe4ff; }
.board-attachments { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100px; margin-top: 7px; position: relative; z-index: 6; }
.board-attachments:empty { display: none; }
.board-attachments .treat-token { position: static; pointer-events: auto; white-space: normal; }
.board-attachments .present-token, .granted-ability-token { font-size: 11px; line-height: 1.25; white-space: normal; }
.granted-ability-token { display: block; padding: 4px; border: 1px solid #bde8ff; border-radius: 6px; background: #173e52; color: #e3f6ff; }
#game .adventure-stack .equipped-item { bottom: auto; top: 80px; }
.card-hover { position: fixed; z-index: 10000; width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 16px; border: 1px solid #dab3ff; border-radius: 14px; background: #21172ff5; color: #fff; box-shadow: 0 12px 40px #000b; font: 14px/1.5 system-ui, sans-serif; text-align: left; }
.card-hover[hidden] { display: none; }
.card-hover h3 { font: 700 18px/1.25 system-ui, sans-serif; margin: 0 0 8px; color: #ffe18a; }
.card-hover p { white-space: pre-wrap; margin: 8px 0; }
.hover-card-heading { display: flex; gap: 12px; align-items: flex-start; }
.hover-card-art { width: 85px; height: auto; border-radius: 6px; }
.hover-card-art.landscape { width: 130px; }
.card-hover .card-stats { gap: 6px; }
.card-hover .card-stat { padding: 5px; }
.card-attachments { margin-top: 12px; padding-top: 10px; border-top: 1px solid #ffffff40; }
.card-attachments h3 { font-size: 15px; color: #ffe18a; }
.attachment-entry { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ffffff20; }
.attachment-entry img { width: 55px; height: 77px; object-fit: contain; align-self: flex-start; border-radius: 5px; }
.attachment-entry strong { color: #e3c0ff; }
.attachment-entry p { margin: 5px 0 0; white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
.attachment-symbol { font-size: 26px; min-width: 35px; text-align: center; }