/* First battle color pass: page badge, battlefield surfaces and dialog chrome.
   Card faces, status effects, attribute blue and reaction red stay untouched. */
:root{--battle-surface:#e4e4e4;--battle-surface-border:#b5b5b5;--battle-ink:#222;--battle-muted:#606060;--battle-hud:#000b}
/* Explicit version scope also covers the independent v0.142 teaching view. */
body:is([data-game-version="v0.42"],[data-game-version="v0.142"],[data-game-version="v0.242"]) .card .card-stat.card-attack{background:#fff0f0}
body:is([data-game-version="v0.42"],[data-game-version="v0.142"],[data-game-version="v0.242"]) .card .card-stat.card-defense{background:#eef5ff}
body:is([data-game-version="v0.42"],[data-game-version="v0.142"],[data-game-version="v0.242"]) .card .card-stat.card-attack:not(.stat-buffed):not(.stat-nerfed){color:#8b3a3a}
body:is([data-game-version="v0.42"],[data-game-version="v0.142"],[data-game-version="v0.242"]) .card .card-stat.card-defense:not(.stat-buffed):not(.stat-nerfed){color:#365a80}
body[data-ui-screen="game"] #game .page-name {
  background: #fff;
  color: #333;
  border-color: #d2d2d2;
}
body[data-ui-screen="game"] .battlefield {
  background: var(--battle-surface);
  border-color: var(--battle-surface-border);
  box-shadow: inset 0 10px 22px -8px #00000038, inset 8px 0 24px -14px #00000030, inset -8px 0 24px -14px #00000030, inset 0 -2px 5px #ffffffb3, 0 1px 0 #fff;
}
body[data-ui-screen="game"] .field-slots > div {
  background: #e4e4e4;
  border-color: #b8b8b8;
  box-shadow: none;
}
body[data-ui-screen="game"] .field-slots > div:has(.slot-cell) {
  background: #e4e4e4;
}
body[data-ui-screen="game"] :is(#you-board,#opponent-board,#you-prophecy,#opponent-prophecy) .slot-cell {
  background: #e4e4e4;
  border-color: #b8b8b8;
  box-shadow: none;
}
body[data-ui-screen="game"] .field-slots .empty-slot,
body[data-ui-screen="game"] .field-slots > div::after {
  color: #555;
}
body[data-ui-screen="game"] .battlefield::after {
  --battle-line-direction: 90deg;
  background: linear-gradient(var(--battle-line-direction), transparent, #a0a0a080 15%, #fafafa 50%, #a0a0a080 85%, transparent) !important;
  box-shadow: none;
  filter: drop-shadow(0 0 2px #ffffffd9) drop-shadow(0 0 7px #ffffffb3) drop-shadow(0 1px 1px #77777780);
}
/* Dark neutral dialogs retain contrast for existing light blue/red notes.
   Important is limited to colors embedded inline in the legacy templates. */
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) {
  background: #0009 !important;
  color: #f5f5f5;
  color-scheme: dark;
}
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) > section {
  background: #252525 !important;
  color: #f5f5f5;
  border-color: #777 !important;
  box-shadow: 0 20px 60px #0006 !important;
}
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) :is(.eyebrow,.selection-progress,.selection-drawn-preview p,.card-operation-note,.selection-option-label) {
  color: #ddd !important;
}
body[data-ui-screen="game"] :is(#reaction-modal,#discard-modal) > section > p:not(.reaction-response-text) {
  color: #ddd !important;
}
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) .selection-progress b { color: #fff; }
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) button:where(:not(.card):not(.skill-full-note):not(.discard-pick)) {
  background: #f2f2f2;
  color: #222;
  border-color: #aaa;
}
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) button.minor {
  background: #3c3c3c;
  color: #f2f2f2;
  border: 1px solid #888;
}
body.card-modal-close-ui .card-modal-close-panel { position: relative; }
body.card-modal-close-ui :is(#card-actions-modal,.card-details-modal) button.card-modal-close {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: 24px/1 Arial, sans-serif;
  box-shadow: none;
  cursor: pointer;
}
body.card-modal-close-ui :is(#card-actions-modal,.card-details-modal) button.card-modal-close:hover { background: #ffffff1a; }
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) .skill-full-note {
  background: #303030;
  border-color: #484848;
}
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) .skill-full-note:not(.passive-attr):not(.reaction-attr) { color: #f2f2f2; }
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) .skill-full-note:not(.passive-attr):not(.reaction-attr) b { color: inherit; }
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) .skill-full-note.passive-attr { border-left-color: #3f8cff; }
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) .skill-full-note.reaction-attr { border-left-color: #e5484d; }
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) .skill-choice small { color: #ddd; }
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) .skill-choice:hover:not(:disabled) { background: #404040; border-color: #ccc; }
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) .selection-check { background: #444; color: #fff; }
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) .selection-option-card.is-selected { border-color: #fff; box-shadow: 0 0 0 3px #ffffff66; }
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) .selection-option-card.is-selected .selection-check { background: #fff; color: #222; }
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) .selection-payment-count { background: #eee; color: #222; }
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) button:disabled:where(:not(.card):not(.skill-full-note):not(.discard-pick):not(.selection-option)) {
  background: #444;
  color: #bbb;
  opacity: 1;
  cursor: not-allowed;
}
body[data-ui-screen="game"] :is(#selection-modal,#reaction-modal,#reaction-target,#discard-modal,#card-actions-modal,.card-details-modal,.skill-target-modal) :is(button,summary):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Readable battle log on a light neutral surface. */
body:is([data-ui-screen="game"],[data-ui-screen="result"]) .log {
  background: #f5f5f5;
  color: #292929;
  border-color: #ccc;
}
body:is([data-ui-screen="game"],[data-ui-screen="result"]) .log ul { color: #444; }
body:is([data-ui-screen="game"],[data-ui-screen="result"]) .log :is(h3,.log-player,.log-card) { color: #222; }
body:is([data-ui-screen="game"],[data-ui-screen="result"]) .log-entry:is(.log-reaction,.log-cover) {
  background: #e8e8e8;
  border-left-color: #888;
}
body:is([data-ui-screen="game"],[data-ui-screen="result"]) .log-chain { background: #444; color: #fff; }
body:is([data-ui-screen="game"],[data-ui-screen="result"]) .log button { background: #fff; color: #333; border: 1px solid #bbb; }

/* Waiting overlay matches the neutral operation panel. */
body[data-ui-screen="game"] .version-controls .battle-waiting {
  background: #e8e8e8;
  color: #333;
}

/* The log formatter replaces log-entry with these three row types. */
body:is([data-ui-screen="game"],[data-ui-screen="result"]) .log {
  max-height: 320px;
  background: #fafafa;
}
body:is([data-ui-screen="game"],[data-ui-screen="result"]) #log {
  padding: 0;
  font-size: 16px;
  line-height: 1.75;
}
body:is([data-ui-screen="game"],[data-ui-screen="result"]) #log .player-log {
  margin: 10px 0 4px;
  padding: 10px 12px;
  background: #eee;
  color: #222;
  border-left-color: #666;
}
body:is([data-ui-screen="game"],[data-ui-screen="result"]) #log .player-log span {
  background: #333;
  color: #fff;
  font-size: 14px;
}
body:is([data-ui-screen="game"],[data-ui-screen="result"]) #log .player-log.player-2 span {
  background: #fff;
  color: #222;
  box-shadow: inset 0 0 0 1px #888;
}
body:is([data-ui-screen="game"],[data-ui-screen="result"]) #log .detail-log {
  margin: 3px 0 3px 12px;
  padding: 7px 12px;
  border-left-color: #aaa;
  color: #333;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
body:is([data-ui-screen="game"],[data-ui-screen="result"]) #log .detail-log b { color: #111; }
body:is([data-ui-screen="game"],[data-ui-screen="result"]) #log .turn-divider {
  margin-top: 18px;
  padding: 10px 12px;
  background: #e4e4e4;
  color: #222;
  border-top-color: #999;
  font-size: 15px;
  line-height: 1.6;
}
body:is([data-ui-screen="game"],[data-ui-screen="result"]) .log .copy-log { font-size: 14px; }

