/* HP pips above chip */
  .chip .hpPips {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
    z-index: 4;
    pointer-events: none;
  }
  .hpPip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c8324d;
    box-shadow: 0 0 4px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.35);
  }
  .hpPip.spent {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(200,50,77,.55);
  }
  .hpPips-healthy .hpPip:not(.spent) { background: #52c66f; box-shadow: 0 0 4px rgba(82,198,111,.55), inset 0 0 0 1px rgba(255,255,255,.35); }
  .hpPips-wounded .hpPip:not(.spent) { background: #d4a52f; box-shadow: 0 0 4px rgba(212,165,47,.55), inset 0 0 0 1px rgba(255,255,255,.35); }
  .hpPips-critical .hpPip:not(.spent) { background: #c8324d; animation: hpCritical 1.1s ease-in-out infinite; }
  @keyframes hpCritical {
    0%, 100% { box-shadow: 0 0 4px rgba(200,50,77,.55), inset 0 0 0 1px rgba(255,255,255,.35); }
    50%      { box-shadow: 0 0 10px rgba(200,50,77,.95), inset 0 0 0 1px rgba(255,255,255,.55); }
  }

  /* Cooldown lock (WA after move) */
  .chip .cooldownBadge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(20,20,28,.92);
    color: #ffd66b;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(255,214,107,.55);
  }
  .sq.cooldownBlocked { box-shadow: inset 0 0 0 2px rgba(255,214,107,.55); }

  /* Respawn-used marker (P_z) */
  .chip .respawnSpentBadge {
    position: absolute;
    bottom: -5px;
    left: -5px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(20,20,28,.92);
    color: #cfcfcf;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
    text-decoration: line-through;
  }
  .chip .statusBadge {
    position: absolute;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(20, 20, 28, .94);
    color: var(--badge-tone, #ddd);
    border: 1px solid color-mix(in srgb, var(--badge-tone, #888) 65%, var(--border));
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
    box-shadow: 0 0 5px color-mix(in srgb, var(--badge-tone, #888) 45%, transparent);
  }
  .chip .statusBadge-label { font-size: 10px; font-weight: 700; }
  .chip .statusBadge-top-left    { top: -5px; left: -5px; }
  .chip .statusBadge-top-right   { top: -5px; right: -5px; }
  .chip .statusBadge-bottom-left { bottom: -5px; left: -5px; }
  .chip .statusBadge-bottom-right{ bottom: -5px; right: -5px; }

  /* Persistente Markierung: Figur steht gerade unter einer fremden Passiv-Aura.
     Dezenter Pfeil oben-links — ▴ verstaerkt (buff), ▾ geschwaecht (debuff). */
  .chip .passiveAuraBadge {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(18,18,26,.9);
    font-size: 10px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
  }
  .chip .passiveAuraBadge-buff {
    color: #6ee7d8;
    box-shadow: 0 0 6px rgba(110,231,216,.5);
  }
  .chip .passiveAuraBadge-debuff {
    color: #d98bbf;
    box-shadow: 0 0 6px rgba(200,110,170,.55);
  }

  /* One-shot flash on squares affected by an ability event */
  .sq.abilityFlash {
    animation: abilityFlash 1.1s ease-out 1;
  }
  .sq.abilityFlash-reflect { --flash-color: #7db8ff; }
  .sq.abilityFlash-respawn { --flash-color: #7bbf9a; }
  .sq.abilityFlash-poison { --flash-color: #5ac08c; }
  .sq.abilityFlash-ambush { --flash-color: #9d6cd9; }
  .sq.abilityFlash-convert { --flash-color: #9d6cd9; }
  .sq.abilityFlash-sideSwitch { --flash-color: #b03050; }
  .sq.abilityFlash-extraTurn { --flash-color: #d4af37; }
  .sq.abilityFlash-soulAnchor { --flash-color: #7bbf9a; }
  .sq.abilityFlash-swapKing { --flash-color: #9d6cd9; }
  .sq.abilityFlash-spyReplace { --flash-color: #b03050; }
  .sq.abilityFlash-pushFriendly { --flash-color: #9d6cd9; }
  .sq.abilityFlash-cannonFire { --flash-color: #e8923f; }
  .sq.abilityFlash-swapAdjacentFriendly { --flash-color: #9d6cd9; }
  .sq.abilityFlash-spawnSkeleton { --flash-color: #7bbf9a; }
  .sq.abilityFlash-reviveRandom { --flash-color: #7bbf9a; }
  .sq.abilityFlash-ghoulRise { --flash-color: #7bbf9a; }
  .sq.abilityFlash-chariotRecall { --flash-color: #7bbf9a; }
  .sq.abilityFlash-maskTransform { --flash-color: #aa88ff; }

  .sq.poisoned {
    box-shadow: inset 0 0 14px rgba(90, 192, 140, 0.4);
    animation: poisonBreathe 2.8s ease-in-out infinite;
  }
  @keyframes poisonBreathe {
    0%, 100% { box-shadow: inset 0 0 12px rgba(90, 192, 140, 0.32); }
    50%      { box-shadow: inset 0 0 24px rgba(110, 224, 162, 0.72); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sq.poisoned { animation: none; }
  }
  @keyframes abilityFlash {
    0%   { box-shadow: inset 0 0 0 5px var(--flash-color, #d4af37), 0 0 24px var(--flash-color, #d4af37); }
    60%  { box-shadow: inset 0 0 0 3px var(--flash-color, #d4af37), 0 0 14px var(--flash-color, #d4af37); }
    100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 transparent; }
  }

  /* Move history: highlight ability moves */
  .moveHistory li.hasAbility {
    border-left: 3px solid var(--ability-tone, #d4af37);
    padding-left: 6px;
  }
  .moveHistory li.ability-reflect { --ability-tone: #7db8ff; }
  .moveHistory li.ability-respawn { --ability-tone: #7bbf9a; }
  .moveHistory li.ability-poison { --ability-tone: #5ac08c; }
  .moveHistory li.ability-ambush { --ability-tone: #9d6cd9; }
  .moveHistory li.ability-convert { --ability-tone: #9d6cd9; }
  .moveHistory li.ability-sideSwitch { --ability-tone: #b03050; }
  .moveHistory li.ability-extraTurn { --ability-tone: #d4af37; }
  .moveHistory li.ability-soulAnchor { --ability-tone: #7bbf9a; }
  .moveHistory li.ability-swapKing { --ability-tone: #9d6cd9; }
  .moveHistory li.ability-spyReplace { --ability-tone: #b03050; }
  .moveHistory li.ability-pushFriendly { --ability-tone: #9d6cd9; }
  .moveHistory li.ability-cannonFire { --ability-tone: #e8923f; }
  .moveHistory li.ability-swapAdjacentFriendly { --ability-tone: #9d6cd9; }
  .moveHistory li.ability-spawnSkeleton { --ability-tone: #7bbf9a; }
  .moveHistory li.ability-reviveRandom { --ability-tone: #7bbf9a; }
  .moveHistory li.ability-ghoulRise { --ability-tone: #7bbf9a; }
  .moveHistory li.ability-chariotRecall { --ability-tone: #7bbf9a; }
  .moveHistory li.ability-maskTransform { --ability-tone: #aa88ff; }

  #gamePanel {
    width: var(--board-size);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: center;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
  }
  #gameStatus { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
  #gameStatus .phase { font-weight: 700; }
  #gameStatus .turn { color: var(--muted); font-size: 12px; }
  #gameStatus .lastMovePill {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 7px;
    border: 1px solid rgba(216, 177, 90, .30);
    background: rgba(216, 177, 90, .08);
    color: #f3d795;
    font-family: var(--mp-mono, monospace);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    line-height: 1;
    text-transform: uppercase;
  }
  #gameStatus .lastMovePill.is-capture {
    border-color: rgba(226, 106, 106, .32);
    background: rgba(226, 106, 106, .09);
    color: #ffd0c8;
  }
  #gameStatus .lastMovePill.is-effect {
    border-color: rgba(77, 208, 196, .34);
    background: rgba(77, 208, 196, .10);
    color: #d8fffb;
  }
  #gameStatus .lastMovePill.is-move {
    border-color: rgba(216, 177, 90, .26);
    color: rgba(232, 222, 197, .82);
  }
  #gameStatus .lastMovePill[hidden] {
    display: none !important;
  }
  #gameActions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
  /* Icon-Knopf (z. B. Zugnavigation): quadratisch, nur Symbol. */
  .iconBtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
  }
  .iconBtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .iconBtn:disabled { opacity: .35; cursor: default; }
  #captureStatus {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 11px;
    min-height: 16px;
  }
  #captureStatus.invalid { color: #ffb0b0; }
  #setupStatus {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #setupStatus.show { display: grid; }
  .setupSide {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(0,0,0,.13);
    padding: 7px;
    min-width: 0;
  }
  .setupSide.legal { border-color: rgba(90, 192, 140, .42); }
  .setupSide.invalid { border-color: rgba(255, 176, 176, .5); }
  .setupSideHead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
  }
  .setupSideHead strong { font-size: 12px; }
  .setupSideHead span {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .7px;
  }
  .setupSide.invalid .setupSideHead span { color: #ffb0b0; }
  .setupRanks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .setupRank {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 6px;
    background: rgba(255,255,255,.05);
    font-size: 10px;
    line-height: 1.25;
    max-width: 100%;
  }
  .setupRank strong {
    font-family: ui-monospace, monospace;
    font-size: 10px;
  }
  .setupRank.ok { border-color: rgba(90, 192, 140, .45); color: #b9f0cf; }
  .setupRank.missing { border-color: rgba(255, 184, 107, .55); color: #ffd8a8; }
  .setupRank.over { border-color: rgba(255, 120, 120, .62); color: #ffb0b0; background: rgba(130, 30, 30, .22); }
  .setupRank.empty { color: var(--muted); opacity: .78; }

  #boardControls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .toolbarToggle {
    min-height: 26px;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
  }
  .toolbarToggle.on {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  }
  .toolbarSelect {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    color: var(--text);
    font-size: 12px;
  }
  .toolbarSelect select {
    min-height: 26px;
    padding: 3px 7px;
    font-size: 12px;
  }
  .deckSetupQuick {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-2);
  }
  .deckSetupQuick select,
  .deckSetupQuick button {
    font-size: 11px;
    padding: 4px 7px;
  }

  aside {
    grid-column: 3;
    background: var(--panel);
    border-left: 1px solid var(--border);
    padding: 12px;
    overflow: visible;
    max-height: 100vh;
  }
  aside h2 { font-size: 13px; margin: 0 0 8px; text-transform: uppercase; color: var(--muted); letter-spacing: 1px; }
  aside section { margin-bottom: 18px; }
  aside section + section { border-top: 1px solid var(--border); padding-top: 12px; }

  .filterRow { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; align-items: center; }
  .filterRow .label { font-size: 10px; color: var(--muted); margin-right: 4px; text-transform: uppercase; letter-spacing: 1px; min-width: 50px; }
  .filterRow button { font-size: 11px; padding: 3px 7px; }
  .filterRow button.on { background: var(--accent); color: #0b1a30; border-color: var(--accent); font-weight: 600; }
  .filterRow .archetypeChip, .filterRow .abilityChip { display:inline-flex; align-items:center; gap:4px; }
  .filterRow .archetypeChip .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

  .roleGroup { margin-bottom: 14px; }
  .roleHeader {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: var(--muted); margin: 0 0 4px;
    text-transform: uppercase; letter-spacing: 1px;
    border-bottom: 1px solid var(--border); padding-bottom: 2px;
  }
  .roleHeader .counter { font-size: 10px; letter-spacing: 0; text-transform: none; font-family: ui-monospace, monospace; }
  .roleHeader .counter.full { color: var(--warn); }
  .roleHeader .counter .active { color: var(--text); font-weight: 600; }

  .pieceList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 6px;
  }
  .pieceCard {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 4px;
    text-align: center;
    cursor: pointer;
    transition: transform .08s, border-color .08s, background .08s;
    position: relative;
  }
  .pieceCard:hover { transform: translateY(-1px); border-color: var(--accent); }
  .pieceCard.active { border-color: var(--accent); background: #2a3550; }
  .pieceCard.disabled { opacity: 0.45; cursor: not-allowed; }
  .pieceCard.disabled:hover { transform: none; border-color: var(--border); }
  .pieceCard.setupLocked button[data-act="edit"] {
    opacity: .55;
  }
  .pieceCard .g { font-size: 26px; line-height: 1; }
  .pieceCard .g.hasAsset {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pieceCardAsset {
    width: 38px;
    height: 38px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
  }
  .pieceCard .n { font-size: 10px; color: var(--muted); margin-top: 2px; word-break: break-word; }
  .pieceCard .deckTag { font-size: 9px; color: var(--muted); margin-top: 1px; opacity: .7; }
  .pieceCard .balanceTag {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    color: #d4af37;
    font-size: 9px;
    font-family: ui-monospace, monospace;
  }
  .pieceCard .balanceTag span {
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 999px;
    padding: 0 4px;
    background: rgba(212, 175, 55, .08);
  }
  .pieceCard .abilityTag {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 9px;
    line-height: 1.1;
    color: var(--warn);
    margin-top: 1px;
    min-height: 12px;
  }
  .pieceCard .abilityDot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
  }
  .pieceCard .abilityStatusMini {
    color: var(--muted);
    font-size: 8px;
    margin-left: 2px;
    opacity: .85;
  }
  .pieceCard .abilityFamilyMini {
    color: var(--muted);
    font-size: 8px;
    opacity: .85;
  }
  .pieceCard .archBar {
    height: 3px; width: 100%; border-radius: 2px; margin-top: 4px;
  }
  .pieceCardActions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    margin-top: 4px;
  }
  .pieceCard button { font-size: 10px; padding: 1px 4px; min-width: 0; }
  .pieceCard button[data-act="test"] {
    border-color: rgba(212, 175, 55, .42);
    color: #ffe7a3;
    background: rgba(212, 175, 55, .10);
  }

  button, select, input, textarea {
    font: inherit;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
  }
  button { cursor: pointer; }
  button:hover { border-color: var(--accent); }
  button:disabled, input:disabled, select:disabled {
    opacity: 0.48;
    cursor: not-allowed;
  }
  body.side-nav-collapsed .sideNavList button,
  body.side-nav-collapsed .sideNavList button:disabled,
  body.side-nav-collapsed .sideNavList button:hover,
  body.side-nav-collapsed .sideNavList button:focus-visible {
    width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
  }
  body.side-nav-collapsed .sideNavList button::after {
    content: none !important;
    display: none !important;
  }
  body.side-nav-collapsed .sideNavList button .navIcon {
    color: var(--rift-gold-bright);
    font-size: 18px;
  }
  body.side-nav-collapsed .sideNavList button .navLabel {
    display: none !important;
  }
  button.primary { background: var(--accent); color: #0b1a30; border-color: var(--accent); font-weight: 600; }
  button.on { background: var(--accent); color: #0b1a30; border-color: var(--accent); }
  textarea { width: 100%; min-height: 160px; font-family: ui-monospace, monospace; font-size: 12px; resize: vertical; }
  label { display: block; margin: 6px 0 2px; color: var(--muted); font-size: 12px; }
  .row { display: flex; gap: 6px; align-items: center; }
  .row > * { flex: 1; }
  .colorToggle { display: flex; gap: 4px; }
  details { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; }
  details + details { margin-top: 6px; }
  summary { cursor: pointer; font-size: 12px; color: var(--muted); }

  .legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
  .legend span { display: inline-flex; align-items: center; gap: 4px; }
  .legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border:1px solid #444; }
  .legend .m { background: var(--hl-move); }
  .legend .c { background: var(--hl-cap); }
  .legend .e { background: var(--hl-extra); }
  .legend .s { background: var(--hl-sel); }
  .statusLegend {
    display: none;
    gap: 8px;
    flex-wrap: wrap;
    width: min(72vh, 640px);
    color: var(--muted);
    font-size: 11px;
  }
  .statusLegend.show { display: flex; }
  .statusLegend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(16,16,22,.62);
  }
  .statusLegend b {
    color: var(--text);
    font-size: 12px;
  }

  .effectRail {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .effectRail.left {
    grid-area: own;
    width: var(--rail-size);
    min-height: calc(var(--board-size) + 56px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 0;
  }
  .effectRail.right {
    grid-area: enemy;
    width: var(--rail-size);
    min-height: calc(var(--board-size) + 56px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
  }
  .effectRailHeader {
    --player-tone: var(--accent);
    position: relative;
    width: calc(var(--rail-size) - 4px);
    max-width: 132px;
    min-width: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--player-tone) 45%, var(--border));
    background:
      radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--player-tone) 18%, transparent), transparent 65%),
      linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    box-shadow:
      0 4px 10px rgba(0, 0, 0, .45),
      0 0 0 1px rgba(0, 0, 0, .35),
      inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  .effectRail.left .effectRailHeader { --player-tone: #5ac08c; }
  .effectRail.right .effectRailHeader { --player-tone: #d65a5a; }
  .effectRailHeaderKristall {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .effectRailHeaderImg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
  }
  /* Default-Avatar fuer angemeldete Spieler ohne Profilbild: Initialen im Rahmen. */
  .effectRailHeaderInitialsText {
    font-family: var(--mp-serif);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1;
    color: var(--mp-gold-1);
  }
  .effectRailHeaderInfo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    text-align: left;
  }
  .effectRailHeaderName {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .2px;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .effectRailHeaderElo {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted);
  }
  .effectRailHeaderEloValue {
    color: color-mix(in srgb, var(--player-tone) 70%, var(--text));
    margin-left: 2px;
  }
  .effectGroups {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .effectRail.left .effectGroups {
    flex-direction: column-reverse;
  }
  .effectGroup {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
  }
  .effectGroupHeader {
    width: calc(var(--rail-size) - 4px);
    max-width: 132px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: color-mix(in srgb, var(--group-tone, var(--rift-gold-bright)) 72%, var(--rift-gold-bright));
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .45px;
    padding: 6px 0 4px;
    border: 0;
    text-align: center;
    background: none;
    cursor: pointer;
    user-select: none;
    transition: color .15s;
  }
  .effectGroupHeader:hover,
  .effectGroupHeader:focus-visible {
    background: none;
    border: 0;
  }
  .effectGroupHeader:focus,
  .effectGroupHeader:focus-visible {
    outline: none;
  }
  .effectGroupHeader::before {
    content: "";
    order: -1;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--group-tone, var(--rift-gold-bright));
    box-shadow: 0 0 8px color-mix(in srgb, var(--group-tone, var(--rift-gold-bright)) 62%, transparent);
  }
  .effectGroupHeader .effectGroupTitle {
    margin-right: 0;
  }
  .effectGroupChevron {
    font-size: 8px;
    opacity: .65;
    transition: opacity .15s;
  }
  .effectGroupHeader:hover .effectGroupChevron {
    opacity: 1;
  }
  .effectGroup .effectList {
    max-height: 1600px;
    opacity: 1;
    overflow: visible;
    transition: max-height .22s ease, opacity .18s ease, padding .18s ease, gap .18s ease;
  }
  .effectGroup.is-collapsed .effectList {
    overflow: hidden;
  }
  .effectGroup.is-collapsed .effectList {
    max-height: 0;
    opacity: 0;
    padding: 0;
    gap: 0;
    pointer-events: none;
  }
  .effectGroup.is-collapsed .effectGroupHeader[data-effect-section]::before {
    display: none;
  }
  .effectGroupHeader b {
    min-width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--group-tone, var(--rift-gold-bright)) 58%, rgba(212,175,55,.42));
    background: color-mix(in srgb, var(--group-tone, var(--rift-gold-bright)) 12%, rgba(0,0,0,.28));
    color: color-mix(in srgb, var(--group-tone, var(--rift-gold-bright)) 72%, var(--rift-gold-bright));
    font-size: 8px;
  }
  .effectGroupHeader[data-effect-section] b {
    order: -1;
    display: none;
  }
  .effectGroup.is-collapsed .effectGroupHeader[data-effect-section] b {
    display: inline-flex;
  }
  .effectGroup-activatable { --group-tone: #d4af37; }
  .effectGroup-on-capture { --group-tone: #b03050; }
  .effectGroup-on-move { --group-tone: #5ac08c; }
  .effectGroup-active { --group-tone: #5a9ad6; }
  .effectGroup-passive { --group-tone: #5a9ad6; }
  .effectGroup-graveyard { --group-tone: #8a7aa8; }
  .effectGroup-graveyard.is-active { --group-tone: #c8a0ff; }
  .effectGraveyardChip {
    --effect-tone: #8a7aa8;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .effectGraveyardChip:focus,
  .effectGraveyardChip:focus-visible {
    outline: none;
  }
  .effectGraveyardChip.is-active {
    --effect-tone: #c8a0ff;
    border-color: color-mix(in srgb, var(--effect-tone) 88%, var(--rift-gold-bright, #d4af37));
    background:
      radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--effect-tone) 55%, transparent), transparent 60%),
      radial-gradient(circle at 65% 75%, color-mix(in srgb, var(--effect-tone) 28%, transparent), transparent 55%),
      var(--panel-2);
    box-shadow:
      0 0 14px color-mix(in srgb, var(--effect-tone) 55%, transparent),
      0 0 0 1px rgba(0,0,0,.25),
      inset 0 0 10px rgba(0,0,0,.22);
  }
  .effectGraveyardPortrait .effectPortraitImg {
    object-position: center;
  }
  .effectList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
  }
  .effectRail.left .effectList {
    min-height: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-end;
    gap: 10px;
    padding: 0;
  }
  .effectRail.right .effectList {
    min-height: 0;
    gap: 10px;
    padding: 0;
  }
  .effectChip {
    position: relative;
    width: var(--effect-chip-size);
    height: var(--effect-chip-size);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    padding: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--effect-tone, var(--accent)) 74%, var(--border));
    background:
      radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--effect-tone, var(--accent)) 26%, transparent), transparent 58%),
      var(--panel-2);
    color: var(--text);
    box-shadow: 0 0 0 1px rgba(0,0,0,.25), inset 0 0 10px rgba(0,0,0,.25);
    overflow: visible;
  }
  .effectChip.trigger-activated {
    width: calc(var(--effect-chip-size) + 6px);
    height: calc(var(--effect-chip-size) + 6px);
  }
  .effectChip.effectReady {
    cursor: pointer;
  }
  .effectChip.effectDisabled {
    opacity: .55;
  }
  .effectChip.effectActive::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--effect-tone, var(--accent)) 65%, transparent);
    opacity: .8;
    pointer-events: none;
    animation: effectReadyPulse 1.8s ease-in-out infinite;
  }
  @keyframes effectReadyPulse {
    0%, 100% { transform: scale(.96); opacity: .55; }
    50%      { transform: scale(1.05); opacity: .96; }
  }
  .effectChip:hover {
    border-color: var(--effect-tone, var(--accent));
    box-shadow: 0 0 12px color-mix(in srgb, var(--effect-tone, var(--accent)) 55%, transparent);
  }
  .effectIcon {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--effect-tone, var(--accent)) 36%, #101015);
    border: 1px solid color-mix(in srgb, var(--effect-tone, var(--accent)) 70%, var(--border));
    font-size: 10px;
    z-index: 2;
  }
  .effectPiece {
    font-size: 21px;
    line-height: 1;
  }
  .effectPortrait {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(8, 8, 12, .72);
  }
  .effectPortraitImg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 35%;
    pointer-events: none;
  }
  .effectChip.hasPortrait {
    background: #101015;
  }
  .effectChip.deck-pirate {
    --pirate-chip-deep: #08151D;
    --pirate-chip-cyan: #20D7E6;
    --pirate-chip-ice: #B8F8FF;
    --pirate-chip-gold: #D6B36A;
    border-color: color-mix(in srgb, var(--effect-tone, var(--pirate-chip-cyan)) 62%, var(--pirate-chip-gold));
    background:
      radial-gradient(circle at 35% 28%, rgba(184,248,255,.38), transparent 22%),
      radial-gradient(circle at 64% 72%, rgba(103,92,255,.22), transparent 34%),
      linear-gradient(145deg, rgba(32,215,230,.22), transparent 42%),
      var(--pirate-chip-deep);
    box-shadow:
      0 0 0 1px rgba(214,179,106,.24),
      0 0 12px rgba(32,215,230,.22),
      inset 0 0 12px rgba(0,0,0,.48);
  }
  .effectChip.deck-pirate.effectActive::after {
    border-color: rgba(32,215,230,.78);
    box-shadow:
      0 0 10px rgba(32,215,230,.32),
      inset 0 0 8px rgba(184,248,255,.16);
    animation: pirateEffectChipPulse 1.8s ease-in-out infinite;
  }
  .effectChip.hasPortrait .effectIcon {
    top: 1px;
    left: 1px;
    width: 11px;
    height: 11px;
    font-size: 0;
    background: var(--effect-tone, var(--accent));
    border-color: rgba(8,8,12,.82);
    box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 6px color-mix(in srgb, var(--effect-tone, var(--accent)) 55%, transparent);
  }
  .effectSquare {
    position: absolute;
    right: -3px;
    bottom: -3px;
    min-width: 19px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(16, 16, 21, .9);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 9px;
    padding: 0 3px;
  }
  .effectSquare {
    color: var(--text);
  }
  .effectChip.trigger-board .effectPiece:empty::before {
    content: "☠";
    font-size: 18px;
  }
  .effectState {
    display: none;
  }
  .effectRail.left .effectChip {
    width: var(--effect-chip-size);
    height: var(--effect-chip-size);
  }
  .effectRail.left .effectChip.trigger-activated {
    width: calc(var(--effect-chip-size) + 4px);
    height: calc(var(--effect-chip-size) + 4px);
  }
  .effectChip.effectReady .effectState {
    color: #ffe7a3;
    border-color: rgba(212, 175, 55, .55);
  }
  .effectChip.effectDisabled .effectState {
    color: #b5b5bd;
  }
  @keyframes pirateEffectChipPulse {
    0%, 100% {
      transform: scale(.96);
      opacity: .54;
    }
    50% {
      transform: scale(1.05);
      opacity: .96;
    }
  }
  .effectEmpty {
    color: var(--muted);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px dashed var(--border);
    font-size: 12px;
  }

  #pieceInfo {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px;
    font-size: 12px;
    min-height: 40px;
    width: min(72vh, 640px);
  }
  #pieceInfo .title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
  #pieceInfo .deckTag { color: var(--muted); font-size: 11px; font-weight: normal; }
  #pieceInfo .desc { color: var(--text); margin: 4px 0; }
  #pieceInfo ul { margin: 4px 0 0; padding-left: 16px; color: var(--muted); }
  #pieceInfo .targetPreview {
    display: grid;
    gap: 2px;
    margin: 6px 0;
    padding: 6px 8px;
    border-left: 3px solid var(--accent);
    background: rgba(212, 175, 55, .10);
    color: #ffe7a3;
    border-radius: 4px;
  }
  #pieceInfo .targetPreview span + span {
    color: var(--muted);
  }
  #pieceInfo .threatInfoNotes {
    display: grid;
    gap: 2px;
    margin-top: 6px;
    color: #ffd8a8;
  }
  .actionStatus {
    display: none;
    width: min(72vh, 640px);
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(212, 175, 55, .58);
    background: linear-gradient(90deg, rgba(212, 175, 55, .15), rgba(170, 136, 255, .09));
    border-radius: 6px;
    padding: 8px 10px;
    box-shadow: 0 0 16px rgba(212, 175, 55, .16);
  }
  .actionStatus.show { display: grid; }
  .actionStatusMain {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .actionStatusMain strong {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .actionStatusMain span,
  .actionStatusMeta span {
    color: var(--muted);
    font-size: 11px;
  }
  .actionStepRow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
  }
  .actionStep {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(212,175,55,.34);
    background: rgba(0,0,0,.18);
    color: var(--muted);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }
  .actionStep b {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(212,175,55,.18);
    color: var(--rift-gold-bright);
    font-size: 9px;
  }
  .actionStep em {
    color: var(--text);
    font-style: normal;
    font-weight: 700;
  }
  .actionStep.done {
    border-color: rgba(90,192,140,.42);
  }
  .actionStep.done b {
    background: rgba(90,192,140,.18);
    color: #9ee4bb;
  }
  .actionStep.active {
    border-color: rgba(212,175,55,.58);
    color: var(--text);
  }
  .actionStatusMeta {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
  }
  .actionStatusButtons {
    flex-wrap: wrap;
    white-space: normal;
    max-width: min(46vh, 360px);
  }
  .actionStatus.choice {
    border-color: rgba(125, 184, 255, .45);
    background: linear-gradient(90deg, rgba(125, 184, 255, .12), rgba(212, 175, 55, .08));
  }
  .actionStatusMeta button {
    font-size: 11px;
    padding: 4px 7px;
  }
  .activatedPanel {
    margin: 8px 0;
    padding: 8px;
    border: 1px solid rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.08);
    border-radius: 6px;
  }
  .activatedPanelTop {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 6px;
  }
  .activatedPanelTop span {
    color: var(--muted);
    font-size: 11px;
  }
  .activatedButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .activatedButtons button {
    font-size: 11px;
    padding: 4px 7px;
  }

  #moveHistory {
    width: min(72vh, 640px);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
  }
  #moveHistory .historyTitle {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }
  #moveHistory .replayControls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
  }
  #moveHistory .replayControls button {
    min-width: 42px;
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 11px;
  }
  #moveHistory .replayControls button.active {
    border-color: var(--accent);
  }
  #moveHistory .replayControls span {
    color: var(--muted);
    font-size: 11px;
    margin-left: 2px;
  }
  #moveHistory .replayControls span.replayActive {
    color: var(--warn);
  }
  #moveHistory ol {
    margin: 0;
    padding-left: 20px;
    max-height: 120px;
    overflow-y: auto;
  }
  #moveHistory li { margin: 2px 0; }
  #moveHistory li .historyJump {
    width: 100%;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  #moveHistory li .historyJump:hover,
  #moveHistory li .historyJump:focus-visible {
    color: var(--accent);
    outline: 1px solid var(--accent);
    outline-offset: 1px;
  }
  #moveHistory li.replayCurrent {
    color: var(--warn);
    font-weight: 700;
  }
  #moveHistory li.replayFuture {
    color: var(--muted);
    opacity: .58;
  }
  #moveHistory .empty { color: var(--muted); list-style: none; margin-left: -20px; }

  #toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--warn); padding: 8px 14px; border-radius: 6px;
    opacity: 0; transition: opacity .18s; pointer-events: none;
    z-index: 100; font-size: 13px;
  }
  #toast.show { opacity: 1; }

  /* ===== Magic Pieces — Toasts / Notifications (Port "Notifications"-Vorlage) ===== */
  /* Reusable, framework-free. window.mpToast({...}) von ueberall aufrufbar.
     Toasts stapeln sich unten rechts und schliessen sich automatisch. */
  .mp-toasts {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse; /* Neueste unten, aeltere nach oben geschoben */
    gap: 12px;
    pointer-events: none;
    max-width: 380px;
    width: max-content;
  }
  .mp-toast {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    min-width: 300px;
    max-width: 380px;
    padding: 14px 16px 15px;
    background: linear-gradient(180deg, rgba(22, 26, 34, .97), rgba(12, 14, 19, .98));
    border: 1px solid rgba(216, 177, 90, .2);
    border-left: 2px solid var(--mp-accent, var(--mp-gold-1));
    box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .3);
    font-family: var(--mp-sans);
    overflow: hidden;
    opacity: 0;
    transform: translateX(40px) scale(.98);
    transition: opacity 320ms cubic-bezier(.2, .7, .3, 1), transform 320ms cubic-bezier(.2, .7, .3, 1);
  }
  .mp-toast.in { opacity: 1; transform: translateX(0) scale(1); }
  .mp-toast.out { opacity: 0; transform: translateX(40px) scale(.98); }
  /* Eckklammer-Flourish (oben links), wie die Panel-Sprache der Decks */
  .mp-toast::before {
    content: "";
    position: absolute;
    top: 4px; left: 4px;
    width: 9px; height: 9px;
    border-top: 1px solid var(--mp-accent, var(--mp-gold-1));
    border-left: 1px solid var(--mp-accent, var(--mp-gold-1));
    opacity: .7;
    pointer-events: none;
  }
  .mp-toast-ico {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--mp-accent, var(--mp-gold-1));
    border: 1px solid color-mix(in oklab, var(--mp-accent, var(--mp-gold-1)) 40%, transparent);
    background: color-mix(in oklab, var(--mp-accent, var(--mp-gold-1)) 10%, transparent);
    transform: rotate(45deg);
  }
  .mp-toast-ico > svg { transform: rotate(-45deg); }
  .mp-toast-body { min-width: 0; }
  .mp-toast-title {
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-accent, var(--mp-gold-1));
    margin-bottom: 4px;
  }
  .mp-toast-text {
    font-family: var(--mp-serif-body);
    font-size: 16px;
    line-height: 1.3;
    color: var(--mp-bone);
  }
  .mp-toast-text b { color: #f3e3b2; font-weight: 600; }
  .mp-toast-text .mono { font-family: var(--mp-mono); font-size: 14px; }
  .mp-toast-close {
    align-self: flex-start;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border: none; background: none; cursor: pointer;
    color: var(--mp-ink-dim);
    transition: color 150ms;
    margin: -4px -4px 0 0;
  }
  .mp-toast-close:hover { color: var(--mp-bone); }
  /* Countdown-Fortschrittsbalken */
  .mp-toast-bar {
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--mp-accent, var(--mp-gold-1));
    opacity: .55;
    transform-origin: left;
    animation: mpToastBar linear forwards;
  }
  @keyframes mpToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
  .mp-toast.paused .mp-toast-bar { animation-play-state: paused; }
  /* Typ-Akzente (auch via inline --mp-accent setzbar, das hier ist der Klassen-Fallback) */
  .mp-toast.t-shards  { --mp-accent: var(--mp-soul-1); }
  .mp-toast.t-pack    { --mp-accent: var(--mp-gold-1); }
  .mp-toast.t-message { --mp-accent: #8aa6d4; }
  .mp-toast.t-success { --mp-accent: #78daa2; }
  .mp-toast.t-info    { --mp-accent: #c9bfa3; }
  .mp-toast.t-warn    { --mp-accent: var(--mp-danger); }
  @media (max-width: 600px) {
    .mp-toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; width: auto; }
    .mp-toast { min-width: 0; max-width: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mp-toast { transition: opacity 200ms ease; transform: none; }
    .mp-toast.in, .mp-toast.out { transform: none; }
  }

  #pieceModal {
    position: fixed;
    width: 380px; max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.16), transparent 18%),
      linear-gradient(180deg, #17171d, #27242a 55%, #141419);
    border: 2px solid #0b0b0f;
    border-left: 2px solid #0b0b0f;
    border-radius: 14px;
    padding: 12px;
    box-shadow:
      0 18px 38px rgba(0,0,0,0.68),
      inset 0 0 0 2px rgba(255,255,255,0.08),
      inset 0 0 0 7px var(--card-accent, var(--accent));
    z-index: 200;
    display: none;
    font-size: 12px;
    transform: translateY(4px) rotate(-1deg);
    opacity: 0;
    transition: opacity .15s, transform .15s;
  }
  #pieceModal.show {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0) rotate(-1deg);
  }
  #pieceModal .closeBtn {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18); color: #f3eadb;
    border-radius: 50%;
    width: 24px; height: 24px;
    font: 700 18px/1 ui-sans-serif, system-ui, sans-serif;
    cursor: pointer; padding: 0;
    z-index: 2;
  }
  #pieceModal .closeBtn:hover { color: #fff; background: rgba(0,0,0,0.75); }

  #pieceModal .pmDossierBtn {
    margin-top: 8px;
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 12px;
    font: 700 12.5px/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .04em;
    color: #f3eadb;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--card-accent, rgba(255,255,255,0.22));
    border-radius: 8px;
    cursor: pointer;
    transition: background .14s ease, transform .12s ease, box-shadow .15s ease;
  }
  #pieceModal .pmDossierBtn:hover { background: rgba(0,0,0,0.62); transform: translateY(-1px); box-shadow: 0 6px 16px -8px var(--card-accent, rgba(255,255,255,0.3)); }
  #pieceModal .pmDossierIc { opacity: .9; display: inline-flex; align-items: center; }

  #pieceModal .graveyardCard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #f3eadb;
    font-family: Georgia, "Times New Roman", serif;
  }
  #pieceModal .graveyardBanner {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(200, 160, 255, .35);
    background:
      radial-gradient(circle at 30% 25%, rgba(200, 160, 255, .25), transparent 65%),
      linear-gradient(180deg, #1a1422 0%, #0c0814 100%);
    min-height: 84px;
  }
  #pieceModal .graveyardBannerImg {
    width: 100%;
    height: 96px;
    object-fit: cover;
    object-position: center;
    opacity: .82;
    display: block;
    filter: saturate(.92);
  }
  #pieceModal .graveyardBannerCaption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(20, 14, 28, 0) 35%, rgba(8, 5, 14, .8) 100%);
  }
  #pieceModal .graveyardBannerCaption h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  }
  #pieceModal .graveyardSide {
    color: #d4b8ff;
    font-weight: 600;
    font-size: 13px;
    margin-left: 4px;
    letter-spacing: .3px;
  }
  #pieceModal .graveyardSubtitle {
    margin-top: 2px;
    font-size: 11px;
    color: #cfc2d8;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
  }
  #pieceModal .graveyardBody {
    background: linear-gradient(180deg, #15101e 0%, #0a0710 100%);
    border: 1px solid rgba(138, 122, 168, .32);
    border-radius: 10px;
    padding: 10px;
    min-height: 80px;
  }
  #pieceModal .graveyardGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
  }
  #pieceModal .graveyardEntry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: transform 140ms ease;
  }
  #pieceModal .graveyardEntry:hover { transform: translateY(-2px); }
  #pieceModal .graveyardEntry:hover .graveyardPortrait { box-shadow: 0 0 0 1px var(--card-accent, rgba(255,255,255,0.4)), 0 6px 16px -8px rgba(0,0,0,0.6); }
  #pieceModal .graveyardPortrait {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .12), transparent 60%),
      #1c1626;
    border: 1px solid rgba(200, 160, 255, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .5);
  }
  #pieceModal .graveyardPortrait.b {
    background:
      radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .08), transparent 60%),
      #0c0814;
  }
  #pieceModal .graveyardPortrait.hasAsset {
    background: transparent;
  }
  #pieceModal .graveyardPortraitImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: grayscale(.45) brightness(.85) drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
  }
  #pieceModal .graveyardGlyph {
    font-size: 26px;
    color: #c8a0ff;
    filter: drop-shadow(0 0 4px rgba(200, 160, 255, .4));
  }
  #pieceModal .graveyardCount {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: linear-gradient(180deg, #d4af37 0%, #8a6a1f 100%);
    color: #1a1018;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    font-family: ui-sans-serif, system-ui, sans-serif;
  }
  #pieceModal .graveyardName {
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 10px;
    text-align: center;
    color: #cfc2d8;
    letter-spacing: .2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #pieceModal .graveyardEmpty {
    color: #8f8295;
    font-style: italic;
    text-align: center;
    padding: 20px 8px;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 12px;
  }

  #pieceModal .pmHeader {
    order: 1;
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 7px 34px 7px 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.20));
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
  }
  #pieceModal .pmChip {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; line-height: 1; flex-shrink: 0;
  }
  #pieceModal .pmChip.w { background:#f3eadb; color:#1a1a1f; box-shadow: inset 0 0 0 2px #1a1a1f; }
  #pieceModal .pmChip.b { background:#1a1a1f; color:#f3eadb; box-shadow: inset 0 0 0 2px #f3eadb; }
  #pieceModal .pmChip.hasAsset {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  #pieceModal .pmAsset {
    width: 54px;
    height: 54px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.42));
  }
  #pieceModal .pmName { font-size: 18px; font-weight: 800; line-height: 1.05; }
  #pieceModal .pmMeta { color: var(--muted); font-size: 11px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  #pieceModal .pmBadge {
    display: inline-block; padding: 2px 7px; border-radius: 999px;
    font-size: 10px; color: #0a0a0a; font-weight: 700; letter-spacing: .3px;
  }
  #pieceModal .roleBadge { background: #e7dcc8; }
  #pieceModal .rankBadge { background: #e7dcc8; }
  #pieceModal .balanceBadge { background: #d4af37; color: #141018; }
  #pieceModal .teamRoleBadge { background: rgba(255,255,255,0.12); color: var(--text); border: 1px solid rgba(255,255,255,0.2); }
  #pieceModal .typeBadgeHeader { background: var(--badge-color, var(--accent)); color: #101015; }
  #pieceModal .familyBadge { background: rgba(255,255,255,0.14); color: var(--text); border: 1px solid rgba(255,255,255,0.18); }
  #pieceModal .heroRule {
    order: 2;
    margin-top: 8px;
  }
  #pieceModal .heroRule.effectCard {
    background: #050507;
    border: 2px solid #020203;
    border-radius: 8px;
    padding: 8px;
    color: #171217;
    font-family: Georgia, "Times New Roman", serif;
    box-shadow:
      0 10px 18px rgba(0,0,0,.36),
      inset 0 0 0 1px rgba(255,255,255,.08);
  }
  #pieceModal .effectCardInner {
    position: relative;
    display: grid;
    gap: 5px;
    padding: 7px 7px 8px;
    border-radius: 8px 8px 20px 20px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--card-accent, #6aa9ff) 58%, #8aa5b4);
    background-image:
      repeating-linear-gradient(140deg, transparent 0 12px, rgba(255,255,255,.23) 13px 14px, transparent 20px 44px),
      repeating-linear-gradient(-30deg, transparent 0 22px, rgba(255,255,255,.32) 23px 25px, transparent 26px 54px),
      repeating-linear-gradient(-10deg, transparent 0 34px, rgba(0,0,0,.34) 35px 38px, transparent 39px 70px),
      repeating-radial-gradient(circle, rgba(0,0,0,.18) 0 2px, transparent 2px 10px);
    box-shadow:
      inset 0 0 0 2px rgba(0,0,0,.58),
      inset -2px -2px 0 rgba(255,255,255,.22);
  }
  #pieceModal .effectCardName,
  #pieceModal .effectCardType {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 31px;
    padding: 4px 8px;
    border: 2px solid rgba(0,0,0,.86);
    border-radius: 10px / 20px;
    background: radial-gradient(ellipse farthest-corner, #eef3f4 50%, #bfc9ce);
    box-shadow:
      -2px 0 0 rgba(0,0,0,.62),
      inset 2px -3px 0 #a8adb0,
      inset -1px 1px 0 #fff;
  }
  #pieceModal .effectCardName strong {
    min-width: 0;
    color: #161114;
    font-size: 18px;
    line-height: 1.05;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #pieceModal .effectCardName span {
    flex: 0 0 auto;
    min-width: 44px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.48);
    background: #e5e9eb;
    color: #1b1718;
    font: 800 10px/1 ui-sans-serif, system-ui, sans-serif;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.6);
  }
  #pieceModal .effectCardArt {
    position: relative;
    z-index: 1;
    height: 122px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #222;
    background:
      radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--card-accent, #6aa9ff) 46%, transparent) 0 24%, transparent 54%),
      linear-gradient(160deg, rgba(255,255,255,.26), transparent 35%),
      linear-gradient(180deg, #222832, #111117 70%);
    box-shadow: inset 0 0 30px rgba(0,0,0,.54);
  }
  #pieceModal .effectCardAura {
    position: absolute;
    inset: 14px 36px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--card-accent, #6aa9ff) 68%, #fff) 0 10%, transparent 68%);
    opacity: .38;
    filter: blur(2px);
  }
  #pieceModal .effectCardPiece {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f4eadb;
    font-size: 70px;
    line-height: 1;
    text-shadow: 0 3px 8px rgba(0,0,0,.85);
  }
  #pieceModal .effectCardAsset {
    width: 136px;
    height: 136px;
    object-fit: contain;
    filter: drop-shadow(0 7px 6px rgba(0,0,0,.58));
    pointer-events: none;
  }
  #pieceModal .effectCardType {
    min-height: 28px;
    padding-block: 3px;
  }
  #pieceModal .effectCardType strong {
    min-width: 0;
    color: #191416;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #pieceModal .effectCardType .typeBadge {
    flex: 0 0 auto;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid rgba(0,0,0,.35);
  }
  #pieceModal .effectCardText {
    position: relative;
    z-index: 1;
    min-height: 86px;
    padding: 10px 9px;
    border: 2px solid rgba(40,40,40,.78);
    border-left-color: rgba(180,180,180,.6);
    border-bottom-color: rgba(70,70,70,.8);
    background: #d7e0df;
    color: #211a18;
    box-shadow: inset 0 0 18px rgba(255,255,255,.34);
  }
  #pieceModal .effectCardText p {
    margin: 0;
    color: #211a18;
    font-size: 13px;
    line-height: 1.32;
    font-weight: 700;
  }
  #pieceModal .heroMechanics {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
  }
  #pieceModal .heroMechanics span {
    background: rgba(35,35,35,.08);
    border: 1px solid rgba(35,35,35,.28);
    border-radius: 999px;
    color: #523516;
    font: 800 10.5px/1.2 ui-sans-serif, system-ui, sans-serif;
    padding: 2px 7px;
  }
  #pieceModal .effectCardFooter {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: rgba(235,235,235,.84);
    font: 700 8.5px/1.2 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .4px;
  }
  #pieceModal .typeBadge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 7px;
    background: var(--badge-color, var(--accent));
    color: #101015;
    font-size: 10px;
    font-weight: 800;
  }
  #pieceModal .typeBadge.muted {
    background: rgba(0,0,0,0.12);
    color: #5e5344;
  }
  #pieceModal .effectPreview {
    order: 3;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 122px;
    gap: 10px;
    align-items: center;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.18)),
      #15151b;
    border: 2px solid rgba(0,0,0,0.68);
    border-radius: 8px;
    padding: 9px;
  }
  #pieceModal .effectPreviewText > span {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .9px;
    font-weight: 800;
  }
  #pieceModal .effectPreviewText strong {
    display: block;
    margin-top: 2px;
    color: color-mix(in srgb, var(--card-accent, var(--accent)) 74%, #fff);
    font-size: 13px;
  }
  #pieceModal .effectPreviewText p {
    margin: 4px 0 0;
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
  }
  #pieceModal .effectMiniBoard {
    width: 122px;
    margin: 0;
  }