/* base.css: the page's plain defaults (engine; moved out of ui.js's BASE_CSS, PLAN s16 engine 5). Every rule is
   :where() (no weight), so css/style.css (art) and the blocks after it win; loaded first. */
:where(.collection-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin: 8px 0 16px; }
:where(.mini-card) { position: relative; aspect-ratio: 5 / 7; border-radius: 6px; overflow: hidden; display: flex;
  flex-direction: column; align-items: center; justify-content: center; padding: 3px; font-size: 10px; text-align: center; }
:where(.mini-card.found) { background: #f3ead6; color: #2a1d10; box-shadow: 0 0 0 2px #d9b56b; }
:where(.mini-card.unknown, .mini-card.locked) { background: #6b1d1d; color: #f3ead6; opacity: .75; }
:where(.mini-card .card-icon) { font-size: 28px; line-height: 1; }
:where(.mini-card .card-icon img, .mini-card .card-icon canvas, .mini-card .card-icon svg) { width: 40px; height: 40px; }
:where(.mini-card .card-name) { font-size: 10px; line-height: 1.1; }
:where(.mini-card.locked)::after { content: '🔒'; position: absolute; top: 3px; right: 3px; font-size: 12px; }
:where(.result-card) { margin: 0 auto 6px; }
:where(.notes li.unlock) { color: #b07a00; }
:where(.panel-stats) { display: flex; gap: 16px; justify-content: center; font-weight: bold; font-size: 16px; margin: 0 0 4px; }
:where(.fighter-rank) { display: block; font-size: 9px; opacity: .7; letter-spacing: .02em; }
:where(.fighter-class img, .fx-art img) { width: 14px; height: 14px; vertical-align: -2px; image-rendering: pixelated; margin-right: 2px; }
:where(.fighter-class) { display: block; line-height: 1; }
:where(.item-pips) { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
:where(.item-pips .pip) { width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 0 1px currentColor; opacity: .5; }
:where(.item-pips .pip.on) { background: currentColor; opacity: 1; }
:where(.sea-count) { font-weight: bold; }
:where(.sea-count.full) { color: #b03a2e; }
:where(.echo-art) { opacity: .7; filter: grayscale(.6) brightness(1.3) drop-shadow(0 0 3px #9fd8ff); }
:where(.echo-chip .echo-art img, .echo-chip .echo-art canvas, .raise-head .echo-art img, .raise-head .echo-art canvas) { width: 20px; height: 20px; }
:where(.fight-echo) { display: flex; align-items: center; gap: 2px; font-size: 11px; font-weight: bold; color: #9fd8ff; }
:where(.fight-echo .echo-art img, .fight-echo .echo-art canvas) { width: 22px; height: 22px; }
:where(.fight-echo.used) { opacity: .35; }
:where(#echo-overlay) { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); padding: 12px; }
:where(#sea-overlay) { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); padding: 12px; }
:where(#pick-overlay, #deck-overlay, #gear-overlay) { position: fixed; inset: 0; z-index: 31; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); padding: 12px; }
:where(.pick-panel, .deck-panel) { max-height: 92vh; overflow: auto; max-width: 560px; width: 100%; }
:where(.deck-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin: 6px 0; }
:where(.deck-grid .fcard) { width: auto; position: relative; rotate: none; translate: none; margin: 0; } :where(.fcard-from, .fcard-next) { display: block; font-size: 11px; opacity: .8; }
:where(.foe-card) { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border: 1px solid currentColor; border-radius: 4px; font-size: 11px; position: relative; }
:where(.foe-card .fcard-lv) { position: static; }
:where(.fcard-lv) { position: absolute; top: 2px; right: 4px; font-size: 11px; font-weight: bold; }
:where(.deck-fx) { position: fixed; left: 50%; top: 40%; z-index: 40; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; gap: 6px; pointer-events: none; animation: hof-deck-fx 1.4s ease forwards; }
:where(.deck-fx-word) { font-weight: bold; text-shadow: 0 1px 2px #000; }
@keyframes hof-deck-fx { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 20%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(.9); } }
:where(.sea-panel, .gear-panel, .pick-panel, .deck-panel) { max-width: 420px; width: 100%; max-height: 100%; overflow: auto; background: var(--stone, #22252e); color: var(--bone, #e8dcc0);
  box-shadow: 0 0 0 2px var(--gold2, #a8803a), 0 10px 30px rgba(0,0,0,.7); padding: 16px; text-align: center; }
:where(.sea-panel h2, .gear-panel h2, .pick-panel h2, .deck-panel h2) { margin: 6px 0; color: var(--glim, #ffd27a); }
:where(.raise-head) { display: flex; align-items: center; gap: 6px; font-weight: bold; }
:where(.raise-tier) { margin-left: auto; }
:where(.raise-after) { font-weight: bold; }
:where(.weave-head) { display: flex; align-items: center; gap: 6px; font-weight: bold; }
:where(.weave-head .ench-tag) { margin-left: auto; }
:where(.weave-after) { font-weight: bold; }
:where(.ench-tag) { font-size: .85em; font-style: italic; margin-left: .35em; white-space: nowrap; }
:where(.ench-line) { display: flex; gap: 6px; align-items: baseline; justify-content: center; }
:where(#toasts) { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: 6px; pointer-events: none; z-index: 20; }
:where(.toast) { background: rgba(0,0,0,.8); color: #fff; padding: 6px 12px; border-radius: 6px; font-weight: bold;
  animation: ui-toast 2.6s ease both; }
:where(.toast.bad) { color: #ff9a8a; } :where(.toast.good) { color: #a8f0a0; }
@keyframes ui-toast { 0% { opacity: 0; } 12%, 75% { opacity: 1; } 100% { opacity: 0; } }
:where(.class-row) { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
:where(.class-card) { width: 170px; padding: 10px; border-radius: 10px; background: #fff8e8; box-shadow: 0 0 0 3px #d9b56b;
  display: flex; flex-direction: column; align-items: center; gap: 4px; }
:where(.class-card.class-minor) { transform: scale(.92); opacity: .95; }
:where(.class-card.dealing) { animation: ui-deal-class .5s both; }
@keyframes ui-deal-class { from { opacity: 0; } }
:where(.class-rank) { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: .7; }
:where(.class-art) { font-size: 48px; line-height: 1.1; }
:where(.class-name) { font-size: 20px; font-weight: bold; }
:where(.class-text) { font-size: 13px; font-style: italic; opacity: .8; }
:where(.class-bonus) { font-size: 14px; }
:where(.class-tag) { font-size: 12px; border-radius: 8px; padding: 1px 6px; background: #2a4a7a; color: #fff; display: inline-flex; gap: 3px; align-items: center; }
:where(.class-tag .item-icon) { font-size: 12px; }
:where(#board) { transition: transform .28s ease; }
:where(#board .card, #board .token) { left: 0; top: 0; will-change: transform; }
:where(#board .card) { transition: transform .25s ease, width .22s ease, height .22s ease, opacity .2s; }
:where(#board .token) { transition: transform .25s ease; }
:where(#board .card.dealing) { opacity: 0; }
:where(#board .card.gone) { opacity: 0; transition: opacity .5s; }
@media (prefers-reduced-motion: reduce) {
  :where(#board, #board .card, .chance-card) { transition: none !important; }
  :where(.toast, .class-card.dealing) { animation-duration: .01s; }
}
:where(#board .card.behind) { opacity: 0; }
:where(#board .card.past) { opacity: .55; }
:where(svg.roads line) { stroke: rgba(255, 240, 200, .35); stroke-width: 4; stroke-dasharray: 2 8; stroke-linecap: round; }
:where(svg.roads line.taken) { stroke: rgba(255, 220, 120, .7); stroke-dasharray: none; }
:where(svg.roads line.open) { stroke: rgba(255, 230, 140, .8); stroke-width: 5; }
:where(#warren-buttons) { position: absolute; left: 50%; transform: translateX(-50%); top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; z-index: 6; }
:where(.warren-button) { font: inherit; font-size: 15px; padding: 8px 14px; border-radius: 8px; border: 2px solid #9a7ad0; background: #2a1d40; color: #f0e6ff; cursor: pointer; }
:where(#board .card.warren) .face { box-shadow: 0 0 0 3px #9a7ad0, 0 0 14px #9a7ad0; }
:where(svg.roads line.warren) { stroke: rgba(180, 150, 255, .8); }
:where(.back-hint) { position: absolute; left: 4px; right: 4px; top: 6px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 3px 2px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; line-height: 1; pointer-events: none; }
:where(.back-hint .hint-icon) { font-size: calc(var(--cw, 80px) * .26); }
:where(.back-ground) { position: absolute; right: 4px; bottom: 4px; z-index: 3; font-size: max(12px, calc(var(--cw, 80px) * .16)); line-height: 1;
  padding: 1px 4px; border-radius: 6px; background: rgba(0,0,0,.45); }
:where(.back-ground.ground-low) { color: #7fc4ff; }
:where(.back-ground.ground-high) { color: #d8cfb8; } :where(.back-ground.ground-still) { color: #c8c0a8; }
:where(.card.drowned .front) { filter: hue-rotate(-20deg) saturate(.7) brightness(.85); box-shadow: inset 0 -24px 30px rgba(30,80,140,.4); }
:where(.runes) { text-align: left; margin: 6px 0 4px; }
:where(.rune) { margin: 3px 0; line-height: 1.35; }
:where(.rune-more) { padding-left: 1.2em; }
:where(.rune-empty .rune-value) { opacity: .6; }
:where(.rune-extra) { opacity: .8; }
:where(.nightmare-pick) { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 2px; }
:where(.nightmare-opt) { font: inherit; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--bone, #ccc); background: transparent; color: inherit; opacity: .7; }
:where(.nightmare-opt.chosen) { opacity: 1; border-color: var(--gold2, #e0b050); }
:where(.nightmare-line) { flex-basis: 100%; text-align: center; font-style: italic; margin: 2px 0 0; min-height: 1.2em; }
:where(.back-hint .hint-word) { font-size: max(12px, calc(var(--cw, 80px) * .15)); font-weight: bold; letter-spacing: .02em; }
:where(.house-info .hint-head) { font-size: 18px; }
:where(.token-badge) { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #f0c040;
  color: #3a2a00; font-size: 13px; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #7a5a00; }
:where(.token-note) { font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 6px; }
:where(.token-note .token-badge) { position: static; }
:where(.token-tag) { font-size: 12px; border-radius: 8px; padding: 1px 6px; background: #f0c040; color: #3a2a00; }
:where(.back-house) { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: max(10px, calc(var(--cw) * .12));
  line-height: 1.05; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; padding: 0 2px; }
:where(.back-house .house-icon) { display: block; font-size: calc(var(--cw) * .3); }
:where(.house-line) { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 0 0 4px; font-size: 15px; }
:where(.house-line img) { width: 22px; height: 22px; image-rendering: pixelated; }
:where(#house-info) { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); width: min(340px, calc(100% - 30px)); z-index: 35;
  background: #fff8e0; color: #2a1d10; border: 3px solid #d9b56b; border-radius: 10px; padding: 10px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.5); font-size: 16px; }
:where(.house-info-head) { display: flex; gap: 8px; align-items: center; font-size: 17px; }
:where(.house-info-head img) { width: 28px; height: 28px; image-rendering: pixelated; }
:where(#house-info p) { margin: 6px 0 0; line-height: 1.35; }
:where(#panel.scene .beat-wait) { opacity: 0; transform: translateY(6px); pointer-events: none; }
:where(#panel.scene > *, #panel.scene .beat, #panel.scene .choice) { transition: opacity .2s ease, transform .2s ease, translate .2s ease; }
:where(#panel.scene .beat) { display: inline; }
:where(.choice .effects, .choice .bonuses) { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; width: 100%; }
:where(.choice .fx, .choice .bonus) { font-size: 13px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.08); }
:where(.choice .fx.good, .choice .bonus) { color: #2a7a2a; }
:where(.choice .fx.bad, .choice .bonus.bad) { color: #a02a2a; }
:where(.mark-chip) { font-style: italic; }
:where(.item-timer-unit) { margin-left: .4em; }
:where(.path-pick) { display: flex; gap: 8px; justify-content: center; align-items: stretch; margin-top: 6px; }
:where(.path-pick .path-opt) { flex: 1 1 0; max-width: 220px; font: inherit; text-align: left; cursor: pointer; padding: 8px; }
:where(.path-opt) { display: flex; flex-direction: column; gap: 3px; } :where(.path-name) { font-weight: bold; }
:where(.path-trade) { font-style: italic; font-size: 13px; } :where(.path-text) { font-size: 13px; }
:where(.path-mine) { font-size: 11px; opacity: .8; text-transform: uppercase; }
:where(.path-pick.picked .path-opt:not(.chosen)) { opacity: .3; } :where(.ability-paths .path-other) { opacity: .55; }
:where(.path-pair) { grid-column: 1 / -1; display: flex; gap: 8px; } :where(.path-pair .path-opt) { flex: 1 1 0; min-width: 0; }
:where(.roll-card) { border: 2px solid #777; padding: 8px; margin: 6px auto; max-width: 320px; }
:where(.roll-name) { font-size: 18px; margin: 4px 0; }
:where(.rarity-word) { display: inline-block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
:where(.comp-art, .joins-art) { display: inline-flex; align-items: center; justify-content: center; }
:where(.joins-art) { display: flex; margin: 4px auto; font-size: 40px; }
:where(.companion-chip.comp-used) { opacity: .6; }
:where(.rarity-only) { display: block; width: 100%; font-size: 12px; letter-spacing: .04em; }
:where(.back-cat .cat-word, .back .hint-word) { max-width: calc(var(--cw, 100px) - 8px); overflow: hidden; white-space: nowrap; }
:where(.stat.hp.hp-grow) { animation: hof-hp-grow 1.1s ease-out; }
@keyframes hof-hp-grow { 0% { transform: scale(1); } 25% { transform: scale(1.35); } 50% { transform: scale(1.1); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
:where(.note-chips .fx.fx-max-hp, .fx.fx-max-hp) { color: #b8860b; font-weight: bold; }
:where(svg.roads path) { fill: none; stroke: #c8b890; stroke-width: 4px; stroke-linecap: round; stroke-opacity: max(.08, calc(.38 - .1 * var(--ahead, 0))); }
:where(svg.roads path.taken) { stroke: #e0b860; stroke-opacity: .55; }
:where(svg.roads path.open) { stroke: #f0e0a0; stroke-opacity: .9; stroke-width: 5px; }
:where(svg.roads path.road-low) { stroke: #8ab0e0; } :where(svg.roads path.road-high) { stroke: #f0c080; }
:where(.foe-weak) { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; }
:where(.foe-weak.unknown) { opacity: .6; } :where(.foe-weak-art img) { width: 14px; height: 14px; image-rendering: pixelated; }
:where(.fcard-tag) { position: absolute; bottom: 2px; right: 3px; font-size: 11px; line-height: 1; } :where(.fcard-tag img) { width: 14px; height: 14px; }
:where(.fcard.fcard-weak) { box-shadow: 0 0 0 2px #ffb040, 0 0 12px #ffb040; }
:where(.choice .needs) { width: 100%; font-size: 13px; opacity: .9; font-style: italic; }
:where(.collection-tabs) { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
:where(.collection-tab) { flex: 1; font-size: 13px; padding: 6px; }
:where(.collection-tab.active) { outline: 2px solid #f0c040; }
:where(.collection-nav) { display: flex; gap: 10px; align-items: center; justify-content: center; }
:where(.collection-nav .choice) { width: 56px; }
:where(.item-timer) { font-size: .8em; opacity: .8; margin-left: 2px; }
:where(.fight-title) { margin: 2px 0 6px; font-size: 18px; text-align: center; }
:where(.fight-stage) { display: grid; grid-template-columns: 38% 1fr; gap: 8px; align-items: center; min-height: 230px; }
:where(.foes) { display: flex; flex-direction: column; gap: 6px; }
:where(.fighter) { font: inherit; color: inherit; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "intent intent" "art name" "art hp" "art st";
  gap: 2px 6px; align-items: center; padding: 4px 6px; border-radius: 8px; border: 2px solid transparent; background: rgba(0,0,0,.08); text-align: left; }
:where(.fighter.hero) { grid-template-columns: 1fr; grid-template-areas: "intent" "art" "name" "hp" "st"; justify-items: center; text-align: center; }
:where(.fighter.target) { border-color: #c0392b; }
:where(.fighter.dead) { opacity: .3; filter: grayscale(1); }
:where(.fighter-art) { grid-area: art; font-size: 34px; line-height: 1; }
:where(.fighter.hero .fighter-art) { font-size: 56px; }
:where(.fighter-name) { grid-area: name; font-size: 14px; font-weight: bold; }
:where(.hpbar) { grid-area: hp; position: relative; height: 14px; width: 100%; background: #3a1010; border-radius: 7px; overflow: hidden; }
:where(.hpfill) { height: 100%; background: #c0392b; transition: width .3s; }
:where(.hp-text) { position: absolute; inset: 0; font-size: 11px; line-height: 14px; text-align: center; color: #fff; }
:where(.statuses) { grid-area: st; display: flex; gap: 4px; font-size: 13px; min-height: 16px; }
:where(.intent) { grid-area: intent; display: flex; align-items: center; gap: 3px; font-size: 13px; min-height: 18px; }
:where(.fighter.hero .intent) { visibility: hidden; }
:where(.intent-num) { font-weight: bold; font-size: 16px; }
:where(.intent-text) { opacity: .8; font-size: 12px; }
:where(.intent-attack .intent-num, .intent-charge .intent-num) { color: #c0392b; }
:where(.fx-num) { position: absolute; top: 20%; left: 50%; font-weight: bold; font-size: 22px; pointer-events: none; animation: fxnum .9s ease-out forwards; }
:where(.fx-num-hit) { color: #e74c3c; } :where(.fx-num-block) { color: #5dade2; } :where(.fx-num-heal) { color: #2ecc71; }
@keyframes fxnum { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -30px); } }
:where(.fighter.fx-hit) { animation: fxshake .35s; }
@keyframes fxshake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
:where(.fight-log) { min-height: 1.3em; font-size: 13px; font-style: italic; text-align: center; margin: 4px 0; }
:where(.fight-bar) { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0; font-size: 14px; }
:where(.energy) { display: flex; align-items: center; gap: 4px; }
:where(.pip) { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #e0a020; }
:where(.pip.full) { background: #f0c040; }
:where(.energy-num) { display: none; }
:where(.fight-panel .hand) { display: flex; gap: 4px; justify-content: center; margin: 6px 0; }
:where(.fcard) { font: inherit; color: #222; position: relative; flex: 0 1 72px; min-width: 0; aspect-ratio: 5 / 7.4; display: flex; flex-direction: column; align-items: center;
  padding: 14px 3px 3px; border-radius: 7px; border: 2px solid #7d5a2a; background: #f4ead2; }
:where(.fcard.type-strike) { background: #f3d6d0; } :where(.fcard.type-guard) { background: #dde8f3; }
:where(.fcard.type-item) { background: #f6ecc0; } :where(.fcard.type-curse) { background: #ccc; }
:where(.fcard.cant) { opacity: .5; }
:where(.fcard.played, .fcard.chosen) { transform: translateY(-14px); }
:where(.fcard-cost) { position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; border-radius: 50%; background: #f0c040; border: 2px solid #7d5a2a; font-weight: bold; font-size: 13px; line-height: 18px; text-align: center; }
:where(.fcard-art) { font-size: 22px; line-height: 1; }
:where(.fcard-name) { font-size: 11px; font-weight: bold; line-height: 1.1; text-align: center; }
:where(.fcard-text) { font-size: 10.5px; line-height: 1.15; text-align: center; margin-top: 2px; }
:where(.fight-reward) { text-align: center; }
:where(.fight-reward .fcard) { flex-basis: 96px; }
:where(.fight-reward .fcard-text) { font-size: 12px; }
:where(.fight-actions) { display: flex; flex-direction: row; gap: 8px; }
:where(.fight-actions .choice) { flex: 1; }
:where(#ability-buttons) { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 6; }
:where(.chance-actions) { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
:where(.push-row) { display: flex; gap: 8px; width: 100%; } :where(.push-row button) { flex: 1; }
:where(.ability-btn) { display: inline-flex; align-items: center; gap: 6px; }
:where(.note-chips) { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 6px 0; }
:where(.note-chips .fx) { padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.1); }
:where(.note-chips .fx.good) { color: #2a7a2a; } :where(.note-chips .fx.bad) { color: #a02a2a; }
:where(.result-chips .fx) { font-size: 22px; font-weight: bold; }
:where(.step-chips .fx) { font-size: 16px; }
:where(.step-house) { font-size: 18px; }
:where(.text.small) { font-size: 15px; opacity: .85; }
:where(#hud .moon) { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 1px; }
:where(.moon-art) { font-size: 22px; } :where(.moon-name) { font-size: 11px; } :where(.moon-next) { font-size: 10px; opacity: .7; }
:where(#hud .moon.moon-change) { animation: moonpulse 1.5s; }
@keyframes moonpulse { 30% { transform: scale(1.3); } }
:where(.fx-src) { margin-left: 4px; font-size: .85em; cursor: pointer; }
:where(.fx.fx-boost) { outline: 1px dashed currentColor; }
:where(.text-more) { font: inherit; background: none; border: 0; color: inherit; opacity: .7; display: block; margin: -6px auto 6px; }
:where(.chance-tally) { display: flex; gap: 14px; justify-content: center; font-size: 20px; font-weight: bold; margin: 2px 0 6px; }
:where(.tally-good) { color: #2a7a2a; } :where(.tally-bad) { color: #a02a2a; }
:where(.chance-card .front .fx-src) { position: absolute; top: 3px; right: 3px; margin: 0; }
:where(.toast.info) { opacity: .95; }
:where(.true-name-moment) { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px auto 8px; text-align: center; }
:where(.true-name-moment .tn-line) { color: #f4e6b0; font-weight: bold; }
:where(.cohort-flash) { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 60; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; animation: ui-cohort 1.2s ease both; }
:where(.cohort-flash img, .cohort-flash svg) { width: 128px; height: 128px; image-rendering: pixelated; }
:where(.cohort-flash-icon) { font-size: 72px; } :where(.cohort-flash-name) { font-weight: bold; color: #fff; text-shadow: 0 2px 4px #000; }
@keyframes ui-cohort { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.8); } 20%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; } }
:where(.rankup-ability .tier-name, .rankup-ability .tier-text) { display: block; } :where(.rankup-ability .tier-name) { font-weight: bold; }
:where(.house-tally) { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0 10px; font-size: 14px; }
:where(.tally) { padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.12); display: flex; gap: 4px; }
:where(.boons) { display: flex; flex-direction: column; gap: 8px; }
:where(.boon) { font: inherit; color: inherit; display: grid; grid-template-columns: 48px 1fr; grid-template-areas: "art name" "art text" "art house"; gap: 0 10px;
  align-items: center; text-align: left; padding: 8px 10px; border-radius: 8px; border: 2px solid #7d5a2a; background: rgba(0,0,0,.08); }
:where(.note-chips.boon-chips) { justify-content: flex-start; margin: 2px 0; }
:where(.boon.strong) { border-color: #f0c040; }
:where(.boon-art) { grid-area: art; font-size: 34px; text-align: center; }
:where(.boon-name) { grid-area: name; font-weight: bold; }
:where(.boon-text, .boon .effects) { grid-area: text; font-size: 14px; }
:where(.boon-house) { grid-area: house; font-size: 12px; opacity: .75; }