/* EUROPE IMAGINED · Duel — cinematic local game interface. */
:root {
  --ink: #f1f5f7;
  --muted: #abb8c5;
  --canvas: #080d13;
  --surface: #101b27;
  --elevated: #172635;
  --gold: #e6b86b;
  --night: #0b141e;
  --teal: #8bd9cf;
  --line: #334455;
  --control-line: #6c8194;
  --radius: 16px;
  --shadow: 0 18px 44px #0005;
  --p0: #9bd6f0;
  --p1: #f0c38d;
  font-family: Inter, "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: radial-gradient(ellipse at 80% 0%, #d6edf545, transparent 47%), var(--canvas); }
button, input, select { font: inherit; }
button, a, input, select { touch-action: manipulation; }
button { cursor: pointer; border: 0; }
button:disabled { cursor: not-allowed; opacity: .52; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 5px;
}
::selection { background: #d6edf5; color: #35566b; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-weight: 650; letter-spacing: -.045em; }
h1 { font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: 1.02; margin-bottom: 24px; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.1; margin-bottom: 20px; }
h3 { font-size: 1rem; }
p { line-height: 1.65; }
.muted { color: var(--muted); }
.eyebrow { display: block; color: var(--gold); text-transform: uppercase; letter-spacing: .17em; font-weight: 750; font-size: .7rem; line-height: 1.6; margin-bottom: 18px; }
.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 12% 52%, #d6edf525, transparent 50%); }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1280px; margin: auto; padding: 24px 32px; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); font-size: 12px; line-height: 1.25; letter-spacing: .18em; }
.brand-mark { font-size: 40px; color: var(--gold); line-height: 1; filter: drop-shadow(0 0 14px #e6b86b35); }
.brand strong { font-weight: 850; }
.masthead-right { display: flex; gap: 24px; align-items: center; }
.mode-pill { font-weight: 800; letter-spacing: .18em; font-size: .8rem; color: var(--gold); }
.mode-pill span { display: block; letter-spacing: .02em; font-size: .68rem; font-weight: 500; margin-top: 4px; color: var(--muted); }
.quiet { background: transparent; color: var(--ink); padding: 12px 10px; min-height: 44px; border-radius: 8px; font-size: .85rem; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #718396; }
.quiet:hover { background: #d6edf50a; text-decoration-color: var(--gold); }
.primary, .secondary, .danger { border-radius: 9px; padding: 14px 22px; font-size: .9rem; min-height: 48px; font-weight: 750; transition: background .15s, border-color .15s, box-shadow .15s; }
.primary { background: linear-gradient(135deg, #d6edf5, var(--gold)); color: #35566b; border: 1px solid #7ba9bd; box-shadow: inset 0 1px #fff5, 0 5px 20px #0003; }
.primary:not(:disabled):hover { background: #d6edf5; box-shadow: 0 0 24px #e6b86b25; }
.secondary { background: var(--elevated); color: var(--ink); border: 1px solid var(--control-line); }
.secondary:hover { background: #d6edf5; border-color: #7ba9bd; }
.danger { background: #d6edf5; color: #173653; border: 1px solid #7ba9bd; }
.danger:hover { background: #d6edf5; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#app { max-width: 1280px; margin: 0 auto; padding: 30px 32px; min-height: 55vh; }
#notice:not(:empty) { max-width: 1216px; margin: 16px auto 0; padding: 14px 18px; border: 1px solid #7ba9bd; background: #edf7fa; border-radius: 10px; color: #08658f; font-size: .9rem; }
/* The scenic image is decorative. Text stays over a dark, solid-backed scrim. */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 530px; padding: 62px 42px; margin: 0 0 26px; border: 1px solid #7ba9bd; border-radius: 18px; overflow: hidden; background: #edf7fa; box-shadow: var(--shadow); }
.hero-copy { position: relative; z-index: 2; max-width: 630px; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero .lede { color: #173653; font-size: 1.04rem; max-width: 425px; }
.hero .eyebrow { max-width: 420px; }
.hero-stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #edf7fa; }
.hero-stage img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 68% center; }
.hero-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #edf7faf5 0%, #edf7fae8 30%, #edf7fa8a 58%, #edf7fa22 100%), linear-gradient(0deg, #edf7fa99 0%, transparent 35%); }
.stage-caption { position: absolute; right: 24px; bottom: 22px; max-width: 40%; z-index: 1; color: #173653; background: #edf7fae6; border: 1px solid #7ba9bd; border-radius: 5px; padding: 7px 10px; font-size: .6rem; line-height: 1.5; letter-spacing: .14em; text-align: right; text-transform: uppercase; }
.feature-line { display: flex; flex-wrap: wrap; gap: 10px; font-size: .72rem; margin-top: 28px; }
.feature-line span { display: flex; gap: 7px; align-items: center; border: 1px solid #7ba9bd; border-radius: 6px; padding: 9px 11px; background: #edf7fae8; color: #173653; }
.setup-panel { background: linear-gradient(135deg, #d6edf5, #edf7fa 65%); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.setup-panel .eyebrow { margin-bottom: 10px; }
.setup-panel h2 { font-size: 1.9rem; margin-bottom: 8px; }
.setup-form { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; margin-top: 26px; }
label { display: block; font-size: .83rem; font-weight: 650; }
input[type=text], select { margin-top: 8px; width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid var(--control-line); border-radius: 8px; background: #edf7fa; color: var(--ink); box-shadow: inset 0 2px 5px #0003; }
input[type=text]:hover, select:hover { border-color: #7ba9bd; }
input[type=radio], input[type=checkbox] { accent-color: var(--gold); width: 18px; height: 18px; }
.setup-bottom { display: flex; justify-content: space-between; gap: 28px; align-items: center; margin-top: 24px; }
.setup-bottom p { font-size: .78rem; color: var(--muted); margin: 0; max-width: 650px; }
.setup-bottom .primary { flex-shrink: 0; }
.first-caller { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .83rem; }
.first-caller label { display: flex; gap: 7px; align-items: center; min-height: 44px; }
.field-help { font-size: .72rem; color: var(--muted); margin-top: 8px; line-height: 1.5; display: block; }
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; border: 1px solid #7ba9bd; background: linear-gradient(125deg, #d6edf5, #edf7fa); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; box-shadow: var(--shadow); }
.score-side { padding: 18px 24px; display: flex; gap: 14px; align-items: center; min-width: 0; border-top: 2px solid #7ba9bd; }
.player-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #7ba9bd; border-radius: 9px; background: #d6edf5; color: var(--p0); font-size: .8rem; font-weight: 800; flex-shrink: 0; }
.player-1 { border-top-color: #7ba9bd; }
.player-1 .player-mark { background: #d6edf5; color: var(--p1); border-color: #7ba9bd; }
.score-side:last-child { justify-content: flex-end; text-align: right; }
.score-info { min-width: 0; }
.score-name { font-weight: 750; font-size: .88rem; overflow-wrap: anywhere; }
.score-meta { font-size: .72rem; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.score-number { font-size: 2.3rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
.score-side:last-child .score-number { order: -1; margin: 0 auto 0 0; }
.clash-marker { display: grid; align-content: center; text-align: center; padding: 12px 25px; border-inline: 1px solid var(--line); font-size: .7rem; color: var(--muted); background: #edf7fa; }
.clash-marker strong { display: block; color: var(--gold); font-size: .95rem; margin: 4px 0; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.toolbar p { margin: 0; font-size: .82rem; color: var(--muted); }
.toolbar p strong { color: var(--ink); }
.private-indicator { display: inline-flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.private-indicator::before { content: ""; width: 7px; height: 7px; border-radius: 100%; background: var(--teal); box-shadow: 0 0 10px #8bd9cf50; flex-shrink: 0; }
.curtain { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #7ba9bd; border-radius: var(--radius); background: #edf7fa; color: var(--ink); text-align: center; padding: 68px 28px; min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.curtain::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #edf7fae8, #edf7fae8), url("assets/bright-v1/expedition-hero.webp") center 45% / cover; }
.curtain::after { content: ""; position: absolute; inset: 12px; border: 1px solid #7ba9bd28; border-radius: 8px; pointer-events: none; }
.curtain > * { position: relative; }
.curtain .eyebrow { color: var(--gold); }
.curtain h2 { font-size: clamp(2.3rem, 5.8vw, 3.7rem); max-width: 750px; overflow-wrap: anywhere; }
.curtain p { max-width: 550px; color: #35566b; margin-bottom: 24px; }
.curtain .primary { max-width: 100%; overflow-wrap: anywhere; }
.curtain .privacy-small { font-size: .75rem; margin: 20px 0 0; color: var(--muted); }
.called-banner { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: #d6edf5; border: 1px solid #7ba9bd; border-left: 3px solid var(--gold); border-radius: 10px; margin-bottom: 24px; }
.called-banner > span { color: var(--gold); font-size: 1.5rem; }
.called-banner strong { font-size: 1.3rem; color: var(--gold); }
.called-banner p { font-size: .8rem; margin: 0; color: var(--muted); }
.turn-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.turn-heading h2 { margin: 8px 0; font-size: 2rem; }
.turn-heading p { margin: 0; font-size: .88rem; color: var(--muted); }
.stat-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 28px; }
.stat-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--control-line); border-radius: 9px; background: var(--surface); padding: 12px 6px; color: var(--ink); font-weight: 700; min-height: 76px; }
.stat-choice small { font-size: .68rem; font-weight: 500; color: var(--muted); }
.stat-choice:not(:disabled):hover { background: #d6edf5; border-color: var(--gold); }
.stat-choice[aria-pressed=true] { background: #d6edf5; border-color: #7ba9bd; color: #35566b; box-shadow: 0 0 0 2px #e6b86b30; }
.stat-choice[aria-pressed=true] small { color: #35566b; }
.section-label { font-size: .75rem; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 22px 0 14px; }
.section-label span { letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--muted); }
.hand-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.place-card { padding: 0; overflow: hidden; text-align: left; background: linear-gradient(150deg, #d6edf5, #edf7fa 75%); border: 1px solid #7ba9bd; border-radius: 12px; color: var(--ink); position: relative; box-shadow: 0 7px 18px #0005, inset 0 1px #b2c7d515; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s, border-color .15s; }
.place-card:not(:disabled):hover { transform: translateY(-4px); border-color: #7ba9bd; box-shadow: 0 12px 25px #0007; }
.place-card.selected { outline: 3px solid var(--gold); outline-offset: 3px; border-color: var(--gold); box-shadow: 0 0 26px #e6b86b22; }
.place-card.selected::after { content: "✓"; position: absolute; top: 9px; right: 9px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; background: var(--gold); color: #35566b; font-weight: 900; box-shadow: 0 3px 12px #0007; }
.place-card .card-art { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; border-bottom: 1px solid #7ba9bd; }
.card-heading { padding: 13px 12px 10px; min-height: 89px; }
.card-kicker { display: flex; align-items: center; justify-content: space-between; font-size: .625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); gap: 4px; margin-bottom: 8px; }
.card-heading h3 { font-size: 1.03rem; line-height: 1.2; letter-spacing: -.015em; font-weight: 650; margin: 0; }
.ratings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0 10px 10px; margin-top: auto; }
.rating { text-align: center; background: #edf7fa; border: 1px solid #7ba9bd; border-radius: 5px; padding: 6px 1px; }
.rating strong { display: block; font-size: .95rem; font-variant-numeric: tabular-nums; }
.rating span { font-size: .6875rem; text-transform: uppercase; letter-spacing: 0; color: #35566b; }
.rating.highlight { background: #d6edf5; color: #35566b; border-color: #7ba9bd; }
.rating.highlight span { color: #35566b; }
.card-power { font-size: .7rem; font-weight: 750; border-top: 1px solid #7ba9bd; padding: 9px 12px; background: #edf7fa; display: flex; justify-content: space-between; gap: 5px; color: #08658f; }
.card-copy { font-weight: 400; color: var(--muted); }
.selection-panel { margin-top: 26px; border: 1px solid #7ba9bd; border-top: 2px solid var(--gold); border-radius: 12px; background: linear-gradient(130deg, #d6edf5, #edf7fa); padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.selection-panel h3 { font-size: 1.5rem; letter-spacing: -.025em; font-weight: 650; margin-bottom: 8px; }
.selection-panel p { font-size: .85rem; margin-bottom: 12px; }
.power-toggle { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid #7ba9bd; border-radius: 9px; background: #edf7fa; font-size: .85rem; line-height: 1.55; }
.power-toggle input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; }
.power-toggle strong { color: #08658f; }
.option-label { margin-top: 14px; }
.decision-note { font-size: .8rem; padding: 12px 0 0; color: var(--muted); }
.commit-bar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: #edf7faf5; backdrop-filter: blur(14px); padding: 18px 0 12px; margin-top: 18px; border-top: 1px solid #7ba9bd; }
.commit-bar p { font-size: .78rem; color: #35566b; margin: 0; max-width: 650px; }
.commit-bar .primary { flex-shrink: 0; }
.public-piles { margin-top: 25px; border-top: 1px solid var(--line); padding-top: 16px; }
.public-piles summary { cursor: pointer; font-size: .85rem; font-weight: 700; padding: 14px 0; min-height: 44px; }
.pile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 15px; }
.pile-player { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; overflow-wrap: anywhere; }
.pile-player h3 { margin-bottom: 12px; }
.pile-player p { font-size: .78rem; margin-bottom: 8px; }
.pile-list { font-size: .75rem; line-height: 1.8; padding-left: 18px; margin: 8px 0 16px; }
.result-head { text-align: center; padding: 28px 0 18px; }
.result-head .eyebrow { margin-bottom: 14px; }
.result-head h2 { font-size: clamp(2.3rem, 6vw, 3.8rem); margin-bottom: 14px; overflow-wrap: anywhere; }
.result-head p { margin-bottom: 8px; color: #35566b; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.result-card { background: linear-gradient(130deg, #d6edf5, #edf7fa); border: 1px solid #7ba9bd; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.result-portrait { display: grid; grid-template-columns: 40% 1fr; align-items: center; background: #edf7fa; border-bottom: 1px solid #7ba9bd; }
.result-portrait .card-art { width: 100%; height: 180px; object-fit: cover; }
.result-portrait .result-name { padding: 18px; min-width: 0; }
.result-name h3 { font-size: 1.4rem; font-weight: 650; line-height: 1.17; letter-spacing: -.025em; margin: 8px 0; }
.result-name p { margin: 0; font-size: .8rem; color: var(--muted); }
.result-math { padding: 22px; }
.math-row { display: flex; justify-content: space-between; gap: 14px; font-size: .85rem; padding: 8px 0; }
.math-row span { line-height: 1.45; color: #35566b; }
.math-row strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.math-total { border-top: 1px solid #7ba9bd; margin-top: 9px; padding-top: 14px; font-weight: 750; align-items: center; }
.math-total span { color: var(--ink); }
.math-total strong { font-size: 1.7rem; color: var(--gold); }
.result-note { font-size: .8rem; line-height: 1.65; background: #edf7fa; border: 1px solid #7ba9bd; border-radius: 9px; margin: 16px 0 0; padding: 13px; color: #35566b; }
.result-note strong { color: var(--ink); }
.result-actions { display: flex; justify-content: center; gap: 12px; margin: 28px 0 12px; flex-wrap: wrap; }
.strategy-box { border: 1px solid #7ba9bd; border-left: 3px solid var(--gold); border-radius: 0 9px 9px 0; padding: 16px 20px; margin: 24px 0; background: #edf7fa; font-size: .85rem; color: #35566b; }
.strategy-box p { margin: 0; }
.strategy-box strong { color: #08658f; }
.cleanup-message { background: #d6edf5; border: 1px solid #7ba9bd; border-left: 3px solid var(--teal); padding: 18px; border-radius: 10px; margin-bottom: 22px; font-size: .9rem; }
.history { margin-top: 20px; font-size: .8rem; }
.history summary { padding: 14px 0; cursor: pointer; font-weight: 700; min-height: 44px; }
.history ol { padding-left: 22px; line-height: 1.8; color: #35566b; }
.empty-state { padding: 32px; text-align: center; border: 1px dashed #7ba9bd; background: #edf7fa; border-radius: 12px; color: var(--muted); margin-top: 24px; }
.save-status { font-size: .72rem; color: var(--muted); }
.resume-box { background: #edf7fa; border: 1px solid #7ba9bd; border-radius: 14px; color: var(--ink); padding: 24px; display: flex; align-items: center; gap: 20px; justify-content: space-between; }
.resume-box p { margin: 0; font-size: .85rem; }
footer { max-width: 1216px; margin: 20px auto 0; border-top: 1px solid var(--line); padding: 25px 0 40px; display: flex; flex-direction: column; gap: 8px; font-size: .72rem; color: var(--muted); line-height: 1.5; }
footer strong { font-size: .8rem; font-weight: 500; color: var(--ink); }
dialog { border: 1px solid #7ba9bd; border-radius: 16px; width: min(740px, calc(100% - 24px)); padding: 32px; max-height: 90vh; overflow: auto; background: #edf7fa; color: var(--ink); box-shadow: 0 28px 90px #000b; }
dialog::backdrop { background: #edf7fae3; backdrop-filter: blur(7px); }
.dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 15px; }
.dialog-top .eyebrow { margin: 0; }
dialog .lede { font-size: 1.05rem; color: #173653; }
dialog p { font-size: .87rem; color: #35566b; }
dialog h3 { color: #08658f; }
.tutorial-steps { padding-left: 24px; margin: 24px 0; font-size: .9rem; line-height: 1.7; color: #35566b; }
.tutorial-steps li { padding-left: 5px; margin-bottom: 14px; }
.tutorial-steps strong { color: var(--ink); }
.tutorial-steps li::marker { color: var(--gold); font-weight: 700; }
.rules-box { padding: 20px; background: #edf7fa; border: 1px solid #7ba9bd; border-radius: 10px; margin: 22px 0; }
.rules-box p:last-child { margin-bottom: 0; }
.powers-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 25px; }
.powers-guide p strong { display: block; margin-bottom: 3px; color: var(--ink); }
.fatal { margin: 30px; padding: 30px; border: 1px solid #ba6870; background: #d6edf5; color: #08658f; border-radius: 12px; }
.rating-notice { font-size: .74rem; color: var(--muted); margin: 16px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.setup-error { padding: 24px; background: #d6edf5; color: #08658f; border: 1px solid #ba6870; border-radius: 14px; margin-bottom: 20px; }
.setup-error h2 { font-size: 1.7rem; color: #173653; }
.setup-error p { font-size: .85rem; }
@media (max-width: 1000px) {
  .hand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { min-height: 490px; padding: 42px 30px; }
  .hero-copy { max-width: 520px; }
  .score-side { padding: 15px; }
  .clash-marker { padding: 12px 16px; }
  .card-heading { min-height: 78px; }
  footer { margin-inline: 32px; }
}
@media (max-width: 700px) {
  .masthead { padding: 18px 20px; }
  .masthead-right { gap: 10px; }
  .brand { font-size: 10px; gap: 8px; }
  .brand-mark { font-size: 32px; }
  .mode-pill { font-size: .7rem; }
  .mode-pill span { font-size: .625rem; }
  .quiet { font-size: .78rem; padding-inline: 7px; }
  .masthead-right .quiet { max-width: 90px; }
  #app { padding: 20px 18px; }
  .hero { min-height: 590px; padding: 45px 24px 68px; align-items: flex-end; margin-bottom: 20px; border-radius: 14px; }
  .hero-copy { max-width: 500px; }
  .hero h1 { font-size: clamp(3.1rem, 11vw, 4.5rem); }
  .hero .lede { font-size: .95rem; margin-bottom: 12px; }
  .hero .eyebrow { max-width: 320px; font-size: .65rem; }
  .hero-stage img { object-position: 68% center; }
  .hero-stage::after { background: linear-gradient(0deg, #edf7fafa 0%, #edf7faeb 45%, #edf7fa99 78%, #edf7fa33); }
  .stage-caption { max-width: calc(100% - 48px); left: 24px; right: auto; bottom: 19px; font-size: .55rem; padding: 6px 8px; }
  .feature-line { margin-top: 20px; gap: 8px; font-size: .68rem; }
  .feature-line span { padding: 8px; }
  .setup-panel { padding: 23px; }
  .setup-form { grid-template-columns: 1fr 1fr; gap: 16px; }
  .seed-field { grid-column: 1/-1; }
  .setup-bottom { align-items: flex-start; flex-direction: column; gap: 20px; }
  .setup-bottom .primary { width: 100%; }
  .first-caller { font-size: .78rem; gap: 10px; }
  .scoreboard { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); margin-bottom: 18px; border-radius: 12px; }
  .score-side { padding: 12px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; text-align: left; }
  .score-side:last-child { justify-content: unset; text-align: right; grid-template-columns: minmax(0, 1fr) auto; }
  .score-side:last-child .player-mark { order: 2; }
  .score-side:last-child .score-info { order: 1; }
  .score-side .player-mark { width: 26px; height: 26px; font-size: .66rem; border-radius: 6px; }
  .score-name { font-size: .76rem; line-height: 1.25; }
  .score-meta { font-size: .625rem; }
  .score-number { grid-column: 1/-1; margin: 0; font-size: 1.7rem; }
  .score-side:last-child .score-number { order: 3; margin: 0; }
  .clash-marker { padding: 8px 4px; font-size: .58rem; }
  .clash-marker strong { font-size: .75rem; }
  .curtain { padding: 44px 22px; min-height: 400px; }
  .curtain p { font-size: .87rem; }
  .curtain h2 { font-size: 2.4rem; }
  .hand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-heading { padding: 11px 10px 9px; min-height: 86px; }
  .card-heading h3 { font-size: 1rem; }
  .ratings { padding: 0 7px 9px; gap: 3px; }
  .rating span { font-size: .6875rem; }
  .card-power { padding: 9px 10px; font-size: .68rem; }
  .card-copy { font-size: .625rem; }
  .card-kicker { font-size: .625rem; letter-spacing: 0; flex-wrap: wrap; }
  .stat-choices { gap: 7px; }
  .stat-choice { font-size: .75rem; min-height: 72px; padding: 10px 4px; }
  .stat-choice small { font-size: .625rem; }
  .selection-panel { grid-template-columns: 1fr; padding: 20px; gap: 12px; }
  .commit-bar { gap: 10px; align-items: stretch; flex-direction: column; padding: 13px 0 max(10px, env(safe-area-inset-bottom)); }
  .commit-bar p { font-size: .74rem; }
  .commit-bar .primary { width: 100%; }
  .result-grid { gap: 16px; grid-template-columns: 1fr; }
  .result-portrait { grid-template-columns: 35% 1fr; }
  .result-portrait .card-art { height: 155px; }
  .result-name h3 { font-size: 1.3rem; }
  .pile-grid { grid-template-columns: 1fr; }
  .turn-heading { gap: 10px; }
  .turn-heading h2 { font-size: 1.7rem; }
  .turn-heading p { font-size: .8rem; }
  .called-banner { padding: 13px; gap: 12px; }
  .called-banner strong { font-size: 1.1rem; }
  .called-banner p { font-size: .75rem; }
  footer { margin: 14px 18px 0; padding-bottom: 28px; font-size: .7rem; }
  .powers-guide { grid-template-columns: 1fr; gap: 0; }
  dialog { padding: 23px; }
  .resume-box { align-items: flex-start; flex-direction: column; }
  #notice:not(:empty) { margin: 12px 18px 0; }
  .result-head { padding-top: 20px; }
}
@media (max-width: 380px) {
  .masthead { padding: 15px 13px; }
  .mode-pill span { max-width: 60px; }
  .masthead-right { gap: 5px; }
  #app { padding-inline: 12px; }
  .hero { padding-inline: 20px; min-height: 610px; }
  .hero h1 { font-size: 3.05rem; }
  .setup-panel { padding: 19px; }
  .setup-form { grid-template-columns: 1fr; }
  .card-heading h3 { font-size: .95rem; }
  .card-heading { min-height: 100px; }
  .ratings { padding-inline: 5px; gap: 2px; }
  .rating span { font-size: .6875rem; }
  .stat-choice { font-size: .7rem; }
  .score-meta { font-size: .625rem; }
  .card-power { padding-inline: 8px; flex-wrap: wrap; }
  .result-portrait { grid-template-columns: 1fr; }
  .result-portrait .card-art { height: 155px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .place-card:not(:disabled):hover { transform: none; }
}
@media (forced-colors: active) {
  .place-card.selected { outline: 3px solid Highlight; }
  .stat-choice[aria-pressed=true] { border: 3px solid Highlight; }
  .primary, .secondary, .danger { border: 1px solid ButtonText; }
}

/* Private pre-lock recap: values remain inside the lifecycle-cleared private DOM. */
.commit-summary { min-width: 0; display: grid; gap: 4px; font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
.commit-summary > strong { color: var(--gold); }
.commit-summary > span { display: block; color: #173653; }
.commit-summary p { margin-top: 3px; }

/* Luminous atlas / game-only colour refresh; original palette, no brand affiliation. */
:root{color-scheme:light;--ink:#173653;--muted:#35566b;--canvas:#d6edf5;--surface:#edf7fa;--elevated:#d9eff5;--gold:#08658f;--night:#d7edf5;--teal:#08736e;--line:#a1c7d6;--control-line:#648fa5;--shadow:0 12px 30px #087fbe18;--p0:#08658f;--p1:#765014}
body{background:radial-gradient(ellipse at 90% 5%,#19b6d24d,transparent 45%),radial-gradient(ellipse at 0 70%,#14a6a02b,transparent 48%),linear-gradient(140deg,#cceafa,#e5f5f6 55%,#c2e8ed);background-attachment:fixed}.stars{background:radial-gradient(ellipse at 12% 52%,#14a6a018,transparent 50%)}
::selection{background:#19b6d2;color:#173653}.masthead{border-color:#87b8ce}.brand-mark{color:#087fbe;filter:none}
.primary{background:linear-gradient(135deg,#0879b5,#086aab);color:#fff;border-color:#08658f;box-shadow:inset 0 1px #ffffff55,0 5px 16px #087fbe28}.primary:not(:disabled):hover{background:#08658f;box-shadow:0 5px 16px #087fbe33}
.secondary{background:#edf7fa;color:#173653}.secondary:hover{background:#c8e8f2}.danger{background:#9a303c;color:#fff;border-color:#9a303c}.danger:hover{background:#7c2631}
.hero-stage::after{background:linear-gradient(90deg,#edf7fafc 0%,#edf7faf5 35%,#edf7fac9 50%,#edf7fa22 75%,transparent)}.hero h1,.hero .lede{color:#173653}.hero{background:#c7eaf1}.stage-caption,.feature-line span{background:#edf7faf5;color:#173653;border-color:#87b8ce}
input[type=text],select{box-shadow:inset 0 1px 3px #087fbe15}.player-mark{background:#c4e8f6;color:#08658f}.player-1 .player-mark{background:#fff0cf;color:#765014}
.curtain::before{background:linear-gradient(90deg,#edf7faf5,#edf7fae6),url('assets/bright-v1/expedition-hero.webp') center 45%/cover}.curtain p{color:#35566b}.curtain::after{border-color:#087fbe55}
.stat-choice[aria-pressed=true],.rating.highlight{background:#0879b5;border-color:#08658f;color:#fff}.stat-choice[aria-pressed=true] small,.rating.highlight span{color:#fff}.place-card.selected{outline-color:#087fbe;border-color:#087fbe;box-shadow:0 0 0 5px #19b6d21a}.place-card.selected::after{background:#0879b5;color:#fff}.place-card{box-shadow:var(--shadow)}
.commit-bar{background:#edf7faf7;border-color:#648fa5}.commit-summary>strong{color:#08658f}.commit-summary>span,.commit-bar p{color:#35566b}.power-toggle strong{color:#08658f}
.strategy-box,#notice:not(:empty){background:#fff0cf;color:#765014;border-color:#ad7a28}.strategy-box strong{color:#765014}
dialog{background:#edf7fa;color:#173653}dialog::backdrop{background:#17365399}.fatal,.setup-error{background:#fff0f0;color:#9a303c;border-color:#ba6870}.setup-error h2{color:#9a303c}
@media(max-width:700px){.hero-stage::after{background:linear-gradient(0deg,#edf7fafc 0%,#edf7faf5 48%,#edf7fa88 75%,transparent)}}

/* EI-261025-B3 — bold navy/teal presentation candidate.
   Append-only and reversible. Artwork, rules, JavaScript and save data unchanged; wrapper identity is tracked separately. */
:root {
  color-scheme: dark; --ink: #edf4f5; --muted: #b9cbd3; --canvas: #091520;
  --surface: #122839; --elevated: #1b3948; --gold: #f2bb61; --night: #0b1c28;
  --teal: #67dcc8; --line: #31515f; --control-line: #6c909e;
  --shadow: 0 12px 30px #00000035; --p0: #8bcbe7; --p1: #f2cc8e;
}
body { background: radial-gradient(ellipse at 90% 0, #16455370, transparent 52%), linear-gradient(145deg, #091520, #102b35); }
.stars { background: none; }
::selection { background: #67dcc8; color: #091520; }
.masthead { background: #0b1c28; border-color: #31515f; }
.brand-mark { color: #67dcc8; filter: none; }
.primary { background: linear-gradient(135deg, #f2bb61, #e5a74b); color: #091520; border-color: #f2bb61; box-shadow: inset 0 1px #ffffff40, 0 5px 16px #00000040; font-weight: 800; }
.primary:not(:disabled):hover { background: #ffd18a; color: #091520; border-color: #ffd18a; box-shadow: 0 6px 18px #00000050; }
.secondary { background: #1b3948; color: #edf4f5; border-color: #6c909e; }
.secondary:hover { background: #244b5b; color: #edf4f5; border-color: #8bcbe7; }
.danger { background: #482936; color: #ffd7db; border-color: #b27987; }
.danger:hover { background: #603542; }
.hero, .hero-stage { background: #091520; border-color: #31515f; }
.hero-stage img, .place-card .card-art, .result-portrait .card-art { filter: none; }
.hero-stage::after { background: linear-gradient(90deg, #09152066, transparent 65%); }
.hero-copy { background: linear-gradient(110deg, #091520f5, #102b35f0); padding: 28px; border: 1px solid #31515f; border-radius: 12px; }
.hero h1 { color: #edf4f5; }
.hero h1 em, .hero .eyebrow { color: #67dcc8; }
.hero .lede { color: #d3e0e5; }
.stage-caption, .feature-line span { background: #102b35f5; color: #edf4f5; border-color: #6c909e; }
.setup-panel, .scoreboard, .place-card, .selection-panel, .result-card { background: linear-gradient(135deg, #183647, #122839); color: #edf4f5; border-color: #31515f; }
input[type=text], select { background: #0b1c28; color: #edf4f5; border-color: #6c909e; box-shadow: inset 0 1px 3px #00000030; }
input[type=text]:hover, select:hover { border-color: #8bcbe7; }
.player-mark { background: #183e52; color: #bce5f6; border-color: #6c909e; }
.player-1 .player-mark { background: #3a3023; color: #f2cc8e; border-color: #ab8959; }
.score-side { border-top-color: #67dcc8; }
.player-1 { border-top-color: #f2bb61; }
.clash-marker { background: #0b1c28; border-color: #31515f; }
.curtain { background: #091520; color: #edf4f5; border-color: #31515f; }
.curtain::before { background: linear-gradient(90deg, #091520f5, #102b35f0), url('assets/bright-v1/expedition-hero.webp') center 45%/cover; }
.curtain::after { border-color: #6c909e; }
.curtain p, .rating span, .commit-summary>span, .commit-bar p, .result-head p,
.math-row span, .result-note, .history ol, dialog p, .tutorial-steps { color: #b9cbd3; }
.called-banner, .cleanup-message { background: #1b3948; color: #edf4f5; border-color: #6c909e; }
.stat-choice { border-color: #6c909e; }
.stat-choice:not(:disabled):hover { background: #244b5b; color: #edf4f5; border-color: #67dcc8; }
.stat-choice[aria-pressed=true], .rating.highlight { background: #67dcc8; color: #091520; border-color: #67dcc8; box-shadow: none; }
.stat-choice[aria-pressed=true] small, .rating.highlight span { color: #091520; }
.place-card { box-shadow: var(--shadow); }
.place-card:not(:disabled):hover { border-color: #8bcbe7; box-shadow: 0 12px 25px #00000060; }
.place-card.selected { outline-color: #f2bb61; border-color: #f2bb61; box-shadow: 0 0 0 5px #f2bb6120; }
.place-card.selected::after { background: #f2bb61; color: #091520; }
.place-card .card-art { border-color: #31515f; }
.rating { background: #0b1c28; border-color: #6c909e; }
.rating.highlight { background: #67dcc8; color: #091520; border-color: #67dcc8; }
.card-power { background: #0b1c28; color: #67dcc8; border-color: #31515f; }
.selection-panel { border-top-color: #67dcc8; }
.power-toggle, .result-portrait, .result-note, .rules-box, .empty-state, .resume-box { background: #122839; border-color: #6c909e; }
.power-toggle strong, .commit-summary>strong { color: #67dcc8; }
.commit-bar { background: #0b1c28fa; border-color: #6c909e; }
.result-portrait, .math-total { border-color: #31515f; }
.math-total span { color: #edf4f5; }
.strategy-box, #notice:not(:empty) { background: #3a3023; color: #f2cc8e; border-color: #ab8959; }
.strategy-box strong { color: #f2cc8e; }
dialog { background: #122839; color: #edf4f5; border-color: #6c909e; }
dialog::backdrop { background: #050d17b3; }
dialog .lede { color: #edf4f5; }
dialog h3 { color: #67dcc8; }
.fatal, .setup-error { background: #482936; color: #ffd7db; border-color: #b27987; }
.setup-error h2 { color: #ffd7db; }
@media (max-width: 700px) {
  /* Keep a bright scenic strip; give copy its own substantial dark surface. */
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; }
  .hero-stage { position: relative; inset: auto; order: -1; height: 220px; flex: none; z-index: 0; }
  .hero-stage img { object-position: 65% center; filter: none; }
  .hero-stage::after { background: linear-gradient(0deg, #091520, transparent 28%); }
  .hero-copy { max-width: none; padding: 26px 24px 30px; border: 0; border-radius: 0; background: #091520; }
  .stage-caption { bottom: 18px; }
}
@media (forced-colors: active) {
  .place-card.selected { outline-color: Highlight; }
  .stat-choice[aria-pressed=true] { border-color: Highlight; }
}

/* Selectable cards need a visible boundary even before selection. */
.place-card { border-color: #6c909e; }

/* EI-DUEL-261025-S1.2 — Ilse identity, solo only. Full portrait file is never cropped. */
.solo-rival-intro { display: grid; grid-template-columns: minmax(96px, 144px) minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 26px; }
.solo-rival-portrait { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; border: 1px solid var(--control-line); border-radius: 12px; }
.solo-rival-intro .eyebrow { margin-bottom: 10px; }
.solo-rival-intro h2 { margin-bottom: 10px; overflow-wrap: anywhere; }
.solo-rival-intro p:last-child { margin-bottom: 0; }
.solo-rival-label { color: var(--teal); font-weight: 700; }
.player-mark.rival-avatar { position: relative; width: 48px; height: 48px; flex: 0 0 48px; overflow: hidden; border-radius: 50%; border: 1px solid var(--control-line); }
.rival-avatar-image { position: absolute; display: block; width: 220%; max-width: none; height: auto; left: -52%; top: -12%; }
.rival-kind { color: var(--muted); font-size: .7rem; line-height: 1.35; margin: 3px 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .solo-rival-intro { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .solo-rival-intro h2 { font-size: 1.65rem; }
  .solo-rival-intro p { font-size: .82rem; }
  .score-side .player-mark.rival-avatar { width: 32px; height: 32px; }
  .rival-kind { font-size: .625rem; }
}
@media (max-width: 380px) {
  .solo-rival-intro { grid-template-columns: minmax(0, 1fr); }
  .solo-rival-portrait { width: 120px; }
}