:root {
  color-scheme: dark;
  font-family: "Avenir Next", "Segoe UI", ui-sans-serif, sans-serif;
  background: #091011;
  color: #f2f7f2;
  --ink: #f2f7f2;
  --muted: #93a7a1;
  --soft: #c5d2ca;
  --line: rgba(170, 207, 193, .18);
  --panel: rgba(15, 27, 27, .94);
  --panel-strong: #122322;
  --mat: #0e1a1a;
  --mint: #98edbb;
  --mint-deep: #2d7450;
  --violet: #aa8cff;
  --amber: #f0c17f;
  --danger: #ff9b93;
  --card-width: 68px;
  --card-height: 96px;
  --slot-width: var(--card-height);
  --slot-height: var(--card-height);
  --game-viewport-height: 100dvh;
  --selection-rail-height: 68px;
  --type-display: clamp(2.5rem, 6vw, 5.6rem);
  --type-title: 1.25rem;
  --type-heading: 1.125rem;
  --type-body: 1rem;
  --type-body-dense: .875rem;
  --type-action: .875rem;
  --type-label: .8125rem;
  --type-meta: .75rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 14% -10%, rgba(95, 198, 146, .16), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgba(142, 112, 255, .15), transparent 27rem),
    #091011;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(240, 193, 127, .82); outline-offset: 3px; }

.shell { width: min(1390px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 58px; }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 8px; color: var(--mint); font-size: .68rem; font-weight: 800; letter-spacing: .17em; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 680px; margin-bottom: 10px; font-size: var(--type-display); line-height: .92; letter-spacing: -.04em; }
h2 { font-size: var(--type-title); letter-spacing: -.02em; }
h3 { margin-bottom: 0; font-size: var(--type-heading); letter-spacing: -.015em; }
p { color: var(--muted); line-height: 1.5; }
.hero-copy { max-width: 590px; margin-bottom: 0; font-size: .98rem; }
.prototype-stamp { padding: 9px 11px; border: 1px solid rgba(240, 193, 127, .45); color: var(--amber); font-size: .64rem; font-weight: 800; letter-spacing: .12em; transform: rotate(-2deg); white-space: nowrap; }

