/* Claude completion pass: navbar symbols, dust, play side panels and board cues. */
  :root {
    --own-rail-size: clamp(240px, 19vw, 280px);
    /* Gegner-Leiste gleich breit wie die eigene (Live-Figurenkarte braucht die
       volle Kartenbreite; Boxen links/rechts sollen buendig wirken). */
    --enemy-rail-size: clamp(240px, 19vw, 280px);
  }

  body.mode-demo {
    /* EFFEKTIVE Desktop-Brettgroesse (ueberschreibt die fruehere body.mode-demo-
       Regel weiter oben). 100dvh-Reserve = was WIRKLICH ueber/unter dem Brett
       liegt: main-Padding (16+16) + boardWrap-Huelle (GEMESSEN 56px: Rahmen/
       Padding + #files-Zeile + #actionStatus, NICHT 22!) + 8px Puffer. Die alte
       60px-Reserve passte nur zufaellig, solange die BREITE das Brett begrenzte —
       auf breiten/flachen Fenstern (hoehenbegrenzt) lief die Huelle unten raus
       (Scrollbalken). Das *0.98 liegt um BEIDE Terme (Rundungs-/Zoom-Puffer).
       Das im Spielmodus leere #gamePanel ist unten aus dem Fluss genommen, damit
       das Brett echt mittig sitzt (gleicher Abstand oben wie unten). */
    --board-size: max(
      420px,
      calc(min(
        calc(100dvh - 96px),
        calc(100vw - var(--side-nav-width) - 76px - var(--own-rail-size) - var(--enemy-rail-size))
      ) * 0.98)
    );
  }
  /* Online-Partie: Aufgeben-Zeile ist sichtbar und braucht Platz unterm
     Brett -> groessere Reserve (96px Basis + ~44px Zeile). */
  body.mode-demo:has(#resignMatch:not([hidden])) {
    --board-size: max(
      420px,
      calc(min(
        calc(100dvh - 140px),
        calc(100vw - var(--side-nav-width) - 76px - var(--own-rail-size) - var(--enemy-rail-size))
      ) * 0.98)
    );
  }
  /* Im Spielmodus ist #gamePanel leer (Status/Buttons sind alle display:none) —
     trotzdem schob sein 12px-Flex-Gap das zentrierte Brett nach oben, unten blieb
     mehr Abstand als oben. Erst mit sichtbarem Inhalt zurueck in den Fluss. */
  body.mode-demo #gamePanel:not(:has(#resignMatch:not([hidden]))) {
    display: none;
  }
  /* Brett vertikal mittig — gleicher Abstand oben wie unten. Gilt auch fuer
     exposure-public (Live-Seite stand auf flex-start, main-02). Nur Desktop/
     Landscape: die Portrait-Tablet- und Mobile-Layouts (main-02/main-07)
     top-alignen bewusst, weil dort mehr unterm Brett steht. */
  @media (orientation: landscape) and (min-width: 1181px) {
    body.mode-demo main,
    body.mode-demo.exposure-public main {
      justify-content: center;
    }
    /* Top-Banner (Verbindung/Ankuendigung/Bann) sind Grid-Zeilen UEBER <main>.
       <main> ist aber 100vh hoch und das Brett auf 100dvh gerechnet — ein
       sichtbarer Banner schob also die ganze Seite um seine Hoehe nach unten
       (Scrollbalken, Brett unten abgeschnitten). Im Spielmodus schweben die
       Banner deshalb als Overlay ueber dem Brett statt Platz zu nehmen. */
    body.mode-demo #connectionBanner,
    body.mode-demo #banNotice,
    body.mode-demo #announceBar {
      position: fixed;
      top: 0;
      left: var(--side-nav-width);
      right: 0;
      z-index: 120;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
    }
  }

  header.sideNav {
    overflow: visible;
  }

  header.sideNav > :not(.sideNavToggle) {
    min-width: 0;
  }

  .sideBrand {
    padding-bottom: 18px;
    overflow: hidden;
  }

  .brandMark {
    flex: 0 0 auto;
  }

  .brandMark span {
    display: none;
  }

  .brandMarkSvg {
    width: 30px;
    height: 30px;
    transform: rotate(-45deg);
    filter:
      drop-shadow(0 1px 1px rgba(0, 0, 0, .60))
      drop-shadow(0 0 6px rgba(216, 177, 90, .45));
  }

  .sideNavToggle {
    position: absolute;
    top: 30px;
    right: -12px;
    width: 24px;
    height: 24px;
    align-self: auto;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(216, 177, 90, .28);
    background: linear-gradient(180deg, #14171f 0%, #0a0b0f 100%);
    color: var(--mp-gold-2, #c89a3e);
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
    z-index: 25;
  }

  .sideNavToggle:hover,
  .sideNavToggle:focus-visible {
    border-color: var(--mp-gold-1, #d8b15a);
    color: var(--mp-bone, #e8dec5);
    background: linear-gradient(180deg, #1b1f2a 0%, #0e1015 100%);
    box-shadow: 0 0 0 1px rgba(216, 177, 90, .15), 0 2px 12px rgba(216, 177, 90, .2);
    outline: none;
  }

  .sideAccount {
    position: relative;
    display: grid;
    gap: 8px;
    margin: 16px 16px 6px;
    z-index: 1;
  }

  .sideUser {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 3px 12px;
    align-items: center;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(216, 177, 90, .12);
    background: rgba(11, 13, 18, .70);
    color: var(--mp-ink);
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .sideUser:disabled {
    cursor: not-allowed;
  }

  .sideUser:not(:disabled):hover,
  .sideUser:not(:disabled):focus-visible {
    border-color: rgba(216, 177, 90, .32);
    background: rgba(20, 23, 31, .84);
    outline: none;
  }

  .sideUser .sideAvatar {
    grid-row: span 2;
  }

  .sideUserName {
    min-width: 0;
    overflow: hidden;
    color: var(--mp-bone);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sideUser small {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--mp-gold-1);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.4px;
    line-height: 1.2;
    text-transform: uppercase;
  }
  /* Rang-Zeile traegt jetzt die Tier-Farbe (statt Standard-Gold) + farbigen Kristall. */
  .sideUser small.hasRank {
    color: var(--rank-color, var(--mp-gold-1));
  }
  .sideUser small .sideRankCrystal {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    transform: rotate(45deg);
    background: var(--rank-color, var(--mp-gold-1));
    box-shadow: 0 0 6px color-mix(in srgb, var(--rank-color, var(--mp-gold-1)) 60%, transparent);
  }
  .sideUser small .sideRankText {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sideNavList {
    margin-top: 6px;
  }

  .sideNavList::before {
    content: none;
  }

  .sideNavLabel {
    padding: 14px 14px 8px;
    color: var(--mp-ink-dim);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
  }

  .sideNavDivider {
    height: 1px;
    margin: 14px 16px;
    background: linear-gradient(90deg, transparent, rgba(216, 177, 90, .20), transparent);
  }

  .sideNavList button {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
  }

  .sideNavList button .navIcon {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: var(--mp-gold-2);
  }

  .sideNavList button .navIcon svg,
  .sideUtility svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
  }

  .sideNavList button .navIcon svg.fill {
    fill: currentColor;
    stroke: none;
  }

  .sideNavList button.is-current .navIcon {
    color: var(--mp-teal-1);
  }

  #modeBadge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 43px;
    padding: 11px 12px;
  }

  #modeBadge::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mp-teal-2);
    box-shadow: 0 0 8px var(--mp-teal-2);
    animation: pulseGlow 2.4s ease-in-out infinite;
  }

  .sideUtility {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
  }

  .sideUtility span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    color: var(--mp-ink-dim);
    transition: color .16s ease, border-color .16s ease;
  }

  .sideUtility span:last-child {
    margin-left: auto;
  }

  .sideUtility span:hover {
    border-color: rgba(216, 177, 90, .20);
    color: var(--mp-gold-1);
  }

  /* Make the nav list consume free space so the Servers Online panel + utility
     icons pin to the bottom — matches the template's sb-nav flex:1 behaviour.
     overflow-y:auto is essential: when the rail is shorter than the menu (e.g.
     ~900px laptops) the list scrolls internally instead of spilling its buttons
     over the Status/Support/Footer below — which used to make the bottom nav
     items (Community) unclickable. */
  header.sideNav .sideNavList {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
  }

  .modeScreen::after,
  main::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 60% 40% at 30% 90%, rgba(77, 208, 196, .08), transparent 60%),
      radial-gradient(ellipse 80% 30% at 70% 100%, rgba(255, 255, 255, .03), transparent 70%);
    filter: blur(2px);
    animation: mistDrift 18s ease-in-out infinite alternate;
    z-index: 0;
  }

  main {
    position: relative;
    overflow: hidden;
  }

  main > :not(.mpParticles) {
    position: relative;
    z-index: 1;
  }

  .mpParticles {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
  }

  body.mode-select .modeScreen .mpParticles,
  body.mode-profile .modeScreen .mpParticles,
  body.mode-collection .modeScreen .mpParticles,
  body.mode-community .modeScreen .mpParticles,
  body.mode-ranked .modeScreen .mpParticles,
  body.mode-lessons .modeScreen .mpParticles,
  body.mode-puzzle .modeScreen .mpParticles,
  body.mode-messages .modeScreen .mpParticles,
  body.mode-info .modeScreen .mpParticles,
  body.mode-play .modeScreen .mpParticles {
    position: fixed;
    top: 0;
    left: var(--side-nav-width);
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  main > .mpParticles {
    z-index: 0;
  }

  .mpParticle {
    position: absolute;
    bottom: -10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--mp-teal-1);
    box-shadow:
      0 0 6px rgba(110, 231, 216, .82),
      0 0 14px var(--mp-teal-glow);
    opacity: .70;
    animation: floatUp linear infinite;
  }

  .mpParticle.gold {
    background: var(--mp-gold-1);
    box-shadow:
      0 0 6px rgba(216, 177, 90, .78),
      0 0 14px var(--mp-gold-glow);
  }

  .mpParticle.small {
    width: 2px;
    height: 2px;
    opacity: .50;
  }

  #boardStage {
    grid-template-columns: var(--own-rail-size) auto var(--enemy-rail-size);
    gap: 20px;
    align-items: stretch;
  }

  .effectRail {
    width: 100%;
    min-width: 0;
    min-height: calc(var(--board-size) + 56px);
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
    overflow-y: auto;
    scrollbar-color: rgba(216, 177, 90, .22) transparent;
    scrollbar-width: thin;
  }

  .effectRail.left,
  .effectRail.right {
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
  }

  .effectRail.left .effectGroups {
    flex-direction: column;
  }

  .effectRailHeader {
    min-height: 62px;
    padding: 10px 12px;
    gap: 10px;
    background: var(--mp-panel-2);
    border-color: rgba(216, 177, 90, .18);
    box-shadow: none;
  }

  .effectRailHeader.is-active {
    border-color: rgba(77, 208, 196, .50);
    box-shadow: 0 0 0 1px rgba(77, 208, 196, .15), 0 0 22px rgba(77, 208, 196, .12);
  }

  .effectRailHeader-enemy.is-active {
    border-color: rgba(226, 106, 106, .50);
    box-shadow: 0 0 0 1px rgba(226, 106, 106, .15), 0 0 22px rgba(226, 106, 106, .12);
  }

  .effectRailHeaderKristall {
    width: 40px;
    height: 40px;
    border: 1px solid var(--mp-gold-3);
    background: rgba(7, 8, 11, .55);
  }

  .effectRailTurn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mp-teal-1);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .effectRailTurn.is-dim {
    color: var(--mp-ink-faint);
  }

  .effectRailTurnLabel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .effectRailTimer {
    font-family: var(--mp-mono);
    font-size: 13px;
    color: var(--mp-bone);
    font-weight: 500;
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
    text-transform: none;
  }

  .effectRailTurn.is-dim .effectRailTimer {
    color: var(--mp-ink-dim);
  }

  .effectRailPulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    animation: pulseGlow 1.6s ease-in-out infinite;
  }

  .effectGroup {
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(216, 177, 90, .10);
    background: rgba(11, 13, 18, .60);
  }

  .effectGroupHeader {
    min-height: auto;
    padding: 0;
    color: var(--mp-ink-dim);
    font-size: 9.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
  }

  .effectGroupHeader::before {
    width: 7px;
    height: 7px;
  }

  .effectChip {
    width: 100%;
    min-height: 58px;
    height: auto;
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 6px 8px 6px 6px;
    overflow: hidden;
    border-radius: 0;
    border-width: 1px;
    border-color: rgba(216, 177, 90, .12);
    background: rgba(7, 8, 11, .60);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
  }

  .effectRail .effectChip:where(.deck-pirate, .deck-undead) {
    border-color: rgba(216, 177, 90, .12);
    background: rgba(7, 8, 11, .60);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .24), inset 0 0 10px rgba(0, 0, 0, .20);
  }

  .effectRail.left .effectChip,
  .effectRail.right .effectChip,
  .effectRail.left .effectChip.trigger-activated,
  .effectRail.right .effectChip.trigger-activated {
    width: 100%;
    height: auto;
    min-height: 58px;
  }

  .effectChip:hover,
  .effectChip:focus-visible {
    border-color: var(--mp-teal-2);
    background: rgba(15, 28, 30, .50);
    box-shadow: 0 0 18px color-mix(in srgb, var(--effect-tone, var(--mp-teal-2)) 30%, transparent);
  }

  .effectChip.effectActive {
    border-color: var(--mp-teal-1);
    background: rgba(15, 40, 42, .70);
    box-shadow: 0 0 0 1px var(--mp-teal-1), 0 0 18px rgba(77, 208, 196, .40);
  }

  .effectChip.effectActive::after {
    inset: 3px;
    border-radius: 0;
  }

  .effectPortrait,
  .effectPiece {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--mp-gold-3);
    border-radius: 0;
    background: rgba(7, 8, 11, .74);
  }

  .effectPiece {
    display: grid;
    place-items: center;
    font-size: 22px;
  }

  .effectText {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    text-align: left;
  }

  .effectName {
    overflow: hidden;
    color: var(--mp-bone);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .effectTag {
    overflow: hidden;
    color: var(--mp-ink, #d8cfb8);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    line-height: 1.25;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .effectCost,
  .effectPass {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 18px;
    height: 18px;
    padding: 1px 5px;
    border: 1px solid rgba(77, 208, 196, .35);
    border-radius: 999px;
    background: rgba(7, 8, 11, .78);
    color: var(--mp-teal-1);
    font-family: var(--mp-mono);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
  }

  .effectPass {
    border-color: rgba(138, 166, 212, .35);
    color: #8aa6d4;
  }

  .effectOrb {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #9ee9e0, #2c8a82);
    box-shadow: 0 0 4px rgba(77, 208, 196, .70);
  }

  .effectTagRow {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .effectTagRow .effectTag {
    flex: 0 0 auto;
    min-width: 0;
  }
  .effectState {
    display: block;
    align-self: flex-end;
    max-width: 100%;
    overflow: hidden;
    color: var(--mp-ink-faint);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .effectEmpty {
    width: 100%;
    height: 44px;
    border-radius: 0;
  }

  .sq.move::after,
  .sq.actionMoveTarget::after,
  .sq.extra::after {
    inset: 0;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle, rgba(216, 177, 90, .92) 0 8%, rgba(216, 177, 90, .38) 9% 13%, transparent 14%);
    color: #d8b15a;
    box-shadow: none;
    animation: boardTargetPulse 1.6s ease-in-out infinite;
  }

  .sq.capture::after,
  .sq.actionCaptureTarget::after,
  .sq.effectCaptureHover::before {
    inset: 0;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle, rgba(226, 106, 106, .92) 0 8%, rgba(194, 90, 74, .40) 9% 13%, transparent 14%);
    color: #e26a6a;
    animation: boardTargetPulse 1.6s ease-in-out infinite;
  }

  /* Hover preview markers — subtler ("angehaucht") than the full
     action-target style so they read as a hint, not a commit. */
  .sq.threatMove::before,
  .sq.threatCapture::before,
  .sq.threatPoison::before,
  .sq.abilityField::before {
    inset: 0;
    border: 0;
    border-radius: 0;
    animation: boardTargetPulseHint 1.8s ease-in-out infinite;
  }
  .sq.threatMove::before {
    background:
      radial-gradient(circle, rgba(216, 177, 90, .55) 0 8%, rgba(216, 177, 90, .22) 9% 13%, transparent 14%);
    color: #d8b15a;
  }
  /* Schlag-Hover etwas deutlicher: dichter + minimal groesser als die anderen
     Hover-Hints, bleibt aber unter dem committeten .capture-Ring (kein Glow). */
  .sq.threatCapture::before {
    background:
      radial-gradient(circle, rgba(226, 106, 106, .82) 0 9%, rgba(194, 90, 74, .42) 10% 14%, transparent 15%);
    color: #e26a6a;
  }
  .sq.threatPoison::before {
    background:
      radial-gradient(circle, rgba(90, 192, 140, .60) 0 8%, rgba(60, 145, 105, .24) 9% 13%, transparent 14%);
    color: #5ac08c;
  }
  .sq.abilityField::before {
    background:
      radial-gradient(circle, rgba(110, 231, 216, .60) 0 8%, rgba(77, 208, 196, .22) 9% 13%, transparent 14%);
    color: #4dd0c4;
  }

  /* Zusatz-Overlays (Einstellung „alle Angriffe/Effekte beim Hover zeigen"):
     hohler Ring in der Feldmitte, rot = potenzieller Angriff, blau = Effekt.
     Bewusst als Ring (nicht voller Punkt), damit echte Schlag-/Zug-Ziele fuehren. */
  .sq .threatDot {
    position: absolute;
    inset: 35%;
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 3;
    animation: boardTargetPulseHint 1.8s ease-in-out infinite;
  }
  .sq .threatDot-attack {
    border: 2px solid rgba(226, 106, 106, .82);
    background: radial-gradient(circle, rgba(226, 106, 106, .26) 0 45%, transparent 62%);
    box-shadow: 0 0 6px rgba(226, 106, 106, .35);
  }
  .sq .threatDot-effect {
    border: 2px solid rgba(110, 231, 216, .82);
    background: radial-gradient(circle, rgba(110, 231, 216, .24) 0 45%, transparent 62%);
    box-shadow: 0 0 6px rgba(110, 231, 216, .35);
  }

  /* Combo: a square that's both a threat target and in the hovered
     piece's ability-field range. The threat colour stays as the
     primary pulsing background; a small teal pip is layered on top
     via ::after so both signals stay readable. */
  .sq.threatMove.abilityField::before {
    background:
      radial-gradient(circle, rgba(216, 177, 90, .55) 0 8%, rgba(216, 177, 90, .22) 9% 13%, transparent 14%);
    color: #d8b15a;
  }
  .sq.threatCapture.abilityField::before {
    background:
      radial-gradient(circle, rgba(226, 106, 106, .82) 0 9%, rgba(194, 90, 74, .42) 10% 14%, transparent 15%);
    color: #e26a6a;
  }
  .sq.threatPoison.abilityField::before {
    background:
      radial-gradient(circle, rgba(90, 192, 140, .60) 0 8%, rgba(60, 145, 105, .24) 9% 13%, transparent 14%);
    color: #5ac08c;
  }
  .sq.threatMove.abilityField::after,
  .sq.threatCapture.abilityField::after,
  .sq.threatPoison.abilityField::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background:
      radial-gradient(circle, rgba(110, 231, 216, .90) 0 4%, transparent 6%);
    animation: boardTargetPulseHint 1.8s ease-in-out infinite .3s;
  }

  @keyframes boardTargetPulseHint {
    0%, 100% { opacity: .45; transform: scale(.95); }
    50%      { opacity: .80; transform: scale(1.05); }
  }

  .sq.actionSourceTarget::after,
  .sq.effectSourceHover::before,
  .sq.effectTargetHover::before,
  .sq.effectPotentialHover::after {
    inset: 0;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle, rgba(110, 231, 216, .92) 0 8%, rgba(77, 208, 196, .38) 9% 13%, transparent 14%);
    color: #4dd0c4;
    animation: boardTargetPulse 1.6s ease-in-out infinite;
  }

  .sq.selected .chip,
  .sq.actionActor .chip,
  .sq.actionSourcePicked .chip,
  .sq.pickCandidate .chip {
    animation: pieceFocusPulse 1.8s ease-in-out infinite;
  }

  .sq.kingInCheck {
    box-shadow:
      inset 0 0 0 1px rgba(226, 106, 106, .42),
      inset 0 0 22px rgba(176, 48, 80, .18);
  }

  /* Schach-Markierung am bedrohten Koenig: ruhiger, hochwertiger roter
     Vignetten-Ring, der atmet (chess.com-Stil) – auffaelliger als der letzte
     Zug, aber nicht aggressiv. Das atmende Pendant zur blauen Markierung der
     aktiven Effektfigur. Der negative animationDelay (inline aus render.js,
     globale Uhr) sorgt dafuer, dass Hover-Re-Renders die Atmung nicht neu
     starten. Absolut positioniert + pointer-events:none -> kein Layout-Shift. */
  .sq .checkRing {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 47%,
      rgba(226, 76, 76, 0) 33%,
      rgba(214, 58, 60, .26) 70%,
      rgba(176, 32, 48, .50) 100%);
    box-shadow:
      inset 0 0 0 2px rgba(228, 92, 92, .55),
      inset 0 0 20px rgba(214, 50, 60, .30);
    animation: kingCheckBreath 2.4s ease-in-out infinite;
    will-change: opacity;
  }

  .sq.kingInCheck .chip {
    /* Statischer roter Bedrohungs-Glow auf der Figur – keine Animation, damit
       Hover-Re-Renders ruhig bleiben; das Atmen lebt im .checkRing-Layer. */
    filter:
      drop-shadow(0 6px 6px rgba(0, 0, 0, .62))
      drop-shadow(0 0 13px rgba(226, 106, 106, .68));
  }

  @keyframes boardTargetPulse {
    0%, 100% {
      opacity: .70;
      transform: scale(.92);
      filter: drop-shadow(0 0 6px currentColor);
    }
    50% {
      opacity: 1;
      transform: scale(1.08);
      filter: drop-shadow(0 0 14px currentColor);
    }
  }

  @keyframes pieceFocusPulse {
    0%, 100% {
      filter:
        drop-shadow(0 6px 6px rgba(0, 0, 0, .62))
        drop-shadow(0 0 10px rgba(77, 208, 196, .55));
    }
    50% {
      filter:
        drop-shadow(0 6px 6px rgba(0, 0, 0, .62))
        drop-shadow(0 0 18px rgba(77, 208, 196, .85));
    }
  }

  @keyframes kingCheckBreath {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sq .checkRing { animation: none; opacity: .85; }
  }

  @keyframes floatUp {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: .7; }
    90%  { opacity: .5; }
    100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
  }

  @keyframes mistDrift {
    0%   { transform: translateX(-30px); }
    100% { transform: translateX(30px); }
  }

  @keyframes pulseGlow {
    0%, 100% { opacity: 1;   box-shadow: 0 0 8px currentColor; }
    50%      { opacity: .6;  box-shadow: 0 0 16px currentColor; }
  }

  .startSectionHead {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin: 0 -64px;
    /* Hintergrund + Trennlinie (border-top) bleiben volle Breite (margin:0 -64px);
       nur der Inhalt wird per --home-gutter zentriert eingerückt. */
    padding: 50px var(--home-gutter, 64px) 32px;
    border-top: 1px solid rgba(216, 177, 90, .08);
    /* Flacher Hintergrund (kein Gradient) — sonst Naht zum Content darunter (dessen
       Gradient wieder hell startet). Header + Content pro Abschnitt = ein Band. */
    background: rgba(7, 8, 11, .9);
  }
  .startSectionHead .left { max-width: 580px; display: grid; gap: 12px; }
  .startSectionTitle {
    margin: 0;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 1.05;
  }
  .startSectionDesc {
    margin: 0;
    max-width: 540px;
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }
  .startSectionEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--mp-teal-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
  }
  .startSectionEyebrow .num {
    color: var(--mp-gold-2);
    font-family: var(--mp-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 1px;
  }
  .startSectionEyebrow .line {
    width: 30px;
    height: 1px;
    background: var(--mp-gold-3);
  }

  /* Ghost button (Read More / All Factions) */
  .btn.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid rgba(216, 177, 90, .25);
    background: transparent;
    color: var(--mp-bone);
    font-family: var(--mp-sans, "Manrope", system-ui, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
  }
  .btn.btn-ghost:hover {
    color: var(--mp-teal-1);
    border-color: rgba(77, 208, 196, .40);
    background: rgba(77, 208, 196, .04);
  }
  .btn .arrow { display: inline-block; transition: transform .16s ease; }
  .btn:hover .arrow { transform: translateX(3px); }

  /* === Design-parity "feature" cards (overrides the existing .visionGrid look) === */
  .visionGrid.features {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    /* Hintergrund voll-bleed (Basis-.visionGrid margin:0 -64px), nur die Karten per
       --home-gutter einrücken -> dunkler Hintergrund volle Breite, Inhalt zentriert. */
    padding-inline: var(--home-gutter, 64px);
  }
  .feature {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    padding: 26px 22px 22px;
    border: 1px solid rgba(216, 177, 90, .12);
    background: linear-gradient(180deg, rgba(20, 23, 31, .70), rgba(11, 13, 18, .85));
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
    cursor: pointer;
  }
  .feature::before,
  .feature::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid var(--mp-gold-3);
    transition: border-color .24s ease;
    pointer-events: none;
  }
  .feature::before { top: -1px;    left: -1px;  border-right: 0; border-bottom: 0; }
  .feature::after  { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }
  .feature:hover {
    background: linear-gradient(180deg, rgba(26, 30, 40, .85), rgba(14, 17, 23, .95));
    border-color: rgba(77, 208, 196, .30);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .60), 0 0 30px rgba(77, 208, 196, .08);
  }
  .feature:hover::before,
  .feature:hover::after { border-color: var(--mp-teal-2); }
  .feature .featureIdx {
    margin-bottom: 18px;
    color: var(--mp-gold-2);
    font-family: var(--mp-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 2px;
  }
  .feature .featureGlyph {
    margin-bottom: 16px;
    color: var(--mp-gold-1);
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(216, 177, 90, .35));
  }
  .feature h3 {
    margin: 0 0 10px;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 1px;
  }
  .feature p {
    margin: 0;
    color: var(--mp-ink);
    font-size: 13px;
    line-height: 1.55;
  }
  .feature .featureMore {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
    color: var(--mp-ink-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color .16s ease;
  }
  .feature:hover .featureMore { color: var(--mp-teal-1); }
  @media (max-width: 1100px) {
    .visionGrid.features { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    .visionGrid.features { grid-template-columns: 1fr; }
    .startSectionHead { flex-direction: column; align-items: flex-start; }
  }

  /* Hide the bottom-left "Modus: …" badge from the sidebar — not part of the
     Claude template and the dev build overwrites it with the engine URL. */
  header.sideNav #modeBadge {
    display: none !important;
  }

  /* ===== Sidebar status block ("Servers Online · 4.218 in Queue · 28ms") ===== */
  .sideStatus {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 16px 12px;
    padding: 11px 12px;
    border: 1px solid rgba(77, 208, 196, .22);
    background: rgba(35, 155, 149, .06);
    color: var(--mp-ink, #aea58c);
    font-size: 11px;
  }
  .sideStatusDot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--mp-teal-2, #4dd0c4);
    color: var(--mp-teal-2, #4dd0c4);
    box-shadow: 0 0 8px currentColor;
    animation: pulseGlow 2.4s ease-in-out infinite;
  }
  /* Engine nicht erreichbar: Punkt rot, kein Pulsieren. */
  .sideStatus.off .sideStatusDot {
    background: #d8635a;
    color: #d8635a;
    animation: none;
  }
  .sideStatusMeta {
    min-width: 0;
    line-height: 1.25;
  }
  .sideStatusTitle {
    color: var(--mp-bone, #e8dec5);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
  }
  .sideStatusInfo {
    margin-top: 2px;
    color: var(--mp-ink-dim, #847b65);
    font-size: 10.5px;
  }
  .sideStatusCount {
    color: var(--mp-bone, #e8dec5);
    font-weight: 600;
  }
  body.side-nav-collapsed .sideStatus {
    margin: 0 10px 12px;
    padding: 10px 0;
    justify-content: center;
  }
  body.side-nav-collapsed .sideStatusMeta {
    display: none;
  }

  /* "Zurueck zur Partie": derselbe Status-Kasten, aber als klickbarer Button. Teal =
     laufende Partie; Gold = du bist am Zug (Handlungsaufforderung). */
  .sideResume {
    appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
  }
  /* .sideStatus setzt display:flex und wuerde das [hidden]-Attribut aushebeln -> explizit
     ausblenden, solange keine laufende Partie da ist (hoehere Spezifitaet als .sideStatus). */
  .sideResume[hidden] { display: none !important; }
  .sideResume:hover,
  .sideResume:focus-visible {
    border-color: rgba(77, 208, 196, .5);
    background: rgba(35, 155, 149, .12);
    transform: translateY(-1px);
    outline: none;
  }
  .sideResume .sideStatusTitle { color: var(--mp-teal-2, #4dd0c4); }
  .sideResume.yourTurn .sideStatusDot {
    background: var(--mp-gold, #d4af37);
    color: var(--mp-gold, #d4af37);
  }
  .sideResume.yourTurn .sideStatusTitle { color: var(--mp-gold, #d4af37); }
  .sideResumeArrow {
    margin-left: auto;
    display: inline-flex;
    flex-shrink: 0;
    color: var(--mp-teal-2, #4dd0c4);
  }
  .sideResume.yourTurn .sideResumeArrow { color: var(--mp-gold, #d4af37); }
  body.side-nav-collapsed .sideResumeArrow { display: none; }

  /* ===== "Live" badge on the Online Play nav item ===== */
  .sideNavList button .navBadge {
    padding: 3px 6px;
    border: 1px solid rgba(77, 208, 196, .25);
    background: rgba(77, 208, 196, .12);
    color: var(--mp-teal-1, #6ee7d8);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  body.side-nav-collapsed .sideNavList button .navBadge {
    display: none;
  }

  /* ===== Hero primary button: design's L-shaped corner accents ===== */
  .modeChoices button.primary {
    position: relative;
  }
  .modeChoices button.primary .btnCorner {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(12, 14, 19, .65);
    pointer-events: none;
  }
  .modeChoices button.primary .btnCorner.tl { top: 4px;    left: 4px;  border-right: 0; border-bottom: 0; }
  .modeChoices button.primary .btnCorner.tr { top: 4px;    right: 4px; border-left: 0;  border-bottom: 0; }
  .modeChoices button.primary .btnCorner.bl { bottom: 4px; left: 4px;  border-right: 0; border-top: 0; }
  .modeChoices button.primary .btnCorner.br { bottom: 4px; right: 4px; border-left: 0;  border-top: 0; }
  .modeChoices button.primary .btnArrow {
    display: inline-block;
    margin-left: 4px;
    transition: transform .16s ease;
  }
  .modeChoices button.primary:hover .btnArrow {
    transform: translateX(3px);
  }

  @media (max-width: 1280px) {
    :root {
      --own-rail-size: 240px;
      --enemy-rail-size: 240px;
    }
  }

  @media (max-width: 1000px) {
    body.mode-demo {
      --board-size: min(
        calc(100vw - var(--side-nav-width) - 54px),
        calc(100dvh - 368px),
        820px
      );
    }

    #boardStage {
      grid-template-columns: minmax(0, 1fr);
    }

    body.mode-demo .effectRail {
      width: min(calc(var(--board-size) + 24px), calc(100vw - var(--side-nav-width) - 20px));
      max-height: 96px;
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
    }

    body.mode-demo .effectRailHeader {
      flex: 0 0 180px;
    }

    body.mode-demo .effectGroups,
    body.mode-demo .effectRail.left .effectGroups {
      flex-direction: row;
    }

    body.mode-demo .effectGroup {
      flex: 0 0 auto;
      min-width: 190px;
    }

    body.mode-demo .effectList,
    body.mode-demo .effectRail.left .effectList,
    body.mode-demo .effectRail.right .effectList {
      flex-direction: row;
    }

    body.mode-demo .effectChip {
      width: 180px;
      flex: 0 0 180px;
    }
  }

  body.side-nav-collapsed .sideAccount,
  body.side-nav-collapsed .sideNavLabel,
  body.side-nav-collapsed .sideUser small {
    display: none !important;
  }
  body.side-nav-collapsed .sideNavDivider {
    width: 28px;
    margin: 8px auto;
    justify-self: center;
  }
  body.side-nav-collapsed .sideUtility {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 0 4px;
    border-top: 1px solid rgba(216, 177, 90, .10);
  }
  body.side-nav-collapsed .sideUtility span {
    width: 32px;
    height: 32px;
    margin-left: 0 !important;
  }

  body.side-nav-collapsed .sideNavList {
    margin-top: 36px;
    padding: 18px 0;
  }

  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;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
  }

  body.side-nav-collapsed .sideNavList button .navIcon {
    flex: 0 0 auto;
    color: var(--mp-gold-1);
  }

  body.side-nav-collapsed .sideNavToggle {
    top: 32px;
    right: -14px;
    align-self: auto;
    margin: 0;
  }

  @media (max-width: 820px) {
    body.side-nav-collapsed .sideNavToggle {
      top: 18px;
    }

    body:not(.side-nav-collapsed) header.sideNav .sideAccount,
    body:not(.side-nav-collapsed) header.sideNav .sideNavLabel,
    body:not(.side-nav-collapsed) header.sideNav .sideNavDivider {
      display: grid !important;
    }

    body:not(.side-nav-collapsed) header.sideNav .sideNavLabel {
      display: block !important;
    }

    body:not(.side-nav-collapsed) header.sideNav .sideNavList {
      margin-top: 6px;
    }

    body:not(.side-nav-collapsed) header.sideNav .sideNavList button,
    body:not(.side-nav-collapsed) header.sideNav .sideNavList button:disabled,
    body:not(.side-nav-collapsed) header.sideNav .sideNavList button:hover,
    body:not(.side-nav-collapsed) header.sideNav .sideNavList button:focus-visible {
      grid-template-columns: 18px minmax(0, 1fr) auto;
    }
  }

  /* ============ Effect rail: template-parity header / context / footer ============ */

  /* Header avatar (replaces square Kristall) — square portrait with gold border */
  .effectRailHeaderAvatar {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--mp-gold-3);
    background: rgba(7, 8, 11, .55);
  }
  .effectRailHeaderAvatar .effectRailHeaderImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
  }

  /* Name + ELO on one row */
  .effectRailHeaderNameRow {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }
  .effectRailHeaderNameRow .effectRailHeaderName {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
  }
  .effectRailHeaderNameRow .effectRailHeaderElo {
    color: var(--mp-gold-1);
    font-family: var(--mp-mono);
    font-size: 10.5px;
    letter-spacing: .4px;
  }
  /* Hide the old ELO line (kept as static now); .effectRailHeaderElo on its own row is the legacy element */
  .effectRailHeader > .effectRailHeaderInfo > .effectRailHeaderElo:not(.effectRailHeaderNameRow .effectRailHeaderElo) {
    display: none;
  }

  /* Group header: colored dot before title, centered group title, count badge, optional ctx tag */
  .effectGroup .effectGroupHeader .effectGroupTitle {
    flex: 1;
    text-align: left;
  }
  .effectGroup .effectGroupHeader {
    justify-content: flex-start;
    text-align: left;
  }
  .effectGroup.effectGroup-activatable { --group-tone: #d8b15a; }
  .effectGroup.effectGroup-on-capture  { --group-tone: #e26a6a; }
  .effectGroup.effectGroup-on-move     { --group-tone: #5ac08c; }
  .effectGroup.effectGroup-passive     { --group-tone: #8aa6d4; }
  .effectGroup.effectGroup-active      { --group-tone: #8aa6d4; }
  .effectGroup .effectGroupHeader::before {
    width: 7px;
    height: 7px;
    background: var(--group-tone, var(--mp-gold-1));
    box-shadow: 0 0 8px color-mix(in srgb, var(--group-tone, var(--mp-gold-1)) 62%, transparent);
  }
  .effectGroup.effectGroup-activatable .effectGroupHeader { color: var(--mp-gold-1); }
  .effectGroup.effectGroup-on-capture  .effectGroupHeader { color: #e26a6a; }
  .effectGroup.effectGroup-on-move     .effectGroupHeader { color: #8ed4a7; }
  .effectGroup.effectGroup-passive     .effectGroupHeader,
  .effectGroup.effectGroup-active      .effectGroupHeader { color: #aab8d8; }
  .effectGroup.effectGroup-graveyard   .effectGroupHeader { color: #a98ed8; }
  .effectGroup.effectGroup-activatable .effectGroupHeader:hover { color: #ffe7a3; }
  .effectGroup.effectGroup-on-capture  .effectGroupHeader:hover { color: #ff9a9a; }
  .effectGroup.effectGroup-on-move     .effectGroupHeader:hover { color: #c5f2d5; }
  .effectGroup.effectGroup-passive     .effectGroupHeader:hover,
  .effectGroup.effectGroup-active      .effectGroupHeader:hover { color: #d9e4ff; }
  .effectGroup.effectGroup-graveyard .effectGroupHeader:hover,
  .effectGroup.effectGroup-graveyard .effectGroupHeader:focus-visible {
    color: #e4d5ff;
    text-shadow: 0 0 12px rgba(200, 160, 255, .55);
  }
  .effectGroup.effectGroup-graveyard .effectGroupHeader:hover::before,
  .effectGroup.effectGroup-graveyard .effectGroupHeader:focus-visible::before {
    background: #c8a0ff;
    box-shadow: 0 0 12px rgba(200, 160, 255, .72);
  }
  .effectGroup.effectGroup-graveyard .effectGroupHeader:hover b,
  .effectGroup.effectGroup-graveyard .effectGroupHeader:focus-visible b {
    border-color: rgba(200, 160, 255, .62);
    color: #e4d5ff;
    box-shadow: 0 0 10px rgba(200, 160, 255, .34);
  }

  /* Context tag badge inside primary group's header (Aktiv / Achtung) */
  .effectGroupCtxTag {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(216, 177, 90, .16);
    border: 1px solid rgba(216, 177, 90, .3);
    color: var(--mp-gold-1);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    line-height: 1.4;
  }
  .effectGroup.effectGroup-on-capture .effectGroupCtxTag,
  .effectGroup.effectGroup-on-move    .effectGroupCtxTag {
    background: rgba(226, 106, 106, .16);
    border-color: rgba(226, 106, 106, .36);
    color: #e9a0a0;
  }
  /* Push the count badge to the right of the title, but ctxTag should still beat it */
  .effectGroup .effectGroupHeader b { margin-left: 0; }
  /* Hide chevron when ctx tag present (avoids visual clutter) */
  .effectGroup.ctxPrimary .effectGroupChevron { display: none; }

  /* ctxPrimary — gold (action) or crimson (threats) glow with pulse */
  .effectGroup.ctxPrimary {
    border-color: rgba(216, 177, 90, .35) !important;
    box-shadow: 0 0 0 1px rgba(216, 177, 90, .06) inset, 0 4px 18px rgba(216, 177, 90, .08);
  }
  .effectGroup.ctxPrimary.effectGroup-on-capture,
  .effectGroup.ctxPrimary.effectGroup-on-move {
    border-color: rgba(226, 106, 106, .45) !important;
    box-shadow: 0 0 0 1px rgba(226, 106, 106, .08) inset, 0 4px 18px rgba(226, 106, 106, .12);
    animation: effectReactPulse 2.4s ease-in-out infinite;
  }
  @keyframes effectReactPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(226, 106, 106, .08) inset, 0 4px 18px rgba(226, 106, 106, .08); }
    50%      { box-shadow: 0 0 0 1px rgba(226, 106, 106, .20) inset, 0 4px 28px rgba(226, 106, 106, .26); }
  }
  /* ctxDim — softly fades inactive groups but keeps the group colour tint
     readable; hover still brightens via the per-group :hover rules above. */
  .effectGroup.ctxDim { opacity: .56; }
  .effectGroup.ctxDim .effectGroupHeader::before {
    box-shadow: none !important;
  }

  /* Empty graveyard placeholder (dashed box, "— LEER —") */
  .effectGraveyardEmpty {
    width: 100%;
    min-height: 56px;
    display: grid;
    place-items: center;
    padding: 10px 8px;
    background: rgba(7, 8, 11, .5);
    border: 1px dashed rgba(216, 177, 90, .18);
    color: var(--mp-ink-faint);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  /* Make the graveyard header non-clickable look (no chevron, plain row) */
  .effectGroup-graveyard .effectGroupHeaderStatic {
    cursor: default;
  }
  .effectGroup-graveyard .effectGroupHeaderStatic .effectGroupTitle {
    flex: 1;
    text-align: left;
  }
  .effectListGraveyard {
    padding: 0;
  }
  .graveyardGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px 10px 10px;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 177, 90, .25) transparent;
  }
  .effectGroup-graveyard.is-collapsed .graveyardGrid {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .22s ease, opacity .18s ease, padding .18s ease;
  }
  .graveTile {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: rgba(11, 13, 18, .55);
    border: 1px solid rgba(216, 177, 90, .38);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), 0 1px 4px rgba(0, 0, 0, .45);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
  }
  .graveTile img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .graveTile:hover {
    border-color: rgba(216, 177, 90, .68);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), 0 0 10px rgba(216, 177, 90, .28);
  }
  .graveTile.is-stacked {
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, .55),
      4px -4px 0 -1px rgba(11, 13, 18, .55),
      4px -4px 0 0 rgba(216, 177, 90, .38),
      0 1px 4px rgba(0, 0, 0, .45);
  }
  .graveTile.is-stacked:hover {
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, .55),
      4px -4px 0 -1px rgba(11, 13, 18, .55),
      4px -4px 0 0 rgba(216, 177, 90, .68),
      0 0 10px rgba(216, 177, 90, .28);
  }
  .graveTileImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    pointer-events: none;
  }
  .graveTileGlyph {
    font-size: 22px;
    color: var(--mp-bone);
  }
  .graveTileCount {
    position: absolute;
    bottom: 2px;
    right: 3px;
    padding: 1px 5px;
    background: rgba(11, 13, 18, .88);
    border: 1px solid rgba(216, 177, 90, .35);
    color: var(--mp-gold-1, #d8b15a);
    font-family: var(--mp-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1;
    pointer-events: none;
  }

  /* Bottom-of-rail footer (own = Aufgeben / Remis, enemy = Zughistorie) */
  .effectRailFooter {
    width: 100%;
    margin-top: auto;
  }
  .effectRailFooter-own {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  /* Gegen den Computer gibt es kein Remis -> einzelner Aufgeben-Knopf in voller Breite. */
  .effectRailFooter-own.is-single {
    grid-template-columns: 1fr;
  }
  .effectRailFooterBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    background: rgba(11, 13, 18, .55);
    border: 1px solid rgba(216, 177, 90, .14);
    color: var(--mp-ink-dim);
    font-family: var(--mp-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .14s, border-color .14s, background .14s;
  }
  .effectRailFooterBtn:hover:not(:disabled),
  .effectRailFooterBtn:focus-visible:not(:disabled) {
    color: var(--mp-bone);
    border-color: rgba(216, 177, 90, .4);
    background: rgba(20, 18, 12, .7);
    outline: none;
  }
  .effectRailFooterBtn:disabled {
    cursor: not-allowed;
    opacity: .72;
  }
  .effectRailFooterIcon {
    display: inline-flex;
    color: var(--mp-gold-3);
    font-size: 12px;
  }
  .effectRailFooterBtn:hover:not(:disabled) .effectRailFooterIcon {
    color: var(--mp-gold-1);
  }
  /* "Mit Freund spielen": Einladungs-Link-Knopf UEBER Aufgeben/Remis, volle
     Breite. Teal = aktiver Handlungs-Akzent, solange der Gegner-Slot offen ist.
     [hidden] explizit toeten — display:flex der Basisklasse gewinnt sonst. */
  .effectRailShareBtn {
    grid-column: 1 / -1;
    border-color: rgba(77, 208, 196, .32);
    color: var(--mp-teal-1, #80e8df);
  }
  .effectRailShareBtn[hidden] { display: none; }
  .effectRailShareBtn .effectRailFooterIcon { color: inherit; }
  .effectRailShareBtn:hover:not(:disabled),
  .effectRailShareBtn:focus-visible:not(:disabled) {
    color: #a9f3ec;
    border-color: var(--mp-teal-glow, rgba(77, 208, 196, .45));
    background: rgba(13, 24, 24, .7);
  }
  .effectRailShareBtn:hover:not(:disabled) .effectRailFooterIcon { color: inherit; }

  /* Move-history footer (enemy rail) */
  .effectRailFooter-enemy {
    padding: 12px 14px;
    background: rgba(11, 13, 18, .60);
    border: 1px solid rgba(216, 177, 90, .10);
  }
  .effectRailHistoryHeader {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--mp-ink-dim);
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
  }
  /* Kopfzeile = Titel + Zug-Navigations-Icons nebeneinander. */
  .effectRailHistoryHead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .effectRailHistoryHead .effectRailHistoryHeader {
    flex: 1;
    width: auto;
    margin-bottom: 0;
  }
  .effectRailHistoryNav {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
  }
  .iconBtn-sm { width: 28px; height: 28px; }
  .effectRailHistoryNav .iconBtn {
    background: rgba(11, 13, 18, .5);
    border-color: rgba(216, 177, 90, .18);
    color: var(--mp-ink);
  }
  .effectRailHistoryNav .iconBtn:hover:not(:disabled) {
    border-color: rgba(216, 177, 90, .5);
    color: var(--mp-bone);
  }
  .effectRailHistoryHeader:hover {
    color: var(--mp-bone);
  }
  .effectRailHistoryHeader .effectGroupChevron {
    margin-left: 4px;
    color: var(--mp-ink-dim);
    font-size: 10px;
    line-height: 1;
  }
  .effectRailHistoryMeta {
    flex: 1 1 auto;
    text-align: right;
    color: var(--mp-gold-3);
    font-size: 9px;
    letter-spacing: 1.6px;
    font-weight: 700;
  }
  .effectRailHistoryBody {
    display: grid;
    grid-template-columns: 22px 1fr 1fr;
    gap: 4px 8px;
    max-height: 176px;
    overflow-y: auto;
    color: var(--mp-ink);
    font-family: var(--mp-mono);
    font-size: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 177, 90, .25) transparent;
  }
  .effectRailFooter-enemy.is-collapsed .effectRailHistoryHeader {
    margin-bottom: 0;
  }
  .effectRailFooter-enemy.is-collapsed .effectRailHistoryBody {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    transition: max-height .22s ease, opacity .18s ease;
  }
  .effectRailHistoryBody.is-empty {
    display: block;
    text-align: center;
    color: var(--mp-ink-faint);
    font-family: var(--mp-sans);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .effectRailHistoryBody .phNum { color: var(--mp-ink-dim); }
  .effectRailHistoryBody .phW,
  .effectRailHistoryBody .phB {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
  }
  .effectRailHistoryBody .phW { color: var(--mp-bone); }
  .effectRailHistoryBody .phB { color: var(--mp-teal-1); }
  .effectRailHistoryBody .phCoords { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .effectRailHistoryBody .phPiece {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
  }
  .effectRailHistoryBody .phPieceImg {
    width: 16px;
    height: 16px;
    object-fit: contain;
    image-rendering: auto;
  }

  /* Mana bar (header, both sides) */
  .effectManaRow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
  }
  .effectManaBar {
    display: flex;
    flex: 1;
    gap: 2px;
  }
  .effectManaPip {
    flex: 1;
    height: 4px;
    min-width: 4px;
    background: rgba(216, 177, 90, .10);
    border: 1px solid rgba(77, 208, 196, .15);
    border-radius: 2px;
  }
  .effectManaPip.is-full {
    background: linear-gradient(180deg, #6ce4d8, #2b9088);
    border-color: rgba(108, 228, 216, .55);
    box-shadow: 0 0 6px rgba(77, 208, 196, .50);
  }
  .effectManaNum {
    color: var(--mp-teal-1);
    font-family: var(--mp-mono);
    font-size: 10px;
    letter-spacing: .4px;
    font-variant-numeric: tabular-nums;
  }
  .effectManaNum .effectManaCap { color: var(--mp-ink-faint); }

  /* Cost orb tiers — different palette per mana cost */
  .effectCost {
    --cost-orb-light: #9ee9e0;
    --cost-orb-dark:  #2c8a82;
    --cost-edge:      rgba(77, 208, 196, .35);
    --cost-text:      var(--mp-teal-1);
    --cost-glow:      rgba(77, 208, 196, .60);
    border-color: var(--cost-edge);
    color: var(--cost-text);
  }
  .effectCost .effectOrb {
    background: radial-gradient(circle at 35% 30%, var(--cost-orb-light), var(--cost-orb-dark));
    box-shadow: 0 0 4px var(--cost-glow);
    animation: effectOrbPulse 2.6s ease-in-out infinite;
  }
  @keyframes effectOrbPulse {
    0%, 100% { box-shadow: 0 0 3px var(--cost-glow); transform: scale(1); }
    50%      { box-shadow: 0 0 8px var(--cost-glow); transform: scale(1.18); }
  }
  /* Tier 1: bezahlbar, billig — bronze/silber */
  .effectCost[data-cost-tier="1"] {
    --cost-orb-light: #e7e2cf;
    --cost-orb-dark:  #6e6650;
    --cost-edge:      rgba(216, 199, 158, .45);
    --cost-text:      #d8cfb3;
    --cost-glow:      rgba(216, 199, 158, .55);
  }
  /* Tier 2: solides Teal (Default) */
  .effectCost[data-cost-tier="2"] {
    --cost-orb-light: #9ee9e0;
    --cost-orb-dark:  #2c8a82;
    --cost-edge:      rgba(77, 208, 196, .55);
    --cost-text:      var(--mp-teal-1);
    --cost-glow:      rgba(77, 208, 196, .70);
  }
  /* Tier 3: Smaragd — etwas tiefer */
  .effectCost[data-cost-tier="3"] {
    --cost-orb-light: #8eecaa;
    --cost-orb-dark:  #2a8a55;
    --cost-edge:      rgba(94, 208, 138, .55);
    --cost-text:      #8edfa6;
    --cost-glow:      rgba(94, 208, 138, .70);
  }