/* Unified black prophecy-style backs for all face-down cards. */
body[data-ui-screen="game"] .card-back {
  background: radial-gradient(ellipse at 50% 30%, #303030, #151515 55%, #050505);
}
body[data-ui-screen="game"] .card-back:not(:where([class*="status-glow-"])) {
  border-color: #777;
  box-shadow: inset 0 0 0 4px #090909;
}
body[data-ui-screen="game"] .board-card:is(.monster-card-back,.prophecy-card-back) {
  background: radial-gradient(ellipse at 50% 30%, #303030, #151515 55%, #050505);
}
body[data-ui-screen="game"] .board-card:is(.monster-card-back,.prophecy-card-back):not(:where([class*="status-glow-"])) {
  border-color: #777;
  box-shadow: inset 0 0 24px #000b, 0 5px 16px #0004;
}
body[data-ui-screen="game"] .board-card:is(.monster-card-back,.prophecy-card-back)::before {
  border-color: #ffffff30;
  box-shadow: inset 0 0 10px #0008;
}
body[data-ui-screen="game"] .card-back::after { color: #eee; }
body[data-ui-screen="game"] .board-card:is(.monster-card-back,.prophecy-card-back)::after {
  content: "✦";
  font-size: 1.7rem;
  background: radial-gradient(circle at 42% 36%, #333, #111 72%);
  color: #eee;
  box-shadow: inset 0 0 0 1.5px #aaa, inset 0 0 12px #0009, 0 0 0 4px #ffffff0d;
  text-shadow: 0 1px 2px #000;
}
/* Faith HUD: translucent black surface with readable neutral labels. */
body[data-ui-screen="game"] .you-hud {
  background: #000b;
  border-color: #555;
  color: #fff;
}
body[data-ui-screen="game"] .you-hud :is(p,small) { color: #ddd; }
body[data-ui-screen="game"] .you-hud b { color: #fff; }
/* Card details should have a clear foreground; restore the HUD when the last card dialog closes. */
body[data-ui-screen="game"]:has(.card-details-modal, #card-actions-modal) .you-hud {
  visibility: hidden;
  pointer-events: none;
}
/* Operation panel typography and phase indicators use the neutral palette. */
body[data-ui-screen="game"] .version-controls { color: #333; }
body[data-ui-screen="game"] .version-controls > .eyebrow { color: #555; }
body[data-ui-screen="game"] .version-controls .battle-flow span {
  color: #666;
  border-bottom-color: #ccc;
}
body[data-ui-screen="game"] .version-controls .battle-flow span.active {
  color: #222;
  border-bottom-color: #333;
  box-shadow: inset 0 -1px #333;
  font-weight: 800;
}
body[data-ui-screen="game"] .version-controls .battle-advice { color: #555; }
body[data-ui-screen="game"] .version-controls .battle-advice summary { color: #444; }
body[data-ui-screen="game"] .version-controls #notice { color: #333; }

/* Opponent information sits on the light battlefield surround. */
body[data-ui-screen="game"] .player.opponent > div:first-child > p,
body[data-ui-screen="game"] .player.opponent > div:first-child > b { color: #222; }
body[data-ui-screen="game"] .player.opponent :is(#opponent-counts,.hand-label) { color: #606060; }
/* Follow the existing horizontal/vertical battlefield divider layout. */
@media (min-width: 720px) {
  body[data-ui-screen="game"]:not(.battle-vertical) .battlefield::after {
    --battle-line-direction: 180deg;
  }
}
/* Animation playback prompt matches the charcoal dialogs. */
body[data-ui-screen="game"] .battle-animation-controls button {
  background: #f2f2f2;
  color: #222;
  border: 1px solid #aaa;
}
body[data-ui-screen="game"] .battle-animation-controls button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Centered match identity and persistent surrender access. */
body[data-ui-screen="game"] #game > .battle-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin-bottom: 14px;
}
body[data-ui-screen="game"] .battle-header > .page-name { justify-self: start; }
body[data-ui-screen="game"] .battle-header > div {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column-reverse;
  text-align: center;
}
body[data-ui-screen="game"] #game .battle-header h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}
body[data-ui-screen="game"] .battle-header .eyebrow {
  margin: 6px 0 0;
  font-size: 11px;
  color: #606060;
}
body[data-ui-screen="game"] .battle-header #surrender {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.4;
  max-width: 100%;
}
body[data-ui-screen="game"] .opponent-hand-dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 10px 0 0;
}
body[data-ui-screen="game"] .opponent-hand-dock .hand-label {
  margin: 0;
  color: #606060;
  font-size: 11px;
}
body[data-ui-screen="game"] .opponent-hand-dock #opponent-hand {
  display: flex !important;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}
body[data-ui-screen="game"] .opponent-hand-dock .card-back {
  width: 14px;
  min-height: 21px;
}
body[data-ui-screen="game"] .battle-animation-controls { top: 76px !important; }

/* Opponent counters align to the battlefield's right edge. */
body[data-ui-screen="game"] .battlefield .player.opponent > div:first-child {
  right: 0;
  left: auto;
  text-align: right;
}
body[data-ui-screen="game"] #opponent-counts {
  display: block;
  margin: 4px 0 0;
  text-align: right;
}
/* Keep faith numerals distinct and readable on their respective surfaces. */
body[data-ui-screen="game"] #opponent-faith { color: #ad245d; }
body[data-ui-screen="game"] #you-faith { color: #df528b; }

/* Compact logo/version and a single opponent strip above the battlefield. */
body[data-ui-screen="game"] #game > .battle-header {
  grid-template-columns: minmax(52px,1fr) auto minmax(64px,1fr);
}
body[data-ui-screen="game"] .battle-header > div {
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
body[data-ui-screen="game"] .battle-header #seat-label {
  margin: 0;
  letter-spacing: 0;
  white-space: nowrap;
  font-size: 10px;
  color: #777;
}
body[data-ui-screen="game"] .opponent-hand-dock {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap: 6px;
  align-items: center;
  margin: 8px 0;
  min-height: 40px;
}
body[data-ui-screen="game"] .opponent-hand-dock #opponent-hand {
  grid-column: 2;
  grid-row: 1;
}
body[data-ui-screen="game"] .opponent-status {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  color: #333;
  line-height: 1.35;
}
body[data-ui-screen="game"] .opponent-status > p { display: none; }
body[data-ui-screen="game"] .opponent-status > b { font-size: 16px; white-space: nowrap; }
body[data-ui-screen="game"] .opponent-status #opponent-counts {
  font-size: 11px;
  color: #606060;
  white-space: nowrap;
  margin: 3px 0 0;
}
body[data-ui-screen="game"] #game > .opponent-hand-dock + .battlefield { margin-top: 0; }
@media(max-width:420px) {
  body[data-ui-screen="game"] #game .battle-header h1 { font-size: 18px; }
  body[data-ui-screen="game"] .opponent-status #opponent-counts { font-size: 10px; }
}

/* 目标选择抽屉沿用战场的中性暗色：单选靠悬停高亮、多选靠方形选框与计数底栏区分，
   不依赖金/绿强调色。遮罩改为轻压暗，战场在选择期间保持可读。 */
body[data-ui-screen="game"] #selection-modal.selection-sheet-host { background: #05091459 !important; }
body[data-ui-screen="game"] #selection-modal.selection-sheet-host > .selection-sheet { border-bottom-color: transparent !important; }
/* v0.5 uses centered dialogs while retaining the shared selection controls. */
body.centered-selection-sheet[data-ui-screen="game"] #selection-modal.selection-sheet-host {
  display: grid !important;
  place-items: center;
  justify-content: normal !important;
  padding: 20px;
  box-sizing: border-box;
  background: #0009 !important;
}
body.centered-selection-sheet[data-ui-screen="game"] #selection-modal.selection-sheet-host > .selection-sheet {
  width: min(760px, 100%);
  min-height: 0;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  box-sizing: border-box;
  border: 2px solid #777 !important;
  border-radius: 20px;
  overflow: hidden;
  animation: none;
}
body[data-ui-screen="game"] #selection-modal .selection-sheet-foot { background: #1c1c1c; border-top-color: #555; }
body[data-ui-screen="game"] #selection-modal .selection-sheet-hint { color: #bbb !important; }
body[data-ui-screen="game"] #selection-modal .selection-sheet[data-mode="multi"] .selection-option-card { border-color: #8a8a8a; }
body[data-ui-screen="game"] #selection-modal .selection-sheet[data-mode="multi"] .selection-option-card:hover:not(:disabled) { border-color: #ddd; }
body[data-ui-screen="game"] #selection-modal .selection-sheet[data-mode="multi"] .selection-option-card .selection-check { background: transparent; color: #fff; }
body[data-ui-screen="game"] #selection-modal .selection-sheet[data-mode="multi"] .selection-option-card.is-selected .selection-check { background: #00000059; color: #fff; }
body[data-ui-screen="game"] #selection-modal .selection-sheet[data-mode="single"] .selection-option-card:hover:not(:disabled) { border-color: #fff; }
body[data-ui-screen="game"] #selection-modal .selection-sheet .selection-option-label { background: #111111e6; }
body[data-ui-screen="game"] #selection-modal .selection-sheet .selection-stage-confirm:disabled { background: #555; color: #bbb; }
body[data-ui-screen="game"] #selection-modal .selection-sheet .selection-stage-unpay { background: #333; border-color: #999; color: #fff; }
body[data-ui-screen="game"] #selection-modal .selection-sheet .selection-stage-unpay:hover { background: #555; }

/* v0.5 settlement is a regular screen and reuses the battle log panel. */
#result.result-overlay { position:relative; inset:auto; z-index:auto; overflow:visible; background:none; text-align:center; }
#result.result-overlay.show { display:block; }
#result.result-overlay::before, #result .result-particles { display:none; }
#result .result-content, #result.lose .result-content { width:100%; max-height:none; overflow:visible; padding:28px; border:0; background:none; box-shadow:none; }
#result .result-content h1 { font-size:clamp(3rem,9vw,5rem); }
#result .result-summary { max-width:none; margin-bottom:20px; }
#result .result-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
#result .log { text-align:left; max-height:none; overflow:visible; }
#result #log { max-height:60dvh; overflow-y:auto; overscroll-behavior:contain; }
@media(max-width:640px) { #result .result-content, #result.lose .result-content { padding:16px 0; } #result .log { padding:18px 12px; } }
/* Settlement shares the neutral UI, with outcome color confined to the hero. */
#result { --result-accent:#aa7929; --result-glow:#f5cf7029; color:#292929; }
#result.lose { --result-accent:#71647e; --result-glow:#afa0c229; }
#result .result-nav { display:flex; align-items:center; gap:12px; padding:4px 0 20px; }
#result .result-back { width:44px; height:44px; padding:10px; display:grid; place-items:center; border:1px solid #bdbdbd; border-radius:50%; color:#333; background:#f5f5f5; }
#result .result-back svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#result .page-capsule { color:#444; background:#eee; border:1px solid #ccc; border-radius:999px; padding:6px 12px; font-size:13px; }
#result .result-content, #result.lose .result-content { position:relative; isolation:isolate; padding:34px 24px 28px; overflow:hidden; border:1px solid #c7c7c7; border-radius:20px; background:radial-gradient(ellipse at 50% 0%,var(--result-glow),transparent 75%),#f5f5f5; box-shadow:0 8px 28px #0000000d; }
#result .result-content::before { content:'✦'; position:absolute; z-index:-1; top:-100px; left:calc(50% - 180px); width:360px; font-size:360px; line-height:1; color:var(--result-accent); opacity:.045; pointer-events:none; }
#result .result-content .eyebrow { color:#737373; letter-spacing:.22em; }
#result .result-content h1, #result.lose .result-content h1 { color:var(--result-accent); font-size:clamp(3rem,9vw,5rem); text-shadow:0 2px 24px var(--result-glow); }
#result .result-content strong, #result.lose .result-content strong { color:#666; font-weight:400; margin:12px 0 20px; }
#result .result-summary { padding:0; border:0; background:none; margin-bottom:22px; }
#result .result-summary .summary-stats { color:#444; gap:10px 24px; margin:0; font-weight:500; }
#result .result-controls button, #result.lose .result-controls button { background:#303030; color:#fff; min-width:180px; border:1px solid #222; }
#result .result-controls button:disabled { opacity:.45; cursor:default; }
#result .result-chart, #result .log { margin-top:20px; background:#fafafa; border:1px solid #ccc; border-radius:20px; box-shadow:0 8px 28px #0000000d; color:#292929; }
#result .result-chart { text-align:left; padding:24px 28px; }
#result .chart-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#result .chart-heading h2 { font-size:18px; margin:0; }
#result .chart-legend { display:flex; gap:20px; font-size:14px; }
#result .faith-you { color:#a47225; }
#result .faith-opponent { color:#607a99; }
#result .chart-legend span::before { content:''; display:inline-block; width:20px; margin:0 7px 4px 0; border-top:3px solid currentColor; }
#result .chart-legend .faith-opponent::before { border-top-style:dashed; }
#result .result-chart svg { width:100%; height:auto; display:block; overflow:visible; margin-top:8px; }
#result .chart-grid line { stroke:#dedede; stroke-width:1; }
#result .chart-grid text { fill:#777; font-size:13px; }
#result .result-chart polyline { fill:none; stroke:currentColor; stroke-width:2.5; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
#result .faith-opponent polyline { stroke-dasharray:7 5; }
#result .result-chart circle { fill:currentColor; stroke:#fafafa; stroke-width:1.5; }
#result .chart-note { font-size:13px; color:#777; margin:6px 0; }
#result .chart-data { font-size:13px; color:#666; margin-top:12px; }
#result .chart-data summary { cursor:pointer; }
#result .chart-data table { width:100%; border-collapse:collapse; margin-top:10px; text-align:right; }
#result .chart-data th, #result .chart-data td { padding:7px; border-bottom:1px solid #ddd; }
#result button:focus-visible, #result summary:focus-visible { outline:2px solid var(--result-accent); outline-offset:4px; }
@media(max-width:640px) { #result .result-chart { padding:20px 14px; } #result .result-content, #result.lose .result-content { padding:24px 14px; } #result .chart-grid text { font-size:16px; } }
#result.result-overlay { place-items:normal; }
#result .result-highlight { width:100%; min-width:0; box-sizing:border-box; margin-top:20px; padding:24px 28px; text-align:left; color:#292929; background:#fafafa; border:1px solid #ccc; border-radius:20px; box-shadow:0 8px 28px #0000000d; }
#result .result-highlight h2 { margin:0; font-size:18px; }
#result .result-highlight > p { color:#666; line-height:1.6; }
#result .highlight-log { padding:0; margin:16px 0 0; overflow-wrap:anywhere; }
#result .highlight-log .player-log { color:#333; background:#eee; }
#result .highlight-log .detail-log, #result .highlight-log .detail-log b { color:#555; }
@media(max-width:640px) { #result .result-highlight { padding:20px 14px; } }
#result > .result-nav, #result > .result-chart, #result > .log { width:100%; min-width:0; }

#result .result-controls button[data-rematch-state="opponent-ready"] { border-color:var(--result-accent); box-shadow:0 0 0 2px var(--result-glow); }
#result .result-controls button[data-rematch-state="waiting"] { background:#e5e5e5; color:#666; border-color:#ccc; opacity:1; }
#result .result-controls button[data-rematch-state="opponent-left"] { background:#ececec; color:#888; border-color:#d5d5d5; opacity:1; }

/* Spirit allocation: one compact stepper below each card. */
body[data-ui-screen="game"] #selection-modal .selection-spirit-stepper{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;width:100%;padding:3px;border:1px solid #555;border-radius:9px;background:#202020;gap:2px}
body[data-ui-screen="game"] #selection-modal .selection-spirit-stepper button{position:static;inset:auto;display:grid;place-items:center;width:36px;height:36px;min-height:36px;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:#eee;font:22px/1 Arial,sans-serif;box-shadow:none;transform:none}
body[data-ui-screen="game"] #selection-modal .selection-spirit-stepper button:hover:not(:disabled){background:#ffffff16;transform:none}
body[data-ui-screen="game"] #selection-modal .selection-spirit-stepper button:disabled{background:transparent;color:#666;opacity:1;cursor:default}
body[data-ui-screen="game"] #selection-modal .selection-spirit-value{display:flex;align-items:baseline;justify-content:center;gap:3px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#fff}
body[data-ui-screen="game"] #selection-modal .selection-spirit-value .selection-payment-count{position:static;padding:0;margin:0;background:none;color:inherit;font-size:17px;font-weight:600;box-shadow:none}
body[data-ui-screen="game"] #selection-modal .selection-spirit-value small{font-size:12px;color:#999}

body[data-ui-screen="game"] #selection-modal .selection-below-card.is-selected:has(.selection-choice-label){background:#27854d;color:#fff;border-color:#27854d;box-shadow:none}
body[data-ui-screen="game"] #selection-modal .selection-below-card.is-selected:has(.selection-choice-label):hover{background:#206f40;border-color:#206f40}
/* Card faces select; sibling information buttons remain available at the limit. */
body[data-ui-screen="game"] #selection-modal .selection-card-item{position:relative}
body[data-ui-screen="game"] #selection-modal .selection-card-caption{max-width:100%;overflow-wrap:anywhere;text-align:center}
body[data-ui-screen="game"] #selection-modal .selection-card-item .selection-option-card{display:block;padding:0;border:0;background:transparent;border-radius:12px;box-shadow:none;transition:transform .15s ease;cursor:pointer}
body[data-ui-screen="game"] #selection-modal .selection-card-item .selection-card-render{width:160px;height:204px;min-height:204px;margin:0}
body[data-ui-screen="game"] #selection-modal .selection-card-item .selection-option-card.is-selected{transform:scale(.95);box-shadow:none;opacity:1;filter:none}
body[data-ui-screen="game"] #selection-modal .selection-card-item .selection-check{position:absolute;inset:0;display:grid;place-items:center;padding:0;border-radius:12px;background:transparent;color:white;font-size:40px;font-weight:900;text-shadow:0 2px 6px #0009;pointer-events:none;box-shadow:none}
body[data-ui-screen="game"] #selection-modal .selection-card-item .is-selected .selection-check{background:#6669;color:#fff}
body[data-ui-screen="game"] #selection-modal .selection-card-item .selection-info{position:absolute;right:6px;top:6px;z-index:6;display:grid;place-items:center;width:28px;height:28px;min-height:28px;margin:0;padding:0;border:1px solid #ddd;border-radius:50%;background:#252525eb;color:#fff;font:bold 18px Georgia,serif;box-shadow:0 2px 6px #0006;cursor:zoom-in}
body[data-ui-screen="game"] #selection-modal .selection-spirit-stepper{grid-template-columns:36px 1fr}
@media(prefers-reduced-motion:reduce){body[data-ui-screen="game"] #selection-modal .selection-card-item .selection-option-card{transition:none}}
/* Multiple sources extend the reaction confirmation panel and share its controls. */
body[data-ui-screen="game"] #reaction-modal > section{max-height:calc(100dvh - 40px);overflow-y:auto}
body[data-ui-screen="game"] #reaction-modal > section[hidden]{display:none}
body[data-ui-screen="game"] #reaction-modal .reaction-source-options{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
body[data-ui-screen="game"] #reaction-modal .reaction-source-item{position:relative;width:140px}
body[data-ui-screen="game"] #reaction-modal .reaction-source-pick{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;height:100%;padding:8px;border:2px solid #666;border-radius:12px;background:#292929;color:#eee;font-size:12px}
body[data-ui-screen="game"] #reaction-modal .reaction-source-pick[aria-pressed="true"]{border-color:#fff;background:#505050;box-shadow:0 0 0 1px #fff}
body[data-ui-screen="game"] #reaction-modal .reaction-source-info{position:absolute;right:4px;top:4px;width:26px;height:26px;min-height:26px;padding:0;border:1px solid #ddd;border-radius:50%;background:#222;color:#fff;font:bold 17px Georgia,serif}
#game #opponent-identity{display:flex;align-items:center;gap:6px;max-width:20em;margin:0 0 5px;color:inherit;font-size:12px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;text-align:left}
#game #opponent-identity svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;background:none;border:0}
@media(max-width:600px){#game #opponent-identity{max-width:17em;gap:5px;font-size:11px}}