.panel, .game-panel { border: 1px solid var(--line); background: var(--panel); box-shadow: 0 24px 70px rgba(0, 0, 0, .2); }
.panel { padding: 20px; border-radius: 16px; }
.game-panel { position: relative; overflow: hidden; border-radius: 20px; background: var(--mat); }
.setup-panel { margin-bottom: 18px; }
.setup-heading, .game-toolbar, .panel-heading, .hand-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.setup-heading h2, .game-toolbar h2, .panel-heading h2, .hand-heading h2 { margin-bottom: 4px; }
.panel-copy { margin: 0; font-size: .84rem; }
.setup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.setup-grid > label { align-content: start; }
label { display: grid; gap: 7px; color: var(--soft); font-size: .78rem; font-weight: 700; }
input, select { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(2, 8, 8, .6); color: var(--ink); }
select { min-height: 43px; }
.setup-field-note { color: var(--muted); font-size: .68rem; font-weight: 500; line-height: 1.35; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.button { border: 1px solid transparent; border-radius: 9px; padding: 10px 14px; color: #f8fff9; font-size: .8rem; font-weight: 800; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .38; }
.button--primary { background: var(--mint-deep); }
.button--secondary { background: #263b39; }
.button--danger { border-color: rgba(255, 155, 147, .48); background: rgba(108, 35, 37, .72); color: #ffb1a8; }
.button--ghost, .button--tiny { border-color: var(--line); background: transparent; color: var(--soft); }
.button--tiny { padding: 7px 10px; font-size: .7rem; }
.status { align-self: center; padding: 7px 10px; border-radius: 99px; font-size: .72rem; font-weight: 750; }
.status--quiet { color: var(--muted); background: rgba(255, 255, 255, .05); }

.game-toolbar { align-items: center; padding: 22px 22px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(100deg, rgba(30, 62, 52, .34), rgba(19, 28, 47, .26)); }
.game-toolbar__controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.toolbar-meta { display: flex; align-items: center; flex-wrap: wrap; justify-content: end; gap: 9px; }
.game-actions { display: flex; align-items: center; gap: 7px; }
#fullscreen-button { display: none; }
.fullscreen-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.fullscreen-icon--exit { display: none; }
.is-fullscreen .fullscreen-icon--enter { display: none; }
.is-fullscreen .fullscreen-icon--exit { display: block; }
.fullscreen-button__label { white-space: nowrap; }
.role-chip, .turn-chip, .connection-count { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--soft); font-size: .72rem; font-weight: 750; }
.role-chip { border-color: rgba(152, 237, 187, .35); color: var(--mint); }
.turn-chip { border-color: rgba(240, 193, 127, .35); color: var(--amber); }
.selection-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 49px; padding: 8px 22px; border-bottom: 1px solid var(--line); color: var(--soft); font-size: .82rem; }
.selection-bar__main { display: grid; min-width: 0; gap: 5px; }
.selection-bar__main > #selection-status { min-width: 0; overflow-wrap: anywhere; }
.selection-bar__main > #selection-status.is-warning { color: #ffd0ca; }
.selection-bar__main > #selection-status.is-success { color: #baf4ce; }
.selection-bar__actions { display: flex; flex: 0 0 auto; gap: 7px; }
.selection-bar.is-submitting { cursor: progress; background: rgba(29, 48, 42, .84); }
.card-preload { position: absolute; z-index: 60; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(7, 15, 15, .86); backdrop-filter: blur(7px); }
.card-preload__surface { display: grid; width: min(320px, 100%); gap: 9px; justify-items: center; padding: 22px; border: 1px solid rgba(152, 237, 187, .34); border-radius: 14px; background: rgba(14, 26, 26, .96); box-shadow: 0 20px 55px rgba(0, 0, 0, .46); color: var(--soft); text-align: center; }
.card-preload__surface strong { color: var(--ink); font-size: .9rem; }
.card-preload__surface > span:not(.card-preload__spinner) { color: var(--muted); font-size: .7rem; }
.card-preload__spinner { width: 28px; height: 28px; border: 3px solid rgba(152, 237, 187, .2); border-top-color: var(--mint); border-radius: 50%; animation: card-preload-spin .8s linear infinite; }
.card-preload__progress { width: min(240px, 100%); height: 5px; overflow: hidden; border-radius: 99px; background: rgba(197, 210, 202, .14); }
.card-preload__progress > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--mint); transform: scaleX(0); transform-origin: left center; transition: transform .16s ease-out; }
@keyframes card-preload-spin { to { transform: rotate(360deg); } }
.selection-steps { display: flex; min-width: 0; align-items: center; gap: 0; color: var(--muted); font-size: .68rem; font-weight: 800; }
.selection-step { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.selection-step:not(:last-child)::after { width: clamp(18px, 3vw, 42px); height: 1px; margin-inline: 8px; background: rgba(197, 210, 202, .24); content: ""; }
.selection-step[data-state="complete"] { color: var(--mint); }
.selection-step[data-state="complete"]::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
.selection-step[data-state="active"] { color: var(--amber); }
.selection-step[data-state="active"]::before { width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; content: ""; }
.selection-cost-preview { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 5px; }
.selection-cost-preview__label { color: var(--muted); font-size: .68rem; }
.selection-cost-chip { display: inline-grid; min-height: 27px; grid-template-columns: auto auto auto; align-items: center; gap: 5px; padding: 3px 6px; border: 1px solid rgba(152, 237, 187, .25); border-radius: 6px; background: rgba(2, 8, 8, .38); color: var(--soft); font-size: .68rem; font-variant-numeric: tabular-nums; }
.selection-cost-chip strong { color: var(--mint); font-size: .64rem; }
.selection-cost-chip small { color: var(--amber); font-size: .62rem; }
.selection-cost-preview.is-unavailable .selection-cost-chip { border-color: rgba(255, 155, 147, .35); }
.selection-cost-preview__shortage { color: var(--danger); font-size: .68rem; font-weight: 800; }
.selection-bar.is-submitting .selection-bar__actions .button { pointer-events: none; }

.board-scroll { overflow: visible; overscroll-behavior-x: contain; scrollbar-color: #38534d transparent; }
.playmat { position: relative; display: grid; width: 100%; min-width: 0; grid-template-columns: clamp(180px, 18%, 220px) minmax(0, 1fr) clamp(180px, 18%, 220px); grid-template-rows: 270px 71px 71px 270px; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 48%, rgba(77, 155, 112, .1), transparent 31rem); }
.lobby-waiting { position: absolute; z-index: 12; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(4, 12, 16, .58); backdrop-filter: blur(5px); }
.lobby-waiting[hidden] { display: none; }
.lobby-waiting__surface { display: grid; width: min(440px, calc(100% - 24px)); justify-items: center; gap: 9px; padding: clamp(20px, 4vw, 34px); border: 1px solid rgba(152, 237, 187, .32); border-radius: 18px; background: rgba(9, 25, 29, .96); box-shadow: 0 22px 70px rgba(0, 0, 0, .5); text-align: center; }
.lobby-waiting__surface h2, .lobby-waiting__surface p { margin: 0; }
.lobby-waiting__surface p { max-width: 350px; font-size: .84rem; }
.lobby-waiting__spinner { width: 30px; height: 30px; border: 3px solid rgba(152, 237, 187, .18); border-top-color: var(--mint); border-radius: 50%; animation: lobby-waiting-spin .9s linear infinite; }
.lobby-waiting__players { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 5px; }
.lobby-waiting__player { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.lobby-waiting__player.is-ready { border-color: rgba(152, 237, 187, .36); background: rgba(45, 116, 80, .2); color: var(--mint); }
.badge--waiting { color: var(--amber); }
@keyframes lobby-waiting-spin { to { transform: rotate(360deg); } }
.battle-feedback { --feedback-accent: var(--amber); position: absolute; z-index: 26; inset-block-start: 50%; inset-inline-start: 50%; display: grid; width: max-content; max-width: min(390px, calc(100% - 36px)); grid-template-columns: 36px minmax(0, 1fr); gap: 11px; align-items: center; padding: 11px 16px 11px 12px; border: 2px solid color-mix(in srgb, var(--feedback-accent) 58%, transparent); border-radius: 12px; background: rgba(8, 17, 16, .97); color: #fff4e2; opacity: 0; clip-path: inset(0 50% round 10px); box-shadow: 0 12px 24px rgba(0, 0, 0, .46); pointer-events: none; transform: translate(-50%, -50%); transition: opacity .14s ease-out, clip-path .3s cubic-bezier(.16, 1, .3, 1); }
.battle-feedback.is-visible { opacity: 1; clip-path: inset(0 round 8px); }
.battle-feedback--danger { --feedback-accent: var(--danger); }
.battle-feedback--mint { --feedback-accent: var(--mint); }
.battle-feedback__mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--feedback-accent) 15%, transparent); color: var(--feedback-accent); }
.battle-feedback__mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.battle-feedback__copy { display: grid; min-width: 0; gap: 2px; overflow-wrap: anywhere; line-height: 1.25; text-align: left; }
.battle-feedback__copy strong { color: #fff8eb; font-size: var(--type-action); }
.battle-feedback__copy span { overflow: hidden; color: var(--soft); font-size: var(--type-label); text-overflow: ellipsis; white-space: nowrap; }
.card-play-feedback { position: absolute; z-index: 43; top: 50%; left: 50%; display: grid; width: min(218px, calc(100% - 24px)); gap: 8px; justify-items: center; padding: 10px 10px 12px; border: 1px solid rgba(240, 193, 127, .72); border-radius: 15px; background: rgba(7, 15, 15, .97); box-shadow: 0 20px 48px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .04); opacity: 0; pointer-events: none; transform: translate(-50%, -46%) scale(.84); transition: opacity .18s ease-out, transform .38s cubic-bezier(.16, 1, .3, 1); }
.card-play-feedback[hidden] { display: none; }
.card-play-feedback.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.card-play-feedback__heading { display: grid; width: 100%; gap: 2px; text-align: center; }
.card-play-feedback__eyebrow { color: var(--amber); font-size: .54rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.card-play-feedback__heading strong { color: #fff8eb; font-size: var(--type-action); }
.card-play-feedback__heading span:last-child { overflow: hidden; color: var(--soft); font-size: var(--type-label); text-overflow: ellipsis; white-space: nowrap; }
.card-play-feedback__card.field-card { width: 174px; height: 236px; min-height: 0; margin: 0; padding: 7px; border-color: rgba(240, 193, 127, .72); border-radius: 10px; }
.card-play-feedback__card.field-card .field-card__art { height: auto; min-height: 60px; flex: 1 1 auto; margin: 5px 0 6px; }
.card-play-feedback__card.field-card .field-card__name { font-size: .72rem; }
.card-play-feedback__card.field-card .field-card__lineage { font-size: .48rem; }
.card-play-feedback__card.field-card .field-card__ability,
.card-play-feedback__card.field-card .field-card__action-rule { font-size: .46rem; }
.card-play-feedback__card.field-card .field-card__bottom { max-height: 34%; }
.card-play-feedback--combat { width: min(158px, calc(100% - 28px)); gap: 5px; padding: 7px 7px 8px; border-radius: 11px; transform: translate(-50%, -48%) scale(.88); }
.card-play-feedback--combat.is-visible { transform: translate(-50%, -50%) scale(1); }
.card-play-feedback--combat .card-play-feedback__eyebrow { font-size: .46rem; }
.card-play-feedback--combat .card-play-feedback__heading strong { font-size: .76rem; }
.card-play-feedback--combat .card-play-feedback__heading span:last-child { font-size: .6rem; }
.card-play-feedback--combat .card-play-feedback__card.field-card { width: 116px; height: 158px; padding: 5px; border-radius: 8px; }
.card-play-feedback--combat .card-play-feedback__card.field-card .field-card__art { min-height: 38px; margin: 3px 0 4px; }
.card-play-feedback--combat .card-play-feedback__card.field-card .field-card__name { font-size: .58rem; }
.card-play-feedback--combat .card-play-feedback__card.field-card .field-card__lineage { font-size: .4rem; }
.card-play-feedback--combat .card-play-feedback__card.field-card .field-card__ability,
.card-play-feedback--combat .card-play-feedback__card.field-card .field-card__action-rule { font-size: .37rem; }
.action-chain-feedback { position: absolute; z-index: 26; top: 12px; left: 50%; display: grid; width: min(430px, calc(100% - 28px)); gap: 9px; padding: 10px 12px 11px; border: 1px solid rgba(152, 237, 187, .55); border-radius: 12px; background: rgba(8, 17, 16, .96); color: var(--ink); opacity: 0; clip-path: inset(0 0 100% round 10px); box-shadow: 0 6px 12px rgba(0, 0, 0, .34); pointer-events: none; transform: translate(-50%, -10px); transition: opacity .18s ease-out, clip-path .36s cubic-bezier(.16, 1, .3, 1), transform .36s cubic-bezier(.16, 1, .3, 1); }
.action-chain-feedback.is-visible { opacity: 1; clip-path: inset(0 round 10px); transform: translate(-50%, 0); }
.action-chain-feedback.is-waiting { border-color: rgba(240, 193, 127, .64); }
.action-chain-feedback.is-complete { border-color: rgba(240, 193, 127, .58); }
.action-chain-feedback__heading { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: center; }
.action-chain-feedback__mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(152, 237, 187, .3); border-radius: 8px; background: rgba(152, 237, 187, .1); color: var(--mint); }
.action-chain-feedback.is-waiting .action-chain-feedback__mark { border-color: rgba(240, 193, 127, .42); background: rgba(240, 193, 127, .13); color: var(--amber); }
.action-chain-feedback.is-complete .action-chain-feedback__mark { border-color: rgba(240, 193, 127, .35); background: rgba(240, 193, 127, .12); color: var(--amber); }
.action-chain-feedback__mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.5; }
.action-chain-feedback__heading > span:last-child { display: grid; min-width: 0; gap: 2px; }
.action-chain-feedback__heading strong { color: #fff8eb; font-size: var(--type-action); }
.action-chain-feedback__heading span:last-child span { color: var(--soft); font-size: var(--type-label); line-height: 1.25; }
.action-chain-feedback__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.action-chain-feedback__item { display: grid; grid-template-columns: 19px 58px minmax(0, 1fr); gap: 6px; align-items: center; min-width: 0; padding: 5px 6px; border: 1px solid rgba(152, 237, 187, .16); background: rgba(152, 237, 187, .045); opacity: 0; transform: translateY(5px); animation: action-chain-item-in .32s cubic-bezier(.16, 1, .3, 1) calc(var(--chain-index) * 55ms) both; }
.action-chain-feedback.is-complete .action-chain-feedback__item { border-color: rgba(240, 193, 127, .18); background: rgba(240, 193, 127, .05); }
.action-chain-feedback__index { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: rgba(152, 237, 187, .16); color: var(--mint); font-size: .58rem; font-weight: 900; }
.action-chain-feedback.is-complete .action-chain-feedback__index { background: rgba(240, 193, 127, .16); color: var(--amber); }
.is-presenting-battle .action-chain-feedback { visibility: hidden; }
.action-chain-feedback__kind { color: var(--muted); font-size: .54rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.action-chain-feedback__name { overflow: hidden; color: var(--soft); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
@keyframes action-chain-item-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.battle-delta { position: absolute; z-index: 40; inset-block-start: 50%; inset-inline-start: 50%; min-width: max-content; padding: 4px 7px; border: 1px solid currentColor; border-radius: 6px; background: #111b19; color: var(--soft); font-size: .7rem; font-weight: 950; line-height: 1; pointer-events: none; animation: battle-delta-out .9s cubic-bezier(.16, 1, .3, 1) both; }
.battle-delta--damage, .battle-delta--life, .battle-delta--spend { color: #ffb3aa; }
.battle-delta--power, .battle-delta--add, .battle-delta--refresh { color: #ffe0a9; }
.life-readout, .potency-chip { position: relative; }
.life-readout.is-action-target { border: 1px solid rgba(240, 193, 127, .64); border-radius: 7px; background: rgba(240, 193, 127, .1); cursor: pointer; outline: 1px solid rgba(240, 193, 127, .18); outline-offset: 2px; }
.life-readout.is-action-target:hover, .life-readout.is-action-target:focus-visible { background: rgba(240, 193, 127, .18); box-shadow: 0 0 0 3px rgba(240, 193, 127, .12); }
.life-readout.is-action-target:focus-visible { outline: 2px solid var(--amber); }

.elemental-projectile { position: fixed; z-index: 90; left: 0; top: 0; width: 92px; height: 64px; color: var(--element-color); pointer-events: none; will-change: transform, opacity, filter; }
.elemental-projectile__trail { position: absolute; top: 50%; right: 36%; width: 116px; height: 18px; border-radius: 99px; background: linear-gradient(90deg, transparent 2%, color-mix(in srgb, var(--element-color) 24%, transparent) 38%, color-mix(in srgb, var(--element-color) 88%, white) 100%); box-shadow: 6px 5px 16px rgba(0, 0, 0, .42); filter: blur(1.5px); transform: translateY(-50%) rotate(var(--flight-angle)); transform-origin: 100% 50%; }
.elemental-projectile__wake { position: absolute; top: 50%; right: 40%; width: 96px; height: 5px; border-radius: 99px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--element-hot, #fff) 78%, white)); filter: blur(.8px); transform: translateY(-50%) rotate(var(--flight-angle)); transform-origin: 100% 50%; }
.elemental-projectile__aura { position: absolute; left: 25px; top: 50%; width: 60px; height: 44px; border: 2px solid color-mix(in srgb, var(--element-color) 78%, transparent); border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--element-color) 34%, transparent), transparent 68%); box-shadow: 0 0 16px color-mix(in srgb, var(--element-color) 70%, transparent); filter: blur(3px); opacity: .72; transform: translate(-50%, -50%) rotate(var(--flight-angle)); animation: elemental-projectile-aura .46s ease-in-out infinite alternate; }
.elemental-projectile__ribbon { position: absolute; left: 0; top: 50%; width: 76px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--element-color) 88%, white), transparent); filter: blur(.7px); opacity: .84; transform-origin: 0 50%; }
.elemental-projectile__ribbon--a { transform: translateY(-50%) rotate(calc(var(--flight-angle) - 22deg)); }
.elemental-projectile__ribbon--b { transform: translateY(-50%) rotate(calc(var(--flight-angle) + 22deg)); opacity: .56; }
.elemental-projectile__body { position: absolute; left: 58%; top: 50%; width: 58px; height: 36px; transform: translate(-50%, -50%) rotate(var(--flight-angle)); }
.elemental-projectile__shell { position: absolute; inset: 4px 2px 4px 7px; border: 1px solid color-mix(in srgb, var(--element-color) 74%, white); border-radius: 72% 42% 56% 72%; background: color-mix(in srgb, var(--element-color) 42%, transparent); box-shadow: 4px 5px 9px rgba(0, 0, 0, .4); filter: blur(.3px); }
.elemental-projectile__core { position: absolute; top: 50%; right: 0; z-index: 3; display: block; width: 32px; height: 32px; background: var(--element-fill); box-shadow: 0 0 10px var(--element-color), 4px 5px 10px rgba(0, 0, 0, .45); transform: translateY(-50%); }
.elemental-projectile__motif { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.elemental-projectile__motif-piece { position: absolute; width: 15px; height: 12px; border: 1px solid color-mix(in srgb, var(--element-hot, #fff) 72%, transparent); background: var(--element-fill); box-shadow: 0 0 8px var(--element-color); opacity: .88; transform: rotate(calc((var(--motif-index) - 1) * 18deg)); }
.elemental-projectile__particle { position: absolute; left: var(--particle-x); top: var(--particle-y); width: 7px; height: 7px; border: 1px solid color-mix(in srgb, var(--element-hot, #fff) 86%, white); border-radius: 50% 30% 50% 30%; background: var(--element-fill); box-shadow: 0 0 8px var(--element-color); pointer-events: none; }
.elemental-channel, .elemental-impact { position: fixed; z-index: 91; width: 1px; height: 1px; color: var(--element-color); pointer-events: none; }
.elemental-channel__ring, .elemental-impact__ring { position: absolute; left: 0; top: 0; width: 38px; height: 38px; border: 3px solid currentColor; border-radius: 50%; box-shadow: 3px 4px 8px rgba(0, 0, 0, .38); }
.elemental-channel__core, .elemental-impact__flash { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--element-fill); box-shadow: 3px 4px 9px rgba(0, 0, 0, .45); }
.elemental-channel__mote, .elemental-impact__spark { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border: 1px solid color-mix(in srgb, currentColor 76%, white); border-radius: 50%; background: var(--element-fill); box-shadow: 2px 3px 6px rgba(0, 0, 0, .4); }
.elemental-impact__burst { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }
.elemental-impact__burst-ray { position: absolute; left: 0; top: 0; width: 72px; height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--element-hot), var(--element-color) 62%, transparent); box-shadow: 0 0 10px var(--element-color); transform-origin: 0 50%; }
.elemental-impact__ring { width: 58px; height: 58px; border-width: 4px; }
.elemental-impact__flash { width: 48px; height: 48px; }
.elemental-impact__spark { width: 12px; height: 12px; }
.elemental-impact--fuego .elemental-impact__spark { border-radius: 0; clip-path: polygon(50% 0, 88% 44%, 72% 100%, 42% 72%, 12% 100%, 28% 44%); }
.elemental-impact--agua .elemental-impact__spark { border-radius: 70% 22% 70% 36%; transform: rotate(24deg); }
.elemental-impact--tierra .elemental-impact__spark { border-radius: 2px; clip-path: polygon(0 14%, 82% 0, 100% 82%, 18% 100%); }
.elemental-impact--luz .elemental-impact__spark { border-radius: 0; clip-path: polygon(50% 0, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0 50%, 34% 34%); }
.elemental-impact--metal .elemental-impact__spark { border-radius: 2px; rotate: 45deg; }
.elemental-impact--oscuridad .elemental-impact__spark { border-radius: 58% 32% 52% 44%; }
.elemental-impact--viento .elemental-impact__spark { border-radius: 50%; border-left-color: transparent; }
.elemental-impact--electricidad .elemental-impact__spark { border-radius: 0; clip-path: polygon(48% 0, 88% 0, 62% 42%, 100% 42%, 48% 100%, 58% 58%, 18% 58%); }
.elemental-impact.is-reduced .elemental-impact__spark { width: 24px; height: 24px; background: color-mix(in srgb, var(--element-color) 18%, transparent); }

.elemental-projectile--fuego, .elemental-channel--fuego, .elemental-impact--fuego { --element-color: #ff542f; --element-hot: #fff3a1; --element-deep: #8f1712; --element-fill: linear-gradient(135deg, #fff3a1 4%, #ffac32 34%, #ff542f 64%, #9e1913 100%); }
.elemental-projectile--fuego .elemental-projectile__body { width: 72px; height: 46px; }
.elemental-projectile--fuego .elemental-projectile__shell { inset: 0 0 0 1px; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent 0 8%, #b91f16 18%, #ff542f 42%, #ffb12f 70%, #fff3a1 100%); clip-path: polygon(0 50%, 18% 22%, 24% 4%, 40% 28%, 50% 0, 64% 28%, 100% 50%, 64% 72%, 50% 100%, 40% 72%, 24% 96%, 18% 78%); filter: drop-shadow(0 0 8px #ff542f); }
.elemental-projectile--fuego .elemental-projectile__core { right: 2px; width: 37px; height: 37px; border: 3px solid #fff3a1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fffbd1 0 10%, #ffcf3d 28%, #ff542f 62%, #75110e 100%); box-shadow: 0 0 10px #ffba35, 0 0 20px color-mix(in srgb, #ff542f 76%, transparent), inset -5px -6px 0 rgba(94, 8, 8, .3); rotate: 0deg; }
.elemental-projectile--fuego .elemental-projectile__trail { right: 25%; height: 24px; background: linear-gradient(90deg, transparent 0, rgba(143, 23, 18, .18) 16%, #ff542f 62%, #fff3a1 100%); clip-path: polygon(0 42%, 22% 24%, 34% 40%, 48% 10%, 62% 38%, 100% 28%, 100% 72%, 62% 62%, 48% 90%, 34% 60%, 22% 76%, 0 58%); }
.elemental-projectile--fuego .elemental-projectile__wake { right: 25%; }
.elemental-projectile--fuego .elemental-projectile__ribbon { right: 25%; left: auto; transform-origin: 100% 50%; }
.elemental-projectile--agua, .elemental-channel--agua, .elemental-impact--agua { --element-color: #64d7ff; --element-hot: #e8fcff; --element-fill: linear-gradient(135deg, #dffaff 8%, #4fc9f0 50%, #176dbd 92%); }
.elemental-projectile--agua .elemental-projectile__core { border-radius: 70% 36% 66% 42%; rotate: 45deg; scale: .94; }
.elemental-projectile--tierra, .elemental-channel--tierra, .elemental-impact--tierra { --element-color: #c9853e; --element-hot: #ffe0a0; --element-deep: #4a2917; --element-fill: linear-gradient(145deg, #ffe0a0 2%, #c9853e 38%, #754321 70%, #342018 100%); }
.elemental-projectile--tierra .elemental-projectile__body { width: 68px; height: 46px; }
.elemental-projectile--tierra .elemental-projectile__shell { inset: 2px 0 2px 4px; border: 3px solid #4a2917; border-radius: 3px; background: linear-gradient(145deg, #f4c77d 0 18%, #9b5d2d 19% 48%, #5b341d 49% 74%, #c9853e 75% 100%); clip-path: polygon(4% 32%, 18% 8%, 48% 0, 76% 14%, 100% 42%, 88% 78%, 58% 100%, 24% 90%, 0 66%); box-shadow: inset 6px 5px 0 rgba(255, 224, 160, .16), inset -7px -6px 0 rgba(36, 18, 12, .32), 0 0 10px rgba(201, 133, 62, .62); filter: none; }
.elemental-projectile--tierra .elemental-projectile__core { right: 4px; width: 39px; height: 38px; border: 3px solid #4a2917; background: linear-gradient(135deg, #ffe0a0 0 10%, #b66e32 11% 42%, #704020 43% 72%, #3a2117 73% 100%); clip-path: polygon(18% 4%, 82% 13%, 100% 54%, 68% 96%, 18% 84%, 0 42%); box-shadow: inset 6px 5px 0 rgba(255, 232, 181, .18), inset -6px -6px 0 rgba(32, 16, 11, .35), 0 0 9px rgba(201, 133, 62, .64); }
.elemental-projectile--tierra .elemental-projectile__trail { height: 20px; background: radial-gradient(circle at 14% 40%, #8b542b 0 3px, transparent 4px), radial-gradient(circle at 32% 65%, #d49b57 0 3px, transparent 4px), radial-gradient(circle at 52% 28%, #6b3b20 0 4px, transparent 5px), linear-gradient(90deg, transparent, rgba(201, 133, 62, .66)); filter: none; }
.elemental-projectile--luz, .elemental-channel--luz, .elemental-impact--luz { --element-color: #fff3ac; --element-hot: #fff; --element-fill: linear-gradient(135deg, #fff 14%, #fff0a0 54%, #e5ad45 96%); }
.elemental-projectile--luz .elemental-projectile__core { clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 63%, 50% 100%, 38% 63%, 0 50%, 38% 36%); }
.elemental-projectile--metal, .elemental-channel--metal, .elemental-impact--metal { --element-color: #d9e5e8; --element-hot: #fff; --element-fill: linear-gradient(135deg, #fff 3%, #b9c9ce 40%, #5f747c 72%, #e8f2f4 96%); }
.elemental-projectile--metal .elemental-projectile__core { border-radius: 3px; rotate: 45deg; scale: .8; }
.elemental-projectile--oscuridad, .elemental-channel--oscuridad, .elemental-impact--oscuridad { --element-color: #bc87ff; --element-hot: #ead7ff; --element-fill: radial-gradient(circle at 36% 30%, #e2c2ff 0 12%, #8d51d0 36%, #291238 82%); }
.elemental-projectile--oscuridad .elemental-projectile__core { border-radius: 58% 42% 55% 45%; }
.elemental-projectile--viento, .elemental-channel--viento, .elemental-impact--viento { --element-color: #9aefcf; --element-hot: #effff8; --element-fill: linear-gradient(135deg, #e9fff5 5%, #76dcb8 55%, #238c75 94%); }
.elemental-projectile--viento .elemental-projectile__core { border: 4px solid currentColor; border-left-color: transparent; border-radius: 50%; background: transparent; rotate: -25deg; scale: .84; }
.elemental-projectile--electricidad, .elemental-channel--electricidad, .elemental-impact--electricidad { --element-color: #ffe769; --element-hot: #fffbd0; --element-fill: linear-gradient(145deg, #fffbd0 4%, #ffe24f 48%, #ef9524 96%); }
.elemental-projectile--electricidad .elemental-projectile__core { clip-path: polygon(48% 0, 92% 0, 63% 40%, 91% 40%, 20% 100%, 42% 55%, 11% 55%); }
.elemental-projectile--fuego .elemental-projectile__motif-piece { border-radius: 0; clip-path: polygon(50% 0, 86% 48%, 70% 100%, 42% 72%, 14% 100%, 28% 48%); }
.elemental-projectile--agua .elemental-projectile__motif-piece { border-radius: 68% 22% 68% 38%; transform: rotate(calc((var(--motif-index) - 1) * 22deg)) scale(.84 1.18); }
.elemental-projectile--tierra .elemental-projectile__motif-piece { border-radius: 2px; clip-path: polygon(0 16%, 82% 0, 100% 78%, 18% 100%); }
.elemental-projectile--luz .elemental-projectile__motif-piece { border-radius: 0; clip-path: polygon(50% 0, 67% 34%, 100% 50%, 67% 66%, 50% 100%, 33% 66%, 0 50%, 33% 34%); }
.elemental-projectile--metal .elemental-projectile__motif-piece { border-radius: 2px; clip-path: polygon(0 50%, 30% 0, 100% 16%, 76% 50%, 100% 84%, 30% 100%); }
.elemental-projectile--oscuridad .elemental-projectile__motif-piece { border-radius: 58% 34% 62% 42%; }
.elemental-projectile--viento .elemental-projectile__motif-piece { border-width: 2px; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; background: transparent; }
.elemental-projectile--electricidad .elemental-projectile__motif-piece { border-radius: 0; clip-path: polygon(48% 0, 88% 0, 62% 42%, 100% 42%, 48% 100%, 58% 58%, 18% 58%); }
.elemental-projectile--fuego .elemental-projectile__aura { left: 74%; width: 72px; height: 50px; border-radius: 44% 56% 62% 38%; transform: translate(-50%, -50%) rotate(var(--flight-angle)) scaleY(1.18); transform-origin: 50% 50%; }
.elemental-projectile--fuego .elemental-projectile__particle { clip-path: polygon(50% 0, 88% 42%, 70% 100%, 38% 70%, 12% 100%, 28% 42%); border-radius: 0; }
.elemental-projectile--agua .elemental-projectile__aura { border-radius: 64% 36% 70% 30%; transform: translate(-50%, -50%) rotate(28deg) scaleY(1.14); }
.elemental-projectile--agua .elemental-projectile__particle { border-radius: 64% 20% 64% 38%; transform: rotate(28deg); }
.elemental-projectile--tierra .elemental-projectile__aura { border-radius: 8px; clip-path: polygon(0 28%, 82% 0, 100% 68%, 18% 100%); }
.elemental-projectile--tierra .elemental-projectile__particle { border-radius: 2px; clip-path: polygon(0 20%, 78% 0, 100% 78%, 22% 100%); }
.elemental-projectile--luz .elemental-projectile__aura { border-radius: 0; clip-path: polygon(50% 0, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0 50%, 34% 34%); transform: translate(-50%, -50%) rotate(var(--flight-angle)) scale(1.12); }
.elemental-projectile--luz .elemental-projectile__particle { border-radius: 0; clip-path: polygon(50% 0, 68% 38%, 100% 50%, 68% 62%, 50% 100%, 32% 62%, 0 50%, 32% 38%); }
.elemental-projectile--metal .elemental-projectile__aura { border-radius: 4px; transform: translate(-50%, -50%) rotate(var(--flight-angle)) skewX(-18deg); }
.elemental-projectile--metal .elemental-projectile__particle { border-radius: 2px; rotate: 45deg; }
.elemental-projectile--oscuridad .elemental-projectile__aura { border-radius: 62% 38% 48% 52%; background: radial-gradient(ellipse, color-mix(in srgb, var(--element-color) 46%, transparent), transparent 70%); }
.elemental-projectile--oscuridad .elemental-projectile__particle { border-radius: 55% 35% 60% 42%; }
.elemental-projectile--viento .elemental-projectile__aura { border-width: 3px; border-left-color: transparent; border-bottom-color: transparent; background: transparent; transform: translate(-50%, -50%) rotate(-24deg) scaleX(1.16); }
.elemental-projectile--viento .elemental-projectile__particle { border-radius: 50%; border-left-color: transparent; }
.elemental-projectile--electricidad .elemental-projectile__aura { border-radius: 0; clip-path: polygon(48% 0, 72% 0, 60% 36%, 100% 36%, 62% 100%, 44% 58%, 8% 58%); }
.elemental-projectile--electricidad .elemental-projectile__particle { border-radius: 0; clip-path: polygon(48% 0, 88% 0, 62% 42%, 100% 42%, 48% 100%, 58% 58%, 18% 58%); }
.elemental-projectile__body::before { content: ""; position: absolute; inset: 2px 0 2px 3px; border: 2px solid color-mix(in srgb, var(--element-color) 66%, transparent); border-left-color: transparent; border-radius: 50%; opacity: .72; transform: rotate(-18deg); filter: blur(.2px); }
.elemental-projectile__body::after { content: ""; position: absolute; top: 3px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--element-hot, #fff); box-shadow: 0 0 7px var(--element-color); opacity: .86; }
.elemental-projectile--fuego .elemental-projectile__body::before { border-radius: 54% 46% 62% 38%; transform: rotate(28deg) scaleY(1.18); }
.elemental-projectile--agua .elemental-projectile__body::before { border-radius: 72% 28% 70% 30%; transform: rotate(48deg) scale(.92, 1.16); }
.elemental-projectile--tierra .elemental-projectile__body::before { clip-path: polygon(0 25%, 88% 0, 100% 74%, 18% 100%); border-radius: 0; transform: rotate(-8deg); }
.elemental-projectile--luz .elemental-projectile__body::before { border-width: 1px; border-radius: 0; clip-path: polygon(50% 0, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0 50%, 34% 34%); transform: scale(1.12); }
.elemental-projectile--metal .elemental-projectile__body::before { border-radius: 4px; transform: rotate(-8deg) skewX(-18deg) scaleX(1.16); }
.elemental-projectile--oscuridad .elemental-projectile__body::before { border-radius: 62% 38% 48% 52%; transform: rotate(24deg) scale(1.08, .86); }
.elemental-projectile--viento .elemental-projectile__body::before { border-width: 3px; border-top-color: transparent; border-bottom-color: transparent; transform: rotate(-28deg) scaleX(1.18); }
.elemental-projectile--electricidad .elemental-projectile__body::before { clip-path: polygon(0 35%, 32% 35%, 42% 0, 58% 60%, 72% 28%, 100% 28%, 100% 70%, 68% 70%, 58% 100%, 42% 40%, 28% 72%, 0 72%); border-radius: 0; transform: scaleX(1.08); }
.elemental-impact--fuego .elemental-impact__ring { border-radius: 54% 46% 64% 36%; transform: translate(-50%, -50%) rotate(-18deg) scaleX(.9); }
.elemental-impact--fuego .elemental-impact__flash { width: 68px; height: 68px; border-radius: 0; background: linear-gradient(135deg, #fff7bc 5%, #ffc339 30%, #ff542f 64%, #9e1913 100%); clip-path: polygon(50% 0, 61% 28%, 84% 11%, 78% 38%, 100% 50%, 75% 61%, 88% 88%, 60% 76%, 50% 100%, 38% 75%, 12% 89%, 25% 60%, 0 50%, 26% 38%, 13% 13%, 40% 27%); filter: drop-shadow(0 0 10px #ff542f); }
.elemental-impact--fuego .elemental-impact__burst-ray { height: 10px; border-radius: 0; background: linear-gradient(90deg, #fff7bc, #ff542f 54%, transparent); clip-path: polygon(0 50%, 24% 0, 68% 35%, 100% 50%, 68% 65%, 24% 100%); }
.elemental-impact__afterflame { position: absolute; z-index: 2; left: 0; top: 6px; width: 42px; height: 58px; background: linear-gradient(180deg, #fff7bc 0 18%, #ffc339 19% 45%, #ff542f 46% 72%, #9e1913 73% 100%); clip-path: polygon(50% 0, 66% 26%, 82% 13%, 78% 43%, 100% 66%, 72% 94%, 50% 100%, 26% 94%, 0 66%, 24% 40%, 20% 16%, 39% 29%); filter: drop-shadow(0 0 7px rgba(255, 84, 47, .88)); transform-origin: 50% 100%; will-change: transform, opacity; }
.elemental-impact__afterflame::before { content: ""; position: absolute; left: 50%; bottom: 5px; width: 18px; height: 32px; background: linear-gradient(180deg, #fffbd1, #ffcf3d 48%, #ff7b27 100%); clip-path: polygon(50% 0, 76% 38%, 100% 66%, 70% 100%, 28% 100%, 0 66%, 31% 38%); transform: translateX(-50%); }
.elemental-impact__afterflame-lick { position: absolute; left: calc(7px + var(--lick-index) * 21px); top: calc(15px - var(--lick-index) * 7px); width: 12px; height: 29px; background: linear-gradient(180deg, #fff7bc, #ffac32 42%, #ff542f 100%); clip-path: polygon(50% 0, 84% 42%, 68% 100%, 32% 82%, 12% 100%, 25% 42%); transform-origin: 50% 100%; will-change: transform; }
.elemental-impact--agua .elemental-impact__ring { border-radius: 66% 34% 52% 48%; transform: translate(-50%, -50%) rotate(28deg) scaleX(.84); }
.elemental-impact--tierra .elemental-impact__ring { border-radius: 8px; clip-path: polygon(50% 0, 100% 26%, 82% 100%, 18% 100%, 0 26%); transform: translate(-50%, -50%) rotate(16deg) scaleX(.9); }
.elemental-impact--tierra .elemental-impact__flash { width: 70px; height: 64px; border: 3px solid #4a2917; border-radius: 2px; background: linear-gradient(145deg, #ffe0a0 0 12%, #c9853e 13% 45%, #6c3c20 46% 74%, #342018 75% 100%); clip-path: polygon(50% 0, 61% 28%, 86% 10%, 77% 39%, 100% 50%, 74% 62%, 90% 88%, 60% 76%, 50% 100%, 38% 75%, 10% 90%, 25% 60%, 0 50%, 26% 38%, 12% 12%, 40% 27%); filter: drop-shadow(0 0 8px rgba(201, 133, 62, .8)); }
.elemental-impact--tierra .elemental-impact__burst-ray { height: 12px; border-radius: 2px; background: linear-gradient(90deg, #ffe0a0, #9b5d2d 42%, transparent); clip-path: polygon(0 18%, 68% 0, 100% 45%, 72% 100%, 18% 82%); box-shadow: 0 0 8px rgba(201, 133, 62, .75); }
.elemental-impact--luz .elemental-impact__ring { border-radius: 0; clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%); transform: translate(-50%, -50%) scale(1.02); }
.elemental-impact--metal .elemental-impact__ring { border-radius: 4px; transform: translate(-50%, -50%) rotate(45deg) scaleX(.72); }
.elemental-impact--oscuridad .elemental-impact__ring { border-radius: 62% 38% 48% 52%; transform: translate(-50%, -50%) rotate(-28deg) scaleX(.88); }
.elemental-impact--viento .elemental-impact__ring { border-width: 3px; border-left-color: transparent; border-bottom-color: transparent; transform: translate(-50%, -50%) rotate(-28deg) scaleX(.92); }
.elemental-impact--electricidad .elemental-impact__ring { border-radius: 0; clip-path: polygon(48% 0, 72% 34%, 100% 22%, 76% 58%, 96% 100%, 54% 70%, 24% 100%, 38% 58%, 0 42%, 40% 34%); transform: translate(-50%, -50%) rotate(-10deg) scale(.98); }

.perfora-vfx, .perfora-impact { --element-color: #f0c17f; --element-hot: #fff8e9; --element-deep: #a9662e; --element-fill: linear-gradient(135deg, #fff8e9 8%, #f0c17f 48%, #a9662e 92%); }
.perfora-vfx--fuego, .perfora-impact--fuego { --element-color: #ff765e; --element-hot: #fff0a6; --element-deep: #ef3d2f; --element-fill: linear-gradient(135deg, #fff0a6 8%, #ff9b42 46%, #ef3d2f 82%); }
.perfora-vfx--agua, .perfora-impact--agua { --element-color: #64d7ff; --element-hot: #dffaff; --element-deep: #176dbd; --element-fill: linear-gradient(135deg, #dffaff 8%, #4fc9f0 50%, #176dbd 92%); }
.perfora-vfx--tierra, .perfora-impact--tierra { --element-color: #d9ac62; --element-hot: #ffe1a2; --element-deep: #694023; --element-fill: linear-gradient(145deg, #ffe1a2 4%, #b87b38 54%, #694023 92%); }
.perfora-vfx--luz, .perfora-impact--luz { --element-color: #fff3ac; --element-hot: #fff; --element-deep: #e5ad45; --element-fill: linear-gradient(135deg, #fff 14%, #fff0a0 54%, #e5ad45 96%); }
.perfora-vfx--metal, .perfora-impact--metal { --element-color: #d9e5e8; --element-hot: #fff; --element-deep: #5f747c; --element-fill: linear-gradient(135deg, #fff 3%, #b9c9ce 40%, #5f747c 72%, #e8f2f4 96%); }
.perfora-vfx--oscuridad, .perfora-impact--oscuridad { --element-color: #bc87ff; --element-hot: #e2c2ff; --element-deep: #291238; --element-fill: radial-gradient(circle at 36% 30%, #e2c2ff 0 12%, #8d51d0 36%, #291238 82%); }
.perfora-vfx--viento, .perfora-impact--viento { --element-color: #9aefcf; --element-hot: #e9fff5; --element-deep: #238c75; --element-fill: linear-gradient(135deg, #e9fff5 5%, #76dcb8 55%, #238c75 94%); }
.perfora-vfx--electricidad, .perfora-impact--electricidad { --element-color: #ffe769; --element-hot: #fffbd0; --element-deep: #ef9524; --element-fill: linear-gradient(145deg, #fffbd0 4%, #ffe24f 48%, #ef9524 96%); }
.perfora-vfx { position: fixed; z-index: 89; height: 64px; color: var(--element-color); pointer-events: none; transform-origin: 0 50%; will-change: transform, opacity, filter; }
.perfora-vfx__beam, .perfora-vfx__core, .perfora-vfx__thread, .perfora-vfx__aura, .perfora-vfx__crest { position: absolute; left: 0; width: 100%; pointer-events: none; transform-origin: 0 50%; }
.perfora-vfx__beam { top: 50%; height: 34px; border-radius: 99px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--element-color) 34%, transparent) 14%, color-mix(in srgb, var(--element-hot) 80%, white) 76%, color-mix(in srgb, var(--element-hot) 20%, transparent)); box-shadow: 0 0 26px color-mix(in srgb, var(--element-color) 60%, transparent); filter: blur(9px); transform: translateY(-50%); }
.perfora-vfx__beam::before, .perfora-vfx__beam::after { content: ""; position: absolute; left: 8%; width: 68%; height: 5px; border-radius: 99px; background: var(--element-hot); box-shadow: 0 0 12px var(--element-color); opacity: .54; }
.perfora-vfx__beam::before { top: 2px; transform: rotate(-4deg); }
.perfora-vfx__beam::after { bottom: 2px; transform: rotate(4deg); opacity: .34; }
.perfora-vfx__core { top: 50%; height: 11px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--element-color) 10%, transparent), var(--element-color) 18%, var(--element-hot) 82%, color-mix(in srgb, var(--element-hot) 10%, transparent)); box-shadow: 0 0 14px var(--element-color), 0 0 34px color-mix(in srgb, var(--element-color) 78%, transparent); transform: translateY(-50%); }
.perfora-vfx__thread { height: 2px; border-radius: 99px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--element-hot) 70%, transparent) 25%, color-mix(in srgb, var(--element-color) 90%, transparent) 66%, transparent); filter: blur(.7px); opacity: .78; }
.perfora-vfx__thread--a { top: calc(50% - 7px); transform: translateY(-50%) rotate(-1.8deg); }
.perfora-vfx__thread--b { top: calc(50% + 7px); transform: translateY(-50%) rotate(1.8deg); opacity: .58; }
.perfora-vfx__aura { top: 50%; height: 42px; border: 2px solid color-mix(in srgb, var(--element-color) 62%, transparent); border-left-color: transparent; border-right-color: color-mix(in srgb, var(--element-hot) 58%, transparent); border-radius: 50%; background: linear-gradient(90deg, transparent 2%, color-mix(in srgb, var(--element-color) 18%, transparent) 48%, transparent 94%); filter: blur(5px); opacity: .76; transform: translateY(-50%) scaleX(.98); animation: perfora-aura-pulse .55s ease-in-out infinite alternate; }
.perfora-vfx__crest { top: 50%; height: 28px; background: linear-gradient(90deg, transparent 2%, color-mix(in srgb, var(--element-hot) 72%, transparent) 20%, var(--element-color) 52%, transparent 96%); clip-path: polygon(0 50%, 9% 25%, 22% 42%, 36% 12%, 51% 42%, 67% 20%, 82% 44%, 100% 50%, 82% 56%, 67% 80%, 51% 58%, 36% 88%, 22% 58%, 9% 75%); filter: blur(1px); opacity: .64; transform: translateY(-50%); animation: perfora-crest-pulse .42s ease-in-out infinite alternate; }
.perfora-vfx__tip { position: absolute; top: 50%; right: 0; width: 82px; height: 50px; border: 3px solid var(--element-hot); background: var(--element-fill); clip-path: polygon(0 50%, 60% 0, 100% 50%, 60% 100%); filter: drop-shadow(0 0 12px var(--element-color)) drop-shadow(0 0 22px color-mix(in srgb, var(--element-color) 60%, transparent)); transform: translateY(-50%); }
.perfora-vfx__tip::after { content: ""; position: absolute; left: 9px; top: 50%; width: 56px; height: 9px; border-radius: 0; background: var(--element-hot); box-shadow: 0 0 10px 3px var(--element-hot); clip-path: polygon(0 50%, 66% 0, 100% 50%, 66% 100%); opacity: .94; transform: translateY(-50%); }
.perfora-vfx--fuego .perfora-vfx__tip { clip-path: polygon(0 50%, 28% 30%, 38% 0, 60% 28%, 100% 50%, 60% 72%, 38% 100%, 28% 70%); }
.perfora-vfx--agua .perfora-vfx__tip { border-radius: 60% 24% 60% 36%; clip-path: none; transform: translateY(-50%) rotate(-12deg); }
.perfora-vfx--tierra .perfora-vfx__tip { clip-path: polygon(0 50%, 58% 4%, 100% 50%, 58% 96%); }
.perfora-vfx--luz .perfora-vfx__tip { clip-path: polygon(50% 0, 64% 34%, 100% 50%, 64% 66%, 50% 100%, 36% 66%, 0 50%, 36% 34%); }
.perfora-vfx--metal .perfora-vfx__tip { border-radius: 3px; clip-path: polygon(0 50%, 100% 8%, 76% 50%, 100% 92%); }
.perfora-vfx--oscuridad .perfora-vfx__tip { border-radius: 58% 42% 52% 48%; clip-path: none; }
.perfora-vfx--viento .perfora-vfx__tip { border-width: 3px; border-left-color: transparent; border-radius: 50%; background: transparent; clip-path: none; }
.perfora-vfx--electricidad .perfora-vfx__tip { clip-path: polygon(0 42%, 42% 42%, 56% 0, 68% 42%, 100% 42%, 70% 62%, 58% 100%, 44% 62%, 0 62%); }
.perfora-vfx--fuego .perfora-vfx__aura { border-radius: 42% 58% 64% 36%; transform: translateY(-50%) rotate(-2deg) scaleY(1.14); }
.perfora-vfx--fuego .perfora-vfx__crest { clip-path: polygon(0 50%, 10% 22%, 22% 40%, 34% 0, 48% 38%, 60% 12%, 76% 42%, 100% 50%, 76% 58%, 60% 88%, 48% 62%, 34% 100%, 22% 60%, 10% 78%); }
.perfora-vfx--agua .perfora-vfx__aura { border-radius: 68% 32% 74% 26%; transform: translateY(-50%) rotate(4deg) scaleY(1.18); }
.perfora-vfx--agua .perfora-vfx__crest { clip-path: polygon(0 50%, 15% 38%, 28% 8%, 42% 42%, 58% 18%, 72% 44%, 100% 50%, 72% 56%, 58% 82%, 42% 58%, 28% 92%, 15% 62%); }
.perfora-vfx--tierra .perfora-vfx__aura { border-radius: 6px; clip-path: polygon(0 26%, 74% 0, 100% 72%, 18% 100%); }
.perfora-vfx--tierra .perfora-vfx__crest { clip-path: polygon(0 50%, 18% 22%, 34% 42%, 48% 8%, 64% 40%, 82% 18%, 100% 50%, 82% 82%, 64% 60%, 48% 92%, 34% 58%, 18% 78%); }
.perfora-vfx--luz .perfora-vfx__aura { border-radius: 0; clip-path: polygon(50% 0, 63% 35%, 100% 50%, 63% 65%, 50% 100%, 37% 65%, 0 50%, 37% 35%); transform: translateY(-50%) scaleY(1.18); }
.perfora-vfx--luz .perfora-vfx__crest { clip-path: polygon(0 50%, 18% 35%, 34% 0, 50% 35%, 66% 0, 82% 35%, 100% 50%, 82% 65%, 66% 100%, 50% 65%, 34% 100%, 18% 65%); }
.perfora-vfx--metal .perfora-vfx__aura { border-radius: 4px; transform: translateY(-50%) skewX(-18deg) scaleX(1.04); }
.perfora-vfx--metal .perfora-vfx__crest { clip-path: polygon(0 50%, 22% 24%, 42% 42%, 58% 10%, 78% 38%, 100% 50%, 78% 62%, 58% 90%, 42% 58%, 22% 76%); }
.perfora-vfx--oscuridad .perfora-vfx__aura { border-radius: 62% 38% 46% 54%; background: radial-gradient(ellipse, color-mix(in srgb, var(--element-color) 42%, transparent), transparent 70%); }
.perfora-vfx--oscuridad .perfora-vfx__crest { clip-path: polygon(0 50%, 16% 20%, 28% 44%, 44% 8%, 58% 38%, 74% 18%, 100% 50%, 74% 82%, 58% 62%, 44% 92%, 28% 56%, 16% 80%); }
.perfora-vfx--viento .perfora-vfx__aura { border-width: 3px; border-left-color: transparent; border-bottom-color: transparent; background: transparent; transform: translateY(-50%) rotate(-20deg) scaleX(1.1); }
.perfora-vfx--viento .perfora-vfx__crest { background: linear-gradient(90deg, transparent, var(--element-hot), transparent); clip-path: polygon(0 50%, 24% 38%, 42% 4%, 58% 38%, 78% 22%, 100% 50%, 78% 78%, 58% 62%, 42% 96%, 24% 62%); }
.perfora-vfx--electricidad .perfora-vfx__aura { border-radius: 0; clip-path: polygon(50% 0, 70% 38%, 100% 26%, 72% 60%, 92% 100%, 52% 68%, 22% 100%, 36% 58%, 0 48%, 40% 36%); }
.perfora-vfx--electricidad .perfora-vfx__crest { clip-path: polygon(0 50%, 24% 34%, 38% 0, 54% 38%, 72% 18%, 100% 50%, 72% 82%, 54% 62%, 38% 100%, 24% 66%); }
.perfora-vfx__spark { position: absolute; top: calc(50% + (var(--spark-y) * 7px)); width: 12px; height: 4px; border-radius: 99px; background: var(--element-hot); box-shadow: 0 0 8px var(--element-color); opacity: .72; transform: rotate(calc(var(--spark-y) * 18deg)); }
.perfora-impact { position: fixed; z-index: 91; width: 1px; height: 1px; color: var(--element-color); pointer-events: none; }
.perfora-impact__halo, .perfora-impact__ring, .perfora-impact__flash { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.perfora-impact__halo { width: 126px; height: 126px; background: radial-gradient(circle, color-mix(in srgb, var(--element-color) 44%, transparent), color-mix(in srgb, var(--element-color) 10%, transparent) 30%, transparent 72%); filter: blur(2px); }
.perfora-impact__ring { width: 70px; height: 70px; border: 3px solid var(--element-color); box-shadow: 0 0 16px color-mix(in srgb, var(--element-color) 84%, transparent), inset 0 0 12px color-mix(in srgb, var(--element-color) 35%, transparent); transform: translate(-50%, -50%) rotate(45deg) scaleX(.75); }
.perfora-impact__flash { width: 46px; height: 46px; background: radial-gradient(circle, var(--element-hot) 0 10%, var(--element-color) 34%, color-mix(in srgb, var(--element-color) 0%, transparent) 74%); filter: blur(.4px); }
.perfora-impact__burst { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }
.perfora-impact__burst-ray { position: absolute; left: 0; top: 0; width: 82px; height: 9px; border-radius: 99px; background: linear-gradient(90deg, var(--element-hot), var(--element-color) 58%, transparent); box-shadow: 0 0 12px var(--element-color); transform-origin: 0 50%; }
.perfora-impact__shard { position: absolute; left: 0; top: 0; width: 18px; height: 8px; border: 2px solid var(--element-hot); background: var(--element-color); clip-path: polygon(0 50%, 25% 0, 100% 35%, 72% 100%); box-shadow: 0 0 7px color-mix(in srgb, var(--element-color) 80%, transparent); }
.perfora-impact__particle { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50% 35% 50% 35%; background: radial-gradient(circle at 35% 30%, var(--element-hot), var(--element-color) 48%, color-mix(in srgb, var(--element-color) 15%, transparent)); box-shadow: 0 0 10px color-mix(in srgb, var(--element-color) 90%, transparent); }
.perfora-impact--fuego .perfora-impact__burst-ray, .perfora-impact--fuego .perfora-impact__shard { clip-path: polygon(0 50%, 28% 0, 72% 34%, 100% 50%, 72% 66%, 28% 100%); border-radius: 0; }
.perfora-impact--agua .perfora-impact__burst-ray { border-radius: 70% 20% 70% 20%; transform-origin: 0 50%; }
.perfora-impact--tierra .perfora-impact__burst-ray, .perfora-impact--tierra .perfora-impact__shard { border-radius: 2px; clip-path: polygon(0 18%, 78% 0, 100% 82%, 22% 100%); }
.perfora-impact--luz .perfora-impact__burst-ray, .perfora-impact--luz .perfora-impact__shard { border-radius: 0; clip-path: polygon(0 50%, 32% 34%, 50% 0, 68% 34%, 100% 50%, 68% 66%, 50% 100%, 32% 66%); }
.perfora-impact--metal .perfora-impact__burst-ray, .perfora-impact--metal .perfora-impact__shard { border-radius: 2px; transform-origin: 0 50%; }
.perfora-impact--oscuridad .perfora-impact__particle { border-radius: 58% 32% 52% 44%; }
.perfora-impact--viento .perfora-impact__burst-ray { border-radius: 50%; background: linear-gradient(90deg, transparent, var(--element-hot), transparent); }
.perfora-impact--electricidad .perfora-impact__burst-ray, .perfora-impact--electricidad .perfora-impact__shard { border-radius: 0; clip-path: polygon(0 40%, 38% 40%, 52% 0, 64% 40%, 100% 40%, 68% 62%, 54% 100%, 42% 62%, 0 62%); }
.perfora-impact.is-area-primary { z-index: 94; scale: 1.24; }
.perfora-impact.is-area-secondary { z-index: 88; scale: .68; opacity: .84; }
.perfora-impact--stop { --element-hot: #fff; }
.perfora-impact--stop .perfora-impact__halo { background: radial-gradient(circle, color-mix(in srgb, var(--element-color) 34%, transparent), color-mix(in srgb, var(--mint) 10%, transparent) 32%, transparent 72%); }
.perfora-impact--stop .perfora-impact__ring { box-shadow: 0 0 13px color-mix(in srgb, var(--element-color) 90%, transparent), inset 0 0 10px color-mix(in srgb, var(--mint) 32%, transparent); }
.perfora-impact--stop .perfora-impact__flash { background: radial-gradient(circle, #fff 0 10%, var(--element-hot) 34%, color-mix(in srgb, var(--element-color) 0%, transparent) 74%); }

@keyframes elemental-projectile-aura {
  from { opacity: .42; filter: blur(4px); scale: .86 .76; }
  to { opacity: .9; filter: blur(2px); scale: 1.12 1.04; }
}
@keyframes perfora-aura-pulse {
  from { opacity: .48; filter: blur(6px); scale: .96 .78; }
  to { opacity: .96; filter: blur(3px); scale: 1.02 1.06; }
}
@keyframes perfora-crest-pulse {
  from { opacity: .28; scale: .92 .72; }
  to { opacity: .82; scale: 1.04 1.08; }
}
@keyframes battle-delta-out {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.92); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -135%) scale(1); }
}
@keyframes creature-summon {
  0% { opacity: .4; clip-path: inset(45% 8% round 10px); filter: brightness(1.7) saturate(.45); transform: scale(.86); }
  60% { opacity: 1; clip-path: inset(0 round 5px); filter: brightness(1.18) saturate(1); transform: scale(1.035); }
  100% { opacity: 1; clip-path: inset(0 round 0); filter: brightness(1); transform: scale(1); }
}
@keyframes creature-evolve {
  0% { clip-path: inset(8% 46% round 8px); filter: brightness(1.7) saturate(.55); transform: scale(.92); }
  52% { clip-path: inset(0 round 5px); filter: brightness(1.24) saturate(1.16); transform: scale(1.055); }
  100% { clip-path: inset(0 round 0); filter: brightness(1); transform: scale(1); }
}
@keyframes creature-impact {
  0%, 100% { filter: brightness(1); transform: translateX(0); }
  25% { filter: brightness(1.5) saturate(.7); transform: translateX(-3px); }
  52% { filter: brightness(.78) saturate(1.25); transform: translateX(3px); }
  72% { transform: translateX(-1px); }
}
@keyframes life-impact {
  0%, 100% { filter: brightness(1); transform: translateX(0); }
  28% { filter: brightness(1.35); transform: translateX(-3px); }
  54% { filter: brightness(.8); transform: translateX(2px); }
}
@keyframes life-value-impact {
  0% { color: var(--ink); text-shadow: none; }
  22% { color: #fff1ed; text-shadow: 0 0 7px rgba(255, 92, 76, .95); transform: scale(1.14); }
  58% { color: #ff6f61; text-shadow: 0 0 12px rgba(255, 68, 52, .72); transform: scale(1.04); }
  100% { color: var(--ink); text-shadow: none; transform: scale(1); }
}
@keyframes guard-break {
  0% { filter: brightness(1.7); transform: scale(1); }
  38% { background: rgba(255, 155, 147, .28); clip-path: polygon(0 0, 46% 0, 52% 34%, 100% 0, 100% 100%, 57% 100%, 49% 61%, 0 100%); transform: scale(1.12) rotate(-2deg); }
  100% { filter: brightness(1); clip-path: inset(0); transform: scale(1); }
}
@keyframes power-spend {
  0% { filter: brightness(1.45); transform: scale(1.08); }
  55% { filter: brightness(.7) saturate(.55); transform: scale(.9); }
  100% { filter: brightness(1); transform: scale(1); }
}
@keyframes power-arrive {
  0% { opacity: .45; filter: brightness(1.6); transform: scale(.82); }
  62% { opacity: 1; transform: scale(1.08); }
  100% { filter: brightness(1); transform: scale(1); }
}
@keyframes state-flash {
  0% { opacity: .65; filter: brightness(1.4); }
  100% { opacity: 1; filter: brightness(1); }
}
@keyframes card-orientation-change {
  0% { transform: rotate(var(--rotation-from)) translateY(0) scale(1); }
  52% { transform: rotate(var(--rotation-mid)) translateY(-3px) scale(1.035); }
  100% { transform: rotate(var(--rotation-to)) translateY(0) scale(1); }
}
@keyframes card-pile-draw {
  0% { filter: brightness(1); box-shadow: 0 9px 18px rgba(0, 0, 0, .28); }
  42% { filter: brightness(1.5) saturate(1.18); box-shadow: 0 0 0 3px rgba(152, 237, 187, .22), 0 14px 28px rgba(0, 0, 0, .4); }
  100% { filter: brightness(1); box-shadow: 0 9px 18px rgba(0, 0, 0, .28); }
}
@keyframes card-pile-discard {
  0% { filter: brightness(1); transform: scale(1); }
  46% { filter: brightness(1.45) saturate(.72); transform: scale(1.05) rotate(-2deg); }
  100% { filter: brightness(1); transform: scale(1) rotate(0); }
}
@keyframes card-motion-reveal {
  0%, 48% { opacity: 1; }
  100% { opacity: 0; }
}

.field-card-stack.is-summoning { animation: creature-summon .52s cubic-bezier(.16, 1, .3, 1) both; }
.field-card-stack.is-evolving { animation: creature-evolve .78s cubic-bezier(.16, 1, .3, 1) both; }
.field-card.is-impact { animation: creature-impact .38s ease-out both; }
.field-card-stack.is-state-changed { animation: state-flash .28s ease-out both; }
.lane-side--left.is-life-hit .life-readout { animation: life-impact .46s ease-out both; }
.lane-side--left.is-life-hit .life-readout strong { animation: life-value-impact .62s cubic-bezier(.16, 1, .3, 1) both; }
.guard-chip.is-breaking { animation: guard-break .68s cubic-bezier(.16, 1, .3, 1) both; }
.potency-chip.is-power-spend { animation: power-spend .46s ease-out both; }
.potency-chip.is-power-add, .potency-chip.is-power-refresh { animation: power-arrive .52s cubic-bezier(.16, 1, .3, 1) both; }
.pile-card.is-card-drawing { animation: card-pile-draw .64s cubic-bezier(.16, 1, .3, 1) both; }
.pile-card.is-card-discarding { animation: card-pile-discard .64s cubic-bezier(.16, 1, .3, 1) both; }
.hand-card.is-card-arriving { animation: state-flash .18s ease-out both; }
.hand-card.is-card-motion-hidden { opacity: 0 !important; pointer-events: none; }
.hand-card.is-hand-reflow-pending { transition: none !important; }
.card-motion-ghost {
  position: fixed !important;
  z-index: 100 !important;
  display: flex !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border-radius: 12px;
  appearance: none;
  pointer-events: none !important;
  transform-origin: center bottom;
  will-change: transform, opacity, filter;
}
.card-motion-ghost--defeated { z-index: 88 !important; transform-origin: center center; }
.card-motion-ghost--incoming::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: #fff;
  content: "";
  opacity: 1;
  pointer-events: none;
  animation: card-motion-reveal .72s ease-out both;
}
.lane, .center-lane { display: contents; }
.lane--p1 > .lane-side { grid-row: 3 / span 2; }
.lane--p1 > .lane-field { grid-row: 4; }
.lane--p2 > .lane-side { grid-row: 1 / span 2; }
.lane--p2 > .lane-field { grid-row: 1; }
.playmat[data-role="P2"] .lane--p1 > .lane-side { grid-row: 1 / span 2; }
.playmat[data-role="P2"] .lane--p1 > .lane-field { grid-row: 1; }
.playmat[data-role="P2"] .lane--p2 > .lane-side { grid-row: 3 / span 2; }
.playmat[data-role="P2"] .lane--p2 > .lane-field { grid-row: 4; }
.lane--p1 > .lane-side--left, .lane--p2 > .lane-side--left { grid-column: 1; }
.lane--p1 > .lane-field, .lane--p2 > .lane-field { grid-column: 2; }
.lane--p1 > .lane-side--right, .lane--p2 > .lane-side--right { grid-column: 3; }
.center-lane > .lane-field { grid-column: 2; grid-row: 2 / span 2; }
.lane-side, .lane-field { min-width: 0; border: 0; border-right: 1px solid var(--line); background: rgba(17, 34, 32, .76); }
.lane-side { padding: 10px; }
.lane--p2 .lane-side { background: rgba(34, 25, 39, .62); }
.lane--p2 .lane-field { background: rgba(34, 25, 39, .35); }
.lane-side--right { border-right: 0; }
.lane-side--right { display: flex; flex-direction: column; gap: 11px; }
.lane-field { display: flex; min-height: 0; flex-direction: column; justify-content: center; padding: 12px 14px; }
.lane-field--center { background: rgba(12, 29, 37, .82); }
.lane-heading { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--soft); font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lane-heading span:last-child { color: var(--muted); font-weight: 600; }
.player-summary { display: contents; }
.player-identity { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.player-identity > div { min-width: 0; }
.player-label { display: block; overflow: hidden; margin-bottom: 3px; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.badge { display: inline-flex; padding: 5px 7px; border-radius: 99px; background: rgba(152, 237, 187, .14); color: var(--mint); font-size: .58rem; font-weight: 900; letter-spacing: .07em; }
.badge--lost { background: rgba(255, 155, 147, .15); color: var(--danger); }
.life-readout { display: flex; align-items: baseline; gap: 7px; margin-top: 9px; }
.life-readout strong { color: var(--ink); font-size: 2.35rem; line-height: .84; letter-spacing: -.08em; }
.life-readout span { color: var(--muted); font-size: .74rem; font-weight: 800; }
.lane-caption { min-height: 27px; margin: 6px 0 8px; font-size: .65rem; }
.zone-block { margin-top: 8px; }
.zone-label { color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }

.board-row { display: grid; align-items: center; justify-content: center; gap: 10px; }
.board-row--personal { grid-template-columns: repeat(5, var(--slot-width)); }
.board-row--center { grid-template-columns: repeat(6, var(--slot-width)); }
.board-slot { position: relative; width: var(--slot-width); height: var(--slot-height); min-width: var(--slot-width); min-height: var(--slot-height); padding: 0; border: 0; background: transparent; color: var(--ink); }
.board-slot::before, .board-slot::after { position: absolute; z-index: 0; display: block; content: ""; border: 1px solid rgba(152, 237, 187, .32); background: rgba(152, 237, 187, .035); transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.board-slot::before { top: calc((100% - var(--card-width)) / 2); right: 0; bottom: calc((100% - var(--card-width)) / 2); left: 0; }
.board-slot::after { top: 0; right: calc((100% - var(--card-width)) / 2); bottom: 0; left: calc((100% - var(--card-width)) / 2); }
.board-slot:hover::before, .board-slot:hover::after, .board-slot.is-target::before, .board-slot.is-target::after { border-color: var(--amber); background: rgba(240, 193, 127, .12); }
.board-slot.is-target::before, .board-slot.is-target::after { box-shadow: 0 0 0 2px rgba(240, 193, 127, .13); }
.board-slot.is-target { animation: target-ready-in .34s cubic-bezier(.16, 1, .3, 1) both; }
.board-slot.is-unavailable:not(.is-occupied) { opacity: .48; }
.board-slot.is-unavailable::before, .board-slot.is-unavailable::after { border-style: dashed; }
.board-slot.is-occupied::before, .board-slot.is-occupied::after { border-color: rgba(152, 237, 187, .18); background: rgba(2, 8, 8, .3); }
.board-slot.is-attack-target::before, .board-slot.is-attack-target::after { border-color: var(--danger); background: rgba(255, 155, 147, .14); box-shadow: 0 0 0 2px rgba(255, 155, 147, .18); }
.board-slot.is-direct-attack-target::before, .board-slot.is-direct-attack-target::after { border-color: var(--danger); background: rgba(255, 155, 147, .18); box-shadow: 0 0 0 2px rgba(255, 155, 147, .2); }
.board-slot.is-combat-target::before, .board-slot.is-combat-target::after { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240, 193, 127, .25), 0 0 18px rgba(240, 193, 127, .22); }
.board-slot.is-action-target::before, .board-slot.is-action-target::after { border-color: var(--amber); background: rgba(240, 193, 127, .16); box-shadow: 0 0 0 3px rgba(240, 193, 127, .28), 0 0 20px rgba(240, 193, 127, .2); }
.slot-coordinate { position: absolute; right: 5px; bottom: 4px; left: 5px; z-index: 1; color: rgba(197, 210, 202, .56); font-size: .56rem; font-weight: 800; letter-spacing: .05em; }
.slot-direct-label { position: absolute; top: 50%; left: 50%; z-index: 2; padding: 2px 4px; border: 1px solid rgba(255, 155, 147, .55); border-radius: 3px; background: rgba(54, 15, 18, .86); color: #ffd1cc; font-size: .43rem; font-weight: 900; letter-spacing: .04em; white-space: nowrap; transform: translate(-50%, -50%); }
.board-slot.is-occupied .slot-coordinate { display: none; }
@keyframes target-ready-in { from { filter: brightness(.75); } to { filter: brightness(1); } }

.field-card, .hand-card, .champion-card { position: relative; z-index: 2; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(242, 247, 242, .38); background: linear-gradient(155deg, #315e4d, #162822 75%); color: var(--ink); box-shadow: 0 9px 18px rgba(0, 0, 0, .28); }
.hand-card { padding: 0; text-align: initial; }
.field-card-stack { position: relative; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.field-card-stack--turned { transform: rotate(90deg); }
.field-card-stack--stunned { transform: rotate(180deg); filter: saturate(.65) brightness(.82); }
.field-card-stack.is-orientation-changing {
  animation: card-orientation-change .42s cubic-bezier(.16, 1, .3, 1) var(--orientation-delay, 0ms) both;
  transform-origin: center;
}
.pile-card.is-interactive { cursor: pointer; }
.pile-card.is-interactive:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.memory-detail-card__meta { overflow: hidden; color: var(--muted); font-size: var(--type-meta); text-overflow: ellipsis; white-space: nowrap; }
.memory-detail-card__actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.memory-detail-card__actions .button { min-height: 36px; padding: 7px 9px; }
.reaction-blockers { display: grid; gap: 7px; }
.reaction-blockers__total { color: var(--muted); font-size: .78rem; }
.reaction-blockers__total.is-ready { color: #a9efbd; }
.reaction-blockers__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.reaction-blocker { display: grid; gap: 3px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .035); color: var(--ink); text-align: left; cursor: pointer; }
.reaction-blocker.is-selected { border-color: var(--amber); background: rgba(240, 193, 127, .12); }
.reaction-blocker__meta { color: var(--muted); font-size: .65rem; }
.reaction-dodge-toggle { display: grid; width: 100%; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .035); color: var(--ink); text-align: left; cursor: pointer; }
.reaction-dodge-toggle.is-selected { border-color: #9ac7ef; background: rgba(95, 155, 207, .14); }
.reaction-blocker:focus-visible, .reaction-dodge-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.reaction-order { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.reaction-order__item { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .035); }
.reaction-order__summary { display: grid; min-width: 0; gap: 3px; overflow-wrap: anywhere; }
.reaction-order__controls { display: flex; flex: 0 0 auto; gap: 5px; }
.reaction-order__controls .button { min-height: 34px; padding: 6px 9px; font-size: .58rem; }
.reaction-order__note { margin: 0; color: #b8d8f2; font-size: .7rem; line-height: 1.4; }
.field-card-stack .field-card { position: absolute; top: calc(50% - (var(--card-height) / 2) + (var(--stack-depth) * 5px)); left: calc(50% - (var(--card-width) / 2) + (var(--stack-depth) * 5px)); width: var(--card-width); height: var(--card-height); margin: 0; }
.field-card-stack .field-card { z-index: calc(10 - var(--stack-depth)); }
.field-card { width: calc(100% - 10px); height: calc(100% - 10px); min-height: 0; margin: 5px; padding: 5px; text-align: left; }
.field-card--minimal { width: var(--card-width); height: var(--card-height); margin: 0; padding: 5px; }
.field-card--minimal .field-card__art { height: auto; flex: 1 1 auto; min-height: 0; }
.field-card--minimal .field-card__stats { flex: 0 0 auto; margin-top: 5px; }
.field-card--minimal .field-card__top { flex: 0 0 auto; }
.field-card-stack .field-card__top { grid-template-columns: auto minmax(0, 1fr); }
.field-card-stack .field-card__compact-kind { text-align: right; }
.field-card-stack .field-card__compact-element { display: none; }
.field-card--p2 { background: linear-gradient(155deg, #684456, #2f1d2c 75%); }
.field-card--friendly { border-color: rgba(152, 237, 187, .7); }
.field-card--enemy { border-color: rgba(255, 155, 147, .92); box-shadow: 0 0 0 2px rgba(255, 155, 147, .2), 0 9px 18px rgba(0, 0, 0, .3); }
.field-card__top, .hand-card__top { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: center; color: rgba(242, 247, 242, .72); font-size: .51rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.field-card__compact-kind { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.field-card__compact-element { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.field-card__header { display: grid; min-width: 0; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 3px 4px; align-items: start; }
.field-card__cost { display: inline-flex; min-width: 0; min-height: 18px; align-items: center; gap: 2px; justify-self: start; padding: 1px 4px 1px 2px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(2, 8, 8, .72); color: #fff; font-weight: 900; box-shadow: 0 2px 5px rgba(0, 0, 0, .28); }
.field-card__cost-piece { display: inline-flex; align-items: center; gap: 1px; }
.field-card__cost-plus { color: rgba(255, 255, 255, .82); font-size: .45rem; }
.field-card__cost-value { font-size: .62rem; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.field-card__cost-icon { display: inline-block; width: 15px; height: 15px; flex: 0 0 15px; background-image: url("./assets/element-cost-silhouettes-v2.png"); background-repeat: no-repeat; background-size: 300% 300%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); }
.field-card__cost-icon--generic { background-position: 0 0; }
.field-card__cost-icon--fuego { background-position: 50% 0; }
.field-card__cost-icon--agua { background-position: 100% 0; }
.field-card__cost-icon--tierra { background-position: 0 50%; }
.field-card__cost-icon--luz { background-position: 50% 50%; }
.field-card__cost-icon--metal { background-position: 100% 50%; }
.field-card__cost-icon--oscuridad { background-position: 0 100%; }
.field-card__cost-icon--viento { background-position: 50% 100%; }
.field-card__cost-icon--electricidad { background-position: 100% 100%; }
.field-card__identity { min-width: 0; grid-row: 2; grid-column: 1 / -1; text-align: center; }
.field-card__name { display: block; overflow: hidden; margin: 0; color: #fff; font-size: .62rem; font-weight: 900; line-height: 1.05; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, .95); white-space: nowrap; }
.field-card__lineage { display: block; overflow: hidden; margin-top: 2px; color: rgba(242, 247, 242, .82); font-size: .43rem; line-height: 1.05; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, .95); white-space: nowrap; }
.field-card__meta { display: grid; grid-row: 1; grid-column: 3; gap: 1px; justify-self: end; color: rgba(242, 247, 242, .78); font-size: .45rem; font-weight: 900; line-height: 1; text-align: right; text-shadow: 0 1px 3px rgba(0, 0, 0, .95); }
.field-card__art { display: grid; height: 24px; min-height: 0; flex: 0 0 24px; margin: 3px 0 2px; overflow: hidden; place-items: center; border: 1px solid rgba(242, 247, 242, .22); border-radius: 4px; background: rgba(2, 8, 8, .34); }
.field-card__art img, .field-card__art-render { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; object-position: center 38%; image-rendering: auto; }
.field-card__art-render { border: 0; }
.field-card__art-fallback { color: rgba(197, 210, 202, .62); font-size: .43rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.field-card__bottom { display: grid; max-height: 25%; flex: 0 0 auto; grid-template-rows: minmax(0, 1fr) auto auto; gap: 2px; overflow: hidden; }
.field-card__ability, .field-card__inheritance { display: block; overflow: hidden; min-height: 8px; flex: 0 0 8px; color: rgba(242, 247, 242, .68); font-size: .4rem; line-height: 8px; text-overflow: ellipsis; white-space: nowrap; }
.field-card__ability { color: var(--mint); }
.field-card__inheritance { color: #d7b8ff; font-weight: 800; }
.field-card__stats, .hand-card__stats { display: flex; gap: 3px; margin-top: auto; color: var(--amber); font-size: .54rem; font-weight: 900; }
.field-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 2px; }
.field-card__stats span, .hand-card__stats span { padding: 2px 3px; border: 1px solid rgba(240, 193, 127, .25); }
.field-card__stats span { min-width: 0; padding: 2px 1px; text-align: center; }
.field-card__stats span.is-damaged { border-color: rgba(255, 155, 147, .5); background: rgba(255, 155, 147, .16); color: var(--danger); }
.field-card.is-selected { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(240, 193, 127, .45), 0 9px 18px rgba(0, 0, 0, .28); }

.champion-slot { min-height: 58px; margin-top: 5px; }
.champion-card { min-height: 58px; padding: 6px; border-color: rgba(170, 140, 255, .47); background: linear-gradient(145deg, #4d3f75, #211d3e); }
.champion-card strong { display: block; margin-top: 5px; font-size: .64rem; }
.champion-card { width: 100%; cursor: pointer; text-align: left; }
.champion-card--field { border-color: rgba(154, 239, 190, .62); }
.champion-card--memory, .champion-card--oblivion { opacity: .62; filter: grayscale(.45); }
.champion-card__state { display: block; margin-top: 4px; color: var(--amber); font-size: .58rem; font-weight: 900; letter-spacing: .04em; }
.champion-action-dialog { width: min(94vw, 660px); max-height: min(88vh, 760px); padding: 0; border: 1px solid rgba(176, 154, 255, .48); border-radius: 14px; background: #101b1a; color: var(--ink); }
.champion-action-dialog::backdrop { background: rgba(2, 8, 8, .78); backdrop-filter: blur(4px); }
.champion-action-dialog__surface { display: grid; gap: 16px; padding: 20px; }
.champion-action-dialog__status { margin: 5px 0 0; color: var(--mint); font-size: .82rem; font-weight: 800; }
.champion-action-abilities { display: grid; gap: 10px; }
.champion-ability-item { display: grid; gap: 8px; padding: 13px; border: 1px solid rgba(176, 154, 255, .3); border-radius: 10px; background: rgba(117, 92, 255, .08); }
.champion-ability-item--active { border-color: rgba(240, 193, 127, .32); }
.champion-ability-item strong { color: var(--amber); font-size: .78rem; }
.champion-ability-item p { margin: 0; color: var(--soft); font-size: .82rem; line-height: 1.5; white-space: pre-wrap; }
.champion-ability-note { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.champion-ability-keywords { color: var(--mint); font-size: .76rem; font-weight: 800; }
.champion-ability-action { min-height: 44px; text-align: left; }
.guard-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 6px; }
.guard-chip { display: grid; place-items: center; min-height: 26px; border: 1px solid rgba(152, 237, 187, .4); background: rgba(152, 237, 187, .1); color: var(--mint); font-size: .5rem; font-weight: 900; }
.guard-chip.is-broken { border-color: rgba(255, 155, 147, .38); background: rgba(255, 155, 147, .1); color: var(--danger); }
.pile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pile-zone { display: grid; min-width: 0; min-height: 86px; place-items: center; border: 1px solid var(--line); background: rgba(2, 8, 8, .26); }
.pile-card { display: flex; width: 100%; height: 100%; min-height: 79px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 6px 5px; text-align: left; }
.pile-card__title { overflow: hidden; color: var(--soft); font-size: .56rem; font-weight: 900; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pile-card__count { color: var(--amber); font-size: 1.35rem; font-weight: 850; line-height: .85; }
.pile-card__empty { color: rgba(197, 210, 202, .56); font-size: .6rem; text-align: center; }
.pile-card--oblivion .pile-card__title { color: #c5a1ff; }
.potency-zone { margin-top: auto; padding: 8px; border: 1px solid rgba(240, 193, 127, .24); background: rgba(240, 193, 127, .045); }
.potency-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.potency-chip { display: grid; min-width: 0; min-height: 37px; place-items: center; gap: 2px; border: 1px solid rgba(197, 210, 202, .18); background: rgba(2, 8, 8, .25); color: inherit; cursor: pointer; }
.potency-chip:hover, .potency-chip:focus-visible { border-color: var(--amber); background: rgba(240, 193, 127, .13); outline: 2px solid rgba(240, 193, 127, .35); outline-offset: 1px; }
.potency-chip__label { color: var(--muted); font-size: .5rem; font-weight: 900; letter-spacing: .05em; }
.potency-chip__count { color: var(--amber); font-size: 1.05rem; line-height: 1; }
.potency-chip--fuego { border-color: rgba(255, 155, 147, .34); }
.potency-chip--agua, .potency-chip--electricidad { border-color: rgba(126, 199, 255, .34); }
.potency-chip--tierra, .potency-chip--metal { border-color: rgba(205, 174, 128, .34); }
.potency-chip--luz { border-color: rgba(255, 232, 157, .4); }
.potency-chip--oscuridad { border-color: rgba(170, 140, 255, .4); }
.potency-chip--viento { border-color: rgba(152, 237, 187, .4); }
.power-card-list { display: grid; gap: 5px; max-height: 78px; margin-top: 7px; overflow-y: auto; scrollbar-color: #806a3c transparent; }
.power-card-list__empty { color: rgba(197, 210, 202, .56); font-size: .58rem; line-height: 1.35; }
.power-card-token { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; gap: 5px; align-items: center; min-width: 0; padding: 5px 6px; border: 1px solid rgba(240, 193, 127, .25); background: rgba(2, 8, 8, .28); }
.power-card-token.is-spent { opacity: .56; }
.power-card-token__element { color: var(--amber); font-size: .49rem; font-weight: 900; }
.power-card-token__name { overflow: hidden; color: var(--soft); font-size: .58rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.power-card-token__state { color: var(--muted); font-size: .45rem; font-weight: 900; }

.hand-panel { position: relative; z-index: 20; margin: 0 22px 23px; padding: 14px 14px 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(17, 34, 32, .62); overflow: visible; }
.hand-heading { align-items: end; margin-bottom: 8px; }
.hand-heading h2 { margin-top: 3px; }
.hand-layout { display: grid; grid-template-rows: auto auto; gap: 8px; min-height: 0; overflow: visible; }
.hand-tray { display: flex; min-width: 0; min-height: 218px; align-items: flex-end; justify-content: center; gap: 0; overflow-x: auto; overflow-y: hidden; padding: 0 32px 7px; scrollbar-color: #38534d transparent; scrollbar-width: thin; }
.hand-tray.has-many { justify-content: flex-start; }
.hand-card { position: relative; z-index: 1; display: block; flex: 0 0 clamp(112px, 10vw, 148px); width: clamp(112px, 10vw, 148px); height: clamp(158px, 19vh, 208px); min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: visible; border: 0; appearance: none; background: transparent; box-shadow: none; cursor: pointer; outline: 0; text-align: left; scroll-snap-align: center; transition: z-index 0s linear .22s; }
.hand-card + .hand-card { margin-left: clamp(-22px, -1.4vw, -10px); }
.hand-card:hover, .hand-card:focus-visible, .hand-card:focus-within { z-index: 40; transition-delay: 0s; }
.hand-card.is-selected { z-index: 35; transition-delay: 0s; }
.hand-card.is-selected:hover, .hand-card.is-selected:focus-visible, .hand-card.is-selected:focus-within { z-index: 45; }
.hand-card__select.field-card { display: flex; width: 100%; height: 100%; min-height: 0; flex-direction: column; justify-content: flex-start; gap: 0; margin: 0; padding: 8px; border: 1px solid rgba(242, 247, 242, .45); border-radius: 12px; background: linear-gradient(155deg, #315e4d, #162822 75%); color: inherit; cursor: inherit; outline: 0; pointer-events: none; text-align: left; box-shadow: 0 12px 24px rgba(0, 0, 0, .32); transform-origin: center bottom; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.hand-card:hover .hand-card__select, .hand-card:focus-visible .hand-card__select, .hand-card:focus-within .hand-card__select { border-color: var(--mint); background: linear-gradient(155deg, #3a755b, #162822 78%); box-shadow: 0 18px 34px rgba(0, 0, 0, .42); }
.hand-card.is-selected .hand-card__select.field-card { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(240, 193, 127, .45), 0 18px 34px rgba(0, 0, 0, .38); }
.hand-tray.is-choosing-discard .hand-card:not(.is-selected) .hand-card__select.field-card { border-color: rgba(152, 237, 187, .72); box-shadow: 0 10px 24px rgba(0, 0, 0, .34), 0 0 0 1px rgba(152, 237, 187, .16); }
.hand-card:focus-visible .hand-card__select { outline: 3px solid rgba(240, 193, 127, .82); outline-offset: 3px; }
.hand-card.is-previewing .hand-card__select { opacity: 0; }
.hand-card-preview { position: absolute; z-index: 80; display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(0) scale(1); transform-origin: center bottom; transition: opacity .12s ease-out, transform .24s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .24s; }
.hand-card-preview.is-active { opacity: 1; visibility: visible; transform: translateY(-50px) scale(1.12); transition-delay: 0s; }
.hand-card-preview.is-active.is-selected:not(.is-hovered) { transform: translateY(-30px) scale(1.06); }
.hand-card-preview.is-active.is-selected.is-hovered { transform: translateY(-54px) scale(1.14); }
.hand-card-preview .hand-card__select.field-card { width: 100%; height: 100%; visibility: visible; }
.hand-card-preview.is-hovered .hand-card__select.field-card { border-color: var(--mint); background: linear-gradient(155deg, #3a755b, #162822 78%); box-shadow: 0 22px 42px rgba(0, 0, 0, .5); }
.hand-card-preview.is-selected .hand-card__select.field-card { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(240, 193, 127, .45), 0 22px 42px rgba(0, 0, 0, .48); }
.hand-card-preview.is-focused .hand-card__select.field-card { outline: 3px solid rgba(240, 193, 127, .82); outline-offset: 3px; }
.hand-card__select .field-card__top { flex: 0 0 auto; font-size: .54rem; }
.hand-card__select .field-card__art { height: auto; min-height: 52px; flex: 1 1 auto; margin: 6px 0 7px; }
.hand-card__select .field-card__art-fallback { font-size: .48rem; }
.hand-card__select .field-card__name { font-size: .68rem; }
.hand-card__select .field-card__lineage { font-size: .48rem; }
.hand-card__select .field-card__cost-value { font-size: .6rem; }
.hand-card__select .field-card__cost-icon { width: 15px; height: 15px; flex-basis: 15px; }
.hand-card__select .field-card__ability, .hand-card__select .field-card__inheritance { display: -webkit-box; min-height: 16px; max-height: 28px; flex: 0 0 auto; margin-top: 4px; font-size: .47rem; line-height: 1.15; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hand-card__select .field-card__stats { margin-top: 0; font-size: .54rem; }
.hand-card__select .field-card__stats span { padding: 3px 2px; }
.hand-card__select.field-card--minimal .field-card__stats {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin-top: 0;
}
.hand-card__select.field-card--minimal .field-card__stats span {
  min-width: 0;
  overflow: hidden;
  padding-right: 1px;
  padding-left: 1px;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}
.hand-context { display: grid; min-width: 0; height: 102px; min-height: 102px; grid-template-columns: minmax(210px, 1fr) auto; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid rgba(152, 237, 187, .2); background: rgba(2, 8, 8, .3); }
.hand-context.is-evolution-ready { border-color: rgba(240, 193, 127, .55); background: rgba(240, 193, 127, .055); }
.hand-context__copy { display: grid; grid-column: 1; grid-row: 1; min-width: 0; gap: 2px; }
.hand-context__eyebrow { color: var(--amber); font-size: .53rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hand-context__identity { display: flex; min-width: 0; align-items: center; gap: 7px; }
.hand-context__identity .hand-context__title { min-width: 0; }
.hand-context__cost { flex: 0 0 auto; }
.hand-context__title { overflow: hidden; color: var(--ink); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.hand-context__hint { overflow: hidden; color: var(--muted); font-size: .62rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.hand-context__actions { display: flex; grid-column: 2; grid-row: 1; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.button--power { border-color: rgba(240, 193, 127, .34); background: rgba(240, 193, 127, .1); color: var(--amber); }
.button--evolution { border-color: rgba(240, 193, 127, .62); background: #8a5c22; color: #fff5e5; }
.button--attack { border-color: rgba(255, 155, 147, .48); background: rgba(255, 155, 147, .13); color: var(--danger); }
.button--dodge { border-color: rgba(126, 199, 255, .42); background: rgba(126, 199, 255, .11); color: #9ed6ff; }
.button--safeguard { border-color: rgba(152, 237, 187, .44); background: rgba(152, 237, 187, .12); color: var(--mint); }
.evolution-assistant-dialog { width: min(480px, 100%); max-width: 480px; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; overflow: hidden; border: 0; border-left: 1px solid rgba(240, 193, 127, .48); border-radius: 16px 0 0 16px; background: #0d1a19; color: var(--ink); animation: evolution-drawer-in .22s cubic-bezier(.16, 1, .3, 1); }
.evolution-assistant-dialog::backdrop { background: rgba(2, 7, 7, .72); }
.evolution-assistant-dialog__surface { display: grid; height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.evolution-assistant-dialog__header { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line); }
.evolution-assistant-dialog__header h2 { margin: 0 0 6px; font-size: 1.18rem; }
.evolution-assistant-dialog__header p { max-width: 48ch; margin: 0; font-size: .74rem; line-height: 1.4; }
.evolution-assistant-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; scrollbar-color: #806a3c transparent; }
.evolution-assistant-stages { display: grid; grid-template-columns: repeat(var(--stage-count, 3), minmax(0, 1fr)); gap: 8px; align-items: start; }
.evolution-assistant-stage { display: grid; min-width: 0; gap: 7px; align-content: start; }
.evolution-assistant-stage__level { color: var(--amber); font-size: .7rem; font-weight: 900; text-align: center; }
.evolution-assistant-stage__skip { min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font-size: .7rem; font-weight: 800; }
.evolution-assistant-stage__skip.is-selected { border-color: rgba(152, 237, 187, .48); background: rgba(152, 237, 187, .09); color: var(--mint); }
.evolution-assistant-stage__candidates { display: grid; gap: 7px; }
.evolution-assistant-stage__empty { margin: 0; padding: 12px 7px; border: 1px dashed var(--line); border-radius: 8px; font-size: .68rem; line-height: 1.35; text-align: center; }
.evolution-assistant-card { display: grid; width: 100%; min-width: 0; gap: 6px; justify-items: center; padding: 7px; border: 1px solid rgba(152, 237, 187, .18); border-radius: 10px; background: rgba(2, 8, 8, .35); color: var(--soft); text-align: left; }
.evolution-assistant-card:not(.is-locked):hover { border-color: rgba(152, 237, 187, .5); }
.evolution-assistant-card.is-selected { border-color: var(--amber); background: rgba(240, 193, 127, .1); }
.evolution-assistant-card.is-locked { border-color: rgba(240, 193, 127, .34); }
.evolution-assistant-card__preview { width: 72px; height: 102px; min-height: 102px; margin: 0; padding: 5px; pointer-events: none; }
.evolution-assistant-card__copy { display: grid; width: 100%; min-width: 0; gap: 2px; }
.evolution-assistant-card__name { overflow: hidden; font-size: .68rem; line-height: 1.15; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.evolution-assistant-card__inheritance { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: .62rem; line-height: 1.25; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.evolution-assistant-summary { display: grid; gap: 7px; margin-top: 16px; padding: 13px; border-top: 1px solid rgba(240, 193, 127, .34); background: rgba(240, 193, 127, .045); }
.evolution-assistant-summary__title { color: var(--amber); font-size: .7rem; }
.evolution-assistant-summary__chain { color: var(--soft); font-size: .72rem; line-height: 1.35; }
.evolution-assistant-summary__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.evolution-assistant-summary__facts span { padding: 7px 5px; border: 1px solid var(--line); color: var(--muted); font-size: .62rem; line-height: 1.25; text-align: center; }
.evolution-assistant-dialog__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 9px; padding: 14px 18px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #101f1e; }
.evolution-assistant-dialog__actions .button { min-height: 44px; }
@keyframes evolution-drawer-in { from { transform: translateX(24px); opacity: .82; } to { transform: translateX(0); opacity: 1; } }
.card-detail-dialog { width: min(880px, calc(100% - 28px)); max-width: 880px; padding: 0; border: 1px solid rgba(152, 237, 187, .3); border-radius: 16px; background: #0e1a1a; color: var(--ink); box-shadow: 0 24px 80px rgba(0, 0, 0, .55); }
.card-detail-dialog::backdrop { background: rgba(2, 8, 8, .74); }
.card-detail-dialog__surface { padding: 18px; }
.card-detail-dialog__header { display: flex; justify-content: space-between; gap: 14px; align-items: start; margin-bottom: 16px; }
.card-detail-dialog__header h2 { margin: 4px 0 0; }
.card-detail-dialog__header > div { min-width: 0; }
.card-detail-dialog__slogan { display: block; margin-top: 4px; color: #dcd5ff; font-size: .78rem; font-style: italic; line-height: 1.25; overflow-wrap: anywhere; }
.card-detail-dialog__context { display: block; margin-top: 5px; color: var(--muted); font-size: .62rem; line-height: 1.25; }
.card-detail-content { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.card-detail__preview { width: 280px; height: 392px; margin: 0; padding: 12px; }
.card-detail__preview .field-card__header { gap: 8px; }
.card-detail__preview .field-card__name { font-size: 1rem; }
.card-detail__preview .field-card__lineage { margin-top: 4px; font-size: .7rem; }
.card-detail__preview .field-card__cost { min-height: 28px; gap: 4px; padding: 2px 7px 2px 3px; }
.card-detail__preview .field-card__cost-piece { gap: 2px; }
.card-detail__preview .field-card__cost-value { font-size: .88rem; }
.card-detail__preview .field-card__cost-icon { width: 22px; height: 22px; flex-basis: 22px; }
.card-detail__preview .field-card__cost-plus { font-size: .7rem; }
.card-detail__preview .field-card__meta { gap: 3px; font-size: .64rem; }
.card-detail__preview .field-card__ability, .card-detail__preview .field-card__inheritance { min-height: 18px; font-size: .65rem; line-height: 1.2; white-space: normal; }
.card-detail__preview .field-card__stats { font-size: .7rem; }
.card-detail__preview .field-card__stats span { padding: 5px 4px; }
.card-detail__facts { display: grid; gap: 7px; }
.card-detail__fact { display: grid; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid rgba(152, 237, 187, .12); }
.card-detail__fact-label { color: var(--muted); font-size: .55rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.card-detail__fact-value { color: var(--soft); font-size: .74rem; line-height: 1.25; }
.card-detail__copy { min-width: 0; }

.action-confirm-dialog { width: min(520px, calc(100% - 28px)); max-width: 520px; padding: 0; border: 2px solid rgba(240, 193, 127, .62); border-radius: 18px; background: #101918; color: var(--ink); box-shadow: 0 24px 56px rgba(0, 0, 0, .72); }
.action-confirm-dialog::backdrop { background: rgba(1, 6, 6, .86); backdrop-filter: blur(4px); }
.action-confirm-dialog__surface { display: grid; gap: 14px; padding: 24px; }
.action-confirm-dialog__status { margin: 0; color: var(--amber); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.action-confirm-dialog h2 { margin: 0; color: #fff5e7; font-size: clamp(1.25rem, 4vw, 1.7rem); line-height: 1.15; }
.action-confirm-dialog__copy { margin: 0; color: var(--soft); font-size: .9rem; line-height: 1.5; }
.action-confirm-dialog__combat-cards { display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(255, 155, 147, .3); border-radius: 10px; background: rgba(255, 155, 147, .055); }
.action-confirm-dialog__combat-cards[hidden] { display: none; }
.action-confirm-dialog__cost { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(240, 193, 127, .3); border-radius: 10px; background: rgba(240, 193, 127, .07); color: var(--muted); font-size: .76rem; }
.action-confirm-dialog__cost[hidden] { display: none; }
.action-confirm-dialog__cost-label { color: var(--amber); font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.action-confirm-dialog__cost strong { color: #fff0d8; font-size: 1rem; }
.action-confirm-dialog__error { margin: 0; padding: 10px 12px; border: 1px solid rgba(255, 155, 147, .4); border-radius: 9px; background: rgba(95, 24, 26, .32); color: #ffd0ca; font-size: .78rem; line-height: 1.4; }
.action-confirm-dialog__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 10px; margin-top: 4px; }
.action-confirm-dialog__actions .button { min-height: 48px; }
.action-confirm-dialog[aria-busy="true"] { cursor: progress; }

.card-inspector { position: relative; z-index: 28; display: grid; min-width: 0; min-height: 0; grid-column: 3; grid-row: 1 / 5; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-left: 1px solid rgba(200, 154, 82, .58); background: linear-gradient(rgba(9, 15, 14, .9), rgba(9, 15, 14, .94)), url("./assets/volcanic-stone-ui-v1.png") center / 520px 520px repeat; color: var(--ink); box-shadow: -18px 0 40px rgba(0, 0, 0, .28); }
.card-inspector__header { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 14px 14px 12px; border-bottom: 1px solid rgba(200, 154, 82, .28); }
.card-inspector__identity { min-width: 0; }
.card-inspector__source { display: block; overflow: hidden; margin-bottom: 3px; color: var(--amber); font-size: .7rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.card-inspector__identity h2 { overflow: hidden; margin: 0; color: #f5eee0; font-size: clamp(1rem, 1.4vw, 1.22rem); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.card-inspector__identity h2:focus { outline: 1px solid rgba(240, 193, 127, .58); outline-offset: 3px; border-radius: 2px; }
.card-inspector__close, .card-inspector__expand, .card-inspector__pin { border: 1px solid rgba(200, 154, 82, .3); background: rgba(7, 12, 11, .58); color: var(--soft); }
.card-inspector__close { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border-radius: 10px; }
.card-inspector__close svg, .card-inspector__expand svg, .card-inspector__pin svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.card-inspector__expand { display: none; }
.card-inspector__body { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 12px; overflow-y: auto; overscroll-behavior: contain; padding: 14px; scrollbar-color: #806a3c transparent; }
.card-inspector__summary { display: grid; min-width: 0; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: start; }
.card-inspector__art { display: grid; width: 104px; height: 146px; overflow: hidden; place-items: center; border: 1px solid rgba(200, 154, 82, .34); border-radius: 9px; background: rgba(0, 0, 0, .28); }
.card-inspector__art img { width: 100%; height: 100%; object-fit: cover; }
.card-inspector__art-empty { padding: 8px; color: var(--muted); font-size: .68rem; text-align: center; }
.card-inspector__summary-copy { display: grid; min-width: 0; gap: 8px; }
.card-inspector__summary-line { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: .72rem; }
.card-inspector__summary-line strong { color: var(--soft); }
.card-inspector__cost { min-height: 23px; padding: 1px 6px 1px 2px; }
.card-inspector__cost .field-card__cost-icon { width: 18px; height: 18px; flex-basis: 18px; }
.card-inspector__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.card-inspector__stat { display: grid; min-height: 44px; place-items: center; border: 1px solid rgba(200, 154, 82, .28); background: rgba(0, 0, 0, .22); }
.card-inspector__stat span { color: var(--muted); font-size: .7rem; font-weight: 800; }
.card-inspector__stat strong { color: var(--amber); font-size: .95rem; }
.card-inspector__quick { display: grid; min-height: 0; align-content: start; gap: 12px; overflow-y: auto; }
.card-inspector__section { display: grid; gap: 5px; }
.card-inspector__section + .card-inspector__section { padding-top: 12px; border-top: 1px solid rgba(200, 154, 82, .18); }
.card-inspector__section h3 { margin: 0; color: var(--amber); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.card-inspector__section p { margin: 0; color: #d7dfd8; font-size: .78rem; line-height: 1.45; white-space: pre-wrap; }
.card-inspector__empty { color: var(--muted) !important; font-style: italic; }
.card-inspector__keyword-list, .card-inspector__origin-list, .card-inspector__stack { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.card-inspector__keyword, .card-inspector__origin { display: grid; gap: 3px; padding: 9px 10px; background: rgba(0, 0, 0, .2); }
.card-inspector__keyword strong, .card-inspector__origin strong { color: #f1e9dc; font-size: .76rem; }
.card-inspector__keyword span, .card-inspector__origin span { color: var(--muted); font-size: .7rem; line-height: 1.35; }
.card-inspector__stack-item { display: grid; min-width: 0; grid-template-columns: 42px minmax(0, 1fr); gap: 9px; align-items: center; padding: 7px; border: 1px solid rgba(200, 154, 82, .16); background: rgba(0, 0, 0, .18); }
.card-inspector__stack-level { display: grid; height: 44px; place-items: center; border: 1px solid rgba(200, 154, 82, .34); color: var(--amber); font-size: .7rem; font-weight: 900; }
.card-inspector__stack-copy { display: grid; min-width: 0; gap: 2px; }
.card-inspector__stack-copy strong { overflow: hidden; color: var(--soft); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.card-inspector__stack-copy span { color: var(--muted); font-size: .7rem; }
.card-inspector__footer { display: flex; min-height: 52px; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 12px max(7px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(200, 154, 82, .26); }
.card-inspector__footer > .button { min-height: 44px; }
.card-inspector__pin { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 9px; font-size: .7rem; font-weight: 800; }
.card-inspector__pin[aria-pressed="true"] { border-color: rgba(152, 237, 187, .55); background: rgba(152, 237, 187, .1); color: var(--mint); }
.card-inspector__shortcut { color: var(--muted); font-size: .625rem; text-align: right; }
.button--inspect { display: inline-flex; align-items: center; gap: 6px; }
.button--inspect svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.playmat.is-inspecting { grid-template-columns: clamp(180px, 16%, 210px) minmax(0, 1fr) clamp(344px, 28vw, 400px); }
.playmat.is-inspecting .lane-side--right { visibility: hidden; pointer-events: none; }
.power-detail-dialog { width: min(900px, calc(100% - 28px)); max-width: 900px; padding: 0; border: 1px solid rgba(240, 193, 127, .36); border-radius: 16px; background: #0e1a1a; color: var(--ink); box-shadow: 0 24px 80px rgba(0, 0, 0, .58); }
.power-detail-dialog::backdrop { background: rgba(2, 8, 8, .78); }
.power-detail-dialog__surface { padding: 18px; }
.power-detail-dialog__summary { margin: 6px 0 0; color: var(--muted); font-size: .72rem; }
.power-detail-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 160px)); justify-content: start; gap: 12px; max-height: min(56vh, 520px); overflow-y: auto; padding: 2px 3px 4px; scrollbar-color: #806a3c transparent; }
.power-detail-content__empty { grid-column: 1 / -1; margin: 10px 0 4px; padding: 24px 16px; border: 1px dashed rgba(240, 193, 127, .3); color: var(--muted); text-align: center; }
.power-detail-card { min-width: 0; }
.power-detail-card__preview { width: 100%; height: 208px; margin: 0; padding: 7px; }
.power-detail-card__preview .field-card__art { height: 94px; flex-basis: 94px; }
.power-detail-card__preview .field-card__name { font-size: .64rem; }
.power-detail-card__preview .field-card__lineage { font-size: .43rem; }
.power-detail-card__preview .field-card__ability, .power-detail-card__preview .field-card__inheritance { min-height: 16px; flex-basis: 16px; font-size: .46rem; line-height: 1.1; white-space: normal; }
.power-detail-card.is-spent { opacity: .62; }
.power-detail-card__footer { display: grid; gap: 3px; padding: 7px 2px 0; }
.power-detail-card__name { overflow: hidden; color: var(--soft); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.power-detail-card__state { color: var(--muted); font-size: .55rem; font-weight: 850; }
.power-detail-card__state.is-ready { color: var(--mint); }
.reaction-dialog { width: min(580px, calc(100% - 24px)); max-width: 580px; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 0; border: 1px solid rgba(240, 193, 127, .48); border-radius: 16px; background: #0e1a1a; color: var(--ink); box-shadow: 0 28px 90px rgba(0, 0, 0, .72); }
.reaction-dialog::backdrop { background: rgba(2, 7, 7, .86); }
.reaction-dialog__surface { display: grid; gap: 12px; padding: 22px; }
.reaction-dialog__status { margin: 0; color: var(--amber); font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.reaction-dialog h2 { margin: -4px 0 0; font-size: 1.3rem; line-height: 1.15; }
.reaction-dialog__copy { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.reaction-dialog__body { min-width: 0; }
.reaction-matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.reaction-matchup__versus { align-self: center; color: var(--muted); font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.reaction-combatant, .reaction-safeguard { display: grid; min-width: 0; gap: 5px; padding: 12px; border: 1px solid rgba(152, 237, 187, .2); background: rgba(4, 14, 13, .72); }
.reaction-combatant__role { color: var(--muted); font-size: .52rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.reaction-combatant__name, .reaction-safeguard__name { overflow: hidden; color: var(--soft); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.reaction-combatant__position, .reaction-safeguard__lineage { color: var(--muted); font-size: .58rem; }
.reaction-combatant__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 3px; }
.reaction-combatant__stats span { padding: 5px 4px; border: 1px solid rgba(240, 193, 127, .24); color: var(--amber); font-size: .62rem; font-weight: 900; text-align: center; }
.reaction-combatant__stats span.is-damaged { color: var(--danger); }
.reaction-safeguard { max-width: 360px; margin-inline: auto; border-color: rgba(152, 237, 187, .32); }
.reaction-safeguard label { display: grid; gap: 5px; color: var(--soft); font-size: .7rem; font-weight: 800; }
.reaction-safeguard select { min-height: 44px; }
.reaction-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.reaction-dialog__actions .button { min-height: 42px; padding: 9px 14px; font-size: .7rem; }
.reaction-combat-cards { display: grid; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(240, 193, 127, .24); }.reaction-combat-cards__title { color: var(--amber); font-size: .76rem; }.reaction-combat-cards__help { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.4; }.reaction-combat-cards__list { display: grid; gap: 7px; }.reaction-combat-card { display: grid; min-height: 48px; gap: 3px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(18, 36, 34, .7); color: var(--soft); cursor: pointer; text-align: left; }.reaction-combat-card span { color: var(--muted); font-size: .68rem; }.reaction-combat-card.is-selected { border-color: var(--amber); background: rgba(240, 193, 127, .12); }.reaction-combat-card:disabled { cursor: not-allowed; opacity: .48; }.reaction-combat-cards label { display: grid; gap: 5px; color: var(--soft); font-size: .7rem; font-weight: 800; }.reaction-combat-cards select { min-height: 44px; }
.game-over-dialog { border-color: rgba(152, 237, 187, .48); }
.game-over-dialog.is-local-victory h2 { color: var(--mint); }
.game-over-dialog.is-local-defeat { border-color: rgba(255, 155, 147, .5); }
.game-over-dialog.is-local-defeat h2 { color: var(--danger); }
.game-over-dialog::backdrop { background: rgba(2, 7, 7, .9); }
.game-over-dialog__surface { gap: 14px; text-align: center; }
.game-over-dialog h2 { margin: 0; font-size: 1.55rem; }
.game-over-dialog .reaction-dialog__copy { max-width: 54ch; margin-inline: auto; }
.game-over-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; padding-block: 12px; border-block: 1px solid rgba(152, 237, 187, .18); }
.game-over-score__player { display: grid; gap: 3px; color: var(--muted); }
.game-over-score__player.is-winner { color: var(--mint); }
.game-over-score__name { font-size: .64rem; font-weight: 850; }
.game-over-score__life { color: currentColor; font-size: 1rem; font-variant-numeric: tabular-nums; }
.game-over-score__separator { color: var(--muted); font-size: .52rem; font-weight: 850; text-transform: uppercase; }
.game-over-dialog .reaction-dialog__actions { justify-content: center; }
.game-over-dialog .reaction-dialog__actions .button[hidden] { display: none; }
.hand-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 8px; }
.mobile-hand-cost { display: none; }
.mobile-hand-cost[hidden] { display: none !important; }
.empty-hand { padding: 24px; border: 1px dashed var(--line); color: var(--muted); font-size: .82rem; text-align: center; }
pre { min-height: 100px; max-height: 250px; overflow: auto; margin: 16px 0 0; padding: 13px; border: 1px solid rgba(152, 237, 187, .12); background: #06100f; color: #bfe7cd; font: .72rem/1.55 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.orientation-hint { display: none; margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--line); background: rgba(240, 193, 127, .08); color: var(--amber); font-size: .74rem; text-align: center; }

@media (min-width: 561px) {
  .field-card { isolation: isolate; }
  .field-card::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(2, 8, 8, .88) 0%, rgba(2, 8, 8, .44) 17%, transparent 30%), linear-gradient(0deg, rgba(2, 8, 8, .96) 0%, rgba(2, 8, 8, .74) 18%, transparent 31%); content: ""; pointer-events: none; }
  .field-card > :not(.field-card__art) { position: relative; z-index: 2; }
  .field-card > .field-card__art { position: absolute; z-index: 0; inset: 0; width: auto; height: auto; min-height: 0; flex: none; margin: 0; border: 0; border-radius: inherit; }
  .hand-card__select.field-card > .field-card__art,
  .card-detail__preview.field-card > .field-card__art,
  .power-detail-card__preview.field-card > .field-card__art,
  .field-card--minimal > .field-card__art { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; flex: none; margin: 0; border: 0; border-radius: inherit; }
  .field-card > .field-card__art img { object-position: center; }
  .field-card__header { position: absolute !important; top: 0; right: 0; left: 0; padding: 7px 8px 0; }
  .field-card__bottom { position: absolute !important; right: 0; bottom: 0; left: 0; height: 25%; max-height: 25%; padding: 0 8px 7px; }
  .field-card__ability, .field-card__inheritance { text-shadow: 0 1px 4px rgba(0, 0, 0, .92); }
  .field-card--minimal .field-card__top { position: absolute !important; top: 0; right: 0; left: 0; z-index: 2; padding: 5px; }
  .field-card--minimal .field-card__stats { position: absolute !important; right: 5px; bottom: 5px; left: 5px; z-index: 2; width: auto; margin: 0; }
  .field-card__stats span { background: rgba(2, 8, 8, .34); }
}

@media (min-width: 901px) {
  body.is-playing { height: 100dvh; overflow: hidden; }
  .is-playing .shell { width: min(1920px, calc(100% - 16px)); height: 100dvh; padding: 8px 0; }
  .is-playing .hero, .is-playing .setup-panel { display: none; }
  .is-playing .game-panel { position: relative; display: grid; min-height: 0; height: 100%; grid-template-rows: auto var(--selection-rail-height) minmax(0, 1fr) minmax(224px, clamp(224px, 31vh, 286px)); }
  .is-playing .game-toolbar { min-height: 58px; padding: 9px 14px; }
  .is-playing #fullscreen-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 150px; }
  .is-playing .game-toolbar h2 { margin: 0; }
  .is-playing .selection-bar { min-height: 0; height: var(--selection-rail-height); padding: 6px 14px; }
  .is-playing.has-active-selection .selection-bar__main { display: grid; width: 100%; grid-template-columns: minmax(260px, 1fr) auto; grid-template-areas: "steps steps" "status cost"; gap: 4px 14px; align-items: center; }
  .is-playing.has-active-selection .selection-steps { grid-area: steps; }
  .is-playing.has-active-selection #selection-status { grid-area: status; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .is-playing.has-active-selection .selection-cost-preview { grid-area: cost; flex-wrap: nowrap; }
  .is-playing .board-scroll { min-height: 0; overflow: auto; }
  .is-playing .playmat { height: 100%; min-height: 100%; grid-template-rows: minmax(0, 1fr) 54px 54px minmax(0, 1fr); border-radius: 0; }
  .is-playing .lane-side { padding: 7px 8px; overflow: hidden; }
  .is-playing .lane-side--right { gap: 5px; }
  .is-playing .player-label { margin-bottom: 2px; font-size: .55rem; }
  .is-playing .player-identity { gap: 6px; }
  .is-playing .player-identity h3 { font-size: 1.05rem; }
  .is-playing .badge { padding: 4px 5px; font-size: .48rem; }
  .is-playing .life-readout { gap: 4px; margin-top: 5px; }
  .is-playing .life-readout strong { font-size: 1.8rem; }
  .is-playing .life-readout span { font-size: .62rem; }
  .is-playing .lane-caption { display: none; }
  .is-playing .zone-block { margin-top: 5px; }
  .is-playing .zone-label { font-size: .52rem; }
  .is-playing .champion-slot, .is-playing .champion-card { min-height: 43px; }
  .is-playing .champion-card { padding: 5px; }
  .is-playing .champion-card strong { margin-top: 3px; font-size: .55rem; }
  .is-playing .guard-strip { gap: 2px; margin-top: 4px; }
  .is-playing .guard-chip { min-height: 22px; font-size: .45rem; }
  .is-playing .pile-grid { gap: 4px; }
  .is-playing .pile-zone { min-height: 58px; }
  .is-playing .pile-card { min-height: 53px; padding: 4px; }
  .is-playing .pile-card__title { font-size: .48rem; }
  .is-playing .pile-card__count { font-size: 1rem; }
  .is-playing .potency-zone { padding: 5px; }
  .is-playing .potency-grid { gap: 3px; margin-top: 4px; }
  .is-playing .potency-chip { min-height: 27px; }
  .is-playing .potency-chip__label { font-size: .43rem; }
  .is-playing .potency-chip__count { font-size: .78rem; }
  .is-playing .power-card-list { max-height: 34px; margin-top: 3px; }
  .is-playing .power-card-token { grid-template-columns: 24px minmax(0, 1fr) auto; padding: 2px 4px; }
  .is-playing .power-card-token__name { font-size: .5rem; }
  .is-playing .lane-field { padding-top: 8px; padding-bottom: 8px; }
  .is-playing .hand-panel { position: relative; z-index: 2; display: grid; min-height: 0; height: auto; grid-template-rows: auto minmax(0, 1fr); margin: 0 14px 12px; padding: 10px 12px 10px; overflow: hidden; border-color: rgba(152, 237, 187, .28); background: rgba(14, 26, 26, .96); box-shadow: 0 18px 50px rgba(0, 0, 0, .48); }
  .is-playing .hand-heading { min-height: 31px; margin-bottom: 7px; }
  .is-playing .hand-heading h2 { margin-bottom: 0; font-size: 1rem; }
  .is-playing .hand-layout { min-height: 0; height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
  .is-playing .hand-tray { min-height: 0; height: 100%; padding: 0 30px 3px; }
  .is-playing .hand-card { height: 132px; }
  .is-playing .hand-context { min-height: 102px; padding-right: 154px; }
  .is-playing .hand-actions { position: absolute; right: 12px; bottom: 12px; margin: 0; }
  .is-playing #end-turn-button { min-width: 104px; min-height: 44px; }
}

@media (min-width: 901px) and (max-height: 800px) {
  .is-playing .game-panel { grid-template-rows: auto var(--selection-rail-height) minmax(0, 1fr) 224px; }
  .is-playing .game-toolbar { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
  .is-playing .selection-bar { min-height: 0; height: var(--selection-rail-height); padding-top: 4px; padding-bottom: 4px; }
  .is-playing .playmat { grid-template-rows: minmax(0, 1fr) 44px 44px minmax(0, 1fr); }
  .is-playing .lane-side { padding: 6px 8px; }
  .is-playing .lane-side--right { gap: 5px; }
  .is-playing .lane-caption { display: none; }
  .is-playing .zone-block { margin-top: 4px; }
  .is-playing .champion-slot, .is-playing .champion-card { min-height: 30px; }
  .is-playing .guard-chip { min-height: 22px; }
  .is-playing .pile-grid { gap: 5px; }
  .is-playing .pile-zone { min-height: 62px; }
  .is-playing .pile-card { min-height: 58px; }
  .is-playing .potency-zone { padding: 6px; }
  .is-playing .potency-grid { gap: 3px; margin-top: 4px; }
  .is-playing .potency-chip { min-height: 28px; }
  .is-playing .power-card-list { max-height: 24px; margin-top: 3px; }
  .is-playing .power-card-token { grid-template-columns: 24px minmax(0, 1fr) auto; padding: 2px 4px; }
  .is-playing .hand-panel { height: auto; }
  .is-playing .hand-layout { min-height: 0; height: auto; }
  .is-playing .hand-tray { padding-top: 0; }
  .is-playing .hand-card { height: 122px; }
  .is-playing .hand-card-preview.is-active { transform: translateY(-30px) scale(1.1); }
  .is-playing .hand-card-preview.is-active.is-selected:not(.is-hovered) { transform: translateY(-20px) scale(1.045); }
  .is-playing .hand-card-preview.is-active.is-selected.is-hovered { transform: translateY(-34px) scale(1.11); }
}

@media (max-width: 900px) {
  .shell { width: min(100% - 20px, 760px); padding-top: 26px; }
  .hero { align-items: start; flex-direction: column; }
  .prototype-stamp { align-self: start; }
  .setup-grid { grid-template-columns: 1fr; }
  .playmat { min-width: 1180px; padding-right: 14px; padding-left: 14px; }
  .game-toolbar, .selection-bar { padding-right: 14px; padding-left: 14px; }
  .hand-panel { margin-right: 14px; margin-left: 14px; }
  .card-play-feedback--command { transform: translate(-50%, -46%) scale(.42); }
  .card-play-feedback--command.is-visible { transform: translate(-50%, -50%) scale(.5); }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 14px, 520px); }
  .panel { padding: 15px; }
  .setup-heading, .game-toolbar, .selection-bar, .hand-heading { align-items: start; flex-direction: column; }
  .toolbar-meta { justify-content: start; }
  .selection-bar { gap: 9px; }
  .selection-bar__actions { width: 100%; justify-content: flex-end; }
  .hero h1 { font-size: clamp(2.55rem, 16vw, 4rem); }
  .power-detail-dialog { width: min(100% - 18px, 520px); }
  .power-detail-dialog__surface { padding: 14px; }
  .power-detail-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .power-detail-card__preview { height: 190px; }
  .power-detail-card__preview .field-card__art { height: 78px; flex-basis: 78px; }
  .actions .button { flex: 1 1 auto; }
  .game-toolbar { padding: 18px 14px 15px; }
  .hand-tray { min-height: 198px; padding: 0 24px 7px; }
  .hand-card { flex-basis: 112px; width: 112px; height: 158px; }
  .hand-context { display: flex; height: 208px; min-height: 208px; flex-wrap: wrap; align-items: start; }
  .hand-context__copy { min-width: 180px; }
  .hand-context__actions { margin-left: auto; }
  .hand-panel { margin-right: 0; margin-left: 0; }
}

@media (max-width: 900px) and (orientation: portrait) {
  .orientation-hint { display: block; }
}

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 600px) {
  :root { --card-width: 42px; --card-height: 60px; --slot-width: var(--card-height); --slot-height: var(--card-height); }
  .shell { width: calc(100% - 16px); padding-top: 13px; }
  .hero { align-items: center; flex-direction: row; gap: 14px; margin-bottom: 12px; }
  .hero h1 { margin-bottom: 5px; font-size: clamp(1.8rem, 5vw, 3.1rem); }
  .hero-copy { max-width: 390px; font-size: .72rem; }
  .prototype-stamp { align-self: center; padding: 7px 9px; font-size: .55rem; }
  .setup-panel { margin-bottom: 11px; padding: 13px; }
  .setup-heading h2 { font-size: 1rem; }
  .setup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
  .actions { margin-top: 10px; }
  .game-toolbar { padding: 14px 14px 11px; }
  .selection-bar { min-height: 40px; padding: 7px 14px; }
  .playmat { min-width: 0; padding: 0; grid-template-columns: 122px minmax(0, 1fr) 122px; grid-template-rows: 212px 58px 58px 212px; }
  .lane, .center-lane { min-height: 0; margin: 0; }
  .lane-side { padding: 10px; }
  .lane-field { padding: 10px 10px 12px; }
  .board-row { gap: 6px; }
  .field-card { margin: 6px 5px; padding: 6px; }
  .field-card--minimal { width: var(--card-width); height: var(--card-height); margin: 0; padding: 5px; }
  .field-card__name { font-size: .58rem; }
  .field-card__stats { gap: 3px; margin-top: 5px; font-size: .48rem; }
  .field-card__stats span { padding: 2px 3px; }
  .pile-zone { min-height: 88px; }
  .pile-card { min-height: 81px; padding: 6px 5px; }
  .pile-card__count { font-size: 1.15rem; }
  .potency-zone { padding: 8px; }
  .potency-grid { gap: 4px; margin-top: 6px; }
  .potency-chip { min-height: 34px; gap: 2px; }
  .potency-chip__count { font-size: .85rem; }
  .power-card-list { max-height: 76px; margin-top: 6px; }
  .power-card-token { padding: 4px; }
  .power-card-token__name { font-size: .5rem; }
  .hand-panel { margin-right: 14px; margin-left: 14px; padding-right: 10px; padding-left: 10px; }
  .hand-tray { min-height: 166px; padding: 0 16px 5px; }
  .hand-card { flex-basis: 84px; width: 84px; height: 122px; }
  .hand-card + .hand-card { margin-left: -12px; }
  .hand-card-preview.is-active { transform: translateY(-28px) scale(1.1); }
  .hand-card-preview.is-active.is-selected:not(.is-hovered) { transform: translateY(-18px) scale(1.05); }
  .hand-card-preview.is-active.is-selected.is-hovered { transform: translateY(-32px) scale(1.11); }
  .hand-card__select.field-card { padding: 5px; border-radius: 9px; }
  .hand-card__select .field-card__top { font-size: .43rem; }
  .hand-card__select .field-card__art { min-height: 28px; margin: 3px 0 4px; }
  .hand-card__select .field-card__name { font-size: .52rem; }
  .hand-card__select .field-card__lineage { font-size: .4rem; }
  .hand-card__select .field-card__ability { display: none; }
  .hand-card__select .field-card__inheritance { min-height: 7px; font-size: .38rem; line-height: 7px; }
  .hand-card__select .field-card__stats { gap: 2px; font-size: .43rem; }
  .hand-context { gap: 7px; height: 87px; min-height: 87px; padding: 6px 100px 6px 8px; }
  .hand-context__copy { min-width: 0; }
  .hand-context__eyebrow { font-size: .43rem; }
  .hand-context__title { font-size: .66rem; }
  .hand-context__hint { font-size: .48rem; }
  .hand-context__actions { gap: 4px; }
  .hand-context .button--tiny { padding: 5px 7px; font-size: .54rem; }
  .card-detail-content { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .card-detail__preview { width: 120px; height: 168px; }
  .card-detail__preview .field-card__art { height: 78px; flex-basis: 78px; }

  body.is-playing {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--game-viewport-height);
    min-width: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .is-playing .shell {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--game-viewport-height);
    margin: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .is-playing .hero,
  .is-playing .setup-panel,
  .is-playing .orientation-hint { display: none; }
  .is-playing .game-panel {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 38px 28px minmax(0, 1fr) 124px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .is-playing .game-toolbar {
    min-height: 0;
    height: 38px;
    padding: 3px 6px;
    gap: 4px;
  }
  .is-playing .game-toolbar h2 { display: none; }
  .is-playing .game-toolbar__controls { width: 100%; min-width: 0; gap: 4px; }
  .is-playing .toolbar-meta { min-width: 0; flex: 1; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; }
  .is-playing .role-chip,
  .is-playing .turn-chip,
  .is-playing .connection-count {
    min-height: 26px;
    padding: 3px 6px;
    font-size: .5rem;
    white-space: nowrap;
  }
  .is-playing .connection-count { display: none; }
  .is-playing .game-actions { flex: 0 0 auto; gap: 3px; }
  .is-playing .game-actions .button { min-height: 26px; padding: 3px 7px; font-size: .5rem; }
  .is-playing #fullscreen-button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 28px; padding: 3px 6px; }
  .is-playing .fullscreen-button__label { display: none; }
  .is-playing .selection-bar {
    min-height: 0;
    height: 28px;
    padding: 2px 6px;
    gap: 4px;
    flex-direction: row;
    font-size: .54rem;
  }
  .is-playing .selection-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .is-playing .selection-bar__actions { width: auto; gap: 3px; }
  .is-playing .selection-bar .button { min-height: 23px; padding: 2px 6px; font-size: .46rem; }
  .is-playing .board-scroll { height: 100%; min-height: 0; overflow: hidden; }
  .is-playing .playmat {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: clamp(92px, 13vw, 106px) minmax(0, 1fr) clamp(92px, 13vw, 106px);
    grid-template-rows: minmax(0, 1fr) 30px 30px minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .is-playing .lane,
  .is-playing .center-lane { min-height: 0; margin: 0; }
  .is-playing .lane-side { padding: 2px 3px; overflow: hidden; }
  .is-playing .lane-field { padding: 1px 3px; overflow: visible; }
  .is-playing .lane-heading { display: none; }
  .is-playing .board-row { gap: 2px; }
  .is-playing .field-card { margin: 1px; padding: 2px; }
  .is-playing .field-card--minimal { width: var(--card-width); height: var(--card-height); margin: 0; padding: 3px; }
  .is-playing .field-card__name { font-size: .43rem; }
  .is-playing .field-card__stats { gap: 1px; margin-top: 2px; font-size: .36rem; }
  .is-playing .field-card__stats span { padding: 1px 2px; }
  .is-playing .player-label,
  .is-playing .lane-caption,
  .is-playing .lane-side > .zone-label { display: none; }
  .is-playing .player-identity { align-items: center; gap: 2px; }
  .is-playing .player-identity h3 { font-size: .7rem; }
  .is-playing .badge { padding: 2px 3px; font-size: .32rem; }
  .is-playing .life-readout { gap: 2px; margin-top: 1px; }
  .is-playing .life-readout strong { font-size: 1rem; }
  .is-playing .life-readout span { font-size: .38rem; }
  .is-playing .zone-block { margin-top: 2px; }
  .is-playing .zone-block > .zone-label { display: none; }
  .is-playing .champion-slot,
  .is-playing .champion-card { min-height: 15px; margin-top: 0; }
  .is-playing .champion-card { padding: 2px; }
  .is-playing .champion-card strong { margin: 0; font-size: .38rem; }
  .is-playing .guard-strip { gap: 1px; margin-top: 1px; }
  .is-playing .guard-chip { min-height: 12px; font-size: .3rem; }
  .is-playing .lane-side--right { gap: 2px; }
  .is-playing .pile-grid { gap: 2px; }
  .is-playing .pile-zone { min-height: 22px; }
  .is-playing .pile-card { min-height: 20px; padding: 2px; }
  .is-playing .pile-card__title { font-size: .3rem; }
  .is-playing .pile-card__count { font-size: .62rem; }
  .is-playing .pile-card__empty { display: none; }
  .is-playing .potency-zone { margin: 0; padding: 2px; }
  .is-playing .potency-zone > .zone-label { display: none; }
  .is-playing .potency-grid { gap: 1px; margin-top: 0; }
  .is-playing .potency-chip { min-height: 15px; gap: 0; }
  .is-playing .potency-chip__label { font-size: .28rem; }
  .is-playing .potency-chip__count { font-size: .44rem; }
  .is-playing .power-card-list { display: none; }
  .is-playing .hand-panel {
    position: relative;
    z-index: 4;
    display: grid;
    width: 100%;
    max-width: 100%;
    height: 124px;
    min-height: 0;
    min-width: 0;
    grid-template-rows: 17px minmax(0, 1fr);
    margin: 0;
    padding: 2px 6px 3px;
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .is-playing .hand-heading { min-height: 0; height: 17px; margin: 0; align-items: center; flex-direction: row; }
  .is-playing .hand-heading .zone-label,
  .is-playing .hand-heading .panel-copy { display: none; }
  .is-playing .hand-heading h2 { margin: 0; font-size: .62rem; }
  .is-playing .hand-layout {
    display: grid;
    height: 100%;
    width: 100%;
    min-height: 0;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) clamp(250px, 36vw, 320px);
    grid-template-rows: minmax(0, 1fr);
    gap: 5px;
    overflow: visible;
  }
  .is-playing .hand-tray { width: 100%; max-width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0 7px 1px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .is-playing .hand-tray::-webkit-scrollbar { display: none; }
  .is-playing .hand-card { flex-basis: 70px; width: 70px; height: 99px; }
  .is-playing .hand-card + .hand-card { margin-left: -10px; }
  .is-playing .hand-card-preview.is-active { transform: translateY(-10px) scale(1.03); }
  .is-playing .hand-card-preview.is-active.is-selected:not(.is-hovered) { transform: translateY(-7px) scale(1.02); }
  .is-playing .hand-card-preview.is-active.is-selected.is-hovered { transform: translateY(-11px) scale(1.035); }
  .is-playing .hand-context {
    display: grid;
    height: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 3px 5px;
    align-items: center;
    padding: 4px 6px;
    overflow: hidden;
  }
  .is-playing .hand-context__copy { grid-column: 1; grid-row: 1; min-width: 0; }
  .is-playing .hand-context__eyebrow { font-size: .38rem; }
  .is-playing .hand-context__title { font-size: .58rem; }
  .is-playing .hand-context__hint { font-size: .42rem; }
  .is-playing .hand-context__actions { grid-column: 2; grid-row: 1; display: grid; gap: 2px; min-width: 0; margin: 0; }
  .is-playing .hand-context .button--tiny { padding: 3px 5px; font-size: .44rem; }
  .is-playing .hand-actions { position: absolute; top: 1px; right: 6px; bottom: auto; margin: 0; }
  .is-playing #end-turn-button { min-width: 68px; min-height: 21px; padding: 2px 6px; font-size: .46rem; }
  .is-playing .card-detail-dialog,
  .is-playing .power-detail-dialog,
  .is-playing .reaction-dialog,
  .is-playing .game-over-dialog { max-height: calc(100dvh - 12px); }
}

@media (orientation: landscape) and (max-height: 600px) {
  .evolution-assistant-dialog { width: 100%; max-width: none; height: min(82dvh, 500px); max-height: 82dvh; margin: auto 0 0; border-top: 1px solid rgba(240, 193, 127, .48); border-left: 0; border-radius: 16px 16px 0 0; animation-name: evolution-sheet-in; }
  .evolution-assistant-dialog__header { align-items: center; padding: 9px 12px; }
  .evolution-assistant-dialog__header h2 { margin-bottom: 2px; font-size: .86rem; }
  .evolution-assistant-dialog__header p { font-size: .58rem; line-height: 1.25; }
  .evolution-assistant-content { padding: 8px 12px; }
  .evolution-assistant-stages { gap: 6px; }
  .evolution-assistant-stage { gap: 4px; }
  .evolution-assistant-stage__level { font-size: .68rem; }
  .evolution-assistant-stage__skip { min-height: 30px; padding: 4px; font-size: .68rem; }
  .evolution-assistant-stage__candidates { display: flex; gap: 5px; overflow-x: auto; }
  .evolution-assistant-card { min-width: 94px; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 5px; padding: 4px; }
  .evolution-assistant-card__preview { width: 48px; height: 68px; min-height: 68px; padding: 3px; }
  .evolution-assistant-card__name { font-size: .66rem; text-align: left; }
  .evolution-assistant-card__inheritance { font-size: .6rem; text-align: left; }
  .evolution-assistant-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; margin-top: 8px; padding: 7px 9px; }
  .evolution-assistant-summary__title { font-size: .66rem; }
  .evolution-assistant-summary__chain { grid-column: 1; font-size: .64rem; }
  .evolution-assistant-summary__facts { grid-column: 2; grid-row: 1 / span 2; }
  .evolution-assistant-summary__facts span { padding: 4px; font-size: .62rem; }
  .evolution-assistant-dialog__actions { padding: 7px 12px max(7px, env(safe-area-inset-bottom)); }
  .evolution-assistant-dialog__actions .button { min-height: 38px; padding: 6px 10px; font-size: .7rem; }
  .reaction-dialog { width: min(540px, calc(100% - 16px)); }
  .reaction-dialog__surface { gap: 7px; padding: 12px 14px; }
  .reaction-dialog__status { font-size: .46rem; }
  .reaction-dialog h2 { font-size: 1rem; }
  .reaction-dialog__copy { font-size: .62rem; line-height: 1.3; }
  .reaction-combatant, .reaction-safeguard { gap: 3px; padding: 7px 8px; }
  .reaction-combatant__name, .reaction-safeguard__name { font-size: .64rem; }
  .reaction-combatant__role, .reaction-combatant__position, .reaction-safeguard__lineage { font-size: .45rem; }
  .reaction-combatant__stats span { padding: 3px; font-size: .5rem; }
  .reaction-dialog__actions .button { min-height: 32px; padding: 5px 9px; font-size: .56rem; }
  .game-over-dialog__surface { gap: 8px; }
  .game-over-dialog h2 { font-size: 1.12rem; }
  .game-over-score { gap: 8px; padding-block: 7px; }
  .game-over-score__life { font-size: .76rem; }
}

@media (max-width: 560px) and (orientation: portrait) {
  .evolution-assistant-dialog { width: 100%; max-width: none; height: min(86dvh, 760px); max-height: 86dvh; margin: auto 0 0; border-top: 1px solid rgba(240, 193, 127, .48); border-left: 0; border-radius: 16px 16px 0 0; animation-name: evolution-sheet-in; }
  .evolution-assistant-dialog__header { padding: 15px 14px; }
  .evolution-assistant-content { padding: 13px 14px; }
  .evolution-assistant-stages { grid-template-columns: 1fr; }
  .evolution-assistant-stage { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .evolution-assistant-stage__candidates { display: flex; overflow-x: auto; }
  .evolution-assistant-card { flex: 0 0 136px; }
  .evolution-assistant-stage__skip { min-height: 44px; }
  .evolution-assistant-summary__facts { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 600px) {
  .is-playing.has-card-inspector .game-panel { grid-template-rows: 38px 28px minmax(0, 1fr) var(--card-inspector-mobile-height, min(58dvh, 310px)); }
  .is-playing.has-card-inspector .hand-panel { visibility: hidden; pointer-events: none; }
  .is-playing.has-card-inspector.is-card-inspector-compact { --card-inspector-mobile-height: 48px; }
  .is-playing .playmat.is-inspecting { grid-template-columns: clamp(92px, 13vw, 106px) minmax(0, 1fr) clamp(92px, 13vw, 106px); }
  .is-playing.has-card-inspector:not(.is-card-inspector-compact) .playmat.is-inspecting {
    --card-width: 26px;
    --card-height: 36px;
    --slot-width: 48px;
    --slot-height: 36px;
    grid-template-rows: minmax(0, 1fr) 24px 24px minmax(0, 1fr);
  }
  .is-playing .playmat.is-inspecting .lane-side--right { visibility: visible; pointer-events: auto; }
  .is-playing .card-inspector { position: fixed; z-index: 45; right: 0; bottom: 0; left: 0; width: 100%; height: var(--card-inspector-mobile-height, min(58dvh, 310px)); min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; border-top: 1px solid rgba(200, 154, 82, .58); border-left: 0; box-shadow: 0 -18px 46px rgba(0, 0, 0, .48); }
  .is-playing .card-inspector__header { grid-template-columns: 44px minmax(0, 1fr) 44px; min-height: 48px; padding: 3px 8px; }
  .is-playing .card-inspector__expand { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border-radius: 9px; }
  .is-playing.is-card-inspector-compact .card-inspector__expand svg { transform: rotate(180deg); }
  .is-playing .card-inspector__identity h2 { font-size: .86rem; }
  .is-playing .card-inspector__source { margin: 0; font-size: .56rem; }
  .is-playing .card-inspector__body { grid-row: 2; grid-template-columns: minmax(190px, .72fr) minmax(0, 1.6fr); grid-template-rows: minmax(0, 1fr); gap: 10px; padding: 8px 10px; }
  .is-playing .card-inspector__summary { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
  .is-playing .card-inspector__art { width: 72px; height: 101px; }
  .is-playing .card-inspector__summary-copy { gap: 5px; }
  .is-playing .card-inspector__summary-line { gap: 3px; font-size: .58rem; }
  .is-playing .card-inspector__stats { gap: 3px; }
  .is-playing .card-inspector__stat { min-height: 40px; }
  .is-playing .card-inspector__stat strong { font-size: .72rem; }
  .is-playing .card-inspector__stat span { font-size: .48rem; }
  .is-playing .card-inspector__quick { overflow-y: auto; }
  .is-playing .card-inspector__section { gap: 3px; }
  .is-playing .card-inspector__section + .card-inspector__section { padding-top: 7px; }
  .is-playing .card-inspector__section h3 { font-size: .58rem; }
  .is-playing .card-inspector__section p { font-size: .68rem; line-height: 1.3; }
  .is-playing .card-inspector__keyword-list, .is-playing .card-inspector__origin-list, .is-playing .card-inspector__stack { gap: 5px; }
  .is-playing .card-inspector__keyword, .is-playing .card-inspector__origin { padding: 5px 7px; }
  .is-playing .card-inspector__keyword strong, .is-playing .card-inspector__origin strong { font-size: .66rem; }
  .is-playing .card-inspector__keyword span, .is-playing .card-inspector__origin span { font-size: .6rem; }
  .is-playing .card-inspector__footer { min-height: 50px; padding-block: 3px; }
  .is-playing .card-inspector__shortcut { display: none; }
  .is-playing.is-card-inspector-compact .card-inspector { grid-template-rows: 48px; }
  .is-playing.is-card-inspector-compact .card-inspector__body,
  .is-playing.is-card-inspector-compact .card-inspector__footer { display: none; }
}

@media (max-width: 900px) and (orientation: portrait) {
  .card-inspector { position: fixed; z-index: 45; right: 0; bottom: 0; left: 0; width: 100%; max-height: min(74dvh, 680px); grid-column: auto; grid-row: auto; border-top: 1px solid rgba(200, 154, 82, .58); border-left: 0; }
  .card-inspector__header { grid-template-columns: minmax(0, 1fr) 44px; }
  .card-inspector__body { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .card-inspector__summary { grid-template-columns: 1fr; }
  .card-inspector__art { width: 104px; }
  .card-inspector__footer { flex-wrap: wrap; }
  .card-inspector__shortcut { display: none; }
}

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 600px) {
  .is-playing.has-active-selection .game-panel { grid-template-rows: 38px 44px minmax(0, 1fr) 124px; }
  .is-playing .selection-bar {
    min-height: 0;
    height: 100%;
    padding: 3px 6px;
    gap: 6px;
    flex-direction: row;
  }
  .is-playing .selection-bar__main { display: flex; min-width: 0; align-items: center; gap: 7px; overflow: hidden; }
  .is-playing .selection-steps { display: none; }
  .is-playing .selection-bar__main > #selection-status { max-width: min(42vw, 330px); overflow: hidden; font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }
  .is-playing .selection-cost-preview { flex-wrap: nowrap; overflow: hidden; }
  .is-playing .selection-cost-preview__label { display: none; }
  .is-playing .selection-cost-chip { min-height: 27px; padding: 2px 5px; font-size: .52rem; }
  .is-playing .selection-cost-chip strong, .is-playing .selection-cost-chip small { font-size: .48rem; }
  .is-playing .selection-cost-preview__shortage { font-size: .5rem; white-space: nowrap; }
  .is-playing .selection-bar__actions { align-items: center; gap: 4px; }
  .action-confirm-dialog { max-height: calc(100dvh - 16px); overflow: auto; }
  .action-confirm-dialog__surface { gap: 9px; padding: 14px; }
}

/* Bloque UX 04: escala tipografica por funcion, no por espacio sobrante. */
.eyebrow { font-size: var(--type-label); letter-spacing: .08em; }
.prototype-stamp { font-size: var(--type-meta); letter-spacing: .04em; }
.panel-copy { font-size: var(--type-body-dense); }
label, .button { font-size: var(--type-action); font-weight: 700; }
.button--tiny, .status { font-size: var(--type-label); font-weight: 700; }
.role-chip, .turn-chip, .connection-count,
.selection-steps, .selection-cost-preview__label,
.selection-cost-chip, .selection-cost-chip strong,
.selection-cost-preview__shortage { font-size: var(--type-label); font-weight: 700; }
.selection-cost-chip small { font-size: var(--type-meta); }
.lane-heading, .lane-caption, .player-label, .badge, .zone-label,
.slot-coordinate, .slot-direct-label { font-size: var(--type-meta); }
.lane-heading, .player-label, .badge, .zone-label { letter-spacing: .04em; }
.life-readout strong, .field-card__stats, .pile-card__count,
.potency-chip__count, .game-over-score__life { font-variant-numeric: tabular-nums; }
.life-readout span { font-size: var(--type-label); }
.field-card--minimal .field-card__top,
.field-card--minimal .field-card__stats { font-size: var(--type-meta); font-weight: 800; }
.hand-card__select .field-card__name { font-size: var(--type-label); }
.hand-card__select .field-card__lineage,
.hand-card__select .field-card__ability,
.hand-card__select .field-card__inheritance { display: none; }
.hand-card__select .field-card__stats { font-size: var(--type-meta); }
.hand-context__eyebrow { font-size: var(--type-meta); letter-spacing: .04em; }
.hand-context__title { font-size: var(--type-body-dense); }
.hand-context__hint { font-size: var(--type-label); }
.pile-card__title, .pile-card__empty,
.potency-chip__label, .power-card-token__name,
.power-card-token__state { font-size: var(--type-meta); }
.power-detail-dialog__summary, .evolution-assistant-stage__empty,
.reaction-order__note { font-size: var(--type-body-dense); }
.guard-chip { font-size: var(--type-meta); }
.card-inspector__source, .card-inspector__stat span,
.card-inspector__section h3, .card-inspector__keyword span,
.card-inspector__origin span, .card-inspector__stack-level,
.card-inspector__stack-copy span, .card-inspector__pin,
.card-detail__fact-label { font-size: var(--type-label); }
.card-inspector__summary-line, .card-inspector__keyword strong,
.card-inspector__origin strong, .card-inspector__stack-copy strong,
.card-detail__fact-value { font-size: var(--type-action); }
.card-inspector__section p { max-width: 68ch; font-size: var(--type-body-dense); line-height: 1.5; }
.card-inspector__shortcut { font-size: var(--type-meta); }
.reaction-dialog__status, .reaction-matchup__versus,
.reaction-combatant__role, .reaction-combatant__position,
.reaction-safeguard__lineage, .game-over-score__separator,
.game-over-score__name { font-size: var(--type-meta); }
.reaction-dialog__copy, .reaction-combatant__name,
.reaction-safeguard__name { font-size: var(--type-body-dense); }
.reaction-combatant__stats span,
.reaction-dialog__actions .button { font-size: var(--type-label); }

@media (min-width: 901px) {
  .is-playing .player-label, .is-playing .badge,
  .is-playing .zone-label, .is-playing .guard-chip,
  .is-playing .pile-card__title, .is-playing .potency-chip__label,
  .is-playing .power-card-token__name { font-size: var(--type-meta); }
  .is-playing .life-readout span { font-size: var(--type-label); }
}

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 600px) {
  .is-playing .game-panel { grid-template-rows: 40px 46px minmax(0, 1fr) 132px; }
  .is-playing .game-toolbar { height: 40px; }
  .is-playing .role-chip, .is-playing .turn-chip,
  .is-playing .game-actions .button { min-height: 30px; font-size: var(--type-meta); }
  .is-playing .selection-bar { height: 46px; font-size: var(--type-label); }
  .is-playing .selection-bar .button { min-height: 28px; font-size: var(--type-meta); }
  .is-playing .selection-bar__main > #selection-status { font-size: var(--type-label); }
  .is-playing .selection-cost-chip,
  .is-playing .selection-cost-chip strong,
  .is-playing .selection-cost-chip small,
  .is-playing .selection-cost-preview__shortage { font-size: var(--type-meta); }

  .is-playing .field-card--minimal .field-card__top,
  .is-playing .field-card--minimal .field-card__stats { font-size: var(--type-meta); }
  .is-playing .field-card--minimal .field-card__top { padding: 3px; }
  .is-playing .field-card--minimal .field-card__stats { right: 3px; bottom: 3px; left: 3px; gap: 1px; }
  .is-playing .field-card--minimal .field-card__stats span { min-width: 0; padding: 1px 0; }
  .is-playing .badge { min-width: 11px; min-height: 11px; padding: 0; overflow: hidden; color: transparent; font-size: 0; }
  .is-playing .badge::before { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); content: ""; }
  .is-playing .badge--lost::before { background: var(--danger); }
  .is-playing .life-readout strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
  .is-playing .life-readout span { display: none; }
  .is-playing .champion-card strong { font-size: var(--type-meta); }
  .is-playing .guard-chip { min-height: 14px; overflow: hidden; color: transparent; font-size: 0; }
  .is-playing .guard-chip::before { width: 8px; height: 8px; border: 1px solid var(--mint); border-radius: 50%; background: rgba(152, 237, 187, .18); content: ""; }
  .is-playing .guard-chip.is-broken::before { border-color: var(--danger); background: transparent; opacity: .42; }
  .is-playing .pile-card__title, .is-playing .pile-card__empty,
  .is-playing .potency-chip__label { display: none; }
  .is-playing .pile-card__count { font-size: var(--type-label); }
  .is-playing .potency-chip { min-height: 18px; }
  .is-playing .potency-chip__count { font-size: var(--type-meta); }

  .is-playing .hand-panel { height: 132px; grid-template-rows: 20px minmax(0, 1fr); }
  .is-playing .hand-heading { height: 20px; }
  .is-playing .hand-heading h2 { font-size: var(--type-label); }
  .is-playing .hand-layout { grid-template-columns: minmax(0, 1fr) clamp(270px, 39vw, 340px); }
  .is-playing .hand-context__eyebrow { font-size: var(--type-meta); }
  .is-playing .hand-context__title { font-size: var(--type-label); }
  .is-playing .hand-context__hint { display: none; }
  .is-playing .hand-context .button--tiny,
  .is-playing #end-turn-button { min-height: 28px; font-size: var(--type-meta); }
  .is-playing #end-turn-button { min-width: 82px; }

  .evolution-assistant-dialog__header p,
  .evolution-assistant-card__inheritance,
  .evolution-assistant-summary__facts span,
  .reaction-dialog__status, .reaction-combatant__role,
  .reaction-combatant__position, .reaction-safeguard__lineage,
  .reaction-combatant__stats span { font-size: var(--type-meta); }
  .evolution-assistant-stage__level, .evolution-assistant-stage__skip,
  .evolution-assistant-card__name, .evolution-assistant-summary__title,
  .evolution-assistant-summary__chain, .reaction-dialog__copy,
  .reaction-combatant__name, .reaction-safeguard__name,
  .reaction-dialog__actions .button { font-size: var(--type-label); }

  .is-playing .card-inspector__source,
  .is-playing .card-inspector__summary-line,
  .is-playing .card-inspector__stat span,
  .is-playing .card-inspector__section h3,
  .is-playing .card-inspector__keyword span,
  .is-playing .card-inspector__origin span { font-size: var(--type-meta); }
  .is-playing .card-inspector__stat strong,
  .is-playing .card-inspector__keyword strong,
  .is-playing .card-inspector__origin strong { font-size: var(--type-label); }
  .is-playing .card-inspector__section p { font-size: var(--type-action); line-height: 1.45; }

  .is-playing.has-card-inspector .game-panel { grid-template-rows: 40px 46px minmax(0, 1fr) var(--card-inspector-mobile-height, min(62dvh, 330px)); }
  .is-playing.has-card-inspector.is-card-inspector-compact { --card-inspector-mobile-height: 48px; }
  .is-playing.has-active-selection .game-panel { grid-template-rows: 40px 46px minmax(0, 1fr) 132px; }
}

@media (forced-colors: active) {
  .board-slot.is-target { outline: 3px solid Highlight; outline-offset: -3px; }
  .board-slot.is-unavailable { outline: 1px dashed GrayText; outline-offset: -2px; }
  .selection-step[data-state="active"] { text-decoration: underline; text-underline-offset: 3px; }
}

@keyframes evolution-sheet-in { from { transform: translateY(24px); opacity: .82; } to { transform: translateY(0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .card-preload__spinner { animation: none; }
  .card-preload__progress > span { transition: none; }
  .hand-card, .hand-card__select.field-card, .hand-card-preview, .button { transition: none; }
  .evolution-assistant-dialog { animation: none; }
  .board-slot.is-target { animation: none; }
  .battle-feedback { clip-path: none; transition: opacity .12s ease-out; }
  .card-play-feedback { transition: opacity .12s ease-out; transform: translate(-50%, -50%); }
  .action-chain-feedback { clip-path: none; transition: opacity .12s ease-out; transform: translate(-50%, 0); }
  .action-chain-feedback__item { animation: none; opacity: 1; transform: none; }
  .elemental-projectile__aura,
  .perfora-vfx__aura,
  .perfora-vfx__crest { animation: none; }
  .battle-delta,
  .field-card-stack.is-summoning,
  .field-card-stack.is-evolving,
  .field-card.is-impact,
  .field-card-stack.is-state-changed,
  .field-card-stack.is-orientation-changing,
  .lane-side--left.is-life-hit .life-readout,
  .guard-chip.is-breaking,
  .potency-chip.is-power-spend,
  .potency-chip.is-power-add,
  .potency-chip.is-power-refresh,
  .pile-card.is-card-drawing,
  .pile-card.is-card-discarding,
  .hand-card.is-card-arriving { animation: state-flash .18s ease-out both; }
  .lane-side--left.is-life-hit .life-readout strong { animation: none; color: #ff6f61; text-shadow: 0 0 7px rgba(255, 92, 76, .72); }
  .card-motion-ghost--incoming::after { animation: none; opacity: 0; }
  .card-motion-ghost { display: none !important; }
}

/* Bloque UX 06: mano mobile solapada con elevación de carta seleccionada. */
@media (orientation: landscape) and (max-width: 1100px) and (max-height: 700px) {
  :root {
    --card-width: 48px;
    --card-height: 66.4px;
    --slot-width: 66.4px;
    --slot-height: 66.4px;
  }

  .is-playing .game-panel { grid-template-rows: 48px 52px minmax(0, 1fr) 188px; }
  .is-playing .game-toolbar { height: 48px; padding: 5px 8px; gap: 8px; }
  .is-playing .game-toolbar__controls { gap: 6px; }
  .is-playing .toolbar-meta { gap: 5px; }
  .is-playing .role-chip,
  .is-playing .turn-chip,
  .is-playing .game-actions .button {
    min-height: 36px;
    padding: 6px 9px;
    font-size: var(--type-label);
  }
  .is-playing .connection-count { display: none; }
  .is-playing .game-actions { gap: 5px; }
  .is-playing #fullscreen-button { min-width: 36px; padding: 6px 8px; }
  .is-playing #fullscreen-button .fullscreen-button__label { display: none; }

  .is-playing .selection-bar {
    height: 52px;
    min-height: 52px;
    padding: 5px 10px;
    gap: 8px;
  }
  .is-playing .selection-bar__main {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    overflow: hidden;
  }
  .is-playing .selection-steps { display: none; }
  .is-playing .selection-bar__main > #selection-status {
    min-width: 0;
    max-width: none;
    overflow: hidden;
    font-size: var(--type-label);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .is-playing .selection-cost-preview {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    max-width: 43%;
    overflow: hidden;
  }
  .is-playing .selection-cost-preview__label { display: none; }
  .is-playing .selection-cost-chip {
    min-height: 34px;
    padding: 4px 7px;
    font-size: var(--type-meta);
  }
  .is-playing .selection-cost-chip strong,
  .is-playing .selection-cost-chip small,
  .is-playing .selection-cost-preview__shortage { font-size: var(--type-meta); }
  .is-playing .selection-bar__actions { gap: 5px; }
  .is-playing .selection-bar .button {
    min-height: 40px;
    padding: 6px 10px;
    font-size: var(--type-label);
  }

  .is-playing .board-scroll { min-height: 0; overflow: hidden; }
  .is-playing .playmat {
    grid-template-columns: 116px minmax(0, 1fr) 188px;
    grid-template-rows: minmax(0, 1fr) 44px 44px minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .is-playing .lane-side { min-width: 0; padding: 7px; overflow: hidden; }
  .is-playing .lane-side--right { gap: 5px; }
  .is-playing .lane-field { min-width: 0; padding: 5px 6px; overflow: visible; }
  .is-playing .lane-heading { display: none; }
  .is-playing .board-row { gap: 5px; }
  .is-playing .field-card--minimal {
    width: var(--card-width);
    height: var(--card-height);
    margin: 0;
    padding: 3px;
  }
  .is-playing .field-card--minimal .field-card__top,
  .is-playing .field-card--minimal .field-card__stats { font-size: var(--type-meta); }
  .is-playing .field-card--minimal .field-card__stats { right: 3px; bottom: 3px; left: 3px; gap: 1px; }
  .is-playing .field-card--minimal .field-card__stats span { padding: 1px 0; }

  .is-playing .player-identity { gap: 5px; }
  .is-playing .player-label { display: block; margin-bottom: 2px; font-size: var(--type-meta); }
  .is-playing .player-identity h3 { font-size: var(--type-heading); }
  .is-playing .badge {
    display: grid;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    place-items: center;
    overflow: visible;
    color: transparent;
    font-size: 0;
  }
  .is-playing .badge::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
    content: "";
  }
  .is-playing .badge--lost::before { background: var(--danger); }
  .is-playing .life-readout { gap: 3px; margin-top: 7px; }
  .is-playing .life-readout strong { font-size: 1.6rem; }
  .is-playing .life-readout span { display: inline; font-size: var(--type-label); }
  .is-playing .lane-caption,
  .is-playing .lane-side--left .zone-block:has(.champion-slot) { display: none; }
  .is-playing .zone-block { margin-top: 7px; }
  .is-playing .zone-block > .zone-label { display: block; font-size: var(--type-meta); }
  .is-playing .guard-strip { gap: 3px; margin-top: 4px; }
  .is-playing .guard-chip { min-height: 22px; font-size: var(--type-meta); }

  .is-playing .lane-side--right > .zone-label { display: block; font-size: var(--type-meta); }
  .is-playing .pile-grid { gap: 4px; }
  .is-playing .pile-zone { min-height: 38px; }
  .is-playing .pile-card { min-height: 34px; padding: 3px; }
  .is-playing .pile-card__title { font-size: var(--type-meta); }
  .is-playing .pile-card__count { font-size: var(--type-action); }
  .is-playing .pile-card__empty { display: none; }
  .is-playing .potency-zone { margin: 0; padding: 5px; }
  .is-playing .potency-zone > .zone-label { display: block; font-size: var(--type-meta); }
  .is-playing .potency-grid { gap: 3px; margin-top: 4px; }
  .is-playing .potency-chip { min-height: 24px; gap: 1px; }
  .is-playing .potency-chip__label { font-size: var(--type-meta); }
  .is-playing .potency-chip__count { font-size: var(--type-meta); }
  .is-playing .power-card-list { display: none; }

  .is-playing .hand-panel {
    height: 188px;
    min-height: 188px;
    grid-template-rows: 28px minmax(0, 1fr);
    padding: 7px 10px 8px;
    overflow: visible;
  }
  .is-playing .hand-heading { height: 28px; min-height: 28px; margin: 0; align-items: center; }
  .is-playing .hand-heading .zone-label { display: block; font-size: var(--type-meta); }
  .is-playing .hand-heading h2 { margin: 1px 0 0; font-size: var(--type-body-dense); }
  .is-playing .hand-heading .panel-copy { display: block; overflow: hidden; max-width: 38%; font-size: var(--type-label); text-overflow: ellipsis; white-space: nowrap; }
  .is-playing .hand-layout {
    grid-template-columns: minmax(0, 1fr) clamp(260px, 32vw, 290px);
    grid-template-rows: minmax(0, 1fr);
    gap: 10px;
  }
  .is-playing .hand-tray {
    --hand-card-width: clamp(76px, 9.6vw, 84px);
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    justify-content: flex-start;
    gap: 0;
    padding: 0 6px 2px;
    overflow: hidden;
  }
  .is-playing .hand-tray:not(.has-many) { justify-content: center; }
  .is-playing .hand-card {
    flex: 0 0 var(--hand-card-width);
    width: var(--hand-card-width);
    height: calc(var(--hand-card-width) * 1.3841146);
    min-width: 0;
    min-height: 0;
    margin: 0;
    scroll-snap-align: none;
    touch-action: manipulation;
  }
  .is-playing .hand-card + .hand-card { margin-left: calc(var(--hand-card-width) * -.56); }
  .is-playing .hand-card__select.field-card { padding: 5px; border-radius: 9px; aspect-ratio: 3072 / 4252; }
  .is-playing .hand-card__select .field-card__top { font-size: var(--type-meta); }
  .is-playing .hand-card__select .field-card__name { font-size: var(--type-label); }
  .is-playing .hand-card__select .field-card__stats { font-size: var(--type-meta); }
  .is-playing .hand-card__select .field-card__stats span { padding: 2px 1px; }
  .is-playing .hand-card:hover,
  .is-playing .hand-card:focus-visible,
  .is-playing .hand-card:focus-within,
  .is-playing .hand-card.is-selected { z-index: 55; }
  .is-playing .hand-card-preview { z-index: 90; }
  .is-playing .hand-card-preview.is-active {
    transform: translateY(-25px) scale(1.28);
    transform-origin: center bottom;
  }
  .is-playing .hand-card-preview.is-active.is-selected:not(.is-hovered),
  .is-playing .hand-card-preview.is-active.is-selected.is-hovered { transform: translateY(-25px) scale(1.28); }
  .is-playing .hand-context {
    height: 100%;
    min-height: 0;
    padding: 9px;
    gap: 7px;
    overflow: hidden;
  }
  .is-playing .hand-context__eyebrow { font-size: var(--type-meta); }
  .is-playing .hand-context__title { font-size: var(--type-body-dense); }
  .is-playing .hand-context__hint { font-size: var(--type-label); }
  .is-playing .hand-context__actions { gap: 5px; }
  .is-playing .hand-context .button--tiny { min-height: 40px; padding: 6px 8px; font-size: var(--type-label); }
  .is-playing .hand-actions { top: 7px; right: 10px; }
  .is-playing #end-turn-button { min-width: 92px; min-height: 40px; padding: 6px 9px; font-size: var(--type-label); }

  .is-playing.has-card-inspector .game-panel { grid-template-rows: 48px 52px minmax(0, 1fr) var(--card-inspector-mobile-height, min(62dvh, 330px)); }
  .is-playing.has-active-selection .game-panel { grid-template-rows: 48px 52px minmax(0, 1fr) 188px; }
}

/* Social account and preparation surfaces. They inherit the playtest palette while
   keeping the combat board focused on the actual match. */
.social-app-pending .setup-panel,
.social-app-pending .game-panel,
.social-authenticated .setup-panel { display: none; }
.social-panel[hidden], .account-panel[hidden] { display: none !important; }
.account-panel, .social-panel { margin-bottom: 18px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, rgba(18, 35, 34, .96), rgba(11, 25, 28, .94)); box-shadow: 0 24px 70px rgba(0, 0, 0, .22); }
.account-panel__intro, .social-panel__header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.account-panel__intro h2, .social-panel__header h2 { margin-bottom: 6px; }
.account-panel__intro .panel-copy, .social-panel__header .panel-copy { max-width: 640px; }
.account-panel__signal { display: inline-flex; gap: 4px; padding-top: 8px; }
.account-panel__signal span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); opacity: .28; }
.account-panel__signal span:nth-child(2) { opacity: .58; }
.account-panel__signal span:nth-child(3) { opacity: 1; }
.auth-view { margin-top: 22px; }
.auth-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.auth-form .button { min-height: 43px; }
.auth-view__footer { display: flex; min-height: 31px; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.form-status { min-height: 1.2em; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.form-status--error { color: #ffd0ca; }
.form-status--success { color: #baf4ce; }
.social-panel__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.social-panel__actions > a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; white-space: nowrap; }
.social-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(260px, .75fr); gap: 13px; margin-top: 22px; }
.social-card { min-width: 0; padding: 17px; border: 1px solid rgba(170, 207, 193, .16); border-radius: 14px; background: rgba(2, 10, 11, .34); }
.social-panel .button--tiny, .account-panel .button--tiny { min-height: 36px; padding: 8px 11px; font-size: .75rem; }
.social-card--friends { min-height: 330px; }
.social-card__heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.social-card__heading h3 { margin-top: 4px; }
.social-card__count, .social-card__glyph { display: inline-grid; min-width: 27px; min-height: 27px; place-items: center; border: 1px solid rgba(152, 237, 187, .28); border-radius: 50%; color: var(--mint); font-size: .72rem; font-weight: 900; }
.social-card__glyph { border-color: rgba(240, 193, 127, .32); color: var(--amber); }
.inline-form { display: flex; gap: 7px; align-items: center; }
.inline-form input { min-width: 0; min-height: 38px; padding-block: 8px; }
.social-result { min-height: 42px; margin: 10px 0 5px; }
.search-result-card { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 10px; border: 1px solid rgba(152, 237, 187, .24); border-radius: 9px; background: rgba(45, 116, 80, .1); color: var(--soft); font-size: .84rem; }
.social-list { display: grid; gap: 7px; }
.social-list__label { margin: 14px 0 4px; color: var(--amber); font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.social-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(170, 207, 193, .1); }
.social-row__identity { display: grid; min-width: 0; gap: 3px; }
.social-row__identity strong { overflow: hidden; color: var(--soft); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.social-row__identity small { overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.social-row__meta { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 6px; }
.presence-dot { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .76rem; font-weight: 750; white-space: nowrap; }
.presence-dot::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; opacity: .5; }
.presence-dot--available { color: var(--mint); }
.presence-dot--preparing { color: var(--amber); }
.presence-dot--combat { color: var(--violet); }
.presence-dot--offline { color: var(--muted); }
.social-empty { padding: 18px 4px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.code-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.created-code { display: grid; justify-items: start; gap: 4px; margin-top: 15px; padding: 14px; border: 1px solid rgba(240, 193, 127, .35); border-radius: 12px; background: rgba(240, 193, 127, .07); }
.created-code strong { color: var(--amber); font-size: 1.45rem; letter-spacing: .18em; }
.created-code small { color: var(--muted); font-size: .78rem; }
.social-card--code .form-status { display: block; margin-top: 11px; }
.lobby-tabs { display: flex; gap: 5px; margin-top: 22px; padding: 4px; border: 1px solid rgba(170, 207, 193, .14); border-radius: 11px; background: rgba(2, 10, 11, .36); }
.lobby-tab { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: .76rem; font-weight: 850; }
.lobby-tab:hover { color: var(--soft); }
.lobby-tab:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.lobby-tab.is-active { border-color: rgba(152, 237, 187, .28); background: rgba(45, 116, 80, .2); color: var(--mint); }
.lobby-tab__count { color: var(--amber); font-size: .7rem; font-variant-numeric: tabular-nums; }
.custom-decks-panel[hidden] { display: none; }
.custom-decks-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-top: 22px; }
.custom-decks-header h3, .custom-deck-editor__heading h4, .custom-deck-list-panel h4, .custom-deck-section-heading h5, .custom-deck-picker__heading h6 { margin: 0; }
.custom-decks-header__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.custom-decks-layout { display: grid; grid-template-columns: minmax(190px, .33fr) minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.custom-deck-list-panel, .custom-deck-editor { min-width: 0; padding: 17px; border: 1px solid rgba(170, 207, 193, .16); border-radius: 14px; background: rgba(2, 10, 11, .34); }
.custom-deck-list-panel { align-self: start; }
.custom-deck-list { display: grid; gap: 7px; max-height: 700px; overflow-y: auto; padding-right: 2px; scrollbar-color: #31574c transparent; }
.custom-deck-list-item { display: grid; width: 100%; gap: 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(20, 39, 37, .62); color: var(--ink); cursor: pointer; text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.custom-deck-list-item:hover, .custom-deck-list-item.is-active { border-color: rgba(154, 239, 190, .58); background: rgba(32, 66, 57, .68); transform: translateY(-1px); }
.custom-deck-list-item:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.custom-deck-list-item strong { overflow: hidden; color: var(--soft); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.custom-deck-list-item small { color: var(--muted); font-size: .7rem; }
.custom-deck-editor__heading, .custom-deck-section-heading, .custom-deck-picker__heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.custom-deck-editor__heading { margin-bottom: 16px; }
.custom-deck-editor__heading h4 { margin-top: 4px; font-size: 1.18rem; }
.custom-deck-form { display: grid; gap: 14px; }
.custom-deck-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .52fr); gap: 12px; align-items: end; }
.custom-deck-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; min-height: 68px; padding: 10px 12px; border: 1px solid rgba(154, 239, 190, .22); border-radius: 10px; background: rgba(23, 59, 46, .18); }
.custom-deck-rules div { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: baseline; }
.custom-deck-rules strong { color: var(--mint); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.custom-deck-rules span { color: var(--muted); font-size: .7rem; }
.custom-deck-rules small { grid-column: 1 / -1; color: var(--soft); font-size: .7rem; }
.custom-deck-champion, .custom-deck-builder { display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(170, 207, 193, .15); border-radius: 11px; background: rgba(8, 19, 18, .3); }
.custom-deck-champion { border-color: rgba(176, 154, 255, .3); background: linear-gradient(135deg, rgba(117, 92, 255, .08), rgba(8, 19, 18, .28)); }
.custom-deck-section-heading { align-items: center; }
.custom-deck-section-heading h5 { margin-top: 4px; color: var(--soft); font-size: .98rem; }
.custom-deck-validation { display: inline-flex; min-height: 26px; align-items: center; padding: 4px 8px; border: 1px solid rgba(255, 138, 128, .28); border-radius: 999px; color: var(--danger); font-size: .7rem; font-weight: 850; white-space: nowrap; }
.custom-deck-validation--ready { border-color: rgba(154, 239, 190, .34); color: var(--mint); }
.custom-deck-champion label { max-width: 560px; }
.custom-deck-builder-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(230px, .92fr); gap: 12px; }
.custom-deck-picker, .custom-deck-selection { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8, 19, 18, .34); }
.custom-deck-picker__heading { align-items: center; margin-bottom: 10px; }
.custom-deck-picker__heading h6 { color: var(--soft); font-size: .78rem; }
.custom-deck-picker__heading .search-field { width: min(220px, 58%); }
.custom-deck-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 8px; }
.custom-deck-filters label { gap: 4px; color: var(--muted); font-size: .7rem; }
.custom-deck-filters select { min-height: 40px; padding: 8px 9px; font-size: .72rem; }
.custom-deck-filter-summary { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 8px; }
.custom-deck-filter-summary span { color: var(--muted); font-size: .7rem; }
.custom-deck-card-library, .custom-deck-selected-cards { display: grid; max-height: 410px; gap: 7px; overflow-y: auto; padding-right: 2px; scrollbar-color: #31574c transparent; }
.custom-deck-card-item, .custom-deck-selected-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(18, 36, 34, .62); }
.custom-deck-card-item strong, .custom-deck-selected-item strong { display: block; overflow: hidden; color: var(--soft); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.custom-deck-card-item small, .custom-deck-selected-item small { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; }
.custom-deck-card-actions, .custom-deck-selected-actions { display: flex; align-items: center; gap: 5px; }
.custom-deck-card-actions .button, .custom-deck-selected-actions .button { min-height: 34px; padding: 7px 8px; font-size: .7rem; }
.custom-deck-card-quantity { min-width: 25px; color: var(--mint); font-size: .72rem; font-variant-numeric: tabular-nums; text-align: center; }
.custom-deck-selected-actions input { width: 54px; min-height: 36px; padding: 7px 6px; }
.custom-deck-selected-actions .button { color: var(--danger); }
.custom-deck-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 2px; }
.custom-deck-form-actions .form-status { flex: 1 1 180px; }
.social-prep-panel { padding-bottom: 26px; }
.prep-layout { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: 14px; margin-top: 22px; }
.prep-deck-card, .prep-rivals { padding: 18px; border: 1px solid rgba(170, 207, 193, .16); border-radius: 14px; background: rgba(2, 10, 11, .34); }
.prep-deck-card { display: grid; align-content: start; gap: 11px; }
.prep-deck-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prep-deck-card .button { width: 100%; margin-top: 6px; }
.prep-deck-status .button { width: auto; margin-top: 0; }
.prep-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.prep-player { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: center; padding: 12px; border: 1px solid rgba(170, 207, 193, .14); border-radius: 11px; background: rgba(15, 27, 27, .7); }
.prep-player > div { display: grid; min-width: 0; gap: 3px; }
.prep-player strong { overflow: hidden; color: var(--soft); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.prep-player span:not(.prep-player__marker) { overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.prep-player__marker { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(240, 193, 127, .25); border-radius: 50%; color: var(--amber); font-weight: 900; }
.prep-player__marker.is-ready { border-color: rgba(152, 237, 187, .45); background: rgba(45, 116, 80, .24); color: var(--mint); }
.is-emphasis { color: var(--amber); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-card--friends { grid-row: span 2; }
  .social-card--code { grid-column: span 2; }
  .custom-decks-layout { grid-template-columns: 1fr; }
  .custom-deck-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 220px; }
}

@media (max-width: 620px) {
  .account-panel, .social-panel { padding: 17px; }
  .auth-form, .social-grid, .prep-layout { grid-template-columns: 1fr; }
  .social-card--friends, .social-card--code { grid-row: auto; grid-column: auto; }
  .account-panel__intro, .social-panel__header { flex-direction: column; }
  .social-panel__actions { width: 100%; justify-content: space-between; }
  .social-row { align-items: start; }
  .social-row__meta { flex-wrap: wrap; }
  .prep-players { grid-template-columns: 1fr; }
  .lobby-tabs { margin-top: 18px; }
  .lobby-tab { flex: 1; justify-content: center; }
  .custom-decks-header { flex-direction: column; }
  .custom-decks-header__actions { width: 100%; justify-content: space-between; }
  .custom-deck-meta, .custom-deck-builder-grid { grid-template-columns: 1fr; }
  .custom-deck-list { grid-template-columns: 1fr; max-height: 260px; }
  .custom-deck-card-library, .custom-deck-selected-cards { max-height: 340px; }
  .custom-deck-picker__heading { align-items: flex-start; flex-direction: column; }
  .custom-deck-picker__heading .search-field { width: 100%; }
  .custom-deck-filters { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-width: 760px) and (max-height: 700px) {
  :root {
    --card-width: 37.5px;
    --card-height: 52px;
    --slot-width: 52px;
    --slot-height: 52px;
  }
  .is-playing .playmat { grid-template-columns: 92px minmax(0, 1fr) 136px; }
  .is-playing .board-row { gap: 4px; }
  .is-playing .lane-side { padding: 6px; }
  .is-playing .lane-side--right { gap: 4px; }
  .is-playing .pile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .is-playing .potency-zone { padding: 4px; }
  .is-playing .potency-grid { gap: 2px; }
  .is-playing .field-card--minimal .field-card__top,
  .is-playing .field-card--minimal .field-card__stats { font-size: .62rem; }
  .is-playing .hand-layout { grid-template-columns: minmax(0, 1fr) 212px; }
  .is-playing .hand-tray { --hand-card-width: 54px; padding-inline: 4px; }
  .is-playing .hand-card + .hand-card { margin-left: -30px; }
  .is-playing .hand-context { padding: 7px; }
  .is-playing .hand-context__title { font-size: var(--type-label); }
}

/* Champion and non-creature card UX */
.field-card__action-summary,
.field-card__action-rule {
  display: -webkit-box;
  overflow: hidden;
  color: #bfe8ff;
  font-size: .48rem;
  font-weight: 800;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.field-card--minimal .field-card__action-summary {
  min-height: 24px;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid rgba(126, 199, 255, .28);
  border-radius: 5px;
  background: rgba(35, 91, 126, .16);
}
.field-card__bottom--action { max-height: 32%; grid-template-rows: minmax(0, 1fr) auto; }
.field-card__bottom--action .field-card__action-rule { color: var(--amber); }

.champion-slot { min-height: 64px; }
.champion-card {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px;
}
.champion-card__portrait {
  display: grid;
  width: 46px;
  height: 52px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(220, 207, 255, .35);
  border-radius: 7px;
  background: rgba(2, 8, 8, .32);
}
.champion-card__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.champion-card__copy { display: grid; min-width: 0; gap: 3px; }
.champion-card .champion-card__name { overflow: hidden; margin: 0; color: #fff; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.champion-card__location { overflow: hidden; color: var(--soft); font-size: .56rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.champion-card__ability-count { color: #cdbfff; font-size: .52rem; font-weight: 900; }
.champion-card .champion-card__state {
  align-self: start;
  margin: 0;
  padding: 3px 5px;
  border: 1px solid rgba(240, 193, 127, .3);
  border-radius: 999px;
  background: rgba(2, 8, 8, .42);
  font-size: .48rem;
  white-space: nowrap;
}
.champion-card:hover,
.champion-card:focus-visible { border-color: #c8adff; outline: 2px solid rgba(200, 173, 255, .28); outline-offset: 2px; }

.champion-action-dialog { width: min(94vw, 920px); max-height: min(90vh, 800px); overflow: auto; }
.champion-action-dialog__surface { gap: 14px; }
.champion-action-abilities { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.champion-action-overview {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(176, 154, 255, .35);
  border-radius: 12px;
  background: linear-gradient(115deg, rgba(117, 92, 255, .17), rgba(2, 8, 8, .18));
}
.champion-action-overview__portrait { display: grid; width: 104px; height: 90px; overflow: hidden; place-items: center; border-radius: 9px; background: rgba(2, 8, 8, .4); }
.champion-action-overview__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.champion-action-overview__copy { display: grid; min-width: 0; align-content: center; justify-items: start; gap: 5px; }
.champion-action-overview__eyebrow { color: #cdbfff; font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.champion-action-overview__name { color: #fff; font-size: 1rem; }
.champion-action-overview__meta { color: var(--soft); font-size: .72rem; line-height: 1.35; }
.champion-action-overview__copy .button { margin-top: 2px; }
.champion-ability-item { grid-template-rows: auto minmax(3em, auto) auto auto; align-content: start; }
.champion-ability-item--invoke { grid-column: 1 / -1; grid-template-rows: auto auto; }
.champion-ability-action { width: 100%; justify-content: center; text-align: center; }
.hand-context__hint.is-unavailable { color: #e9b1aa; }

@media (min-width: 1101px) and (max-height: 800px) {
  .is-playing .champion-slot,
  .is-playing .champion-card { min-height: 54px; }
  .is-playing .champion-card { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 4px; }
  .is-playing .champion-card__portrait { width: 38px; height: 44px; }
  .is-playing .champion-card .champion-card__name { margin: 0; font-size: .58rem; }
  .is-playing .champion-card__location { font-size: .48rem; }
  .is-playing .champion-card__ability-count { font-size: .46rem; }
}

@media (max-width: 680px) {
  .champion-action-dialog__surface { padding: 13px; }
  .champion-action-abilities { grid-template-columns: 1fr; }
  .champion-action-overview { grid-template-columns: 76px minmax(0, 1fr); padding: 9px; }
  .champion-action-overview__portrait { width: 76px; height: 76px; }
  .champion-ability-item--invoke { grid-column: 1; }
}

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 700px) {
  .is-playing .champion-card {
    display: grid;
    width: 42px;
    height: 56px;
    min-height: 56px;
    grid-template-columns: 1fr;
    padding: 2px;
  }
  .is-playing .champion-card__portrait { width: 100%; height: 100%; border: 0; border-radius: 3px; }
  .is-playing .champion-card__copy { display: none; }
  .is-playing .champion-card .champion-card__state { position: absolute; right: 2px; bottom: 2px; max-width: calc(100% - 4px); padding: 2px 3px; overflow: hidden; font-size: .34rem; text-overflow: ellipsis; }
  .champion-action-dialog { width: min(92vw, 780px); max-height: 94dvh; }
  .champion-action-dialog__surface { padding: 10px; }
  .champion-action-overview { grid-template-columns: 70px minmax(0, 1fr); padding: 8px; }
  .champion-action-overview__portrait { width: 70px; height: 62px; }
  .champion-ability-item { padding: 9px; }
}

@media (orientation: landscape) and (max-width: 760px) and (max-height: 700px) {
  .is-playing .champion-card { width: 32px; height: 44.2917px; min-height: 44.2917px; }
  .is-playing .field-card--action .field-card__action-summary { min-height: 12px; padding: 1px 2px; font-size: .34rem; -webkit-line-clamp: 1; }
}

/* Escritorio: mano lateral y tablero adaptable a ventanas de poca altura. */

@media (min-width: 1101px) {
  .is-playing .hand-heading {
    min-height: 18px;
    margin-bottom: 4px;
    align-items: center;
  }
  .is-playing .hand-heading h2 { display: none; }
  .is-playing .hand-layout {
    height: 100%;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 29vw, 430px);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
  }
  .is-playing .hand-tray {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    align-items: flex-end;
    padding-top: 0;
  }
  .is-playing .hand-context {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: start;
    padding: 12px 12px 58px;
  }
  .is-playing .hand-context__copy { grid-column: 1; grid-row: 1; align-self: start; padding-top: 4px; }
  .is-playing .hand-context__actions {
    position: absolute;
    grid-column: 1;
    grid-row: 1;
    right: 116px;
    bottom: 2px;
    left: 12px;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .is-playing .hand-context__actions .button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px;
    font-size: .62rem;
    line-height: 1.05;
    white-space: normal;
  }
}

@media (min-width: 1101px) and (max-height: 800px) {
  .is-playing .game-panel { grid-template-rows: auto var(--selection-rail-height) minmax(0, 1fr) 200px; }
  .is-playing .lane-side { padding: 4px 6px; }
  .is-playing .lane-side--right { gap: 3px; }
  .is-playing .player-label { margin-bottom: 1px; font-size: .5rem; }
  .is-playing .player-identity h3 { font-size: .9rem; }
  .is-playing .badge { padding: 3px 5px; font-size: .44rem; }
  .is-playing .life-readout { margin-top: 3px; }
  .is-playing .life-readout strong { font-size: 1.45rem; }
  .is-playing .zone-block { margin-top: 2px; }
  .is-playing .champion-slot,
  .is-playing .champion-card { min-height: 24px; margin-top: 2px; }
  .is-playing .champion-card { padding: 3px; }
  .is-playing .champion-card strong { margin-top: 1px; font-size: .48rem; }
  .is-playing .guard-strip { margin-top: 2px; }
  .is-playing .guard-chip { min-height: 18px; }
  .is-playing .pile-grid { gap: 3px; }
  .is-playing .pile-zone { min-height: 48px; }
  .is-playing .pile-card { min-height: 44px; padding: 3px; }
  .is-playing .potency-zone { padding: 3px; }
  .is-playing .potency-grid { gap: 2px; margin-top: 3px; }
  .is-playing .potency-chip { min-height: 20px; }
  .is-playing .power-card-list { display: none; }
  .is-playing .hand-card { height: 116px; }
}

/* Bloque UX 07: mesa mobile apaisada, zonas completas y acciones de mano. */

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 700px) {
  :root {
    --card-width: 38px;
    --card-height: 52.596px;
    --slot-width: 59px;
    --slot-height: 59px;
  }

  body.is-playing {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--game-viewport-height);
    min-width: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .is-playing .shell {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--game-viewport-height);
    margin: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .is-playing .hero,
  .is-playing .setup-panel,
  .is-playing .orientation-hint { display: none; }
  .is-playing .game-panel {
    position: relative;
    display: grid;
    width: 100%;
    max-width: none;
    height: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-rows: 42px minmax(0, 1fr) 78px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .is-playing.has-card-inspector .game-panel,
  .is-playing.has-active-selection .game-panel { grid-template-rows: 42px minmax(0, 1fr) 78px; }

  .is-playing .game-toolbar {
    min-height: 0;
    height: 42px;
    padding: 4px 8px;
    gap: 6px;
    border-bottom: 1px solid rgba(152, 237, 187, .16);
  }
  .is-playing .game-toolbar h2 { display: none; }
  .is-playing .game-toolbar__controls { width: 100%; min-width: 0; gap: 5px; }
  .is-playing .toolbar-meta { min-width: 0; flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; overflow: hidden; }
  .is-playing .role-chip,
  .is-playing .turn-chip,
  .is-playing .game-actions .button {
    min-height: 34px;
    padding: 5px 8px;
    font-size: var(--type-meta);
    white-space: nowrap;
  }
  .is-playing .role-chip,
  .is-playing .turn-chip { overflow: hidden; text-overflow: ellipsis; }
  .is-playing .connection-count { display: none; }
  .is-playing .game-actions { flex: 0 0 auto; gap: 4px; }
  .is-playing #fullscreen-button { display: inline-flex; min-width: 34px; padding: 5px 7px; }
  .is-playing #fullscreen-button .fullscreen-button__label { display: none; }

  .is-playing .selection-bar { display: none; }

  .is-playing .board-scroll { min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
  .is-playing .playmat {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 110px minmax(0, 1fr) 172px;
    grid-template-rows: minmax(0, 1fr) 38px 38px minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    background: radial-gradient(circle at 50% 48%, rgba(77, 155, 112, .12), transparent 28rem), var(--mat);
  }
  .is-playing .lane,
  .is-playing .center-lane { min-height: 0; margin: 0; }
  .is-playing .lane-side { min-width: 0; padding: 5px 6px; overflow: hidden; }
  .is-playing .lane-side--right { gap: 4px; border-left: 1px solid rgba(170, 207, 193, .16); border-right: 0; }
  .is-playing .lane-field { min-width: 0; padding: 3px 6px; overflow: visible; }
  .is-playing .lane-heading { display: none; }
  .is-playing .board-row { gap: 4px; }
  .is-playing .board-slot {
    width: var(--slot-width);
    min-width: var(--slot-width);
    max-width: var(--slot-width);
    height: var(--slot-height);
    min-height: var(--slot-height);
    max-height: var(--slot-height);
  }
  .is-playing .field-card-stack .field-card,
  .is-playing .field-card--minimal {
    width: var(--card-width);
    height: var(--card-height);
    margin: 0;
    padding: 3px;
    aspect-ratio: 3072 / 4252;
  }
  .is-playing .field-card--minimal .field-card__top,
  .is-playing .field-card--minimal .field-card__stats { font-size: .5rem; }
  .is-playing .field-card--minimal .field-card__art { margin: 2px 0; }
  .is-playing .field-card--minimal .field-card__stats { right: 2px; bottom: 2px; left: 2px; gap: 1px; }
  .is-playing .field-card--minimal .field-card__stats span { padding: 1px 0; }

  .is-playing .lane-side--left { padding: 4px 5px; }
  .is-playing .lane-side--left .player-summary {
    display: grid;
    min-height: 0;
    max-height: 20%;
    grid-template-rows: 12px 13px;
    align-content: start;
    overflow: visible;
  }
  .is-playing .player-identity { height: 12px; gap: 3px; align-items: center; }
  .is-playing .player-identity > div { display: flex; min-width: 0; align-items: baseline; gap: 3px; }
  .is-playing .player-label { display: block; min-width: 0; margin-bottom: 0; font-size: .52rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .is-playing .player-identity h3 { font-size: .72rem; line-height: 1; }
  .is-playing .badge {
    display: grid;
    width: 12px;
    min-width: 12px;
    height: 12px;
    min-height: 12px;
    padding: 0;
    place-items: center;
    overflow: visible;
    color: transparent;
    font-size: 0;
  }
  .is-playing .badge::before { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); content: ""; }
  .is-playing .badge--lost::before { background: var(--danger); }
  .is-playing .life-readout { height: 13px; gap: 2px; margin-top: 0; align-items: end; line-height: 1; overflow: visible; }
  .is-playing .life-readout strong { font-size: .92rem; line-height: .88; }
  .is-playing .life-readout span { font-size: .42rem; line-height: 1; }
  .is-playing .lane-caption { display: none; }
  .is-playing .zone-block { margin-top: 4px; }
  .is-playing .zone-block > .zone-label { display: block; font-size: .5rem; }
  .is-playing .lane-side--left .zone-block:has(.champion-slot) { display: block; }
  .is-playing .champion-slot { display: grid; width: 42px; height: 56px; min-height: 56px; margin-top: 2px; place-items: center; }
  .is-playing .champion-card {
    width: 38px;
    height: 52.596px;
    min-height: 52.596px;
    margin: 0;
    padding: 2px;
    aspect-ratio: 3072 / 4252;
    border-radius: 6px;
  }
  .is-playing .champion-card .field-card__header,
  .is-playing .champion-card .field-card__bottom { display: none; }
  .is-playing .champion-card .field-card__art { height: 100%; min-height: 0; margin: 0; border-radius: 3px; }
  .is-playing .guard-strip { gap: 2px; margin-top: 3px; }
  .is-playing .guard-chip { min-height: 18px; font-size: .43rem; }

  .is-playing .lane-side--right > .zone-label,
  .is-playing .potency-zone > .zone-label { display: block; font-size: .5rem; }
  .is-playing .pile-grid { gap: 3px; }
  .is-playing .pile-zone { min-height: 28px; }
  .is-playing .pile-card { min-height: 26px; padding: 2px 3px; }
  .is-playing .pile-card__title { font-size: .43rem; }
  .is-playing .pile-card__count { font-size: .72rem; }
  .is-playing .pile-card__empty { display: block; font-size: .38rem; }
  .is-playing .potency-zone { margin: 0; padding: 4px; }
  .is-playing .potency-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 3px; }
  .is-playing .potency-chip { min-height: 20px; gap: 1px; }
  .is-playing .potency-chip__label { font-size: .43rem; }
  .is-playing .potency-chip__count { font-size: .56rem; }
  .is-playing .power-card-list { display: none; }

  .is-playing .hand-panel {
    position: relative;
    z-index: 55;
    display: block;
    width: 100%;
    height: 78px;
    min-height: 78px;
    margin: 0;
    padding: 0 8px 4px;
    overflow: visible;
    border-width: 1px 0 0;
    border-radius: 0;
    background: rgba(14, 26, 26, .98);
    box-shadow: 0 -12px 28px rgba(0, 0, 0, .28);
  }
  .is-playing .hand-heading {
    position: absolute;
    z-index: 64;
    top: 4px;
    right: 8px;
    left: 8px;
    height: 30px;
    min-height: 30px;
    margin: 0;
    align-items: center;
    pointer-events: none;
  }
  .is-playing .hand-heading > div { display: flex; min-width: 0; align-items: center; gap: 7px; }
  .is-playing .hand-heading .zone-label,
  .is-playing .hand-heading .panel-copy { display: none; }
  .is-playing .hand-heading h2 { margin: 0; color: var(--soft); font-size: 0; line-height: 1; }
  .is-playing .hand-heading h2::before { content: "MANO"; font-size: var(--type-action); font-weight: 900; letter-spacing: .05em; }
  .is-playing .hand-layout {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 25%);
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
    overflow: visible;
  }
  .is-playing .hand-context {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: flex-start;
    justify-content: center;
    padding: 39px 0 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .is-playing .hand-context:not(:has(.hand-context__actions)) { display: none; }
  .is-playing .hand-context__copy { display: none; }
  .is-playing .hand-context__actions {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 4px;
  }
  .is-playing .hand-context .button--tiny,
  .is-playing #end-turn-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 34px;
    padding: 4px 5px;
    font-size: .5rem;
    line-height: 1.05;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .is-playing .hand-tray {
    --mobile-hand-card-width: clamp(46px, 5.7vw, 56px);
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
    padding: 5px 5px 0;
    overflow: hidden;
  }
  .is-playing .hand-tray:not(.has-many) { justify-content: center; }
  .is-playing .hand-tray.has-many { justify-content: center; }
  .is-playing .hand-card {
    flex: 0 0 var(--mobile-hand-card-width);
    width: var(--mobile-hand-card-width);
    height: calc(var(--mobile-hand-card-width) * 1.3841146);
    min-width: 0;
    min-height: 0;
    margin: 0;
    touch-action: manipulation;
  }
  .is-playing .hand-card + .hand-card { margin-left: calc(var(--mobile-hand-card-width) * -.56); }
  .is-playing .hand-card__select.field-card {
    width: 100%;
    height: 100%;
    padding: 3px;
    border-radius: 7px;
    aspect-ratio: 3072 / 4252;
  }
  .is-playing .hand-card__select .field-card__header { display: none; }
  .is-playing .hand-card__select .field-card__art { min-height: 0; flex: 1 1 auto; margin: 0 0 2px; }
  .is-playing .hand-card__select .field-card__bottom { max-height: 37%; }
  .is-playing .hand-card__select .field-card__ability,
  .is-playing .hand-card__select .field-card__inheritance { display: none; }
  .is-playing .hand-card__select .field-card__name { font-size: .4rem; }
  .is-playing .hand-card__select .field-card__stats { gap: 1px; font-size: .42rem; }
  .is-playing .hand-card__select .field-card__stats span { padding: 2px 0; }
  .is-playing .hand-card:hover,
  .is-playing .hand-card:focus-visible,
  .is-playing .hand-card:focus-within,
  .is-playing .hand-card.is-selected { z-index: 55; }
  .is-playing .hand-card-preview { z-index: 90; }
  .is-playing .hand-card-preview.is-active {
    transform: translateY(-33px) scale(1.28);
    transform-origin: center bottom;
  }
  .is-playing .hand-card-preview.is-active.is-selected:not(.is-hovered),
  .is-playing .hand-card-preview.is-active.is-selected.is-hovered { transform: translateY(-33px) scale(1.28); }
  .is-playing .hand-actions { position: absolute; top: 4px; right: 8px; z-index: 65; margin: 0; }
  .is-playing .mobile-hand-cost { display: flex; align-items: center; }
  .is-playing .mobile-hand-cost .field-card__cost { min-height: 30px; padding-inline: 5px; }
  .is-playing #end-turn-button { min-width: 82px; }

  .action-confirm-dialog {
    width: min(360px, calc(100% - 20px));
    max-width: 360px;
    max-height: calc(100dvh - 20px);
    overflow: auto;
    border-width: 1px;
    border-radius: 12px;
  }
  .action-confirm-dialog__surface { gap: 6px; padding: 10px; }
  .action-confirm-dialog__status { font-size: .5rem; }
  .action-confirm-dialog h2 { font-size: .82rem; }
  .action-confirm-dialog__copy { font-size: .62rem; line-height: 1.3; }
  .action-confirm-dialog__cost { gap: 2px; padding: 6px 8px; font-size: .56rem; }
  .action-confirm-dialog__cost-label { font-size: .5rem; }
  .action-confirm-dialog__cost strong { font-size: .7rem; }
  .action-confirm-dialog__actions { gap: 6px; margin-top: 2px; }
  .action-confirm-dialog__actions .button { min-height: 32px; padding: 4px 8px; font-size: .58rem; }

  .is-playing .card-inspector {
    position: absolute;
    z-index: 80;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    display: grid;
    width: min(300px, 43vw);
    height: 100%;
    min-height: 0;
    grid-column: auto;
    grid-row: auto;
    border-top: 0;
    border-left: 1px solid rgba(200, 154, 82, .58);
    box-shadow: -18px 0 40px rgba(0, 0, 0, .46);
  }
  .is-playing .playmat.is-inspecting { grid-template-columns: 110px minmax(0, 1fr) 172px; }
  .is-playing .playmat.is-inspecting .lane-side--right { visibility: visible; pointer-events: auto; }
  .is-playing .card-inspector__header { grid-template-columns: minmax(0, 1fr) 44px; min-height: 46px; padding: 3px 8px; gap: 6px; }
  .is-playing .card-inspector__expand { display: none; }
  .is-playing .card-inspector__source { margin: 0; font-size: .5rem; }
  .is-playing .card-inspector__identity h2 { font-size: .82rem; }
  .is-playing .card-inspector__body { grid-template-rows: auto minmax(0, 1fr); gap: 7px; padding: 7px 8px; overflow: hidden; }
  .is-playing .card-inspector__summary { grid-template-columns: 72px minmax(0, 1fr); gap: 7px; }
  .is-playing .card-inspector__art { width: 72px; height: 99.7px; aspect-ratio: 3072 / 4252; }
  .is-playing .card-inspector__summary-copy { gap: 4px; }
  .is-playing .card-inspector__summary-line { gap: 3px; font-size: .52rem; }
  .is-playing .card-inspector__stats { gap: 2px; }
  .is-playing .card-inspector__stat { min-height: 38px; }
  .is-playing .card-inspector__stat span { font-size: .45rem; }
  .is-playing .card-inspector__stat strong { font-size: .7rem; }
  .is-playing .card-inspector__quick { gap: 7px; overflow-y: auto; }
  .is-playing .card-inspector__section { gap: 3px; }
  .is-playing .card-inspector__section + .card-inspector__section { padding-top: 6px; }
  .is-playing .card-inspector__section h3 { font-size: .54rem; }
  .is-playing .card-inspector__section p { font-size: .62rem; line-height: 1.25; }
  .is-playing .card-inspector__footer { min-height: 46px; padding: 4px 8px max(4px, env(safe-area-inset-bottom)); }
  .is-playing .card-inspector__footer > .button,
  .is-playing .card-inspector__pin { min-height: 38px; }
  .is-playing .card-inspector__pin,
  .is-playing .card-inspector__shortcut { display: none; }
  .is-playing .card-inspector__detail { min-width: 0; flex: 1 1 auto; font-size: var(--type-meta); }
  .is-playing.has-card-inspector .hand-panel { visibility: visible; pointer-events: auto; }
}

@media (orientation: landscape) and (max-width: 760px) and (max-height: 700px) {
  :root {
    --card-width: 32px;
    --card-height: 44.2917px;
    --slot-width: 49px;
    --slot-height: 49px;
  }
  .is-playing .game-panel { grid-template-rows: 40px minmax(0, 1fr) 72px; }
  .is-playing.has-card-inspector .game-panel,
  .is-playing.has-active-selection .game-panel { grid-template-rows: 40px minmax(0, 1fr) 72px; }
  .is-playing .game-toolbar { height: 40px; padding: 3px 6px; }
  .is-playing .selection-bar { height: 34px; padding-inline: 7px; }
  .is-playing .playmat { grid-template-columns: 92px minmax(0, 1fr) 146px; grid-template-rows: minmax(0, 1fr) 34px 34px minmax(0, 1fr); }
  .is-playing .lane-side { padding: 4px; }
  .is-playing .lane-side--right { gap: 3px; }
  .is-playing .board-row { gap: 3px; }
  .is-playing .player-label { font-size: .46rem; }
  .is-playing .player-identity h3 { font-size: .74rem; }
  .is-playing .life-readout { height: 12px; margin-top: 0; }
  .is-playing .life-readout strong { font-size: .86rem; }
  .is-playing .life-readout span { font-size: .4rem; }
  .is-playing .zone-block { margin-top: 3px; }
  .is-playing .zone-block > .zone-label,
  .is-playing .lane-side--right > .zone-label,
  .is-playing .potency-zone > .zone-label { font-size: .44rem; }
  .is-playing .champion-slot { width: 35px; height: 48px; min-height: 48px; }
  .is-playing .champion-card { width: 32px; height: 44.2917px; min-height: 44.2917px; }
  .is-playing .guard-strip { gap: 1px; margin-top: 2px; }
  .is-playing .guard-chip { min-height: 15px; font-size: .36rem; }
  .is-playing .pile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
  .is-playing .pile-zone { min-height: 24px; }
  .is-playing .pile-card { min-height: 22px; padding: 2px; }
  .is-playing .pile-card__title { font-size: .37rem; }
  .is-playing .pile-card__count { font-size: .6rem; }
  .is-playing .pile-card__empty { font-size: .34rem; }
  .is-playing .potency-zone { padding: 3px; }
  .is-playing .potency-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 2px; }
  .is-playing .potency-chip { min-height: 17px; }
  .is-playing .potency-chip__label { font-size: .36rem; }
  .is-playing .potency-chip__count { font-size: .46rem; }
  .is-playing .hand-panel { height: 72px; min-height: 72px; padding-inline: 5px; }
  .is-playing .hand-context { padding-top: 34px; }
  .is-playing .hand-heading { top: 3px; right: 5px; left: 5px; }
  .is-playing .hand-heading h2::before { font-size: var(--type-label); }
  .is-playing .hand-actions { top: 3px; right: 5px; }
  .is-playing #end-turn-button { min-width: 70px; }
  .is-playing .hand-tray { --mobile-hand-card-width: 42px; padding-inline: 3px; }
  .is-playing .hand-card + .hand-card { margin-left: -24px; }
  .is-playing .hand-card__select .field-card__name { font-size: .34rem; }
  .is-playing .hand-card__select .field-card__stats { font-size: .36rem; }
  .is-playing .hand-card-preview.is-active { transform: translateY(-27px) scale(1.22); }
  .is-playing .hand-card-preview.is-active.is-selected:not(.is-hovered),
  .is-playing .hand-card-preview.is-active.is-selected.is-hovered { transform: translateY(-27px) scale(1.22); }
  .is-playing .card-inspector { width: min(250px, 47vw); }
  .is-playing .card-inspector__summary { grid-template-columns: 58px minmax(0, 1fr); gap: 5px; }
  .is-playing .card-inspector__art { width: 58px; height: 80.2px; }
  .is-playing .card-inspector__stat { min-height: 32px; }
  .is-playing .card-inspector__stat strong { font-size: .6rem; }
  .is-playing .card-inspector__stat span { font-size: .4rem; }
  .is-playing .card-inspector__section p { font-size: .54rem; }
}

/* Final cascade guards for the Champion summary introduced after legacy compact layouts. */
@media (min-width: 1101px) and (max-height: 800px) {
  .is-playing .champion-slot,
  .is-playing .champion-card { min-height: 54px; }
  .is-playing .champion-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 4px;
  }
  .is-playing .champion-card__portrait { display: grid; width: 38px; height: 44px; }
  .is-playing .champion-card__copy { display: grid; }
  .is-playing .champion-card .champion-card__name { margin: 0; font-size: .58rem; }
  .is-playing .champion-card__location { font-size: .48rem; }
  .is-playing .champion-card__ability-count { font-size: .46rem; }
}

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 700px) {
  .is-playing .champion-card {
    display: grid;
    width: 42px;
    height: 56px;
    min-height: 56px;
    grid-template-columns: 1fr;
    padding: 2px;
  }
  .is-playing .champion-card__portrait { display: grid; width: 100%; height: 100%; border: 0; border-radius: 3px; }
  .is-playing .champion-card__copy { display: none; }
  .is-playing .champion-card .champion-card__state { display: block; position: absolute; right: 2px; bottom: 2px; max-width: calc(100% - 4px); padding: 2px 3px; overflow: hidden; font-size: .34rem; text-overflow: ellipsis; }
}

@media (orientation: landscape) and (max-width: 760px) and (max-height: 700px) {
  .is-playing .champion-card { width: 32px; height: 44.2917px; min-height: 44.2917px; }
}

/* Evolución: conecta la carta elegida en la mano con los destinos realmente pagables. */
.board-slot.is-evolution-target::before,
.board-slot.is-evolution-target::after {
  border-color: var(--mint);
  background: rgba(152, 237, 187, .12);
  box-shadow: 0 0 0 3px rgba(152, 237, 187, .18), 0 0 22px rgba(152, 237, 187, .2);
}

.field-card.is-evolution-target {
  border-color: #ffe1a4;
  box-shadow: 0 0 0 2px rgba(240, 193, 127, .72), 0 0 18px rgba(240, 193, 127, .3), 0 9px 18px rgba(0, 0, 0, .32);
}

.button--evolution.is-evolution-ready {
  border-color: #ffe1a4;
  background: linear-gradient(135deg, #9a6b2c, #2d7450);
  box-shadow: 0 0 0 2px rgba(152, 237, 187, .24), 0 0 16px rgba(240, 193, 127, .24);
  color: #fff9e9;
}

@media (prefers-reduced-motion: reduce) {
  .board-slot.is-evolution-target,
  .field-card.is-evolution-target,
  .button--evolution.is-evolution-ready { animation: none; }
}

/* Desktop player zones: identity and Champion share the first row; Guards use the full second row. */
@media (min-width: 1101px) {
  .is-playing .lane-side--left {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(74px, .72fr) minmax(0, 1.28fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 6px 8px;
    align-items: stretch;
    overflow: hidden;
  }
  .is-playing .lane-side--left .player-summary {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-column: 1;
    grid-row: 1;
    align-content: center;
    gap: 5px;
  }
  .is-playing .lane-side--left .player-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .is-playing .lane-side--left .player-identity > div { min-width: 0; }
  .is-playing .lane-side--left .player-label { max-width: 100%; }
  .is-playing .lane-side--left .life-readout { margin-top: 1px; }
  .is-playing .lane-side--left > .lane-caption { display: none; }
  .is-playing .lane-side--left > .zone-block { margin: 0; }
  .is-playing .lane-side--left > .zone-block:has(.champion-slot) {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-column: 2;
    grid-row: 1;
  }
  .is-playing .lane-side--left > .zone-block:has(.champion-slot) > .zone-label { display: none; }
  .is-playing .lane-side--left > .zone-block:has(.guard-strip) {
    display: grid;
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-rows: auto auto;
    gap: 3px;
  }
  .is-playing .lane-side--left .champion-slot,
  .is-playing .lane-side--left .champion-card {
    width: 100%;
    height: 100%;
    min-height: 72px;
    margin: 0;
  }
  .is-playing .lane-side--left .champion-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 5px;
  }
  .is-playing .lane-side--left .champion-card__portrait { width: 42px; height: 100%; min-height: 60px; }
  .is-playing .lane-side--left .champion-card__copy { display: grid; align-content: center; }
  .is-playing .lane-side--left .champion-card .champion-card__state {
    position: absolute;
    top: 4px;
    right: 4px;
    max-width: calc(100% - 52px);
  }
  .is-playing .lane-side--left .guard-strip {
    width: 100%;
    margin: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .is-playing .lane-side--left .guard-chip { min-height: 22px; }

  .is-playing .lane-side--right {
    display: grid;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: stretch;
  }
  .is-playing .lane-side--right .potency-zone {
    display: grid;
    min-height: 0;
    margin: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    overflow: hidden;
  }
  .is-playing .lane-side--right .potency-grid { flex: 0 0 auto; }
  .is-playing .lane-side--right .power-card-list {
    display: grid;
    min-height: 0;
    max-height: none;
    margin-top: 4px;
    overflow-y: auto;
  }
}

/* Hand thumbnails show only identity and artwork for every non-creature card. */
.hand-card__select.field-card--noncreature::before {
  background: linear-gradient(180deg, rgba(2, 8, 8, .88) 0%, rgba(2, 8, 8, .38) 20%, transparent 36%);
}
.hand-card__select.field-card--noncreature .field-card__top { bottom: auto; }

/* One reading flow and one scrollbar in the Inspector, on every viewport. */
.is-playing .card-inspector__body,
.card-inspector__body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.is-playing .card-inspector__summary,
.card-inspector__summary {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.is-playing .card-inspector__art,
.card-inspector__art {
  width: min(180px, 100%);
  height: auto;
  aspect-ratio: 3072 / 4252;
  justify-self: center;
}
.is-playing .card-inspector__summary-copy,
.card-inspector__summary-copy { width: 100%; }
.is-playing .card-inspector__quick,
.card-inspector__quick {
  display: grid;
  min-height: auto;
  flex: 0 0 auto;
  overflow: visible;
}

/* Final desktop cleanup: one board color, no redundant rails or Power-card list. */
.power-card-list { display: none !important; }
.playmat,
.lane-side,
.lane-field,
.lane--p2 .lane-side,
.lane--p2 .lane-field,
.lane-field--center {
  background: #0c1d25;
}

@media (min-width: 1101px) {
  .is-playing .selection-bar { display: none; }
  .is-playing .game-panel {
    grid-template-rows: auto minmax(0, 1fr) minmax(224px, clamp(224px, 31vh, 286px));
  }
  .is-playing .lane-side--right .potency-zone { grid-template-rows: auto auto; }
  .is-playing #end-turn-button,
  .is-playing .hand-context__actions .button {
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px;
    font-size: .62rem;
    line-height: 1.05;
  }
}

@media (min-width: 1101px) and (max-height: 800px) {
  .is-playing .game-panel { grid-template-rows: auto minmax(0, 1fr) 200px; }
}

/* Carta de Campeón en escritorio: la ilustración conserva su proporción y la identidad queda debajo. */
@media (min-width: 1101px) {
  .is-playing .lane-side--left > .zone-block:has(.champion-slot) { align-content: center; overflow: hidden; }
  .is-playing .lane-side--left .champion-slot {
    width: clamp(88px, 7.2vw, 104px);
    height: min(100%, 214px);
    min-height: 0;
    max-height: 214px;
    align-self: center;
    justify-self: center;
    overflow: hidden;
  }
  .is-playing .lane-side--left .champion-card {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 214px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 144px) auto auto;
    gap: 4px;
    align-items: stretch;
    padding: 5px;
    overflow: hidden;
  }
  .is-playing .lane-side--left .champion-card__portrait { width: 100%; height: 100%; min-height: 0; max-height: 144px; aspect-ratio: 3072 / 4252; }
  .is-playing .lane-side--left .champion-card__portrait img { object-fit: contain; object-position: center; }
  .is-playing .lane-side--left .champion-card__copy { display: grid; min-width: 0; gap: 2px; justify-items: center; text-align: center; }
  .is-playing .lane-side--left .champion-card .champion-card__name {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    margin: 0;
    font-size: clamp(.55rem, .62vw, .7rem);
    line-height: 1.15;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .is-playing .lane-side--left .champion-card__location,
  .is-playing .lane-side--left .champion-card__ability-count { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .is-playing .lane-side--left .champion-card .champion-card__state { position: static; justify-self: center; max-width: 100%; margin: 0; padding: 2px 4px; font-size: .42rem; }
}

/* Mano de escritorio: conservar la proporción vertical real de las cartas sin tocar mobile. */
@media (min-width: 1101px) {
  .is-playing .hand-card {
    height: calc(clamp(112px, 10vw, 148px) * 1.3841146);
  }
}

@media (min-width: 1101px) and (max-height: 800px) {
  .is-playing .hand-card {
    height: min(176px, calc(clamp(112px, 10vw, 148px) * 1.3841146));
  }
}

/* Elevación de escritorio: la previsualización puede salir de la caja de la mano. */
@media (min-width: 1101px) {
  .is-playing .hand-panel { overflow: visible; }
}

/* Detalle ampliado: nombre y slogan arriba, estirpe con su elemento justo sobre las estadísticas. */
.field-card__slogan { display: block; overflow: hidden; margin-top: 3px; color: #dcd5ff; font-size: .46rem; font-style: italic; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.field-card__lineage-row { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 6px; margin-bottom: 3px; color: var(--soft); }
.field-card__detail-lineage { min-width: 0; margin: 0; color: var(--soft); font-size: .65rem; font-weight: 850; text-overflow: ellipsis; }
.field-card__lineage-row .field-card__cost-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.card-inspector__slogan { color: #dcd5ff; font-size: var(--type-meta); font-style: italic; line-height: 1.3; }
.champion-card__slogan { display: block; overflow: hidden; color: #dcd5ff; font-size: .52rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.champion-action-overview__slogan { color: #dcd5ff; font-size: .72rem; font-style: italic; line-height: 1.25; }

@media (min-width: 561px) {
  .card-detail__preview.field-card { display: flex; height: auto; min-height: 392px; overflow: hidden; }
  .card-detail__preview.field-card::before { display: none; }
  .card-detail__preview.field-card > .field-card__header { position: static !important; display: block; order: 1; padding: 0; }
  .card-detail__preview .field-card__identity { text-align: center; }
  .card-detail__preview .field-card__name { overflow: visible; font-size: clamp(1rem, 1.9vw, 1.24rem); line-height: 1.08; text-overflow: clip; white-space: normal; }
  .card-detail__preview .field-card__slogan { overflow: visible; color: #dcd5ff; font-size: .72rem; line-height: 1.25; text-overflow: clip; white-space: normal; }
  .card-detail__preview.field-card > .field-card__art { position: static; order: 2; width: 100%; height: auto; min-height: 0; flex: 1 1 auto; aspect-ratio: 3072 / 4252; margin: 10px 0 0; border: 1px solid rgba(242, 247, 242, .22); border-radius: 8px; }
  .card-detail__preview .field-card__art img, .card-detail__preview .field-card__art-render { object-fit: contain; object-position: center; }
  .card-detail__preview.field-card > .field-card__bottom { position: static !important; order: 3; height: auto; max-height: none; padding: 10px 0 0; grid-template-rows: auto auto auto; gap: 5px; }
  .card-detail__preview .field-card__ability { max-height: 56px; overflow: auto; line-height: 1.3; text-overflow: clip; white-space: normal; }
  .card-detail__preview .field-card__lineage-row { order: 2; }
  .card-detail__preview .field-card__stats { order: 3; }
  .card-detail__preview .field-card__inheritance { order: 4; }
}

/* En móvil y tablet la ficha prioriza lectura: carta completa arriba y datos debajo. */
@media (max-width: 1100px) {
  .card-detail-dialog {
    width: min(620px, calc(100% - 16px));
    max-width: 620px;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
  }
  .card-detail-dialog__surface { padding: 14px; }
  .card-detail-dialog__header { align-items: start; gap: 10px; margin-bottom: 14px; }
  .card-detail-dialog__header h2 { font-size: clamp(1.05rem, 4.2vw, 1.35rem); line-height: 1.08; overflow-wrap: anywhere; }
  .card-detail-dialog__slogan { font-size: .74rem; }
  .card-detail-dialog__context { font-size: .58rem; }
  .card-detail-content { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .card-detail__preview.field-card {
    justify-self: center;
    width: min(100%, 340px);
    height: auto;
    min-height: 0;
    overflow: hidden;
  }
  .card-detail__preview.field-card::before { display: none; }
  .card-detail__preview.field-card > .field-card__header { position: static !important; display: block; order: 1; padding: 0; }
  .card-detail__preview .field-card__identity { text-align: center; }
  .card-detail__preview .field-card__name {
    overflow: visible;
    font-size: clamp(1rem, 4vw, 1.24rem);
    line-height: 1.08;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .card-detail__preview .field-card__slogan {
    overflow: visible;
    font-size: .72rem;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .card-detail__preview.field-card > .field-card__art {
    position: static;
    order: 2;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    aspect-ratio: 3072 / 4252;
    margin: 10px 0 0;
    border: 1px solid rgba(242, 247, 242, .22);
    border-radius: 8px;
  }
  .card-detail__preview .field-card__art img,
  .card-detail__preview .field-card__art-render { object-fit: contain; object-position: center; }
  .card-detail__preview.field-card > .field-card__bottom {
    position: static !important;
    order: 3;
    height: auto;
    max-height: none;
    padding: 10px 0 0;
    grid-template-rows: auto auto auto auto;
    gap: 6px;
  }
  .card-detail__preview .field-card__ability,
  .card-detail__preview .field-card__inheritance {
    min-height: 0;
    overflow: visible;
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .card-detail__preview .field-card__stats { font-size: .7rem; }
  .card-detail__preview .field-card__stats span { padding: 5px 4px; }
}

/* Tablero móvil: deja respirar manos cortas y aprovecha la columna del jugador. */
@media (orientation: landscape) and (max-width: 1100px) and (max-height: 700px) {
  .is-playing .hand-tray:not(.has-many) { gap: 4px; }
  .is-playing .hand-tray:not(.has-many) .hand-card + .hand-card { margin-left: 0; }

  .is-playing .lane-side--left {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 2px;
  }
  .is-playing .lane-side--left .zone-block:has(.champion-slot) {
    display: grid;
    min-height: 0;
    align-content: start;
    margin-top: 1px;
    overflow: hidden;
  }
  .is-playing .lane-side--left .zone-block:has(.guard-strip) {
    min-height: 22px;
    align-self: end;
    margin-top: 0;
  }
  .is-playing .champion-slot {
    display: grid;
    width: clamp(38px, 4.6vw, 44px);
    height: auto;
    min-height: 0;
    max-height: 76px;
    margin-top: 1px;
    place-items: stretch;
  }
  .is-playing .champion-card {
    display: grid;
    width: 100%;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    max-height: 76px;
    grid-template-rows: minmax(0, 61px) auto;
    gap: 2px;
    padding: 2px;
    aspect-ratio: auto;
  }
  .is-playing .champion-card__portrait {
    display: grid;
    width: 100%;
    height: auto;
    aspect-ratio: 3072 / 4252;
    border: 0;
    border-radius: 4px;
  }
  .is-playing .champion-card__portrait img { object-fit: contain; object-position: center; }
  .is-playing .champion-card__copy { display: grid; min-width: 0; gap: 2px; text-align: center; }
  .is-playing .champion-card .champion-card__name {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-size: .38rem;
    line-height: 1.15;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .is-playing .champion-card__location,
  .is-playing .champion-card__ability-count { display: none; }
  .is-playing .champion-card .champion-card__state {
    display: block;
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: auto;
    max-width: calc(100% - 6px);
    padding: 2px 3px;
    overflow: hidden;
    font-size: .33rem;
    text-overflow: ellipsis;
  }
  .is-playing .guard-strip {
    width: 100%;
    gap: 2px;
    margin-top: 2px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .is-playing .guard-chip {
    min-height: 18px;
    overflow: visible;
    color: var(--mint);
    font-size: .42rem;
  }
  .is-playing .guard-chip.is-broken { color: var(--danger); }
  .is-playing .guard-chip::before { display: none; content: none; }
}