/* Effekt = Blau (Brett-Farbsprache), einheitlich — unabhaengig vom Effekt-Typ. */
  #pieceModal .miniSq.effectSourceCell::before {
    content: "";
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mp-mark-effect) 55%, transparent);
    box-shadow: 0 0 0 1px var(--mp-mark-effect);
    pointer-events: none;
  }
  #pieceModal .miniSq.effectTargetCell::after {
    content: "";
    position: absolute;
    inset: 20%;
    border-radius: 4px;
    border: 2px solid var(--mp-mark-effect);
    background: color-mix(in srgb, var(--mp-mark-effect) 16%, transparent);
    pointer-events: none;
  }
  #pieceModal .effectMiniCustom {
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
    padding: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
  }
  #pieceModal .effectMiniCustom strong {
    color: color-mix(in srgb, var(--card-accent, var(--accent)) 70%, #fff);
  }
  #pieceModal .effectMiniCustom span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
  }
  #pieceModal .pmSection { margin-top: 10px; }
  #pieceModal .pmSection:not(:has(.legacyDetailsTitle)) {
    order: 3;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.18)),
      #111116;
    border: 2px solid rgba(0,0,0,0.65);
    border-radius: 8px;
    padding: 8px;
  }
  #pieceModal .pmSection h4 {
    font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
    color: #17171d; margin: -8px -8px 7px; padding: 5px 8px;
    background: color-mix(in srgb, var(--card-accent, var(--accent)) 80%, #f3eadb);
    border-bottom: 1px solid rgba(0,0,0,0.45);
    border-radius: 6px 6px 0 0;
  }
  #pieceModal .pmDesc { color: var(--text); line-height: 1.5; }
  #pieceModal .pmList { margin: 0; padding-left: 16px; color: var(--text); }
  #pieceModal .pmList li { margin-bottom: 2px; color: var(--muted); }
  #pieceModal .pmKV { color: var(--text); }
  #pieceModal .pmKV span { color: var(--muted); }
  #pieceModal .pmFlag {
    display: inline-block; background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 6px; margin: 1px 3px 1px 0;
    font-family: ui-monospace, monospace; font-size: 10.5px;
  }
  #pieceModal .pmAbility {
    display: flex; gap: 6px; align-items: flex-start; margin: 4px 0;
    color: var(--text); line-height: 1.4;
  }
  #pieceModal .pmAbility .icon { flex-shrink:0; width:16px; text-align:center; }
  #pieceModal .pmSection:has(.legacyDetailsTitle) { display: none; }
  #pieceModal .ruleSummary {
    order: 4;
    margin-top: 10px;
    background: #ebe1cf;
    color: #171217;
    border: 2px solid rgba(0,0,0,0.62);
    border-radius: 8px;
    padding: 9px 10px;
  }
  #pieceModal .ruleLine {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    align-items: start;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.18);
  }
  #pieceModal .ruleLine:last-child { border-bottom: 0; }
  #pieceModal .ruleLine span {
    color: #5e5344;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
  }
  #pieceModal .ruleLine strong {
    color: #171217;
    font-weight: 600;
    line-height: 1.35;
  }
  #pieceModal .ruleLine.ability strong,
  #pieceModal .ruleLine.abilityType strong { color: #111827; }
  #pieceModal .ruleLine.ability em,
  #pieceModal .ruleLine.abilityType em {
    color: #733a12;
    font-style: normal;
    font-weight: 700;
    margin-right: 4px;
  }
  #pieceModal .ruleLine.ability small {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(0,0,0,0.12);
    color: #5e5344;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .5px;
    vertical-align: 1px;
  }
  #pieceModal .ruleLine.special strong { color: var(--warn); }
  #pieceModal .statBlock {
    order: 5;
    background: rgba(0,0,0,0.26);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    padding: 8px;
    margin-top: 10px;
    display: flex; flex-direction: column; gap: 8px;
  }
  #pieceModal .statRow {
    display: flex; align-items: center; gap: 10px;
    font-size: 11.5px;
  }
  #pieceModal .statBlock .statRow:nth-child(2),
  #pieceModal .statBlock .statRow:nth-child(3) {
    display: none;
  }
  #pieceModal .statRow .label {
    color: var(--muted); min-width: 78px; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .8px;
  }
  #pieceModal .hpRow .hearts {
    display: inline-flex; gap: 2px; font-size: 14px; line-height: 1;
  }
  #pieceModal .hpRow .hearts span { color:#ff6b6b; }
  #pieceModal .hpRow .hp-num { color: var(--muted); font-size: 10.5px; margin-left: 4px; }
  #pieceModal .rangeRow .bar {
    display: inline-flex; gap: 3px;
  }
  #pieceModal .rangeRow .seg {
    width: 14px; height: 8px; border-radius: 2px;
    background: #3a3a45; border: 1px solid #44444f;
  }
  #pieceModal .rangeRow .seg.on { background: var(--accent); border-color: var(--accent); }
  #pieceModal .rangeRow .seg.inf {
    background: linear-gradient(90deg, var(--accent), #aa88ff);
    border-color: var(--accent);
  }
  #pieceModal .rangeRow .rng-text { color: var(--text); font-weight: 600; margin-left: 4px; }

  #pieceModal .pillRow {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  #pieceModal .pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 999px;
    font-size: 10.5px; border: 1px solid var(--border);
    background: var(--panel);
  }
  #pieceModal .pill.on {
    background: rgba(106, 169, 255, 0.18);
    border-color: var(--accent);
    color: var(--text); font-weight: 600;
  }
  #pieceModal .pill.off { color: #5a5a64; opacity: 0.7; text-decoration: line-through; text-decoration-color: #444; }
  #pieceModal .pill.warn { background: rgba(255, 184, 107, 0.18); border-color: var(--warn); color: var(--text); font-weight: 600; }
  #pieceModal .royalNote {
    order: 2;
    background: rgba(212,175,55,0.15);
    border: 1px solid #d4af37;
    color: #d4af37;
    padding: 6px 10px; border-radius: 6px; margin-top: 8px;
    font-weight: 600; font-size: 11.5px;
    display: flex; align-items: center; gap: 6px;
  }
  #pieceModal .miniBoard {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: min(212px, 100%);
    margin: 7px auto 5px;
    gap: 1px;
    padding: 4px;
    overflow: hidden;
    border: 2px solid var(--rift-gold);
    border-radius: 6px;
    background: var(--mp-board-frame);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.86),
      0 0 14px rgba(10,200,185,.16),
      inset 0 0 0 1px rgba(240,210,131,.22),
      inset 0 0 18px rgba(0,0,0,.7);
  }
  #pieceModal .miniBoard::before {
    content: ""; position: absolute; inset: 4px; z-index: 3; pointer-events: none;
    border: 1px solid rgba(240,210,131,.22);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.42), inset 0 0 20px rgba(0,0,0,.46);
  }
  #pieceModal .miniSq {
    aspect-ratio: 1;
    background: var(--mp-sq-light);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    font-size: 13px;
  }
  #pieceModal .miniSq.dark { background: var(--mp-sq-dark); }
  #pieceModal .miniSq.canMove::before {
    content: ''; position: absolute; inset: 32%;
    border-radius: 50%; background: radial-gradient(circle, var(--mp-mark-move), var(--mp-mark-move-2));
    pointer-events: none;
  }
  #pieceModal .miniSq.canCapture::after {
    content: ''; position: absolute; inset: 14%;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 55%, var(--mp-mark-cap) 57%, var(--mp-mark-cap) 78%, transparent 80%);
    pointer-events: none;
  }
  #pieceModal .miniSq .miniChip {
    width: 80%; aspect-ratio: 1; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1; z-index: 2;
  }
  #pieceModal .miniSq .miniChip.w { background:#f3eadb; color:#1a1a1f; box-shadow: inset 0 0 0 1.5px #1a1a1f; }
  #pieceModal .miniSq .miniChip.b { background:#1a1a1f; color:#f3eadb; box-shadow: inset 0 0 0 1.5px #f3eadb; }
  #pieceModal .miniSq .miniChip.hasAsset {
    width: 96%;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  #pieceModal .miniAsset {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.42));
  }
  #pieceModal .miniLegend {
    text-align:center; font-size:10.5px; color:var(--muted); margin-bottom:4px;
    display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  }
  #pieceModal .miniLegend span { display:inline-flex; align-items:center; gap:4px; }
  #pieceModal .miniLegend i {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-sizing: border-box;
  }
  #pieceModal .legendMove { background: radial-gradient(circle at 40% 35%, var(--mp-mark-move), var(--mp-mark-move-2)); }
  #pieceModal .legendCapture { border: 2px solid var(--mp-mark-cap); }
  #pieceModal .legendBoth {
    background: radial-gradient(circle at 40% 35%, var(--mp-mark-move), var(--mp-mark-move-2));
    border: 2px solid var(--mp-mark-cap);
  }
  #pieceModal .miniNote {
    text-align:center; font-size:11px; color:var(--muted);
    background: var(--panel-2); padding: 6px; border-radius: 4px;
  }
  #pieceModal details.techDetails {
    order: 6;
    margin-top: 10px; background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 4px; padding: 6px 8px;
  }
  #pieceModal details.techDetails summary {
    cursor: pointer; font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 1px;
  }
  #pieceModal details.techDetails .pmList { font-family: ui-monospace, monospace; font-size: 10px; margin-top: 4px; }

  #pieceModal {
    width: 360px;
    max-height: none;
    background: transparent;
    border: 0;
    border-left: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    overflow: visible;
    transform: translateY(4px) scale(var(--modal-scale, 1));
    transform-origin: top left;
  }
  #pieceModal.show {
    display: block;
    transform: translateY(0) scale(var(--modal-scale, 1));
  }
  #pieceModal .closeBtn {
    z-index: 5;
    width: 22px;
    height: 22px;
    background: rgba(10,10,12,.78);
    border-color: rgba(255,255,255,.18);
  }
  #pieceModal .heroRule.effectCard {
    margin: 0;
    padding: 7px;
    border: 0;
    border-radius: 9px;
    background: var(--card-frame, #050507);
    box-shadow:
      0 18px 36px rgba(0,0,0,.62),
      inset 0 0 0 1px rgba(255,255,255,.08);
  }
  #pieceModal .effectCardInner {
    gap: 5px;
    padding: 7px;
    border-radius: 7px 7px 24px 24px;
    background-color: var(--card-shell, #8aa5b4);
    background-image:
      linear-gradient(135deg, rgba(255,255,255,.16), transparent 28%, rgba(0,0,0,.14) 78%),
      repeating-linear-gradient(145deg, rgba(255,255,255,.10) 0 1px, transparent 1px 14px),
      repeating-linear-gradient(35deg, rgba(0,0,0,.10) 0 1px, transparent 1px 18px);
    box-shadow:
      inset 0 0 0 2px rgba(0,0,0,.66),
      inset 0 0 0 5px color-mix(in srgb, var(--card-rank-tone, #d4af37) 26%, transparent),
      inset -2px -2px 0 rgba(255,255,255,.18);
  }
  #pieceModal .effectCardHeader {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 33px;
    padding: 4px 7px;
    border: 2px solid rgba(0,0,0,.82);
    border-radius: 10px / 20px;
    background: radial-gradient(ellipse farthest-corner, var(--card-nameplate, #eef3f4) 48%, #bac4c8);
    box-shadow:
      -2px 0 0 rgba(0,0,0,.58),
      inset 2px -3px 0 rgba(0,0,0,.18),
      inset -1px 1px 0 rgba(255,255,255,.9);
  }
  #pieceModal .effectCardTitle {
    min-width: 0;
    display: grid;
    gap: 1px;
  }
  #pieceModal .effectCardTitle strong {
    color: #161114;
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #pieceModal .effectCardTitle span {
    color: #5b5148;
    font: 800 9px/1 ui-sans-serif, system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .45px;
  }
  #pieceModal .effectCardMeta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }
  #pieceModal .effectCardMeta span {
    display: inline-flex;
    align-items: center;
    height: 22px;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(239,244,241,.82);
    border: 0;
    color: #2a2522;
    font: 800 10px/1 ui-sans-serif, system-ui, sans-serif;
  }
  #pieceModal .effectCardMeta span:last-child {
    background: color-mix(in srgb, var(--badge-color, var(--card-accent)) 34%, #edf2ef);
  }
  #pieceModal .effectCard .effectCardMeta span.iconChip.iconChip,
  #pieceModal .effectCard .effectCardType .typeBadge.iconChip.iconChip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: max-content;
    height: 22px;
    min-height: 22px;
    padding: 0;
    max-width: 22px;
    border-radius: 999px;
    background: var(--badge-color, var(--card-accent));
    border: 0;
    color: #101015;
    box-shadow: none;
    overflow: hidden;
    cursor: default;
    transition: max-width .32s cubic-bezier(.2,.7,.2,1.05);
  }
  #pieceModal .effectCard .effectCardMeta span.metaPill.metaPill {
    background: var(--badge-color, var(--card-accent));
    border: 0;
    color: #101015;
    box-shadow: none;
  }
  #pieceModal .effectCard .effectCardMeta span.metaPill.deckPill {
    position: relative;
    margin-right: auto;
    overflow: hidden;
    color: #0a0a0d;
    text-shadow: 0 0 6px color-mix(in srgb, var(--badge-glow, var(--badge-color)) 70%, transparent);
    animation: deckPillPulse 2.6s ease-in-out infinite;
  }
  #pieceModal .effectCard .effectCardMeta span.metaPill.deckPill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg,
      transparent 30%,
      color-mix(in srgb, var(--badge-glow, #fff) 85%, transparent) 50%,
      transparent 70%);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    animation: deckPillShimmer 3.4s ease-in-out infinite;
  }
  @keyframes deckPillPulse {
    0%, 100% {
      box-shadow:
        0 0 6px color-mix(in srgb, var(--badge-glow, var(--badge-color)) 55%, transparent),
        0 0 14px color-mix(in srgb, var(--badge-color, currentColor) 35%, transparent);
    }
    50% {
      box-shadow:
        0 0 12px color-mix(in srgb, var(--badge-glow, var(--badge-color)) 85%, transparent),
        0 0 26px color-mix(in srgb, var(--badge-color, currentColor) 60%, transparent);
    }
  }
  @keyframes deckPillShimmer {
    0%, 100% { opacity: 0; transform: translateX(-30%); }
    50% { opacity: .55; transform: translateX(30%); }
  }
  @media (prefers-reduced-motion: reduce) {
    #pieceModal .effectCard .effectCardMeta span.metaPill.deckPill,
    #pieceModal .effectCard .effectCardMeta span.metaPill.deckPill::after {
      animation: none;
    }
  }
  #pieceModal .effectCard .effectCardMeta .iconChip .iconGlyph,
  #pieceModal .effectCard .effectCardMeta .iconChip .iconText,
  #pieceModal .effectCard .effectCardType .iconChip .iconGlyph,
  #pieceModal .effectCard .effectCardType .iconChip .iconText {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  #pieceModal .iconChip .iconGlyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    line-height: 1;
    color: inherit;
    font: 800 13px/1 ui-sans-serif, system-ui, sans-serif;
    font-variant-emoji: text;
  }
  #pieceModal .iconChip .iconText {
    flex: 0 0 auto;
    padding: 0 9px 0 2px;
    color: inherit;
    font: 800 10.5px/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .3px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .2s ease .08s;
  }
  #pieceModal .effectCard .effectCardMeta span.iconChip:hover,
  #pieceModal .effectCard .effectCardType .typeBadge.iconChip:hover {
    max-width: 220px;
    z-index: 4;
  }
  #pieceModal .effectCard .effectCardMeta span.iconChip:hover .iconText,
  #pieceModal .effectCard .effectCardType .typeBadge.iconChip:hover .iconText {
    opacity: 1;
  }
  #pieceModal .effectCardPortrait {
    position: relative;
    overflow: hidden;
    height: 198px;
    border: 2px solid #202020;
    background:
      radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--card-accent, #6aa9ff) 28%, transparent) 0 22%, transparent 56%),
      linear-gradient(160deg, rgba(255,255,255,.22), transparent 35%),
      linear-gradient(180deg, #20242b, #111116 72%);
    box-shadow: inset 0 0 30px rgba(0,0,0,.52);
  }
  #pieceModal .effectCardPortraitImg,
  #pieceModal .effectCardPortraitVideo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 36%;
    pointer-events: none;
  }
  #pieceModal .effectCardPortraitVideo {
    display: block;
  }
  #pieceModal .effectCardPortraitFallback {
    position: relative;
    z-index: 1;
    color: #f3eadb;
    font-size: 72px;
    line-height: 1;
    text-shadow: 0 4px 10px rgba(0,0,0,.82);
  }
  #pieceModal .effectCardType {
    min-height: 28px;
    padding: 4px 7px;
  }
  #pieceModal .effectCardType .typeBadge {
    max-width: 38%;
    padding: 2px 6px;
    font-size: 8.5px;
  }
  #pieceModal .effectCardText {
    min-height: 58px;
    padding: 8px 9px;
    background: var(--card-paper, #d7e0df);
  }
  #pieceModal .effectCardText strong {
    display: none;
  }
  #pieceModal .effectCardText p {
    font-size: 12.5px;
    line-height: 1.28;
  }
  /* ============================================================
     Figurenkarte (Designvorlage-Port) — vollständige fc-card.
     Aktiv im #pieceModal.fcMode; Tokens lokal gescoped. Brett + Move/
     Capture/Effect-Farben kommen unverändert aus unserem .miniBoard.
     ============================================================ */
  #pieceModal.fcMode {
    width: max-content;
    --gold-1: #d8b15a; --gold-2: #c89a3e; --gold-3: #8a6a25;
    --bone: #e8dec5; --ink: #aea58c; --ink-dim: #847b65; --danger: #c25a4a;
    --fc-serif: "Cinzel", Georgia, "Times New Roman", serif;
    --fc-serif-body: "Cormorant Garamond", Georgia, serif;
    --fc-sans: "Manrope", system-ui, sans-serif;
  }
  @keyframes fcPop { from { transform: scale(.86); } to { transform: scale(1); } }
  @keyframes fcGlow { 0%,100% { box-shadow: 0 0 14px -5px var(--pk); } 50% { box-shadow: 0 0 16px -2px var(--pk); } }

  #pieceModal.fcMode .fc-card {
    --accent: #6ee7d8; --accent-soft: rgba(110,231,216,.16);
    position: relative; width: 296px; color: var(--bone);
    background: linear-gradient(180deg, rgba(20,23,31,.98), rgba(9,11,15,.99));
    border: 1px solid rgba(216,177,90,.4);
    box-shadow: 0 30px 70px -18px rgba(0,0,0,.92), 0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(216,177,90,.08);
    animation: fcPop 300ms cubic-bezier(.18,.9,.32,1.2) both;
  }
  #pieceModal.fcMode .fc-card.tone-pirate  { --accent:#6ee7d8; --accent-soft:rgba(110,231,216,.16); }
  #pieceModal.fcMode .fc-card.tone-zombie  { --accent:#8fe3b3; --accent-soft:rgba(143,227,179,.15); }
  #pieceModal.fcMode .fc-card.tone-fantasy { --accent:#e8c879; --accent-soft:rgba(232,200,121,.16); }
  #pieceModal.fcMode .fc-card.tone-alt,
  #pieceModal.fcMode .fc-card.tone-custom  { --accent:#c7b8e0; --accent-soft:rgba(199,184,224,.16); }
  #pieceModal.fcMode .fc-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .8;
  }
  #pieceModal.fcMode .fc-tail {
    position: absolute; top: var(--tail-top, 40px); width: 14px; height: 14px;
    background: linear-gradient(135deg, rgba(20,23,31,.99), rgba(14,16,22,.99));
    border: 1px solid rgba(216,177,90,.4); transform: rotate(45deg); z-index: -1;
  }
  #pieceModal.fcMode .fc-card.side-right .fc-tail { left: -8px; border-right: none; border-top: none; }
  #pieceModal.fcMode .fc-card.side-left  .fc-tail { right: -8px; border-left: none; border-bottom: none; }
  #pieceModal.fcMode .fc-corner { position: absolute; width: 12px; height: 12px; border: 1px solid var(--gold-2); pointer-events: none; z-index: 4; }
  #pieceModal.fcMode .fc-corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  #pieceModal.fcMode .fc-corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
  #pieceModal.fcMode .fc-corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
  #pieceModal.fcMode .fc-corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

  #pieceModal.fcMode .fc-head { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px 11px; }
  #pieceModal.fcMode .fc-head-text { flex: 1; min-width: 0; }
  #pieceModal.fcMode .fc-name {
    margin: 0; font-family: var(--fc-serif); font-weight: 700; font-size: 22px; letter-spacing: .5px; line-height: 1;
    color: var(--bone); background: linear-gradient(180deg, #f5ebcf, #e0bf78 70%, #c5a056);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #pieceModal.fcMode .fc-role { margin-top: 5px; font-size: 9px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 700; color: var(--accent); }
  #pieceModal.fcMode .fc-close {
    width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; padding: 0; cursor: pointer;
    color: var(--ink-dim); border: 1px solid rgba(216,177,90,.18); border-radius: 50%; background: rgba(7,8,11,.5); transition: all 150ms;
  }
  #pieceModal.fcMode .fc-close:hover { color: var(--danger); border-color: rgba(194,90,74,.5); }
  #pieceModal.fcMode .fc-tags { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 11px; }
  #pieceModal.fcMode .fc-faction {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
    font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: #07080b;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 95%, white), color-mix(in srgb, var(--accent) 72%, black));
    box-shadow: 0 0 14px -4px var(--accent);
  }
  #pieceModal.fcMode .fc-rarity {
    width: 26px; height: 26px; display: grid; place-items: center; font-size: 14px; line-height: 1;
    color: var(--rar, var(--gold-1)); border: 1px solid color-mix(in srgb, var(--rar, var(--gold-1)) 45%, transparent);
    border-radius: 50%; background: rgba(20,16,8,.55);
  }
  #pieceModal.fcMode .fc-art {
    position: relative; margin: 0 12px; height: 168px; overflow: hidden; background-color: #06080b;
    border: 1px solid rgba(216,177,90,.5); box-shadow: inset 0 0 0 1px rgba(216,177,90,.12), inset 0 0 50px rgba(0,0,0,.5);
  }
  #pieceModal.fcMode .fc-art .fcArtMedia {
    position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; pointer-events: none;
  }
  #pieceModal.fcMode .fc-art .fcArtFallback {
    position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; font-size: 72px; color: #f3eadb; text-shadow: 0 4px 10px rgba(0,0,0,.82);
  }
  #pieceModal.fcMode .fc-art::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 50% 35%, var(--accent-soft), transparent 65%), linear-gradient(180deg, transparent 55%, rgba(7,8,11,.55) 100%);
  }
  #pieceModal.fcMode .fc-art-inner { position: absolute; inset: 5px; z-index: 2; border: 1px solid rgba(216,177,90,.14); pointer-events: none; }

  #pieceModal.fcMode .fc-power {
    --pk: var(--gold-1); --pk-soft: rgba(216,177,90,.5);
    margin: 12px 12px 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--pk) 12%, transparent), transparent 70%);
    border: 1px solid color-mix(in srgb, var(--pk) 22%, transparent); border-left: 2px solid var(--pk);
  }
  #pieceModal.fcMode .fc-power.kind-aktion  { --pk:#e6c067; --pk-soft:rgba(216,177,90,.55); }
  #pieceModal.fcMode .fc-power.kind-reaktiv { --pk:#e8746a; --pk-soft:rgba(216,90,74,.55); }
  #pieceModal.fcMode .fc-power.kind-passiv  { --pk:#6fb1ec; --pk-soft:rgba(111,177,236,.55); }
  #pieceModal.fcMode .fc-power.kind-none    { --pk:#9aa1a8; --pk-soft:rgba(154,161,168,.4); }
  #pieceModal.fcMode .fc-power-text { flex: 1; min-width: 0; }
  #pieceModal.fcMode .fc-power-kind { margin-bottom: 3px; font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--pk); }
  #pieceModal.fcMode .fc-power-name { font-family: var(--fc-serif); font-size: 16px; font-weight: 600; letter-spacing: .5px; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #pieceModal.fcMode .fc-power-ico {
    flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    color: var(--pk); border: 1px solid var(--pk-soft);
    background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--pk) 28%, transparent), transparent 70%), rgba(7,8,11,.5);
    box-shadow: 0 0 14px -5px var(--pk);
  }
  #pieceModal.fcMode .fc-power-ico.aktion { animation: fcGlow 2.8s ease-in-out infinite; }
  #pieceModal.fcMode .fc-desc {
    margin: 10px 12px 0; padding: 11px 13px; font-family: var(--fc-serif-body); font-size: 14px; line-height: 1.5; color: var(--ink);
    background: rgba(7,8,11,.4); border: 1px solid rgba(216,177,90,.1);
  }
  #pieceModal.fcMode .fc-desc b { color: var(--bone); font-weight: 600; }

  #pieceModal.fcMode .fc-foot { display: flex; align-items: stretch; margin: 14px 0 0; border-top: 1px solid rgba(216,177,90,.14); }
  #pieceModal.fcMode .fc-foot-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px;
    font-family: var(--fc-sans); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
    color: var(--ink-dim); background: none; border: 0; cursor: pointer; transition: all 160ms;
  }
  #pieceModal.fcMode .fc-foot-btn svg { opacity: .7; }
  #pieceModal.fcMode .fc-foot-btn:hover { color: var(--bone); background: rgba(216,177,90,.05); }
  #pieceModal.fcMode .fc-foot-btn:hover svg { opacity: 1; }
  #pieceModal.fcMode .fc-foot-btn.dossier { border-left: 1px solid rgba(216,177,90,.14); }
  #pieceModal.fcMode .fc-foot-btn.dossier:hover { color: var(--gold-1); }
  #pieceModal.fcMode .fc-foot-btn.zug .chev { display: inline-flex; transition: transform 280ms cubic-bezier(.2,.7,.3,1); }
  #pieceModal.fcMode .fc-foot-btn.zug.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
  #pieceModal.fcMode .fc-foot-btn.zug.on .chev { transform: rotate(90deg); }

  #pieceModal.fcMode .fc-zug-fly {
    position: absolute; top: 6px; width: 224px; padding: 12px; z-index: 19;
    background: linear-gradient(180deg, rgba(20,23,31,.99), rgba(9,11,15,.99));
    border: 1px solid rgba(216,177,90,.4); box-shadow: 0 24px 60px -16px rgba(0,0,0,.92), inset 0 0 0 1px rgba(216,177,90,.07);
    opacity: 0; pointer-events: none; transition: opacity 240ms ease, transform 300ms cubic-bezier(.2,.7,.3,1);
  }
  #pieceModal.fcMode .fc-zug-fly::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .7;
  }
  #pieceModal.fcMode .fc-card.fly-right .fc-zug-fly { left: calc(100% + 14px); transform: translateX(-12px) scale(.96); transform-origin: center left; }
  #pieceModal.fcMode .fc-card.fly-left  .fc-zug-fly { right: calc(100% + 14px); transform: translateX(12px) scale(.96); transform-origin: center right; }
  #pieceModal.fcMode .fc-zug-fly.open { opacity: 1; pointer-events: auto; transform: none; }
  #pieceModal.fcMode .fc-fly-tail {
    position: absolute; top: 30px; width: 12px; height: 12px; transform: rotate(45deg);
    background: linear-gradient(135deg, rgba(20,23,31,.99), rgba(14,16,22,.99)); border: 1px solid rgba(216,177,90,.4);
  }
  #pieceModal.fcMode .fc-card.fly-right .fc-fly-tail { left: -7px; border-right: none; border-top: none; }
  #pieceModal.fcMode .fc-card.fly-left  .fc-fly-tail { right: -7px; border-left: none; border-bottom: none; }
  #pieceModal.fcMode .fc-zug-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 10px; background: rgba(7,8,11,.55); border: 1px solid rgba(216,177,90,.14); }
  #pieceModal.fcMode .fc-zug-tabs:has(.fc-zug-tab:only-child) { grid-template-columns: 1fr; }
  #pieceModal.fcMode .fc-zug-tab { padding: 7px; font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--ink-dim); background: none; border: 0; cursor: pointer; transition: all 150ms; }
  #pieceModal.fcMode .fc-zug-tab:hover { color: var(--ink); }
  #pieceModal.fcMode .fc-zug-tab.on { color: #07080b; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 95%, white), color-mix(in srgb, var(--accent) 70%, black)); box-shadow: 0 0 14px -6px var(--accent); }
  #pieceModal.fcMode .fc-fly-cap { margin-top: 9px; font-family: var(--fc-serif-body); font-size: 12.5px; line-height: 1.4; text-align: center; color: var(--ink); }
  /* unser Brett im Flyout */
  #pieceModal.fcMode .fc-zug-fly .miniBoard,
  #pieceModal.fcMode .fc-zug-fly .effectMiniBoard { width: 100%; margin: 0 auto 6px; }
  #pieceModal.fcMode .fc-zug-fly .effectPreview { display: block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  #pieceModal.fcMode .fc-zug-fly .miniLegend { margin: 6px 0 0; color: var(--ink); }
  #pieceModal .effectCardMovement {
    position: relative;
    z-index: 1;
    padding: 7px;
    border: 2px solid rgba(0,0,0,.72);
    border-radius: 0 0 17px 17px;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.20)), #15161b;
  }
  #pieceModal .effectCardMovement:not([open]) {
    padding-bottom: 0;
  }
  #pieceModal .effectCardMovement > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    margin: -7px -7px 0;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #1b1512;
    background: color-mix(in srgb, var(--card-rank-tone, #d4af37) 52%, #e7dbc6);
    border-bottom: 1px solid rgba(0,0,0,.46);
    font: 900 10px/1 ui-sans-serif, system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .8px;
  }
  #pieceModal .effectCardMovement:not([open]) > summary {
    border-bottom: 0;
    border-radius: 0 0 15px 15px;
  }
  #pieceModal .effectCardMovement > summary::-webkit-details-marker {
    display: none;
  }
  #pieceModal .effectCardMovement > summary:hover {
    filter: brightness(1.06);
  }
  #pieceModal .effectCardMovement > summary:focus-visible {
    outline: 2px solid rgba(0,0,0,.55);
    outline-offset: -2px;
  }
  #pieceModal .effectCardMovement > summary .movementToggleIcon {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: 60% 60%;
    transition: transform .15s ease;
  }
  #pieceModal .effectCardMovement:not([open]) > summary .movementToggleIcon {
    transform: rotate(-45deg);
  }
  #pieceModal .effectCardMovement .movementBody {
    display: grid;
    gap: 6px;
    padding-top: 6px;
  }
  #pieceModal .effectCardMovement .effectPreview {
    order: initial;
    margin: 0;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #pieceModal .effectCardMovement .effectMiniBoard {
    width: 88px;
  }
  #pieceModal .effectCardMovement .effectPreview.textOnly {
    grid-template-columns: 1fr;
  }
  #pieceModal .effectCardMovement .effectPreviewText > span {
    font-size: 8.5px;
    letter-spacing: .75px;
  }
  #pieceModal .effectCardMovement .effectPreviewText p {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.28;
  }
  #pieceModal .movementBoardPanel {
    display: grid;
    justify-items: center;
  }
  #pieceModal .effectCardMovement .miniBoard:not(.effectMiniBoard) {
    width: 158px;
    margin: 0 auto 4px;
  }
  #pieceModal .effectCardMovement .miniLegend {
    color: #c8cbd0;
    margin: 0;
  }
  #pieceModal .effectCardFooter {
    align-items: center;
    min-height: 16px;
  }
  #pieceModal .heroRule.effectCard .royalNote {
    order: initial;
    margin: 0;
    padding: 5px 7px;
    border-radius: 0;
    background: rgba(212,175,55,.18);
    color: #3b2b07;
    border: 1px solid rgba(60,45,10,.38);
    font-size: 10.5px;
  }
  #pieceModal .heroRule.effectCard.cardSkin-undead {
    --undead-main: #00E6A8;
    --undead-deep: #007C66;
    --undead-glow: #5CFFD6;
    --undead-gold: #B88A3A;
    --undead-obsidian: #0B0F10;
    --undead-bone: #D8D4C6;
    position: relative;
    overflow: hidden;
    padding: 8px;
    border-radius: 11px;
    background:
      linear-gradient(145deg, rgba(184,138,58,.42), transparent 16% 84%, rgba(0,230,168,.22)),
      radial-gradient(circle at 50% 0%, rgba(92,255,214,.28), transparent 34%),
      linear-gradient(180deg, #17100a, var(--undead-obsidian) 42%, #030606);
    box-shadow:
      0 20px 42px rgba(0,0,0,.72),
      0 0 24px rgba(0,230,168,.20),
      inset 0 0 0 1px rgba(216,212,198,.13),
      inset 0 0 0 3px rgba(184,138,58,.58),
      inset 0 0 18px rgba(0,0,0,.78);
  }
  #pieceModal .heroRule.effectCard.cardSkin-undead::before,
  #pieceModal .heroRule.effectCard.cardSkin-undead::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }
  #pieceModal .heroRule.effectCard.cardSkin-undead::before {
    inset: -42%;
    border-radius: 50%;
    opacity: .30;
    background:
      conic-gradient(
        from 0deg,
        transparent 0deg 42deg,
        rgba(92,255,214,.72) 58deg,
        rgba(240,210,131,.58) 74deg,
        rgba(92,255,214,.18) 96deg,
        transparent 122deg 360deg
      );
    filter: blur(12px);
    transform: translateZ(0) rotate(0deg);
    will-change: transform;
    animation: undeadCardFrameSweep 8s linear infinite;
  }
  #pieceModal .heroRule.effectCard.cardSkin-undead::after {
    inset: -35% -18%;
    opacity: .28;
    background:
      radial-gradient(ellipse at 20% 35%, rgba(92,255,214,.28), transparent 24%),
      radial-gradient(ellipse at 82% 18%, rgba(0,124,102,.55), transparent 30%),
      repeating-linear-gradient(118deg, transparent 0 22px, rgba(216,212,198,.08) 23px 24px, transparent 25px 46px);
    background-size: 140% 140%, 155% 155%, 74px 74px;
    filter: blur(.4px);
    will-change: transform, opacity;
    animation: undeadCardMist 12s linear infinite;
  }
  #pieceModal .cardSkin-undead .effectCardInner {
    position: relative;
    z-index: 1;
    background-color: var(--undead-obsidian);
    background-image:
      radial-gradient(circle at 18% 8%, rgba(92,255,214,.22), transparent 20%),
      radial-gradient(circle at 88% 18%, rgba(0,124,102,.30), transparent 25%),
      radial-gradient(ellipse at 50% 72%, rgba(0,230,168,.10), transparent 42%),
      linear-gradient(160deg, rgba(216,212,198,.12), transparent 26%, rgba(0,0,0,.34) 78%),
      repeating-linear-gradient(145deg, rgba(216,212,198,.08) 0 1px, transparent 1px 15px),
      repeating-linear-gradient(35deg, rgba(0,230,168,.055) 0 1px, transparent 1px 20px);
    background-size: 120% 120%, 130% 130%, 115% 115%, auto, 42px 42px, 56px 56px;
    box-shadow:
      inset 0 0 0 2px rgba(0,0,0,.76),
      inset 0 0 0 5px rgba(184,138,58,.35),
      inset 0 0 30px rgba(0,230,168,.10),
      inset -2px -2px 0 rgba(216,212,198,.13);
    will-change: background-position;
    animation: undeadCardInnerFlow 9s ease-in-out infinite;
  }
  #pieceModal .cardSkin-undead .effectCardHeader,
  #pieceModal .cardSkin-undead .effectCardType {
    border-color: rgba(20,15,8,.88);
    background:
      linear-gradient(90deg, rgba(184,138,58,.20), transparent 18% 82%, rgba(0,230,168,.15)),
      radial-gradient(ellipse farthest-corner, #f0ebdd 45%, var(--undead-bone));
    box-shadow:
      -2px 0 0 rgba(0,0,0,.70),
      inset 0 0 0 1px rgba(255,255,255,.55),
      inset 0 -3px 0 rgba(58,45,22,.18),
      0 0 9px rgba(0,230,168,.16);
  }
  #pieceModal .cardSkin-undead .effectCardTitle strong,
  #pieceModal .cardSkin-undead .effectCardType strong {
    color: #17110a;
    text-shadow: 0 1px 0 rgba(255,255,255,.32);
  }
  #pieceModal .cardSkin-undead .effectCardTitle span {
    color: #4a3a1e;
  }
  #pieceModal .cardSkin-undead .typeBadge {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--card-accent, var(--undead-main)) 38%, #f4efe2), var(--undead-bone));
    border-color: rgba(8,8,6,.58);
    color: #121816;
    box-shadow:
      inset 0 -1px 0 rgba(0,0,0,.26),
      0 0 7px color-mix(in srgb, var(--card-accent, var(--undead-main)) 28%, transparent);
  }
  #pieceModal .cardSkin-undead .effectCardMeta span {
    background: rgba(216,212,198,.88);
    border-color: rgba(11,15,16,.34);
    color: #171612;
  }
  #pieceModal .cardSkin-undead .effectCardMeta span:last-child {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--card-accent, var(--undead-main)) 42%, #e8e0cf), #c9c2b4);
    box-shadow: 0 0 8px color-mix(in srgb, var(--card-accent, var(--undead-main)) 26%, transparent);
  }
  #pieceModal .cardSkin-undead .effectCardPortrait {
    border-color: rgba(184,138,58,.88);
    background:
      radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--card-accent, var(--undead-main)) 23%, transparent) 0 28%, transparent 58%),
      linear-gradient(180deg, rgba(92,255,214,.12), transparent 28%),
      linear-gradient(180deg, #121719, #050808 74%);
    box-shadow:
      inset 0 0 0 1px rgba(216,212,198,.18),
      inset 0 0 34px rgba(0,0,0,.68),
      0 0 13px rgba(0,230,168,.18);
  }
  #pieceModal .cardSkin-undead .effectCardPortrait::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(0,0,0,.38), transparent 16% 84%, rgba(0,0,0,.44)),
      radial-gradient(circle at 50% 8%, rgba(92,255,214,.16), transparent 28%);
    z-index: 2;
  }
  #pieceModal .cardSkin-undead .effectCardText {
    background:
      linear-gradient(180deg, rgba(255,255,255,.20), transparent 20%),
      var(--undead-bone);
    border-color: rgba(20,15,8,.72);
    color: #17110e;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.36),
      inset 0 0 18px rgba(0,124,102,.12);
  }
  #pieceModal .cardSkin-undead .effectCardStats,
  #pieceModal .cardSkin-undead .effectCardMovement {
    border-color: rgba(184,138,58,.66);
    background:
      radial-gradient(circle at 18% 8%, rgba(0,230,168,.13), transparent 30%),
      linear-gradient(180deg, rgba(216,212,198,.05), rgba(0,0,0,.22)),
      #101416;
    box-shadow:
      inset 0 0 0 1px rgba(92,255,214,.12),
      inset 0 0 18px rgba(0,0,0,.60);
  }
  #pieceModal .cardSkin-undead .effectCardStats span,
  #pieceModal .cardSkin-undead .effectPreviewText > span {
    color: color-mix(in srgb, var(--card-accent, var(--undead-main)) 62%, #d8d4c6);
  }
  #pieceModal .cardSkin-undead .effectCardStats strong,
  #pieceModal .cardSkin-undead .effectPreviewText p,
  #pieceModal .cardSkin-undead .miniLegend {
    color: #f1eee4;
  }
  #pieceModal .cardSkin-undead .effectCardMovement > summary {
    color: #111716;
    background:
      linear-gradient(90deg, var(--undead-gold), color-mix(in srgb, var(--card-accent, var(--undead-main)) 28%, var(--undead-bone)) 54%, var(--undead-gold));
    border-bottom-color: rgba(0,0,0,.58);
  }
  #pieceModal .cardSkin-undead .miniBoard {
    border-color: rgba(184,138,58,.82);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.72),
      0 0 12px color-mix(in srgb, var(--card-accent, var(--undead-main)) 18%, transparent);
  }
  #pieceModal .cardSkin-undead .effectCardFooter {
    color: rgba(216,212,198,.86);
    text-shadow: 0 1px 2px rgba(0,0,0,.82);
  }
  @keyframes undeadCardFrameSweep {
    0% {
      transform: translateZ(0) rotate(0deg);
    }
    100% {
      transform: translateZ(0) rotate(360deg);
    }
  }
  @keyframes undeadCardMist {
    0% {
      transform: translate3d(-3%, -2%, 0) rotate(0deg);
      background-position: 0% 45%, 100% 18%, 0 0;
      opacity: .22;
    }
    50% {
      transform: translate3d(3%, 2%, 0) rotate(1deg);
      background-position: 78% 52%, 18% 86%, 37px 52px;
      opacity: .34;
    }
    100% {
      transform: translate3d(-3%, -2%, 0) rotate(0deg);
      background-position: 140% 45%, -30% 18%, 74px 104px;
      opacity: .22;
    }
  }
  @keyframes undeadCardInnerFlow {
    0%, 100% {
      background-position: 0% 0%, 100% 15%, 50% 70%, 0 0, 0 0, 0 0;
    }
    50% {
      background-position: 16% 10%, 82% 24%, 54% 62%, 0 0, 18px 12px, -22px 16px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #pieceModal .heroRule.effectCard.cardSkin-undead,
    #pieceModal .heroRule.effectCard.cardSkin-undead::before,
    #pieceModal .heroRule.effectCard.cardSkin-undead::after,
    #pieceModal .cardSkin-undead .effectCardInner {
      animation: none;
    }
  }
  #pieceModal .heroRule.effectCard.cardSkin-pirate {
    --pirate-cyan: #20D7E6;
    --pirate-ice: #B8F8FF;
    --pirate-gold: #D6B36A;
    --pirate-deep: #08151D;
    --pirate-charcoal: #0B121A;
    --pirate-ivory: #F4EFE2;
    --pirate-violet: #675CFF;
    --pirate-shell: var(--pirate-charcoal);
    position: relative;
    overflow: hidden;
    padding: 8px;
    border-radius: 11px;
    background:
      linear-gradient(145deg, rgba(214,179,106,.52), transparent 16% 84%, rgba(32,215,230,.30)),
      radial-gradient(circle at 50% -4%, rgba(184,248,255,.32), transparent 34%),
      radial-gradient(ellipse at 18% 90%, rgba(103,92,255,.24), transparent 38%),
      linear-gradient(180deg, #0f1923, var(--pirate-deep) 56%, #02070b);
    box-shadow:
      0 20px 42px rgba(0,0,0,.66),
      0 0 26px rgba(32,215,230,.18),
      inset 0 0 0 1px rgba(184,248,255,.18),
      inset 0 0 0 3px rgba(214,179,106,.62),
      inset 0 0 22px rgba(0,0,0,.72);
  }
  #pieceModal .heroRule.effectCard.cardSkin-pirate::before,
  #pieceModal .heroRule.effectCard.cardSkin-pirate::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }
  #pieceModal .heroRule.effectCard.cardSkin-pirate::before {
    inset: -35%;
    opacity: .30;
    background:
      conic-gradient(
        from 0deg,
        transparent 0deg 34deg,
        rgba(32,215,230,.72) 48deg,
        rgba(184,248,255,.42) 62deg,
        rgba(214,179,106,.62) 78deg,
        rgba(103,92,255,.26) 96deg,
        transparent 118deg 360deg
      );
    filter: blur(11px);
    transform: translateZ(0) rotate(0deg);
    will-change: transform;
    animation: pirateCardFrameSweep 9s linear infinite;
  }
  #pieceModal .heroRule.effectCard.cardSkin-pirate::after {
    inset: -18% -12%;
    opacity: .32;
    background:
      radial-gradient(ellipse at 22% 22%, rgba(184,248,255,.24), transparent 28%),
      radial-gradient(ellipse at 76% 18%, rgba(32,215,230,.24), transparent 31%),
      radial-gradient(ellipse at 70% 84%, rgba(103,92,255,.18), transparent 34%),
      repeating-linear-gradient(116deg, transparent 0 24px, rgba(184,248,255,.08) 25px 26px, transparent 27px 48px);
    background-size: 135% 135%, 150% 150%, 120% 120%, 82px 82px;
    filter: blur(.3px);
    will-change: transform, background-position, opacity;
    animation: pirateEffectCurrent 13s ease-in-out infinite;
  }
  #pieceModal .cardSkin-pirate .effectCardInner {
    position: relative;
    z-index: 1;
    background-color: var(--pirate-shell);
    background-image:
      radial-gradient(circle at 20% 8%, rgba(184,248,255,.20), transparent 21%),
      radial-gradient(circle at 82% 18%, rgba(32,215,230,.24), transparent 28%),
      radial-gradient(ellipse at 52% 78%, rgba(103,92,255,.16), transparent 42%),
      linear-gradient(160deg, rgba(244,239,226,.10), transparent 27%, rgba(0,0,0,.36) 78%),
      repeating-linear-gradient(0deg, rgba(184,248,255,.055) 0 1px, transparent 1px 18px),
      repeating-linear-gradient(42deg, rgba(214,179,106,.075) 0 1px, transparent 1px 22px);
    background-size: 120% 120%, 130% 130%, 120% 120%, auto, 44px 44px, 58px 58px;
    box-shadow:
      inset 0 0 0 2px rgba(0,0,0,.70),
      inset 0 0 0 5px rgba(214,179,106,.34),
      inset 0 0 30px rgba(32,215,230,.10),
      inset -2px -2px 0 rgba(244,239,226,.13);
    will-change: background-position;
    animation: pirateCardInnerTide 10s ease-in-out infinite;
  }
  #pieceModal .cardSkin-pirate .effectCardHeader,
  #pieceModal .cardSkin-pirate .effectCardType {
    border-color: rgba(42,25,14,.82);
    background:
      linear-gradient(90deg, rgba(214,179,106,.30), transparent 18% 82%, rgba(32,215,230,.18)),
      var(--pirate-ivory);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.42),
      inset 0 -3px 0 rgba(8,21,29,.14),
      0 0 10px rgba(32,215,230,.10);
  }
  #pieceModal .cardSkin-pirate .effectCardTitle strong,
  #pieceModal .cardSkin-pirate .effectCardType strong {
    color: #111820;
  }
  #pieceModal .cardSkin-pirate .effectCardTitle span {
    color: #4b4535;
  }
  #pieceModal .cardSkin-pirate .typeBadge {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pirate-ice) 32%, #f6e7b2), var(--pirate-gold));
    border-color: rgba(36,21,14,.58);
    color: #131820;
    box-shadow:
      inset 0 -1px 0 rgba(0,0,0,.24),
      0 0 8px rgba(32,215,230,.18);
  }
  #pieceModal .cardSkin-pirate .effectCardMeta span {
    background: rgba(244,239,226,.90);
    border-color: rgba(8,21,29,.28);
    color: #151a20;
  }
  #pieceModal .cardSkin-pirate .effectCardMeta span:last-child {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pirate-cyan) 34%, #f4efe2), #d8c485);
    box-shadow: 0 0 8px rgba(32,215,230,.18);
  }
  #pieceModal .cardSkin-pirate .effectCardPortrait {
    border-color: rgba(214,179,106,.88);
    background:
      radial-gradient(circle at 50% 42%, rgba(32,215,230,.28) 0 28%, transparent 58%),
      radial-gradient(ellipse at 70% 16%, rgba(103,92,255,.18), transparent 35%),
      linear-gradient(180deg, #122c38, #06131b 74%);
    box-shadow:
      inset 0 0 0 1px rgba(184,248,255,.18),
      inset 0 0 34px rgba(0,0,0,.60),
      0 0 14px rgba(32,215,230,.16);
  }
  #pieceModal .cardSkin-pirate .effectCardPortrait::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
      linear-gradient(90deg, rgba(0,0,0,.34), transparent 18% 82%, rgba(0,0,0,.38)),
      radial-gradient(circle at 50% 10%, rgba(184,248,255,.16), transparent 30%),
      repeating-linear-gradient(124deg, transparent 0 18px, rgba(32,215,230,.055) 19px 20px, transparent 21px 36px);
  }
  #pieceModal .cardSkin-pirate .effectCardText {
    background:
      linear-gradient(180deg, rgba(255,255,255,.22), transparent 22%),
      var(--pirate-ivory);
    border-color: rgba(8,21,29,.62);
    color: #151a20;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.35),
      inset 0 0 18px rgba(32,215,230,.08);
  }
  #pieceModal .cardSkin-pirate .effectCardStats,
  #pieceModal .cardSkin-pirate .effectCardMovement {
    border-color: rgba(214,179,106,.66);
    background:
      radial-gradient(circle at 18% 8%, rgba(32,215,230,.15), transparent 30%),
      radial-gradient(ellipse at 82% 86%, rgba(103,92,255,.12), transparent 36%),
      linear-gradient(180deg, rgba(244,239,226,.05), rgba(0,0,0,.22)),
      #0d1d27;
    box-shadow:
      inset 0 0 0 1px rgba(184,248,255,.10),
      inset 0 0 18px rgba(0,0,0,.58);
  }
  #pieceModal .cardSkin-pirate .effectCardStats span,
  #pieceModal .cardSkin-pirate .effectPreviewText > span {
    color: color-mix(in srgb, var(--card-accent, var(--pirate-cyan)) 62%, var(--pirate-ivory));
  }
  #pieceModal .cardSkin-pirate .effectCardStats strong,
  #pieceModal .cardSkin-pirate .effectPreviewText p,
  #pieceModal .cardSkin-pirate .miniLegend {
    color: #f4ead8;
  }
  #pieceModal .cardSkin-pirate .effectCardMovement > summary {
    color: #111820;
    background: linear-gradient(90deg, var(--pirate-gold), color-mix(in srgb, var(--pirate-cyan) 18%, var(--pirate-ivory)) 54%, var(--pirate-gold));
    border-bottom-color: rgba(0,0,0,.52);
  }
  #pieceModal .cardSkin-pirate .miniBoard {
    border-color: rgba(214,179,106,.82);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.66),
      0 0 12px rgba(32,215,230,.18);
  }
  #pieceModal .cardSkin-pirate .effectCardFooter {
    color: rgba(244,239,226,.84);
    text-shadow: 0 1px 2px rgba(0,0,0,.78);
  }
  @keyframes pirateCardFrameSweep {
    0% {
      transform: translateZ(0) rotate(0deg);
    }
    100% {
      transform: translateZ(0) rotate(360deg);
    }
  }
  @keyframes pirateEffectCurrent {
    0%, 100% {
      transform: translate3d(-2%, -1%, 0) rotate(-1deg);
      background-position: 0% 30%, 100% 15%, 20% 90%, 0 0;
      opacity: .24;
    }
    50% {
      transform: translate3d(2%, 2%, 0) rotate(1deg);
      background-position: 72% 48%, 18% 74%, 82% 40%, 41px 54px;
      opacity: .38;
    }
  }
  @keyframes pirateCardInnerTide {
    0%, 100% {
      background-position: 0% 0%, 100% 14%, 50% 72%, 0 0, 0 0, 0 0;
    }
    50% {
      background-position: 16% 10%, 82% 24%, 54% 62%, 0 0, 18px 12px, -24px 18px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .effectChip.deck-pirate.effectActive::after,
    #pieceModal .heroRule.effectCard.cardSkin-pirate::before,
    #pieceModal .heroRule.effectCard.cardSkin-pirate::after,
    #pieceModal .cardSkin-pirate .effectCardInner {
      animation: none;
    }
  }
  #pieceModal details.techDetails {
    margin-top: 8px;
    background: rgba(25,25,30,.92);
  }

  #winnerBanner {
    width: var(--board-size);
    background: linear-gradient(90deg, rgba(212,175,55,0.25), rgba(212,175,55,0.08));
    border: 1px solid #d4af37;
    border-radius: 6px;
    padding: 10px 14px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
  }
  #winnerBanner.show { display: flex; }
  #winnerBanner .who { font-weight: 700; }
  #winnerBanner button { font-size: 11px; padding: 4px 8px; }

  /* Claude design integration: scoped to app chrome, start/profile/lab pages and side panels.
     The existing #board/#boardWrap/.sq/.chip implementation above remains the protected board skin. */
  :root {
    --mp-bg-0: #07080b;
    --mp-bg-1: #0b0d12;
    --mp-bg-2: #11141b;
    --mp-bg-3: #181c25;
    /* Echte Hoehe der Start-Topbar (Inhalt = zweizeilige Stat-Spalten ~61px).
       Der Hero zieht EXAKT diesen Wert ab, damit der erste Screen genau passt. */
    --mp-topbar-h: 61px;
    --mp-panel: rgba(18, 21, 28, .78);
    --mp-panel-2: rgba(12, 14, 19, .92);
    --mp-gold-1: #d8b15a;
    --mp-gold-2: #c89a3e;
    --mp-gold-3: #8a6a25;
    --mp-gold-glow: rgba(216, 177, 90, .35);
    --mp-teal-1: #6ee7d8;
    --mp-teal-2: #4dd0c4;
    --mp-teal-3: #239b95;
    --mp-teal-glow: rgba(77, 208, 196, .45);
    /* Economy-Farbidentitaet (Claude-Design "Grimoire"): Souls=Amethyst-Violett,
       Aura=Rosé-Magenta (Stufe/Fortschritt), Relics=Ruby-Rot (Premium). */
    --mp-soul-1: #c6a0ef;
    --mp-soul-2: #a273dd;
    --mp-soul-3: #6f49a8;
    --mp-soul-glow: rgba(162, 115, 221, 0.5);
    --mp-soul-gem: linear-gradient(135deg, #ddc4f5, #7d51b8);
    --mp-aura-1: #f0a6c6;
    --mp-aura-2: #d9709f;
    --mp-aura-3: #9a3f6a;
    --mp-aura-glow: rgba(224, 122, 168, 0.5);
    --mp-relic-1: #f4757c;
    --mp-relic-2: #d83b45;
    --mp-relic-3: #8b2a26;
    --mp-relic-glow: rgba(216, 59, 69, 0.55);
    --mp-relic-gem: linear-gradient(135deg, #ffb0b4, #b2272c);
    --mp-parchment: #ece2c8;
    --mp-bone: #e8dec5;
    --mp-ink: #aea58c;
    --mp-ink-dim: #847b65;
    --mp-ink-faint: #4a4537;
    --mp-danger: #c25a4a;
    --mp-serif: "Cinzel", "Cormorant Garamond", Georgia, serif;
    --mp-serif-body: "Cormorant Garamond", Georgia, serif;
    --mp-sans: "Manrope", system-ui, sans-serif;
    --mp-mono: "JetBrains Mono", ui-monospace, monospace;
    --side-nav-width: 280px;
    --rail-size: clamp(104px, 10.5vw, 184px);
    --effect-chip-size: clamp(46px, calc(var(--rail-size) * .48), 72px);
  }

  /* ── Economy-Gems: EINE Quelle der Wahrheit, projektweit verwendbar ─────────
     Souls = "Seelen-Tropfen" (Tropfen-Silhouette), Farbe ueber --mp-soul-*
       (testweise Amethyst; zurueck auf Teal = nur die --mp-soul-* Tokens in
       :root auf die alten Teal-Werte flippen, Form bleibt).
     Relics = Ruby-Hexagon (--mp-relic-*).
     Beide als leere Inline-Spans (KEIN ◆/⬥-Glyph mehr). */
  .soul-gem,
  .relic-gem {
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: -1px;
    flex-shrink: 0;
  }
  .soul-gem {
    border-radius: 0 50% 50% 50%;   /* scharfe Spitze oben-links … */
    transform: rotate(45deg);        /* … nach oben gedreht = Tropfen */
    background: var(--mp-soul-gem);
    box-shadow: 0 0 6px var(--mp-soul-glow);
  }
  .relic-gem {
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background: var(--mp-relic-gem);
    box-shadow: 0 0 8px var(--mp-relic-glow);
  }

  body {
    background:
      radial-gradient(ellipse 80% 50% at 70% 10%, rgba(77, 208, 196, .08), transparent 60%),
      radial-gradient(ellipse 60% 40% at 20% 90%, rgba(216, 177, 90, .06), transparent 60%),
      var(--mp-bg-0);
    color: var(--mp-parchment);
    font-family: var(--mp-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  #board,
  #board * {
    font-family: ui-sans-serif, system-ui, sans-serif;
  }

  header.sideNav {
    padding: 0;
    gap: 0;
    background: linear-gradient(180deg, rgba(20, 23, 31, .95), rgba(10, 11, 15, .98));
    border-right: 1px solid rgba(216, 177, 90, .15);
    box-shadow: none;
    overflow: hidden;
  }
  header.sideNav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(216, 177, 90, .04) 50%, transparent);
    pointer-events: none;
  }
  .sideBrand {
    position: relative;
    gap: 14px;
    min-height: auto;
    padding: 22px 22px 18px;
    border-bottom: 1px solid rgba(216, 177, 90, .10);
  }
  .brandMark {
    width: 46px;
    border-color: var(--mp-gold-3);
    border-radius: 0;
    background: linear-gradient(135deg, #1a1f2a, #0d1015);
    color: var(--mp-gold-1);
    font-family: var(--mp-serif);
    font-size: 15px;
    letter-spacing: 1px;
    box-shadow: inset 0 0 0 1px rgba(216, 177, 90, .15), 0 0 16px rgba(77, 208, 196, .18);
  }
  header.sideNav h1 {
    font-family: var(--mp-serif);
    font-size: 17px;
    letter-spacing: 2.5px;
    color: var(--mp-bone);
  }
  .brandBlock span {
    margin-top: 6px;
    color: var(--mp-teal-2);
    font-size: 9.5px;
    letter-spacing: 2px;
    white-space: nowrap;
  }
  .sideNavToggle {
    top: 92px;
    right: 16px;
    border-radius: 0;
    border-color: rgba(216, 177, 90, .20);
    background: rgba(11, 13, 18, .72);
    color: var(--mp-gold-1);
  }
  .sideNavList {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 36px 0 0;
    padding: 18px 12px;
  }
  .sideNavList::before {
    content: "Client";
    padding: 14px 14px 8px;
    color: var(--mp-ink-dim);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
  }
  .sideNavList button {
    min-height: 42px;
    grid-template-columns: 18px 1fr auto;
    gap: 14px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 0;
    color: var(--mp-ink);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .6px;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
  }
  .sideNavList button .navIcon {
    color: var(--mp-gold-2);
  }
  .sideNavList button .navLabel {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
  .sideNavList button:hover,
  .sideNavList button:focus-visible {
    color: var(--mp-bone);
    background: rgba(216, 177, 90, .04);
    border-color: rgba(216, 177, 90, .10);
  }
  .sideNavList button.is-current {
    color: var(--mp-bone);
    background: linear-gradient(90deg, rgba(77, 208, 196, .08), transparent 80%);
    border-color: rgba(77, 208, 196, .18);
  }
  .sideNavList button.is-current::before {
    inset: 0 auto 0 -1px;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--mp-teal-2) 30%, var(--mp-teal-2) 70%, transparent);
    box-shadow: 0 0 12px rgba(77, 208, 196, .45);
  }
  .sideFooter {
    position: relative;
    margin-top: auto;
    gap: 10px;
    padding: 0 16px 16px;
  }
  .sideSearch,
  .sideUser {
    padding: 11px 12px;
    border: 1px solid rgba(216, 177, 90, .12);
    background: rgba(11, 13, 18, .70);
    color: var(--mp-ink);
    font-size: 11px;
    letter-spacing: .4px;
  }
  .sideUser {
    position: relative;
  }
  .sideUser::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--mp-gold-2), transparent);
  }
  .sideAvatar {
    width: 34px;
    border-color: var(--mp-gold-3);
    border-radius: 0;
    background: linear-gradient(135deg, #2a313e, #14171f);
    color: var(--mp-gold-1);
  }
  .sideAvatar + span {
    color: var(--mp-bone);
  }
  #modeBadge {
    border-radius: 0;
    border-color: rgba(77, 208, 196, .22);
    background: rgba(35, 155, 149, .06);
    color: var(--mp-ink);
    font-size: 11px;
    letter-spacing: .4px;
  }
  .sideUtility {
    border-top: 1px solid rgba(216, 177, 90, .10);
    padding: 12px 0 0;
    color: var(--mp-ink-dim);
  }

  .modeScreen {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background:
      radial-gradient(ellipse 50% 70% at 75% 50%, rgba(77, 208, 196, .10), transparent 60%),
      radial-gradient(ellipse 70% 100% at 50% 100%, rgba(0, 0, 0, .60), transparent 70%),
      radial-gradient(ellipse 100% 60% at 50% 0%, rgba(0, 0, 0, .50), transparent 60%),
      var(--mp-bg-0);
  }
  body:not(.mode-select) .startTopbar {
    display: none;
  }
  .startPage {
    width: 100%;
    max-width: none;
    /* Nur die UNTEREN Abschnitte zentrieren: Inhalt auf --home-content begrenzt, per
       --home-gutter eingerückt (responsiv, wie Rangliste). Die Full-Bleed-Hintergründe
       + Trennlinien der Abschnitte (margin:0 -64px) bleiben volle Breite. Hero + Queue
       (obere 2-Spalten-Zone) bleiben unberührt bei 64px. */
    --home-content: 1220px;
    --home-gutter: max(64px, calc((100vw - var(--side-nav-width) - var(--home-content)) / 2));
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 0 28px;
    padding: 0 64px 80px;
  }
  .startTopbar {
    position: sticky;
    top: 0;
    z-index: 6;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: var(--mp-topbar-h);
    padding: 14px 64px;
    border-bottom: 1px solid rgba(216, 177, 90, .12);
    background: linear-gradient(180deg, rgba(7, 8, 11, .92) 0%, rgba(7, 8, 11, .55) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--mp-ink-dim);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
  }
  .startCrumb span {
    margin: 0 10px;
    color: var(--mp-gold-3);
  }
  .startCrumb strong {
    color: var(--mp-teal-1);
  }
  .startStats {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  /* Nur die direkten Stat-Wrapper als Spalten — NICHT die verschachtelten
     Wallet-Wert-Spans (#walletCurrency/#walletShards), sonst bricht "⬥ 0" um. */
  .startStats > span {
    display: grid;
    gap: 2px;
    justify-items: end;
    color: var(--mp-bone);
    font-family: var(--mp-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .5px;
  }
  .startStats em span { white-space: nowrap; }
  .startStats b {
    color: var(--mp-ink-dim);
    font-family: var(--mp-sans);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .startStats em {
    font-style: normal;
    color: var(--mp-bone);
    font-family: var(--mp-mono);
    font-size: 12.5px;
    letter-spacing: .5px;
  }
  .startStats em.gold { color: var(--mp-gold-1); }
  .startStats em.teal { color: var(--mp-teal-1); }
  /* Wallet-Economy: Souls = Amethyst, Relics = Ruby (eigene Klassen, damit der
     Status-Punkt „● Online" weiter teal bleibt). */
  .startStats em.soul { color: var(--mp-soul-1); }
  .startStats em.relic { color: var(--mp-relic-1); }
  .startStats em .soul-gem,
  .startStats em .relic-gem { margin-right: 3px; }
  .startBackdrop::before,
  .startBackdrop::after {
    display: none;
  }
  .startShard {
    border-radius: 0;
    border-color: rgba(216, 177, 90, .18);
    background: linear-gradient(150deg, rgba(216, 177, 90, .16), transparent 28%), rgba(7, 8, 11, .40);
  }
  .startBoardPreview,
  .previewPiece,
  .startShard {
    display: none !important;
  }

  /* ===== Hero chess board (Claude design parity) ===== */
  .heroBoardStage {
    position: absolute;
    right: -160px;
    top: 50%;
    transform: translateY(-50%);
    width: min(78vw, 980px);
    height: min(78vw, 980px);
    z-index: 1;
    perspective: 2200px;
    perspective-origin: 50% 35%;
    pointer-events: none;
  }
  .heroBoardFrame {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    border: 1px solid var(--mp-gold-2, #c89a3e);
    background:
      linear-gradient(135deg, rgba(240, 210, 131, .17), transparent 24% 76%, rgba(10, 200, 185, .13)),
      linear-gradient(180deg, #1b1820, #0b0f15 68%, #050607);
    transform: rotateX(38deg) rotateZ(-3deg);
    transform-style: preserve-3d;
    box-shadow:
      0 80px 120px -20px rgba(0, 0, 0, .95),
      0 30px 60px -10px rgba(0, 0, 0, .7),
      0 0 0 3px #0a0a0a,
      0 0 0 4px var(--mp-gold-3, #8a6a25),
      inset 0 0 0 1px rgba(216, 177, 90, .55),
      inset 0 0 80px rgba(0, 0, 0, .55);
  }
  .heroBoardOrnament {
    position: absolute;
    z-index: 4;
    width: 8px;
    height: 8px;
    background: var(--mp-gold-1, #d8b15a);
    box-shadow: 0 0 6px rgba(216, 177, 90, .35);
    transform: rotate(45deg);
    pointer-events: none;
  }
  .heroBoardOrnament-tl { top: 2px;    left: 2px; }
  .heroBoardOrnament-tr { top: 2px;    right: 2px; }
  .heroBoardOrnament-bl { bottom: 2px; left: 2px; }
  .heroBoardOrnament-br { bottom: 2px; right: 2px; }
  .heroBoardGrid {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 1px;
    padding: 4px;
    border: 2px solid var(--rift-gold);
    border-radius: 7px;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 50%, rgba(10, 200, 185, .24), transparent 46%),
      linear-gradient(135deg, #c89b3c, #3a2a13 34%, #0a1117 50%, #785a28 77%, #f0d283);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .86),
      0 0 22px rgba(10, 200, 185, .22),
      inset 0 0 0 1px rgba(240, 210, 131, .22),
      inset 0 0 28px rgba(0, 0, 0, .70);
  }
  .heroBoardGrid::before,
  .heroBoardGrid::after {
    content: "";
    position: absolute;
    inset: 4px;
    pointer-events: none;
  }
  .heroBoardGrid::before {
    z-index: 6;
    border: 1px solid rgba(240, 210, 131, .22);
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, .42),
      inset 0 0 32px rgba(0, 0, 0, .46);
  }
  .heroBoardGrid::after {
    z-index: 7;
    opacity: .22;
    background:
      linear-gradient(90deg, transparent calc(50% - 1px), rgba(10, 200, 185, .45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(0deg, transparent calc(50% - 1px), rgba(10, 200, 185, .45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(240, 210, 131, .35) 16% 17%, transparent 18% 100%);
    mix-blend-mode: screen;
  }
  .heroBoardTile {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(circle at 50% 42%, rgba(10, 200, 185, .08), transparent 42%),
      linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 28% 74%, rgba(0, 0, 0, .28)),
      repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 14px),
      var(--dark);
  }
  .heroBoardTile.light {
    background:
      radial-gradient(circle at 48% 44%, rgba(240, 210, 131, .10), transparent 45%),
      linear-gradient(135deg, rgba(255, 255, 255, .05), transparent 30% 70%, rgba(0, 0, 0, .18)),
      repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 13px),
      var(--light);
  }
  .heroBoardTile::after {
    content: "";
    position: absolute;
    inset: 9%;
    border: 1px solid rgba(240, 210, 131, .11);
    opacity: .7;
    pointer-events: none;
    z-index: 1;
  }
  .heroBoardTile.selected {
    box-shadow: inset 0 0 0 1px rgba(77, 208, 196, .7), inset 0 0 24px rgba(77, 208, 196, .3);
  }
  .heroBoardTile.selected::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      radial-gradient(ellipse 70% 70% at 50% 50%, rgba(77, 208, 196, .35), rgba(35, 155, 149, .08) 60%, transparent);
    pointer-events: none;
  }
  .heroBoardTile.target-move::before,
  .heroBoardTile.target-effect::before,
  .heroBoardTile.target-capture::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border: 0;
    border-radius: 0;
    pointer-events: none;
    animation: boardTargetPulse 1.6s ease-in-out infinite;
  }
  .heroBoardTile.target-move::before {
    color: #d8b15a;
    background:
      radial-gradient(circle, rgba(216, 177, 90, .92) 0 8%, rgba(216, 177, 90, .38) 9% 13%, transparent 14%);
  }
  .heroBoardTile.target-effect::before {
    color: #4dd0c4;
    background:
      radial-gradient(circle, rgba(110, 231, 216, .92) 0 8%, rgba(77, 208, 196, .38) 9% 13%, transparent 14%);
  }
  .heroBoardTile.target-capture::before {
    color: #e26a6a;
    background:
      radial-gradient(circle, rgba(226, 106, 106, .92) 0 8%, rgba(194, 90, 74, .40) 9% 13%, transparent 14%);
  }
  .heroBoardCoord {
    position: absolute;
    z-index: 3;
    color: rgba(216, 177, 90, .62);
    font-family: var(--mp-mono, ui-monospace, monospace);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .5px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .80);
    pointer-events: none;
  }
  .heroBoardCoord-rank { top: 3px;   left: 4px; }
  .heroBoardCoord-file { bottom: 3px; right: 4px; }
  .heroBoardTile.light .heroBoardCoord { color: rgba(216, 177, 90, .78); }
  .heroBoardPiece {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  .heroBoardPiece img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    transform: rotateX(-38deg) translateY(-19%) translateZ(8px);
    transform-origin: center bottom;
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .75));
    transition: transform .18s ease, filter .18s ease;
  }
  .heroBoardPiece.highlight img {
    animation: pieceFocusPulse 1.8s ease-in-out infinite;
  }
  /* Angewählte eigene Figur „hochheben" (wie beim echten Spiel). */
  .heroBoardPiece.isLifted img {
    transform: rotateX(-38deg) translateY(-32%) translateZ(38px) scale(1.07);
    filter:
      drop-shadow(0 26px 16px rgba(0, 0, 0, .82))
      drop-shadow(0 0 12px rgba(77, 208, 196, .55));
  }
  /* Original verstecken, solange die fliegende Kopie unterwegs ist. */
  .heroBoardPiece.isMoving { opacity: 0; }