/* Tier 4: Gold — Elite */
  .effectCost[data-cost-tier="4"] {
    --cost-orb-light: #f4d57a;
    --cost-orb-dark:  #7e5f24;
    --cost-edge:      rgba(216, 177, 90, .65);
    --cost-text:      var(--mp-gold-1);
    --cost-glow:      rgba(216, 177, 90, .70);
  }
  /* Tier 5+: Champion — Violett */
  .effectCost[data-cost-tier="5"] {
    --cost-orb-light: #cdb4ff;
    --cost-orb-dark:  #5a3da6;
    --cost-edge:      rgba(170, 136, 255, .60);
    --cost-text:      #c8a6ff;
    --cost-glow:      rgba(170, 136, 255, .75);
  }
  /* Insufficient-mana cost orb — crimson overrides every tier */
  .effectCost.effectCostShort {
    --cost-orb-light: #f4a8a8;
    --cost-orb-dark:  #8a2c2c;
    --cost-edge:      rgba(226, 106, 106, .55);
    --cost-text:      #e26a6a;
    --cost-glow:      rgba(226, 106, 106, .70);
    animation: effectCostShortShake 3.2s ease-in-out infinite;
  }
  @keyframes effectCostShortShake {
    0%, 86%, 100% { transform: translateX(0); }
    88%           { transform: translateX(-1px); }
    90%           { transform: translateX(1px); }
    92%           { transform: translateX(-1px); }
    94%           { transform: translateX(0); }
  }

  /* Whole chip when locked by mana — desaturate portrait but keep title visible */
  .effectChip.effectShortMana { opacity: .85; }
  .effectChip.effectShortMana .effectPortrait,
  .effectChip.effectShortMana .effectPortraitImg {
    filter: grayscale(.5) brightness(.78);
  }
  /* Ready + affordable + actually pickable: subtle outline pulse to invite click */
  .effectChip.effectAffordable {
    box-shadow:
      0 0 0 1px rgba(216, 177, 90, .34),
      0 0 12px rgba(216, 177, 90, .18);
  }
  .effectChip.effectAffordable::before {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    border: 1px solid rgba(216, 177, 90, .46);
    border-radius: inherit;
    opacity: .4;
    animation: effectAffordableGlow 2.4s ease-in-out infinite;
  }
  @keyframes effectAffordableGlow {
    0%, 100% { opacity: .25; }
    50%      { opacity: .75; }
  }

  /* Selected ability: match the Claude play rail "selecting" state exactly. */
  .effectChip.effectActive,
  .effectChip.effectActive.effectAffordable {
    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::before,
  .effectChip.effectActive::after {
    content: none;
    display: none;
    animation: none;
  }

  .effectChip.effectActive .effectPortrait,
  .effectChip.effectActive .effectPiece {
    box-shadow: 0 0 0 1px var(--mp-teal-1), 0 0 12px rgba(77, 208, 196, .50);
  }

  .effectChip.effectActive .effectPortraitImg {
    filter: none;
  }

  /* Mana bar at cap — every pip glows together */
  .effectManaRow.is-full .effectManaPip.is-full {
    animation: effectManaCapPulse 1.8s ease-in-out infinite;
  }
  @keyframes effectManaCapPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(77, 208, 196, .35); }
    50%      { box-shadow: 0 0 10px rgba(77, 208, 196, .75); }
  }

  #boardWrap .actionStatus {
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: 12;
    width: auto;
    max-width: min(560px, calc(100% - 32px));
    display: none;
    transform: translateX(-50%);
    grid-template-columns: none;
    gap: 0;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    color: var(--mp-parchment);
    pointer-events: auto;
    animation: actionStatusFloatIn 240ms ease-out;
  }

  #boardWrap .actionStatus.show {
    display: block;
  }

  #boardWrap .actionStatusCard {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border: 1px solid rgba(77, 208, 196, .50);
    border-radius: 4px;
    background: rgba(7, 12, 14, .92);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .50), 0 0 24px rgba(77, 208, 196, .20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  #boardWrap .actionStatusImg {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--mp-teal-2);
    background-color: rgba(7, 8, 11, .70);
    background-position: center top;
    background-size: cover;
  }

  #boardWrap .actionStatusGlyph {
    display: grid;
    place-items: center;
    color: var(--mp-teal-1);
    font-size: 20px;
  }

  #boardWrap .actionStatusText {
    min-width: 0;
  }

  #boardWrap .actionStatusName {
    overflow: hidden;
    color: var(--mp-bone);
    font-family: var(--font-serif, Georgia, serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #boardWrap .actionStatusHint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    color: var(--mp-teal-1);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: normal;
  }

  #boardWrap .actionStatusSep {
    color: rgba(216, 177, 90, .68);
  }

  #boardWrap .actionStatusEsc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mp-teal-1);
    font: inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
  }

  #boardWrap .actionStatusEsc:hover,
  #boardWrap .actionStatusEsc:focus-visible {
    color: #fff;
    background: transparent;
    box-shadow: none;
  }

  #boardWrap .actionStatusEsc kbd {
    padding: 1px 5px;
    border: 1px solid rgba(77, 208, 196, .40);
    border-radius: 3px;
    background: rgba(77, 208, 196, .15);
    color: var(--mp-teal-1);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 9px;
    line-height: 1.2;
  }

  @keyframes actionStatusFloatIn {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }

  .effectRailHeader {
    position: relative;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 76px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(77, 208, 196, .56);
    border-radius: 0;
    background:
      linear-gradient(180deg, rgba(9, 12, 18, .92), rgba(6, 8, 12, .92)),
      rgba(7, 8, 11, .88);
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, .58),
      0 0 0 1px rgba(0, 0, 0, .45),
      0 0 18px rgba(77, 208, 196, .08);
  }

  .effectRailHeader.is-active,
  .effectRailHeader-enemy.is-active {
    border-color: rgba(77, 208, 196, .82);
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, .62),
      0 0 0 1px rgba(77, 208, 196, .16),
      0 0 22px rgba(77, 208, 196, .13);
  }

  .effectRailHeaderAvatar,
  .effectRailHeaderKristall {
    grid-column: 1;
    width: 42px;
    height: 42px;
    border: 1px solid var(--mp-gold-3);
    border-radius: 0;
    background: rgba(7, 8, 11, .72);
  }

  .effectRailHeaderImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    filter: none;
  }

  .effectRailHeaderKristall .effectRailHeaderImg {
    object-fit: contain;
    padding: 2px;
  }

  .effectRailHeaderInfo {
    grid-column: 2;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    gap: 2px;
    align-self: center;
  }

  .effectRailHeaderNameRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }

  .effectRailHeaderNameRow .effectRailHeaderName,
  .effectRailHeaderName {
    overflow: hidden;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.3px;
    line-height: 1.05;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .effectRailHeaderNameRow .effectRailHeaderElo,
  .effectRailHeaderElo {
    color: var(--mp-gold-1);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1;
    text-transform: none;
  }

  .effectRailTurn {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--mp-teal-1);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
  }

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

  .effectRailTimer {
    justify-self: end;
    color: var(--mp-bone);
    font-family: var(--mp-mono);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .4px;
    line-height: 1;
    text-transform: none;
  }

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

  .effectRailTurn.is-dim .effectRailTimer {
    color: var(--mp-bone);
    opacity: .72;
  }

  .effectRailPulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 9px currentColor;
  }

  .effectManaRow {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
  }

  .effectManaBar {
    display: flex;
    gap: 3px;
    min-width: 0;
  }

  .effectManaPip {
    flex: 1 1 0;
    height: 4px;
    min-width: 10px;
    border: 0;
    border-radius: 0;
    background: rgba(77, 208, 196, .13);
  }

  .effectManaPip.is-full {
    background: linear-gradient(180deg, #7ff4e9, #43c7bd);
    box-shadow: 0 0 6px rgba(77, 208, 196, .54);
  }

  .effectManaNum {
    justify-self: end;
    color: var(--mp-teal-1);
    font-family: var(--mp-mono);
    font-size: 10px;
    line-height: 1;
    letter-spacing: .2px;
  }

  /* Tablet portrait play layout: keep the board large, but make the side
     navigation and both effect rails compact enough to fit the viewport. */
  @media (orientation: portrait) and (max-width: 1180px) {
    body.mode-demo {
      --side-nav-width: var(--side-nav-collapsed-width);
      --rail-size: 58px;
      --effect-chip-size: 54px;
      --board-size: calc(100vw - var(--side-nav-width) - 48px);
      grid-template-columns: var(--side-nav-width) minmax(0, 1fr);
      overflow-x: hidden;
    }

    body.mode-demo header.sideNav {
      width: var(--side-nav-width);
      padding: 12px 8px;
      align-items: center;
      gap: 12px;
      overflow: hidden;
    }

    body.mode-demo header.sideNav .brandBlock,
    body.mode-demo header.sideNav .sideSearch,
    body.mode-demo header.sideNav #modeBadge,
    body.mode-demo header.sideNav .sideUser span:not(.sideAvatar),
    body.mode-demo header.sideNav .authPanel,
    body.mode-demo header.sideNav .sideUtility,
    body.mode-demo header.sideNav .sideAccount,
    body.mode-demo header.sideNav .sideNavLabel,
    body.mode-demo header.sideNav .sideNavDivider {
      display: none !important;
    }

    body.mode-demo .sideBrand {
      width: 100%;
      justify-content: center;
      padding: 12px 0 14px;
    }

    body.mode-demo .sideFooter {
      justify-content: center;
      align-items: center;
    }

    body.mode-demo .sideNavToggle {
      top: 28px;
      right: -12px;
    }

    body.mode-demo .sideNavList {
      width: 100%;
      margin-top: 10px;
      padding: 12px 0;
      justify-items: center;
    }

    body.mode-demo header.sideNav .sideNavList button,
    body.mode-demo header.sideNav .sideNavList button:disabled,
    body.mode-demo header.sideNav .sideNavList button:hover,
    body.mode-demo header.sideNav .sideNavList button:focus-visible,
    body.mode-demo header.sideNav #navOnline {
      width: 38px !important;
      max-width: 38px !important;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      grid-template-columns: none;
      padding: 0 !important;
      overflow: hidden;
      color: transparent !important;
      font-size: 0 !important;
    }

    body.mode-demo header.sideNav .sideNavList button .navIcon {
      flex: 0 0 auto;
      color: var(--mp-gold-1, var(--rift-gold-bright));
      font-size: 18px;
    }

    body.mode-demo header.sideNav .sideNavList button .navLabel,
    body.mode-demo header.sideNav .sideNavList button .navBadge {
      display: none !important;
    }

    body.mode-demo .sideStatus {
      width: 38px;
      height: 38px;
      min-height: 38px;
      padding: 0;
      display: grid;
      place-items: center;
    }

    body.mode-demo .sideStatusMeta {
      display: none;
    }

    body.mode-demo main {
      min-width: 0;
      min-height: 100dvh;
      padding: 12px 12px 20px;
      justify-content: flex-start;
      overflow-x: hidden;
    }

    body.mode-demo #boardStage {
      width: min(calc(var(--board-size) + 24px), calc(100vw - var(--side-nav-width) - 24px));
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "enemy"
        "board"
        "own";
      gap: 8px;
      align-items: center;
      justify-items: center;
    }

    body.mode-demo #boardWrap,
    body.mode-demo .effectRail,
    body.mode-demo #gamePanel,
    body.mode-demo #pieceInfo {
      width: min(calc(var(--board-size) + 24px), calc(100vw - var(--side-nav-width) - 24px));
    }

    body.mode-demo #boardWrap {
      padding: 8px;
      border-radius: 8px;
    }

    body.mode-demo #board {
      width: var(--board-size);
      height: var(--board-size);
    }

    body.mode-demo .effectRail {
      min-height: 0;
      height: auto;
      max-height: none;
      display: grid;
      grid-template-columns: minmax(0, auto) auto;
      grid-template-rows: auto calc(var(--effect-chip-size) + 18px);
      align-items: center;
      justify-content: center;
      gap: 8px 10px;
      padding: 8px;
      border: 1px solid rgba(216, 177, 90, .16);
      background: rgba(7, 8, 11, .64);
      overflow-x: hidden;
      overflow-y: visible;
    }

    body.mode-demo .effectRailHeader {
      grid-column: 1 / -1;
      width: 100%;
      height: auto;
      min-height: 76px;
      flex: 0 0 auto;
      padding: 10px 12px;
    }

    body.mode-demo .effectRailHeaderAvatar,
    body.mode-demo .effectRailHeaderKristall {
      width: 42px;
      height: 42px;
    }

    body.mode-demo .effectRailHeaderNameRow .effectRailHeaderName,
    body.mode-demo .effectRailHeaderName {
      font-size: 13px;
      letter-spacing: 1.3px;
    }

    body.mode-demo .effectRailTurn,
    body.mode-demo .effectRailClock {
      font-size: 9px;
    }

    body.mode-demo .effectRailHeaderElo {
      font-size: 10px;
    }

    body.mode-demo .effectManaRow {
      gap: 8px;
      margin-top: 6px;
    }

    body.mode-demo .effectGroups,
    body.mode-demo .effectRail.left .effectGroups,
    body.mode-demo .effectRail.right .effectGroups {
      grid-column: 1;
      grid-row: 2;
      min-width: 0;
      width: max-content;
      max-width: calc(100vw - var(--side-nav-width) - 150px);
      flex: 0 1 auto;
      height: calc(var(--effect-chip-size) + 18px);
      max-height: calc(var(--effect-chip-size) + 18px);
      flex-direction: row;
      align-items: center;
      justify-content: center;
      justify-self: end;
      gap: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    body.mode-demo .effectGroups::-webkit-scrollbar {
      display: none;
    }

    body.mode-demo .effectGroup {
      width: auto;
      min-width: 0;
      height: calc(var(--effect-chip-size) + 18px);
      flex: 0 0 auto;
      flex-direction: row;
      align-items: center;
      gap: 6px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    body.mode-demo .effectGroup.ctxPrimary,
    body.mode-demo .effectGroup.ctxPrimary.effectGroup-on-capture,
    body.mode-demo .effectGroup.ctxPrimary.effectGroup-on-move {
      border: 0 !important;
      box-shadow: none;
      animation: none;
    }

    body.mode-demo .effectGroup.ctxDim {
      opacity: .72;
    }

    body.mode-demo .effectGroups .effectGroup + .effectGroup {
      padding-left: 10px;
      border-left: 1px solid rgba(216, 177, 90, .28) !important;
    }

    body.mode-demo .effectGroup.ctxPrimary .effectGroupHeader::before {
      box-shadow:
        0 0 10px color-mix(in srgb, var(--group-tone, var(--mp-gold-1)) 78%, transparent),
        0 0 18px color-mix(in srgb, var(--group-tone, var(--mp-gold-1)) 44%, transparent);
      animation: tabletEffectGroupPulse 1.7s ease-in-out infinite;
    }

    body.mode-demo .effectGroup.ctxPrimary .effectGroupHeader b {
      border-color: color-mix(in srgb, var(--group-tone, var(--mp-gold-1)) 72%, rgba(216, 177, 90, .35));
      color: color-mix(in srgb, var(--group-tone, var(--mp-gold-1)) 86%, #fff);
      box-shadow: 0 0 10px color-mix(in srgb, var(--group-tone, var(--mp-gold-1)) 42%, transparent);
    }

    body.mode-demo .effectRail > .effectGroup-graveyard {
      grid-column: 2;
      grid-row: 2;
      height: calc(var(--effect-chip-size) + 18px);
      min-height: 0;
      align-self: center;
      justify-self: start;
      padding-left: 10px;
      border-left: 1px solid rgba(216, 177, 90, .24);
      margin-top: 0;
    }

    body.mode-demo .effectRail > .effectGroup-graveyard .effectGroupHeader {
      height: var(--effect-chip-size);
    }

    body.mode-demo .effectRail > .effectGroup-graveyard .graveyardGrid {
      display: none;
    }

    body.mode-demo .effectGroupHeader {
      width: auto;
      min-width: 28px;
      height: var(--effect-chip-size);
      justify-content: center;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--mp-ink-dim);
      font-size: 0;
      letter-spacing: 0;
    }

    body.mode-demo .effectGroupHeader::before {
      display: block;
      width: 7px;
      height: 7px;
    }

    body.mode-demo .effectGroupHeader .effectGroupTitle,
    body.mode-demo .effectGroupHeader .effectGroupChevron {
      display: none;
    }

    body.mode-demo .effectGroupHeader b,
    body.mode-demo .effectGroupHeader[data-effect-section] b,
    body.mode-demo .effectGroup.is-collapsed .effectGroupHeader[data-effect-section] b {
      display: inline-flex;
      margin-left: 0;
      min-width: 18px;
      height: 18px;
      font-size: 10px;
    }

    body.mode-demo .effectList,
    body.mode-demo .effectRail.left .effectList,
    body.mode-demo .effectRail.right .effectList {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      padding: 0;
      overflow: visible;
    }

    body.mode-demo .effectChip,
    body.mode-demo .effectRail.left .effectChip,
    body.mode-demo .effectRail.right .effectChip,
    body.mode-demo .effectRail.left .effectChip.trigger-activated,
    body.mode-demo .effectRail.right .effectChip.trigger-activated {
      width: var(--effect-chip-size);
      min-width: var(--effect-chip-size);
      min-height: var(--effect-chip-size);
      height: var(--effect-chip-size);
      flex: 0 0 var(--effect-chip-size);
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      align-items: center;
      justify-items: center;
      gap: 0;
      padding: 0;
      border-radius: 50%;
      border-width: 2px;
      overflow: visible;
      background:
        radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--effect-tone, var(--mp-teal-2)) 32%, transparent), transparent 58%),
        rgba(7, 8, 11, .76);
    }

    body.mode-demo .effectGroup.ctxPrimary .effectChip.effectReady:not(.effectShortMana),
    body.mode-demo .effectGroup.ctxPrimary .effectChip.effectAffordable {
      border-color: color-mix(in srgb, var(--effect-tone, var(--mp-gold-1)) 78%, rgba(216, 177, 90, .36));
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--effect-tone, var(--mp-gold-1)) 48%, transparent),
        0 0 16px color-mix(in srgb, var(--effect-tone, var(--mp-gold-1)) 50%, transparent),
        inset 0 0 10px rgba(0, 0, 0, .28);
      animation: tabletEffectChipReadyPulse 1.65s ease-in-out infinite;
    }

    body.mode-demo .effectPortrait,
    body.mode-demo .effectPiece {
      width: 100%;
      height: 100%;
      flex-basis: auto;
      border-radius: 50%;
    }

    body.mode-demo .effectPiece {
      font-size: 20px;
    }

    body.mode-demo .effectText,
    body.mode-demo .effectName,
    body.mode-demo .effectTag,
    body.mode-demo .effectState {
      display: none;
    }

    body.mode-demo .effectChip.effectActive::before,
    body.mode-demo .effectChip.effectActive::after,
    body.mode-demo .effectChip.effectAffordable::before {
      border-radius: 50%;
    }

    body.mode-demo .effectCost,
    body.mode-demo .effectPass {
      top: -2px;
      right: -2px;
      min-width: 19px;
      height: 19px;
      padding: 1px 4px;
      font-size: 9px;
    }

    @keyframes tabletEffectGroupPulse {
      0%, 100% { opacity: .72; transform: scale(.92); }
      50%      { opacity: 1; transform: scale(1.18); }
    }

    @keyframes tabletEffectChipReadyPulse {
      0%, 100% {
        transform: scale(.98);
        filter: brightness(1);
      }
      50% {
        transform: scale(1.06);
        filter: brightness(1.22);
      }
    }

    body.mode-demo .effectRailFooter {
      display: none;
    }

    body.mode-demo #gamePanel {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      padding: 10px;
    }

    body.mode-demo #gameStatus {
      gap: 5px 8px;
    }

    body.mode-demo #gameActions {
      justify-content: center;
    }
  }

  @media (orientation: portrait) and (max-width: 1180px) {
    @supports not (height: 100dvh) {
      body.mode-demo {
        --board-size: calc(100vw - var(--side-nav-width) - 48px);
      }
    }
  }

  @media (max-width: 820px) {
    body.mode-demo #boardStage {
      width: min(calc(var(--board-size) + 24px), calc(100vw - var(--side-nav-width) - 20px));
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "enemy"
        "board"
        "own";
      justify-self: center;
      justify-items: center;
      gap: 8px;
    }

    body.mode-demo #boardWrap,
    body.mode-demo .effectRail,
    body.mode-demo #gamePanel,
    body.mode-demo #pieceInfo {
      width: min(calc(var(--board-size) + 24px), calc(100vw - var(--side-nav-width) - 20px));
      max-width: 100%;
    }

    body.mode-demo .effectRail {
      min-height: 0;
      max-height: 116px;
      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 .effectList,
    body.mode-demo .effectRail.left .effectList,
    body.mode-demo .effectRail.right .effectList {
      flex-direction: row;
    }
  }

  /* Keep the navigation as a persistent viewport rail while the page content scrolls. */
  header.sideNav {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--side-nav-width);
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
  }

  @supports not (height: 100dvh) {
    header.sideNav {
      height: 100vh;
      max-height: 100vh;
    }
  }

  /* ===========================================================
     Phase 2 Collection Vault
     =========================================================== */
  :root {
    --rarity-common: #a09474;
    --rarity-rare: #6ee7d8;
    --rarity-epic: #b87ce8;
    --rarity-legendary: #d8b15a;
    --rarity-common-glow: rgba(160, 148, 116, .25);
    --rarity-rare-glow: rgba(110, 231, 216, .35);
    --rarity-epic-glow: rgba(184, 124, 232, .40);
    --rarity-legendary-glow: rgba(216, 177, 90, .45);
    --moss-1: #78daa2;
    --moss-glow: rgba(120, 218, 162, .35);
  }

  .srOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.mode-collection .collectionPage {
    width: calc(100vw - var(--side-nav-width));
    min-height: calc(100vh - 57px);
    padding: clamp(72px, 10vh, 112px) 56px 80px 56px;
    gap: 0;
  }

  body.side-nav-collapsed.mode-collection .collectionPage {
    width: calc(100vw - var(--side-nav-collapsed-width));
  }

  body.mode-community .communityPage,
  body.mode-lessons .lessonsPage,
  body.mode-puzzle .puzzlePage,
  body.mode-messages .messagesPage,
  body.mode-info .infoPage,
  body.mode-play .playPage {
    width: calc(100vw - var(--side-nav-width));
    min-height: calc(100vh - 57px);
    padding: clamp(72px, 10vh, 112px) 56px 80px 56px;
    gap: 0;
  }

  body.side-nav-collapsed.mode-community .communityPage,
  body.side-nav-collapsed.mode-lessons .lessonsPage,
  body.side-nav-collapsed.mode-puzzle .puzzlePage,
  body.side-nav-collapsed.mode-messages .messagesPage,
  body.side-nav-collapsed.mode-info .infoPage,
  body.side-nav-collapsed.mode-play .playPage {
    width: calc(100vw - var(--side-nav-collapsed-width));
  }

  /* Play-Seite ("DUELL"): Styles im .duell-Block (Abschnitt PLAY page weiter unten). */

  /* ============================================================
     COMMUNITY — 1:1-Port der Claude-Design-Vorlage ("Werkstatt").
     Alles unter .comm gescoped; Design-Tokens -> --mp-*. Kein
     Block-Glow: der Ambient-Glow kommt von der mode-community
     heroVignette (Gold unten-links + Teal oben-rechts).
     ============================================================ */
  .comm {
    --accent: var(--mp-gold-1);
    --accent-soft: rgba(216, 177, 90, 0.14);
    --accent-line: rgba(216, 177, 90, 0.45);
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    color: var(--mp-bone);
    font-family: var(--mp-sans);
  }

  .comm-head { margin-bottom: 30px; }

  /* ====== Statusstreifen (Zuletzt ausgeliefert / In Arbeit / Updates) ====== */
  .comm-status {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 150px;
    gap: 0;
    margin-bottom: 26px;
    background: linear-gradient(180deg, rgba(13, 16, 22, 0.6), rgba(8, 9, 13, 0.82));
    border: 1px solid rgba(216, 177, 90, 0.2);
  }
  .comm-status::before, .comm-status::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--mp-gold-2);
  }
  .comm-status::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .comm-status::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

  .comm .cs-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
  }
  .comm .cs-cell + .cs-cell { border-left: 1px solid rgba(216, 177, 90, 0.12); }
  .comm .cs-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--mp-teal-1);
    box-shadow: 0 0 10px var(--mp-teal-1);
  }
  .comm .cs-dot.ghost {
    background: transparent;
    border: 1px solid var(--mp-gold-3);
    box-shadow: none;
  }
  .comm .cs-text { min-width: 0; }
  .comm .cs-k {
    font-size: 9.5px;
    letter-spacing: 2.5px;
    color: var(--mp-ink-dim);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .comm .cs-v {
    font-family: var(--mp-serif-body);
    font-size: 16px;
    color: var(--mp-bone);
    letter-spacing: 0.2px;
  }
  .comm .cs-v .ver {
    font-family: var(--mp-mono);
    font-size: 12px;
    color: var(--mp-teal-1);
    margin-right: 8px;
  }
  .comm .cs-v em { font-style: normal; color: var(--mp-ink); }
  .comm .cs-updates {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    padding: 16px 22px;
    border-left: 1px solid rgba(216, 177, 90, 0.12);
    background: rgba(216, 177, 90, 0.03);
  }
  .comm .cs-updates .num {
    font-family: var(--mp-serif);
    font-size: 38px;
    line-height: 0.9;
    color: var(--mp-gold-1);
    font-weight: 700;
  }
  .comm .cs-updates .lbl {
    font-size: 8.5px;
    letter-spacing: 2px;
    color: var(--mp-ink-dim);
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 8px;
    line-height: 1.5;
  }

  /* ====== Hauptraster: Inhalt + Chat-Rail ====== */
  .comm-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 28px;
    align-items: stretch;
  }
  .comm-content { min-width: 0; display: flex; flex-direction: column; }

  /* ====== Tabs ====== */
  .comm-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(216, 177, 90, 0.12);
  }
  .comm-tab {
    position: relative;
    padding: 11px 18px 13px;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-ink-dim);
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
  }
  .comm-tab:hover { color: var(--mp-bone); }
  .comm-tab.active {
    color: var(--accent);
    background: linear-gradient(180deg, var(--accent-soft), transparent);
    border-color: var(--accent-line);
  }
  .comm-tab.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-line);
  }

  .comm-panel { flex: 1; animation: commTabFade 240ms ease; }
  @keyframes commTabFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  .comm-empty {
    padding: 28px;
    color: var(--mp-ink);
    border: 1px dashed rgba(216, 177, 90, 0.22);
    background: rgba(11, 13, 18, 0.6);
    font-family: var(--mp-serif-body);
    font-size: 16px;
  }

  /* ====== FEED ====== */
  .comm .feed-list { display: flex; flex-direction: column; gap: 14px; }
  .comm .feed-card {
    position: relative;
    padding: 22px 26px 24px;
    background: linear-gradient(180deg, rgba(18, 21, 28, 0.62), rgba(11, 13, 18, 0.82));
    border: 1px solid rgba(216, 177, 90, 0.13);
    border-left: 2px solid rgba(216, 177, 90, 0.25);
    transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
  }
  .comm .feed-card:hover {
    border-color: rgba(77, 208, 196, 0.3);
    border-left-color: var(--mp-teal-2);
    background: linear-gradient(180deg, rgba(24, 28, 38, 0.8), rgba(14, 17, 23, 0.9));
    transform: translateX(2px);
  }
  .comm .feed-card.pinned {
    border-left: 2px solid var(--mp-teal-2);
    background:
      radial-gradient(ellipse 70% 100% at 0% 0%, rgba(77, 208, 196, 0.07), transparent 60%),
      linear-gradient(180deg, rgba(18, 23, 30, 0.7), rgba(11, 13, 18, 0.85));
  }
  .comm .fc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
  }
  .comm .fc-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
  }
  .comm .fc-cat { color: var(--mp-teal-1); }
  .comm .fc-cat.gold { color: var(--mp-gold-1); }
  .comm .fc-date { color: var(--mp-ink-dim); font-family: var(--mp-mono); letter-spacing: 1px; }
  .comm .fc-pin { color: var(--mp-teal-2); display: grid; place-items: center; }
  .comm .fc-title {
    font-family: var(--mp-serif);
    font-size: 25px;
    letter-spacing: 0.6px;
    color: var(--mp-bone);
    margin: 0 0 10px;
    font-weight: 600;
  }
  .comm .fc-text {
    font-family: var(--mp-serif-body);
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--mp-ink);
    margin: 0;
    max-width: 720px;
  }
  .comm .fc-link {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-ink-dim);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: color 160ms;
  }
  .comm .feed-card:hover .fc-link { color: var(--mp-teal-1); }
  .comm .fc-link .arrow { display: inline-flex; transition: transform 160ms; }
  .comm .fc-link:hover .arrow { transform: translateX(3px); }
  .comm .fc-media { margin-top: 14px; display: grid; gap: 10px; }
  .comm .fc-media.is-grid { grid-template-columns: repeat(2, 1fr); }
  .comm .fc-shot { margin: 0; overflow: hidden; border: 1px solid rgba(216, 177, 90, 0.14); }
  .comm .fc-shot img { display: block; width: 100%; height: auto; }

  /* ====== DEVLOG ====== */
  .comm .devlog-list { display: flex; flex-direction: column; gap: 18px; }
  .comm .devlog-entry {
    position: relative;
    padding: 22px 26px 24px 28px;
    background: linear-gradient(180deg, rgba(16, 19, 26, 0.6), rgba(10, 12, 17, 0.82));
    border: 1px solid rgba(216, 177, 90, 0.13);
  }
  .comm .devlog-entry::before {
    content: "";
    position: absolute;
    left: -1px; top: 18px; bottom: 18px;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--mp-teal-2) 20%, var(--mp-teal-2) 80%, transparent);
    box-shadow: 0 0 10px rgba(77, 208, 196, 0.3);
  }
  .comm .devlog-entry.gold::before { background: linear-gradient(180deg, transparent, var(--mp-gold-2) 20%, var(--mp-gold-2) 80%, transparent); box-shadow: 0 0 10px var(--mp-gold-glow); }
  .comm .de-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
  }
  .comm .de-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .comm .de-badge {
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 8px;
    color: var(--mp-teal-1);
    border: 1px solid rgba(77, 208, 196, 0.3);
    background: rgba(77, 208, 196, 0.07);
  }
  .comm .de-ver { font-family: var(--mp-mono); font-size: 11px; color: var(--mp-gold-2); letter-spacing: 1px; }
  .comm .de-new {
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 700;
    padding: 4px 7px;
    color: #0c0e13;
    background: linear-gradient(180deg, #f0d27a, #c89a3e);
  }
  .comm .de-date { font-family: var(--mp-mono); font-size: 10.5px; color: var(--mp-ink-dim); letter-spacing: 1.5px; text-transform: uppercase; }
  .comm .de-title {
    font-family: var(--mp-serif);
    font-size: 27px;
    letter-spacing: 0.8px;
    color: var(--mp-bone);
    margin: 0 0 12px;
    font-weight: 600;
  }
  .comm .de-intro {
    font-family: var(--mp-serif-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--mp-ink);
    margin: 0 0 18px;
    max-width: 760px;
  }
  .comm .de-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .comm .de-points li {
    position: relative;
    padding-left: 22px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--mp-ink);
    letter-spacing: 0.1px;
    max-width: 820px;
  }
  .comm .de-points li b { color: var(--mp-bone); font-weight: 600; }
  .comm .de-points li::before {
    content: "";
    position: absolute;
    left: 2px; top: 7px;
    width: 6px; height: 6px;
    background: var(--mp-gold-1);
    transform: rotate(45deg);
    box-shadow: 0 0 6px var(--mp-gold-glow);
  }

  /* ====== ROADMAP ====== */
  .comm .roadmap-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 18px;
  }
  .comm .rm-col {
    position: relative;
    padding: 20px 20px 22px;
    background: linear-gradient(180deg, rgba(16, 19, 26, 0.6), rgba(10, 12, 17, 0.82));
    border: 1px solid rgba(216, 177, 90, 0.13);
    border-top: 2px solid var(--rm-c, var(--mp-teal-2));
  }
  .comm .rm-col.c-now    { --rm-c: #6ee7d8; }
  .comm .rm-col.c-next   { --rm-c: #d8b15a; }
  .comm .rm-col.c-vision { --rm-c: #b69cf0; }
  .comm .rm-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }
  .comm .rm-num { font-family: var(--mp-mono); font-size: 11px; color: var(--mp-ink-dim); letter-spacing: 1px; }
  .comm .rm-label {
    font-size: 11px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--rm-c);
  }
  .comm .rm-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
  .comm .rm-items li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mp-ink);
  }
  .comm .rm-items li::before {
    content: "\203A";
    position: absolute;
    left: 0; top: -1px;
    color: var(--rm-c);
    font-weight: 700;
    font-size: 15px;
  }
  .comm .rm-shipped {
    position: relative;
    padding: 18px 22px 20px;
    background: rgba(11, 13, 18, 0.55);
    border: 1px solid rgba(216, 177, 90, 0.1);
  }
  .comm .rm-shipped-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-ink-dim);
    margin-bottom: 16px;
  }
  .comm .rm-shipped-head .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(216,177,90,0.18), transparent); }
  .comm .rm-ship-row { display: flex; gap: 14px; flex-wrap: wrap; }
  .comm .rm-ship {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 14px;
    background: rgba(7, 8, 11, 0.5);
    border: 1px solid rgba(216, 177, 90, 0.12);
    flex: 1 1 200px;
  }
  .comm .rm-ship .v { font-family: var(--mp-mono); font-size: 11px; color: var(--mp-teal-1); letter-spacing: 0.5px; }
  .comm .rm-ship .t { font-size: 13px; color: var(--mp-bone); letter-spacing: 0.2px; }
  .comm .rm-ship .d { margin-left: auto; font-family: var(--mp-mono); font-size: 9.5px; color: var(--mp-ink-faint); }

  /* ====== MITMACHEN ====== */
  .comm .mit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
  .comm .mit-card {
    position: relative;
    padding: 26px 26px 24px;
    background: linear-gradient(180deg, rgba(18, 21, 28, 0.62), rgba(11, 13, 18, 0.82));
    border: 1px solid rgba(216, 177, 90, 0.15);
    display: flex;
    flex-direction: column;
  }
  .comm .mit-card::before, .comm .mit-card::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--mp-gold-2);
  }
  .comm .mit-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .comm .mit-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
  .comm .mit-ico {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid rgba(216, 177, 90, 0.3);
    color: var(--mp-gold-1);
    margin-bottom: 18px;
  }
  .comm .mit-card.teal .mit-ico { border-color: rgba(77, 208, 196, 0.4); color: var(--mp-teal-1); }
  .comm .mit-card .mc-title {
    font-family: var(--mp-serif);
    font-size: 22px;
    letter-spacing: 0.8px;
    color: var(--mp-bone);
    margin: 0 0 10px;
    font-weight: 600;
  }
  .comm .mit-card .mc-text {
    font-family: var(--mp-serif-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--mp-ink);
    margin: 0 0 18px;
    max-width: 460px;
  }
  .comm .mit-card .mc-foot {
    margin-top: auto;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mp-ink-dim);
    font-weight: 700;
  }
  .comm .mc-btn {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    font-size: 11px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-bone);
    border: 1px solid rgba(216, 177, 90, 0.4);
    background: rgba(18, 21, 28, 0.6);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
  }
  .comm .mc-btn:hover { border-color: var(--mp-gold-1); color: var(--mp-gold-1); box-shadow: 0 0 18px rgba(216,177,90,0.16); }
  .comm .mit-card.teal .mc-btn:hover { border-color: var(--mp-teal-1); color: var(--mp-teal-1); box-shadow: 0 0 18px rgba(77,208,196,0.18); }
  .comm .mc-btn.disabled { opacity: 0.6; cursor: not-allowed; }
  .comm .mc-btn.disabled:hover { border-color: rgba(216, 177, 90, 0.4); color: var(--mp-bone); box-shadow: none; }

  .comm .mit-ways {
    padding: 20px 24px 22px;
    background: rgba(11, 13, 18, 0.5);
    border: 1px solid rgba(216, 177, 90, 0.1);
  }
  .comm .mit-ways-head {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-ink-dim);
    margin-bottom: 16px;
  }
  .comm .mit-ways-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .comm .mw { display: flex; gap: 12px; align-items: flex-start; }
  .comm .mw .mw-ico { color: var(--mp-gold-2); flex-shrink: 0; margin-top: 2px; display: inline-flex; }
  .comm .mw .mw-name { font-size: 13px; color: var(--mp-bone); font-weight: 600; letter-spacing: 0.3px; margin-bottom: 4px; }
  .comm .mw .mw-desc { font-size: 12px; line-height: 1.45; color: var(--mp-ink-dim); }

  .comm .mit-social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
  }
  .comm .mit-social .soc {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    font-size: 10.5px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-ink);
    border: 1px solid rgba(216, 177, 90, 0.16);
    background: rgba(11, 13, 18, 0.55);
    text-decoration: none;
    transition: color 160ms, border-color 160ms;
  }
  .comm .mit-social .soc:hover { color: var(--mp-teal-1); border-color: rgba(77, 208, 196, 0.4); }
  .comm .mit-social .soc .tag { font-family: var(--mp-mono); font-size: 9px; color: var(--mp-ink-faint); letter-spacing: 1px; }

  /* ====== Community-Credits (Namensnennung der Mitglieder) ====== */
  .comm .mit-credits {
    margin-top: 16px;
    padding: 22px 24px 24px;
    background: rgba(11, 13, 18, 0.5);
    border: 1px solid rgba(216, 177, 90, 0.12);
  }
  .comm .mit-credits-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-ink-dim);
    margin-bottom: 8px;
  }
  .comm .mit-credits-head .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(216,177,90,0.18), transparent); }
  .comm .mit-credits-sub { font-family: var(--mp-serif-body); font-size: 14.5px; line-height: 1.5; color: var(--mp-ink-dim); margin: 0 0 18px; }
  .comm .mit-credits-group { margin-top: 16px; }
  .comm .mcg-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 12px;
  }
  .comm .mcg-label .mcg-ico { display: inline-flex; }
  .comm .mcg-label .mcg-ico svg { width: 14px; height: 14px; }
  .comm .mcg-label.is-patron { color: var(--mp-gold-1); }
  .comm .mcg-label.is-supporter { color: var(--mp-teal-1); }
  .comm .mcg-label .mcg-count {
    font-family: var(--mp-mono);
    font-size: 10px;
    color: var(--mp-ink-faint);
    border: 1px solid rgba(216, 177, 90, 0.18);
    padding: 1px 6px;
    letter-spacing: 0;
  }
  .comm .mcg-names { display: flex; flex-wrap: wrap; gap: 8px; }
  .comm .mc-name {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    font-family: var(--mp-serif);
    font-size: 14px;
    letter-spacing: 0.4px;
    color: var(--mp-bone);
    border: 1px solid rgba(216, 177, 90, 0.16);
    background: rgba(7, 8, 11, 0.5);
  }
  .comm .mc-name.is-patron {
    color: var(--mp-gold-1);
    border-color: rgba(216, 177, 90, 0.42);
    background: linear-gradient(180deg, rgba(216, 177, 90, 0.12), rgba(216, 177, 90, 0.03));
  }
  .comm .mc-name.is-supporter {
    color: var(--mp-teal-1);
    border-color: rgba(77, 208, 196, 0.32);
    background: rgba(35, 155, 149, 0.07);
  }
  .comm .mc-name--link { cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease; }
  .comm .mc-name--link:hover { transform: translateY(-1px); }
  .comm .mc-name.is-patron.mc-name--link:hover { box-shadow: 0 4px 14px rgba(216, 177, 90, 0.2); }
  .comm .mc-name.is-supporter.mc-name--link:hover { box-shadow: 0 4px 14px rgba(77, 208, 196, 0.18); }
  .comm .mit-credits-loading { font-family: var(--mp-serif-body); font-size: 14px; color: var(--mp-ink-dim); padding: 8px 0; }
  .comm .mit-credits-empty {
    font-family: var(--mp-serif-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--mp-ink);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .comm .mit-credits-empty b { color: var(--mp-bone); font-weight: 600; }
  .comm .mc-credits-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    font-family: var(--mp-sans);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: #0c0e13;
    background: linear-gradient(180deg, #f0d27a 0%, #d8b15a 45%, #b08530 100%);
    border: 1px solid #f0d27a;
    cursor: pointer;
    transition: transform 160ms, box-shadow 160ms;
  }
  .comm .mc-credits-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(216,177,90,0.35); }
  .comm .mc-credits-cta svg { width: 12px; height: 12px; }

  /* ====== Rechte Rail: Stats + Chat ====== */
  .comm-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 78px;
    align-self: start;
    max-height: calc(100vh - 96px);
  }

  .comm .rail-stats {
    position: relative;
    padding: 16px 18px;
    background: var(--mp-panel-2);
    border: 1px solid rgba(216, 177, 90, 0.18);
  }
  .comm .rail-stats-head {
    font-size: 9.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-ink-dim);
    margin-bottom: 12px;
  }
  .comm .rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .comm .rs {
    padding: 10px 12px;
    background: rgba(7, 8, 11, 0.5);
    border: 1px solid rgba(216, 177, 90, 0.1);
  }
  .comm .rs .rs-v {
    font-family: var(--mp-mono);
    font-size: 17px;
    color: var(--mp-bone);
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
  }
  .comm .rs .rs-v.teal { color: var(--mp-teal-1); }
  .comm .rs .rs-v.gold { color: var(--mp-gold-1); }
  .comm .rs .rs-v .rs-unit { font-size: 11px; color: var(--mp-ink-dim); }
  .comm .rs .rs-k {
    font-size: 8.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mp-ink-dim);
    font-weight: 700;
    margin-top: 4px;
  }

  /* ====== Chat (echte Logik: Polling/Senden/Profil, neu eingekleidet) ====== */
  .comm .chat {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--mp-panel-2);
    border: 1px solid rgba(216, 177, 90, 0.2);
  }
  .comm .chat::before, .comm .chat::after {
    content: "";
    position: absolute;
    width: 12px; height: 12px;
    border: 1px solid var(--mp-gold-2);
    pointer-events: none;
  }
  .comm .chat::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .comm .chat::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
  .comm .chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(216, 177, 90, 0.12);
  }
  .comm .chat-head .ch-title {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-ink);
  }
  .comm .chat-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: var(--mp-teal-1);
    padding: 3px 8px;
    border: 1px solid rgba(77, 208, 196, 0.3);
    background: rgba(77, 208, 196, 0.08);
  }
  .comm .chat-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mp-teal-1); box-shadow: 0 0 7px var(--mp-teal-1); animation: commPulseGlow 1.8s ease-in-out infinite; }
  .comm .chat-live.off { color: var(--mp-ink-dim); border-color: rgba(132, 123, 101, 0.3); background: rgba(132, 123, 101, 0.06); }
  .comm .chat-live.off .dot { background: var(--mp-ink-faint); box-shadow: none; animation: none; }
  @keyframes commPulseGlow { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

  .comm .chat-body {
    flex: 1;
    min-height: 260px;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(216,177,90,0.2) transparent;
  }
  .comm .chat-body::-webkit-scrollbar { width: 6px; }
  .comm .chat-body::-webkit-scrollbar-thumb { background: rgba(216,177,90,0.2); border-radius: 3px; }

  .comm .chat-system {
    display: flex;
    gap: 10px;
    padding: 11px 13px;
    background: rgba(216, 177, 90, 0.05);
    border: 1px solid rgba(216, 177, 90, 0.14);
  }
  .comm .chat-system .cs-ico { color: var(--mp-gold-1); flex-shrink: 0; margin-top: 1px; display: inline-flex; }
  /* Magister Schnurr als Chat-Bewohner: Katzen-Avatar statt Krone */
  .comm .chat-system .cs-cat { flex-shrink: 0; color: var(--mp-gold-1); }
  .comm .chat-system .cs-cat .coachCat { width: 38px; display: block; }
  .comm .chat-system .cs-cat .coachCat path,
  .comm .chat-system .cs-cat .coachCat ellipse { stroke-width: 4.5; }
  .comm .chat-system .cs-cat .coachCat .coachCat-sparkles { display: none; }
  .comm .chat-system .cs-body { font-size: 12.5px; line-height: 1.45; color: var(--mp-ink); font-family: var(--mp-serif-body); }
  .comm .chat-system .cs-body b { color: var(--mp-gold-1); font-weight: 600; font-family: var(--mp-sans); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; display: block; margin-bottom: 3px; }

  .comm .chat-empty {
    margin: auto 0;
    text-align: center;
    padding: 20px 14px;
    color: var(--mp-ink-dim);
  }
  .comm .chat-empty .ce-ico { color: var(--mp-gold-3); margin-bottom: 12px; display: inline-flex; }
  .comm .chat-empty .ce-text { font-size: 13px; line-height: 1.5; font-family: var(--mp-serif-body); color: var(--mp-ink); max-width: 220px; margin: 0 auto; }

  .comm .chat-msg { display: flex; gap: 10px; }
  .comm .chat-msg .cm-av {
    width: 30px; height: 30px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2a313e, #14171f);
    border: 1px solid var(--mp-gold-3);
    transform: rotate(45deg);
    display: grid;
    place-items: center;
    margin-top: 2px;
  }
  .comm .chat-msg .cm-av span { transform: rotate(-45deg); font-family: var(--mp-serif); font-size: 10px; font-weight: 700; color: var(--mp-gold-1); }
  .comm .chat-msg .cm-av.has-img {
    transform: none;
    border-color: var(--mp-gold-3);
    overflow: hidden;
  }
  .comm .chat-msg .cm-av.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .comm .chat-msg .cm-main { min-width: 0; flex: 1; }
  .comm .chat-msg .cm-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
  .comm .chat-msg .cm-name { font-family: var(--mp-serif); font-size: 12px; letter-spacing: 0.6px; color: var(--mp-teal-1); font-weight: 600; }
  .comm .chat-msg.mine .cm-name { color: var(--mp-gold-1); }
  .comm .chat-msg .cm-name.chat-author--link { cursor: pointer; text-decoration: underline dotted transparent; }
  .comm .chat-msg .cm-name.chat-author--link:hover { text-decoration-color: currentColor; }
  .comm .chat-msg .cm-time { font-family: var(--mp-mono); font-size: 9.5px; color: var(--mp-ink-faint); }
  .comm .chat-msg .cm-text { font-size: 13.5px; line-height: 1.45; color: var(--mp-bone); font-family: var(--mp-serif-body); word-break: break-word; }

  .comm .chat-status {
    padding: 0 16px;
    font-size: 11px;
    color: var(--mp-gold-2);
    font-family: var(--mp-sans);
    letter-spacing: 0.3px;
  }
  .comm .chat-status:empty, .comm .chat-status:not(.on) { display: none; }
  .comm .chat-status.on { padding: 8px 16px 0; }

  .comm .chat-input {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(216, 177, 90, 0.12);
  }
  .comm .chat-input input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    background: rgba(7, 8, 11, 0.6);
    border: 1px solid rgba(216, 177, 90, 0.18);
    color: var(--mp-bone);
    font-family: var(--mp-serif-body);
    font-size: 15px;
    outline: none;
    transition: border-color 160ms;
  }
  .comm .chat-input input::placeholder { color: var(--mp-ink-faint); font-style: italic; }
  .comm .chat-input input:focus { border-color: rgba(77, 208, 196, 0.45); }
  .comm .chat-input input:disabled { opacity: 0.6; }
  .comm .chat-send {
    width: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #0c0e13;
    background: linear-gradient(180deg, #f0d27a 0%, #d8b15a 45%, #b08530 100%);
    border: 1px solid #f0d27a;
    cursor: pointer;
    transition: box-shadow 160ms, transform 160ms;
  }
  .comm .chat-send:hover { box-shadow: 0 0 16px rgba(216, 177, 90, 0.4); transform: translateY(-1px); }

  .comm .chat-locked {
    padding: 14px 16px;
    border-top: 1px solid rgba(216, 177, 90, 0.12);
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 13.5px;
    line-height: 1.45;
  }