/* Race colors identify ownership of an effect; stat colors identify what changes. */
:root {
  --stat-power:#f3ce7d;
  --stat-attack:#88d8fb;
  --stat-damage:#ffa08f;
  --stat-life:#88dcb4;
  --stat-charge:#d4c2ff;
}
[data-race], [data-affinity] { --race-color:#b8c7dc; --race-rgb:184,199,220; --race-dark:#1b293c; }
[data-race="ORC"], [data-affinity="ORC"] { --race-color:#f18c75; --race-rgb:241,140,117; --race-dark:#38242a; }
[data-race="ELF"], [data-affinity="ELF"] { --race-color:#76cf9d; --race-rgb:118,207,157; --race-dark:#19382f; }
[data-race="HUMAN"], [data-affinity="HUMAN"] { --race-color:#7eaff5; --race-rgb:126,175,245; --race-dark:#1e304b; }
[data-race="GIANT"], [data-affinity="GIANT"] { --race-color:#e9bd62; --race-rgb:233,189,98; --race-dark:#393124; }
[data-race="SHAPESHIFTER"], [data-affinity="SHAPESHIFTER"] { --race-color:#c39aff; --race-rgb:195,154,255; --race-dark:#302544; }
.race-badge { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:4px 7px; border:1px solid rgba(var(--race-rgb),.45); border-radius:5px; background:var(--race-dark); color:var(--race-color); font:600 10px/1.2 system-ui,sans-serif; letter-spacing:.2px; white-space:nowrap; vertical-align:middle; }
.race-badge .race-emblem { width:15px; height:15px; flex:none; }
.race-badge.is-compact { padding:3px; border-radius:4px; }
.race-badge.is-compact>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.race-emblem { color:var(--race-color,#b8c7dc); flex-shrink:0; width:19px; height:19px; }
.star-pips { display:inline-flex; align-items:center; gap:2px; padding:4px 5px; border:1px solid #dcb96870; border-radius:4px; background:#251f13ed; color:#f5d78c; line-height:1; white-space:nowrap; vertical-align:middle; }
.star-pips .symbol-star { width:11px; height:11px; fill:currentColor; stroke-width:1; }
[data-stat-kind="power"], .symbol-power { color:var(--stat-power); }
[data-stat-kind="attack"], .symbol-attack { color:var(--stat-attack); }
[data-stat-kind="damage"], .symbol-damage { color:var(--stat-damage); }
[data-stat-kind="life"], .symbol-life { color:var(--stat-life); }
[data-stat-kind="charge"], .symbol-charge, .charge-badge { color:var(--stat-charge); }
.game-shell .card-stats [data-stat-kind="power"]>.icon { color:var(--stat-power); }
.game-shell .card-stats [data-stat-kind="damage"]>.icon { color:var(--stat-damage); }
.game-shell .charge-examples .symbol-charge { color:var(--stat-charge); }
.game-arena .duel-card-stats .stat-attack b { color:var(--stat-attack); }
.game-arena .opponent .duel-card-stats .attack-number b { color:var(--stat-attack); }
.keyword { --effect-color:#ccd7e8; --effect-rgb:204,215,232; display:inline-flex; align-items:center; gap:4px; max-width:100%; border:1px solid rgba(var(--effect-rgb),.38); border-radius:4px; padding:4px 6px; background:rgba(var(--effect-rgb),.075); color:var(--effect-color); font-size:11px; line-height:1.35; white-space:normal; text-wrap:pretty; }
.keyword>.icon { width:13px; height:13px; flex:0 0 13px; }
.keyword>span { min-width:0; }
.keyword[data-effect-family="power"] { --effect-color:var(--stat-power); --effect-rgb:243,206,125; }
.keyword[data-effect-family="attack"] { --effect-color:var(--stat-attack); --effect-rgb:136,216,251; }
.keyword[data-effect-family="damage"] { --effect-color:var(--stat-damage); --effect-rgb:255,160,143; }
.keyword[data-effect-family="life"] { --effect-color:var(--stat-life); --effect-rgb:136,220,180; border-radius:10px; }
.keyword[data-effect-family="charge"] { --effect-color:var(--stat-charge); --effect-rgb:212,194,255; }
.keyword[data-effect-family="block"] { --effect-color:#edacc8; --effect-rgb:237,172,200; border-radius:1px; border-left-width:3px; }
.keyword[data-effect-family="protect"] { --effect-color:#9acafb; --effect-rgb:154,202,251; border-radius:4px 4px 10px 10px; }
.keyword[data-effect-family="copy"] { --effect-color:#9cddd5; --effect-rgb:156,221,213; border-style:double; border-width:3px; padding:2px 4px; }
.keyword[data-effect-family="virus"] { --effect-color:#e7a4e9; --effect-rgb:231,164,233; border-style:dashed; }
.keyword[data-effect-family="teleport"] { --effect-color:#c7b6ff; --effect-rgb:199,182,255; border-radius:14px; }
.keyword[data-operation="reduce"] { border-bottom-width:2px; }
.keyword-list { display:inline-flex; flex-wrap:wrap; gap:5px; max-width:100%; vertical-align:middle; }
.game-shell .monster-card[data-race] { border:1px solid rgba(var(--race-rgb),.65); border-top:3px solid var(--race-color); border-radius:9px; background:linear-gradient(150deg,var(--race-dark),#111c2b 90%); box-shadow:0 7px 20px #0003; }
.game-shell .monster-card .card-art:after { background:linear-gradient(0deg,var(--race-dark),transparent 46%,#060c1640); }
.game-shell .monster-card .card-race { top:10px; left:9px; padding:0; background:none; border:0; }
.game-shell .monster-card .card-stars { top:10px; right:9px; letter-spacing:0; }
.game-shell .monster-card .card-body { background:linear-gradient(180deg,var(--race-dark),#111c2b); padding-top:10px; }
.game-shell .monster-card .card-body h3 { color:#f0ece5; }
.game-shell .monster-card .card-effect { min-height:66px; }
.game-shell .monster-card .card-stats { border-color:rgba(var(--race-rgb),.23); }
.game-shell .monster-card.selected { border-color:#f7ecd2; box-shadow:0 0 0 2px #f7ecd244,0 9px 26px #0005; }
.selected-check, .bench-check { background:#eee6d2; color:#172537; border-color:#fff5df; }
.game-shell .filter[data-race], .preset-button[data-race] { display:inline-flex; gap:6px; align-items:center; border-color:rgba(var(--race-rgb),.34); color:#c6d1df; }
.game-shell .filter[data-race].active, .preset-button[data-race].active { background:var(--race-dark); border-color:var(--race-color); color:var(--race-color); box-shadow:inset 0 -2px var(--race-color); }
.game-shell .filter .race-emblem, .preset-button .race-emblem { width:16px; height:16px; }
.tool-traits { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:7px; }
.tool-traits .race-badge { font-size:9px; padding:3px 5px; }
.charge-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; white-space:nowrap; }
.charge-badge>.icon { width:13px; height:13px; }
.game-shell .tool-card[data-affinity] { border-left:3px solid var(--race-color); }
.game-shell .tool-card .keyword { font-size:11px; }
.summary-list>div>span:first-child { display:flex; align-items:center; gap:6px; }
.summary-list .star-pips { padding:3px; }
.summary-list .star-pips .icon { width:9px; height:9px; }
.lobby-display-card[data-race] { border-color:var(--race-color); box-shadow:0 0 0 3px rgba(var(--race-rgb),.14),0 20px 50px #0008; }
.lobby-card-name { background:linear-gradient(0deg,var(--race-dark),transparent); }
.lobby-card-name .race-badge { font-size:9px; }
.lobby-card-stars { letter-spacing:0; }
.lobby-card-stars .star-pips { padding:5px 7px; }
.lobby-deck-seal .race-emblem { width:25px; height:25px; }
.lobby-race[data-race] { border-top:2px solid rgba(var(--race-rgb),.65); }
.lobby-race .race-badge { background:none; border:0; padding:0; font-size:12px; }
.lobby-race strong { color:var(--race-color); }
.dialog .inspect-art[data-race] { position:relative; border:2px solid var(--race-color); border-radius:9px; box-shadow:0 0 26px rgba(var(--race-rgb),.16); }
.inspect-art>.race-badge { position:absolute; bottom:12px; left:12px; }
.inspect-stats>span:first-child { display:flex; gap:8px; align-items:center; }
.inspect-stats .star-pips .icon { margin:0; width:11px; height:11px; }
.visual-guide { border-block:1px solid #52627a66; margin:0 0 22px; }
.visual-guide>summary { cursor:pointer; min-height:44px; padding:12px 0; color:#bdcadd; font-size:12px; }
.visual-guide-content { display:grid; gap:15px; padding:5px 0 19px; }
.visual-guide-races, .visual-guide-stats { display:flex; flex-wrap:wrap; gap:9px; }
.visual-guide-stats>span { display:flex; gap:5px; align-items:center; font-size:11px; padding-right:9px; }
.visual-guide-stats>span>.icon { width:16px; height:16px; }
.visual-guide p { color:#b4c1d2; font-size:12px; line-height:1.6; margin:0; }
/* Arena identity remains separate from selection, availability and outcome. */
.game-arena .bench-card[data-race] { border-color:rgba(var(--race-rgb),.7); border-bottom:3px solid var(--race-color); background:var(--race-dark); }
.game-arena .bench-shade { background:linear-gradient(0deg,var(--race-dark),rgba(var(--race-rgb),.04) 88%); }
.game-arena .bench-race { position:absolute; top:4px; left:4px; z-index:2; }
.game-arena .bench-race .race-emblem { width:13px; height:13px; }
.game-arena .bench-race .race-badge { padding:2px; }
.game-arena .bench-stars { top:4px; right:4px; letter-spacing:0; }
.game-arena .bench-stars .star-pips { gap:1px; padding:3px; border:0; }
.game-arena .bench-stars .symbol-star { width:8px; height:8px; }
.game-arena .bench-bonus { left:5px; top:27px; color:var(--race-color); border-color:var(--race-color); background:var(--race-dark); width:13px; height:13px; }
.game-arena .bench-card.selected { border-color:#fff1d5; box-shadow:0 0 0 2px #fff1d552; }
.game-arena .bench-card.selected .bench-bonus { top:27px; }
.game-arena .bench-check { top:auto; left:auto; right:4px; bottom:24px; width:17px; height:17px; }
.game-arena .bench-name { bottom:23px; }
.game-arena.has-combined-effects .enemy-roster { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:7px 12px; width:100%; max-width:380px; justify-self:center; }
.game-arena.has-combined-effects .enemy-roster>.zone-title { grid-column:1; font-size:7px; text-align:left; max-width:75px; margin:0; }
.game-arena.has-combined-effects .enemy-roster>.racial-core { grid-column:2; justify-content:flex-end; text-align:right; margin:0; }
.game-arena.has-combined-effects .enemy-roster>.racial-core>span { font-size:8px; }
.game-arena.has-combined-effects .enemy-roster .bench-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-column:1/-1; gap:6px; width:100%; }
.game-arena.has-combined-effects .enemy-roster .bench-card { width:100%; height:78px; min-width:0; }
.game-arena.has-combined-effects .enemy-roster .bench-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; bottom:19px; left:4px; right:4px; font-size:8px; line-height:1.2; }
.game-arena.has-combined-effects .enemy-roster .bench-state { font-size:8px; bottom:4px; left:4px; }
.game-arena.has-combined-effects .enemy-roster .bench-state .icon { width:9px; height:9px; }
.game-arena.has-combined-effects .enemy-roster .bench-bonus { top:26px; height:11px; width:11px; }
.game-arena .bench-state { display:flex; align-items:center; gap:8px; }
.game-arena .bench-state>[data-stat-kind] { display:inline-flex; gap:2px; align-items:center; font-variant-numeric:tabular-nums; }
.game-arena .racial-core[data-race] { color:var(--race-color); }
.game-arena .racial-core.is-eligible>strong, .game-arena .racial-core.is-eligible>.race-emblem { color:var(--race-color); }
.game-arena .racial-core>.race-emblem { width:17px; height:17px; }
.game-arena .racial-core.is-incomplete { color:#aab8cb; }
.game-arena .racial-core.is-incomplete>.race-emblem { opacity:.65; }
.game-arena .duel-card.face-up[data-race] { border-color:var(--race-color); box-shadow:inset 0 0 0 3px #0e182980,0 0 0 1px rgba(var(--race-rgb),.2),0 12px 30px #0006; background:var(--race-dark); }
.game-arena .duel-card.face-up .duel-card-shade { background:linear-gradient(180deg,#0a111a15 5%,transparent 18%,var(--race-dark) 57%,#0d1726 100%); }
.game-arena .duel-card .duel-race { top:7px; left:7px; max-width:calc(100% - 58px); padding:0; border:0; background:none; }
.game-arena .duel-race .race-badge { padding:3px 5px; font-size:9px; }
.game-arena .duel-race .race-emblem { width:12px; height:12px; }
.game-arena .duel-stars { top:7px; right:7px; }
.game-arena .duel-stars .star-pips { border:0; padding:4px; gap:1px; }
.game-arena .duel-stars .symbol-star { width:9px; height:9px; }
.game-arena .combat-channel-label { display:inline-flex; align-items:center; gap:4px; min-width:0; }
.game-arena .combat-channel-label>.icon { width:11px; height:11px; flex:none; }
.game-arena .combat-channel[data-channel="BONUS"] { border-left:2px solid rgba(var(--race-rgb),.7); }
.game-arena .combat-channel[data-channel="BONUS"] .combat-channel-label { color:var(--race-color); }
.game-arena .combat-channel[data-channel="ABILITY"] { border-left:2px solid #bacbdf77; }
.game-arena .combat-channel.is-inactive { border-left-style:dashed; opacity:.7; }
.game-arena .combat-channel.is-blocked { border-left-color:#e397a4; }
.game-arena .combat-channel-keywords .keyword { font-size:10px; padding:3px 4px; line-height:1.25; gap:3px; }
.game-arena .combat-channel-keywords .keyword>.icon { width:12px; height:12px; flex-basis:12px; }
.game-arena .combat-channel-keywords .keyword[data-effect-family="copy"] { padding:1px 2px; }
.game-arena .combat-channel-state { color:#c6d7e9; }
.game-arena .combat-channel.is-blocked .combat-channel-state { color:#ffb5b5; }
.game-arena .combat-channel.is-protected .combat-channel-state { color:#abd6ff; }
.game-arena .hand-card[data-affinity] { border-color:rgba(var(--race-rgb),.65); border-top:3px solid var(--race-color); }
.game-arena .hand-card.selected { border-color:#f8e7c0; }
.game-arena .hand-type { padding:0; background:none; border:0; top:8px; right:6px; }
.game-arena .hand-type .race-badge { font-size:8px; padding:3px 4px; }
.game-arena .hand-type .race-emblem { width:10px; height:10px; }
.game-arena .hand-cost { color:var(--stat-charge); background:#201d33ee; border-color:#d4c2ff70; }
.game-arena .hand-description .keyword { font-size:10px; padding:2px 4px; }
.game-arena .hand-description .keyword>.icon { width:11px; height:11px; flex-basis:11px; }
.game-arena .hand-description h3 { text-wrap:balance; }
.game-arena .mulligan-charge { color:var(--stat-charge); border-color:#d4c2ff70; background:#211e34ed; }
.game-arena .mulligan-charge>.icon { color:var(--stat-charge); }
.game-arena .mulligan-affinity .race-badge { font-size:10px; }
.game-arena .mulligan-card .keyword { font-size:11px; }
.game-arena .equipped-token[data-affinity] { border-color:rgba(var(--race-rgb),.55); }
.game-arena .deploy-card[data-race] { border-color:var(--race-color); background:var(--race-dark); }
.game-arena .deploy-race { background:none; border:0; padding:0; }
.game-arena .duel-card-stats b, .card-stats b, .life-value b { font-variant-numeric:tabular-nums; }
.game-arena .duel-card-stats small { display:flex; align-items:center; justify-content:center; gap:3px; }
.game-arena .duel-card-stats small .icon { display:inline-block; width:11px; height:11px; }
.monster-card, .tool-card, .bench-card, .hand-card, .deploy-card, .equipped-token {
  transition:transform var(--motion-hover-duration,180ms) var(--motion-ease,cubic-bezier(.22,1,.36,1)),border-color 180ms ease-out,box-shadow 180ms ease-out;
}
.game-shell .monster-card:focus-visible, .game-shell .tool-card:focus-visible, .game-arena .bench-card:focus-visible, .game-arena .hand-card:focus-visible, .game-arena .equipped-token:focus-visible {
  outline:3px solid #f8eed5; outline-offset:4px;
}
@media(hover:hover) and (pointer:fine) {
  .game-shell .monster-card:hover:not(:disabled) { transform:translateY(-5px); border-color:var(--race-color); box-shadow:0 10px 25px #0006,0 0 0 1px rgba(var(--race-rgb),.35); }
  .game-shell .tool-card:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 7px 20px #0005; }
  .game-arena .bench-card:hover:not(:disabled) { transform:translateY(-6px); border-color:#f9eed8; z-index:3; }
  .game-arena .hand-card:not(.mulligan-card):hover:not(:disabled) { transform:translateY(-16px) rotate(0deg) scale(1.06); z-index:6; box-shadow:0 16px 34px #0009; }
  .game-arena .mulligan-card:hover:not(:disabled) { transform:translateY(-5px); box-shadow:0 18px 38px #0008; }
  .game-arena .equipped-token:hover { transform:translateY(-3px); border-color:#e0d8c7; }
  .game-shell .monster-card:active:not(:disabled), .game-arena .bench-card:active:not(:disabled) { transform:translateY(-1px) scale(.98); }
  .game-arena .hand-card:not(.mulligan-card):active:not(:disabled) { transform:translateY(-10px) rotate(0deg) scale(1.02); }
}
@media(hover:none), (pointer:coarse) {
  .game-arena .hand-card:not(.mulligan-card):hover:not(:disabled) { transform:rotate(var(--fan,0deg)); }
  .game-arena .hand-card.selected:not(.mulligan-card):hover:not(:disabled) { transform:translateY(-8px) rotate(0deg); }
}
.reduced-motion .game-arena .hand-card, .reduced-motion .game-arena .bench-card, .reduced-motion .game-arena .mulligan-card,
.reduced-motion .game-shell .monster-card, .reduced-motion .game-shell .tool-card, .reduced-motion .equipped-token {
  transform:none!important; transition:none!important;
}
@media(prefers-reduced-motion:reduce) {
  .game-arena .hand-card, .game-arena .bench-card, .game-arena .mulligan-card, .game-shell .monster-card, .game-shell .tool-card, .equipped-token { transform:none!important; transition:none!important; }
}
@media(max-width:700px) {
  .game-shell .monster-card .card-race { left:6px; top:7px; }
  .game-shell .monster-card .card-stars { right:5px; top:7px; }
  .game-shell .card-race .race-badge { font-size:8px; gap:3px; padding:3px 4px; }
  .game-shell .card-race .race-emblem { width:12px; height:12px; }
  .game-shell .card-stars .star-pips { padding:3px; gap:1px; }
  .game-shell .card-stars .symbol-star { width:8px; height:8px; }
  .game-shell .monster-card .keyword { font-size:10px; }
  .game-arena .bench-race { top:3px; left:3px; }
  .game-arena .bench-stars { top:3px; right:3px; }
  .game-arena .bench-race .race-emblem { width:11px; height:11px; }
  .game-arena .bench-stars .symbol-star { width:7px; height:7px; }
  .game-arena .bench-stars .star-pips { padding:3px 2px; }
  .game-arena .bench-state { gap:5px; }
  .game-arena .duel-race .race-badge { font-size:8px; gap:3px; padding:3px; }
  .game-arena .duel-card .duel-race { left:5px; top:5px; }
  .game-arena .duel-stars { top:5px; right:5px; }
  .game-arena .duel-stars .symbol-star { width:8px; height:8px; }
  .game-arena .combat-channel-label { gap:3px; }
  .game-arena .combat-channel-label>.icon { width:10px; height:10px; }
  .game-arena .duel-card-stats small .icon { width:9px; height:9px; }
  .game-arena .combat-channel-keywords .keyword { font-size:9px; padding:2px 3px; }
  .game-arena .hand-type .race-badge { font-size:7px; gap:2px; padding:2px; }
  .game-arena .hand-type .race-emblem { width:9px; height:9px; }
  .game-arena .hand-description .keyword { font-size:9px; }
  .game-arena .mulligan-affinity .race-badge { font-size:9px; }
  .game-arena .mulligan-card .keyword { font-size:10px; }
}