:root {
    --bg: #090b10;
    --panel: #11151d;
    --panel-2: #171d28;
    --text: #f0e6d2;
    --muted: #8f98a8;
    --light: #2d3340;
    --dark: #111821;
    /* Gemeinsamer Spielbrett-Look (echtes #board) — EINE Quelle fuer alle Mini-Bretter
       (Puzzle .pzb / Figurenkarte .fc-mb / Dossier .pcx / In-Game .miniSq). */
    --mp-sq-light:
      radial-gradient(circle at 48% 44%, rgba(240,210,131,.10), transparent 45%),
      linear-gradient(135deg, rgba(255,255,255,.05), transparent 30% 70%, rgba(0,0,0,.18)),
      repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 13px),
      var(--light);
    --mp-sq-dark:
      radial-gradient(circle at 50% 42%, rgba(10,200,185,.08), transparent 42%),
      linear-gradient(135deg, rgba(255,255,255,.025), transparent 28% 74%, rgba(0,0,0,.28)),
      repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px),
      var(--dark);
    --mp-board-frame:
      radial-gradient(circle at 50% 50%, rgba(10,200,185,.2), transparent 46%),
      linear-gradient(135deg, #c89b3c, #3a2a13 34%, #0a1117 50%, #785a28 77%, #f0d283);
    /* Marker-Farben — EINE Quelle fuer Brett, Dossier & Effektkarten:
       ziehen=Gold, schlagen=roter Ring, beides=Gold+Rot, Effekt=Blau. */
    --mp-mark-move: #f0d283;
    --mp-mark-move-2: #ca9a30;
    --mp-mark-cap: #e0564f;
    --mp-mark-effect: #7ab6ec;
    --mp-mark-effect-2: #3f7fc0;
    --rift-gold: #c89b3c;
    --rift-gold-bright: #f0d283;
    --rift-gold-deep: #785a28;
    --rift-blue: #0ac8b9;
    --rift-blue-soft: rgba(10, 200, 185, .36);
    --rift-red: #c84646;
    --hl-move: rgba(240, 210, 131, 0.85);
    --hl-cap:  rgba(210, 76, 76, 0.78);
    --hl-extra:rgba(201, 155, 60, 0.58);
    --hl-sel:  rgba(240, 210, 131, 0.68);
    --border: #2c3442;
    --accent: #0ac8b9;
    --warn: #f0d283;
    --side-nav-width: 280px;
    --side-nav-collapsed-width: 68px;
    /* Max. Breite der zentrierten Inhaltsspalte (Collection/Community/Play) -
       verhindert, dass Inhalte auf breiten Screens in viel Leerraum schwimmen. */
    --content-max: 1600px;
    --rail-size: clamp(64px, 7.5vw, 132px);
    --board-size: max(360px, min(calc(100dvh - 84px), calc(100vw - 456px - var(--rail-size) * 2)));
    --effect-chip-size: clamp(34px, calc(var(--rail-size) * 0.58), 72px);
  }
  @supports not (height: 100dvh) {
    :root {
      --board-size: max(360px, min(calc(100vh - 84px), calc(100vw - 456px - var(--rail-size) * 2)));
    }
  }
  * { box-sizing: border-box; }
  html { scrollbar-gutter: stable; overflow-x: hidden; }
  body {
    margin: 0;
    background:
      radial-gradient(circle at 28% 12%, rgba(10, 200, 185, .12), transparent 31%),
      radial-gradient(circle at 78% 8%, rgba(200, 155, 60, .11), transparent 28%),
      linear-gradient(180deg, #111722 0%, var(--bg) 46%, #050608 100%);
    color: var(--text);
    font: 14px/1.4 ui-sans-serif, system-ui, sans-serif;
    display: grid;
    grid-template-columns: var(--side-nav-width) minmax(520px, 1fr) 440px;
    min-height: 100vh;
    overflow-x: hidden;
  }
  header.sideNav {
    grid-column: 1;
    grid-row: 1 / span 20;
    min-height: 100vh;
    padding: 18px 14px 14px;
    border-right: 1px solid rgba(200, 155, 60, .28);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    background:
      linear-gradient(180deg, rgba(200, 155, 60, .10), transparent 22%, rgba(10, 200, 185, .08)),
      #151512;
    box-shadow: inset -1px 0 0 rgba(240,210,131,.12), 8px 0 30px rgba(0,0,0,.22);
    position: sticky;
    top: 0;
    align-self: start;
    z-index: 80;
  }
  .sideNavToggle {
    position: absolute;
    top: 72px;
    right: 14px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(200, 155, 60, .30);
    border-radius: 999px;
    background: rgba(13, 18, 29, .74);
    color: var(--rift-gold-bright);
    font-size: 16px;
    line-height: 1;
    z-index: 3;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  }
  .sideNavToggle:hover,
  .sideNavToggle:focus-visible {
    border-color: rgba(240, 210, 131, .60);
    background: rgba(240, 210, 131, .12);
  }
  .sideBrand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    min-width: 0;
  }
  .brandMark {
    display: grid;
    place-items: center;
    width: 34px;
    aspect-ratio: 1;
    border: 1px solid rgba(240, 210, 131, .66);
    background:
      radial-gradient(circle at 32% 20%, rgba(255,255,255,.18), transparent 28%),
      linear-gradient(180deg, rgba(200, 155, 60, .22), rgba(10, 200, 185, .10)),
      #0d121d;
    color: var(--rift-gold-bright);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    transform: rotate(45deg);
    box-shadow: 0 0 24px rgba(200, 155, 60, .18);
  }
  .brandMark {
    line-height: 1;
  }
  .brandMark span {
    transform: rotate(-45deg);
  }
  .brandBlock {
    display: grid;
    gap: 1px;
    min-width: 0;
  }
  header.sideNav h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1;
    margin: 0;
    font-weight: 700;
    letter-spacing: .8px;
    color: #fff4d9;
    text-transform: uppercase;
  }
  .brandBlock span {
    color: var(--rift-blue);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }
  .sideNavList {
    display: grid;
    gap: 5px;
    margin-top: 16px;
  }
  .sideNavList button {
    width: 100%;
    min-height: 38px;
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #d2d0ca;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-align: left;
    position: relative;
  }
  .sideNavList button .navIcon {
    color: var(--rift-gold-bright);
    text-align: center;
  }
  .sideNavList button .navLabel {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
  .sideNavList button::before {
    content: "";
    position: absolute;
    inset: 6px auto 6px 0;
    width: 2px;
    background: transparent;
    box-shadow: none;
  }
  .sideNavList button:hover,
  .sideNavList button:focus-visible {
    color: #fff7df;
    background: rgba(255,255,255,.05);
  }
  .sideNavList button:hover::before,
  .sideNavList button:focus-visible::before {
    background: var(--rift-gold-bright);
    box-shadow: 0 0 14px rgba(240, 210, 131, .54);
  }
  .sideNavList button.is-current::before {
    background: var(--rift-blue);
    box-shadow: 0 0 14px rgba(10, 200, 185, .54);
  }
  .sideNavList button.is-current {
    color: #fff7df;
    background: rgba(10, 200, 185, .07);
  }
  .sideFooter {
    margin-top: auto;
    display: grid;
    gap: 8px;
    min-width: 0;
  }
  #modeBadge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(240, 210, 131, .08), rgba(10, 200, 185, .06)), var(--panel-2);
    border: 1px solid rgba(200, 155, 60, .44);
    color: var(--rift-gold-bright);
  }
  #navOnline {
    min-height: 38px;
    padding: 0 8px;
    border-color: rgba(10, 200, 185, .48);
    background:
      linear-gradient(180deg, rgba(10, 200, 185, .18), rgba(10, 200, 185, .05)),
      #0b121c;
    color: var(--rift-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
  }
  #navOnline:disabled {
    cursor: not-allowed;
    color: rgba(143, 152, 168, .56);
    border-color: rgba(143, 152, 168, .20);
    background: rgba(17, 21, 29, .7);
  }
  .sideSearch,
  .sideUser,
  .sideUtility {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    color: #aaa6a0;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 6px;
  }
  .sideSearch.isSoon,
  .sideUser.isSoon,
  .sideUtility.isSoon {
    opacity: .56;
    cursor: not-allowed;
  }
  .sideUser:not(.isSoon) .sideUserName {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .authPanel[hidden],
  .authLoginForm[hidden],
  #authLogout[hidden] {
    display: none;
  }
  .authPanel {
    display: none !important;
  }
  body.exposure-dev .authPanel:not([hidden]) {
    display: block !important;
  }
  .authLoginForm {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    min-width: 0;
  }
  .authPanel input,
  .authPanel button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 30px;
    border-radius: 4px;
    font-size: 11px;
  }
  .authPanel input {
    border: 1px solid rgba(10, 200, 185, .36);
    background: rgba(0, 0, 0, .32);
    color: var(--text);
    padding: 0 8px;
  }
  .authPanel button {
    border: 1px solid rgba(10, 200, 185, .48);
    background: linear-gradient(180deg, rgba(10, 200, 185, .16), rgba(10, 200, 185, .06)), #0b121c;
    color: var(--rift-blue);
    font-weight: 800;
  }
  .sideSearch em {
    margin-left: auto;
    font-style: normal;
    color: var(--rift-blue);
    font-size: 9px;
    letter-spacing: .8px;
    text-transform: uppercase;
  }
  .sideSearch span {
    color: #c7c2b8;
    font-size: 18px;
  }
  .sideAvatar {
    display: grid;
    place-items: center;
    width: 24px;
    aspect-ratio: 1;
    border: 1px solid rgba(200, 155, 60, .48);
    border-radius: 4px;
    background: rgba(240, 210, 131, .12);
    color: var(--rift-gold-bright);
    font-size: 9px;
    font-family: Georgia, "Times New Roman", serif;
  }
  .sideUtility {
    justify-content: space-between;
    min-width: 0;
    padding-top: 8px;
    color: #8f8c86;
    font-size: 15px;
  }
  #modeBadge.place  { background:#2a3550; border-color:var(--accent); }
  #modeBadge.erase  { background:#502a2a; border-color:#e88; }
  #modeBadge.select { background:#2a3a2a; border-color:#8e8; }

  body.side-nav-collapsed {
    --side-nav-width: var(--side-nav-collapsed-width);
  }
  body.side-nav-collapsed header.sideNav {
    padding: 14px 8px;
    align-items: center;
  }
  body.side-nav-collapsed .sideNavToggle {
    border-color: rgba(240, 210, 131, .32);
  }
  body.side-nav-collapsed .sideBrand {
    justify-content: center;
    overflow: visible;
  }
  body.side-nav-collapsed .brandBlock,
  body.side-nav-collapsed .sideSearch,
  body.side-nav-collapsed #modeBadge,
  body.side-nav-collapsed .sideUser span:not(.sideAvatar),
  body.side-nav-collapsed .authPanel {
    display: none !important;
  }
  body.side-nav-collapsed .brandMark {
    width: 30px;
    font-size: 9px;
    /* Nudge the full-size logo left so it clears the border toggle. */
    transform: translateX(-5px) rotate(45deg);
    /* Drop the filled diamond + glow so no boxy backdrop shows on the rail. */
    background: transparent;
    box-shadow: none;
  }
  body.side-nav-collapsed .sideNavList {
    width: 100%;
    align-items: center;
    justify-items: center;
    gap: 2px;
    padding: 4px 0;
  }
  body.side-nav-collapsed .sideNavList button {
    width: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    font-size: 0;
  }
  body.side-nav-collapsed .sideNavList button {
    position: relative;
  }
  body.side-nav-collapsed .sideNavList button .navIcon {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: grid;
    place-items: center;
    color: var(--rift-gold-bright);
    font-size: 18px;
    line-height: 1;
  }
  body.side-nav-collapsed .sideNavList button .navIcon svg {
    width: 18px;
    height: 18px;
  }
  body.side-nav-collapsed .sideNavList button .navLabel {
    display: none !important;
  }
  body.side-nav-collapsed #navOnline {
    border-color: rgba(10, 200, 185, .28);
  }
  body.side-nav-collapsed .sideFooter {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 6px 12px;
    gap: 0;
  }
  body.side-nav-collapsed .sideUser {
    padding: 5px 0;
  }

  .connectionBanner {
    grid-column: 2 / -1;
    min-height: 32px;
    padding: 7px 16px;
    border-bottom: 1px solid rgba(240, 210, 131, .32);
    background: rgba(240, 210, 131, .12);
    color: var(--rift-gold-bright);
    font-size: 13px;
    text-align: center;
  }
  .connectionBanner[hidden] { display: none; }
  .connectionBanner.checking {
    border-bottom-color: rgba(10, 200, 185, .34);
    background: rgba(10, 200, 185, .10);
    color: var(--text);
  }
  .connectionBanner.error {
    border-bottom-color: rgba(200, 70, 70, .62);
    background: rgba(200, 70, 70, .16);
    color: #ffd0d0;
  }
  .connectionBanner.warning {
    border-bottom-color: rgba(240, 210, 131, .48);
    background: rgba(240, 210, 131, .14);
  }

  /* The game board lives in <main>. It is ONLY used by the live game (demo/lab)
     and the puzzle, so it is hidden by default and re-shown explicitly per
     board-mode (see ".board-using modes" rules below). This way any page —
     including ones added later — can never leak the board at the bottom. */
  main { grid-column: 2; padding: 16px; display: none; flex-direction: column; gap: 12px; align-items: center; }

  .modeScreen {
    grid-column: 2 / -1;
    min-height: 100vh;
    display: none;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 42px 16px 56px;
    background:
      linear-gradient(180deg, rgba(5, 7, 11, .16), rgba(5, 7, 11, .82)),
      radial-gradient(circle at 50% 12%, rgba(240, 210, 131, .16), transparent 30%),
      radial-gradient(circle at 22% 68%, rgba(10, 200, 185, .18), transparent 26%),
      radial-gradient(circle at 78% 70%, rgba(120, 90, 40, .28), transparent 28%),
      #05070c;
  }
  body.mode-select .modeScreen,
  body.mode-profile .modeScreen,
  body.mode-collection .modeScreen,
  body.mode-community .modeScreen,
  body.mode-ranked .modeScreen,
  body.mode-lessons .modeScreen,
  body.mode-puzzle .modeScreen,
  body.mode-messages .modeScreen,
  body.mode-info .modeScreen,
  body.mode-play .modeScreen { display: flex; }
  body.mode-profile .startPage,
  body.mode-collection .startPage,
  body.mode-community .startPage,
  body.mode-ranked .startPage,
  body.mode-lessons .startPage,
  body.mode-puzzle .startPage,
  body.mode-messages .startPage,
  body.mode-info .startPage,
  body.mode-play .startPage { display: none; }
  body:not(.mode-profile) .profilePage { display: none; }
  body:not(.mode-collection) .collectionPage { display: none; }
  body:not(.mode-community) .communityPage { display: none; }
  body:not(.mode-ranked) .rankedPage { display: none; }
  body:not(.mode-play) .playPage { display: none; }
  body:not(.mode-lessons) .lessonsPage { display: none; }
  body:not(.mode-puzzle) .puzzlePage { display: none; }
  body:not(.mode-messages) .messagesPage { display: none; }
  body:not(.mode-info) .infoPage { display: none; }
  .startBackdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  body.mode-select .startBackdrop {
    position: absolute;
    inset: 0 0 auto 0;
    height: 100vh;
    width: auto;
    z-index: 0;
  }
  .startBackdrop::before,
  .startBackdrop::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 51%;
    width: min(92vw, 1020px);
    aspect-ratio: 1.9;
    transform: translate(-50%, -50%) perspective(900px) rotateX(57deg) rotateZ(-45deg);
    border: 1px solid rgba(200, 155, 60, .24);
    background:
      linear-gradient(90deg, rgba(240, 210, 131, .12) 1px, transparent 1px),
      linear-gradient(0deg, rgba(10, 200, 185, .10) 1px, transparent 1px),
      linear-gradient(135deg, rgba(10, 200, 185, .08), rgba(200, 155, 60, .09));
    background-size: 12.5% 12.5%;
    box-shadow: 0 0 80px rgba(10, 200, 185, .13), inset 0 0 90px rgba(0, 0, 0, .52);
    opacity: .78;
  }
  .startBackdrop::after {
    width: min(72vw, 760px);
    transform: translate(-50%, -50%) perspective(900px) rotateX(57deg) rotateZ(-45deg) translateZ(36px);
    border-color: rgba(240, 210, 131, .34);
    opacity: .42;
  }
  .startShard {
    position: absolute;
    width: 260px;
    height: 420px;
    border: 1px solid rgba(240, 210, 131, .24);
    background:
      linear-gradient(150deg, rgba(240, 210, 131, .20), transparent 28%),
      linear-gradient(24deg, rgba(10, 200, 185, .14), transparent 52%),
      rgba(7, 11, 18, .52);
    transform: skewY(-16deg) rotate(8deg);
    filter: blur(.2px);
    opacity: .36;
  }
  .startShard.shardA { left: 7%; top: 16%; }
  .startShard.shardB {
    right: 8%;
    bottom: 8%;
    transform: skewY(14deg) rotate(-10deg);
  }
  .startBoardPreview {
    position: absolute;
    left: 50%;
    top: 53%;
    width: min(64vw, 620px);
    aspect-ratio: 1.9;
    transform: translate(-50%, -50%) perspective(900px) rotateX(57deg) rotateZ(-45deg);
  }
  .previewPiece {
    position: absolute;
    display: grid;
    place-items: center;
    width: clamp(46px, 7vw, 86px);
    aspect-ratio: 1;
    border: 1px solid rgba(240, 210, 131, .36);
    border-radius: 50%;
    background:
      radial-gradient(circle at 34% 22%, rgba(255,255,255,.22), transparent 26%),
      linear-gradient(180deg, #25202b, #07090f);
    color: var(--rift-gold-bright);
    font-size: clamp(28px, 4.8vw, 54px);
    box-shadow: 0 18px 32px rgba(0,0,0,.55), 0 0 24px rgba(10, 200, 185, .22);
    transform: rotate(45deg) rotateX(-57deg);
  }
  .previewPiece.king { left: 22%; top: 22%; }
  .previewPiece.rook { left: 62%; top: 18%; color: #f5ecd8; }
  .previewPiece.knight { left: 38%; top: 58%; color: var(--rift-blue); }
  .previewPiece.queen { left: 72%; top: 62%; color: var(--rift-gold-bright); }
  .startPage {
    position: relative;
    z-index: 1;
    width: min(1160px, calc(100vw - 32px));
    display: grid;
    gap: 16px;
  }
  .profilePage {
    position: relative;
    z-index: 1;
    width: min(1040px, calc(100vw - 32px));
    display: grid;
    gap: 18px;
    padding: 42px 0 56px;
  }
  .collectionPage {
    position: relative;
    z-index: 1;
    width: min(1040px, calc(100vw - 32px));
    display: grid;
    gap: 18px;
    padding: 42px 0 56px;
    align-content: start;
  }
  .communityPage,
  .playPage,
  .puzzlePage,
  .messagesPage {
    position: relative;
    z-index: 1;
    width: min(1040px, calc(100vw - 32px));
    display: grid;
    gap: 18px;
    padding: 42px 0 56px;
    align-content: start;
  }
  .collectionGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 16px;
  }
  .collectionTile {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(77, 208, 196, .16);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(12, 18, 24, .72), rgba(8, 11, 16, .72));
  }
  .collectionArt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    font-size: 46px;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 35%, rgba(77, 208, 196, .10), transparent 70%);
  }
  .collectionArt .collectionPieceArt {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
  }
  .collectionCount {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mp-bg-0);
    background: var(--mp-teal-1);
  }
  .collectionInfo {
    display: grid;
    gap: 4px;
  }
  .collectionInfo h3 {
    margin: 0;
    font-size: 15px;
  }
  .collectionDeck {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--mp-teal-1);
    opacity: .8;
  }
  .collectionEmpty {
    grid-column: 1 / -1;
    display: grid;
    gap: 16px;
    justify-items: start;
    max-width: 460px;
    padding: 28px;
    border: 1px solid rgba(77, 208, 196, .16);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(12, 18, 24, .72), rgba(8, 11, 16, .72));
  }
  .collectionEmpty p {
    margin: 0;
    color: rgba(240, 230, 210, .76);
    line-height: 1.5;
  }
  .profileHeader {
    display: grid;
    gap: 8px;
  }
  .profileHeader h2 {
    margin: 0;
    color: #fff7df;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 56px;
    line-height: 1;
    text-transform: uppercase;
  }
  .profileHeader p {
    margin: 0;
    max-width: 720px;
    color: #d2d9df;
  }
  .profileGrid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 14px;
    align-items: start;
  }
  .profilePanel {
    border: 1px solid rgba(200, 155, 60, .34);
    border-radius: 6px;
    background:
      linear-gradient(180deg, rgba(240, 210, 131, .08), rgba(10, 200, 185, .05)),
      rgba(12, 16, 24, .88);
    box-shadow: 0 22px 40px rgba(0,0,0,.24);
    padding: 18px;
  }
  .profilePanel h3 {
    margin: 0 0 8px;
    color: #fff7df;
    font-size: 18px;
  }
  .profilePanel p,
  .profilePanel li {
    color: #cfd6dc;
  }
  .profileIdentity {
    grid-row: span 2;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 14px;
  }
  .profileAvatar {
    display: grid;
    place-items: center;
    width: 74px;
    aspect-ratio: 1;
    border: 1px solid rgba(240, 210, 131, .66);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(200,155,60,.20), rgba(10,200,185,.12)), #0d121d;
    color: var(--rift-gold-bright);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
  }
  .profileIdentity h3 {
    overflow-wrap: anywhere;
    font-size: 24px;
  }
  .profileFacts {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    margin: 6px 0 0;
  }
  .profileFacts div {
    display: grid;
    gap: 3px;
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .profileFacts dt {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
  }
  .profileFacts dd {
    margin: 0;
    color: var(--text);
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
  }
  .profileForm {
    display: grid;
    gap: 8px;
    margin-top: 12px;
  }
  .profileForm input {
    min-height: 38px;
    border: 1px solid rgba(10, 200, 185, .42);
    border-radius: 4px;
    background: rgba(0,0,0,.34);
    color: var(--text);
    padding: 0 10px;
  }
  .profileHint {
    margin: 0;
    color: rgba(220, 240, 255, .62);
    font-size: 11px;
    line-height: 1.4;
  }
  .profileError {
    margin: 0;
    color: #ff8585;
    font-size: 12px;
    line-height: 1.4;
  }
  .profileActions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }
  .profileActions button,
  .profileForm button {
    min-height: 34px;
  }
  .profileProgress ul {
    margin: 10px 0 0;
    padding-left: 18px;
  }
  /* Identitaet & Profil: Avatar-Bild, Bio-Anzeige, Avatar-Picker */
  .profileAvatar.hasAvatar {
    padding: 0;
    overflow: hidden;
  }
  .profileAvatarImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
  }
  .profileBio {
    margin: 6px 0 0;
    color: #cfd6dc;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .profileBioInput {
    min-height: 64px;
    border: 1px solid rgba(10, 200, 185, .42);
    border-radius: 4px;
    background: rgba(0,0,0,.34);
    color: var(--text);
    padding: 8px 10px;
    font: inherit;
    resize: vertical;
  }
  .profileBioMeta {
    margin-top: -2px;
    color: rgba(220, 240, 255, .55);
    font-size: 11px;
    text-align: right;
  }
  .profileAvatarPickerLabel {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
  }
  .profileAvatarPicker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 8px;
  }
  .profileAvatarEmpty {
    grid-column: 1 / -1;
    margin: 0;
    color: rgba(220, 240, 255, .55);
    font-size: 12px;
  }
  .profileAvatarOption {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    background: rgba(0, 0, 0, .35);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  }
  .profileAvatarOption:hover {
    border-color: rgba(10, 200, 185, .55);
    transform: translateY(-1px);
  }
  .profileAvatarOption.selected {
    border-color: #0ac8b9;
    box-shadow: 0 0 0 1px #0ac8b9, 0 0 14px rgba(10, 200, 185, .4);
  }
  .profileAvatarOptionArt {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }
  .profileAvatarOptionImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .profileAvatarOptionInitials {
    color: var(--rift-gold-bright, #f0d283);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
  }
  .profileAvatarUpload {
    border-style: dashed;
    border-color: rgba(216, 177, 90, .35);
  }
  .profileAvatarUpload .profileAvatarOptionArt {
    color: var(--rift-gold-bright, #f0d283);
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
  }
  .profileAvatarUpload:hover {
    border-color: rgba(10, 200, 185, .6);
  }
  .sideAvatar.hasAvatar {
    padding: 0;
    overflow: hidden;
  }
  .sideAvatarImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Fortschritt & Stats: Rang-Badge, Stat-Grid, Level-Bar, Match-History */
  .profileStatsBody {
    display: grid;
    gap: 12px;
  }
  .rankRow {
    display: flex;
    align-items: center;
  }
  .rankBadge {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-left: 3px solid var(--rank-color, #c3cad4);
    border-radius: 4px;
    background: rgba(0, 0, 0, .3);
  }
  .rankBadgeTier {
    color: var(--rank-color, #c3cad4);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .5px;
  }
  .rankBadgeRating {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
  }
  .statGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    margin: 0;
  }
  .statGrid div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .statGrid dt {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
  }
  .statGrid dd {
    margin: 0;
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
  }
  .levelBlock {
    display: grid;
    gap: 5px;
  }
  .levelHead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .levelTag {
    color: #fff7df;
    font-weight: 700;
    font-size: 13px;
  }
  .levelXp {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
  }
  .levelBar {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
  }
  .levelBar span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #0ac8b9, #6ee7da);
    transition: width .4s ease;
  }
  .matchList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
  }
  .matchItem {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-left-width: 3px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .25);
    font-size: 13px;
  }
  .matchItem--win { border-left-color: #4dd0c4; }
  .matchItem--loss { border-left-color: #ff8585; }
  .matchItem--draw { border-left-color: rgba(255, 255, 255, .35); }
  .matchOutcome { font-weight: 700; }
  .matchItem--win .matchOutcome { color: #5fe0d3; }
  .matchItem--loss .matchOutcome { color: #ff9b9b; }
  .matchItem--draw .matchOutcome { color: var(--muted); }
  .matchOpponent {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .matchDelta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--muted);
  }
  .matchItem--win .matchDelta { color: #5fe0d3; }
  .matchItem--loss .matchDelta { color: #ff9b9b; }
  .profileStatsEmpty {
    margin: 0;
    color: rgba(220, 240, 255, .6);
    font-size: 12px;
    line-height: 1.45;
  }
  /* Belohnung & Engagement: Erfolgs-Badges */
  .profileAchievementsBody {
    display: grid;
    gap: 14px;
  }
  .achvSummary {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .achvGroup {
    display: grid;
    gap: 8px;
  }
  .achvGroupTitle {
    margin: 0;
    color: #fff7df;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
  }
  .achvGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 8px;
  }
  .achv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-left: 3px solid rgba(255, 255, 255, .14);
    border-radius: 5px;
    background: rgba(0, 0, 0, .25);
  }
  .achv--unlocked {
    border-left-color: #e6c14b;
    background: linear-gradient(90deg, rgba(230, 193, 75, .12), rgba(0, 0, 0, .25));
  }
  .achvIcon {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: center;
    font-size: 22px;
    line-height: 1;
  }
  .achv--locked .achvIcon {
    filter: grayscale(1);
    opacity: .45;
  }
  .achvName {
    grid-column: 2;
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
  }
  .achvProgress,
  .achvState {
    grid-column: 2;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--muted);
  }
  .achvState {
    color: #5fe0d3;
  }
  .achvBar {
    grid-column: 2;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
    margin-top: 1px;
  }
  .achvBar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #0ac8b9, #6ee7da);
  }
  .achvReward {
    grid-column: 2;
    margin-top: 1px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }
  .achvRew {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--mp-serif);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .3px;
  }
  .achvRew .arIc { font-size: 10px; }
  .achvRew--shards { color: var(--mp-teal-1); }
  .achvRew--pack { color: #e6c14b; }
  .achv--locked .achvReward { opacity: .5; }
  /* ===========================================================
     Ranked / Ranglisten — 1:1-Port der Claude-Design-Vorlage.
     Markup rendert app/leaderboard.js in #rankedGrid als
     <div class="ranked rk-root">. Alle Selektoren unter .rk-root
     gescoped; Titel/Sub nutzen die globalen .duell-title/.duell-sub.
     =========================================================== */
  .rankedPage { width: 100%; }
  .rankedGrid { display: block; }

  .rk-root {
    position: relative;
    padding: 46px 64px 90px;
    max-width: 1240px;
    margin: 0 auto;
  }
  /* Kein eigener Glow auf dem zentrierten .rk-root-Block — der Ambient kommt vom
     seitenweiten body.mode-ranked .modeScreen (von den Bildschirm-Ecken). */
  .rk-root > * { position: relative; z-index: 1; }

  /* Keine max-width auf dem Head — sonst clippt der breite .duell-title (background-clip:
     text) an der Box und die ueberstehenden Buchstaben werden transparent. Die Sub
     begrenzt sich selbst (.duell-sub max-width). */
  .rk-root .ranked-head { margin-bottom: 36px; }
  .rk-root .rk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border: 1px solid rgba(77, 208, 196, 0.3);
    background: rgba(35, 155, 149, 0.08);
    font-size: 10.5px;
    letter-spacing: 3px;
    color: var(--mp-teal-1);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 22px;
  }
  .rk-root .rk-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--mp-teal-1);
    box-shadow: 0 0 8px var(--mp-teal-1);
    animation: pulseGlow 1.8s ease-in-out infinite;
  }
  .rk-root .rk-eyebrow .sep { color: var(--mp-gold-2); }

  /* Rank hero */
  .rk-root .rank-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 28px 32px;
    background:
      radial-gradient(ellipse 50% 120% at 0% 50%, color-mix(in srgb, var(--tier) 14%, transparent), transparent 60%),
      linear-gradient(180deg, rgba(16, 19, 26, 0.7), rgba(9, 11, 15, 0.85));
    border: 1px solid rgba(216, 177, 90, 0.2);
    margin-bottom: 30px;
  }
  .rk-root .rank-hero::before, .rk-root .rank-hero::after {
    content: "";
    position: absolute;
    width: 16px; height: 16px;
    border: 1px solid var(--tier, var(--mp-gold-2));
  }
  .rk-root .rank-hero::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .rk-root .rank-hero::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

  /* Emblem */
  .rk-root .rank-emblem {
    position: relative;
    width: 104px; height: 104px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .rk-root .rank-emblem .re-diamond {
    position: absolute;
    inset: 0;
    transform: rotate(45deg);
    border: 1.5px solid var(--tier);
    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tier) 28%, #0a0c11), #0a0c11 75%);
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.5),
      0 0 26px color-mix(in srgb, var(--tier) 40%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--tier) 30%, transparent);
  }
  .rk-root .rank-emblem .re-diamond.inner {
    inset: 12px;
    border-color: color-mix(in srgb, var(--tier) 45%, transparent);
    background: none;
    box-shadow: none;
  }
  .rk-root .rank-emblem .re-crown {
    position: relative;
    color: var(--tier);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tier) 60%, transparent));
  }
  .rk-root .rank-emblem .re-div {
    position: absolute;
    bottom: -6px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #0c0e13;
    background: var(--tier);
    padding: 2px 8px;
    z-index: 2;
  }

  /* Info */
  .rk-root .rank-info { min-width: 0; }
  .rk-root .ri-label {
    font-size: 9.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-ink-dim);
    margin-bottom: 8px;
  }
  .rk-root .ri-name {
    font-family: var(--mp-serif);
    font-size: 34px;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: var(--tier);
    line-height: 1;
    margin-bottom: 6px;
  }
  .rk-root .ri-elo {
    font-family: var(--mp-mono);
    font-size: 15px;
    color: var(--mp-bone);
    letter-spacing: 0.5px;
    margin-bottom: 16px;
  }
  .rk-root .ri-elo .unit { color: var(--mp-ink-dim); font-size: 11px; letter-spacing: 1.5px; }

  /* Placement */
  .rk-root .placement { max-width: 380px; }
  .rk-root .pl-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .rk-root .pl-label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-teal-2);
  }
  .rk-root .pl-count { font-family: var(--mp-mono); font-size: 11px; color: var(--mp-ink); }
  .rk-root .pl-bar { display: flex; gap: 5px; }
  .rk-root .pl-seg {
    flex: 1;
    height: 6px;
    background: rgba(216, 177, 90, 0.1);
    border: 1px solid rgba(77, 208, 196, 0.18);
    border-radius: 2px;
  }
  .rk-root .pl-seg.full {
    background: linear-gradient(180deg, #6ce4d8, #2b9088);
    border-color: rgba(108, 228, 216, 0.5);
    box-shadow: 0 0 6px rgba(77, 208, 196, 0.4);
  }

  /* Actions */
  .rk-root .rank-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    flex-shrink: 0;
  }
  .rk-root .rank-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 30px;
    font-family: var(--mp-sans);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #0c0e13;
    background: linear-gradient(180deg, #f3d88a 0%, #d8b15a 45%, #ad8230 100%);
    border: 1px solid #f0d27a;
    box-shadow: 0 0 26px rgba(216, 177, 90, 0.28), inset 0 1px 0 rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 180ms ease;
  }
  .rk-root .rank-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(216, 177, 90, 0.45), inset 0 1px 0 rgba(255,255,255,0.5); }
  .rk-root .rank-cta .arrow { display: inline-flex; transition: transform 160ms; }
  .rk-root .rank-cta:hover .arrow { transform: translateX(4px); }
  .rk-root .ra-note {
    font-size: 11px;
    color: var(--mp-ink-dim);
    letter-spacing: 1px;
    font-family: var(--mp-mono);
  }

  /* Section label */
  .rk-root .rk-section-label {
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--mp-ink-dim);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .rk-root .rk-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(216,177,90,0.16), transparent);
  }

  /* Tier ladder */
  .rk-root .tier-ladder {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }
  .rk-root .tier-card {
    position: relative;
    padding: 16px 16px 14px;
    background: linear-gradient(180deg, rgba(20, 23, 31, 0.6), rgba(11, 13, 18, 0.8));
    border: 1px solid rgba(216, 177, 90, 0.1);
    border-top: 2px solid var(--tier);
    transition: all 200ms ease;
  }
  .rk-root .tier-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tier) 40%, transparent); border-top-color: var(--tier); }
  .rk-root .tier-card.current {
    background:
      radial-gradient(ellipse 100% 80% at 50% 0%, color-mix(in srgb, var(--tier) 18%, transparent), transparent 70%),
      linear-gradient(180deg, rgba(24, 27, 35, 0.9), rgba(13, 15, 20, 0.92));
    border-color: color-mix(in srgb, var(--tier) 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier) 25%, transparent), 0 8px 30px color-mix(in srgb, var(--tier) 14%, transparent);
  }
  .rk-root .tc-top {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
  }
  .rk-root .tc-dot {
    width: 13px; height: 13px;
    transform: rotate(45deg);
    background: var(--tier);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tier) 60%, transparent);
    flex-shrink: 0;
  }
  .rk-root .tc-name {
    font-family: var(--mp-serif);
    font-size: 15px;
    letter-spacing: 0.5px;
    color: var(--mp-bone);
    font-weight: 600;
  }
  .rk-root .tc-range {
    font-family: var(--mp-mono);
    font-size: 11px;
    color: var(--mp-ink-dim);
    letter-spacing: 0.4px;
    margin-bottom: 12px;
  }
  .rk-root .tc-divs { display: flex; gap: 4px; }
  .rk-root .tc-divs span {
    flex: 1;
    height: 3px;
    background: color-mix(in srgb, var(--tier) 30%, transparent);
  }
  .rk-root .tc-you {
    position: absolute;
    top: 12px; right: 12px;
    font-size: 8px;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #0c0e13;
    background: var(--tier);
    padding: 2px 6px;
    text-transform: uppercase;
  }
  .rk-root .tier-note {
    font-family: var(--mp-serif-body);
    font-size: 15px;
    color: var(--mp-ink-dim);
    margin: 0 0 50px;
  }
  .rk-root .tier-note b { color: var(--mp-ink); font-weight: 600; }

  /* Leaderboard */
  .rk-root .board-table {
    border: 1px solid rgba(216, 177, 90, 0.14);
    background: rgba(11, 13, 18, 0.5);
  }
  .rk-root .board-row {
    display: grid;
    grid-template-columns: 56px 1fr 130px 100px 110px;
    align-items: center;
    padding: 0 22px;
    gap: 14px;
  }
  .rk-root .board-row.head {
    height: 44px;
    border-bottom: 1px solid rgba(216, 177, 90, 0.12);
    font-size: 9.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mp-ink-dim);
  }
  .rk-root .board-row.head .num-col,
  .rk-root .board-row.head .rank-col,
  .rk-root .board-row.head .elo-col,
  .rk-root .board-row.head .bilanz-col { text-align: right; }
  .rk-root .board-row.head .num-col { text-align: left; }
  .rk-root .board-row.entry {
    position: relative;
    height: 64px;
    transition: background 160ms;
  }
  .rk-root .board-row.entry.linkable { cursor: pointer; }
  .rk-root .board-row.entry.linkable:hover { background: rgba(216, 177, 90, 0.05); }
  .rk-root .board-row.entry.you {
    background: linear-gradient(90deg, rgba(77, 208, 196, 0.08), transparent 70%);
  }
  .rk-root .board-row.entry.you::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--mp-teal-2), transparent);
    box-shadow: 0 0 12px var(--mp-teal-glow);
  }
  .rk-root .board-row .num-col {
    font-family: var(--mp-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--mp-gold-1);
  }
  .rk-root .board-row .player-col {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .rk-root .board-row .pc-av {
    width: 30px; height: 30px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #2a313e, #14171f);
    border: 1px solid var(--mp-gold-3);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .rk-root .board-row .pc-av span {
    transform: rotate(-45deg);
    font-family: var(--mp-serif);
    font-size: 10px;
    font-weight: 700;
    color: var(--mp-gold-1);
  }
  .rk-root .board-row .pc-name {
    font-size: 14px;
    color: var(--mp-bone);
    font-weight: 600;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rk-root .board-row .rank-col {
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .rk-root .board-row .elo-col {
    text-align: right;
    font-family: var(--mp-mono);
    font-size: 14px;
    color: var(--mp-bone);
    font-weight: 500;
  }
  .rk-root .board-row .bilanz-col {
    text-align: right;
    font-family: var(--mp-mono);
    font-size: 12px;
    color: var(--mp-ink-dim);
  }
  .rk-root .board-row .bilanz-col .w { color: var(--mp-teal-1); }
  .rk-root .board-empty {
    padding: 20px 22px;
    border-top: 1px dashed rgba(216, 177, 90, 0.14);
    font-family: var(--mp-serif-body);
    font-size: 15px;
    color: var(--mp-ink-dim);
    text-align: center;
  }
  .rk-root .board-empty b { color: var(--mp-ink); font-weight: 600; }

  @media (max-width: 1180px) {
    .rk-root { padding: 40px 32px 70px; }
    .rk-root .tier-ladder { grid-template-columns: repeat(3, 1fr); }
    .rk-root .rank-hero { grid-template-columns: 1fr; justify-items: start; gap: 22px; }
    .rk-root .rank-actions { align-items: stretch; width: 100%; }
    .rk-root .rank-cta { justify-content: center; }
  }
  @media (max-width: 640px) {
    .rk-root { padding: 32px 18px 60px; }
    .rk-root .tier-ladder { grid-template-columns: repeat(2, 1fr); }
    .rk-root .board-row { grid-template-columns: 36px 1fr 70px; }
    .rk-root .board-row .rank-col, .rk-root .board-row.head .rank-col { display: none; }
    .rk-root .board-row .bilanz-col, .rk-root .board-row.head .bilanz-col { display: none; }
  }
  /* Soziales: Spielerprofil-Modal */
  .playerModal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 4, 8, .72);
    backdrop-filter: blur(3px);
  }
  .playerModal.show { display: flex; }
  .pmPanel {
    position: relative;
    width: min(440px, 100%);
    max-height: 86vh;
    overflow: auto;
    border: 1px solid rgba(200, 155, 60, .34);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(240, 210, 131, .08), rgba(10, 200, 185, .05)),
      rgba(12, 16, 24, .96);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
    padding: 18px;
  }
  .pmBody { display: grid; gap: 14px; }
  .pmClose {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 5px;
    background: rgba(0, 0, 0, .3);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }
  .pmClose:hover { border-color: #ff8585; color: #ff9b9b; }
  .pmHead {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
  }
  .pmAvatar {
    display: grid;
    place-items: center;
    width: 64px;
    aspect-ratio: 1;
    border: 1px solid rgba(240, 210, 131, .66);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(200, 155, 60, .2), rgba(10, 200, 185, .12)), #0d121d;
    color: var(--rift-gold-bright, #f0d283);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    overflow: hidden;
  }
  .pmAvatar.hasAvatar { padding: 0; }
  .pmAvatar img { width: 100%; height: 100%; object-fit: cover; }
  .pmIdentity h3 { margin: 0; color: #fff7df; font-size: 22px; overflow-wrap: anywhere; }
  .pmSub { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
  .pmBio { margin: 6px 0 0; color: #cfd6dc; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
  .pmStats { display: grid; gap: 10px; }
  .pmRank { display: flex; }
  .pmEmpty { margin: 0; color: rgba(220, 240, 255, .6); font-size: 12px; }
  .pmAchvBlock h4 {
    margin: 0 0 6px;
    color: #fff7df;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
  }
  .pmAchvRow { display: flex; flex-wrap: wrap; gap: 6px; }
  .pmAchv { font-size: 20px; }
  .pmFriend { display: grid; }
  .pmFriendRow { display: flex; align-items: center; gap: 10px; }
  .pmFriendState { color: #5fe0d3; font-size: 13px; font-weight: 600; }
  .pmFriendBtn {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(10, 200, 185, .5);
    border-radius: 5px;
    background: rgba(10, 200, 185, .14);
    color: #d7fff7;
    font-weight: 600;
    cursor: pointer;
  }
  .pmFriendBtn:hover { background: rgba(10, 200, 185, .24); }
  .pmFriendBtn--ghost {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .3);
    color: var(--text);
  }
  .pmLoading { margin: 0; padding: 24px; text-align: center; color: var(--muted); }
  /* Soziales: Freunde-Karte */
  .friendAddRow { display: flex; gap: 8px; }
  .friendAddRow input {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    border: 1px solid rgba(10, 200, 185, .42);
    border-radius: 4px;
    background: rgba(0, 0, 0, .34);
    color: var(--text);
    padding: 0 10px;
  }
  .friendAddRow button { min-height: 38px; }
  .profileFriendsBody { display: grid; gap: 12px; margin-top: 10px; }
  .friendGroup { display: grid; gap: 6px; }
  .friendGroup h4 {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
  }
  .friendRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 5px;
    background: rgba(0, 0, 0, .25);
  }
  .friendMain { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .friendMain[role="button"] { cursor: pointer; }
  .friendChip {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(200, 155, 60, .4);
    border-radius: 4px;
    background: rgba(240, 210, 131, .12);
    color: var(--rift-gold-bright, #f0d283);
    font-size: 11px;
    font-weight: 700;
    font-family: Georgia, "Times New Roman", serif;
    flex: none;
  }
  .friendName {
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .friendRating { color: var(--rank-color, #c3cad4); font-size: 11px; white-space: nowrap; }
  .friendReqBtns { display: flex; gap: 6px; flex: none; }
  .friendBtn {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(10, 200, 185, .5);
    border-radius: 4px;
    background: rgba(10, 200, 185, .14);
    color: #d7fff7;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex: none;
  }
  .friendBtn--ghost {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .3);
    color: var(--muted);
  }
  .friendState { color: var(--muted); font-size: 11px; flex: none; }
  /* Chat: anklickbarer Autor */
  .chat-author--link { cursor: pointer; text-decoration: underline dotted transparent; }
  .chat-author--link:hover { text-decoration-color: currentColor; }
  @media (max-width: 820px) {
    .profileGrid {
      grid-template-columns: 1fr;
    }
    .profileHeader h2 {
      font-size: 42px;
    }
  }

  body.tutorial-active #startDemoMatch,
  body.tutorial-active #undoMove {
    display: none !important;
  }

  .tutorialCoach {
    grid-column: 1 / -1;
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(77, 208, 196, .24);
    border-left: 3px solid var(--mp-teal, #4dd0c4);
    background: rgba(8, 15, 18, .62);
  }

  .tutorialCoach[hidden] {
    display: none !important;
  }

  .tutorialCoachHead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-family: var(--mp-mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mp-teal-1, #80e8df);
  }

  .tutorialCoachHead b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mp-bone, #f5ecd8);
    font-family: var(--mp-serif);
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: none;
  }

  .tutorialCoachHead em {
    justify-self: end;
    color: rgba(232, 222, 197, .62);
    font-style: normal;
  }

  .tutorialCoachTask {
    color: var(--mp-bone, #f5ecd8);
    font-family: var(--mp-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
  }

  .tutorialCoachCopy {
    color: rgba(232, 222, 197, .74);
    font-size: 12px;
    line-height: 1.35;
  }

  .tutorialCoachMsg {
    padding: 6px 8px;
    border-left: 2px solid #e26a6a;
    background: rgba(176, 48, 80, .14);
    color: #ffd2d2;
    font-size: 12px;
  }

  .tutorialCoachMsg.success {
    border-left-color: #7bbf9a;
    background: rgba(90, 192, 140, .13);
    color: #dff8e8;
  }

  .tutorialCoachActions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .tutorialCoachActions button {
    min-height: 28px;
    padding: 5px 9px;
    font-size: 11px;
  }

  .sq.tutorialSource {
    box-shadow:
      inset 0 0 0 2px rgba(77, 208, 196, .76),
      inset 0 0 22px rgba(77, 208, 196, .22);
  }

  .sq.tutorialSource .chip {
    animation: pieceFocusPulse 1.45s ease-in-out infinite;
  }

  .sq.tutorialTarget::before,
  .sq.tutorialBlocked::before,
  .sq.tutorialDanger::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 1;
    pointer-events: none;
    border: 2px solid rgba(216, 177, 90, .86);
    box-shadow: 0 0 14px rgba(216, 177, 90, .36);
  }

  .sq.tutorialTarget::before {
    border-color: rgba(216, 177, 90, .92);
  }

  .sq.tutorialBlocked::before {
    border-color: rgba(140, 148, 156, .78);
    box-shadow: none;
  }

  .sq.tutorialDanger::before {
    border-color: rgba(226, 106, 106, .82);
    box-shadow: 0 0 12px rgba(226, 106, 106, .32);
  }

  .sq .tutorialMarker {
    position: absolute;
    left: 4px;
    bottom: 4px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 8px);
    min-height: 15px;
    padding: 1px 4px;
    border: 1px solid rgba(8, 10, 14, .55);
    background: rgba(5, 8, 10, .78);
    color: #f3d795;
    font-family: var(--mp-mono);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
  }

  @media (max-width: 700px) {
    .tutorialCoach {
      padding: 8px;
      gap: 6px;
    }

    .tutorialCoachHead {
      grid-template-columns: 1fr auto;
      gap: 5px 8px;
    }

    .tutorialCoachHead b {
      grid-column: 1 / -1;
      grid-row: 1;
      white-space: normal;
      font-size: 13px;
    }

    .tutorialCoachHead span {
      grid-column: 1;
      grid-row: 2;
    }

    .tutorialCoachHead em {
      grid-column: 2;
      grid-row: 2;
    }

    .tutorialCoachTask {
      font-size: 15px;
    }

    .sq .tutorialMarker {
      font-size: 8px;
      padding-inline: 3px;
    }
  }
  .startHero {
    display: grid;
    gap: 16px;
    min-height: 430px;
    align-content: center;
    max-width: 780px;
    padding: 56px 0 42px;
  }
  .startHero h2 {
    margin: 0;
    color: #fff7df;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 78px;
    font-weight: 700;
    line-height: .92;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #000, 0 0 32px rgba(200, 155, 60, .28);
  }
  .startHero p {
    margin: 0;
    color: #d2d9df;
    max-width: 58ch;
    font-size: 17px;
  }
  .startBand {
    border-top: 1px solid rgba(200, 155, 60, .38);
    border-bottom: 1px solid rgba(10, 200, 185, .18);
    background:
      linear-gradient(90deg, rgba(200, 155, 60, .13), rgba(10, 200, 185, .07), transparent),
      rgba(5, 8, 14, .66);
    backdrop-filter: blur(5px);
  }
  .startBandCompact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
  }
  .startBandCompact > div {
    display: grid;
    gap: 5px;
    padding: 18px 20px;
    background: rgba(11, 15, 23, .62);
  }
  .startBand strong,
  .factionPanel h3,
  .visionGrid h3 {
    color: #fff4d9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.1;
  }
  .startBand span,
  .startBand p,
  .visionGrid p,
  .factionPanel p {
    color: #aab4bf;
  }
  .visionGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .visionGrid article {
    min-height: 184px;
    padding: 16px;
    border: 1px solid rgba(200, 155, 60, .28);
    border-radius: 6px;
    background:
      linear-gradient(180deg, rgba(240, 210, 131, .08), rgba(10, 200, 185, .04)),
      rgba(12, 16, 24, .78);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
  }
  .visionGrid article > span {
    color: var(--rift-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
  }
  .visionGrid h3,
  .factionPanel h3,
  .roadmapBand h3 {
    margin: 10px 0 8px;
  }
  .visionGrid p,
  .factionPanel p {
    margin: 0;
    font-size: 13px;
  }
  .factionShowcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .factionPanel {
    position: relative;
    min-height: 210px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(200, 155, 60, .32);
    border-radius: 6px;
    background:
      linear-gradient(130deg, rgba(240, 210, 131, .13), transparent 44%),
      rgba(9, 13, 21, .78);
  }
  .factionPanel::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(240, 210, 131, .76), rgba(10, 200, 185, .58));
  }
  .factionPanel.undead {
    background:
      linear-gradient(130deg, rgba(10, 200, 185, .14), transparent 46%),
      rgba(9, 13, 21, .78);
  }
  .factionSigil {
    color: rgba(240, 210, 131, .72);
    font-size: 48px;
    line-height: 1;
  }
  .roadmapBand {
    display: grid;
    gap: 14px;
    padding: 18px 20px;
  }
  .roadmapBand h3 {
    color: #fff4d9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
  }
  .roadmapSteps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .roadmapSteps span {
    padding: 10px 12px;
    border: 1px solid rgba(200, 155, 60, .24);
    background: rgba(0,0,0,.18);
    color: #d7dee5;
    font-size: 12px;
    text-transform: uppercase;
  }
  .startLobby {
    background: rgba(7, 10, 16, .76);
    border: 1px solid rgba(200, 155, 60, .30);
    border-radius: 6px;
    padding: 14px;
  }
  .modePanel {
    position: relative;
    z-index: 1;
    width: min(640px, calc(100vw - 32px));
    display: grid;
    gap: 16px;
    padding: clamp(22px, 4vw, 38px);
    border: 1px solid rgba(200, 155, 60, .58);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(10, 200, 185, .12), transparent 46%),
      linear-gradient(180deg, rgba(240, 210, 131, .12), rgba(0,0,0,.14)),
      rgba(14, 18, 27, .92);
    box-shadow: 0 30px 80px rgba(0,0,0,.56), inset 0 0 0 1px rgba(255,255,255,.05);
    backdrop-filter: blur(6px);
  }
  .startMenu::before,
  .startMenu::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 210, 131, .62), transparent);
  }
  .startMenu::before { top: 12px; }
  .startMenu::after { bottom: 12px; }
  .startKicker {
    color: var(--rift-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .modePanel h2 {
    margin: 0;
    color: #fff7df;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(46px, 8vw, 86px);
    font-weight: 700;
    line-height: .92;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #000, 0 0 32px rgba(200, 155, 60, .28);
  }
  .modePanel p {
    margin: 0;
    color: #c8d0d7;
    max-width: 54ch;
    font-size: 15px;
  }
  .modeChoices {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .modeChoices button {
    min-width: 150px;
    min-height: 42px;
    border-color: rgba(200, 155, 60, .56);
    background:
      linear-gradient(180deg, rgba(240, 210, 131, .12), rgba(10, 200, 185, .05)),
      #121925;
    color: #f6ecd4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
  }
  .modeChoices button.primary {
    border-color: rgba(240, 210, 131, .82);
    background:
      linear-gradient(180deg, rgba(240, 210, 131, .24), rgba(120, 90, 40, .22)),
      #1b2231;
    box-shadow: 0 0 24px rgba(200, 155, 60, .18);
  }
  .modeChoices button:disabled {
    cursor: not-allowed;
    color: rgba(240, 230, 210, .42);
    border-color: rgba(143, 152, 168, .20);
    background: rgba(17, 21, 29, .62);
  }
  .alphaStrip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--rift-gold-bright);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .alphaStrip span {
    padding: 5px 9px;
    border: 1px solid rgba(200, 155, 60, .34);
    background: rgba(0,0,0,.18);
  }
  .lobbyPanel {
    border-top: 1px solid var(--line, rgba(255,255,255,0.08));
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .lobbyPanel[hidden] { display: none; }
  .lobbyPanel h3 {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
  }
  .lobbyList {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
  }
  .lobbyEntry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--line, rgba(255,255,255,0.08));
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-size: 13px;
  }
  .lobbyEntry:hover {
    background: rgba(255,255,255,0.06);
  }
  .lobbyEntry .lobbyMeta {
    color: var(--muted);
    font-size: 11px;
  }
  .lobbyEmpty {
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
  }
  .lobbyDeckPickerPanel {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(216, 177, 90, .22);
    background:
      radial-gradient(ellipse 70% 55% at 12% 0%, rgba(77, 208, 196, .10), transparent 62%),
      rgba(7, 10, 16, .56);
    border-radius: 6px;
  }
  .lobbyDeckPickerState {
    padding: 12px;
    border: 1px dashed rgba(216, 177, 90, .20);
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
  }
  .lobbyDeckPickerHead,
  .lobbyDeckPickerFoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .lobbyDeckPickerHead span,
  .lobbyDeckSelected span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }
  .lobbyDeckPickerHead strong,
  .lobbyDeckSelected strong {
    display: block;
    color: var(--bone, #f3ead8);
    font-family: var(--font-display, inherit);
    font-size: 16px;
    letter-spacing: 1px;
  }
  .lobbyDeckPickerText {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
  }
  .lobbyDeckPickerLink,
  .lobbyStartDeckMatch {
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(216, 177, 90, .28);
    border-radius: 4px;
    background: rgba(216, 177, 90, .10);
    color: var(--rift-gold-bright, #f4d37f);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .lobbyDeckPickerLink:hover,
  .lobbyStartDeckMatch:hover {
    border-color: rgba(216, 177, 90, .48);
    background: rgba(216, 177, 90, .16);
  }
  .lobbyStartDeckMatch {
    background: linear-gradient(135deg, rgba(216, 177, 90, .22), rgba(77, 208, 196, .12));
  }
  .lobbyStartDeckMatch:disabled {
    cursor: wait;
    opacity: .62;
  }
  .lobbyDeckOptions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
  }
  .lobbyDeckOption {
    display: grid;
    gap: 4px;
    min-height: 78px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    background: rgba(255,255,255,0.025);
    color: inherit;
    text-align: left;
  }
  .lobbyDeckOption:hover {
    border-color: rgba(216, 177, 90, .30);
    background: rgba(255,255,255,0.055);
  }
  .lobbyDeckOption.selected {
    border-color: rgba(216, 177, 90, .55);
    box-shadow: inset 0 0 0 1px rgba(216, 177, 90, .30);
  }
  .lobbyDeckOption.active {
    background:
      linear-gradient(135deg, rgba(216, 177, 90, .10), rgba(77, 208, 196, .04)),
      rgba(255,255,255,0.025);
  }
  .lobbyDeckOption .ldo-faction {
    color: var(--rift-cyan, #8ff6ff);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }
  .lobbyDeckOption strong {
    overflow: hidden;
    color: var(--bone, #f3ead8);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lobbyDeckOption small {
    color: var(--muted);
    font-size: 11px;
  }
  @media (max-width: 640px) {
    .lobbyDeckPickerHead,
    .lobbyDeckPickerFoot {
      align-items: stretch;
      flex-direction: column;
    }
    .lobbyDeckPickerLink,
    .lobbyStartDeckMatch {
      width: 100%;
    }
  }

  .onlineShareBanner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    margin: 8px 0;
    border: 1px solid rgba(32, 215, 230, 0.45);
    background: rgba(32, 215, 230, 0.08);
    border-radius: 6px;
  }
  .onlineShareBanner[hidden] { display: none; }
  .onlineShareLabel {
    font-weight: 600;
    color: #20D7E6;
    font-size: 13px;
    letter-spacing: 0.3px;
  }
  .onlineShareRow {
    display: flex;
    gap: 6px;
    align-items: stretch;
    flex-wrap: wrap;
  }
  .onlineShareUrl {
    flex: 1 1 320px;
    min-width: 0;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12px;
    padding: 7px 9px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 4px;
    user-select: all;
  }
  .onlineShareCopy {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .onlineShareHint {
    color: var(--muted);
    font-size: 11px;
  }
  .onlineShareTest {
    align-self: flex-start;
    font-size: 11px;
    color: var(--muted);
    background: none;
    border: 1px dashed rgba(255,255,255,0.22);
    padding: 5px 9px;
    border-radius: 4px;
    cursor: pointer;
  }
  .onlineShareTest:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.4);
  }

  /* Oeffentliche Beta == volles Online-/Account-Produkt: die fruehere
     "public = lokale Demo"-Ausgrauung (Online/Lab/Ranked grau + "Bald") ist
     entfallen. Nur die allgemeine Eingeklappt-Regel bleibt. */
  body.side-nav-collapsed .sideNavList button::after {
    content: none !important;
    display: none !important;
  }

  /* Access gate overlay (shown when not unlocked and not in dev mode) */
  body.exposure-locked > *:not(#accessGate):not(script) {
    display: none !important;
  }
  .accessGate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
      radial-gradient(circle at 50% 18%, rgba(212, 175, 55, 0.16), transparent 38%),
      radial-gradient(circle at 50% 82%, rgba(32, 215, 230, 0.10), transparent 42%),
      linear-gradient(180deg, #111722 0%, #0b0d12 60%, #050608 100%);
    color: #f3eadb;
    font-family: ui-sans-serif, system-ui, sans-serif;
  }
  .accessGate[hidden] { display: none; }
  .accessGateInner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 360px;
    width: 100%;
    padding: 28px 26px 26px;
    border-radius: 14px;
    background: rgba(18, 20, 28, 0.92);
    border: 1px solid rgba(200, 155, 60, 0.34);
    box-shadow:
      0 24px 56px rgba(0, 0, 0, 0.6),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
  .accessGateBrand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
  }
  .accessGateMark {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(200, 155, 60, 0.16);
    border: 1px solid rgba(200, 155, 60, 0.5);
    color: #f0d283;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .accessGateInner h1 {
    margin: 4px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff4d9;
  }
  .accessGateKicker {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #20D7E6;
  }
  .accessGateInner p {
    margin: 0;
    color: #b8b0a3;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
  }
  .accessGateLabel {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b8b0a3;
  }
  #accessGateInput {
    padding: 11px 13px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.45);
    color: #f3eadb;
    font-size: 14px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: 1px;
  }
  #accessGateInput:focus {
    outline: none;
    border-color: rgba(32, 215, 230, 0.6);
    box-shadow: 0 0 0 2px rgba(32, 215, 230, 0.18);
  }
  .accessGateInner button[type="submit"] {
    padding: 11px 16px;
    border-radius: 6px;
    border: 0;
    background: linear-gradient(180deg, #d4af37, #a87f1a);
    color: #1a1408;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
  }
  .accessGateInner button[type="submit"]:hover {
    filter: brightness(1.1);
  }
  .accessGateError {
    color: #ff8082;
    font-size: 12px;
    text-align: center;
    margin-top: -4px;
  }
  .accessGateError[hidden] { display: none; }

  @media (max-width: 860px) {
    body:not(.side-nav-collapsed) {
      --side-nav-width: 280px;
    }
    header.sideNav {
      padding: 12px 8px;
      gap: 12px;
    }
    .sideNavList {
      margin-top: 28px;
    }
    .modeScreen { padding: 24px 12px 36px; }
    .startHero {
      min-height: 360px;
      padding-top: 34px;
    }
    .startHero h2 { font-size: 52px; }
    .startHero p { font-size: 15px; }
    .startBandCompact,
    .factionShowcase,
    .roadmapSteps {
      grid-template-columns: 1fr;
    }
    .visionGrid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .startHero h2 { font-size: 42px; }
    .visionGrid {
      grid-template-columns: 1fr;
    }
    .modeChoices button {
      width: 100%;
    }
  }

  body.mode-select,
  body.mode-profile,
  body.mode-collection,
  body.mode-community,
  body.mode-lessons,
  body.mode-puzzle,
  body.mode-messages,
  body.mode-info,
  body.mode-play {
    grid-template-columns: var(--side-nav-width) minmax(0, 1fr);
  }

  /* --- board-using modes: re-show <main> (the board) and the dev <aside>.
     Everything else keeps the default `display: none`, so new pages never
     leak the board/editor. The live game (demo) also runs for online &
     ranked matches; lab is the dev figure editor; puzzle shows the board
     only while a puzzle is actually loaded (body.puzzle-active). --- */
  body.mode-demo main,
  body.mode-lab main {
    display: flex;
  }
  /* The dev editor side panel is only used inside the figure lab. */
  aside { display: none; }
  body.mode-lab aside {
    display: block;
  }

  body.mode-demo {
    /* 100dvh-Reserve deckt das, was UNTER dem Brett in <main> liegt:
       main-Padding (16+16) + gap zum #gamePanel (12) + boardWrap-Chrome (~22)
       + die (im Online-Spiel sichtbare) Aufgeben-Zeile. Sonst ueberragt das
       Brett den Viewport um wenige Pixel -> dauerhafter Mini-Scrollbalken. */
    --board-size: max(420px, calc(min(calc(100dvh - 104px), calc(100vw - var(--side-nav-width) - 56px - var(--rail-size) * 2)) * 0.98));
    grid-template-columns: var(--side-nav-width) minmax(520px, 1fr);
  }
  body.mode-demo aside,
  body.mode-demo #boardControls,
  body.mode-demo .legend,
  body.mode-demo #statusLegend,
  body.mode-demo #moveHistory,
  body.mode-demo #setupStatus,
  body.mode-demo #captureStatus,
  body.mode-demo #startGame,
  body.mode-demo #returnSetup,
  body.mode-demo #newLocalGame,
  body.mode-demo #undoMove,
  body.mode-demo #gameStatus,
  body.mode-demo #pieceInfo,
  body.mode-demo #showModeSelect,
  body.mode-demo .brandBlock span {
    display: none !important;
  }
  body.mode-demo main {
    grid-column: 2 / -1;
    min-height: 100vh;
    justify-content: center;
  }
  body.mode-demo.exposure-public main {
    justify-content: flex-start;
  }
  /* Im Spielmodus unterm Brett kein Kasten — die Zug-Navigation lebt jetzt in der
     Zughistorie (rechte Rail). Nur "Aufgeben" (online) bleibt rahmenlos. */
  body.mode-demo #gamePanel {
    grid-template-columns: 1fr auto;
    background: transparent;
    border-color: transparent;
    padding: 0;
  }
  body.mode-demo #gameActions {
    justify-content: flex-end;
  }
  body.mode-demo #startDemoMatch::after {
    content: "";
  }

  @media (orientation: portrait) and (min-width: 700px) and (max-width: 1180px) {
    body.mode-demo {
      --side-nav-width: var(--side-nav-collapsed-width);
      --rail-size: clamp(42px, 6vw, 58px);
      --effect-chip-size: clamp(32px, 4.8vw, 44px);
      --board-size: min(
        calc(100vw - var(--side-nav-width) - 54px),
        calc(100dvh - 368px),
        820px
      );
      grid-template-columns: var(--side-nav-width) minmax(0, 1fr);
      overflow-x: hidden;
    }

    body.mode-demo header.sideNav {
      padding: 12px 8px;
      align-items: center;
      gap: 12px;
      overflow: hidden;
    }

    body.mode-demo .sideNavToggle {
      right: 14px;
    }

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

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

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

    body.mode-demo .sideNavList button,
    body.mode-demo .sideNavList button:disabled,
    body.mode-demo .sideNavList button:hover,
    body.mode-demo .sideNavList button:focus-visible,
    body.mode-demo #navOnline {
      width: 38px !important;
      max-width: 38px !important;
      min-height: 38px;
      grid-template-columns: 1fr;
      place-items: center;
      padding: 0 !important;
      color: transparent !important;
      font-size: 0 !important;
    }

    body.mode-demo .sideNavList button .navIcon {
      color: var(--rift-gold-bright);
      font-size: 18px;
    }
    body.mode-demo .sideNavList button .navLabel {
      display: none !important;
    }

    body.mode-demo main {
      min-width: 0;
      min-height: 100dvh;
      padding: 12px 10px 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) - 20px));
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "enemy"
        "board"
        "own";
      gap: 8px;
      align-items: center;
      justify-items: center;
    }

    body.mode-demo #boardWrap {
      width: min(calc(var(--board-size) + 24px), calc(100vw - var(--side-nav-width) - 20px));
      padding: 8px;
      border-radius: 8px;
    }

    body.mode-demo #ranks,
    body.mode-demo #files {
      display: none;
    }

    body.mode-demo .effectRail {
      width: min(calc(var(--board-size) + 24px), calc(100vw - var(--side-nav-width) - 20px));
      min-height: 0;
      max-height: 78px;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 8px;
      padding: 6px;
      border: 1px solid rgba(200, 155, 60, .20);
      border-radius: 8px;
      background: rgba(8, 12, 18, .58);
      overflow: hidden;
    }

    body.mode-demo .effectRailHeader {
      width: 62px;
      min-height: 46px;
      flex: 0 0 62px;
      border-radius: 8px;
      font-size: 10px;
      padding: 5px 4px;
    }

    body.mode-demo .effectGroups,
    body.mode-demo .effectRail.left .effectGroups {
      min-width: 0;
      flex: 1 1 auto;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      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;
      flex: 0 0 auto;
      flex-direction: row;
      align-items: center;
      gap: 6px;
    }

    body.mode-demo .effectGroupHeader {
      width: auto;
      min-width: 28px;
      padding: 0;
      border-top: 0;
      font-size: 0;
      letter-spacing: 0;
    }

    body.mode-demo .effectGroupHeader span {
      display: none;
    }

    body.mode-demo .effectGroupHeader b {
      min-width: 16px;
      height: 16px;
      display: inline-flex;
      font-size: 9px;
    }

    body.mode-demo .effectList,
    body.mode-demo .effectRail.left .effectList,
    body.mode-demo .effectRail.right .effectList {
      flex-direction: row;
      gap: 8px;
      padding: 0;
    }

    /* In horizontal compact rails, hide the bottom footer block (Aufgeben/Remis + Zughistorie) */
    body.mode-demo .effectRailFooter {
      display: none;
    }

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

    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;
    }

    body.mode-demo #startDemoMatch {
      max-width: 100%;
      white-space: normal;
    }

    body.mode-demo .onlineShareBanner {
      width: 100%;
      margin: 0;
      padding: 9px 10px;
    }

    body.mode-demo .onlineShareRow {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
    }

    body.mode-demo .onlineShareUrl {
      flex-basis: auto;
      width: 100%;
    }
  }

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

  body.mode-lab .modeScreen {
    display: none;
  }
  body.mode-lab #showModeSelect {
    display: none;
  }

  #boardStage {
    display: grid;
    grid-template-columns: var(--rail-size) auto var(--rail-size);
    grid-template-areas:
      "own board enemy";
    gap: 10px 12px;
    align-items: start;
    filter: drop-shadow(0 24px 34px rgba(0,0,0,.42));
  }
  #boardWrap { grid-area: board; }
  #boardWrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    padding: 10px;
    border: 1px solid rgba(200, 155, 60, .56);
    border-radius: 10px;
    background:
      linear-gradient(135deg, rgba(240, 210, 131, .17), transparent 24% 76%, rgba(10, 200, 185, .13)),
      linear-gradient(180deg, #1b1820, #0b0f15 68%, #050607);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.72),
      0 0 26px rgba(10, 200, 185, .11),
      inset 0 0 0 2px rgba(120, 90, 40, .45),
      inset 0 0 24px rgba(0,0,0,.86);
    user-select: none;
  }
  #ranks, #files {
    display: none;
  }
  #board {
    width: var(--board-size);
    height: var(--board-size);
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 1px;
    padding: 4px;
    border: 2px solid var(--rift-gold);
    border-radius: 7px;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 50%, rgba(10,200,185,.24), transparent 46%),
      linear-gradient(135deg, #c89b3c, #3a2a13 34%, #0a1117 50%, #785a28 77%, #f0d283);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.86),
      0 0 22px rgba(10, 200, 185, .22),
      inset 0 0 0 1px rgba(240, 210, 131, .22),
      inset 0 0 28px rgba(0,0,0,.70);
    touch-action: none;
  }
  #board::before,
  #board::after {
    content: "";
    position: absolute;
    inset: 4px;
    pointer-events: none;
  }
  #board::before {
    z-index: 3;
    border: 1px solid rgba(240,210,131,.22);
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,.42),
      inset 0 0 32px rgba(0,0,0,.46);
  }
  #board::after {
    z-index: 4;
    opacity: .22;
    background:
      linear-gradient(90deg, transparent calc(50% - 1px), rgba(10,200,185,.45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(0deg, transparent calc(50% - 1px), rgba(10,200,185,.45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(240,210,131,.35) 16% 17%, transparent 18% 100%);
    mix-blend-mode: screen;
  }
  .sq {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    overflow: hidden;
    isolation: isolate;
  }
  .sq::before {
    content: "";
    position: absolute;
    inset: 9%;
    border: 1px solid rgba(240,210,131,.11);
    opacity: .7;
    pointer-events: none;
    z-index: 0;
  }
  .sqCoord {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    color: color-mix(in srgb, var(--rift-gold-bright) 72%, rgba(255,255,255,.38));
    font-size: clamp(8px, calc(var(--board-size) / 68), 12px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    opacity: .62;
    text-shadow: 0 1px 2px rgba(0,0,0,.72), 0 0 5px rgba(240,210,131,.22);
  }
  .sqCoordRank {
    left: 5px;
    top: 5px;
  }
  .sqCoordFile {
    right: 5px;
    bottom: 5px;
  }
  .sq.light {
    --sq-bg:
      radial-gradient(circle at 48% 44%, rgba(240,210,131,.10), transparent 45%),
      linear-gradient(135deg, rgba(255,255,255,.05), transparent 30% 70%, rgba(0,0,0,.18)),
      repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 13px),
      var(--light);
    background: var(--sq-bg);
  }
  .sq.dark  {
    --sq-bg:
      radial-gradient(circle at 50% 42%, rgba(10,200,185,.08), transparent 42%),
      linear-gradient(135deg, rgba(255,255,255,.025), transparent 28% 74%, rgba(0,0,0,.28)),
      repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px),
      var(--dark);
    background: var(--sq-bg);
  }
  .sq:nth-child(1),
  .sq:nth-child(8),
  .sq:nth-child(57),
  .sq:nth-child(64) {
    box-shadow: inset 0 0 0 1px rgba(240,210,131,.18);
  }
  .sq.dragSource .chip {
    opacity: 0;
  }
  .sq.dragMoveTarget::after,
  .sq.dragCaptureTarget::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }
  .sq.dragMoveTarget::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--rift-gold-bright) 66%, transparent) 0 20%, transparent 23%);
  }
  .sq.dragCaptureTarget::after {
    background: radial-gradient(circle, rgba(220, 70, 70, .92) 0 14%, transparent 17%);
  }
  .sq.dragOverAllowed::after {
    inset: 5%;
    border-style: solid;
    box-shadow:
      0 0 0 2px rgba(255,255,255,.16),
      0 0 16px color-mix(in srgb, var(--piece-main-color, var(--accent)) 42%, transparent);
  }

  .chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    font-size: clamp(20px, 4.2vh, 38px);
    line-height: 1;
    z-index: 1;
    cursor: grab;
    user-select: none;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  }
  .chip.dragging {
    cursor: grabbing;
    opacity: 0;
  }
  .pointerDragGhost {
    cursor: grabbing;
    user-select: none;
    touch-action: none;
  }
  .chip.w { background:#f3eadb; color:#1a1a1f; box-shadow: inset 0 0 0 2px #1a1a1f, 0 1px 3px rgba(0,0,0,.3); }
  .chip.b { background:#1a1a1f; color:#f3eadb; box-shadow: inset 0 0 0 2px #f3eadb, 0 1px 3px rgba(0,0,0,.3); }
  .chip.hasAsset {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .chip .pieceAsset {
    width: 112%;
    height: 112%;
    object-fit: contain;
    pointer-events: none;
    filter:
      drop-shadow(0 5px 4px rgba(0,0,0,.68))
      drop-shadow(0 0 7px rgba(10,200,185,.18));
  }
  #board .sq:not(.selected):not(.actionActor):not(.actionSourcePicked):not(.pickCandidate):not(.kingInCheck) .chip:not(.dragging) {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .sq.move::after,
  .sq.capture::after,
  .sq.extra::after,
  .sq.actionTarget::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  }
  .sq.selected {
    box-shadow: inset 0 0 0 1px rgba(77, 208, 196, .7), inset 0 0 24px rgba(77, 208, 196, .3);
  }
  .sq.selected::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(77, 208, 196, .35), rgba(35, 155, 149, .08) 60%, transparent);
  }
  /* Hide the selected-piece teal marker while the cursor is in any effect
     rail — so the rail's own hover/preview state isn't fighting with the
     board glow. Skip the suppression when this square is the hovered
     effect's actor (.effectHover) so its gold corner markers stay visible. */
  body:has(.effectRail:hover) .sq.selected:not(.effectHover) {
    box-shadow: none;
  }
  body:has(.effectRail:hover) .sq.selected:not(.effectHover)::after {
    background: none;
  }
  body:has(.effectRail:hover) .sq.selected:not(.effectHover) .chip {
    animation: none;
  }
  .sq.lastMoveFrom,
  .sq.lastMoveTo {
    box-shadow:
      inset 0 0 0 1px rgba(216, 177, 90, .22),
      inset 0 0 18px rgba(216, 177, 90, .08);
  }
  .sq.lastAction-move {
    --last-action-tone: rgba(216, 177, 90, .76);
  }
  .sq.lastAction-capture {
    --last-action-tone: rgba(226, 106, 106, .82);
  }
  .sq.lastAction-effect {
    --last-action-tone: rgba(77, 208, 196, .82);
  }
  .sq.lastMoveTo {
    box-shadow:
      inset 0 0 0 1px rgba(216, 177, 90, .34),
      inset 0 0 20px rgba(216, 177, 90, .12),
      inset 0 -1px 0 rgba(216, 177, 90, .42);
  }
  .sq.lastMoveFrom.lastAction-capture {
    box-shadow:
      inset 0 0 0 1px rgba(226, 106, 106, .24),
      inset 0 0 18px rgba(226, 106, 106, .08);
  }
  .sq.lastMoveCapture {
    box-shadow:
      inset 0 0 0 1px rgba(226, 106, 106, .34),
      inset 0 0 20px rgba(226, 106, 106, .11),
      inset 0 -1px 0 rgba(226, 106, 106, .42);
  }
  .sq.lastMoveFrom.lastAction-effect {
    box-shadow:
      inset 0 0 0 1px rgba(77, 208, 196, .24),
      inset 0 0 18px rgba(77, 208, 196, .08);
  }
  .sq.lastMoveEffect {
    box-shadow:
      inset 0 0 0 1px rgba(77, 208, 196, .34),
      inset 0 0 20px rgba(77, 208, 196, .12),
      inset 0 -1px 0 rgba(77, 208, 196, .42);
  }
  .sq.lastActionSquare::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: 1;
    pointer-events: none;
    border: 1px solid var(--last-action-tone, rgba(216, 177, 90, .7));
    opacity: 0;
    transform: scale(.82);
  }
  .sq.lastActionPulse.lastAction-move::before {
    animation: lastMoveBreath 1.45s ease-out 1;
  }
  .sq.lastActionPulse.lastAction-capture::before {
    border-color: rgba(226, 106, 106, .88);
    animation: lastCaptureStrike 1.35s ease-out 1;
  }
  .sq.lastActionPulse.lastAction-effect::before {
    border-color: rgba(77, 208, 196, .88);
    box-shadow: 0 0 16px rgba(77, 208, 196, .18);
    animation: lastEffectFocus 1.65s ease-out 1;
  }
  .sq .lastMoveMark {
    position: absolute;
    inset: 5px;
    z-index: 4;
    pointer-events: none;
    opacity: .96;
  }
  .sq .lastMoveMark::before,
  .sq .lastMoveMark::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: rgba(216, 177, 90, .78);
    border-style: solid;
  }
  .sq .lastMoveMark-capture::before,
  .sq .lastMoveMark-capture::after {
    border-color: rgba(226, 106, 106, .78);
  }
  .sq .lastMoveMark-effect::before,
  .sq .lastMoveMark-effect::after {
    border-color: rgba(77, 208, 196, .82);
  }
  .sq .lastMoveMark-from::before {
    left: 0;
    top: 0;
    border-width: 1px 0 0 1px;
  }
  .sq .lastMoveMark-from::after {
    right: 0;
    bottom: 0;
    width: 6px;
    height: 6px;
    border-width: 0 1px 1px 0;
    opacity: .58;
  }
  .sq .lastMoveMark-to::before {
    right: 0;
    top: 0;
    border-width: 1px 1px 0 0;
  }
  .sq .lastMoveMark-to::after {
    left: 0;
    bottom: 0;
    border-width: 0 0 1px 1px;
  }
  .sq.lastMoveCapture .lastMoveMark::before,
  .sq.lastMoveCapture .lastMoveMark::after {
    border-color: rgba(226, 106, 106, .72);
  }
  .sq.lastMoveEffect .lastMoveMark::before,
  .sq.lastMoveEffect .lastMoveMark::after {
    border-color: rgba(77, 208, 196, .82);
  }
  @keyframes lastMoveBreath {
    0% { opacity: 0; transform: scale(.74); }
    22% { opacity: .72; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.18); }
  }
  @keyframes lastCaptureStrike {
    0% { opacity: 0; transform: scale(1.2); }
    18% { opacity: .88; transform: scale(.9); }
    55% { opacity: .28; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(1.18); }
  }
  @keyframes lastEffectFocus {
    0% { opacity: 0; transform: scale(.72) rotate(0deg); }
    20% { opacity: .82; transform: scale(1) rotate(0deg); }
    58% { opacity: .34; transform: scale(.94) rotate(45deg); }
    100% { opacity: 0; transform: scale(1.16) rotate(45deg); }
  }
  .sq.dangerTarget {
    box-shadow: inset 0 0 0 2px rgba(255, 184, 107, .48);
  }
  .sq .dangerIcon {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 5;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(35, 20, 12, .92);
    border: 1px solid rgba(255, 184, 107, .72);
    color: #ffd8a8;
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
  }
  .sq.move::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--rift-gold-bright) 66%, transparent) 0 20%, transparent 23%);
  }
  .sq.capture::after {
    inset: 0;
    border-radius: 0;
    border: 0;
    background: radial-gradient(circle, rgba(220, 70, 70, .92) 0 14%, transparent 17%);
  }
  .sq.extra::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--piece-main-color, var(--hl-extra)) 70%, transparent) 0 18%, transparent 21%);
  }
  .sq.actionTarget::after {
    inset: 0;
    border-radius: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .sq.actionMoveTarget::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--piece-main-color, #d4af37) 78%, transparent) 0 16%, transparent 19%);
  }
  .sq.actionCaptureTarget::after {
    inset: 0;
    border-radius: 0;
    border: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--piece-main-color, #ff6b6b) 78%, transparent) 0 16%, transparent 19%);
  }
  .sq.actionSourceTarget::after {
    inset: 0;
    border-radius: 0;
    border: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--piece-main-color, #5a9ad6) 78%, transparent) 0 16%, transparent 19%);
  }
  .sq.actionTarget.abilityField::before,
  .sq.effectPotentialHover.abilityField::before,
  .sq.effectPotentialActive.abilityField::before {
    content: none;
  }
  .sq.actionActor .chip {
    animation: pickCandidatePulse 1.1s ease-in-out infinite;
  }
  #board.effectForeignHover .sq.actionActor .chip,
  #board.effectForeignHover .sq.actionSourcePicked .chip,
  #board.effectForeignHover .sq.pickCandidate .chip {
    animation: none;
    box-shadow: none;
  }
  #board.effectForeignHover .pickCandidateMarker {
    opacity: 0;
  }
  #board.effectForeignHover .sq.actionMoveTarget:not(.effectHover):not(.effectPotentialHover)::after,
  #board.effectForeignHover .sq.actionCaptureTarget:not(.effectHover):not(.effectPotentialHover)::after,
  #board.effectForeignHover .sq.actionSourceTarget:not(.effectHover):not(.effectPotentialHover)::after,
  #board.effectForeignHover .sq.move:not(.effectHover):not(.effectPotentialHover)::after,
  #board.effectForeignHover .sq.capture:not(.effectHover):not(.effectPotentialHover)::after,
  #board.effectForeignHover .sq.extra:not(.effectHover):not(.effectPotentialHover)::after,
  #board.effectForeignHover .sq.selected:not(.effectHover):not(.effectPotentialHover)::after {
    background: none;
  }
  #board.effectListGapHover .sq.actionMoveTarget::after,
  #board.effectListGapHover .sq.actionCaptureTarget::after,
  #board.effectListGapHover .sq.actionSourceTarget::after,
  #board.effectListGapHover .sq.move::after,
  #board.effectListGapHover .sq.capture::after,
  #board.effectListGapHover .sq.extra::after,
  #board.effectListGapHover .sq.selected::after {
    background: none;
  }
  .sq.actionSourcePicked .chip {
    animation: pickCandidatePulse 1.1s ease-in-out infinite;
  }
  .sq.effectHover .chip {
    filter: drop-shadow(0 6px 6px rgba(0,0,0,.42));
  }
  .sq.actionActor.effectHover::after,
  .sq.actionSourcePicked.effectHover::after,
  .sq.pickCandidate.effectHover::after {
    content: none;
  }
  .sq.effectHover::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
    --effect-corner-gold: color-mix(in srgb, var(--rift-gold-bright) 78%, transparent);
    background:
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) left 6px top 6px / 18px 2px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) left 6px top 6px / 2px 18px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) right 6px top 6px / 18px 2px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) right 6px top 6px / 2px 18px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) left 6px bottom 6px / 18px 2px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) left 6px bottom 6px / 2px 18px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) right 6px bottom 6px / 18px 2px no-repeat,
      linear-gradient(var(--effect-corner-gold), var(--effect-corner-gold)) right 6px bottom 6px / 2px 18px no-repeat;
  }
  .sq.selected .chip {
    filter: drop-shadow(0 6px 5px rgba(0,0,0,.42));
  }
  .sq.effectPotentialActive {
    background: var(--sq-bg);
  }
  .sq.effectPotentialHover::after,
  .sq.effectTargetHover::before,
  .sq.effectCaptureHover::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(circle, color-mix(in srgb, var(--piece-main-color, #d4af37) 55%, transparent) 0 11%, transparent 14%);
  }
  .sq.effectSourceHover::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(circle, color-mix(in srgb, var(--piece-main-color, #d4af37) 55%, transparent) 0 11%, transparent 14%);
  }
  .sq.placeTarget { outline: 2px dashed var(--accent); outline-offset: -4px; }
  .sq.pickCandidate .chip {
    animation: pickCandidatePulse 1.1s ease-in-out infinite;
  }
  .sq .pickCandidateMarker {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 6;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 31, .92);
    border: 1px solid rgba(212, 175, 55, .86);
    color: #ffe7a3;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(212, 175, 55, .42);
  }
  @keyframes pickCandidatePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(212, 175, 55, .55), 0 0 14px rgba(212, 175, 55, .55); }
    50%      { box-shadow: 0 0 0 5px rgba(212, 175, 55, .85), 0 0 22px rgba(212, 175, 55, .8); }
  }
  .sq.attackedByEnemy { box-shadow: inset 0 0 0 3px rgba(230,80,80,.35); }
  .sq.threatActor .chip {
    filter: drop-shadow(0 6px 5px rgba(0,0,0,.42));
  }
  .sq.threatActor::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 4px;
    --hover-corner-gold: color-mix(in srgb, var(--rift-gold-bright) 58%, transparent);
    background:
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) left 6px top 6px / 18px 2px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) left 6px top 6px / 2px 18px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) right 6px top 6px / 18px 2px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) right 6px top 6px / 2px 18px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) left 6px bottom 6px / 18px 2px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) left 6px bottom 6px / 2px 18px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) right 6px bottom 6px / 18px 2px no-repeat,
      linear-gradient(var(--hover-corner-gold), var(--hover-corner-gold)) right 6px bottom 6px / 2px 18px no-repeat;
    pointer-events: none;
    z-index: 2;
  }
  .sq.threatMove::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgba(255, 200, 100, .32) 16%, transparent 18%);
  }
  .sq.threatCapture::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0;
    pointer-events: none;
    z-index: 3;
    border: 0;
    background: radial-gradient(circle, rgba(220, 70, 70, .55) 0 11%, transparent 14%);
  }
  .sq.threatPoison::before {
    background: radial-gradient(circle, rgba(90, 192, 140, .52) 0 11%, transparent 14%);
  }
  .sq.threatReflect .chip {
    outline: 2px solid rgba(125, 184, 255, .9);
    outline-offset: 4px;
    animation: threatReflectPulse 1.4s ease-in-out infinite;
  }
  .threatPreviewIcon {
    position: absolute;
    font-size: 14px;
    z-index: 5;
    pointer-events: none;
    text-shadow: 0 0 5px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.95);
    line-height: 1;
  }
  .threatPreviewIcon.ghoulRise   { bottom: 3px; right: 3px; }
  .threatPreviewIcon.maskTransform { top: 3px; right: 3px; }
  @keyframes threatReflectPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(125, 184, 255, .55); }
    50%      { box-shadow: 0 0 0 6px rgba(125, 184, 255, .15); }
  }
  .sq.abilityField::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--ability-tone, #d4af37) 55%, transparent) 0 11%, transparent 14%);
  }
  .sq.abilitySource .chip::after {
    content: none;
  }
  .sq.status-planned .chip::after {
    content: none;
  }
  .sq.status-partial .chip::after {
    content: none;
  }
  .sq.abilitySourceHasField.abilitySource-aura .chip::before,
  .sq.abilitySourceHasField.abilitySource-poison .chip::before,
  .sq.abilitySourceHasField.abilitySource-control .chip::before,
  .sq.abilitySourceHasField.abilitySource-shield .chip::before {
    content: none;
  }
  .sq.abilitySource-shield .chip::after {
    border-color: var(--ability-tone, #7db8ff);
    box-shadow:
      0 0 12px var(--ability-tone, #7db8ff),
      inset 0 0 8px color-mix(in srgb, var(--ability-tone, #7db8ff) 35%, transparent);
  }
  .sq.abilitySource-danger .chip::after {
    border-color: var(--ability-tone, #ff6b6b);
    box-shadow: 0 0 16px var(--ability-tone, #ff6b6b);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  #pieceModal .pmHeader {
    order: 1;
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 7px 34px 7px 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.20));
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
  }
  #pieceModal .pmChip {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; line-height: 1; flex-shrink: 0;
  }
  #pieceModal .pmChip.w { background:#f3eadb; color:#1a1a1f; box-shadow: inset 0 0 0 2px #1a1a1f; }
  #pieceModal .pmChip.b { background:#1a1a1f; color:#f3eadb; box-shadow: inset 0 0 0 2px #f3eadb; }
  #pieceModal .pmChip.hasAsset {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  #pieceModal .pmAsset {
    width: 54px;
    height: 54px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.42));
  }
  #pieceModal .pmName { font-size: 18px; font-weight: 800; line-height: 1.05; }
  #pieceModal .pmMeta { color: var(--muted); font-size: 11px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  #pieceModal .pmBadge {
    display: inline-block; padding: 2px 7px; border-radius: 999px;
    font-size: 10px; color: #0a0a0a; font-weight: 700; letter-spacing: .3px;
  }
  #pieceModal .roleBadge { background: #e7dcc8; }
  #pieceModal .rankBadge { background: #e7dcc8; }
  #pieceModal .balanceBadge { background: #d4af37; color: #141018; }
  #pieceModal .teamRoleBadge { background: rgba(255,255,255,0.12); color: var(--text); border: 1px solid rgba(255,255,255,0.2); }
  #pieceModal .typeBadgeHeader { background: var(--badge-color, var(--accent)); color: #101015; }
  #pieceModal .familyBadge { background: rgba(255,255,255,0.14); color: var(--text); border: 1px solid rgba(255,255,255,0.18); }
  #pieceModal .heroRule {
    order: 2;
    margin-top: 8px;
  }
  #pieceModal .heroRule.effectCard {
    background: #050507;
    border: 2px solid #020203;
    border-radius: 8px;
    padding: 8px;
    color: #171217;
    font-family: Georgia, "Times New Roman", serif;
    box-shadow:
      0 10px 18px rgba(0,0,0,.36),
      inset 0 0 0 1px rgba(255,255,255,.08);
  }
  #pieceModal .effectCardInner {
    position: relative;
    display: grid;
    gap: 5px;
    padding: 7px 7px 8px;
    border-radius: 8px 8px 20px 20px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--card-accent, #6aa9ff) 58%, #8aa5b4);
    background-image:
      repeating-linear-gradient(140deg, transparent 0 12px, rgba(255,255,255,.23) 13px 14px, transparent 20px 44px),
      repeating-linear-gradient(-30deg, transparent 0 22px, rgba(255,255,255,.32) 23px 25px, transparent 26px 54px),
      repeating-linear-gradient(-10deg, transparent 0 34px, rgba(0,0,0,.34) 35px 38px, transparent 39px 70px),
      repeating-radial-gradient(circle, rgba(0,0,0,.18) 0 2px, transparent 2px 10px);
    box-shadow:
      inset 0 0 0 2px rgba(0,0,0,.58),
      inset -2px -2px 0 rgba(255,255,255,.22);
  }
  #pieceModal .effectCardName,
  #pieceModal .effectCardType {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 31px;
    padding: 4px 8px;
    border: 2px solid rgba(0,0,0,.86);
    border-radius: 10px / 20px;
    background: radial-gradient(ellipse farthest-corner, #eef3f4 50%, #bfc9ce);
    box-shadow:
      -2px 0 0 rgba(0,0,0,.62),
      inset 2px -3px 0 #a8adb0,
      inset -1px 1px 0 #fff;
  }
  #pieceModal .effectCardName strong {
    min-width: 0;
    color: #161114;
    font-size: 18px;
    line-height: 1.05;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #pieceModal .effectCardName span {
    flex: 0 0 auto;
    min-width: 44px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.48);
    background: #e5e9eb;
    color: #1b1718;
    font: 800 10px/1 ui-sans-serif, system-ui, sans-serif;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.6);
  }
  #pieceModal .effectCardArt {
    position: relative;
    z-index: 1;
    height: 122px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #222;
    background:
      radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--card-accent, #6aa9ff) 46%, transparent) 0 24%, transparent 54%),
      linear-gradient(160deg, rgba(255,255,255,.26), transparent 35%),
      linear-gradient(180deg, #222832, #111117 70%);
    box-shadow: inset 0 0 30px rgba(0,0,0,.54);
  }
  #pieceModal .effectCardAura {
    position: absolute;
    inset: 14px 36px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--card-accent, #6aa9ff) 68%, #fff) 0 10%, transparent 68%);
    opacity: .38;
    filter: blur(2px);
  }
  #pieceModal .effectCardPiece {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f4eadb;
    font-size: 70px;
    line-height: 1;
    text-shadow: 0 3px 8px rgba(0,0,0,.85);
  }
  #pieceModal .effectCardAsset {
    width: 136px;
    height: 136px;
    object-fit: contain;
    filter: drop-shadow(0 7px 6px rgba(0,0,0,.58));
    pointer-events: none;
  }
  #pieceModal .effectCardType {
    min-height: 28px;
    padding-block: 3px;
  }
  #pieceModal .effectCardType strong {
    min-width: 0;
    color: #191416;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #pieceModal .effectCardType .typeBadge {
    flex: 0 0 auto;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid rgba(0,0,0,.35);
  }
  #pieceModal .effectCardText {
    position: relative;
    z-index: 1;
    min-height: 86px;
    padding: 10px 9px;
    border: 2px solid rgba(40,40,40,.78);
    border-left-color: rgba(180,180,180,.6);
    border-bottom-color: rgba(70,70,70,.8);
    background: #d7e0df;
    color: #211a18;
    box-shadow: inset 0 0 18px rgba(255,255,255,.34);
  }
  #pieceModal .effectCardText p {
    margin: 0;
    color: #211a18;
    font-size: 13px;
    line-height: 1.32;
    font-weight: 700;
  }
  #pieceModal .heroMechanics {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
  }
  #pieceModal .heroMechanics span {
    background: rgba(35,35,35,.08);
    border: 1px solid rgba(35,35,35,.28);
    border-radius: 999px;
    color: #523516;
    font: 800 10.5px/1.2 ui-sans-serif, system-ui, sans-serif;
    padding: 2px 7px;
  }
  #pieceModal .effectCardFooter {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: rgba(235,235,235,.84);
    font: 700 8.5px/1.2 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .4px;
  }
  #pieceModal .typeBadge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 7px;
    background: var(--badge-color, var(--accent));
    color: #101015;
    font-size: 10px;
    font-weight: 800;
  }
  #pieceModal .typeBadge.muted {
    background: rgba(0,0,0,0.12);
    color: #5e5344;
  }
  #pieceModal .effectPreview {
    order: 3;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 122px;
    gap: 10px;
    align-items: center;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.18)),
      #15151b;
    border: 2px solid rgba(0,0,0,0.68);
    border-radius: 8px;
    padding: 9px;
  }
  #pieceModal .effectPreviewText > span {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .9px;
    font-weight: 800;
  }
  #pieceModal .effectPreviewText strong {
    display: block;
    margin-top: 2px;
    color: color-mix(in srgb, var(--card-accent, var(--accent)) 74%, #fff);
    font-size: 13px;
  }
  #pieceModal .effectPreviewText p {
    margin: 4px 0 0;
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
  }
  #pieceModal .effectMiniBoard {
    width: 122px;
    margin: 0;
  }
  /* Effekt = Blau (Brett-Farbsprache), einheitlich — unabhaengig vom Effekt-Typ. */
  #pieceModal .miniSq.effectSourceCell::before {
    content: "";
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mp-mark-effect) 55%, transparent);
    box-shadow: 0 0 0 1px var(--mp-mark-effect);
    pointer-events: none;
  }
  #pieceModal .miniSq.effectTargetCell::after {
    content: "";
    position: absolute;
    inset: 20%;
    border-radius: 4px;
    border: 2px solid var(--mp-mark-effect);
    background: color-mix(in srgb, var(--mp-mark-effect) 16%, transparent);
    pointer-events: none;
  }
  #pieceModal .effectMiniCustom {
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
    padding: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
  }
  #pieceModal .effectMiniCustom strong {
    color: color-mix(in srgb, var(--card-accent, var(--accent)) 70%, #fff);
  }
  #pieceModal .effectMiniCustom span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
  }
  #pieceModal .pmSection { margin-top: 10px; }
  #pieceModal .pmSection:not(:has(.legacyDetailsTitle)) {
    order: 3;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.18)),
      #111116;
    border: 2px solid rgba(0,0,0,0.65);
    border-radius: 8px;
    padding: 8px;
  }
  #pieceModal .pmSection h4 {
    font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
    color: #17171d; margin: -8px -8px 7px; padding: 5px 8px;
    background: color-mix(in srgb, var(--card-accent, var(--accent)) 80%, #f3eadb);
    border-bottom: 1px solid rgba(0,0,0,0.45);
    border-radius: 6px 6px 0 0;
  }
  #pieceModal .pmDesc { color: var(--text); line-height: 1.5; }
  #pieceModal .pmList { margin: 0; padding-left: 16px; color: var(--text); }
  #pieceModal .pmList li { margin-bottom: 2px; color: var(--muted); }
  #pieceModal .pmKV { color: var(--text); }
  #pieceModal .pmKV span { color: var(--muted); }
  #pieceModal .pmFlag {
    display: inline-block; background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 6px; margin: 1px 3px 1px 0;
    font-family: ui-monospace, monospace; font-size: 10.5px;
  }
  #pieceModal .pmAbility {
    display: flex; gap: 6px; align-items: flex-start; margin: 4px 0;
    color: var(--text); line-height: 1.4;
  }
  #pieceModal .pmAbility .icon { flex-shrink:0; width:16px; text-align:center; }
  #pieceModal .pmSection:has(.legacyDetailsTitle) { display: none; }
  #pieceModal .ruleSummary {
    order: 4;
    margin-top: 10px;
    background: #ebe1cf;
    color: #171217;
    border: 2px solid rgba(0,0,0,0.62);
    border-radius: 8px;
    padding: 9px 10px;
  }
  #pieceModal .ruleLine {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    align-items: start;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.18);
  }
  #pieceModal .ruleLine:last-child { border-bottom: 0; }
  #pieceModal .ruleLine span {
    color: #5e5344;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
  }
  #pieceModal .ruleLine strong {
    color: #171217;
    font-weight: 600;
    line-height: 1.35;
  }
  #pieceModal .ruleLine.ability strong,
  #pieceModal .ruleLine.abilityType strong { color: #111827; }
  #pieceModal .ruleLine.ability em,
  #pieceModal .ruleLine.abilityType em {
    color: #733a12;
    font-style: normal;
    font-weight: 700;
    margin-right: 4px;
  }
  #pieceModal .ruleLine.ability small {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(0,0,0,0.12);
    color: #5e5344;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .5px;
    vertical-align: 1px;
  }
  #pieceModal .ruleLine.special strong { color: var(--warn); }
  #pieceModal .statBlock {
    order: 5;
    background: rgba(0,0,0,0.26);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    padding: 8px;
    margin-top: 10px;
    display: flex; flex-direction: column; gap: 8px;
  }
  #pieceModal .statRow {
    display: flex; align-items: center; gap: 10px;
    font-size: 11.5px;
  }
  #pieceModal .statBlock .statRow:nth-child(2),
  #pieceModal .statBlock .statRow:nth-child(3) {
    display: none;
  }
  #pieceModal .statRow .label {
    color: var(--muted); min-width: 78px; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .8px;
  }
  #pieceModal .hpRow .hearts {
    display: inline-flex; gap: 2px; font-size: 14px; line-height: 1;
  }
  #pieceModal .hpRow .hearts span { color:#ff6b6b; }
  #pieceModal .hpRow .hp-num { color: var(--muted); font-size: 10.5px; margin-left: 4px; }
  #pieceModal .rangeRow .bar {
    display: inline-flex; gap: 3px;
  }
  #pieceModal .rangeRow .seg {
    width: 14px; height: 8px; border-radius: 2px;
    background: #3a3a45; border: 1px solid #44444f;
  }
  #pieceModal .rangeRow .seg.on { background: var(--accent); border-color: var(--accent); }
  #pieceModal .rangeRow .seg.inf {
    background: linear-gradient(90deg, var(--accent), #aa88ff);
    border-color: var(--accent);
  }
  #pieceModal .rangeRow .rng-text { color: var(--text); font-weight: 600; margin-left: 4px; }

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

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

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

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

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

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

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

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

  /* Claude design integration: scoped to app chrome, start/profile/lab pages and side panels.
     The existing #board/#boardWrap/.sq/.chip implementation above remains the protected board skin. */
  :root {
    --mp-bg-0: #07080b;
    --mp-bg-1: #0b0d12;
    --mp-bg-2: #11141b;
    --mp-bg-3: #181c25;
    --mp-panel: rgba(18, 21, 28, .78);
    --mp-panel-2: rgba(12, 14, 19, .92);
    --mp-gold-1: #d8b15a;
    --mp-gold-2: #c89a3e;
    --mp-gold-3: #8a6a25;
    --mp-gold-glow: rgba(216, 177, 90, .35);
    --mp-teal-1: #6ee7d8;
    --mp-teal-2: #4dd0c4;
    --mp-teal-3: #239b95;
    --mp-teal-glow: rgba(77, 208, 196, .45);
    --mp-parchment: #ece2c8;
    --mp-bone: #e8dec5;
    --mp-ink: #aea58c;
    --mp-ink-dim: #847b65;
    --mp-ink-faint: #4a4537;
    --mp-danger: #c25a4a;
    --mp-serif: "Cinzel", "Cormorant Garamond", Georgia, serif;
    --mp-serif-body: "Cormorant Garamond", Georgia, serif;
    --mp-sans: "Manrope", system-ui, sans-serif;
    --mp-mono: "JetBrains Mono", ui-monospace, monospace;
    --side-nav-width: 280px;
    --rail-size: clamp(104px, 10.5vw, 184px);
    --effect-chip-size: clamp(46px, calc(var(--rail-size) * .48), 72px);
  }

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

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

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

  .modeScreen {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background:
      radial-gradient(ellipse 50% 70% at 75% 50%, rgba(77, 208, 196, .10), transparent 60%),
      radial-gradient(ellipse 70% 100% at 50% 100%, rgba(0, 0, 0, .60), transparent 70%),
      radial-gradient(ellipse 100% 60% at 50% 0%, rgba(0, 0, 0, .50), transparent 60%),
      var(--mp-bg-0);
  }
  body:not(.mode-select) .startTopbar {
    display: none;
  }
  .startPage {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 0 28px;
    padding: 0 64px 80px;
  }
  .startTopbar {
    position: sticky;
    top: 0;
    z-index: 6;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 57px;
    padding: 14px 64px;
    border-bottom: 1px solid rgba(216, 177, 90, .12);
    background: linear-gradient(180deg, rgba(7, 8, 11, .92) 0%, rgba(7, 8, 11, .55) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--mp-ink-dim);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
  }
  .startCrumb span {
    margin: 0 10px;
    color: var(--mp-gold-3);
  }
  .startCrumb strong {
    color: var(--mp-teal-1);
  }
  .startStats {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  /* Nur die direkten Stat-Wrapper als Spalten — NICHT die verschachtelten
     Wallet-Wert-Spans (#walletCurrency/#walletShards), sonst bricht "⬥ 0" um. */
  .startStats > span {
    display: grid;
    gap: 2px;
    justify-items: end;
    color: var(--mp-bone);
    font-family: var(--mp-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .5px;
  }
  .startStats em span { white-space: nowrap; }
  .startStats b {
    color: var(--mp-ink-dim);
    font-family: var(--mp-sans);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .startStats em {
    font-style: normal;
    color: var(--mp-bone);
    font-family: var(--mp-mono);
    font-size: 12.5px;
    letter-spacing: .5px;
  }
  .startStats em.gold { color: var(--mp-gold-1); }
  .startStats em.teal { color: var(--mp-teal-1); }
  .startBackdrop::before,
  .startBackdrop::after {
    display: none;
  }
  .startShard {
    border-radius: 0;
    border-color: rgba(216, 177, 90, .18);
    background: linear-gradient(150deg, rgba(216, 177, 90, .16), transparent 28%), rgba(7, 8, 11, .40);
  }
  .startBoardPreview,
  .previewPiece,
  .startShard {
    display: none !important;
  }

  /* ===== Hero chess board (Claude design parity) ===== */
  .heroBoardStage {
    position: absolute;
    right: -160px;
    top: 50%;
    transform: translateY(-50%);
    width: min(78vw, 980px);
    height: min(78vw, 980px);
    z-index: 1;
    perspective: 2200px;
    perspective-origin: 50% 35%;
    pointer-events: none;
  }
  .heroBoardFrame {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    border: 1px solid var(--mp-gold-2, #c89a3e);
    background:
      linear-gradient(135deg, rgba(240, 210, 131, .17), transparent 24% 76%, rgba(10, 200, 185, .13)),
      linear-gradient(180deg, #1b1820, #0b0f15 68%, #050607);
    transform: rotateX(38deg) rotateZ(-3deg);
    transform-style: preserve-3d;
    box-shadow:
      0 80px 120px -20px rgba(0, 0, 0, .95),
      0 30px 60px -10px rgba(0, 0, 0, .7),
      0 0 0 3px #0a0a0a,
      0 0 0 4px var(--mp-gold-3, #8a6a25),
      inset 0 0 0 1px rgba(216, 177, 90, .55),
      inset 0 0 80px rgba(0, 0, 0, .55);
  }
  .heroBoardOrnament {
    position: absolute;
    z-index: 4;
    width: 8px;
    height: 8px;
    background: var(--mp-gold-1, #d8b15a);
    box-shadow: 0 0 6px rgba(216, 177, 90, .35);
    transform: rotate(45deg);
    pointer-events: none;
  }
  .heroBoardOrnament-tl { top: 2px;    left: 2px; }
  .heroBoardOrnament-tr { top: 2px;    right: 2px; }
  .heroBoardOrnament-bl { bottom: 2px; left: 2px; }
  .heroBoardOrnament-br { bottom: 2px; right: 2px; }
  .heroBoardGrid {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 1px;
    padding: 4px;
    border: 2px solid var(--rift-gold);
    border-radius: 7px;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 50%, rgba(10, 200, 185, .24), transparent 46%),
      linear-gradient(135deg, #c89b3c, #3a2a13 34%, #0a1117 50%, #785a28 77%, #f0d283);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .86),
      0 0 22px rgba(10, 200, 185, .22),
      inset 0 0 0 1px rgba(240, 210, 131, .22),
      inset 0 0 28px rgba(0, 0, 0, .70);
  }
  .heroBoardGrid::before,
  .heroBoardGrid::after {
    content: "";
    position: absolute;
    inset: 4px;
    pointer-events: none;
  }
  .heroBoardGrid::before {
    z-index: 6;
    border: 1px solid rgba(240, 210, 131, .22);
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, .42),
      inset 0 0 32px rgba(0, 0, 0, .46);
  }
  .heroBoardGrid::after {
    z-index: 7;
    opacity: .22;
    background:
      linear-gradient(90deg, transparent calc(50% - 1px), rgba(10, 200, 185, .45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(0deg, transparent calc(50% - 1px), rgba(10, 200, 185, .45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(240, 210, 131, .35) 16% 17%, transparent 18% 100%);
    mix-blend-mode: screen;
  }
  .heroBoardTile {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(circle at 50% 42%, rgba(10, 200, 185, .08), transparent 42%),
      linear-gradient(135deg, rgba(255, 255, 255, .025), transparent 28% 74%, rgba(0, 0, 0, .28)),
      repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 14px),
      var(--dark);
  }
  .heroBoardTile.light {
    background:
      radial-gradient(circle at 48% 44%, rgba(240, 210, 131, .10), transparent 45%),
      linear-gradient(135deg, rgba(255, 255, 255, .05), transparent 30% 70%, rgba(0, 0, 0, .18)),
      repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 13px),
      var(--light);
  }
  .heroBoardTile::after {
    content: "";
    position: absolute;
    inset: 9%;
    border: 1px solid rgba(240, 210, 131, .11);
    opacity: .7;
    pointer-events: none;
    z-index: 1;
  }
  .heroBoardTile.selected {
    box-shadow: inset 0 0 0 1px rgba(77, 208, 196, .7), inset 0 0 24px rgba(77, 208, 196, .3);
  }
  .heroBoardTile.selected::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      radial-gradient(ellipse 70% 70% at 50% 50%, rgba(77, 208, 196, .35), rgba(35, 155, 149, .08) 60%, transparent);
    pointer-events: none;
  }
  .heroBoardTile.target-move::before,
  .heroBoardTile.target-effect::before,
  .heroBoardTile.target-capture::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border: 0;
    border-radius: 0;
    pointer-events: none;
    animation: boardTargetPulse 1.6s ease-in-out infinite;
  }
  .heroBoardTile.target-move::before {
    color: #d8b15a;
    background:
      radial-gradient(circle, rgba(216, 177, 90, .92) 0 8%, rgba(216, 177, 90, .38) 9% 13%, transparent 14%);
  }
  .heroBoardTile.target-effect::before {
    color: #4dd0c4;
    background:
      radial-gradient(circle, rgba(110, 231, 216, .92) 0 8%, rgba(77, 208, 196, .38) 9% 13%, transparent 14%);
  }
  .heroBoardTile.target-capture::before {
    color: #e26a6a;
    background:
      radial-gradient(circle, rgba(226, 106, 106, .92) 0 8%, rgba(194, 90, 74, .40) 9% 13%, transparent 14%);
  }
  .heroBoardCoord {
    position: absolute;
    z-index: 3;
    color: rgba(216, 177, 90, .62);
    font-family: var(--mp-mono, ui-monospace, monospace);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .5px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .80);
    pointer-events: none;
  }
  .heroBoardCoord-rank { top: 3px;   left: 4px; }
  .heroBoardCoord-file { bottom: 3px; right: 4px; }
  .heroBoardTile.light .heroBoardCoord { color: rgba(216, 177, 90, .78); }
  .heroBoardPiece {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  .heroBoardPiece img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    transform: rotateX(-38deg) translateY(-19%) translateZ(8px);
    transform-origin: center bottom;
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .75));
    transition: transform .18s ease, filter .18s ease;
  }
  .heroBoardPiece.highlight img {
    animation: pieceFocusPulse 1.8s ease-in-out infinite;
  }
  /* Angewählte eigene Figur „hochheben" (wie beim echten Spiel). */
  .heroBoardPiece.isLifted img {
    transform: rotateX(-38deg) translateY(-32%) translateZ(38px) scale(1.07);
    filter:
      drop-shadow(0 26px 16px rgba(0, 0, 0, .82))
      drop-shadow(0 0 12px rgba(77, 208, 196, .55));
  }
  /* Original verstecken, solange die fliegende Kopie unterwegs ist. */
  .heroBoardPiece.isMoving { opacity: 0; }
  /* Geschlagene Figur schrumpft/fadet weg, bevor die neue landet. */
  .heroBoardPiece.isCaptured img {
    transform: rotateX(-38deg) translateY(-19%) translateZ(8px) scale(.18);
    opacity: 0;
    transition: transform .26s ease, opacity .26s ease;
  }
  /* Fliegende Figur (Bildschirm-Koordinaten, über allem). */
  .heroFlyPiece {
    position: fixed;
    z-index: 80;
    object-fit: contain;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 18px 13px rgba(0, 0, 0, .82));
  }
  /* Brett spielbar machen: Kacheln klickbar, leere Stellen lassen Klicks durch.
     Der Stage-Container selbst bleibt klick-transparent, damit Text/Buttons der
     Startseite dort, wo sie liegen, weiter erreichbar sind. */
  .heroBoardStage.is-playable .heroBoardTile { pointer-events: auto; cursor: pointer; }
  body.mode-select .startPage { pointer-events: none; }
  body.mode-select .startPage > * { pointer-events: auto; }
  body.mode-select .startHero { pointer-events: none; }
  body.mode-select .startHero .startKicker,
  body.mode-select .startHero .modeChoices,
  body.mode-select .startHero .alphaStrip { pointer-events: auto; }
  .heroBoardCenterRing {
    display: none;
  }
  .heroVignette {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(7, 8, 11, .92) 0%, rgba(7, 8, 11, .55) 30%, transparent 60%),
      radial-gradient(ellipse 50% 70% at 75% 50%, rgba(77, 208, 196, .10), transparent 60%),
      radial-gradient(ellipse 70% 100% at 50% 100%, rgba(0, 0, 0, .60), transparent 70%),
      radial-gradient(ellipse 100% 60% at 50% 0%, rgba(0, 0, 0, .50), transparent 60%);
  }
  @media (max-width: 1500px) {
    .heroBoardStage { width: 860px; height: 860px; right: -180px; }
  }
  @media (max-width: 1200px) {
    .heroBoardStage { width: 700px; height: 700px; right: -200px; opacity: .82; }
  }
  .startHero {
    grid-column: 1;
    justify-self: start;
    /* Hero fuellt den ersten Screen (Viewport minus Topbar) — die Daily-Quests
       darunter werden erst beim Runterscrollen sichtbar. */
    min-height: calc(100vh - 57px);
    width: 100%;
    max-width: 760px;
    padding: 24px 0 60px;
    gap: 0;
    align-content: center;
  }
  .startKicker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    padding: 7px 14px;
    border: 1px solid rgba(77, 208, 196, .30);
    background: rgba(35, 155, 149, .08);
    color: var(--mp-teal-1);
    font-size: 10.5px;
    letter-spacing: 3px;
  }
  .startKicker .kickerSep {
    color: var(--mp-gold-2);
    font-size: 9px;
  }
  .startHero p em {
    color: var(--mp-bone);
    font-style: italic;
    font-weight: 500;
  }
  .alphaStrip .queueChip {
    border-color: rgba(194, 90, 74, .42);
    background: rgba(194, 90, 74, .12);
    color: #e69b8c;
  }
  .alphaStrip .queueChip::before {
    background: #c25a4a;
    box-shadow: 0 0 8px #c25a4a;
  }
  .startKicker .kickerDot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mp-teal-1);
    box-shadow: 0 0 8px var(--mp-teal-1);
    animation: pulseGlow 1.8s ease-in-out infinite;
  }
  .startKicker::before { content: none; }
  .startHero::before { content: none; }
  .heroFlourish {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
  }
  .heroFlourish .line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mp-gold-2));
  }
  .heroFlourish .line.right {
    background: linear-gradient(90deg, var(--mp-gold-2), transparent);
  }
  .heroFlourish .diamond {
    width: 6px;
    height: 6px;
    background: var(--mp-gold-1);
    box-shadow: 0 0 8px rgba(216, 177, 90, .35);
    transform: rotate(45deg);
  }
  .startHero h2,
  .profileHeader h2 {
    font-family: var(--mp-serif);
    color: var(--mp-bone);
    background: linear-gradient(180deg, #f5ebcf, #e8c879 50%, #b88a2f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 4px;
    text-shadow: none;
  }
  .startHero h2 {
    font-size: clamp(56px, 8.4vw, 132px);
    line-height: .95;
    margin-bottom: 12px;
  }
  .startHero h2::after {
    content: "A FANTASY DUEL OF MINDS";
    display: block;
    margin-top: 14px;
    color: var(--mp-teal-2);
    -webkit-text-fill-color: var(--mp-teal-2);
    font-size: .18em;
    font-weight: 400;
    letter-spacing: 12px;
  }
  .startHero p {
    max-width: 580px;
    margin-bottom: 36px;
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 21px;
    line-height: 1.5;
  }
  .modeChoices {
    gap: 14px;
    margin-bottom: 26px;
  }
  .modeChoices button,
  button.primary,
  button.on {
    border-radius: 0;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
  }
  .modeChoices button {
    min-height: 52px;
    padding: 16px 26px;
    border: 1px solid rgba(216, 177, 90, .40);
    background: rgba(18, 21, 28, .70);
    color: var(--mp-bone);
    backdrop-filter: blur(6px);
  }
  .modeChoices button:hover:not(:disabled):not(.primary) {
    border-color: var(--mp-gold-1);
    color: var(--mp-gold-1);
    background: rgba(28, 22, 12, .70);
    box-shadow: 0 0 20px rgba(216, 177, 90, .18);
    transform: none;
  }
  .modeChoices button.primary,
  button.primary,
  button.on {
    color: #0c0e13;
    border-color: #f0d27a;
    background: linear-gradient(180deg, #f0d27a, #d8b15a 40%, #b08530);
    box-shadow: 0 0 30px rgba(216, 177, 90, .25), inset 0 1px 0 rgba(255, 255, 255, .40);
  }
  .modeChoices button:hover:not(:disabled),
  button.primary:hover:not(:disabled),
  button.on:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--mp-gold-1);
    box-shadow: 0 6px 40px rgba(216, 177, 90, .35), inset 0 1px 0 rgba(255, 255, 255, .50);
  }
  .alphaStrip,
  .chips {
    gap: 10px;
  }
  .alphaStrip span {
    padding: 7px 12px;
    border-color: rgba(216, 177, 90, .18);
    background: rgba(18, 21, 28, .60);
    color: var(--mp-ink);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.8px;
    backdrop-filter: blur(4px);
  }
  .alphaStrip span::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--mp-teal-1);
    box-shadow: 0 0 6px var(--mp-teal-1);
    vertical-align: 1px;
  }
  .alphaStrip span:nth-child(2)::before {
    background: var(--mp-gold-1);
    box-shadow: 0 0 6px var(--mp-gold-1);
  }
  .queuePanel {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    position: relative;
    z-index: 5;
    width: 280px;
    margin-bottom: 56px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(216, 177, 90, .25);
    background: var(--mp-panel-2);
    backdrop-filter: blur(8px);
  }
  .queuePanel::before,
  .queuePanel::after,
  .visionGrid article::before,
  .visionGrid article::after,
  .factionPanel::after,
  .profilePanel::before,
  .profilePanel::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid var(--mp-gold-3);
    pointer-events: none;
  }
  .queuePanel::before,
  .visionGrid article::before,
  .profilePanel::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
  }
  .queuePanel::after,
  .visionGrid article::after,
  .factionPanel::after,
  .profilePanel::after {
    right: -1px;
    bottom: -1px;
    border-left: 0;
    border-top: 0;
  }
  .queuePanelHead,
  .queuePanelRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .queuePanelHead {
    margin-bottom: 14px;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .queuePanelHead b {
    padding: 3px 7px;
    border: 1px solid rgba(77, 208, 196, .30);
    background: rgba(77, 208, 196, .12);
    color: var(--mp-teal-1);
    font-family: var(--mp-sans);
    font-size: 9px;
    letter-spacing: 1.5px;
  }
  .queuePanelRow {
    padding: 9px 0;
    border-bottom: 1px dashed rgba(216, 177, 90, .10);
    font-size: 12px;
  }
  .queuePanelRow:last-child {
    border-bottom: 0;
  }
  .queuePanelRow span {
    color: var(--mp-ink-dim);
  }
  .queuePanelRow strong {
    color: var(--mp-bone);
    font-family: var(--mp-mono);
    font-weight: 500;
  }
  .queuePanelRow strong.gold { color: var(--mp-gold-1); }
  .queuePanelRow strong.teal { color: var(--mp-teal-1); }

  .startBand,
  .visionGrid,
  .factionShowcase,
  .roadmapBand,
  .startLobby {
    grid-column: 1 / -1;
  }
  .startBand {
    border-top-color: rgba(216, 177, 90, .08);
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(7, 8, 11, .60), rgba(7, 8, 11, .95));
  }
  .startBandCompact {
    gap: 0;
  }
  .startBandCompact > div {
    border: 1px solid rgba(216, 177, 90, .12);
    background: linear-gradient(180deg, rgba(20, 23, 31, .70), rgba(11, 13, 18, .85));
    padding: 26px 22px 22px;
  }
  .startBand strong,
  .visionGrid h3,
  .factionPanel h3,
  .roadmapBand h3 {
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    letter-spacing: 1px;
  }
  .startBand span,
  .startBand p,
  .visionGrid p,
  .factionPanel p {
    color: var(--mp-ink);
  }
  .visionGrid {
    gap: 16px;
    padding: 0 64px 60px;
    margin: 0 -64px;
    background: linear-gradient(180deg, rgba(7, 8, 11, .60), rgba(7, 8, 11, .95));
  }
  .visionGrid article {
    position: relative;
    min-height: 240px;
    padding: 26px 22px 22px;
    border-color: rgba(216, 177, 90, .12);
    border-radius: 0;
    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;
  }
  .visionGrid article:hover {
    transform: translateY(-3px);
    border-color: rgba(77, 208, 196, .30);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .60), 0 0 30px rgba(77, 208, 196, .08);
  }
  .visionGrid article > span {
    color: var(--mp-gold-2);
    font-family: var(--mp-mono);
    letter-spacing: 2px;
  }
  .visionGrid h3 {
    font-size: 19px;
  }
  .factionShowcase {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    padding: 0 64px 90px;
    margin: 0 -64px;
    background: linear-gradient(180deg, rgba(7, 8, 11, .60), rgba(7, 8, 11, .95));
  }
  .factionShowcase::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 42px;
    height: 1px;
    background: linear-gradient(90deg, rgba(216, 177, 90, .08), rgba(216, 177, 90, .26), rgba(216, 177, 90, .08));
    pointer-events: none;
  }
  .factionPanel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    min-height: 460px;
    padding: 38px 36px 32px;
    border: 1px solid rgba(216, 177, 90, .18);
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  }
  .factionPanel.pirates {
    background:
      radial-gradient(ellipse 60% 80% at 100% 100%, rgba(77, 208, 196, .08), transparent 60%),
      linear-gradient(135deg, #0e151c, #0a1218 60%);
  }
  .factionPanel.pirates:hover {
    border-color: rgba(77, 208, 196, .40);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .70), 0 0 40px rgba(77, 208, 196, .12);
  }
  .factionPanel.undead {
    background:
      radial-gradient(ellipse 60% 80% at 100% 100%, rgba(120, 218, 162, .08), transparent 60%),
      linear-gradient(135deg, #0d130f, #0a0e0c 60%);
  }
  .factionPanel.undead:hover {
    border-color: rgba(120, 218, 162, .40);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .70), 0 0 40px rgba(120, 218, 162, .12);
  }
  .factionPanel::before,
  .factionPanel::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1px solid var(--mp-gold-2, #c89a3e);
    background: none;
    pointer-events: none;
  }
  .factionPanel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .factionPanel::after  { left: auto; bottom: -1px; right: -1px; border-left: none; border-top: none; }

  .factionInner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
  }
  .factionTag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--mp-gold-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
  }
  .factionTag .tagLine {
    width: 26px;
    height: 1px;
    background: var(--mp-gold-3);
  }
  .factionPanel.pirates .factionTag { color: var(--mp-teal-1); }
  .factionPanel.pirates .factionTag .tagLine { background: rgba(77, 208, 196, .40); }
  .factionPanel.undead .factionTag { color: #78daa2; }
  .factionPanel.undead .factionTag .tagLine { background: rgba(120, 218, 162, .40); }

  .factionPanel h3 {
    margin: 0 0 8px;
    font-family: var(--mp-serif);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;
    color: var(--mp-bone);
  }
  .factionEpithet {
    margin: 0 0 24px;
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 17px;
    font-style: italic;
  }
  .factionStats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 4px 0 24px;
    padding: 16px 0;
    border-top: 1px solid rgba(216, 177, 90, .12);
    border-bottom: 1px solid rgba(216, 177, 90, .12);
  }
  .factionStat .label {
    margin-bottom: 6px;
    color: var(--mp-ink-dim);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .factionStat .bar {
    position: relative;
    height: 4px;
    overflow: hidden;
    background: rgba(216, 177, 90, .10);
  }
  .factionStat .bar .fill {
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform: scaleX(var(--stat, .5));
    transition: transform 600ms ease;
  }
  .factionPanel.pirates .factionStat .bar .fill {
    background: linear-gradient(90deg, #239b95, #6ee7d8);
  }
  .factionPanel.undead .factionStat .bar .fill {
    background: linear-gradient(90deg, #2e7d54, #78daa2);
  }
  .factionDesc {
    margin: 0 0 24px;
    max-width: 400px;
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 16px;
    line-height: 1.55;
  }
  .factionPieces {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
  }
  .factionPieceChip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border: 1px solid rgba(216, 177, 90, .15);
    background: rgba(11, 13, 18, .70);
    color: var(--mp-ink);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .factionPieceChip .pieceThumb {
    width: 28px;
    height: 28px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
  }
  .factionCta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(216, 177, 90, .10);
    color: var(--mp-bone);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    transition: color .16s ease;
  }
  .factionCta .arrow {
    color: var(--mp-gold-1);
  }
  .factionPanel.pirates:hover .factionCta { color: var(--mp-teal-1); }
  .factionPanel.undead:hover .factionCta { color: #78daa2; }

  .factionPortrait {
    position: relative;
    z-index: 2;
    align-self: stretch;
    min-height: 380px;
    overflow: hidden;
    border: 1px solid rgba(216, 177, 90, .55);
    background-color: #06080b;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .6),
      inset 0 0 0 1px rgba(216, 177, 90, .12),
      inset 0 0 60px rgba(0, 0, 0, .45);
  }
  .factionPortraitImage {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    transition: background-image .25s ease, background-position .25s ease;
  }
  .factionPortrait::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .75) 100%),
      linear-gradient(90deg, rgba(11, 13, 18, .60), transparent 40%);
    pointer-events: none;
  }
  .factionPortrait::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 6px;
    border: 1px solid rgba(216, 177, 90, .15);
    pointer-events: none;
  }
  .factionPortraitsStack {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: flex;
    gap: 6px;
  }
  .factionPortraitThumb {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(216, 177, 90, .40);
    background-color: #06080b;
    background-size: cover;
    background-position: center top;
    cursor: pointer;
    filter: grayscale(.4) brightness(.7);
    transition: filter .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  .factionPortraitThumb:hover { filter: none; }
  .factionPortraitThumb.active {
    border-color: var(--mp-gold-1);
    filter: none;
    box-shadow: 0 0 12px rgba(216, 177, 90, .35);
  }
  .factionPortraitCaption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
  }
  .factionPortraitCaption .fpName {
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 1.05;
  }
  .factionPortraitCaption .fpRole {
    margin-bottom: 4px;
    color: var(--mp-gold-2);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .factionPortraitCaption .fpRarity {
    padding: 4px 8px;
    border: 1px solid var(--mp-gold-3);
    background: rgba(11, 13, 18, .70);
    color: var(--mp-gold-1);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  @media (max-width: 980px) {
    .factionShowcase { grid-template-columns: 1fr; }
    .factionPanel { grid-template-columns: 1fr; }
    .factionPortrait { min-height: 280px; }
  }
  .roadmapBand {
    padding: 24px 0 0;
    border-top: 1px solid rgba(216, 177, 90, .08);
  }
  .roadmapSteps {
    gap: 12px;
  }
  .roadmapSteps span {
    border-color: rgba(216, 177, 90, .12);
    background: rgba(11, 13, 18, .65);
    color: var(--mp-ink);
    letter-spacing: 1.6px;
  }

  .profilePage {
    width: min(1040px, calc(100vw - var(--side-nav-width) - 64px));
    padding: 82px 0 72px;
  }
  body.mode-profile .modeScreen,
  body.mode-collection .modeScreen,
  body.mode-community .modeScreen,
  body.mode-ranked .modeScreen,
  body.mode-lessons .modeScreen,
  body.mode-puzzle .modeScreen,
  body.mode-messages .modeScreen,
  body.mode-info .modeScreen,
  body.mode-play .modeScreen {
    align-items: stretch;
    justify-content: flex-start;
    /* Smoother, vollflaechiger Teal-/Gold-Ambient-Glow (wie auf der Startseite) -
       nur weiche Radial-Verlaeufe von den BILDSCHIRM-Ecken (kein Glow auf den
       zentrierten Inhalts-Bloecken -> keine harten Kanten). Gold unten-links +
       oben-rechts, Teal oben-rechts. */
    /* Sauberer dunkler Canvas — der sichtbare Gold-/Teal-Glow kommt von der
       heroVignette darueber (sonst doppeltes Gold). */
    background:
      radial-gradient(ellipse 120% 80% at 50% 30%, rgba(13, 18, 24, .30), transparent 72%),
      linear-gradient(160deg, rgba(8, 12, 16, .5) 0%, rgba(7, 8, 11, .88) 100%),
      var(--mp-bg-0);
  }
  body.mode-profile .startTopbar,
  body.mode-collection .startTopbar,
  body.mode-community .startTopbar,
  body.mode-ranked .startTopbar,
  body.mode-lessons .startTopbar,
  body.mode-puzzle .startTopbar,
  body.mode-messages .startTopbar,
  body.mode-info .startTopbar,
  body.mode-play .startTopbar {
    display: flex;
  }
  body.mode-profile .startCrumb strong,
  body.mode-collection .startCrumb strong,
  body.mode-community .startCrumb strong,
  body.mode-ranked .startCrumb strong,
  body.mode-lessons .startCrumb strong,
  body.mode-puzzle .startCrumb strong,
  body.mode-messages .startCrumb strong,
  body.mode-info .startCrumb strong,
  body.mode-play .startCrumb strong {
    font-size: 0;
  }
  /* Codex/Support teilen sich mode-info; der Breadcrumb-Text kommt per JS
     (data-crumb auf dem <strong>). */
  body.mode-info .startCrumb strong::after {
    content: attr(data-crumb);
    color: var(--mp-teal-1);
    font-size: 10.5px;
  }
  body.mode-profile .startCrumb strong::after {
    content: "Profile";
    color: var(--mp-teal-1);
    font-size: 10.5px;
  }
  body.mode-collection .startCrumb strong::after {
    content: "Collection";
    color: var(--mp-teal-1);
    font-size: 10.5px;
  }
  body.mode-community .startCrumb strong::after {
    content: "Community";
    color: var(--mp-teal-1);
    font-size: 10.5px;
  }
  body.mode-play .startCrumb strong::after {
    content: "Play";
    color: var(--mp-teal-1);
    font-size: 10.5px;
  }
  body.mode-lessons .startCrumb strong::after {
    content: "Training";
    color: var(--mp-teal-1);
    font-size: 10.5px;
  }
  body.mode-puzzle .startCrumb strong::after {
    content: "Puzzle";
    color: var(--mp-teal-1);
    font-size: 10.5px;
  }
  body.mode-ranked .startCrumb strong::after {
    content: "Ranked";
    color: var(--mp-teal-1);
    font-size: 10.5px;
  }
  body.mode-messages .startCrumb strong::after {
    content: "Nachrichten";
    color: var(--mp-teal-1);
    font-size: 10.5px;
  }
  body.mode-profile .heroBoardStage,
  body.mode-collection .heroBoardStage,
  body.mode-community .heroBoardStage,
  body.mode-ranked .heroBoardStage,
  body.mode-lessons .heroBoardStage,
  body.mode-puzzle .heroBoardStage,
  body.mode-messages .heroBoardStage,
  body.mode-info .heroBoardStage,
  body.mode-play .heroBoardStage {
    display: none;
  }
  body.mode-profile .heroVignette,
  body.mode-collection .heroVignette,
  body.mode-community .heroVignette,
  body.mode-ranked .heroVignette,
  body.mode-lessons .heroVignette,
  body.mode-puzzle .heroVignette,
  body.mode-messages .heroVignette,
  body.mode-info .heroVignette,
  body.mode-play .heroVignette {
    z-index: 1;
    /* Auf Inhalts-Seiten traegt die heroVignette (oberste sichtbare Ebene) den
       Ambient-Glow — gold am linken Rand (Bildschirm-/Inhalts-Kante neben der
       Sidebar) + teal oben-rechts. Vorher war hier ein schweres Dunkel-Overlay
       (links .95 schwarz), das jeden Gold-Glow darunter ausloeschte. */
    background:
      radial-gradient(ellipse 48% 52% at 1% 100%, rgba(216, 177, 90, .10), transparent 62%),
      radial-gradient(ellipse 56% 58% at 100% 0%, rgba(77, 208, 196, .09), transparent 62%),
      linear-gradient(180deg, rgba(7, 8, 11, 0), rgba(7, 8, 11, .38));
  }
  /* Keine Deko-Backdrops (das schraege Gitter-Parallelogramm) auf den Inhalts-
     seiten - nur der smoothe modeScreen-Glow soll wirken (clean wie Startseite). */
  body.mode-profile .startBackdrop::before,
  body.mode-collection .startBackdrop::before,
  body.mode-community .startBackdrop::before,
  body.mode-ranked .startBackdrop::before,
  body.mode-lessons .startBackdrop::before,
  body.mode-puzzle .startBackdrop::before,
  body.mode-messages .startBackdrop::before,
  body.mode-info .startBackdrop::before,
  body.mode-play .startBackdrop::before,
  body.mode-profile .startBackdrop::after,
  body.mode-collection .startBackdrop::after,
  body.mode-community .startBackdrop::after,
  body.mode-ranked .startBackdrop::after,
  body.mode-lessons .startBackdrop::after,
  body.mode-puzzle .startBackdrop::after,
  body.mode-messages .startBackdrop::after,
  body.mode-info .startBackdrop::after,
  body.mode-play .startBackdrop::after {
    display: none;
  }
  body.mode-profile .profilePage,
  body.mode-collection .collectionPage {
    width: min(1180px, calc(100vw - var(--side-nav-width) - 96px));
    min-height: calc(100vh - 57px);
    padding: clamp(96px, 14vh, 168px) 0 80px 64px;
    gap: clamp(28px, 5vh, 54px);
  }
  body.mode-profile .profileHeader {
    max-width: 760px;
    gap: 0;
  }
  body.mode-profile .profileKicker {
    margin-bottom: 28px;
  }
  .profileHeader h2 {
    font-size: clamp(48px, 7vw, 92px);
  }
  body.mode-profile .profileHeader h2 {
    margin: 0 0 22px;
    font-size: clamp(78px, 8.4vw, 132px);
    line-height: .86;
    letter-spacing: 4px;
  }
  .profileHeader p {
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 19px;
  }
  body.mode-profile .profileHeader p {
    max-width: 680px;
    color: rgba(232, 222, 197, .72);
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.55;
  }
  .profileMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
  }
  .profileMeta span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(216, 177, 90, .18);
    background: rgba(11, 13, 18, .62);
    color: rgba(232, 222, 197, .76);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }
  .profileMeta i {
    width: 6px;
    height: 6px;
    background: var(--mp-teal-1);
    box-shadow: 0 0 8px rgba(77, 208, 196, .64);
    transform: rotate(45deg);
  }
  body.mode-profile .profileGrid {
    max-width: 980px;
    grid-template-columns: minmax(320px, 1fr) minmax(300px, 460px);
    gap: 16px;
  }
  .profilePanel {
    position: relative;
    border-color: rgba(216, 177, 90, .14);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(20, 23, 31, .58), rgba(11, 13, 18, .74));
    box-shadow: 0 16px 36px rgba(0, 0, 0, .24);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  body.mode-profile .profilePanel {
    padding: 22px 20px;
  }
  .profileAvatar {
    border-radius: 0;
    border-color: var(--mp-gold-3);
    background: linear-gradient(135deg, #2a313e, #14171f);
    color: var(--mp-gold-1);
    font-family: var(--mp-serif);
  }
  .profilePanel h3 {
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    letter-spacing: 1px;
  }
  .profilePanel p,
  .profilePanel li,
  .profileFacts dd {
    color: var(--mp-ink);
  }
  .profileFacts dt {
    color: var(--mp-ink-dim);
    letter-spacing: 1.6px;
  }
  body.mode-profile .profileForm input {
    border-color: rgba(77, 208, 196, .24);
    background: rgba(3, 5, 8, .45);
  }
  body.mode-profile .profileForm button.primary,
  body.mode-profile .profileForm button {
    border-radius: 0;
    letter-spacing: 2.4px;
    text-transform: uppercase;
  }

  /* ===== Profil-Redesign: Hero-Band + fuellende Karten-Grid ===== */
  body.mode-profile .profilePage {
    width: min(1440px, calc(100vw - var(--side-nav-width) - 112px));
    margin-inline: auto;
    padding: clamp(80px, 9vh, 124px) clamp(28px, 3vw, 56px) 88px;
  }
  body.mode-profile .profileHeader {
    max-width: none;
    margin-bottom: 2px;
  }
  body.mode-profile .profileGrid {
    max-width: none;
    grid-template-columns: repeat(auto-fit, minmax(336px, 1fr));
    gap: 16px;
    align-items: start;
  }
  body.mode-profile .profileHero {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    padding: 26px 30px;
    border-color: rgba(216, 177, 90, .26);
    background:
      radial-gradient(130% 150% at 0% 0%, rgba(216, 177, 90, .14), transparent 52%),
      radial-gradient(130% 170% at 100% 120%, rgba(77, 208, 196, .10), transparent 55%),
      linear-gradient(180deg, rgba(22, 25, 34, .72), rgba(11, 13, 18, .82));
  }
  .phTop { display: flex; align-items: center; gap: 22px; min-width: 0; }
  .profileAvatar.phAvatar {
    width: 104px;
    height: 104px;
    font-size: 34px;
    box-shadow: 0 0 0 1px rgba(216, 177, 90, .22), 0 16px 32px rgba(0, 0, 0, .42);
  }
  .phIdentity { min-width: 0; display: grid; gap: 7px; }
  .phType {
    color: var(--mp-teal-1, #6ee7d8);
    font-family: var(--mp-mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
  }
  .phName {
    margin: 0;
    color: var(--mp-bone, #e8dec5);
    font-family: var(--mp-serif, Georgia, "Times New Roman", serif);
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: .98;
    letter-spacing: 1px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }
  .phRankRow { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
  .phRankRow[hidden] { display: none; }
  .profileHero .profileBio {
    margin: 4px 0 0;
    max-width: 54ch;
    color: rgba(232, 222, 197, .82);
  }
  .phStats {
    display: flex;
    flex: none;
    border: 1px solid rgba(216, 177, 90, .16);
    background: rgba(3, 5, 8, .42);
  }
  .phStats[hidden] { display: none; }
  .phStat {
    display: grid;
    gap: 5px;
    justify-items: center;
    align-content: center;
    min-width: 96px;
    padding: 16px 22px;
    border-left: 1px solid rgba(216, 177, 90, .12);
  }
  .phStat:first-child { border-left: 0; }
  .phStatValue {
    color: #fff7df;
    font-family: var(--mp-mono, ui-monospace, monospace);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
  }
  .phStatLabel {
    color: var(--mp-ink-dim, #847b65);
    font-family: var(--mp-sans, system-ui, sans-serif);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }

  /* Einheitliche Karten-Header mit Gold-Akzent */
  body.mode-profile .profilePanel:not(.profileHero) > h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(216, 177, 90, .12);
    font-size: 14px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
  }
  body.mode-profile .profilePanel:not(.profileHero) > h3::before {
    content: "";
    flex: none;
    width: 3px;
    height: 15px;
    background: var(--mp-gold-2, #c89a3e);
    box-shadow: 0 0 8px var(--mp-gold-glow, rgba(216, 177, 90, .35));
  }

  /* Account-Karte: Fakten kompakt + Entwickler-Details eingeklappt */
  .profileFacts--account {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 4px;
  }
  .profileDevDetails {
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding-top: 10px;
  }
  .profileDevDetails summary {
    cursor: pointer;
    list-style: none;
    color: var(--mp-ink-dim, #847b65);
    font-family: var(--mp-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
  }
  .profileDevDetails summary::-webkit-details-marker { display: none; }
  .profileDevDetails summary::before { content: "\25B8  "; }
  .profileDevDetails[open] summary::before { content: "\25BE  "; }
  .profileDevDetails .profileFacts { margin-top: 10px; }

  @media (max-width: 820px) {
    body.mode-profile .profileHero {
      grid-template-columns: 1fr;
      align-items: start;
    }
    .phStats { width: 100%; }
    .phStat { flex: 1; min-width: 0; padding: 14px 10px; }
    body.mode-profile .profilePage {
      padding-left: clamp(16px, 4vw, 32px);
      padding-right: clamp(16px, 4vw, 32px);
    }
    .profileFacts--account { grid-template-columns: 1fr; }
  }

  /* ===== Profil — 1:1-Port der Profile-Design-Vorlage (.pf-* aufs bestehende
     Markup gemappt: .profileTopCard=Hero, .ptAvatar=Diamant, .statCard=Tile,
     .profileSidebar .sideWidget=Rail-Card). Markup/JS/Account-Formulare bleiben
     unveraendert; Ambient-Glow von mode-profile (heroVignette). ===== */
  body.mode-profile .profilePage {
    width: min(1280px, calc(100vw - var(--side-nav-width) - 96px));
    margin-inline: auto;
    padding: clamp(64px, 7vh, 96px) clamp(20px, 2.4vw, 40px) 80px;
    gap: 0;
    display: block;
  }

  /* Hero-Band */
  .profileTopCard {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 26px;
    padding: 28px 30px;
    margin-bottom: 8px;
    border: 1px solid rgba(216, 177, 90, .22);
    background:
      radial-gradient(ellipse 60% 140% at 0% 50%, rgba(195, 201, 212, .1), transparent 55%),
      linear-gradient(180deg, rgba(18, 21, 28, .85), rgba(10, 12, 16, .9));
    overflow: hidden;
  }
  .profileTopCard::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.18), transparent),
      radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.12), transparent),
      radial-gradient(1px 1px at 45% 80%, rgba(255,255,255,0.1), transparent),
      radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,0.14), transparent);
  }
  .profileTopCard > * { position: relative; z-index: 1; }
  /* Avatar als Diamant (clip-path -> Initialen UND Bild werden rautenfoermig). */
  .ptAvatar {
    flex: none;
    width: 96px; height: 96px;
    border: 0; border-radius: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background: linear-gradient(135deg, #2a313e, #14171f);
    box-shadow: inset 0 0 0 1.5px var(--mp-gold-2, #c89a3e);
    display: grid; place-items: center;
    font-family: var(--mp-serif, Georgia, serif);
    font-size: 28px; font-weight: 700; letter-spacing: 1px;
    color: var(--mp-gold-1, #d8b15a);
    overflow: hidden;
  }
  .ptAvatar img, .ptAvatar #profileAvatarImg { width: 100%; height: 100%; object-fit: cover; }
  .ptInfo { min-width: 0; flex: 1 1 300px; display: grid; gap: 0; }
  .ptNameRow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
  .ptName {
    margin: 0;
    color: var(--mp-bone, #e8dec5);
    font-family: var(--mp-serif, Georgia, serif);
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1;
    letter-spacing: 1.5px;
    font-weight: 700;
    word-break: break-word;
  }
  .ptRankChip[hidden] { display: none; }
  .ptRankChip .rankBadge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--rank-color, #c3c9d4) 45%, transparent);
    background: color-mix(in srgb, var(--rank-color, #c3c9d4) 8%, transparent);
    font-size: 12px; letter-spacing: 1px; font-weight: 600;
    color: var(--rank-color, #c3c9d4);
  }
  .ptRankChip .rankBadge::before {
    content: "\265B"; font-size: 12px; line-height: 1;
    color: var(--rank-color, #c3c9d4);
  }
  .ptRankChip .rankBadgeRating { font-family: var(--mp-mono, monospace); font-size: 10.5px; color: var(--mp-ink, #aea58c); }
  .ptType {
    margin: 0 0 14px;
    color: var(--mp-teal-2, #4dd0c4);
    font-family: var(--mp-sans, system-ui, sans-serif);
    font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  }
  .ptStatus { margin: 0 0 12px; color: rgba(232, 222, 197, .82); font-family: var(--mp-serif-body, serif); font-size: 15px; }
  .ptMeta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
    color: var(--mp-ink-dim, #847b65);
    font-family: var(--mp-mono, monospace);
    font-size: 12.5px; letter-spacing: .3px;
  }
  .ptMeta b { color: var(--mp-ink, #aea58c); font-weight: 500; }
  .ptDot { display: none; }
  .ptId { color: var(--mp-ink-dim, #847b65); font-size: 11px; overflow-wrap: anywhere; }

  /* Tab-Leiste */
  .profileTabs {
    display: flex; gap: 4px; margin: 8px 0 24px;
    border-bottom: 1px solid rgba(216, 177, 90, .14);
  }
  .profileTab {
    position: relative; appearance: none; border: 0; background: none;
    padding: 14px 20px;
    color: var(--mp-ink-dim, #847b65);
    font-family: var(--mp-sans, system-ui, sans-serif);
    font-size: 11px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
    cursor: pointer; transition: color .16s ease;
  }
  .profileTab:hover { color: var(--mp-ink, #aea58c); }
  .profileTab.is-active { color: var(--mp-teal-1, #6ee7d8); }
  .profileTab.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--mp-teal-2, #4dd0c4);
    box-shadow: 0 0 10px var(--mp-teal-glow, rgba(77,208,196,.45));
  }

  /* Koerper: Main + Rail */
  .profileBody {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
  }
  .profileMain { min-width: 0; display: grid; gap: 20px; }
  .profileTabPanel { display: grid; gap: 20px; }
  .profileTabPanel[hidden] { display: none; }
  .profileSidebar { display: grid; gap: 16px; }
  .profileAnonHint { margin: 0; color: rgba(220, 240, 255, .6); font-size: 13px; line-height: 1.5; }
  .profilePage.is-registered .profileAnonHint { display: none; }
  .profilePage:not(.is-registered) .registeredOnly { display: none; }

  /* Stat-Tiles */
  .statCards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .statCard {
    position: relative; display: grid; gap: 0;
    padding: 18px 18px 16px;
    border: 1px solid rgba(216, 177, 90, .12);
    background: linear-gradient(180deg, rgba(20, 23, 31, .6), rgba(11, 13, 18, .82));
    overflow: hidden;
  }
  .scTop { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
  .scIcon { color: var(--mp-gold-2, #c89a3e); font-size: 12px; display: grid; place-items: center; }
  .scLabel {
    color: var(--mp-ink-dim, #847b65);
    font-family: var(--mp-sans, system-ui, sans-serif);
    font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  }
  .scValue {
    color: var(--mp-bone, #e8dec5);
    font-family: var(--mp-serif, Georgia, serif);
    font-size: 34px; font-weight: 700; line-height: 1; margin-bottom: 8px;
  }
  .statCard:nth-child(2) .scValue, .statCard:nth-child(4) .scValue { color: var(--mp-teal-1, #6ee7d8); }
  .scFoot { color: var(--mp-ink-dim, #847b65); font-family: var(--mp-mono, monospace); font-size: 11px; min-height: 14px; }
  .scBar { height: 4px; margin-top: 12px; background: rgba(216, 177, 90, .1); position: relative; overflow: hidden; }
  .scBar span { display: block; height: 100%; background: linear-gradient(90deg, var(--sc, var(--mp-gold-2, #c89a3e)), color-mix(in srgb, var(--sc, #c89a3e) 60%, #f0d27a)); }

  /* Panels (Letzte Partien / Spielverlauf / Erfolge / Freunde / Account) */
  .profilePanel {
    background: linear-gradient(180deg, rgba(16, 19, 26, .6), rgba(9, 11, 15, .8));
    border: 1px solid rgba(216, 177, 90, .14);
    padding: 20px 22px;
  }
  .profilePanel > h3 {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 16px;
    color: var(--mp-bone, #e8dec5);
    font-family: var(--mp-sans, system-ui, sans-serif);
    font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  }
  .profilePanel > h3::before { content: ""; width: 3px; height: 14px; background: var(--mp-gold-2, #c89a3e); flex-shrink: 0; }
  .profileStatsEmpty {
    margin: 0; padding: 28px 20px; text-align: center;
    font-family: var(--mp-serif-body, serif); font-size: 16px; color: var(--mp-ink-dim, #847b65); line-height: 1.5;
  }

  /* Spielverlauf-Tabelle (chess.com-Vorbild) */
  .gameTable { width: 100%; border-collapse: collapse; font-size: 13px; }
  .gameTable th {
    padding: 6px 10px; text-align: left;
    color: var(--mp-ink-dim, #847b65);
    font-family: var(--mp-sans, system-ui, sans-serif);
    font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .08); white-space: nowrap;
  }
  .gameTable th.gtNumH, .gameTable th.gtScoreH { text-align: center; }
  .gameTable td { padding: 8px 10px; color: var(--mp-bone, #e8dec5); vertical-align: middle; }
  .gtRow { border-bottom: 1px solid rgba(255, 255, 255, .05); }
  .gtRow:hover { background: rgba(255, 255, 255, .03); }
  .gtMode { width: 1%; white-space: nowrap; color: var(--mp-ink-dim); }
  .gtModeIcon { color: var(--mp-gold-1, #d8b15a); margin-right: 6px; }
  .gtModeLabel { font-family: var(--mp-mono, monospace); font-size: 11px; }
  .gtPlayers { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .gtP { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .gtP--me .gtPName { color: #fff7df; font-weight: 700; }
  .gtClr { width: 9px; height: 9px; flex: none; border: 1px solid rgba(0, 0, 0, .6); }
  .gtClr--w { background: #e8dec5; }
  .gtClr--b { background: #20242c; border-color: rgba(255, 255, 255, .3); }
  .gtPName { color: var(--mp-bone, #e8dec5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gtPName[data-username] { cursor: pointer; }
  .gtPName[data-username]:hover { color: var(--mp-teal-1, #6ee7d8); text-decoration: underline; }
  .gtPElo { color: var(--mp-ink-dim, #847b65); font-family: var(--mp-mono, monospace); font-size: 11px; flex: none; }
  .gtScore { width: 1%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .gtNum { display: grid; place-items: center; width: 18px; height: 18px; font-family: var(--mp-mono, monospace); font-size: 12px; font-weight: 700; }
  .gtNum--win { color: #0b0d12; background: #4dd0c4; }
  .gtNum--loss { color: #e8dec5; background: rgba(255, 133, 133, .18); }
  .gtNum--draw { color: var(--mp-ink-dim); background: rgba(255, 255, 255, .06); }
  .gtDelta, .gtMoves, .gtDate { width: 1%; text-align: center; white-space: nowrap; font-family: var(--mp-mono, monospace); }
  .gtDelta { color: var(--mp-ink); }
  .gtRow--win .gtDelta { color: #5fe0d3; }
  .gtRow--loss .gtDelta { color: #ff9b9b; }
  .gtMoves { color: var(--mp-ink); }
  .gtDate { color: var(--mp-ink-dim); }
  @media (max-width: 560px) {
    .gtMode .gtModeLabel, .gtMoves, .gameTable th.gtNumH:nth-of-type(2) { display: none; }
  }

  /* Rail-Cards (Sidebar: Rang / Freunde / Erfolge) */
  .sideWidget {
    background: linear-gradient(180deg, rgba(16, 19, 26, .6), rgba(9, 11, 15, .8));
    border: 1px solid rgba(216, 177, 90, .14);
    padding: 18px 20px;
  }
  .sideWidget > h3 {
    display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
    color: var(--mp-bone, #e8dec5);
    font-family: var(--mp-sans, system-ui, sans-serif);
    font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  }
  .sideWidget > h3::before { content: ""; width: 3px; height: 14px; background: var(--mp-gold-2, #c89a3e); flex-shrink: 0; }
  .sideCount { margin-left: auto; color: var(--mp-ink-dim, #847b65); font-family: var(--mp-mono, monospace); font-size: 11px; font-weight: 400; letter-spacing: 1px; text-transform: none; }
  /* Rang-Widget mit Diamant-Emblem */
  .rankWidget { display: grid; gap: 0; }
  .rwTop { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
  .rwTrophy {
    position: relative; display: grid; place-items: center;
    width: 56px; height: 56px; flex: none; border: 0; background: none;
    color: var(--rank-color, #c3cad4); font-size: 22px;
  }
  .rwTrophy::before {
    content: ""; position: absolute; inset: 0; transform: rotate(45deg);
    border: 1px solid var(--rank-color, #c3cad4);
    background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rank-color, #c3cad4) 20%, transparent), #0a0c11 75%);
    box-shadow: 0 0 16px color-mix(in srgb, var(--rank-color, #c3cad4) 25%, transparent);
  }
  .rwTier { color: var(--rank-color, #c3cad4); font-family: var(--mp-serif, Georgia, serif); font-size: 19px; font-weight: 700; letter-spacing: 1px; }
  .rwSub { color: var(--mp-ink-dim, #847b65); font-family: var(--mp-mono, monospace); font-size: 11px; margin-top: 3px; }
  .rwFoot {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px dashed rgba(216, 177, 90, .14);
    color: var(--mp-ink-dim, #847b65); font-family: var(--mp-serif-body, serif); font-size: 12.5px;
  }
  .friendsWidget { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; }
  .friendWidgetChip {
    display: grid; place-items: center; aspect-ratio: 1;
    border: 1px solid rgba(200, 155, 60, .3); background: rgba(240, 210, 131, .1);
    color: var(--mp-gold-1, #f0d283); font-family: var(--mp-serif, Georgia, serif); font-size: 13px; font-weight: 700;
  }
  .friendWidgetChip[role="button"] { cursor: pointer; transition: border-color .15s ease, transform .12s ease; }
  .friendWidgetChip[role="button"]:hover { border-color: var(--mp-teal-2, #4dd0c4); transform: translateY(-1px); }
  .achvWidget { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .achvWidgetIcon {
    display: grid; place-items: center; aspect-ratio: 1;
    border: 1px solid rgba(216, 177, 90, .12); background: rgba(7, 8, 11, .5);
    font-size: 15px; filter: grayscale(1); opacity: .4;
  }
  .achvWidgetIcon.is-on {
    border-color: rgba(216, 177, 90, .4);
    background: radial-gradient(circle at 50% 40%, rgba(216,177,90,.16), rgba(7,8,11,.5));
    filter: none; opacity: 1;
  }

  @media (max-width: 980px) {
    .profileBody { grid-template-columns: 1fr; }
    .profileSidebar { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .statCards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .profileTopCard { flex-direction: column; align-items: flex-start; text-align: left; }
    .profileTabs { overflow-x: auto; }
    .profileSidebar { grid-template-columns: 1fr; }
  }

  body.mode-lab aside,
  aside {
    border-left-color: rgba(216, 177, 90, .15);
    background: linear-gradient(180deg, rgba(20, 23, 31, .95), rgba(10, 11, 15, .98));
  }
  aside h2,
  .roleHeader,
  .filterRow .label {
    color: var(--mp-ink-dim);
    font-size: 9.5px;
    letter-spacing: 2.2px;
  }
  aside section + section {
    border-top-color: rgba(216, 177, 90, .10);
  }
  .pieceCard {
    border-color: rgba(216, 177, 90, .12);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(20, 23, 31, .70), rgba(11, 13, 18, .85));
  }
  .pieceCard:hover,
  .pieceCard.active {
    border-color: rgba(77, 208, 196, .35);
    background: rgba(15, 28, 30, .50);
  }
  .pieceCard .n,
  .pieceCard .deckTag,
  .pieceCard .abilityStatusMini,
  .pieceCard .abilityFamilyMini {
    color: var(--mp-ink);
  }
  button,
  select,
  input,
  textarea,
  details {
    border-radius: 0;
    border-color: rgba(216, 177, 90, .16);
    background: rgba(11, 13, 18, .82);
    color: var(--mp-parchment);
  }
  button:hover:not(:disabled),
  select:hover:not(:disabled),
  input:focus,
  textarea:focus {
    border-color: rgba(77, 208, 196, .40);
  }
  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(77, 208, 196, .12);
  }

  #gamePanel,
  #moveHistory,
  #pieceInfo,
  .actionStatus,
  #winnerBanner {
    border-radius: 0;
    border-color: rgba(216, 177, 90, .16);
    background: rgba(11, 13, 18, .72);
    color: var(--mp-parchment);
  }
  #gameStatus .phase,
  #moveHistory .historyTitle {
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    letter-spacing: 1px;
  }
  #gameStatus .turn,
  #pieceInfo,
  #captureStatus {
    color: var(--mp-ink);
  }
  .setupSide,
  .statusLegend span,
  .legend i {
    border-radius: 0;
    border-color: rgba(216, 177, 90, .14);
    background: rgba(7, 8, 11, .58);
  }

  .effectRail.left,
  .effectRail.right {
    align-items: stretch;
  }
  .effectRailHeader {
    width: 100%;
    max-width: none;
    min-width: 0;
    border-radius: 0;
    border-color: rgba(216, 177, 90, .18);
    background: var(--mp-panel-2);
  }
  .effectRailHeaderName {
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 12px;
    letter-spacing: 1.2px;
  }
  .effectRailHeaderElo {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
  }
  .effectGroups,
  .effectGroup,
  .effectList {
    align-items: stretch;
  }
  .effectGroups {
    gap: 10px;
  }
  .effectGroup {
    border: 1px solid rgba(216, 177, 90, .10);
    background: rgba(11, 13, 18, .60);
    padding: 8px 8px 10px;
  }
  .effectGroupHeader {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    border-top: 0;
    color: var(--mp-ink-dim);
    font-size: 9.5px;
    letter-spacing: 2px;
  }
  .effectGroupHeader b {
    margin-left: auto;
  }
  .effectList {
    gap: 8px;
  }
  .effectChip {
    width: min(100%, var(--effect-chip-size));
    height: var(--effect-chip-size);
    margin: 0 auto;
    border-radius: 2px;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--effect-tone, var(--mp-teal-2)) 60%, rgba(216, 177, 90, .28));
    background: rgba(7, 8, 11, .70);
  }
  .effectPortrait {
    border-radius: 2px;
  }
  .effectChip:hover {
    border-color: var(--mp-teal-2);
    background: rgba(15, 28, 30, .50);
  }

  body.side-nav-collapsed {
    --side-nav-width: var(--side-nav-collapsed-width);
  }
  body.side-nav-collapsed .sideBrand {
    padding: 14px 8px 18px;
  }
  body.side-nav-collapsed .sideNavList::before {
    display: none;
  }
  body.side-nav-collapsed .sideNavToggle {
    top: 32px;
    right: -14px;
  }

  @media (max-width: 1100px) {
    .startPage {
      grid-template-columns: 1fr;
      width: min(calc(100% - 32px), 900px);
    }
    .queuePanel {
      grid-column: 1;
      grid-row: auto;
      width: min(100%, 420px);
      margin: -36px 0 42px;
    }
    .startStats {
      display: none;
    }
    .visionGrid,
    .factionShowcase,
    .roadmapSteps {
      grid-template-columns: 1fr;
    }
    .factionPanel > * {
      max-width: 74%;
    }
  }

  @media (max-width: 820px) {
    :root {
      --side-nav-width: var(--side-nav-collapsed-width);
    }
    body:not(.side-nav-collapsed) {
      --side-nav-width: var(--side-nav-collapsed-width);
    }
    header.sideNav {
      position: sticky;
      width: auto;
      transform: none;
      transition: none;
      padding: 14px 8px;
      align-items: center;
    }
    header.sideNav .sideBrand {
      justify-content: center;
      padding: 0 0 18px;
    }
    header.sideNav .brandMark {
      width: 30px;
      font-size: 9px;
    }
    header.sideNav .brandBlock,
    header.sideNav .sideSearch,
    header.sideNav #modeBadge,
    header.sideNav .sideUser span:not(.sideAvatar),
    header.sideNav .authPanel,
    header.sideNav .sideUtility,
    header.sideNav .sideNavList::before {
      display: none !important;
    }
    header.sideNav .sideNavList {
      width: 100%;
      padding: 18px 0;
      align-items: center;
    }
    header.sideNav .sideNavList button,
    header.sideNav .sideNavList button:disabled,
    header.sideNav .sideNavList button:hover,
    header.sideNav .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;
      color: transparent !important;
      font-size: 0 !important;
    }
    header.sideNav .sideNavList button .navIcon {
      color: var(--mp-gold-1);
      font-size: 18px;
    }
    header.sideNav .sideNavList button .navLabel {
      display: none !important;
    }
    header.sideNav .sideNavList button::after {
      content: none !important;
      display: none !important;
    }
    header.sideNav .sideFooter {
      width: 100%;
      padding: 0;
      justify-items: center;
    }
    .startPage,
    .profilePage {
      width: min(calc(100% - 32px), 720px);
    }
    .startTopbar {
      padding-top: 12px;
    }
    .startHero {
      min-height: 620px;
      padding-top: 48px;
    }
    .startHero h2 {
      letter-spacing: 2px;
    }
    .startHero h2::after {
      letter-spacing: 6px;
    }
    .startBackdrop::before,
    .startBackdrop::after,
    .startBoardPreview {
      opacity: .34;
      right: -260px;
    }
    .queuePanel {
      margin-top: -82px;
    }
    body.mode-profile .profilePage {
      width: min(calc(100% - 32px), 720px);
      padding: 72px 0 64px;
    }
    body.mode-profile .profileHeader h2 {
      font-size: clamp(54px, 15vw, 86px);
      letter-spacing: 2px;
    }
    body.mode-profile .profileGrid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 560px) {
    .startHero h2 {
      font-size: 46px;
    }
    .startHero p {
      font-size: 18px;
    }
    .modeChoices button {
      width: 100%;
    }
    .factionPanel {
      padding: 28px 22px 24px;
    }
    .factionPanel > * {
      max-width: 100%;
    }
    .factionPanel::before {
      opacity: .28;
    }
  }

  @media (max-width: 820px) {
    :root {
      --side-nav-width: 280px;
    }
    body:not(.side-nav-collapsed) {
      --side-nav-width: 280px;
    }
    body:not(.side-nav-collapsed) header.sideNav {
      position: sticky;
      width: auto;
      transform: none;
      padding: 12px 8px;
      align-items: stretch;
    }
    body:not(.side-nav-collapsed) header.sideNav .sideBrand {
      justify-content: flex-start;
      padding: 22px 14px 18px;
    }
    body:not(.side-nav-collapsed) header.sideNav .brandMark {
      width: 40px;
      font-size: 13px;
    }
    body:not(.side-nav-collapsed) header.sideNav .brandBlock {
      display: grid !important;
    }
    body:not(.side-nav-collapsed) header.sideNav .sideSearch,
    body:not(.side-nav-collapsed) header.sideNav .sideUser,
    body:not(.side-nav-collapsed) header.sideNav .sideUtility {
      display: flex !important;
    }
    body:not(.side-nav-collapsed) header.sideNav #modeBadge {
      display: block !important;
    }
    body:not(.side-nav-collapsed):not(.exposure-dev) header.sideNav .authPanel {
      display: none !important;
    }
    body.exposure-dev:not(.side-nav-collapsed) header.sideNav .authPanel:not([hidden]) {
      display: block !important;
    }
    body:not(.side-nav-collapsed) header.sideNav .sideUser span:not(.sideAvatar) {
      display: inline !important;
    }
    body:not(.side-nav-collapsed) header.sideNav .sideNavList::before {
      display: block !important;
    }
    body:not(.side-nav-collapsed) header.sideNav .sideNavList {
      align-items: stretch;
      padding: 18px 12px;
      margin: 36px 0 0;
    }
    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 {
      width: 100% !important;
      max-width: none !important;
      min-height: 42px;
      display: grid;
      grid-template-columns: 18px 1fr auto;
      justify-content: initial;
      padding: 0 14px !important;
      color: var(--mp-ink) !important;
      font-size: 13.5px !important;
    }
    body:not(.side-nav-collapsed) header.sideNav .sideNavList button .navIcon {
      color: var(--mp-gold-2);
    }
    body:not(.side-nav-collapsed) header.sideNav .sideNavList button .navLabel {
      color: inherit;
      font-size: inherit;
    }
    body:not(.side-nav-collapsed) header.sideNav .sideNavToggle {
      top: 42px;
    }
    body:not(.side-nav-collapsed) header.sideNav .sideFooter {
      width: auto;
      padding: 0 16px 16px;
      justify-items: stretch;
    }
    body.mode-demo,
    body.mode-demo:not(.side-nav-collapsed) {
      --side-nav-width: var(--side-nav-collapsed-width);
      grid-template-columns: var(--side-nav-width) minmax(0, 1fr);
    }
    body.mode-demo main {
      min-width: 0;
    }
    body.mode-demo:not(.side-nav-collapsed) header.sideNav {
      align-items: center;
      padding: 14px 8px;
    }
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .brandBlock,
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideSearch,
    body.mode-demo:not(.side-nav-collapsed) header.sideNav #modeBadge,
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideUser span:not(.sideAvatar),
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .authPanel,
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideUtility,
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideNavList::before {
      display: none !important;
    }
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideBrand,
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideFooter {
      justify-content: center;
      align-items: center;
    }
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .brandMark {
      width: 30px;
      font-size: 9px;
    }
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideNavList {
      width: 100%;
      padding: 18px 0;
      align-items: center;
      margin: 0;
    }
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideNavList button,
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideNavList button:disabled,
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideNavList button:hover,
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .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;
      color: transparent !important;
      font-size: 0 !important;
    }
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideNavList button .navIcon {
      color: var(--mp-gold-1);
      font-size: 18px;
    }
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideNavList button .navLabel,
    body.mode-demo:not(.side-nav-collapsed) header.sideNav .sideNavList button .navBadge {
      display: none !important;
    }
    body.side-nav-collapsed .sideNavToggle {
      top: 70px;
    }
  }

  /* Claude completion pass: navbar symbols, dust, play side panels and board cues. */
  :root {
    --own-rail-size: clamp(240px, 19vw, 280px);
    --enemy-rail-size: clamp(200px, 15vw, 220px);
  }

  body.mode-demo {
    /* EFFEKTIVE Desktop-Brettgroesse (ueberschreibt die fruehere body.mode-demo-
       Regel weiter oben). 100dvh-Reserve muss alles abdecken, was in <main> ueber
       und unter dem Brett liegt: main-Padding (16+16) + gap zum #gamePanel (12) +
       boardWrap-Rahmen (~22) + die im Online-Spiel sichtbare Aufgeben-Zeile.
       Bei nur 68px ragte das Brett auf hohen Screens (1920x1080, 2560x1440) um
       ein paar Pixel ueber den Viewport -> dauerhafter Mini-Scrollbalken. */
    --board-size: max(
      420px,
      calc(min(
        calc(100dvh - 104px),
        calc(100vw - var(--side-nav-width) - 76px - var(--own-rail-size) - var(--enemy-rail-size))
      ) * 0.98)
    );
  }

  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;
  }
  .sq.threatCapture::before {
    background:
      radial-gradient(circle, rgba(226, 106, 106, .60) 0 8%, rgba(194, 90, 74, .24) 9% 13%, transparent 14%);
    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;
  }

  /* 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, .60) 0 8%, rgba(194, 90, 74, .24) 9% 13%, transparent 14%);
    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;
    padding: 50px 64px 32px;
    border-top: 1px solid rgba(216, 177, 90, .08);
    background: linear-gradient(180deg, rgba(7, 8, 11, .60), rgba(7, 8, 11, .95));
  }
  .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;
  }
  .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: 190px;
    }
  }

  @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;
  }
  .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);
  }

  /* 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);
  }
  /* 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 (min-width: 700px) 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 (min-width: 700px) 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; }
  .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;
  }

  /* ====== Responsive ====== */
  @media (max-width: 1240px) {
    .comm-main { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
  }
  @media (max-width: 1040px) {
    .comm-main { grid-template-columns: minmax(0, 1fr); }
    .comm-rail { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
    .comm .rail-stats { flex: 1 1 220px; }
    .comm .chat { flex: 2 1 320px; }
    .comm .chat-body { max-height: 320px; }
    .comm .roadmap-cols { grid-template-columns: 1fr; }
    .comm .mit-grid { grid-template-columns: 1fr; }
    .comm .mit-ways-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 820px) {
    .comm-status { grid-template-columns: 1fr; }
    .comm .cs-cell + .cs-cell { border-left: none; border-top: 1px solid rgba(216, 177, 90, 0.12); }
    .comm .cs-updates { align-items: baseline; text-align: left; border-left: none; border-top: 1px solid rgba(216, 177, 90, 0.12); flex-direction: row; gap: 12px; }
    .comm .cs-updates .lbl { margin-top: 0; }
    .comm-tabs { flex-wrap: wrap; }
  }

  .collectionVault {
    display: block;
    width: 100%;
  }

  .collectionLoading,
  .collectionEmpty {
    padding: 28px;
    color: var(--mp-ink);
    border: 1px dashed rgba(216, 177, 90, .22);
    background: rgba(11, 13, 18, .72);
    font-family: var(--mp-serif-body);
    font-size: 17px;
  }

  .col-root {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    display: grid;
    gap: 0;
    /* Kein eigener Hintergrund/keine Box mehr - der Inhalt sitzt direkt auf der
       Seitentextur; der Teal-/Gold-Glow liegt jetzt vollflaechig auf .modeScreen. */
    color: var(--mp-parchment);
    font-family: var(--mp-sans);
  }

  .col-login-gate {
    position: relative;
    display: grid;
    gap: 18px;
    width: 100%;
    justify-items: start;
    padding: clamp(42px, 7vw, 72px);
    border: 1px solid rgba(216, 177, 90, .18);
    background: linear-gradient(180deg, rgba(18, 21, 28, .92), rgba(7, 8, 11, .96));
  }

  .col-login-gate p {
    max-width: 560px;
    margin: 0;
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 18px;
    line-height: 1.55;
  }

  .col-header {
    position: relative;
    /* Kein Kasten/Panel: kein Rahmen, kein Hintergrund-Panel, keine Eckwinkel.
       Der Kopf sitzt frei auf der Seitentextur, buendig mit dem Inhalt darunter. */
    /* Gleicher oberer Abstand wie der kompakte Kopf -> Titel springt beim
       Tab-Wechsel (Deck <-> Figuren) nicht nach unten. */
    padding: clamp(14px, 2vw, 24px) 2px 20px;
  }

  /* Schlanker Kopf auf Aufgaben-Tabs (Packs/Deckbuilder/Shop): nur Eyebrow + Titel,
     frei auf der Seitentextur - kein Panel/Kasten. */
  .col-header.compact {
    padding: clamp(14px, 2vw, 24px) 2px clamp(12px, 1.6vw, 18px);
  }

  .col-header-bar {
    display: grid;
    gap: 14px;
    justify-items: start;
  }
  /* Titel im kompakten Kopf identisch gross wie im Figuren-Tab (Konsistenz) -
     nur margin auf 0, Groesse/Spacing erbt von .col-title. */
  .col-header.compact .col-title { margin: 0; }

  /* Eckwinkel entfernt - betonten den Kasten-Look. */
  .col-header::before,
  .col-header::after { display: none; }

  .col-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    gap: clamp(28px, 5vw, 64px);
    /* Oben ausrichten: sonst schieben die hoeheren Stat-Kacheln rechts den Titel
       nach unten -> Versatz ggue. den anderen Tabs. */
    align-items: start;
  }

  .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .section-eyebrow .num {
    color: var(--mp-gold-1);
  }

  .section-eyebrow .line {
    width: 42px;
    height: 1px;
    background: rgba(216, 177, 90, .42);
  }

  .col-title {
    margin: 14px 0 14px;
    /* Top-Padding + groesseres line-height: sonst fallen Umlaut-Punkte (Oe in
       GEWOELBE) ueber der Versalhoehe aus der per background-clip:text bemalten
       Verlaufsflaeche und werden transparent/unsichtbar. */
    padding-top: .14em;
    font-family: var(--mp-serif);
    font-size: clamp(48px, 5.4vw, 78px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: 6px;
    background: linear-gradient(180deg, #f3e3b2 0%, #d8b15a 55%, #8a6a25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .col-sub {
    max-width: 680px;
    margin: 0;
    color: rgba(232, 222, 197, .74);
    font-family: var(--mp-serif-body);
    font-size: clamp(18px, 1.35vw, 22px);
    line-height: 1.5;
  }

  .col-acquired {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }

  .acq-dot {
    width: 7px;
    height: 7px;
    background: var(--mp-teal-1);
    box-shadow: 0 0 8px rgba(77, 208, 196, .72);
    transform: rotate(45deg);
  }

  .acq-name { color: var(--mp-bone); }
  .acq-label { color: var(--mp-teal-1); }
  .acq-sep { color: var(--mp-gold-3); }
  .col-acquired.muted .acq-name { color: var(--mp-ink-dim); font-style: normal; }

  .col-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Statistik nur im Figuren-Tab; sonst unsichtbarer Platzhalter, der exakt
     dieselbe Hoehe reserviert -> Tab-Leiste springt beim Wechsel nicht. */
  .col-stats.is-placeholder { visibility: hidden; }

  .col-stat {
    min-height: 118px;
    padding: 14px;
    border: 1px solid rgba(216, 177, 90, .14);
    background: linear-gradient(180deg, rgba(18, 21, 28, .72), rgba(8, 10, 14, .88));
  }

  .cs-k {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }

  .cs-v {
    margin: 7px 0 10px;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 24px;
    line-height: 1;
  }

  .cs-v b { color: var(--mp-gold-1); font-weight: 700; }
  .cs-v.teal b { color: var(--mp-teal-1); }
  .cs-v.gold b { color: var(--mp-gold-1); }
  .cs-v .sep { color: var(--mp-ink-faint); margin: 0 4px; }

  .completion-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }

  .cb-track {
    height: 6px;
    overflow: hidden;
    background: rgba(216, 177, 90, .10);
    border: 1px solid rgba(216, 177, 90, .12);
  }

  .cb-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mp-gold-3), var(--mp-gold-1));
    box-shadow: 0 0 8px var(--mp-gold-glow);
  }

  .completion-bar.tone-teal .cb-fill {
    background: linear-gradient(90deg, var(--mp-teal-3), var(--mp-teal-1));
    box-shadow: 0 0 8px var(--mp-teal-glow);
  }

  .completion-bar.tone-moss .cb-fill {
    background: linear-gradient(90deg, #2e7d54, var(--moss-1));
    box-shadow: 0 0 8px var(--moss-glow);
  }

  .cb-meta {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 700;
  }

  .cb-num { color: var(--mp-bone); }
  .cb-sep { color: var(--mp-ink-faint); margin: 0 2px; }

  .cs-row,
  .cs-decks,
  .cs-sigils {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .cs-legend {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(216, 177, 90, .34);
    background: rgba(7, 8, 11, .72) center top / cover no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
  }

  .cs-legend.locked {
    filter: grayscale(1) brightness(.35);
    border-style: dashed;
  }

  .cs-sigil,
  .cs-deck {
    width: 9px;
    height: 9px;
    border: 1px solid rgba(216, 177, 90, .18);
    background: rgba(7, 8, 11, .74);
    transform: rotate(45deg);
  }

  .cs-sigil.on,
  .cs-deck.active {
    background: var(--mp-teal-1);
    border-color: var(--mp-teal-1);
    box-shadow: 0 0 8px rgba(77, 208, 196, .62);
  }
  /* Legendaeren-Marken in Gold (tuerkis bleibt fuer "aktiv" reserviert). */
  .cs-sigil.gold.on {
    background: var(--mp-gold-1);
    border-color: var(--mp-gold-1);
    box-shadow: 0 0 8px var(--mp-gold-glow);
  }

  /* Einheit (%) klein neben der Kennzahl. */
  .cs-v .cs-unit {
    margin-left: 2px;
    color: var(--mp-ink-dim);
    font-family: var(--mp-serif);
    font-size: 15px;
  }

  /* Erklaerende Kleinzeile unter einer Kennzahl. */
  .cs-note {
    color: var(--mp-ink-faint);
    font-family: var(--mp-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* Tableiste im Community-Stil (.comm-tab): transparente Tabs, aktiver Tab mit
     weicher Gold-Fuellung + leuchtender Unterstrich-Leiste. */
  .collection-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(216, 177, 90, .12);
  }

  .collection-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px 13px;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: var(--mp-ink-dim);
    font-family: var(--mp-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    transition: color .16s ease, background .16s ease;
  }

  /* Roemische Zahl lebt jetzt am Tab (nummeriert die Bereiche) - nicht mehr
     redundant im Seitenkopf. */
  .collection-tab .ct-num {
    font-family: var(--mp-mono);
    color: var(--mp-ink-faint);
    font-size: 11px;
    letter-spacing: 0;
  }
  .collection-tab .ct-label { letter-spacing: 2.5px; }

  .collection-tab:not(.soon):hover { color: var(--mp-bone); }

  .collection-tab.on {
    color: var(--mp-gold-1);
    background: linear-gradient(180deg, rgba(216, 177, 90, .14), transparent);
    border-color: rgba(216, 177, 90, .45);
  }
  .collection-tab.on::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--mp-gold-1);
    box-shadow: 0 0 10px rgba(216, 177, 90, .45);
  }
  .collection-tab.on .ct-num { color: var(--mp-gold-1); }

  .collection-tab.soon {
    cursor: default;
    opacity: .54;
  }

  .col-section {
    padding: clamp(34px, 4.5vw, 54px) 0 0;
  }

  .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 28px;
  }

  .section-head .left {
    max-width: 640px;
  }

  .section-title {
    margin: 12px 0 8px;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1;
    letter-spacing: 2px;
  }

  .section-desc {
    margin: 0;
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 17px;
    line-height: 1.45;
  }

  .btn.btn-primary,
  .btn.btn-ghost,
  .soon-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(216, 177, 90, .24);
    background: rgba(18, 21, 28, .72);
    color: var(--mp-bone);
    font-family: var(--mp-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .btn.btn-primary {
    color: #0c0e13;
    border-color: var(--mp-gold-3);
    background: linear-gradient(180deg, var(--mp-gold-1), var(--mp-gold-2));
  }

  .soon-control:disabled,
  .btn:disabled {
    cursor: default;
    opacity: .58;
  }

  .faction-rail {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 4px 2px 14px;
    margin-bottom: 22px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 177, 90, .35) transparent;
    border-bottom: 1px solid rgba(216, 177, 90, .12);
  }

  .frail-div {
    flex: 0 0 auto;
    width: 1px;
    margin: 4px 2px;
    background: rgba(216, 177, 90, .14);
  }

  .frail-tab {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 11px;
    min-height: 54px;
    padding: 10px 16px 10px 13px;
    border: 1px solid rgba(216, 177, 90, .14);
    background: linear-gradient(180deg, rgba(20, 23, 31, .60), rgba(11, 13, 18, .85));
    text-align: left;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
  }

  .frail-tab:not(.upcoming):hover {
    transform: translateY(-1px);
    border-color: rgba(216, 177, 90, .40);
  }

  .frail-tab.on {
    border-color: var(--mp-gold-1);
    background: linear-gradient(180deg, rgba(216, 177, 90, .14), rgba(216, 177, 90, .04));
    box-shadow: 0 0 0 1px rgba(216, 177, 90, .25), 0 6px 20px rgba(0, 0, 0, .40);
  }

  .frt-crest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(216, 177, 90, .25);
    background: rgba(7, 8, 11, .50);
    color: var(--mp-gold-1);
    font-size: 19px;
    line-height: 1;
  }

  .frail-tab.tone-teal .frt-crest { color: var(--mp-teal-1); border-color: rgba(77, 208, 196, .30); }
  .frail-tab.tone-moss .frt-crest { color: var(--moss-1); border-color: rgba(120, 218, 162, .30); }

  .frt-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }

  .frt-name {
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
  }

  .frt-sub {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10px;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .frail-tab.upcoming {
    cursor: default;
    opacity: .58;
    border-style: dashed;
  }

  .frt-lock {
    color: var(--mp-ink-faint);
    font-size: 13px;
  }

  .faction-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }

  .foc {
    position: relative;
    display: flex;
    min-height: 294px;
    flex-direction: column;
    gap: 12px;
    padding: 20px 20px 18px;
    overflow: hidden;
    border: 1px solid rgba(216, 177, 90, .16);
    background: linear-gradient(180deg, rgba(20, 23, 31, .92), rgba(11, 13, 18, .98));
    text-align: left;
    transition: transform .18s ease, border-color .20s ease, box-shadow .22s ease;
  }

  .foc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 0% 0%, var(--foc-glow, transparent), transparent 60%);
    opacity: .55;
    pointer-events: none;
  }

  .foc.tone-teal { --foc-glow: rgba(77, 208, 196, .08); }
  .foc.tone-moss { --foc-glow: rgba(120, 218, 162, .08); }
  .foc.tone-gold { --foc-glow: rgba(216, 177, 90, .08); }

  .foc:not(.upcoming):hover {
    transform: translateY(-3px);
    border-color: rgba(216, 177, 90, .45);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .60);
  }

  .foc-corner,
  .pcard-corner,
  .piece-detail-corner {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 1px solid var(--mp-gold-2);
    opacity: .52;
    z-index: 2;
    pointer-events: none;
  }

  .foc-corner.tl,
  .pcard-corner.tl,
  .piece-detail-corner.tl { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
  .foc-corner.tr,
  .pcard-corner.tr,
  .piece-detail-corner.tr { top: 5px; right: 5px; border-left: 0; border-bottom: 0; }
  .foc-corner.bl,
  .pcard-corner.bl,
  .piece-detail-corner.bl { bottom: 5px; left: 5px; border-right: 0; border-top: 0; }
  .foc-corner.br,
  .pcard-corner.br,
  .piece-detail-corner.br { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }

  .foc-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .foc-crest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(216, 177, 90, .30);
    background: rgba(7, 8, 11, .55);
    color: var(--mp-gold-1);
    font-size: 29px;
    line-height: 1;
  }

  .foc.tone-teal .foc-crest { color: var(--mp-teal-1); border-color: rgba(77, 208, 196, .40); box-shadow: inset 0 0 18px rgba(77, 208, 196, .12); }
  .foc.tone-moss .foc-crest { color: var(--moss-1); border-color: rgba(120, 218, 162, .40); box-shadow: inset 0 0 18px rgba(120, 218, 162, .12); }

  .foc-title {
    min-width: 0;
  }

  .foc-name {
    margin-bottom: 5px;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 4px;
  }

  .foc-sub {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }

  .foc.tone-teal .foc-sub { color: var(--mp-teal-2); }
  .foc.tone-moss .foc-sub { color: var(--moss-1); }

  .foc-blurb {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.45;
  }

  .foc-thumbs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .foc-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 1px solid rgba(216, 177, 90, .12);
    background: rgba(7, 8, 11, .55);
  }

  .collectionThumbArt {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .60));
  }

  .foc-thumb.locked {
    border-style: dashed;
  }

  .foc-thumb.locked img {
    filter: grayscale(1) brightness(.30);
  }

  .foc-stat {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: auto;
  }

  .foc-stat-top,
  .foc-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .foc-stat-top .k,
  .foc-mini {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .foc-stat-top .v {
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 17px;
  }

  .foc-stat-top .v b,
  .foc-mini b {
    color: var(--mp-gold-1);
  }

  .foc-foot {
    position: relative;
    z-index: 1;
    padding-top: 12px;
    border-top: 1px solid rgba(216, 177, 90, .10);
  }

  .foc-open {
    color: var(--mp-gold-1);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .foc.upcoming {
    cursor: default;
    opacity: .82;
    border-style: dashed;
  }

  .foc.upcoming .foc-crest {
    color: var(--mp-ink-faint);
    border-style: dashed;
    box-shadow: none;
  }

  .foc.upcoming .foc-name {
    color: var(--mp-ink-dim);
  }

  .foc-upcoming-foot {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(216, 177, 90, .08);
  }

  .foc-eta {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
  }

  .faction-detail-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
  }

  .fdb-back {
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(216, 177, 90, .20);
    background: rgba(18, 21, 28, .80);
    color: var(--mp-bone);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .fdb-back:hover {
    color: var(--mp-gold-1);
    border-color: var(--mp-gold-2);
  }

  .fdb-rarity {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .fdb-label {
    color: var(--mp-ink-dim);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
  }

  .seg {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid rgba(216, 177, 90, .16);
    background: rgba(18, 21, 28, .80);
  }

  .seg-btn {
    min-height: 32px;
    padding: 0 12px;
    color: var(--mp-ink);
    border-right: 1px solid rgba(216, 177, 90, .10);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .seg-btn:last-child {
    border-right: 0;
  }

  .seg-btn.on {
    position: relative;
    z-index: 1;
    color: var(--mp-gold-1);
    background: rgba(216, 177, 90, .14);
    /* Voller Rahmen auf allen 4 Seiten (Inset -> wird vom overflow:hidden des
       Containers nicht abgeschnitten, auch beim aeussersten rechten Button). */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 62%, transparent);
  }

  .seg-btn.rarity-tone-common.on { color: var(--rarity-common); background: rgba(160, 148, 116, .18); }
  .seg-btn.rarity-tone-rare.on { color: var(--rarity-rare); background: rgba(110, 231, 216, .14); }
  .seg-btn.rarity-tone-epic.on { color: var(--rarity-epic); background: rgba(184, 124, 232, .14); }
  .seg-btn.rarity-tone-legendary.on { color: var(--rarity-legendary); background: rgba(216, 177, 90, .18); }

  .col-faction {
    display: grid;
    gap: 22px;
  }

  .col-faction-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    gap: 24px;
    align-items: end;
    padding: 18px 0;
    border-top: 1px solid rgba(216, 177, 90, .10);
    border-bottom: 1px solid rgba(216, 177, 90, .10);
  }

  .cfh-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--mp-teal-1);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }

  .col-faction-zombie .cfh-tag { color: var(--moss-1); }

  .cfh-tag .line {
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: .45;
  }

  .cfh-name {
    margin: 8px 0 0;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: clamp(34px, 5vw, 64px);
    line-height: .92;
    letter-spacing: 4px;
  }

  .cfh-crest {
    color: var(--mp-gold-1);
  }

  .col-faction-pirate .cfh-crest { color: var(--mp-teal-1); }
  .col-faction-zombie .cfh-crest { color: var(--moss-1); }

  .cfh-right {
    display: grid;
    gap: 8px;
  }

  .cfh-stat {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .cfh-stat .v {
    color: var(--mp-bone);
  }

  .cfh-stat b {
    color: var(--mp-gold-1);
  }

  .roster-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 16px;
    align-items: start;
  }

  .pcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
  }

  .pcard {
    position: relative;
    display: flex;
    min-height: 292px;
    flex-direction: column;
    overflow: hidden;
    padding: 13px;
    border: 1px solid rgba(216, 177, 90, .16);
    background: linear-gradient(180deg, rgba(20, 23, 31, .92), rgba(11, 13, 18, .98));
    text-align: left;
    transition: transform .18s ease, border-color .20s ease, box-shadow .22s ease;
  }

  .pcard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 45% at 50% 8%, var(--rgl, transparent), transparent 70%);
    opacity: .32;
    pointer-events: none;
  }

  .pcard:hover {
    transform: translateY(-2px);
    border-color: rgba(216, 177, 90, .40);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .60);
  }

  .pcard.selected {
    border-color: var(--mp-gold-1);
    box-shadow: 0 0 0 1px rgba(216, 177, 90, .72), 0 12px 36px rgba(0, 0, 0, .70);
  }

  .pcard.rarity-common { --rgl: var(--rarity-common-glow); }
  .pcard.rarity-rare { --rgl: var(--rarity-rare-glow); }
  .pcard.rarity-epic { --rgl: var(--rarity-epic-glow); border-color: rgba(184, 124, 232, .25); }
  .pcard.rarity-legendary { --rgl: var(--rarity-legendary-glow); border-color: rgba(216, 177, 90, .28); }

  .pcard.locked {
    border-style: dashed;
    background: linear-gradient(180deg, rgba(15, 17, 22, .95), rgba(7, 8, 11, .98));
  }

  .pcard.rarity-legendary .pcard-corner { border-color: var(--mp-gold-1); opacity: .70; }
  .pcard.rarity-epic .pcard-corner { border-color: var(--rarity-epic); opacity: .60; }

  .pcard-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
  }

  .pcard-role {
    color: var(--mp-gold-1);
    font-family: var(--mp-serif);
    font-size: 18px;
  }

  .pcard.rarity-rare .pcard-role { color: var(--rarity-rare); }
  .pcard.rarity-epic .pcard-role { color: var(--rarity-epic); }
  .pcard.locked .pcard-role { color: var(--mp-ink-faint); }

  .pcard-id {
    color: var(--mp-ink-faint);
    font-family: var(--mp-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
  }

  .pcard-image {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 1;
    min-height: 150px;
    place-items: center;
    padding: 10px 0 8px;
  }

  .collectionPieceArt {
    max-width: 92%;
    max-height: 154px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .70));
    transition: transform .18s ease;
  }

  .pcard:hover .collectionPieceArt {
    transform: translateY(-2px) scale(1.04);
  }

  .pcard.rarity-legendary .collectionPieceArt {
    filter: drop-shadow(0 0 16px var(--rarity-legendary-glow)) drop-shadow(0 4px 10px rgba(0, 0, 0, .70));
  }

  .pcard.rarity-epic .collectionPieceArt {
    filter: drop-shadow(0 0 14px var(--rarity-epic-glow)) drop-shadow(0 4px 10px rgba(0, 0, 0, .70));
  }

  .pcard.locked .collectionPieceArt {
    filter: grayscale(1) brightness(.35);
  }

  .pcard-lock {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 8px;
    color: var(--mp-ink-faint);
    background: radial-gradient(ellipse 55% 46% at 50% 50%, rgba(7, 8, 11, .72), transparent 70%);
  }

  .pcard-lock .lock-glyph {
    font-size: 28px;
  }

  .pcard-lock .lock-text {
    font-family: var(--mp-mono);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .pcard-meta {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 4px 2px 8px;
  }

  .pcard-name {
    overflow: hidden;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pcard-role-line {
    margin-top: 5px;
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }

  .pcard-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(216, 177, 90, .10);
  }

  .rarity-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(216, 177, 90, .16);
    background: rgba(7, 8, 11, .54);
    color: var(--mp-ink);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }

  .rarity-chip.small {
    min-height: 21px;
    padding: 0 7px;
    font-size: 8.5px;
  }

  .rc-dot {
    width: 6px;
    height: 6px;
    background: currentColor;
    transform: rotate(45deg);
  }

  .rarity-chip.rarity-common { color: var(--rarity-common); border-color: rgba(160, 148, 116, .24); }
  .rarity-chip.rarity-rare { color: var(--rarity-rare); border-color: rgba(110, 231, 216, .28); }
  .rarity-chip.rarity-epic { color: var(--rarity-epic); border-color: rgba(184, 124, 232, .30); }
  .rarity-chip.rarity-legendary { color: var(--rarity-legendary); border-color: rgba(216, 177, 90, .36); }

  .pcard-owned,
  .pcard-cost {
    color: var(--mp-bone);
    font-family: var(--mp-mono);
    font-size: 12px;
    font-weight: 800;
  }

  .pcard-owned .x {
    color: var(--mp-ink-dim);
    margin-right: 2px;
  }

  .pcard-owned .max,
  .pcard-cost .max {
    color: var(--mp-ink-faint);
    margin-left: 1px;
  }

  .roster-empty {
    grid-column: 1 / -1;
    padding: 40px;
    color: var(--mp-ink-dim);
    border: 1px dashed rgba(216, 177, 90, .18);
    font-family: var(--mp-serif-body);
    font-size: 16px;
    font-style: italic;
    text-align: center;
  }

  .piece-detail-panel {
    position: sticky;
    top: 84px;
    overflow: hidden;
    border: 1px solid rgba(216, 177, 90, .18);
    background: linear-gradient(180deg, rgba(20, 23, 31, .94), rgba(8, 10, 14, .98));
  }

  .piece-detail-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 74% 34% at 50% 0%, var(--detail-glow, rgba(216, 177, 90, .12)), transparent 70%);
    pointer-events: none;
  }

  .piece-detail-panel.rarity-common { --detail-glow: var(--rarity-common-glow); }
  .piece-detail-panel.rarity-rare { --detail-glow: var(--rarity-rare-glow); }
  .piece-detail-panel.rarity-epic { --detail-glow: var(--rarity-epic-glow); border-color: rgba(184, 124, 232, .25); }
  .piece-detail-panel.rarity-legendary { --detail-glow: var(--rarity-legendary-glow); border-color: rgba(216, 177, 90, .34); }

  .piece-detail-hero {
    position: relative;
    display: grid;
    min-height: 210px;
    place-items: center;
    overflow: hidden;
    background:
      radial-gradient(ellipse 60% 45% at 50% 34%, rgba(216, 177, 90, .12), transparent 72%),
      rgba(7, 8, 11, .50);
  }

  .piece-detail-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 55%;
    background: linear-gradient(180deg, transparent, rgba(8, 10, 14, .96));
  }

  .piece-detail-portrait {
    position: relative;
    z-index: 1;
    max-width: 98%;
    max-height: 260px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .75));
  }

  .piece-detail-crest {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(216, 177, 90, .28);
    background: rgba(7, 8, 11, .78);
    color: var(--mp-gold-1);
    font-size: 22px;
  }
  /* Fraktions-Crest in Fraktionsfarbe (wie Packs/Reveal) statt immer Gold. */
  .piece-detail-panel.tone-teal .piece-detail-crest { color: var(--mp-teal-1); border-color: rgba(77, 208, 196, .42); }
  .piece-detail-panel.tone-moss .piece-detail-crest { color: var(--moss-1); border-color: rgba(120, 218, 162, .42); }

  .piece-detail-body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    padding: 18px;
  }

  .piece-detail-kicker {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }

  .piece-detail-body h3 {
    margin: 0;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 30px;
    line-height: 1;
    letter-spacing: 1.6px;
  }

  .piece-detail-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .piece-detail-count {
    color: var(--mp-bone);
    font-family: var(--mp-mono);
    font-size: 13px;
    font-weight: 800;
  }

  .piece-detail-count span {
    color: var(--mp-ink-faint);
  }

  .piece-detail-body > p,
  .piece-effect-box p {
    margin: 0;
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 15px;
    line-height: 1.45;
  }

  .piece-effect-box {
    display: grid;
    gap: 5px;
    padding: 11px 12px;
    border-left: 2px solid var(--mp-teal-2);
    background: rgba(77, 208, 196, .06);
  }

  .piece-effect-box span {
    color: var(--mp-teal-1);
    font-family: var(--mp-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
  }

  .piece-effect-box strong {
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 18px;
    letter-spacing: 1px;
  }

  .piece-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
  }

  .piece-detail-empty {
    padding: 24px;
    color: var(--mp-ink-dim);
    font-family: var(--mp-serif-body);
    font-style: italic;
  }

  .shop-soon-panel {
    padding-bottom: 16px;
  }

  .soon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .soon-grid article {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px dashed rgba(216, 177, 90, .20);
    background: linear-gradient(180deg, rgba(20, 23, 31, .72), rgba(8, 10, 14, .88));
  }

  .soon-grid span {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
  }

  .soon-grid strong {
    color: var(--mp-gold-1);
    font-family: var(--mp-serif);
    font-size: 24px;
    letter-spacing: 1.6px;
  }

  .soon-grid p {
    margin: 0;
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 15px;
  }

  @media (max-width: 1180px) {
    body.mode-collection .collectionPage,
    body.side-nav-collapsed.mode-collection .collectionPage {
      width: min(100%, calc(100vw - var(--side-nav-width) - 32px));
      padding-left: 24px;
      padding-right: 16px;
    }

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

    .col-header-inner {
      grid-template-columns: 1fr;
    }

    .col-stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .roster-layout {
      grid-template-columns: 1fr;
    }

    .piece-detail-panel {
      position: relative;
      top: auto;
    }
  }

  @media (max-width: 820px) {
    body.mode-collection .collectionPage,
    body.side-nav-collapsed.mode-collection .collectionPage,
    body.mode-community .communityPage,
    body.side-nav-collapsed.mode-community .communityPage,
    body.mode-lessons .lessonsPage,
    body.side-nav-collapsed.mode-lessons .lessonsPage,
    body.mode-puzzle .puzzlePage,
    body.side-nav-collapsed.mode-puzzle .puzzlePage,
    body.mode-messages .messagesPage,
    body.side-nav-collapsed.mode-messages .messagesPage,
    body.mode-info .infoPage,
    body.side-nav-collapsed.mode-info .infoPage,
    body.mode-play .playPage,
    body.side-nav-collapsed.mode-play .playPage {
      width: calc(100vw - var(--side-nav-collapsed-width) - 18px);
      padding: 64px 10px 60px 10px;
    }

    .roadmap-grid {
      grid-template-columns: 1fr;
    }

    .col-header {
      padding: clamp(14px, 2vw, 24px) 22px 26px;
    }

    .col-stats,
    .soon-grid {
      grid-template-columns: 1fr 1fr;
    }

    /* Mobil keinen leeren Platzhalter reservieren (Versatz dort unkritisch). */
    .col-stats.is-placeholder { display: none; }

    .section-head,
    .faction-detail-bar,
    .col-faction-head {
      align-items: flex-start;
      grid-template-columns: 1fr;
    }

    .fdb-rarity {
      width: 100%;
      align-items: flex-start;
      flex-direction: column;
    }

    .seg {
      width: 100%;
      overflow-x: auto;
    }

    .faction-overview-grid,
    .pcard-grid {
      grid-template-columns: 1fr;
    }
  }

  .col-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .collection-message {
    margin: 14px 0;
    padding: 12px 15px;
    border: 1px solid rgba(216, 177, 90, .22);
    background: rgba(20, 23, 31, .86);
    color: var(--mp-bone);
    font-family: var(--mp-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .collection-message.ok {
    border-color: rgba(120, 218, 162, .34);
    color: var(--moss-1);
  }

  .collection-message.error {
    border-color: rgba(210, 86, 72, .46);
    color: #ff9587;
  }

  .grant-pill {
    align-self: center;
    padding: 8px 12px;
    border: 1px solid rgba(120, 218, 162, .34);
    background: rgba(120, 218, 162, .08);
    color: var(--moss-1);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .grant-pill.muted {
    border-color: rgba(216, 177, 90, .18);
    background: rgba(20, 23, 31, .70);
    color: var(--mp-ink-dim);
  }

  /* Packs sind ein kleiner, fester Satz (eine Karte je Fraktion). auto-fit + 1fr
     hat sie ueber die halbe Seite gestreckt -> jetzt feste, ruhige Kartenbreite
     und zentriert, statt breite Banner. */
  .pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 340px));
    justify-content: center;
    gap: 18px;
  }

  .pack-card {
    --fac: var(--mp-gold-1);
    --fac-strong: #f0d283;
    --fac-deep: #6e5320;
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--fac) 32%, transparent);
    background: linear-gradient(180deg, rgba(20, 23, 31, .92), rgba(8, 10, 14, .98));
    transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
  }
  /* Jede Fraktion hat ihr eigenes Farb-Thema -> Packs sind klar unterscheidbar.
     Piraten = Cyan/Tuerkis, Untote = Giftgruen. */
  .pack-card.tone-teal { --fac: #45cfc3; --fac-strong: #62e7db; --fac-deep: #0f4f4a; }
  .pack-card.tone-moss { --fac: #5cd49a; --fac-strong: #46e7a6; --fac-deep: #125938; }
  .pack-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--fac) 62%, transparent);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 34px color-mix(in srgb, var(--fac) 26%, transparent);
  }

  .pack-corner,
  .dcard-corner {
    position: absolute;
    z-index: 3;
    width: 10px;
    height: 10px;
    border: 1px solid var(--mp-gold-2);
    opacity: .58;
    pointer-events: none;
  }

  .pack-corner.tl,
  .dcard-corner.tl { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
  .pack-corner.tr,
  .dcard-corner.tr { top: 5px; right: 5px; border-left: 0; border-bottom: 0; }
  .pack-corner.bl,
  .dcard-corner.bl { bottom: 5px; left: 5px; border-right: 0; border-top: 0; }
  .pack-corner.br,
  .dcard-corner.br { right: 5px; bottom: 5px; border-left: 0; border-top: 0; }
  .pack-card .pack-corner { border-color: var(--fac); opacity: .72; }

  .pack-hero {
    position: relative;
    min-height: 176px;
    background-color: rgba(7, 8, 11, .70);
    background-position: center 22%;
    background-size: cover;
  }

  .pack-hero-grad {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 82% 55% at 50% 6%, color-mix(in srgb, var(--fac) 28%, transparent), transparent 66%),
      linear-gradient(180deg, rgba(7, 8, 11, .10), rgba(8, 10, 14, .98));
    box-shadow: inset 0 -64px 72px -30px color-mix(in srgb, var(--fac) 36%, transparent);
  }

  .pack-count,
  .pack-sigil {
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--fac) 45%, transparent);
    background: rgba(7, 8, 11, .74);
  }

  .pack-count {
    top: 13px;
    left: 13px;
    min-width: 62px;
    min-height: 54px;
  }

  .pack-count span {
    color: var(--fac);
    font-family: var(--mp-serif);
    font-size: 28px;
    line-height: .9;
  }

  .pack-count small {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .pack-sigil {
    right: 13px;
    bottom: 13px;
    width: 48px;
    height: 48px;
    color: var(--fac);
    font-size: 28px;
  }

  .pack-body {
    display: grid;
    gap: 12px;
    padding: 16px;
  }

  .pack-kicker {
    color: var(--fac);
    font-family: var(--mp-mono);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
  }

  .pack-body h3 {
    margin: 0;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 28px;
    line-height: 1;
    letter-spacing: 2.2px;
    text-shadow: 0 0 24px color-mix(in srgb, var(--fac) 22%, transparent);
  }

  .pack-body p {
    margin: 0;
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 14px;
    line-height: 1.45;
  }

  .pack-rarities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .pack-card .pack-open {
    width: 100%;
    border-color: color-mix(in srgb, var(--fac) 55%, transparent);
    background: linear-gradient(180deg, var(--fac-strong), var(--fac-deep));
    color: #07120f;
    text-shadow: none;
    transition: filter .14s ease, box-shadow .18s ease;
  }
  .pack-card .pack-open:not(:disabled):hover {
    filter: brightness(1.07);
    box-shadow: 0 0 22px color-mix(in srgb, var(--fac) 40%, transparent);
  }

  /* ===================== WAEHRUNG / SHOP / EINTAUSCHEN ===================== */
  /* Guthaben-Chip im Sammlungs-Kopf (immer sichtbar). */
  .vault-wallet {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 8px 14px;
    width: fit-content;
    border: 1px solid rgba(216, 177, 90, .22);
    background: linear-gradient(180deg, rgba(20, 23, 31, .80), rgba(8, 10, 14, .92));
  }
  .vault-wallet .vw-item { display: inline-flex; align-items: baseline; gap: 6px; }
  .vault-wallet .vw-ic { font-size: 13px; line-height: 1; }
  .vault-wallet .vw-shards .vw-ic { color: var(--mp-teal-1); }
  .vault-wallet .vw-currency .vw-ic { color: var(--mp-gold-1); }
  .vault-wallet b { font-family: var(--mp-serif); font-size: 17px; letter-spacing: .6px; color: var(--mp-ink); }
  .vault-wallet small {
    font-family: var(--mp-mono); font-size: 9px; font-weight: 800;
    letter-spacing: 1.3px; text-transform: uppercase; color: var(--mp-ink-dim);
  }
  .vault-wallet .vw-sep { width: 1px; height: 18px; background: rgba(216, 177, 90, .20); }

  /* Shards-Anzeige im Shop-Kopf. */
  .shop-balance {
    align-self: center;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid rgba(98, 231, 219, .34);
    background: rgba(69, 207, 195, .08);
  }
  .shop-balance .sb-ic { color: var(--mp-teal-1); font-size: 13px; }
  .shop-balance b { font-family: var(--mp-serif); font-size: 20px; color: var(--mp-ink); }
  .shop-balance .sb-label {
    font-family: var(--mp-mono); font-size: 10px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--mp-teal-1);
  }

  .shop-soon { margin-top: 22px; }

  /* Kauf-Button im Shop (Preis rechts). */
  .pack-card .pack-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border-color: color-mix(in srgb, var(--fac) 55%, transparent);
    background: linear-gradient(180deg, var(--fac-strong), var(--fac-deep));
    color: #07120f;
    text-shadow: none;
    transition: filter .14s ease, box-shadow .18s ease;
  }
  .pack-card .pack-buy:not(:disabled):hover {
    filter: brightness(1.07);
    box-shadow: 0 0 22px color-mix(in srgb, var(--fac) 40%, transparent);
  }
  .pack-card .pack-buy .pb-price {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px;
    background: rgba(7, 18, 15, .26);
    border-radius: 2px;
    font-family: var(--mp-serif); font-weight: 700;
  }
  .pack-card .pack-buy .pb-ic { font-size: 11px; }
  .pack-tooshort {
    margin-top: 8px;
    font-family: var(--mp-serif-body);
    font-size: 12.5px;
    font-style: italic;
    color: var(--mp-ink-dim);
  }

  /* Eintausch-Zeile + Button im Figuren-Detail. */
  .disenchant-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-top: 4px;
    border: 1px solid rgba(98, 231, 219, .18);
    background: rgba(69, 207, 195, .05);
  }
  .disenchant-row.is-standard {
    border-color: rgba(216, 177, 90, .16);
    background: rgba(20, 23, 31, .55);
    color: var(--mp-ink-dim);
    font-family: var(--mp-serif-body);
    font-style: italic;
    font-size: 13px;
  }
  .disenchant-row .dr-label {
    font-family: var(--mp-mono); font-size: 9px; font-weight: 800;
    letter-spacing: 1.3px; text-transform: uppercase; color: var(--mp-ink-dim);
  }
  .disenchant-row .dr-val { font-family: var(--mp-serif); font-size: 18px; color: var(--mp-teal-1); }
  .disenchant-row .dr-val .dr-ic { font-size: 12px; margin-right: 2px; }
  .disenchant-row .dr-val small {
    margin-left: 4px; font-family: var(--mp-mono); font-size: 9px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--mp-ink-dim);
  }
  .disenchant-row .dr-have { margin-left: auto; font-family: var(--mp-mono); font-size: 11px; color: var(--mp-ink-dim); }

  .btn.piece-disenchant {
    display: inline-flex; align-items: center; gap: 7px;
    border-color: rgba(98, 231, 219, .42);
    color: var(--mp-teal-1);
  }
  .btn.piece-disenchant:not(:disabled):hover {
    background: rgba(69, 207, 195, .10);
    box-shadow: 0 0 16px rgba(69, 207, 195, .18);
  }
  .btn.piece-disenchant .pd-val {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px;
    border: 1px solid rgba(98, 231, 219, .30);
    font-family: var(--mp-serif); font-weight: 700;
  }
  .btn.piece-disenchant .pd-ic { font-size: 10px; }

  /* ===================== TAEGLICHE QUESTS (Startseite) =====================
     1:1-Port der Quests-Design-Vorlage (Summary-Bar + Karten + Fuss-Note),
     OHNE die grosse Ueberschrift — passend in die Startseite integriert.
     Markup: app/quests.js -> #dailyQuestPanel. Scoped unter .dailyQuestPanel. */
  .dailyQuestSection {
    grid-column: 1 / -1;
    margin: 4px 0 40px;
  }
  .dailyQuestPanel { position: relative; }
  .dailyQuestPanel .quests-locked {
    padding: 18px 22px;
    border: 1px dashed rgba(216, 177, 90, .2);
    background: rgba(11, 13, 18, .4);
    color: var(--mp-ink-dim);
    font-family: var(--mp-serif-body);
    font-size: 15px;
  }

  /* Summary-Bar */
  .dailyQuestPanel .quests-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px; padding: 16px 22px;
    background: linear-gradient(90deg, rgba(35, 155, 149, 0.06), rgba(11, 13, 18, 0.6) 70%);
    border: 1px solid rgba(216, 177, 90, 0.16);
  }
  .dailyQuestPanel .qb-item { display: flex; align-items: center; gap: 10px; }
  .dailyQuestPanel .qb-k { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); }
  .dailyQuestPanel .qb-v { font-family: var(--mp-serif); font-size: 20px; font-weight: 700; color: var(--mp-bone); line-height: 1; }
  .dailyQuestPanel .qb-v.gold { color: var(--mp-gold-1); }
  .dailyQuestPanel .qb-v.teal { color: var(--mp-teal-1); }
  .dailyQuestPanel .qb-v .shard { font-size: 13px; }
  .dailyQuestPanel .qb-sep { width: 1px; height: 30px; background: rgba(216, 177, 90, 0.16); }
  .dailyQuestPanel .qb-reset { margin-left: auto; display: flex; align-items: center; gap: 10px; font-family: var(--mp-mono); font-size: 12px; color: var(--mp-teal-1); letter-spacing: 0.5px; }
  .dailyQuestPanel .qr-label { display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); font-family: var(--mp-sans); }
  .dailyQuestPanel .qr-time { font-variant-numeric: tabular-nums; color: var(--mp-bone); background: rgba(7, 8, 11, 0.5); border: 1px solid rgba(77, 208, 196, 0.22); padding: 5px 10px; }

  /* Quest-Grid */
  .dailyQuestPanel .quest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .dailyQuestPanel .quest-card {
    position: relative; display: flex; flex-direction: column; padding: 22px 22px 20px;
    background: linear-gradient(180deg, rgba(20, 23, 31, 0.65), rgba(11, 13, 18, 0.82));
    border: 1px solid rgba(216, 177, 90, 0.14); transition: border-color 220ms ease, transform 220ms ease; overflow: hidden;
  }
  .dailyQuestPanel .quest-card.claimable {
    border-color: rgba(216, 177, 90, 0.45);
    background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(216, 177, 90, 0.12), transparent 70%), linear-gradient(180deg, rgba(26, 22, 13, 0.8), rgba(13, 12, 9, 0.9));
    box-shadow: 0 0 0 1px rgba(216, 177, 90, 0.18), 0 8px 30px rgba(216, 177, 90, 0.08);
  }
  .dailyQuestPanel .quest-card.claimed { opacity: 0.6; }
  .dailyQuestPanel .qc-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
  .dailyQuestPanel .qc-ico { width: 46px; height: 46px; display: grid; place-items: center; color: var(--mp-teal-1); border: 1px solid rgba(77, 208, 196, 0.28); transform: rotate(45deg); flex-shrink: 0; }
  .dailyQuestPanel .qc-ico > * { transform: rotate(-45deg); }
  .dailyQuestPanel .qc-emoji { font-size: 22px; }
  .dailyQuestPanel .quest-card.claimable .qc-ico { color: var(--mp-gold-1); border-color: rgba(216, 177, 90, 0.4); }
  /* Reward = Shards -> teal/blau (Gold ist der Premium-Currency vorbehalten). */
  .dailyQuestPanel .qc-reward { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font-family: var(--mp-mono); font-size: 14px; font-weight: 500; color: var(--mp-teal-1); background: rgba(7, 8, 11, 0.5); border: 1px solid rgba(77, 208, 196, 0.28); }
  .dailyQuestPanel .qc-reward .shard { width: 9px; height: 9px; transform: rotate(45deg); background: linear-gradient(135deg, #8ff3e6, #2bb6a6); box-shadow: 0 0 6px rgba(77, 208, 196, 0.55); }
  .dailyQuestPanel .qb-v .shard { color: var(--mp-teal-1); }
  .dailyQuestPanel .qc-title { font-family: var(--mp-serif); font-size: 20px; letter-spacing: 0.5px; color: var(--mp-bone); font-weight: 600; line-height: 1.1; margin-bottom: 5px; }
  .dailyQuestPanel .qc-sub { font-size: 12.5px; color: var(--mp-ink-dim); letter-spacing: 0.2px; margin-bottom: 18px; }
  .dailyQuestPanel .qc-progress { margin-bottom: 18px; margin-top: auto; }
  .dailyQuestPanel .qc-prog-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font-family: var(--mp-mono); font-size: 11px; color: var(--mp-ink-dim); }
  .dailyQuestPanel .qc-prog-head .qp-count { color: var(--mp-bone); }
  .dailyQuestPanel .quest-card.claimable .qc-prog-head .qp-count { color: var(--mp-gold-1); }
  .dailyQuestPanel .qc-bar { height: 6px; background: rgba(216, 177, 90, 0.1); border: 1px solid rgba(255,255,255,0.04); position: relative; overflow: hidden; }
  .dailyQuestPanel .qc-fill { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #239b95, #6ee7d8); box-shadow: 0 0 8px rgba(77, 208, 196, 0.4); transition: transform 500ms ease; }
  .dailyQuestPanel .quest-card.claimable .qc-fill { background: linear-gradient(90deg, #c89a3e, #f0d27a); box-shadow: 0 0 8px rgba(216, 177, 90, 0.45); }
  .dailyQuestPanel .qc-action { display: flex; }
  .dailyQuestPanel .qc-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-family: var(--mp-sans); font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700; transition: transform 180ms ease, box-shadow 180ms ease; border: 0; }
  .dailyQuestPanel .qc-btn.claim { color: #0c0e13; background: linear-gradient(180deg, #f3d88a 0%, #d8b15a 45%, #ad8230 100%); border: 1px solid #f0d27a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); cursor: pointer; }
  .dailyQuestPanel .qc-btn.claim:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(216, 177, 90, 0.4), inset 0 1px 0 rgba(255,255,255,0.5); }
  .dailyQuestPanel .qc-btn.open { color: var(--mp-ink-dim); background: rgba(7, 8, 11, 0.4); border: 1px solid rgba(216, 177, 90, 0.14); cursor: default; }
  .dailyQuestPanel .qc-btn.done { color: var(--mp-teal-1); background: rgba(35, 155, 149, 0.08); border: 1px solid rgba(77, 208, 196, 0.25); cursor: default; }
  .dailyQuestPanel .qc-claimed-mark { position: absolute; top: 14px; right: 16px; color: var(--mp-teal-1); display: grid; place-items: center; }

  /* Fuss-Note */
  .dailyQuestPanel .quests-note { margin-top: 18px; display: flex; align-items: center; gap: 12px; padding: 16px 22px; border: 1px dashed rgba(216, 177, 90, 0.2); background: rgba(11, 13, 18, 0.4); font-family: var(--mp-serif-body); font-size: 15.5px; color: var(--mp-ink-dim); }
  .dailyQuestPanel .qn-ico { color: var(--mp-gold-2); flex-shrink: 0; display: grid; place-items: center; }
  .dailyQuestPanel .quests-note b { color: var(--mp-ink); font-weight: 600; }

  @media (max-width: 820px) {
    .dailyQuestPanel .quest-grid { grid-template-columns: 1fr; }
    .dailyQuestPanel .qb-reset { margin-left: 0; width: 100%; }
  }

  /* ===================== WAEHRUNGS-GEWINN-FEEDBACK (rein visuell) ========== */
  .currencyGain {
    position: fixed;
    z-index: 1400;
    transform: translate(-50%, 0);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid color-mix(in srgb, var(--mp-teal-1) 55%, transparent);
    background: linear-gradient(180deg, rgba(16, 36, 34, .96), rgba(8, 14, 13, .96));
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5), 0 0 18px color-mix(in srgb, var(--mp-teal-1) 35%, transparent);
    font-family: var(--mp-serif);
    font-weight: 700;
    font-size: 17px;
    color: var(--mp-teal-1);
    pointer-events: none;
    white-space: nowrap;
    animation: currency-gain-rise 1.4s cubic-bezier(.2, .7, .2, 1) forwards;
  }
  .currencyGain--currency {
    border-color: color-mix(in srgb, var(--mp-gold-1) 55%, transparent);
    background: linear-gradient(180deg, rgba(38, 31, 14, .96), rgba(16, 13, 7, .96));
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5), 0 0 18px color-mix(in srgb, var(--mp-gold-1) 35%, transparent);
    color: var(--mp-gold-1);
  }
  .currencyGain--center { left: 50%; top: 76px; }
  .currencyGain .cg-ic { font-size: 13px; }
  @keyframes currency-gain-rise {
    0%   { opacity: 0; transform: translate(-50%, 6px) scale(.85); }
    18%  { opacity: 1; transform: translate(-50%, -2px) scale(1.06); }
    32%  { transform: translate(-50%, -6px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
  }
  /* Kurzer Puls auf der Guthaben-Anzeige, wenn sich der Betrag aendert. */
  .wallet-pulse { animation: wallet-pulse-kf .7s ease both; }
  @keyframes wallet-pulse-kf {
    0%   { filter: none; }
    35%  { filter: brightness(1.5) drop-shadow(0 0 8px color-mix(in srgb, var(--mp-teal-1) 60%, transparent)); }
    100% { filter: none; }
  }

  /* ===================== PACK REVEAL (Hearthstone-Style) =====================
     Vollbild-Overlay. Karten liegen verdeckt; Hover laesst die Seltenheit als
     farbigen Schimmer erahnen; Klick dreht die Karte mit Blitz auf. Legendaeres
     bekommt Extra-Strahlen + Buehnen-Blitz. */
  .pr-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(120% 90% at 50% 38%, rgba(8, 10, 16, .85), rgba(3, 4, 7, .96));
    backdrop-filter: blur(6px);
    animation: pr-backdrop-in .3s ease both;
  }
  @keyframes pr-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
  /* Beim "Nochmal oeffnen" ist das Overlay schon da -> nicht neu einfaden
     (sonst blitzt das Popup kurz weg und wieder rein). */
  .pr-backdrop.pr-instant,
  .pr-backdrop.pr-instant .pr-stage { animation: none; }

  .pr-stage {
    --pr-tone: var(--mp-gold-1);
    --pr-tone-soft: rgba(216, 177, 90, .14);
    position: relative;
    width: min(1120px, 96vw);
    max-height: 92vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    gap: clamp(16px, 2.2vw, 28px);
    padding: clamp(22px, 3vw, 40px);
    border: 1px solid rgba(216, 177, 90, .26);
    background:
      radial-gradient(120% 70% at 50% -10%, rgba(216, 177, 90, .10), transparent 60%),
      linear-gradient(180deg, rgba(18, 21, 29, .96), rgba(7, 9, 13, .99));
    box-shadow: 0 40px 120px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(240, 210, 131, .08);
    animation: pr-stage-in .42s cubic-bezier(.2, .8, .25, 1) both;
  }
  @keyframes pr-stage-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
  .pr-stage.tone-teal { --pr-tone: var(--mp-teal-1); --pr-tone-soft: rgba(77, 208, 196, .16); }
  .pr-stage.tone-moss { --pr-tone: var(--moss-1); --pr-tone-soft: rgba(120, 218, 162, .16); }

  .pr-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 50% at 50% 30%, var(--pr-tone-soft), transparent 70%);
    animation: pr-glow-pulse 4.5s ease-in-out infinite;
  }
  @keyframes pr-glow-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  .pr-stage.has-legendary .pr-glow { background: radial-gradient(60% 50% at 50% 30%, rgba(216, 177, 90, .22), transparent 70%); }

  .pr-close {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 6;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid rgba(216, 177, 90, .24);
    background: rgba(7, 8, 11, .6);
    color: var(--mp-ink);
    font-size: 22px; line-height: 1;
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease;
  }
  .pr-close:hover { color: var(--mp-bone); border-color: rgba(216, 177, 90, .5); }

  .pr-head { position: relative; z-index: 2; display: grid; gap: 8px; justify-items: center; text-align: center; }
  .pr-head .section-eyebrow { justify-content: center; }
  .pr-title {
    margin: 0;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: clamp(26px, 3.4vw, 40px);
    letter-spacing: 2px;
  }
  .pr-hint {
    margin: 0;
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: opacity .3s ease;
  }
  .pr-hint.hidden { opacity: 0; }

  .pr-cards {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 1.6vw, 20px);
  }

  .pr-card {
    --rar: #b4becd;
    --rar-soft: rgba(180, 190, 205, .45);
    position: relative;
    width: clamp(138px, 15vw, 188px);
    aspect-ratio: 5 / 7;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform .22s ease;
    animation: pr-deal .5s cubic-bezier(.2, .8, .25, 1) backwards;
    animation-delay: calc(var(--i) * 90ms);
  }
  .pr-card.rarity-rare { --rar: var(--mp-teal-1); --rar-soft: rgba(110, 231, 216, .5); }
  .pr-card.rarity-epic { --rar: #c79bf2; --rar-soft: rgba(184, 124, 232, .55); }
  .pr-card.rarity-legendary { --rar: var(--mp-gold-1); --rar-soft: rgba(216, 177, 90, .62); }
  @keyframes pr-deal {
    from { opacity: 0; transform: translateY(40px) rotateX(26deg) scale(.9); }
    to { opacity: 1; transform: none; }
  }
  .pr-card:not(.revealed):hover { transform: translateY(-9px); z-index: 3; }

  .prc-inner {
    position: absolute;
    inset: 0;
  }

  /* Beide Seiten gestapelt; aufgedeckt wird per Opacity/Scale-"Pop" getauscht
     (robust, ohne fragiles 3D-preserve-3d/backface). */
  .prc-face {
    position: absolute;
    inset: 0;
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(216, 177, 90, .18);
    transition: opacity .28s ease, transform .45s cubic-bezier(.2, .8, .25, 1);
  }
  .pr-card.revealed .prc-back { opacity: 0; transform: scale(1.08); pointer-events: none; }

  /* ---- Rueckseite (verdeckt) ---- Fraktions-getoent (--pr-tone vom Stage). */
  .prc-back {
    place-items: center;
    background:
      radial-gradient(76% 56% at 50% 30%, color-mix(in srgb, var(--pr-tone, var(--mp-gold-1)) 15%, transparent), transparent 64%),
      linear-gradient(180deg, rgba(22, 26, 34, .96), rgba(9, 11, 16, .99));
    transition: opacity .28s ease, transform .45s cubic-bezier(.2, .8, .25, 1), box-shadow .2s ease, border-color .2s ease;
  }
  .prc-back-frame { position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--pr-tone, var(--mp-gold-1)) 26%, transparent); }
  .prc-crest {
    font-size: clamp(34px, 4vw, 52px);
    color: color-mix(in srgb, var(--pr-tone, var(--mp-gold-1)) 62%, rgba(150, 150, 158, .5));
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
    transition: color .25s ease, transform .25s ease;
  }
  .prc-back-rarity {
    position: absolute;
    bottom: 14px;
    color: var(--rar);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .22s ease;
  }
  .prc-shimmer {
    position: absolute;
    inset: -40%;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--rar) 65%, transparent) 50%, transparent 62%);
    opacity: 0;
    transform: translateX(-60%);
  }
  .pr-card:not(.revealed):hover .prc-back {
    border-color: var(--rar);
    box-shadow: 0 0 28px var(--rar-soft), inset 0 0 22px color-mix(in srgb, var(--rar) 22%, transparent);
  }
  .pr-card:not(.revealed):hover .prc-crest { color: var(--rar); transform: scale(1.06); }
  .pr-card:not(.revealed):hover .prc-back-rarity { opacity: .92; }
  .pr-card:not(.revealed):hover .prc-shimmer { animation: pr-shimmer 1.1s linear infinite; }
  @keyframes pr-shimmer {
    0% { opacity: 0; transform: translateX(-60%); }
    35% { opacity: .9; }
    100% { opacity: 0; transform: translateX(60%); }
  }

  /* ---- Vorderseite (aufgedeckt) ---- */
  .prc-front {
    opacity: 0;
    transform: scale(.78);
    pointer-events: none;
    grid-template-rows: 1fr auto;
    gap: 8px;
    padding: 12px;
    /* Container fuer den Namen -> Schriftgroesse skaliert mit der Kartenbreite,
       lange Namen (z.B. "Quartiermeister") passen immer sauber rein. */
    container-type: inline-size;
    border-color: var(--rar);
    background:
      radial-gradient(80% 55% at 50% 32%, color-mix(in srgb, var(--rar) 16%, transparent), transparent 70%),
      linear-gradient(180deg, rgba(16, 19, 26, .96), rgba(7, 9, 13, .99));
    box-shadow: inset 0 0 26px color-mix(in srgb, var(--rar) 14%, transparent);
    /* Pop mit Ueberschwingen (back-out) statt sanftem Skalieren. */
    transition: opacity .24s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
  }
  .pr-card.revealed .prc-front { opacity: 1; transform: scale(1); pointer-events: auto; }
  .prc-art { display: grid; place-items: center; min-height: 0; }
  .revealPieceArt {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7));
  }
  .prc-meta { position: relative; z-index: 2; display: grid; gap: 5px; justify-items: start; }
  .prc-name {
    max-width: 100%;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    /* Skaliert mit der Kartenbreite (cqi) -> passt fuer kurze wie lange Namen;
       als Fallback darf umbrochen werden statt ueberzulaufen. */
    font-size: clamp(11px, 10.5cqi, 19px);
    line-height: 1.1;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  .prc-copy {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
  }
  .pr-card.is-new .prc-copy { color: var(--rar); }
  .prc-new {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 3;
    padding: 2px 7px;
    background: var(--rar);
    color: #11131a;
    font-family: var(--mp-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
  }

  /* ===== Aufdeck-Effekte (Dopamin) ===== */
  /* Heller Blitz-Kern */
  .prc-burst {
    position: absolute; inset: -10%;
    pointer-events: none; opacity: 0;
    mix-blend-mode: screen;
    background: radial-gradient(circle at 50% 44%, #fff 0%, color-mix(in srgb, var(--rar) 88%, white) 16%, transparent 58%);
  }
  .pr-card.revealed .prc-burst { animation: pr-burst .6s ease-out .14s both; }
  @keyframes pr-burst {
    0% { opacity: 0; transform: scale(.45); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.7); }
  }

  /* Schockwellen-Ring (alle Seltenheiten) */
  .prc-ring {
    position: absolute; left: 50%; top: 45%;
    width: 46px; height: 46px; margin: -23px;
    border: 2px solid var(--rar);
    border-radius: 50%;
    pointer-events: none; opacity: 0;
  }
  .pr-card.revealed .prc-ring { animation: pr-ring .72s cubic-bezier(.2, .7, .3, 1) .14s both; }
  @keyframes pr-ring {
    0% { opacity: 0; transform: scale(.25); }
    16% { opacity: .85; }
    100% { opacity: 0; transform: scale(4.4); border-width: .5px; }
  }

  /* Funken (Episch + Legendaer) */
  .prc-sparks { position: absolute; inset: 0; pointer-events: none; }
  .prc-sparks i {
    position: absolute; left: 50%; top: 46%;
    width: 6px; height: 6px; margin: -3px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--rar) 55%, transparent 75%);
    opacity: 0;
  }
  .pr-card.revealed .prc-sparks i { animation: pr-spark .9s ease-out .2s both; }
  @keyframes pr-spark {
    0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.3); }
    22% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(-86px) scale(1); }
  }
  /* Blitz/Ring/Funken vorne; Strahlen als Halo hinter der Figur. */
  .prc-burst, .prc-ring, .prc-sparks { z-index: 4; }
  .prc-rays { z-index: 1; }

  /* Legendaer: weiche, strahlende Lichtfaecher statt duenner Speichen */
  .prc-rays {
    position: absolute; inset: -60%;
    pointer-events: none; opacity: 0;
    mix-blend-mode: screen;
    filter: blur(2px);
    background: repeating-conic-gradient(from 0deg,
      rgba(255, 232, 170, 0) 0deg 7deg,
      rgba(255, 232, 170, .22) 7deg 9deg,
      rgba(255, 232, 170, 0) 9deg 16deg);
  }
  .pr-card.rarity-legendary.revealed .prc-rays { animation: pr-rays 2.4s ease-out .16s both; }
  @keyframes pr-rays {
    0% { opacity: 0; transform: rotate(-12deg) scale(.5); }
    22% { opacity: .85; }
    100% { opacity: 0; transform: rotate(26deg) scale(1.35); }
  }

  /* Legendaer: bleibende, pulsierende Gold-Aura nach dem Aufdecken */
  .pr-card.rarity-legendary.revealed .prc-front {
    animation: pr-leg-aura 2.6s ease-in-out 1s infinite;
  }
  @keyframes pr-leg-aura {
    0%, 100% { box-shadow: inset 0 0 26px color-mix(in srgb, var(--rar) 16%, transparent), 0 0 12px rgba(216, 177, 90, .22); }
    50% { box-shadow: inset 0 0 36px color-mix(in srgb, var(--rar) 30%, transparent), 0 0 30px rgba(216, 177, 90, .6); }
  }
  /* Rare/Epic: dezenter bleibender Schein */
  .pr-card.rarity-rare.revealed .prc-front,
  .pr-card.rarity-epic.revealed .prc-front {
    box-shadow: inset 0 0 26px color-mix(in srgb, var(--rar) 16%, transparent), 0 0 16px var(--rar-soft);
  }

  /* Buehnen-Blitz bei legendaerem Drop: kurzes goldenes Aufbluehen */
  .pr-stage.legendary-flash::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 5;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(circle at 50% 46%, rgba(255, 244, 214, .6), rgba(216, 177, 90, .2) 36%, transparent 64%);
    animation: pr-stage-flash 1s ease-out both;
  }
  /* Nicht ueber scale(1) hinaus -> sonst ragt der Blitz ueber die .pr-stage
     hinaus und loest (overflow-y:auto) einen Scrollbalken aus. */
  @keyframes pr-stage-flash {
    0% { opacity: 0; transform: scale(.85); }
    16% { opacity: 1; }
    100% { opacity: 0; transform: scale(1); }
  }

  .pr-foot {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .pr-remaining {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }
  .pr-remaining b { color: var(--mp-gold-1); }
  .pr-actions { display: inline-flex; gap: 10px; }
  .pr-stage.all-revealed .pr-again { animation: pr-again-pulse 1.4s ease-in-out infinite; }
  @keyframes pr-again-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(216, 177, 90, 0); }
    50% { box-shadow: 0 0 22px 2px rgba(216, 177, 90, .4); }
  }

  @media (prefers-reduced-motion: reduce) {
    .pr-backdrop, .pr-stage, .pr-glow, .pr-card, .prc-shimmer, .prc-burst, .prc-ring, .prc-rays,
    .prc-sparks i, .pr-card.rarity-legendary.revealed .prc-front { animation: none !important; }
    .prc-face { transition: opacity .15s ease !important; }
  }

  .deckbuilder-tab {
    display: grid;
    gap: 18px;
  }

  /* ===== Deine Decks — Deck-Karten (Claude-Design-Vorlage portiert) ===== */
  .dcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
  }
  .dcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(20, 23, 31, 0.92), rgba(11, 13, 18, 0.98));
    border: 1px solid rgba(216, 177, 90, 0.14);
    border-radius: 0;
    overflow: hidden;
    transition: transform 180ms, border-color 200ms, box-shadow 220ms;
  }
  .dcard:hover { transform: translateY(-2px); border-color: rgba(216, 177, 90, 0.4); box-shadow: 0 14px 38px rgba(0,0,0,0.6); }
  .dcard.active {
    border-color: var(--mp-gold-1);
    box-shadow: 0 0 0 1px var(--mp-gold-1), 0 14px 38px rgba(0,0,0,0.7), 0 0 40px rgba(216, 177, 90, 0.18);
  }
  .dcard.incomplete { border-style: dashed; border-color: rgba(194, 90, 74, 0.4); }
  .dcard-corner {
    position: absolute;
    width: 10px; height: 10px;
    border: 1px solid var(--mp-gold-2);
    opacity: 0.55;
    z-index: 3;
    pointer-events: none;
  }
  .dcard-corner.tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
  .dcard-corner.tr { top: 4px; right: 4px; border-left: none; border-bottom: none; }
  .dcard-corner.bl { bottom: 4px; left: 4px; border-right: none; border-top: none; }
  .dcard-corner.br { bottom: 4px; right: 4px; border-left: none; border-top: none; }
  .dcard.active .dcard-corner { border-color: var(--mp-gold-1); opacity: 1; }
  .dcard-hero {
    position: relative;
    height: 140px;
    background-size: cover;
    background-position: center 20%;
  }
  .dcard-hero-grad {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(7, 8, 11, 0.4) 0%, rgba(7, 8, 11, 0.15) 40%, rgba(11, 13, 18, 0.95) 100%);
  }
  .dcard-pirate .dcard-hero-grad { box-shadow: inset 0 0 80px rgba(77, 208, 196, 0.18); }
  .dcard-zombie  .dcard-hero-grad { box-shadow: inset 0 0 80px rgba(120, 218, 162, 0.18); }
  .dcard-fantasy .dcard-hero-grad { box-shadow: inset 0 0 80px rgba(216, 177, 90, 0.16); }
  .dcard-hero-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
  }
  .dcard-faction-tag {
    font-size: 9.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 10px;
    background: rgba(7, 8, 11, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(216, 177, 90, 0.2);
  }
  .dcard-faction-tag.tag-pirate { color: var(--mp-teal-1); border-color: rgba(77, 208, 196, 0.4); }
  .dcard-faction-tag.tag-zombie  { color: var(--mp-teal-3); border-color: rgba(120, 218, 162, 0.4); }
  .dcard-faction-tag.tag-fantasy { color: var(--mp-gold-1); border-color: rgba(216, 177, 90, 0.4); }
  .dcard-faction-tag.tag-mixed   { color: var(--mp-ink); }
  .dcard-active {
    margin-left: auto;
    font-family: var(--mp-mono);
    font-size: 9.5px;
    letter-spacing: 1.6px;
    color: var(--mp-gold-1);
    padding: 4px 8px;
    background: rgba(216, 177, 90, 0.16);
    border: 1px solid var(--mp-gold-2);
    font-weight: 700;
    text-transform: uppercase;
  }
  .dcard-incomplete {
    margin-left: auto;
    font-size: 9.5px;
    letter-spacing: 1.6px;
    color: var(--mp-danger);
    font-weight: 700;
    text-transform: uppercase;
  }
  .dcard-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .dcard-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .dcard-name {
    font-family: var(--mp-serif);
    font-size: 22px;
    letter-spacing: 2.5px;
    color: var(--mp-bone);
    margin: 0;
    font-weight: 600;
  }
  .dcard-archetype {
    font-family: var(--mp-mono);
    font-size: 9.5px;
    letter-spacing: 1.6px;
    color: var(--mp-ink-dim);
    text-transform: uppercase;
  }
  .dcard-epithet {
    font-family: var(--mp-serif-body);
    font-size: 13.5px;
    color: var(--mp-ink);
    font-style: italic;
    margin: 0;
    line-height: 1.4;
  }
  .dcard-comp { display: flex; flex-direction: column; gap: 8px; }
  .dcard-comp-label {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mp-ink-faint);
    font-weight: 700;
  }
  .dcard-comp-row { display: flex; gap: 4px; flex-wrap: wrap; }
  /* 2-reihige Aufstellung (Grundreihe oben, Gefolge unten) statt flacher Reihe. */
  .dcard-formation { display: flex; flex-direction: column; gap: 4px; }
  .dcard-form-row { display: flex; gap: 4px; }
  .dcard-formation .dccm.slot { width: 30px; height: 30px; flex: 1 1 0; max-width: 38px; }
  .dccm.slot {
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 8, 11, 0.6);
    border: 1px solid rgba(216, 177, 90, 0.1);
    border-radius: 0;
    overflow: hidden;
  }
  .dccm.slot img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
    padding: 1px;
  }
  .dccm.slot.rarity-legendary { border-color: rgba(216, 177, 90, 0.6); }
  .dccm.slot.rarity-epic { border-color: rgba(184, 124, 232, 0.4); }
  .dccm.slot.rarity-rare { border-color: rgba(110, 231, 216, 0.3); }
  .dccm.slot.more {
    font-family: var(--mp-mono);
    font-size: 10px;
    color: var(--mp-ink-dim);
    font-weight: 700;
  }
  .dccm.slot.missing {
    color: var(--mp-danger);
    border-color: rgba(194, 90, 74, 0.45);
    border-style: dashed;
    font-size: 14px;
    background: rgba(194, 90, 74, 0.06);
  }
  .dccm.slot.empty {
    color: var(--mp-ink-faint);
    border-style: dashed;
    font-family: var(--mp-serif);
  }
  /* Fuss stapelt Bilanz ueber den Aktionen -> Buttons bleiben IMMER in der Karte
     (vorher lief "Aktivieren" aus der Box). */
  .dcard-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(216, 177, 90, 0.1);
  }
  .dcard-record {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--mp-mono);
    font-size: 10.5px;
    color: var(--mp-ink-dim);
  }
  .dcard-record .rec-k { color: var(--mp-ink-faint); text-transform: uppercase; letter-spacing: 1.4px; margin-right: 6px; }
  .dcard-record .rec-w { color: var(--mp-teal-1); font-size: 13.5px; font-weight: 700; }
  .dcard-record .rec-l { font-size: 9px; letter-spacing: 1px; margin-left: 1px; color: var(--mp-ink-faint); }
  .dcard-record .rec-l-n { color: var(--mp-danger); font-size: 13.5px; font-weight: 700; }
  .dcard-record .rec-sep { margin: 0 4px; color: var(--mp-ink-faint); }
  .dcard-record .rec-when { margin-left: 8px; color: var(--mp-ink-faint); font-style: italic; }
  .dcard-actions { display: flex; gap: 8px; }
  /* Bearbeiten/Aktivieren teilen sich die Breite, Loeschen bleibt kompakt. */
  .dcard-actions .dcard-btn.ghost,
  .dcard-actions .dcard-btn.primary { flex: 1 1 auto; text-align: center; }
  .dcard-btn {
    padding: 8px 14px;
    font-size: 10.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 0;
    font-family: var(--mp-sans);
    transition: all 160ms;
    white-space: nowrap;
  }
  .dcard-btn.ghost {
    color: var(--mp-ink);
    border: 1px solid rgba(216, 177, 90, 0.2);
    background: transparent;
  }
  .dcard-btn.ghost:hover { color: var(--mp-bone); border-color: var(--mp-gold-2); }
  .dcard-btn.primary {
    color: #0c0e13;
    background: linear-gradient(180deg, var(--mp-gold-1), var(--mp-gold-2));
    border: 1px solid var(--mp-gold-3);
  }
  .dcard-btn.primary:hover { box-shadow: 0 0 14px var(--mp-gold-glow); }
  .dcard-new {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 340px;
    background: linear-gradient(180deg, rgba(15, 17, 22, 0.6), rgba(7, 8, 11, 0.9));
    border: 1px dashed rgba(216, 177, 90, 0.3);
    border-radius: 0;
    color: var(--mp-bone);
    cursor: pointer;
    transition: all 200ms;
  }
  .dcard-new:hover { border-color: var(--mp-gold-1); color: var(--mp-gold-1); background: rgba(216, 177, 90, 0.04); }
  .dcard-new .dcn-plus {
    font-family: var(--mp-serif);
    font-size: 56px;
    color: var(--mp-gold-2);
    line-height: 0.7;
  }
  .dcard-new .dcn-label {
    font-family: var(--mp-serif);
    font-size: 16px;
    letter-spacing: 3px;
    font-weight: 600;
  }
  .dcard-new .dcn-hint {
    font-family: var(--mp-mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mp-ink-dim);
  }

  /* Loeschen-Button (kompakt, im Deck-Karten-Fuss); deutlich sichtbares Symbol. */
  .dcard-btn.danger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    color: #e08a80;
    border: 1px solid rgba(210, 86, 72, .24);
    background: transparent;
    padding: 8px 12px;
    font-size: 20px;
    line-height: 1;
  }
  .dcard-btn.danger:not(:disabled):hover { color: #ff9587; border-color: rgba(210, 86, 72, .5); background: rgba(210, 86, 72, .10); }

  /* Portrait-Picker im Builder: Deck-Bild aus den platzierten Figuren waehlen. */
  .hero-picker { display: flex; flex-direction: column; gap: 8px; }
  .hero-picker .hp-label {
    font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--mp-ink-faint); font-weight: 700;
  }
  .hero-picker .hp-hint {
    font-family: var(--mp-serif-body); font-size: 14px; font-style: italic; color: var(--mp-ink-dim);
  }
  .hero-picker .hp-row { display: flex; gap: 6px; flex-wrap: wrap; }
  .hp-thumb {
    width: 46px; height: 46px;
    border: 1px solid rgba(216, 177, 90, .2);
    background: rgba(7, 8, 11, .6) center 18% / cover no-repeat;
    cursor: pointer; transition: transform 160ms, border-color 160ms, box-shadow 160ms;
    display: grid; place-items: center;
    color: var(--mp-ink-dim); font-family: var(--mp-serif); font-size: 18px;
  }
  .hp-thumb:hover { border-color: var(--mp-gold-2); transform: translateY(-2px); }
  .hp-thumb.active { border-color: var(--mp-gold-1); box-shadow: 0 0 0 1px var(--mp-gold-1), 0 0 14px var(--mp-gold-glow); }

  /* Zusatz-Eingaben der Werkzeugleiste (Archetyp inline, Motto eigene Zeile). */
  .bt-archetype, .bt-epithet {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(216, 177, 90, .22);
    border-radius: 7px;
    background: rgba(7, 8, 11, .62);
    color: var(--mp-bone);
    font-family: var(--mp-serif-body);
    font-size: 15px;
    letter-spacing: .3px;
  }
  .bt-archetype { flex: 1 1 200px; }
  .bt-epithet { flex: 1 1 100%; font-style: italic; }
  .bt-archetype:focus, .bt-epithet:focus {
    outline: none;
    border-color: rgba(110, 231, 216, .6);
    box-shadow: 0 0 0 2px rgba(110, 231, 216, .14);
  }

  /* ---- Deckbuilder: kompaktes, brett-zentriertes Layout ---- */
  .db-decks { padding-top: 0; }
  /* Etwas mehr Luft zwischen der Deck-Liste und dem "Neues Deck"-Baubereich. */
  .db-builder { margin-top: clamp(14px, 2.4vw, 30px); }
  .db-decks-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  .db-head-left { display: grid; gap: 7px; min-width: 0; }
  .db-decks-title {
    margin: 0;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1;
    letter-spacing: 2px;
  }
  /* Kurzbeschreibung unter den Deck-Ueberschriften (identisch zu .section-desc beim Figuren-Tab). */
  .db-decks-sub {
    margin: 0;
    max-width: 680px;
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 17px;
    line-height: 1.45;
  }
  .db-head-left .col-acquired { margin-top: 3px; }

  .builder-section {
    display: grid;
    gap: 16px;
    margin-top: 8px;
    padding: clamp(16px, 2vw, 28px);
    border: 1px solid rgba(216, 177, 90, .22);
    border-radius: 10px;
    background:
      radial-gradient(130% 72% at 50% -8%, rgba(216, 177, 90, .10), transparent 58%),
      radial-gradient(80% 60% at 100% 106%, rgba(77, 208, 196, .05), transparent 60%),
      linear-gradient(180deg, rgba(19, 22, 30, .94), rgba(8, 10, 14, .98));
    box-shadow:
      0 30px 80px rgba(0, 0, 0, .55),
      inset 0 0 0 1px rgba(240, 210, 131, .07),
      inset 0 1px 0 rgba(255, 255, 255, .045);
  }
  /* Goldene Eckwinkel des grossen Kastens etwas praesenter. */
  .builder-section > .pcard-corner {
    width: 16px;
    height: 16px;
    opacity: .72;
    border-color: var(--mp-gold-1);
  }

  /* Werkzeugleiste oben: Name | Aktiv | Auto/Leeren */
  .builder-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .bt-name {
    flex: 1 1 240px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(216, 177, 90, .22);
    border-radius: 7px;
    background: rgba(7, 8, 11, .62);
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 18px;
    letter-spacing: .5px;
  }
  .bt-name:focus {
    outline: none;
    border-color: rgba(110, 231, 216, .6);
    box-shadow: 0 0 0 2px rgba(110, 231, 216, .14);
  }
  .bt-active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(216, 177, 90, .18);
    border-radius: 7px;
    background: rgba(7, 8, 11, .42);
    color: var(--mp-ink);
    cursor: pointer;
    font-family: var(--mp-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .bt-active input { accent-color: var(--mp-gold-1); }
  .bt-tools {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
  }
  .bt-tool {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(216, 177, 90, .18);
    border-radius: 7px;
    background: rgba(7, 8, 11, .42);
    color: var(--mp-ink-dim);
    cursor: pointer;
    font-family: var(--mp-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .bt-tool:hover { color: var(--mp-bone); border-color: rgba(216, 177, 90, .4); }

  /* Klebende Speicher-Leiste unten: Rang-Fortschritt | Zahl | Status | Speichern */
  /* Normale Leiste am Ende des Builders (kein klebendes Float mehr -> keine
     Ueberlappung der untersten Pool-Reihe). */
  .builder-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 12px;
    border: 1px solid rgba(216, 177, 90, .22);
    border-radius: 9px;
    background: rgba(10, 12, 16, .92);
  }
  .bb-ranks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(210, 86, 72, .34);
    border-radius: 999px;
    background: rgba(210, 86, 72, .08);
    color: #ff9587;
    font-family: var(--mp-mono);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
  }
  .rank-pill i { font-style: normal; font-size: 15px; line-height: 1; }
  .rank-pill.ok {
    border-color: rgba(120, 218, 162, .34);
    background: rgba(120, 218, 162, .08);
    color: var(--moss-1);
  }
  /* Rang gerade erfuellt -> kurzer Pop. */
  .rank-pill.just-ok { animation: pill-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes pill-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.2); box-shadow: 0 0 14px rgba(120, 218, 162, .55); }
    100% { transform: scale(1); }
  }
  .bb-end {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }
  .bb-count {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
  }
  .bb-count.full { color: var(--moss-1); }
  .bb-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mp-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
  }
  .bb-status.ok { color: var(--moss-1); }
  .bb-status.miss { color: #ff9587; }
  .bb-save {
    min-width: 150px;
    min-height: 44px;
    font-size: 15px;
  }
  .bb-save:disabled { opacity: .55; }
  /* Deck spielbereit -> Speichern leuchtet einladend. */
  .bb-save.ready { animation: save-ready 1.7s ease-in-out infinite; }
  @keyframes save-ready {
    0%, 100% { box-shadow: 0 0 0 0 rgba(216, 177, 90, 0); }
    50% { box-shadow: 0 0 22px 2px rgba(216, 177, 90, .5); }
  }

  /* Aufstellung = Mini-Spielbrett im Stil des echten Boards (render.js / #board):
     Gefolge-Reihe oben, Grundreihe unten, Felder als Schachbrett (.sq-Optik). */
  .builder-board {
    position: relative;
    display: grid;
    gap: 2px;
    width: 100%;
    max-width: min(100%, 1200px);
    margin: 0 auto;
    padding: 8px;
    border: 2px solid var(--rift-gold);
    border-radius: 8px;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 50%, rgba(10,200,185,.16), transparent 52%),
      linear-gradient(135deg, #c89b3c, #3a2a13 34%, #0a1117 50%, #785a28 77%, #f0d283);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.86),
      0 0 26px rgba(10, 200, 185, .18),
      inset 0 0 0 1px rgba(240, 210, 131, .22);
  }
  /* Deck vollstaendig & gueltig -> Goldrahmen atmet. */
  .builder-board.complete { animation: bb-board-ready 2.4s ease-in-out infinite; }
  @keyframes bb-board-ready {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.86), 0 0 26px rgba(10, 200, 185, .18), inset 0 0 0 1px rgba(240, 210, 131, .22); }
    50% { box-shadow: 0 0 0 1px rgba(0,0,0,.86), 0 0 46px rgba(216, 177, 90, .45), inset 0 0 0 2px rgba(240, 210, 131, .7); }
  }
  .builder-rank-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
  }

  .builder-sq {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
  }
  .builder-sq.light {
    background:
      radial-gradient(circle at 48% 44%, rgba(240,210,131,.10), transparent 45%),
      linear-gradient(135deg, rgba(255,255,255,.05), transparent 30% 70%, rgba(0,0,0,.18)),
      repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 13px),
      var(--light);
  }
  .builder-sq.dark {
    background:
      radial-gradient(circle at 50% 42%, rgba(10,200,185,.08), transparent 42%),
      linear-gradient(135deg, rgba(255,255,255,.025), transparent 28% 74%, rgba(0,0,0,.28)),
      repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px),
      var(--dark);
  }

  /* Rarity-Akzent je belegtem Feld (Variablen -> ein Ring + Innenglow fuer alle). */
  .builder-sq.rarity-legendary { --sq-rar: rgba(216, 177, 90, .85); --sq-rar-soft: rgba(216, 177, 90, .28); }
  .builder-sq.rarity-epic { --sq-rar: rgba(184, 124, 232, .80); --sq-rar-soft: rgba(184, 124, 232, .26); }
  .builder-sq.rarity-rare { --sq-rar: rgba(110, 231, 216, .72); --sq-rar-soft: rgba(110, 231, 216, .22); }
  .builder-sq.rarity-common { --sq-rar: rgba(210, 214, 224, .5); --sq-rar-soft: rgba(210, 214, 224, .14); }

  .builder-sq .chip {
    width: 80%;
    cursor: pointer;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
  }
  .builder-sq.filled::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 2px var(--sq-rar, rgba(216, 177, 90, .4)), inset 0 0 16px var(--sq-rar-soft, transparent);
  }

  /* Platzieren: Figur "ploppt" rein, das Feld pulst kurz in der Rarity-Farbe. */
  .builder-sq.just-placed { z-index: 3; animation: bsq-place-pulse .6s ease-out; }
  .builder-sq.just-placed .chip { animation: bsq-place .44s cubic-bezier(.34, 1.56, .64, 1) both; }
  @keyframes bsq-place {
    0% { transform: translateY(-12px) scale(.4); opacity: 0; }
    60% { transform: translateY(0) scale(1.12); opacity: 1; }
    100% { transform: translateY(0) scale(1); }
  }
  @keyframes bsq-place-pulse {
    0% { box-shadow: inset 0 0 0 3px var(--sq-rar), inset 0 0 28px var(--sq-rar-soft); }
    100% { box-shadow: inset 0 0 0 0 transparent, inset 0 0 0 transparent; }
  }

  /* Entfernen-Hinweis: rotes x oben rechts, nur bei Hover/Focus des belegten Feldes. */
  .bs-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 6;
    display: grid;
    place-items: center;
    width: clamp(18px, 2vw, 24px);
    height: clamp(18px, 2vw, 24px);
    border-radius: 50%;
    background: rgba(210, 86, 72, .92);
    color: #fff;
    font-size: clamp(13px, 1.6vw, 17px);
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .12s ease, transform .12s ease;
    pointer-events: none;
  }
  .builder-sq.filled:hover .bs-remove,
  .builder-sq.filled:focus-visible .bs-remove {
    opacity: 1;
    transform: scale(1);
  }

  .bsq-hint {
    display: grid;
    place-items: center;
    gap: 2px;
    padding: 4px;
    opacity: .5;
    transition: opacity .12s ease;
    pointer-events: none;
  }
  .builder-sq.empty:hover,
  .builder-sq.empty:focus-visible {
    outline: none;
    box-shadow:
      inset 0 0 0 2px rgba(110, 231, 216, .55),
      inset 0 0 18px rgba(110, 231, 216, .18);
  }
  .builder-sq.empty:hover .bsq-hint,
  .builder-sq.empty:focus-visible .bsq-hint { opacity: .95; }
  .builder-sq.drop-ok {
    box-shadow:
      inset 0 0 0 2px rgba(110, 231, 216, .85),
      0 0 14px rgba(110, 231, 216, .25);
  }

  .bsq-coord {
    position: absolute;
    right: 4px;
    bottom: 3px;
    z-index: 5;
    color: color-mix(in srgb, var(--rift-gold-bright) 72%, rgba(255,255,255,.38));
    font-family: var(--mp-mono);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    opacity: .5;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.72);
  }

  .bs-rank-icon {
    color: color-mix(in srgb, var(--rift-gold-bright) 50%, var(--mp-ink-faint));
    font-size: clamp(22px, 4vw, 46px);
    line-height: 1;
  }
  .bs-label {
    max-width: 100%;
    overflow: hidden;
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: clamp(8px, .9vw, 11px);
    font-weight: 800;
    letter-spacing: .6px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Rang-Picker: Auswahl-Overlay fuer ein leeres Feld (nach Rang gefiltert). */
  /* Deck bauen/bearbeiten als Popup. Liegt unter dem Rang-Picker (z 1200). */
  .db-builder-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(12px, 3.5vh, 46px) 16px;
    overflow-y: auto;
    background: rgba(4, 5, 8, .76);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .db-builder-modal {
    position: relative;
    width: min(1100px, 100%);
    margin: auto;   /* vertikal mittig wenn Platz; bei zu hohem Inhalt top-sicher + scrollbar */
    padding: clamp(16px, 2vw, 28px);
    border: 1px solid rgba(216, 177, 90, .28);
    border-radius: 12px;
    background:
      radial-gradient(130% 72% at 50% -8%, rgba(216, 177, 90, .10), transparent 58%),
      linear-gradient(180deg, rgba(19, 22, 30, .97), rgba(8, 10, 14, .99));
    box-shadow: 0 40px 110px rgba(0, 0, 0, .62), inset 0 0 0 1px rgba(240, 210, 131, .07);
  }
  .db-builder-modal > .pcard-corner { width: 16px; height: 16px; opacity: .72; border-color: var(--mp-gold-1); }
  /* Im Popup traegt das Modal selbst den Kasten -> innere Box flach. */
  .db-builder-modal .builder-section {
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
  }
  .db-builder-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
  }
  .db-builder-close {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(10, 12, 16, .6);
    color: #e7ecf0;
    font-size: 22px;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
  }
  .db-builder-close:hover { background: rgba(30, 34, 42, .9); border-color: var(--mp-gold-1, #d4af37); transform: scale(1.05); }

  .builder-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(4, 5, 8, .72);
    backdrop-filter: blur(3px);
  }
  .builder-picker {
    position: relative;
    display: grid;
    gap: 16px;
    width: min(780px, 100%);
    max-height: min(84vh, 760px);
    padding: 20px 22px;
    border: 1px solid rgba(216, 177, 90, .28);
    border-radius: 12px;
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(216, 177, 90, .08), transparent 60%),
      radial-gradient(80% 60% at 100% 100%, rgba(77, 208, 196, .05), transparent 60%),
      rgba(10, 12, 16, .98);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .62), inset 0 0 0 1px rgba(240, 210, 131, .10);
    overflow: hidden;
  }
  .bp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(216, 177, 90, .14);
  }
  .bp-head-left { display: grid; gap: 4px; }
  .bp-kicker {
    color: var(--mp-gold-1);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
  }
  .bp-title {
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .bp-close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(216, 177, 90, .22);
    border-radius: 50%;
    background: rgba(7, 8, 11, .5);
    color: var(--mp-ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease, background .14s ease;
  }
  .bp-close:hover { color: var(--mp-bone); border-color: rgba(216, 177, 90, .4); }
  /* Picker nutzt dieselben Pool-Karten (.pool-card) wie der Pool. */
  .bp-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    overflow-y: auto;
    padding: 2px 4px 2px 2px;
  }
  .bp-empty {
    flex: 1 1 100%;
    padding: 26px 12px;
    color: var(--mp-ink-dim);
    font-family: var(--mp-serif-body);
    text-align: center;
  }

  .pool-card[draggable="true"] { cursor: grab; }
  .pool-card[draggable="true"]:active { cursor: grabbing; }
  .pool-card.disabled { cursor: default; }

  .builder-pool {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(216, 177, 90, .14);
    background: rgba(7, 8, 11, .34);
  }

  .pool-inner {
    display: grid;
    gap: 12px;
  }

  .pool-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(216, 177, 90, .10);
  }
  .pool-head-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .pool-filter {
    flex-wrap: wrap;
  }

  .pool-head span {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
  }

  .pool-head strong {
    color: var(--mp-gold-1);
    font-family: var(--mp-serif);
    font-size: 18px;
    letter-spacing: 1.2px;
  }

  .pool-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .pool-empty {
    flex: 1 1 100%;
    padding: 22px 16px;
    border: 1px dashed rgba(216, 177, 90, .16);
    border-radius: 8px;
    color: var(--mp-ink-dim);
    font-family: var(--mp-serif-body);
    font-size: 14px;
    font-style: italic;
    text-align: center;
  }

  /* Zentrales "+" einmal im Pool-Kopf (statt pro Karte). */
  .pool-head .pool-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .pool-head .pool-add {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(216, 177, 90, .5);
    color: var(--mp-gold-1);
    font-family: var(--mp-serif);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
  }
  .pool-head .pool-label {
    color: var(--mp-gold-1);
    font-size: 13px;
    letter-spacing: 1.6px;
  }
  .pool-head .pool-hint {
    color: var(--mp-ink-faint);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: none;
  }

  /* Pool-/Picker-Karte: feste, quadratische Kachel. Ruhe = Bild + Rang-Symbol +
     freie Anzahl (Eck-Marken). Hover = nur Glow + Name-Unterband. Die Kachel aendert
     NIE ihre Groesse -> kein Umordnen/Verspringen der Nachbarn beim Klick. */
  .pool-card {
    position: relative;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    padding: 9px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid rgba(216, 177, 90, .12);
    border-left: 3px solid var(--rarity-accent, rgba(216, 177, 90, .3));
    background: linear-gradient(180deg, rgba(20, 23, 31, .72), rgba(10, 12, 16, .86));
    transition: border-color .16s ease, box-shadow .18s ease, transform .16s ease;
  }
  .pool-card.rarity-legendary { --rarity-accent: rgba(216, 177, 90, .72); }
  .pool-card.rarity-epic { --rarity-accent: rgba(184, 124, 232, .60); }
  .pool-card.rarity-rare { --rarity-accent: rgba(110, 231, 216, .50); }
  .pool-card.rarity-common { --rarity-accent: rgba(180, 190, 205, .34); }
  .pool-card:not(.disabled):hover,
  .pool-card:not(.disabled):focus-visible {
    outline: none;
    transform: translateY(-3px);
    border-color: rgba(216, 177, 90, .42);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .55);
  }

  @media (prefers-reduced-motion: reduce) {
    .builder-sq.just-placed, .builder-sq.just-placed .chip, .builder-board.complete,
    .rank-pill.just-ok, .bb-save.ready { animation: none !important; }
  }
  .pool-card.disabled { opacity: .5; }

  .pc-art {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 34px;
    line-height: 1;
  }
  .pcArt {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .62));
  }

  /* Rang-Symbol: kleine Eck-Marke oben links (immer sichtbar). */
  .pc-glyph {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 15px;
    line-height: 1;
    color: var(--rarity-accent, var(--mp-ink-dim));
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
    pointer-events: none;
  }

  /* Freie Anzahl: kleine Eck-Marke oben rechts (immer sichtbar). */
  .pc-count {
    position: absolute;
    top: 4px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(216, 177, 90, .3);
    background: rgba(7, 8, 11, .82);
    color: var(--mp-bone);
    font-family: var(--mp-mono);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
  }

  /* Name: faded bei Hover als Unterband ein - ohne die Kachelgroesse zu aendern. */
  .pc-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 13px 5px 4px;
    background: linear-gradient(0deg, rgba(4, 5, 8, .97), rgba(4, 5, 8, 0));
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity .16s ease;
    pointer-events: none;
  }
  .pool-card:hover .pc-name,
  .pool-card:focus-visible .pc-name { opacity: 1; }

  /* ⓘ-Knopf: Dossier der Figur, erscheint beim Hovern der Karte (unten rechts,
     ueber dem Namensband). Kein Ruhe-Clutter; stoppt Klick/Drag der Karte. */
  .pc-info {
    position: absolute;
    right: 5px;
    top: 26px;
    z-index: 4;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(216, 177, 90, .4);
    background: rgba(7, 8, 11, .9);
    color: var(--mp-bone);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .14s ease, border-color .14s ease, background .14s ease, transform .12s ease;
  }
  .pool-card:hover .pc-info,
  .pool-card:focus-within .pc-info { opacity: 1; }
  .pc-info:hover {
    border-color: var(--mp-gold, rgba(216, 177, 90, .9));
    background: rgba(22, 25, 33, .96);
    transform: scale(1.12);
  }

  /* Einheitlicher Stil wie die uebrigen Seiten (Pack-Reveal, Figuren-Karten):
     scharfe Ecken statt runder fuer ALLE Gewoelbe-/Deckbuilder-Kaesten, Pillen,
     Eingaben und das Popup. */
  .deck-empty,
  .dcard,
  .dcard-crest,
  .dcard-active,
  .dcard-status,
  .dcomp-piece,
  .dcomp-x,
  .builder-section,
  .bt-name,
  .bt-active,
  .bt-tool,
  .builder-bar,
  .rank-pill,
  .builder-board,
  .builder-picker,
  .bp-close,
  .pool-empty {
    border-radius: 0;
  }
  /* Eckwinkel der Box brauchen einen Positionierungs-Kontext. */
  .builder-section { position: relative; }

  @media (max-width: 1180px) {
    .builder-grid {
      grid-template-columns: 1fr;
    }

    .builder-pool {
      position: relative;
      top: auto;
      border-left: 0;
      padding-left: 0;
    }
  }

  @media (max-width: 920px) {
    .bt-tools { margin-left: 0; }
    .bb-end { width: 100%; margin-left: 0; }
    .bb-save { flex: 1 1 auto; }
  }

  @media (max-width: 820px) {
    .dcard-grid {
      grid-template-columns: 1fr;
    }

    .pool-card { width: 78px; height: 78px; }

    .pr-foot { flex-direction: column; align-items: stretch; }
    .pr-actions { width: 100%; }
    .pr-actions .btn { flex: 1 1 auto; }
  }

/* ===========================================================
   Side-nav zone model: Membership CTA, Support Us, footer Codex
   =========================================================== */

/* Profile now lives in the avatar card at the top of the rail; the #navProfile
   button is kept only as a hidden click-proxy for the collection/lobby links.
   [hidden] alone loses to `.sideNavList button { display:grid }`, so force it. */
#navProfile { display: none !important; }

/* Membership CTA — gold, sits directly under the avatar */
.sideMembership {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(216, 177, 90, .38);
  background: linear-gradient(180deg, rgba(216, 177, 90, .17), rgba(216, 177, 90, .045));
  color: var(--mp-gold-1, #d8b15a);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.sideMembership .sideMembershipIcon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--mp-gold-1, #d8b15a);
}
.sideMembership .sideMembershipIcon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}
.sideMembership .sideMembershipText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sideMembership .sideMembershipTag {
  padding: 2px 6px;
  border: 1px solid rgba(216, 177, 90, .42);
  background: rgba(11, 13, 18, .55);
  color: var(--mp-gold-1, #d8b15a);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
}
.sideMembership:not(:disabled):hover,
.sideMembership:not(:disabled):focus-visible {
  border-color: var(--mp-gold-1, #d8b15a);
  background: linear-gradient(180deg, rgba(216, 177, 90, .26), rgba(216, 177, 90, .09));
  outline: none;
}
.sideMembership.isSoon { cursor: default; opacity: .92; }

/* ── Mitgliedschafts-Status im UI (Sidebar-Badge, Profil-Chip, Namensfarbe) ── */
.sideMembership.is-patron .sideMembershipTag {
  color: #0c0e13;
  border-color: #f0d27a;
  background: linear-gradient(180deg, #f0d27a, #c89a3e);
}
.sideMembership.is-supporter .sideMembershipTag {
  color: var(--mp-teal-1, #6ee7d8);
  border-color: rgba(77, 208, 196, .5);
  background: rgba(35, 155, 149, .1);
}
/* Farbiger Account-Name (Supporter-/Patron-Versprechen) */
body.is-patron .sideUserName,
body.is-patron .ptName { color: var(--mp-gold-1, #d8b15a); }
body.is-supporter .sideUserName,
body.is-supporter .ptName { color: var(--mp-teal-1, #6ee7d8); }

/* Profil-Hero: Mitglieds-Chip neben dem Namen */
.ptMemberChip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--mp-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border: 1px solid rgba(216, 177, 90, .4);
}
.ptMemberChip[hidden] { display: none; }
.ptMemberChip.is-patron {
  color: #0c0e13;
  border-color: #f0d27a;
  background: linear-gradient(180deg, #f0d27a, #c89a3e);
}
.ptMemberChip.is-supporter {
  color: var(--mp-teal-1, #6ee7d8);
  border-color: rgba(77, 208, 196, .5);
  background: rgba(35, 155, 149, .1);
}

/* Animiertes Patron-Abzeichen: Gold-Schimmer, der über das Badge streift. */
@keyframes mpBadgeShimmer {
  0% { background-position: -130% 0; }
  60%, 100% { background-position: 230% 0; }
}
.sideMembership.is-patron .sideMembershipTag,
.ptMemberChip.is-patron {
  position: relative;
  overflow: hidden;
}
.sideMembership.is-patron .sideMembershipTag::after,
.ptMemberChip.is-patron::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .32) 50%, transparent 58%);
  background-size: 230% 100%;
  animation: mpBadgeShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

/* Exklusiver Profil-Rahmen: Patron (Gold) / Supporter (Teal) um den Diamant-Avatar. */
body.is-patron .ptAvatar {
  box-shadow: inset 0 0 0 2px var(--mp-gold-1, #d8b15a), inset 0 0 0 5px rgba(216, 177, 90, .28);
  filter: drop-shadow(0 0 12px rgba(216, 177, 90, .45));
}
body.is-supporter .ptAvatar {
  box-shadow: inset 0 0 0 2px var(--mp-teal-1, #6ee7d8), inset 0 0 0 5px rgba(77, 208, 196, .24);
  filter: drop-shadow(0 0 12px rgba(77, 208, 196, .4));
}

/* Brett-Sigil: dezentes Mitglieds-Emblem in der Brett-Ecke (nur der Patron/
   Supporter selbst sieht es — rein kosmetisch, lokal). #boardWrap ist ein
   zentrierendes 1x1-Grid (place-items:center) -> das Sigil MUSS absolut in die
   Ecke, sonst säße es mittig auf dem Brett. pointer-events:none -> blockt nie. */
.boardCorner {
  position: absolute;
  left: 7px; bottom: 7px;
  width: 12px; height: 12px;
  display: grid; place-items: center;
  pointer-events: none;
  z-index: 3;
}
body.is-patron .boardCorner::before,
body.is-supporter .boardCorner::before {
  content: "";
  width: 9px; height: 9px;
  transform: rotate(45deg);
  border-radius: 1px;
  opacity: .85;
}
body.is-patron .boardCorner::before {
  background: linear-gradient(135deg, #f0d27a, #b08530);
  box-shadow: 0 0 7px rgba(216, 177, 90, .6);
}
body.is-supporter .boardCorner::before {
  background: linear-gradient(135deg, #9ee9e0, #2c8a82);
  box-shadow: 0 0 7px rgba(77, 208, 196, .5);
}

/* Checkout-Popup: Belohnungs-Zeile im Erfolgszustand */
.co-reward {
  margin: -8px auto 22px;
  max-width: 380px;
  padding: 10px 16px;
  font-family: var(--mp-sans);
  font-size: 13px;
  letter-spacing: .3px;
  color: var(--mp-teal-1, #6ee7d8);
  border: 1px solid rgba(77, 208, 196, .3);
  background: rgba(35, 155, 149, .08);
}
.co-reward b { color: var(--mp-bone, #e8dec5); font-weight: 700; }
.co-reward.muted { color: var(--mp-ink-dim, #847b65); border-color: rgba(216, 177, 90, .2); background: rgba(11, 13, 18, .5); }
.co-reward.muted b { color: var(--mp-ink, #aea58c); }

/* Support Us — quiet goodwill item pinned to the bottom of the nav rail */
.sideSupport {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  margin: 0 16px 10px;
  padding: 9px 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--mp-ink-dim);
  font: inherit;
  font-size: 12px;
  letter-spacing: .3px;
  text-align: left;
  cursor: pointer;
  opacity: .72;
}
.sideSupport .navIcon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--mp-gold-2);
}
.sideSupport .navIcon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sideSupport:not(:disabled):hover,
.sideSupport:not(:disabled):focus-visible {
  opacity: 1;
  border-color: rgba(216, 177, 90, .22);
  color: var(--mp-gold-1, #d8b15a);
  outline: none;
}
/* Beta-Feedback hebt sich vom (goldenen) Support-Knopf durch Teal ab. */
.sideFeedback:not(:disabled):hover,
.sideFeedback:not(:disabled):focus-visible {
  border-color: rgba(77, 208, 196, .30);
  color: var(--mp-teal-2, #4dd0c4);
}

/* Footer Codex — written-out label next to the utility icons */
.sideCodex {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--mp-ink-dim);
  font: inherit;
  font-size: 11px;
  letter-spacing: .4px;
  text-align: left;
  cursor: pointer;
}
/* Codex & Support sind jetzt aktive Buttons (öffnen je ein Info-Modal) —
   ruhig, aber nicht ausgegraut. */
#navCodex, #navSupport { opacity: .9; }
.sideCodex .navIcon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--mp-gold-2);
}
.sideCodex .navIcon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sideCodex .sideCodexText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sideCodex:not(:disabled):hover,
.sideCodex:not(:disabled):focus-visible {
  border-color: rgba(216, 177, 90, .30);
  color: var(--mp-gold-1, #d8b15a);
  outline: none;
}

/* Collapsed rail: shrink the standalone items to icon-only tiles */
body.side-nav-collapsed .sideSupport {
  width: 38px;
  margin: 0 auto 10px;
  grid-template-columns: 18px;
  justify-content: center;
  justify-items: center;
  padding: 0;
  min-height: 38px;
}
body.side-nav-collapsed .sideSupport .sideSupportText,
body.side-nav-collapsed .sideCodex .sideCodexText {
  display: none;
}
body.side-nav-collapsed .sideCodex {
  width: 38px;
  margin: 0 auto;
  grid-template-columns: 18px;
  justify-content: center;
  justify-items: center;
  padding: 0;
  min-height: 38px;
}

/* Footer Logout — real icon button sitting with the utility symbols */
.sideUtilityRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(216, 177, 90, .10);
}
.sideUtilityRow .sideUtility {
  flex: 1;
  padding: 0;
  border-top: 0;
}
.sideLogout {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--mp-ink-dim);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.sideLogout svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sideLogout:hover,
.sideLogout:focus-visible {
  border-color: rgba(200, 70, 70, .5);
  color: #e0786f;
  background: rgba(40, 14, 14, .4);
  outline: none;
}
/* Nachrichten als echtes Icon-Button in der Fußleiste (mit Ungelesen-Zähler). */
.sideUtilBtn {
  position: relative;
  width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid transparent; background: transparent;
  color: var(--mp-ink-dim); cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.sideUtilBtn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.sideUtilBtn:hover,
.sideUtilBtn:focus-visible {
  border-color: rgba(216, 177, 90, .3);
  color: var(--mp-gold-1, #d8b15a);
  outline: none;
}
.sideUtilBtn.is-current {
  color: var(--mp-teal-2, #4dd0c4);
  border-color: rgba(77, 208, 196, .4);
}
/* Sound-Stummschalter (Glocke): Bell <-> durchgestrichene Bell je nach Zustand. */
.sideMuteBtn .ic-bell-off { display: none; }
.sideMuteBtn.is-muted .ic-bell { display: none; }
.sideMuteBtn.is-muted .ic-bell-off { display: block; }
.sideMuteBtn.is-muted { color: var(--mp-ink-faint, #4a4537); }
.sideMuteBtn.is-muted:hover,
.sideMuteBtn.is-muted:focus-visible { color: var(--mp-gold-1, #d8b15a); }
.sideUtilBadge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #e0584f; color: #fff;
  font-family: var(--mp-mono, monospace);
  font-size: 10px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--bg, #0b0e14);
}
.sideUtilBadge[hidden] { display: none; }
body.side-nav-collapsed .sideUtilityRow {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
}
body.side-nav-collapsed .sideUtilityRow .sideUtility {
  flex: none;
  border-top: 0;
  padding: 0;
}

/* Collapsed rail: drop the Servers-Online panel, and turn the (text-hidden)
   section labels into the slim section dividers the user wanted back. */
body.side-nav-collapsed .sideStatus {
  display: none !important;
}
body.side-nav-collapsed .sideNavLabel {
  display: block !important;
  width: 26px;
  height: 0;
  margin: 11px auto;
  padding: 0;
  border-top: 1px solid rgba(216, 177, 90, .22);
  font-size: 0 !important;
  letter-spacing: 0;
  color: transparent;
  overflow: hidden;
}

/* Collapsed rail: keep ONLY the user avatar from the account block as a compact
   profile entry (click = profile). Name, rank, membership and the login form stay
   hidden to save vertical space. */
body.side-nav-collapsed .sideAccount {
  display: grid !important;
  margin: 14px auto 0;
  padding: 0;
  justify-items: center;
}
/* Pull the first section divider up so the avatar-to-divider gap matches the
   spacing between sections (the collapsed nav otherwise had a big top offset). */
body.side-nav-collapsed .sideNavList {
  margin-top: 0;
  padding-top: 0;
}
body.side-nav-collapsed .sideUserName,
body.side-nav-collapsed .sideUser small,
body.side-nav-collapsed .sideMembership,
body.side-nav-collapsed #authPanel {
  display: none !important;
}
body.side-nav-collapsed .sideUser {
  width: 40px;
  min-height: 40px;
  margin: 0 auto;
  padding: 0;
  grid-template-columns: 40px;
  justify-content: center;
  justify-items: center;
  border: 0;
  background: transparent;
}
body.side-nav-collapsed .sideUser .sideAvatar {
  grid-row: auto;
  width: 38px;
  height: 38px;
}

/* Ranked page sat at z-index:auto inside .modeScreen, so the animated
   .modeScreen::after mist (blur, z-index:0) painted over it like a veil.
   Lift the page content above the mist. */
.rankedPage {
  position: relative;
  z-index: 1;
}

/* ===========================================================
   OAuth login (Google + Discord) — primary login, magic link as fallback
   =========================================================== */
.authOauth {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.oauthBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(216, 177, 90, .22);
  background: rgba(11, 13, 18, .6);
  color: var(--mp-bone, #e8dec5);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .04s ease;
}
.oauthBtn:hover {
  border-color: rgba(216, 177, 90, .5);
  background: rgba(20, 23, 31, .82);
}
.oauthBtn:active { transform: translateY(1px); }
.oauthBtn:disabled { opacity: .6; cursor: default; }
.oauthIcon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.oauthDiscord { color: #c7d0ff; }
.oauthDiscord .oauthIcon { color: #5865F2; }
.authDivider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
  color: var(--mp-ink-dim);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.authDivider::before,
.authDivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 177, 90, .18), transparent);
}

/* ===========================================================
   Sidebar "Einloggen" button + login popup modal
   =========================================================== */
.authOpenBtn {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid rgba(77, 208, 196, .35);
  background: linear-gradient(180deg, rgba(77, 208, 196, .14), rgba(77, 208, 196, .04));
  color: var(--mp-teal-1, #6ee7d8);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.authOpenBtn:hover,
.authOpenBtn:focus-visible {
  border-color: var(--mp-teal-1, #6ee7d8);
  background: linear-gradient(180deg, rgba(77, 208, 196, .22), rgba(77, 208, 196, .07));
  outline: none;
}

.authModal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 4, 8, .72);
  backdrop-filter: blur(4px);
}
.authModal.show { display: flex; }
.authModalPanel {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 26px 24px 22px;
  border: 1px solid rgba(216, 177, 90, .22);
  background: linear-gradient(180deg, rgba(20, 24, 33, .97), rgba(12, 15, 21, .98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.authModalClose {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--mp-ink-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.authModalClose:hover { color: var(--mp-bone, #e8dec5); }
.authModalTitle {
  margin: 0 0 4px;
  color: var(--mp-bone, #e8dec5);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .4px;
}
.authModalSub {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12.5px;
}
.authModalPanel .authLoginForm {
  display: grid;
  gap: 8px;
}
.authModalPanel .authLoginForm input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(216, 177, 90, .2);
  background: rgba(8, 10, 14, .7);
  color: var(--mp-bone, #e8dec5);
  font: inherit;
  font-size: 13px;
}
.authModalPanel .authLoginForm input:focus-visible {
  border-color: rgba(216, 177, 90, .5);
  outline: none;
}
.authModalPanel .authLoginForm button {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(216, 177, 90, .25);
  background: rgba(11, 13, 18, .6);
  color: var(--mp-bone, #e8dec5);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s ease;
}
.authModalPanel .authLoginForm button:hover { border-color: rgba(216, 177, 90, .5); }
.authModalHint {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}

/* ===== Bestätigungsdialog (confirmDialog) ===== */
.confirmModal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 4, 8, .74);
  backdrop-filter: blur(4px);
}
.confirmModal.show { display: flex; }
.confirmModalPanel {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 24px 24px 20px;
  border: 1px solid rgba(216, 177, 90, .22);
  background: linear-gradient(180deg, rgba(20, 24, 33, .97), rgba(12, 15, 21, .98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: confirmPop .14s ease-out;
}
.confirmModalPanel.is-danger { border-color: rgba(229, 87, 62, .4); }
/* Eckklammern im Seiten-Stil */
.confirmModalPanel::before,
.confirmModalPanel::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(216, 177, 90, .55);
  pointer-events: none;
}
.confirmModalPanel.is-danger::before,
.confirmModalPanel.is-danger::after { border-color: rgba(229, 87, 62, .6); }
.confirmModalPanel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.confirmModalPanel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
@keyframes confirmPop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.confirmModalTitle {
  margin: 0 0 8px;
  color: var(--mp-bone, #e8dec5);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .4px;
}
.confirmModalMsg {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
}
.confirmModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.confirmModalActions button {
  padding: 9px 18px;
  border: 1px solid rgba(120, 150, 160, .25);
  background: rgba(11, 13, 18, .6);
  color: var(--mp-bone, #e8dec5);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.confirmCancel:hover { border-color: rgba(120, 150, 160, .5); background: rgba(20, 28, 34, .6); }
.confirmAccept { border-color: rgba(216, 177, 90, .35); }
.confirmAccept:hover { border-color: rgba(216, 177, 90, .6); background: rgba(216, 177, 90, .1); }
.confirmAccept.is-danger { color: #ff9b8a; border-color: rgba(229, 87, 62, .4); }
.confirmAccept.is-danger:hover { background: rgba(229, 87, 62, .14); border-color: rgba(229, 87, 62, .6); }

/* ===== Info-Modals (Codex & Regeln, Support Us) ===== */
.infoModal {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(2, 4, 8, .72);
  backdrop-filter: blur(4px);
}
.infoModal.show { display: flex; }
.infoModalPanel {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: min(86vh, 720px); overflow-y: auto;
  padding: 26px 26px 22px;
  border: 1px solid rgba(216, 177, 90, .22);
  background: linear-gradient(180deg, rgba(20, 24, 33, .98), rgba(12, 15, 21, .99));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.infoModalClose {
  position: absolute; top: 8px; right: 12px;
  width: 30px; height: 30px; border: 0; background: transparent;
  color: var(--mp-ink-dim); font-size: 24px; line-height: 1; cursor: pointer;
}
.infoModalClose:hover { color: var(--mp-bone, #e8dec5); }
.infoModalEyebrow {
  font-family: var(--mp-mono, monospace);
  font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--mp-teal-2, #4dd0c4);
}
.infoModalTitle {
  margin: 4px 0 16px;
  font-family: var(--mp-serif, 'Cinzel', serif);
  font-size: 21px; line-height: 1.2; color: var(--mp-bone, #e8dec5);
}
.infoModalBody { display: grid; gap: 14px; }
.codexSec { display: grid; gap: 5px; }
.codexSec h4 {
  margin: 0;
  font-family: var(--mp-mono, monospace);
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--mp-gold-1, #d8b15a);
}
.infoModalBody p, .infoModalBody li,
.info-body p, .info-body li {
  margin: 0;
  font-family: var(--mp-serif-body, serif);
  font-size: 14px; line-height: 1.55; color: rgba(232, 222, 197, .85);
}
.infoModalBody em, .info-body em { color: var(--mp-bone, #e8dec5); font-style: normal; font-weight: 600; }
.codexFactions, .supportList { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.codexFactions b, .supportList b { color: var(--fc, var(--mp-bone, #e8dec5)); }
.codexDot {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 1px;
  vertical-align: middle;
}
.codexDot--move { background: rgba(77, 208, 196, .8); }
.codexDot--cap { background: rgba(224, 88, 79, .85); }
.infoModalFoot {
  margin-top: 4px !important;
  padding-top: 12px; border-top: 1px solid rgba(216, 177, 90, .12);
  font-size: 12px !important; color: var(--mp-ink-dim, #847b65) !important;
}

/* ===== Info-Seiten (Codex & Regeln, Support Us) — 1:1-Port der Design-Vorlage.
   Markup: app/info-page.js -> #infoGrid (<div class="codex"> / <div class="support">).
   Header = globale .duell-*; Ambient-Glow vom seitenweiten mode-info (heroVignette),
   KEIN Block-Glow hier; Outer-Padding vom .infoPage-Wrapper (wie Puzzle/Play). ===== */
.codex, .support {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
}
.codex { max-width: 1180px; }
.support { max-width: 1100px; }
.codex .duell-head, .support .duell-head { margin-bottom: 32px; }

/* ----- Codex: Sprungmarken ----- */
.codex .codex-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.codex .codex-toc a {
  font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700;
  color: var(--mp-ink); padding: 8px 14px; text-decoration: none;
  border: 1px solid rgba(216, 177, 90, 0.16); background: rgba(11, 13, 18, 0.5);
  transition: color 150ms ease, border-color 150ms ease; cursor: pointer;
}
.codex .codex-toc a:hover { color: var(--mp-gold-1); border-color: rgba(216, 177, 90, 0.4); }

/* ----- Codex: Regel-Karten ----- */
.codex .codex-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 36px; }
.codex .rule-card {
  position: relative; padding: 26px 26px 24px;
  background: linear-gradient(180deg, rgba(20, 23, 31, 0.65), rgba(11, 13, 18, 0.82));
  border: 1px solid rgba(216, 177, 90, 0.14);
  transition: border-color 220ms ease, transform 220ms ease, background 220ms ease;
  scroll-margin-top: 96px;
}
.codex .rule-card::before, .codex .rule-card::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--mp-gold-3); transition: border-color 220ms;
}
.codex .rule-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.codex .rule-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.codex .rule-card:hover {
  border-color: rgba(77, 208, 196, 0.3); transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(26, 30, 40, 0.85), rgba(14, 17, 23, 0.92));
}
.codex .rule-card:hover::before, .codex .rule-card:hover::after { border-color: var(--mp-teal-2); }
.codex .rule-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.codex .rule-ico {
  width: 42px; height: 42px; display: grid; place-items: center;
  color: var(--mp-gold-1); border: 1px solid rgba(216, 177, 90, 0.28);
  transform: rotate(45deg); flex-shrink: 0;
}
.codex .rule-ico > * { transform: rotate(-45deg); }
.codex .rule-head-text { min-width: 0; }
.codex .rule-num { font-family: var(--mp-mono); font-size: 10px; letter-spacing: 2px; color: var(--mp-gold-2); margin-bottom: 4px; }
.codex .rule-title { font-family: var(--mp-serif); font-size: 21px; letter-spacing: 1px; color: var(--mp-bone); font-weight: 600; line-height: 1; }
.codex .rule-body { font-family: var(--mp-serif-body); font-size: 16.5px; line-height: 1.55; color: var(--mp-ink); }
.codex .rule-body b { color: var(--mp-bone); font-weight: 600; }
.codex .rule-legend { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.codex .legend-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.5px; color: var(--mp-ink); font-family: var(--mp-sans); }
.codex .legend-sq { width: 16px; height: 16px; border-radius: 2px; flex-shrink: 0; }
.codex .legend-sq.move { background: rgba(240, 210, 131, 0.35); box-shadow: inset 0 0 0 1px #e9c45f, 0 0 8px rgba(240,210,131,0.4); }
.codex .legend-sq.capture { background: rgba(194, 90, 74, 0.35); box-shadow: inset 0 0 0 1px var(--mp-danger), 0 0 8px rgba(194,90,74,0.4); }
.codex .legend-sq.effect { background: rgba(90, 154, 214, 0.35); box-shadow: inset 0 0 0 1px #5a9ad6, 0 0 8px rgba(90,154,214,0.4); }
.codex .rule-mana { display: flex; align-items: center; gap: 7px; margin-top: 16px; }
.codex .rule-mana .mana-pip { width: 26px; height: 8px; border-radius: 3px; background: rgba(216, 177, 90, 0.12); border: 1px solid rgba(77, 208, 196, 0.18); }
.codex .rule-mana .mana-pip.full { background: linear-gradient(180deg, #6ce4d8, #2b9088); border-color: rgba(108, 228, 216, 0.5); box-shadow: 0 0 6px rgba(77, 208, 196, 0.4); }
.codex .rule-mana .mana-label { font-family: var(--mp-mono); font-size: 11px; color: var(--mp-teal-1); margin-left: 4px; }

/* ----- Codex: Fraktionen ----- */
.codex .codex-faction-label {
  font-size: 10px; letter-spacing: 3px; color: var(--mp-ink-dim); text-transform: uppercase; font-weight: 700;
  margin-bottom: 16px; display: flex; align-items: center; gap: 12px; scroll-margin-top: 96px;
}
.codex .codex-faction-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(216,177,90,0.16), transparent); }
.codex .codex-factions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.codex .faction-codex {
  position: relative; padding: 24px 22px;
  background: linear-gradient(180deg, rgba(20, 23, 31, 0.6), rgba(11, 13, 18, 0.82));
  border: 1px solid rgba(216, 177, 90, 0.12); border-top: 2px solid var(--fc);
  transition: border-color 220ms ease, transform 220ms ease;
}
.codex .faction-codex:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--fc) 40%, transparent); border-top-color: var(--fc); }
.codex .faction-codex .fc-emblem {
  width: 48px; height: 48px; display: grid; place-items: center; color: var(--fc);
  border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); transform: rotate(45deg); margin-bottom: 16px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--fc) 16%, transparent), transparent 70%);
}
.codex .faction-codex .fc-emblem > * { transform: rotate(-45deg); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--fc) 60%, transparent)); }
.codex .faction-codex .fc-name { font-family: var(--mp-serif); font-size: 22px; letter-spacing: 1.5px; color: var(--fc); font-weight: 700; margin-bottom: 8px; }
.codex .faction-codex .fc-tags { font-family: var(--mp-mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mp-ink-dim); margin-bottom: 12px; }
.codex .faction-codex .fc-desc { font-family: var(--mp-serif-body); font-size: 16px; line-height: 1.5; color: var(--mp-ink); }
.codex .codex-note { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border: 1px dashed rgba(216, 177, 90, 0.22); background: rgba(11, 13, 18, 0.4); font-family: var(--mp-serif-body); font-size: 16px; color: var(--mp-ink-dim); }
.codex .codex-note .cn-ico { color: var(--mp-gold-2); flex-shrink: 0; display: grid; place-items: center; }
.codex .codex-note b { color: var(--mp-ink); font-weight: 600; }

/* Oeffentlicher Figuren-Codex: Galerie je Fraktion, Klick -> Dossier (piece-codex.js). */
.codex .codex-figures-intro {
  font-family: var(--mp-serif-body); font-size: 15px; line-height: 1.5;
  color: var(--mp-ink-dim); margin: -6px 0 22px;
}
.codex .codex-figures-intro b { color: var(--mp-ink); font-weight: 600; }
.codex .cxf-group { margin-bottom: 26px; }
.codex .cxf-group-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-family: var(--mp-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--fc); font-weight: 700;
}
.codex .cxf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 8px color-mix(in srgb, var(--fc) 70%, transparent); }
.codex .cxf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px;
}
.codex .cxf-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px 12px; cursor: pointer; text-align: center;
  container-type: inline-size;
  --rc: var(--fc);   /* Fallback; je Seltenheit überschrieben (siehe rarity-*) */
  /* Seltenheits-Glow ueber die GANZE Kachel (laeuft sanft aus, kein harter Box-Rand). */
  background:
    radial-gradient(118% 88% at 50% 34%, color-mix(in srgb, var(--rc) 13%, transparent) 0%, transparent 68%),
    linear-gradient(180deg, rgba(20, 23, 31, 0.55), rgba(11, 13, 18, 0.8));
  border: 1px solid rgba(216, 177, 90, 0.1); border-top: 2px solid color-mix(in srgb, var(--rc) 72%, transparent);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
/* Oberer Rahmen + Akzente = SELTENHEIT (gewöhnlich/selten/episch/legendär). */
.codex .cxf-tile.rarity-common { --rc: #b6c0cf; }
.codex .cxf-tile.rarity-rare { --rc: #6ee7d8; }
.codex .cxf-tile.rarity-epic { --rc: #b87ce8; }
.codex .cxf-tile.rarity-legendary { --rc: #f0d283; }
.codex .cxf-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--rc) 45%, transparent); border-top-color: var(--rc);
  box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--rc) 80%, transparent);
}
.codex .cxf-art {
  width: 76px; height: 76px; display: grid; place-items: center;
  /* Kein eigener Glow hier mehr — der Glow liegt auf der ganzen Kachel (.cxf-tile),
     damit er nicht an der Box-Kante hart aufhoert. */
}
.codex .cxf-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.codex .cxf-glyph { font-size: 40px; line-height: 1; }
.codex .cxf-rank {
  position: absolute; top: 8px; right: 9px; font-size: 12px; color: var(--rc); opacity: 0.85;
}
.codex .cxf-name {
  font-family: var(--mp-serif); color: var(--mp-ink); font-weight: 600;
  /* Auto-Fit: skaliert mit der Kachelbreite, lange Namen laufen nicht mehr ueber. */
  font-size: clamp(9.5px, 9cqi, 14px);
  letter-spacing: 0.2px;
  line-height: 1.12;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
@media (max-width: 600px) {
  .codex .cxf-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
  .codex .cxf-art { width: 60px; height: 60px; }
}

/* ----- Support: Coffee-Hero ----- */
.support .coffee {
  position: relative; text-align: center; padding: 48px 40px 44px; margin-bottom: 18px;
  background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(216, 177, 90, 0.16), transparent 65%), linear-gradient(180deg, rgba(28, 23, 13, 0.7), rgba(11, 12, 16, 0.85));
  border: 1px solid rgba(216, 177, 90, 0.3); overflow: hidden;
}
.support .coffee::before, .support .coffee::after { content: ""; position: absolute; width: 20px; height: 20px; border: 1px solid var(--mp-gold-2); }
.support .coffee::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.support .coffee::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.support .coffee-emblem { position: relative; width: 92px; height: 92px; margin: 0 auto 24px; display: grid; place-items: center; }
.support .ce-ring { position: absolute; inset: 0; border: 1px solid var(--mp-gold-3); transform: rotate(45deg); background: radial-gradient(circle at 50% 38%, rgba(216,177,90,0.18), rgba(8,9,13,0.6)); box-shadow: 0 0 28px rgba(216, 177, 90, 0.25); }
.support .ce-ring.inner { inset: 10px; border-color: rgba(216, 177, 90, 0.4); background: none; box-shadow: none; animation: ringRotate 28s linear infinite; }
.support .ce-ico { position: relative; color: var(--mp-gold-1); filter: drop-shadow(0 0 10px var(--mp-gold-glow)); }
.support .coffee-steam { position: absolute; top: 18px; left: 50%; width: 2px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, rgba(216,177,90,0.5), transparent); animation: steam 2.6s ease-in-out infinite; }
.support .coffee-steam.s2 { margin-left: -7px; animation-delay: 0.5s; }
.support .coffee-steam.s3 { margin-left: 5px; animation-delay: 1s; }
.support .coffee-title { font-family: var(--mp-serif); font-size: 34px; letter-spacing: 1.5px; color: var(--mp-bone); font-weight: 700; margin: 0 0 14px; }
.support .coffee-desc { font-family: var(--mp-serif-body); font-size: 18px; line-height: 1.5; color: var(--mp-ink); max-width: 460px; margin: 0 auto 28px; }
.support .coffee-cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; font-family: var(--mp-sans); font-weight: 700; font-size: 12.5px; letter-spacing: 2.5px; text-transform: uppercase; color: #0c0e13; background: linear-gradient(180deg, #f3d88a 0%, #d8b15a 45%, #ad8230 100%); border: 1px solid #f0d27a; box-shadow: 0 0 26px rgba(216, 177, 90, 0.28), inset 0 1px 0 rgba(255,255,255,0.4); cursor: pointer; }
.support .coffee-cta .cc-badge { font-size: 8.5px; letter-spacing: 1.5px; padding: 3px 7px; background: rgba(12, 14, 19, 0.35); border: 1px solid rgba(12, 14, 19, 0.4); border-radius: 2px; }
.support .coffee-tiers { display: flex; justify-content: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.support .coffee-tier { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 18px; border: 1px solid rgba(216, 177, 90, 0.16); background: rgba(11, 13, 18, 0.45); }
.support .coffee-tier .ct-amt { font-family: var(--mp-mono); font-size: 14px; color: var(--mp-gold-1); font-weight: 500; }
.support .coffee-tier .ct-name { font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); }

/* ----- Support: Mithelfen ----- */
.support .help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; }
.support .help-card { position: relative; padding: 24px 22px; background: linear-gradient(180deg, rgba(20, 23, 31, 0.6), rgba(11, 13, 18, 0.82)); border: 1px solid rgba(216, 177, 90, 0.12); transition: border-color 220ms ease, transform 220ms ease, background 220ms ease; display: flex; flex-direction: column; cursor: pointer; width: 100%; text-align: left; font: inherit; }
.support .help-card:hover { border-color: rgba(77, 208, 196, 0.3); transform: translateY(-3px); background: linear-gradient(180deg, rgba(26, 30, 40, 0.85), rgba(14, 17, 23, 0.92)); }
.support .help-card .hc-ico { width: 44px; height: 44px; display: grid; place-items: center; color: var(--mp-teal-1); border: 1px solid rgba(77, 208, 196, 0.28); transform: rotate(45deg); margin-bottom: 18px; }
.support .help-card .hc-ico > * { transform: rotate(-45deg); }
.support .help-card .hc-title { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 700; color: var(--mp-gold-1); margin-bottom: 10px; }
.support .help-card .hc-desc { font-family: var(--mp-serif-body); font-size: 16px; line-height: 1.5; color: var(--mp-ink); margin-bottom: 16px; }
.support .help-card .hc-action { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); transition: color 160ms; }
.support .help-card:hover .hc-action { color: var(--mp-teal-1); }
.support .help-card .hc-action .arrow { display: inline-flex; transition: transform 160ms; }
.support .help-card:hover .hc-action .arrow { transform: translateX(4px); }
.support .support-note { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border: 1px dashed rgba(216, 177, 90, 0.22); background: rgba(11, 13, 18, 0.4); font-family: var(--mp-serif-body); font-size: 16px; color: var(--mp-ink-dim); }
.support .support-note .sn-ico { color: var(--mp-gold-1); flex-shrink: 0; display: grid; place-items: center; }
.support .support-note b { color: var(--mp-ink); font-weight: 600; }

@keyframes ringRotate { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
@keyframes steam { 0%, 100% { opacity: 0; transform: translateY(3px); } 50% { opacity: .5; transform: translateY(-8px); } }

@media (max-width: 860px) {
  .codex .codex-rules { grid-template-columns: 1fr; }
  .codex .codex-factions { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .support .help-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .support .coffee { padding: 36px 22px; }
}

/* ============================================================
   MITGLIEDSCHAFT (mode-info, eigene Vollbildseite) — 1:1-Port.
   Seite unter .mbr gescoped; Checkout-Popup unter .co-overlay
   (haengt an document.body, daher nicht unter .mbr). Tokens -> --mp-*.
   Kein Block-Glow (Ambient-Glow von der mode-info heroVignette).
   ============================================================ */
.mbr {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  color: var(--mp-bone);
  font-family: var(--mp-sans);
}

/* Hero (zentriert) */
.mbr .mbr-hero { text-align: center; max-width: 860px; margin: 0 auto 14px; }
.mbr .mbr-hero .duell-eyebrow { justify-content: center; }
.mbr .mbr-hero .duell-title { font-size: clamp(40px, 5.6vw, 72px); }
.mbr .mbr-hero .duell-sub { margin: 0 auto; }
.mbr .mbr-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.mbr .mbr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink); border: 1px solid rgba(216, 177, 90, 0.18); background: rgba(11, 13, 18, 0.55); }
.mbr .mbr-chip .ic { color: var(--mp-teal-2); display: inline-flex; }

/* Tiers */
.mbr .mbr-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 880px; margin: 46px auto 0; align-items: stretch; }
.mbr .tier { position: relative; display: flex; flex-direction: column; padding: 30px 30px 28px; background: linear-gradient(180deg, rgba(20, 23, 31, 0.72), rgba(11, 13, 18, 0.9)); border: 1px solid rgba(216, 177, 90, 0.16); }
.mbr .tier::before, .mbr .tier::after { content: ""; position: absolute; width: 16px; height: 16px; border: 1px solid var(--mp-gold-3); }
.mbr .tier::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.mbr .tier::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.mbr .tier.featured { border-color: var(--mp-gold-1); background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(216, 177, 90, 0.12), transparent 65%), linear-gradient(180deg, rgba(28, 24, 14, 0.85), rgba(13, 12, 9, 0.92)); box-shadow: 0 0 0 1px rgba(216, 177, 90, 0.2), 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(216, 177, 90, 0.08); }
.mbr .tier.featured::before, .mbr .tier.featured::after { border-color: var(--mp-gold-1); width: 20px; height: 20px; }
.mbr .tier-ribbon { position: absolute; top: -1px; right: 24px; padding: 6px 12px 7px; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: #0c0e13; background: linear-gradient(180deg, #f0d27a, #c89a3e); }
.mbr .tier-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mbr .tier-emblem { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--mp-gold-3); transform: rotate(45deg); color: var(--mp-gold-1); background: linear-gradient(135deg, #1a1f2a, #0d1015); }
.mbr .tier.featured .tier-emblem { border-color: var(--mp-gold-1); box-shadow: 0 0 14px var(--mp-gold-glow); }
.mbr .tier-emblem > * { transform: rotate(-45deg); }
.mbr .tier-name { font-family: var(--mp-serif); font-size: 24px; letter-spacing: 1.5px; color: var(--mp-bone); font-weight: 700; line-height: 1; }
.mbr .tier-kicker { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--mp-gold-2); font-weight: 700; margin-top: 6px; }
.mbr .tier.featured .tier-kicker { color: var(--mp-gold-1); }
.mbr .tier-price { display: flex; align-items: baseline; gap: 7px; margin: 6px 0 4px; }
.mbr .tier-price .cur { font-family: var(--mp-serif); font-size: 22px; color: var(--mp-bone); }
.mbr .tier-price .amt { font-family: var(--mp-serif); font-size: 52px; line-height: 0.9; color: var(--mp-gold-1); font-weight: 700; }
.mbr .tier.featured .tier-price .amt { background: linear-gradient(180deg, #f5ebcf, #e8c879 55%, #b88a2f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mbr .tier-price .per { font-size: 12px; letter-spacing: 1px; color: var(--mp-ink-dim); text-transform: uppercase; font-weight: 700; }
/* Betrag-Switch: du entscheidest, wie viel du gibst — selbe Perks, nur der Preis aendert sich. */
.mbr .tier-switch { display: inline-flex; align-self: flex-start; margin: 4px 0 10px; padding: 3px; gap: 3px; border: 1px solid rgba(216, 177, 90, 0.22); background: rgba(7, 8, 11, 0.5); }
.mbr .tier-switch .tsw { padding: 6px 15px; font-family: var(--mp-serif); font-size: 15px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; color: var(--mp-ink-dim); background: none; border: none; cursor: pointer; transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.mbr .tier-switch .tsw .tsw-cur { font-size: 11px; margin-right: 1px; opacity: 0.85; }
.mbr .tier-switch .tsw:hover { color: var(--mp-bone); }
.mbr .tier-switch .tsw.on { color: #0c0e13; background: linear-gradient(180deg, #f0d27a 0%, #d8b15a 45%, #b08530 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
.mbr .tier-tagline { font-family: var(--mp-serif-body); font-size: 15.5px; line-height: 1.45; color: var(--mp-ink); margin: 8px 0 20px; font-style: italic; }
.mbr .tier-feats { list-style: none; margin: 0 0 24px; padding: 18px 0 0; border-top: 1px solid rgba(216, 177, 90, 0.12); display: flex; flex-direction: column; gap: 13px; flex: 1; }
.mbr .tier-feats li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--mp-ink); }
.mbr .tier-feats li .fi { color: var(--mp-teal-2); flex-shrink: 0; margin-top: 1px; display: inline-flex; }
.mbr .tier.featured .tier-feats li .fi { color: var(--mp-gold-1); }
.mbr .tier-feats li b { color: var(--mp-bone); font-weight: 600; }
.mbr .tier-feats .feat-group { font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--mp-ink-dim); font-weight: 700; margin-top: 4px; }
.mbr .tier-cta { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; border: 1px solid rgba(216, 177, 90, 0.4); background: rgba(18, 21, 28, 0.7); color: var(--mp-bone); cursor: pointer; transition: all 180ms ease; }
.mbr .tier-cta:hover { border-color: var(--mp-gold-1); color: var(--mp-gold-1); box-shadow: 0 0 20px rgba(216, 177, 90, 0.15); }
.mbr .tier.featured .tier-cta { color: #0c0e13; border-color: #f0d27a; background: linear-gradient(180deg, #f0d27a 0%, #d8b15a 45%, #b08530 100%); box-shadow: 0 0 30px rgba(216, 177, 90, 0.25), inset 0 1px 0 rgba(255,255,255,0.4); }
.mbr .tier.featured .tier-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 40px rgba(216, 177, 90, 0.45), inset 0 1px 0 rgba(255,255,255,0.5); color: #0c0e13; }
.mbr .tier-cta svg { display: inline-flex; }
.mbr .tier-note { text-align: center; font-size: 10px; letter-spacing: 1px; color: var(--mp-ink-faint); margin-top: 12px; }

/* Why */
.mbr .mbr-why { margin: 60px auto 0; max-width: 1080px; }
.mbr .mbr-why-head { text-align: center; margin-bottom: 30px; }
.mbr .mbr-why-eyebrow { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--mp-teal-2); font-weight: 700; margin-bottom: 12px; }
.mbr .mbr-why-title { font-family: var(--mp-serif); font-size: 30px; letter-spacing: 1px; color: var(--mp-bone); font-weight: 600; margin: 0; }
.mbr .mbr-why-sub { font-family: var(--mp-serif-body); font-size: 16px; line-height: 1.5; color: var(--mp-ink); margin: 12px auto 0; max-width: 560px; }
.mbr .mbr-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mbr .why { position: relative; padding: 24px 22px; background: linear-gradient(180deg, rgba(18, 21, 28, 0.6), rgba(11, 13, 18, 0.82)); border: 1px solid rgba(216, 177, 90, 0.12); transition: border-color 200ms ease, transform 200ms ease; }
.mbr .why:hover { border-color: rgba(77, 208, 196, 0.28); transform: translateY(-2px); }
.mbr .why .why-ic { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(216, 177, 90, 0.25); color: var(--mp-gold-1); margin-bottom: 16px; }
.mbr .why h4 { font-family: var(--mp-serif); font-size: 18px; letter-spacing: 0.6px; color: var(--mp-bone); margin: 0 0 8px; font-weight: 600; }
.mbr .why p { font-size: 13.5px; line-height: 1.5; color: var(--mp-ink); margin: 0; }

/* Honest banner */
.mbr .mbr-honest { position: relative; margin: 44px auto 0; max-width: 920px; display: flex; align-items: center; gap: 20px; padding: 24px 28px; background: rgba(35, 155, 149, 0.05); border: 1px solid rgba(77, 208, 196, 0.2); }
.mbr .mbr-honest .mh-ic { color: var(--mp-teal-1); flex-shrink: 0; display: grid; place-items: center; }
.mbr .mbr-honest .mh-text { font-family: var(--mp-serif-body); font-size: 16px; line-height: 1.5; color: var(--mp-ink); }
.mbr .mbr-honest .mh-text b { color: var(--mp-bone); font-weight: 600; }
.mbr .mbr-honest a { color: var(--mp-teal-1); border-bottom: 1px solid rgba(110,231,216,0.4); cursor: pointer; }

/* Support-Seite: Hinweis auf Mitgliedschaft */
.support .support-member { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 24px; margin-bottom: 30px; background: radial-gradient(ellipse 80% 120% at 0% 0%, rgba(216,177,90,0.08), transparent 60%), linear-gradient(180deg, rgba(20, 23, 31, 0.6), rgba(11, 13, 18, 0.82)); border: 1px solid rgba(216, 177, 90, 0.22); }
.support .support-member .sm-ico { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; color: var(--mp-gold-1); border: 1px solid rgba(216, 177, 90, 0.3); }
.support .support-member .sm-text { flex: 1; font-family: var(--mp-serif-body); font-size: 16px; line-height: 1.45; color: var(--mp-ink); }
.support .support-member .sm-text b { color: var(--mp-bone); font-weight: 600; }
.support .support-member .sm-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; font-family: var(--mp-sans); font-size: 11px; 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; }
.support .support-member .sm-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(216,177,90,0.4); }
.support .support-member .sm-cta .arrow { display: inline-flex; }

/* ===== Checkout-Popup (Membership) — haengt an document.body, daher global ===== */
.co-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(5, 6, 9, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: grid; place-items: center; padding: 28px; animation: coFade 200ms ease; }
@keyframes coFade { from { opacity: 0; } to { opacity: 1; } }
.co { position: relative; width: min(560px, 96vw); max-height: calc(100vh - 56px); overflow-y: auto; background: linear-gradient(180deg, rgba(16,19,26,0.97), rgba(9,10,14,0.99)); border: 1px solid rgba(216, 177, 90, 0.3); padding: 34px 36px 28px; font-family: var(--mp-sans); }
.co::before, .co::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2px solid var(--mp-gold-2); }
.co::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.co::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.co-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--mp-ink-dim); border: 1px solid rgba(216,177,90,0.2); background: transparent; cursor: pointer; transition: color 160ms, border-color 160ms; }
.co-close:hover { color: var(--mp-bone); border-color: var(--mp-gold-1); }
.co-eyebrow { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--mp-teal-2); font-weight: 700; margin-bottom: 10px; }
.co-title { font-family: var(--mp-serif); font-size: 30px; letter-spacing: 1px; color: var(--mp-bone); margin: 0 0 22px; font-weight: 700; }
.co-summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; margin-bottom: 22px; background: rgba(216, 177, 90, 0.05); border: 1px solid rgba(216, 177, 90, 0.2); }
.co-summary .cs-l { display: flex; align-items: center; gap: 12px; }
.co-summary .cs-emblem { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--mp-gold-3); transform: rotate(45deg); color: var(--mp-gold-1); }
.co-summary .cs-emblem > * { transform: rotate(-45deg); }
.co-summary .cs-name { font-family: var(--mp-serif); font-size: 18px; color: var(--mp-bone); font-weight: 600; }
.co-summary .cs-kicker { font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mp-gold-2); font-weight: 700; margin-top: 3px; }
.co-summary .cs-price { text-align: right; }
.co-summary .cs-price .a { font-family: var(--mp-serif); font-size: 28px; color: var(--mp-gold-1); font-weight: 700; }
.co-summary .cs-price .p { font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mp-ink-dim); font-weight: 700; }
.co-label { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--mp-ink-dim); font-weight: 700; margin: 0 0 10px; }
.co-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.co-pay button { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px; font-family: var(--mp-sans); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink); border: 1px solid rgba(216, 177, 90, 0.18); background: rgba(7,8,11,0.5); cursor: pointer; transition: all 150ms; }
.co-pay button.on { color: var(--mp-bone); border-color: var(--mp-teal-2); background: rgba(35,155,149,0.08); box-shadow: inset 0 0 0 1px rgba(77,208,196,0.2); }
.co-field { margin-bottom: 16px; }
.co-field input { width: 100%; padding: 13px 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; }
.co-field input::placeholder { color: var(--mp-ink-faint); font-style: italic; }
.co-field input:focus { border-color: rgba(77,208,196,0.45); }
.co-submit { width: 100%; padding: 15px; font-family: var(--mp-sans); font-size: 12px; letter-spacing: 2.5px; 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; margin-top: 4px; }
.co-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 30px rgba(216,177,90,0.4); }
.co-demo { text-align: center; font-size: 10px; letter-spacing: 0.5px; color: var(--mp-ink-faint); margin-top: 14px; }
.co-success { text-align: center; padding: 12px 0 6px; }
.co-success .cx-ring { width: 84px; height: 84px; margin: 0 auto 22px; display: grid; place-items: center; transform: rotate(45deg); border: 1px solid var(--mp-gold-2); color: var(--mp-teal-1); box-shadow: 0 0 26px rgba(216,177,90,0.2); }
.co-success .cx-ring > * { transform: rotate(-45deg); }
.co-success h3 { font-family: var(--mp-serif); font-size: 30px; letter-spacing: 1.5px; color: var(--mp-bone); margin: 0 0 10px; font-weight: 700; }
.co-success p { font-family: var(--mp-serif-body); font-size: 16px; line-height: 1.5; color: var(--mp-ink); margin: 0 auto 24px; max-width: 380px; }
.co-success .cx-done { display: inline-flex; padding: 13px 30px; font-family: var(--mp-sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-bone); border: 1px solid rgba(216,177,90,0.35); background: rgba(18,21,28,0.6); cursor: pointer; transition: color 160ms, border-color 160ms; }
.co-success .cx-done:hover { border-color: var(--mp-gold-1); color: var(--mp-gold-1); }

/* Membership responsive */
@media (max-width: 1100px) { .mbr .mbr-why-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .mbr .mbr-tiers { grid-template-columns: 1fr; }
  .co-pay { grid-template-columns: 1fr; }
  .support .support-member { flex-wrap: wrap; }
}

/* ===== Matchmaking-Overlay ("Suche Gegner", aus der Design-Vorlage) ===== */

.mmOverlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(7, 8, 11, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: mmOverlayIn 220ms ease;
}
.mmOverlay.show { display: grid; }
@keyframes mmOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.mmPanel {
  position: relative;
  text-align: center;
  width: min(520px, 100%);
  padding: 48px 56px;
  background: var(--mp-panel-2, rgba(12, 14, 19, .92));
  border: 1px solid rgba(216, 177, 90, .3);
}
.mmPanel::before, .mmPanel::after {
  content: "";
  position: absolute;
  width: 24px; height: 24px;
  border: 2px solid var(--mp-gold-2, #c89a3e);
}
.mmPanel::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.mmPanel::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.mmClose {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  border: none;
  color: var(--mp-ink-dim, #847b65);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease;
}
.mmClose:hover { color: var(--mp-bone, #e8dec5); }

.mmEyebrow {
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--mp-teal-1, #6ee7d8);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}
.mmTitle {
  font-family: var(--mp-serif, "Cinzel", Georgia, serif);
  font-size: 40px;
  color: var(--mp-bone, #e8dec5);
  letter-spacing: 5px;
  margin: 0 0 8px;
  font-weight: 700;
}
.mmSub {
  font-family: var(--mp-serif-body, "Cormorant Garamond", Georgia, serif);
  color: var(--mp-parchment, #ece2c8);
  font-size: 16px;
  font-style: italic;
  margin: 0 0 30px;
}

.mmRing {
  width: 110px; height: 110px;
  margin: 0 auto 28px;
  border: 1px solid var(--mp-gold-3, #8a6a25);
  position: relative;
  transform: rotate(45deg);
  display: grid;
  place-items: center;
}
.mmRing::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--mp-gold-2, #c89a3e);
  animation: mmSpin 4s linear infinite;
}
.mmRing::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 2px solid transparent;
  border-top-color: var(--mp-teal-1, #6ee7d8);
  animation: mmSpin 1.4s linear infinite;
}
@keyframes mmSpin { to { transform: rotate(360deg); } }
.mmGlyph {
  font-family: var(--mp-serif, "Cinzel", Georgia, serif);
  font-size: 42px;
  color: var(--mp-gold-1, #d8b15a);
  transform: rotate(-45deg);
  filter: drop-shadow(0 0 12px var(--mp-gold-glow, rgba(216, 177, 90, .35)));
}

.mmRows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 26px;
  padding: 16px 0;
  border-top: 1px solid rgba(216, 177, 90, .15);
  border-bottom: 1px solid rgba(216, 177, 90, .15);
}
.mmRow .k {
  font-size: 9.5px;
  letter-spacing: 2px;
  color: var(--mp-ink-dim, #847b65);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 700;
}
.mmRow .v {
  font-family: var(--mp-mono, ui-monospace, monospace);
  color: var(--mp-gold-1, #d8b15a);
  font-size: 14px;
}
.mmRow .v.teal { color: var(--mp-teal-1, #6ee7d8); }

.mmCancel {
  font-family: var(--mp-sans, system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-bone, #e8dec5);
  background: rgba(216, 177, 90, .06);
  border: 1px solid rgba(216, 177, 90, .3);
  padding: 12px 28px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.mmCancel:hover {
  background: rgba(216, 177, 90, .14);
  border-color: rgba(216, 177, 90, .5);
}

@media (max-width: 560px) {
  .mmPanel { padding: 38px 24px; }
  .mmTitle { font-size: 32px; }
}

/* =====================================================================
   TRAINING — Akademie (Lernpfad) + On-Board Coach Bubble
   Reuses the vault aesthetic: panel-less header, sharp content boxes with
   L-bracket corners, smooth glows, faction tone identity, teal = active.
   ===================================================================== */

.lessonsPage { width: 100%; }
.lessonsGrid { width: 100%; }
/* =====================================================================
   Training / Akademie — 1:1-Port der Claude-Design-Vorlage.
   Markup rendert app/lessons.js in #lessonsGrid als
   <div class="academy ac-root">. Selektoren unter .ac-root gescoped;
   Titel/Eyebrow/Sub nutzen die globalen .duell-title/.duell-eyebrow/.duell-sub.
   Outer-Padding kommt vom .lessonsPage-Wrapper (wie Puzzle/Play).
   ===================================================================== */
.ac-root {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
/* Kein eigener Glow auf dem zentrierten .ac-root-Block — der saesse mittig auf der
   Seite (zentriert) statt am Rand und braechte eine harte Kante. Der Ambient-Glow
   kommt vom seitenweiten body.mode-lessons .modeScreen (wie Play/Puzzle). */
.ac-root > * { position: relative; z-index: 1; }

/* Header: Titelblock + Fortschritts-Medaillon */
.ac-root .academy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}
/* Keine max-width — sonst clippt der breite .duell-title (background-clip:text). */
.ac-root .ah-left { min-width: 0; }
.ac-root .academy-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  background:
    radial-gradient(ellipse 90% 100% at 100% 0%, rgba(216, 177, 90, 0.1), transparent 70%),
    rgba(11, 13, 18, 0.6);
  border: 1px solid rgba(216, 177, 90, 0.22);
  flex-shrink: 0;
}
.ac-root .ap-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ac-root .ap-ring svg { transform: rotate(-90deg); display: block; }
.ac-root .ap-num {
  position: absolute;
  font-family: var(--mp-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--mp-gold-1);
}
.ac-root .ap-meta { display: flex; flex-direction: column; gap: 3px; }
.ac-root .ap-label {
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
}
.ac-root .ap-state {
  font-family: var(--mp-serif);
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--mp-bone);
  font-weight: 600;
}

/* Anmelde-Hinweis (Gäste) */
.ac-root .academy-login {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 11px 16px;
  font: inherit;
  font-size: 13px;
  color: var(--mp-bone);
  background: rgba(216, 177, 90, 0.06);
  border: 1px solid rgba(216, 177, 90, 0.28);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.ac-root .academy-login:hover { background: rgba(216, 177, 90, 0.12); border-color: rgba(216, 177, 90, 0.5); }

/* Lektionspfad */
.ac-root .academy-path { position: relative; }
.ac-root .academy-path::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 38px;
  bottom: 38px;
  width: 2px;
  background: linear-gradient(180deg, var(--mp-gold-2), rgba(216, 177, 90, 0.25));
  z-index: 0;
}
.ac-root .lesson {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 20px;
  margin-bottom: 16px;
}
.ac-root .lesson:last-child { margin-bottom: 0; }
.ac-root .lesson-node {
  display: flex;
  justify-content: center;
  padding-top: 26px;
  position: relative;
  z-index: 1;
}
.ac-root .lesson-node .node {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-family: var(--mp-serif);
  font-size: 13px;
  font-weight: 700;
  background: radial-gradient(circle at 40% 35%, #f0d27a, #c89a3e);
  color: #0c0e13;
  box-shadow: 0 0 0 4px var(--mp-bg-0), 0 0 14px rgba(216, 177, 90, 0.4);
}
.ac-root .lesson-node .node.locked {
  background: radial-gradient(circle at 40% 35%, #2a2f3a, #14171f);
  color: var(--mp-ink-dim);
  box-shadow: 0 0 0 4px var(--mp-bg-0), inset 0 0 0 1px rgba(216, 177, 90, 0.2);
}

/* Karte */
.ac-root .lesson-card {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 18px 24px 18px 18px;
  background: linear-gradient(100deg, rgba(20, 23, 31, 0.7), rgba(11, 13, 18, 0.82) 70%);
  border: 1px solid rgba(216, 177, 90, 0.14);
  transition: all 220ms ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.ac-root .lesson-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--mp-gold-2), transparent);
  opacity: 0;
  transition: opacity 220ms;
}
.ac-root .lesson-card:hover {
  border-color: rgba(77, 208, 196, 0.34);
  transform: translateX(3px);
  background: linear-gradient(100deg, rgba(26, 30, 40, 0.85), rgba(14, 17, 23, 0.92) 70%);
}
.ac-root .lesson-card:hover::after { opacity: 1; }

/* Art-Kachel */
.ac-root .lesson-art {
  position: relative;
  width: 92px; height: 92px;
  border: 1px solid rgba(216, 177, 90, 0.25);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: #06080b;
}
.ac-root .lesson-art img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.ac-root .lesson-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7,9,13,0.55) 100%);
}
.ac-root .lesson-art .la-glyph {
  position: relative;
  z-index: 1;
  color: var(--mp-gold-1);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}
.ac-root .lesson-art.art-basics {
  background: repeating-conic-gradient(from 0deg at 50% 50%, #1d2330 0deg 90deg, #141925 90deg 180deg);
  background-size: 46px 46px;
}
.ac-root .lesson-art.art-basics::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(216,177,90,0.16), transparent 70%);
}
.ac-root .lesson-art.art-mana {
  background: radial-gradient(circle at 50% 42%, rgba(77,208,196,0.4), rgba(16,30,32,0.6) 60%, #0b1416 100%);
}
.ac-root .lesson-art.art-mana .la-glyph { color: var(--mp-teal-1); filter: drop-shadow(0 0 8px rgba(77,208,196,0.6)); }

/* Meta */
.ac-root .lesson-meta { min-width: 0; }
.ac-root .lm-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-gold-2);
  margin-bottom: 8px;
}
.ac-root .lm-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--mp-teal-1);
}
.ac-root .lm-status::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mp-teal-1);
  box-shadow: 0 0 6px var(--mp-teal-1);
}
.ac-root .lm-status.is-open { color: var(--mp-ink-dim); }
.ac-root .lm-status.is-open::before { display: none; }
.ac-root .lm-title {
  font-family: var(--mp-serif);
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--mp-bone);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}
.ac-root .lm-desc {
  font-family: var(--mp-serif-body);
  font-size: 16px;
  color: var(--mp-ink);
  line-height: 1.4;
  margin-bottom: 12px;
}
.ac-root .lm-progress {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
}
.ac-root .lm-dots { display: inline-flex; gap: 4px; }
.ac-root .lm-dot {
  width: 8px; height: 8px;
  transform: rotate(45deg);
  background: rgba(216, 177, 90, 0.18);
  border: 1px solid rgba(216, 177, 90, 0.3);
}
.ac-root .lm-dot.full {
  background: linear-gradient(180deg, #f0d27a, #c89a3e);
  border-color: #f0d27a;
  box-shadow: 0 0 6px rgba(216, 177, 90, 0.4);
}

/* Aktion */
.ac-root .lesson-action {
  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-teal-1);
  border: 1px solid rgba(77, 208, 196, 0.3);
  background: rgba(35, 155, 149, 0.06);
  white-space: nowrap;
  transition: all 160ms ease;
}
.ac-root .lesson-card:hover .lesson-action {
  border-color: var(--mp-teal-1);
  background: rgba(35, 155, 149, 0.14);
}
.ac-root .lesson-action .arrow { display: inline-flex; transition: transform 160ms; }
.ac-root .lesson-card:hover .lesson-action .arrow { transform: translateX(4px); }

/* Fuß-Strip */
.ac-root .academy-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  padding: 22px;
  border: 1px dashed rgba(216, 177, 90, 0.22);
  background: rgba(11, 13, 18, 0.4);
  text-align: center;
  flex-wrap: wrap;
}
.ac-root .an-text {
  font-family: var(--mp-serif-body);
  font-size: 17px;
  color: var(--mp-ink);
}
.ac-root .an-text b { color: var(--mp-bone); font-weight: 600; }
.ac-root .an-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  font-family: var(--mp-sans);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: #0c0e13;
  background: linear-gradient(180deg, #f3d88a 0%, #d8b15a 45%, #ad8230 100%);
  border: 1px solid #f0d27a;
  box-shadow: 0 0 24px rgba(216, 177, 90, 0.22), inset 0 1px 0 rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 180ms ease;
}
.ac-root .an-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(216, 177, 90, 0.4), inset 0 1px 0 rgba(255,255,255,0.5); }
.ac-root .an-cta .arrow { display: inline-flex; transition: transform 160ms; }
.ac-root .an-cta:hover .arrow { transform: translateX(4px); }

@media (max-width: 1180px) {
  .ac-root .academy-head { flex-direction: column; gap: 22px; }
}
@media (max-width: 680px) {
  .ac-root .lesson { grid-template-columns: 40px 1fr; gap: 12px; }
  .ac-root .academy-path::before { left: 19px; }
  .ac-root .lesson-card { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .ac-root .lesson-art { width: 100%; height: 120px; }
  .ac-root .lesson-action { justify-content: center; }
}

/* =====================================================================
   On-board coach bubble — anchored to a square, points at it.
   Mounted in #boardWrap so renderBoard (clears #board only) never wipes it.
   ===================================================================== */
.coachLayer {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.coachLayer[hidden] { display: none; }

.coach-bubble {
  position: absolute;
  max-width: min(330px, 80%);
  padding: 12px 13px 13px;
  pointer-events: none;
  color: var(--mp-bone);
  border: 1px solid color-mix(in srgb, var(--accent, #d8b15a) 60%, rgba(216, 177, 90, .4));
  background: linear-gradient(180deg, rgba(12, 16, 22, .96), rgba(7, 9, 13, .975));
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 22px color-mix(in srgb, var(--accent, #d8b15a) 20%, transparent);
  animation: coachPop .2s ease;
}
.coach-bubble.tone-gold { --accent: #d8b15a; }
.coach-bubble.tone-teal { --accent: #45cfc3; }
.coach-bubble.tone-moss { --accent: #5cd49a; }
.coach-bubble button { pointer-events: auto; }
.coach-bubble.is-error { animation: coachShake .42s ease; }

@keyframes coachPop { from { opacity: 0; } to { opacity: 1; } }
@keyframes coachShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.coach-corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--accent, #d8b15a) 70%, transparent);
  opacity: .7;
  pointer-events: none;
  z-index: 2;
}
.coach-corner.tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.coach-corner.tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; }
.coach-corner.bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; }
.coach-corner.br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

.coach-tail {
  position: absolute;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, rgba(12, 16, 22, .96), rgba(7, 9, 13, .975));
  border: 1px solid color-mix(in srgb, var(--accent, #d8b15a) 60%, rgba(216, 177, 90, .4));
  transform: translateX(-50%) rotate(45deg);
}
.coach-bubble[data-placement="above"] .coach-tail { bottom: -8px; border-left: 0; border-top: 0; }
.coach-bubble[data-placement="below"] .coach-tail { top: -8px; border-right: 0; border-bottom: 0; }
.coach-bubble[data-placement="center"] .coach-tail { display: none; }

.coach-head { display: flex; align-items: center; gap: 10px; }
.coach-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent, #d8b15a) 50%, transparent);
  background: rgba(5, 8, 12, .82);
  color: color-mix(in srgb, var(--accent, #d8b15a) 80%, var(--mp-bone));
  font-size: 20px;
}
.coach-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coach-ident { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.coach-name { font-family: var(--mp-serif); font-size: 14px; letter-spacing: .5px; color: var(--mp-bone); }
.coach-progress {
  font-family: var(--mp-mono);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, #d8b15a) 72%, var(--mp-ink-dim));
}
.coach-x {
  margin-left: auto;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 177, 90, .25);
  background: rgba(5, 8, 12, .6);
  color: var(--mp-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.coach-x:hover { color: var(--mp-bone); border-color: color-mix(in srgb, var(--accent, #d8b15a) 50%, transparent); }

.coach-task {
  margin-top: 9px;
  font-family: var(--mp-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--mp-bone);
}
.coach-copy {
  margin-top: 5px;
  font-family: var(--mp-serif-body);
  font-size: 14.5px;
  line-height: 1.32;
  color: rgba(232, 222, 197, .8);
}
.coach-msg {
  margin-top: 9px;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.3;
  border-left: 2px solid #e26a6a;
  background: rgba(176, 48, 80, .16);
  color: #ffd6d6;
}
.coach-msg.success { border-left-color: #7bbf9a; background: rgba(90, 192, 140, .14); color: #dff8e8; }

/* Lesson/Training complete card — centred, no anchor tail */
.coach-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 22px 24px;
  max-width: min(380px, 88%);
}
.coach-avatar-lg { width: 60px; height: 60px; font-size: 30px; }
.coach-complete-head { font-family: var(--mp-serif); font-size: 22px; letter-spacing: 1px; color: var(--mp-bone); }
.coach-complete-sub { font-family: var(--mp-serif-body); font-size: 15px; line-height: 1.3; color: rgba(232, 222, 197, .82); }
.coach-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.coach-btn {
  pointer-events: auto;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #d8b15a) 45%, transparent);
  background: rgba(8, 12, 18, .7);
  color: var(--mp-bone);
  font-family: var(--mp-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
}
.coach-btn:hover { border-color: color-mix(in srgb, var(--accent, #d8b15a) 70%, transparent); }
.coach-btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #d8b15a) 88%, #fff 6%), color-mix(in srgb, var(--accent, #d8b15a) 72%, #000 8%));
  color: #0c0e13;
  border-color: transparent;
}

/* "Effektleiste" pointer hint inside the bubble during an ability step */
.coach-rail-hint {
  margin-top: 8px;
  font-family: var(--mp-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mp-teal-1, #6ee7d8);
}

/* The ability the tutorial wants you to click pulses teal (teal = attention) */
.effectChip.tutorial-wants-this {
  border-color: var(--mp-teal-2, #4dd0c4) !important;
  animation: tutorialWantPulse 1.15s ease-in-out infinite;
}
@keyframes tutorialWantPulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--mp-teal-2, #4dd0c4), 0 0 9px rgba(77, 208, 196, .4); }
  50%      { box-shadow: 0 0 0 2px var(--mp-teal-1, #6ee7d8), 0 0 22px rgba(77, 208, 196, .7); }
}

/* Collapsed effect-group / graveyard header: a clean dot instead of the count */
.effectGroupHeader b.effectGroupDot {
  min-width: 6px;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--group-tone, var(--rift-gold-bright, #d8b15a)) 70%, transparent);
  font-size: 0;
}

/* ===================================================================== */
/* PUZZLES — Hub page, in-board solving HUD, dopamine celebration.        */
/* Self-contained block (top level): page show/hide handled by the        */
/* mode-puzzle lists above. Design: free-floating headers, sharp corner-  */
/* bracketed boxes, teal = active / gold = reward, smooth glows.          */
/* ===================================================================== */

.puzzlePage { width: 100%; }
.puzzleGrid { width: 100%; }

.pz-root {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  display: grid;
  gap: clamp(20px, 3vh, 30px);
  align-content: start;
  color: var(--mp-parchment, #e8e2d0);
}
/* Kein eigener Glow auf dem zentrierten .pz-root-Block — der erzeugte eine harte
   Kante an der Container-Kante (zentriert -> Kante sitzt mitten auf der Seite, nicht
   am Rand). Der Ambient-Glow kommt vom seitenweiten body.mode-puzzle .modeScreen
   (teal oben-rechts + gold unten-links, weich von den Seitenecken). Wie bei Play. */
.pz-root > * { position: relative; z-index: 1; }
.pz-root .duell-head { margin-bottom: 6px; }
.pz-root .pz-section-label { margin-top: 14px; }

/* === Hero panel: static board preview + meters + solve CTA + stats === */
.pz-root .pz-hero {
  position: relative;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 28px;
  padding: 28px;
  border: 1px solid rgba(77, 208, 196, .22);
  background: linear-gradient(180deg, rgba(13, 16, 22, .6), rgba(8, 9, 13, .85));
}
.pz-root .pz-hero::before, .pz-root .pz-hero::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid var(--mp-teal-2);
}
.pz-root .pz-hero::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.pz-root .pz-hero::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* --- board preview column (our own pieces, non-interactive) --- */
.pz-root .pz-board-col { display: flex; flex-direction: column; min-width: 0; }
.pz-root .pz-board-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; }
/* Mini-Vorschau spiegelt das echte Spielbrett (#boardWrap > #board > .sq) 1:1 wider:
   gold-gerahmtes Panel, geschmolzener Goldrahmen, texturierte Felder, Gold-Koordinaten. */
.pz-root .pzb-stage {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 8px;
  border: 1px solid rgba(200, 155, 60, .56); border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(240, 210, 131, .17), transparent 24% 76%, rgba(10, 200, 185, .13)),
    linear-gradient(180deg, #1b1820, #0b0f15 68%, #050607);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.72),
    0 0 26px rgba(10, 200, 185, .11),
    inset 0 0 0 2px rgba(120, 90, 40, .45),
    inset 0 0 24px rgba(0,0,0,.86);
}
.pz-root .pzb-frame {
  position: relative; width: 100%; height: 100%; display: grid; place-items: center;
  padding: 4px; border: 2px solid var(--rift-gold); border-radius: 7px; overflow: hidden;
  background: var(--mp-board-frame);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.86),
    0 0 22px rgba(10, 200, 185, .22),
    inset 0 0 0 1px rgba(240, 210, 131, .22),
    inset 0 0 28px rgba(0,0,0,.70);
}
.pz-root .pzb-frame::before {
  content: ""; position: absolute; inset: 4px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(240,210,131,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.42), inset 0 0 32px rgba(0,0,0,.46);
}
.pz-root .pzb-frame::after {
  content: ""; position: absolute; inset: 4px; z-index: 4; pointer-events: none; opacity: .22; mix-blend-mode: screen;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(10,200,185,.45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(10,200,185,.45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(240,210,131,.35) 16% 17%, transparent 18% 100%);
}
.pz-root .pzb-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 1px; width: 100%; height: 100%; }
.pz-root .pzb-tile {
  position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  background: var(--mp-sq-dark);
}
.pz-root .pzb-tile.light { background: var(--mp-sq-light); }
.pz-root .pzb-tile::before {
  content: ""; position: absolute; inset: 9%; border: 1px solid rgba(240,210,131,.11);
  opacity: .7; pointer-events: none; z-index: 0;
}
.pz-root .pzb-tile:nth-child(1), .pz-root .pzb-tile:nth-child(8),
.pz-root .pzb-tile:nth-child(57), .pz-root .pzb-tile:nth-child(64) { box-shadow: inset 0 0 0 1px rgba(240,210,131,.18); }
.pz-root .pzb-tile.target { box-shadow: inset 0 0 0 1px rgba(77, 208, 196, .5); }
.pz-root .pzb-coord {
  position: absolute; z-index: 5; pointer-events: none; font-weight: 800; line-height: 1;
  font-size: clamp(6px, 0.85vw, 11px);
  color: color-mix(in srgb, var(--rift-gold-bright) 72%, rgba(255,255,255,.38));
  opacity: .62; text-shadow: 0 1px 2px rgba(0,0,0,.72), 0 0 5px rgba(240,210,131,.22);
}
.pz-root .pzb-rank { top: 3px; left: 3px; }
.pz-root .pzb-file { bottom: 2px; right: 3px; }
.pz-root .pzb-target-ring {
  position: absolute; inset: 16%; border-radius: 50%;
  border: 1.5px dashed rgba(77, 208, 196, .6); box-shadow: 0 0 12px rgba(77, 208, 196, .3);
  animation: pzbTarget 2.4s ease-in-out infinite;
}
@keyframes pzbTarget { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.pz-root .pzb-piece { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; place-items: center; }
.pz-root .pzb-piece img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .7)); }
.pz-root .pzb-glyph { font-size: clamp(12px, 2.6vw, 22px); }

.pz-root .pz-board-caption {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 12px 14px;
  background: rgba(11, 13, 18, .6); border: 1px solid rgba(216, 177, 90, .14);
}
.pz-root .bc-theme { font-size: 9.5px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--mp-gold-2); margin-bottom: 4px; }
.pz-root .bc-task { font-family: var(--mp-serif); font-size: 16px; letter-spacing: .5px; color: var(--mp-bone); font-weight: 600; }
.pz-root .pz-turn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--mp-bone);
  padding: 7px 12px; border: 1px solid rgba(216, 177, 90, .3); background: rgba(7, 8, 11, .5);
}
.pz-root .pz-turn .tt-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: linear-gradient(180deg, #f4ecd6, #cbbf9a);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 8px rgba(244, 236, 214, .4);
}

/* --- right column: meters, solve, stats --- */
.pz-root .pz-main-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pz-root .pz-meters { display: flex; align-items: stretch; gap: 14px; }
.pz-root .pz-ring-card {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px; flex: 1; min-width: 0;
  background: rgba(11, 13, 18, .55); border: 1px solid rgba(216, 177, 90, .14);
}
.pz-root .ring { position: relative; flex-shrink: 0; display: grid; place-items: center; }
.pz-root .ring svg { transform: rotate(-90deg); display: block; overflow: visible; }
.pz-root .ring .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.pz-root .rc-value { font-family: var(--mp-serif); font-weight: 700; color: var(--mp-bone); }
.pz-root .pz-ring-card .rc-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pz-root .rc-label { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); }
.pz-root .rc-tag { font-family: var(--mp-serif); font-size: 15px; letter-spacing: .5px; color: var(--mp-gold-1); font-weight: 600; }
.pz-root .rc-tag.teal { color: var(--mp-teal-1); }
.pz-root .rc-sub { font-family: var(--mp-mono); font-size: 11px; color: var(--mp-teal-1); }

.pz-root .pz-streak {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  padding: 16px 18px; min-width: 96px;
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(216, 177, 90, .12), transparent 70%), rgba(11, 13, 18, .55);
  border: 1px solid rgba(216, 177, 90, .18);
}
.pz-root .pz-streak .st-flame { font-size: 20px; line-height: 1; filter: drop-shadow(0 0 8px rgba(216, 150, 77, .6)); }
.pz-root .pz-streak.hot .st-flame { animation: pzFlame 1.1s ease-in-out infinite; }
.pz-root .pz-streak .st-num { font-family: var(--mp-serif); font-size: 26px; font-weight: 700; color: var(--mp-bone); line-height: 1; }
.pz-root .pz-streak .st-label { font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-gold-2); }
@keyframes pzFlame { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.18) translateY(-1px); } }

.pz-root .pz-solve {
  position: relative; display: flex; align-items: center; gap: 18px; width: 100%;
  padding: 20px 24px; text-align: left; cursor: pointer; transition: all .2s ease;
  border: 1px solid rgba(77, 208, 196, .4);
  background:
    radial-gradient(ellipse 70% 120% at 0% 50%, rgba(77, 208, 196, .14), transparent 65%),
    linear-gradient(90deg, rgba(20, 40, 42, .7), rgba(11, 16, 20, .8));
}
.pz-root .pz-solve:hover { border-color: var(--mp-teal-1); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(77, 208, 196, .2), 0 10px 40px rgba(77, 208, 196, .16); }
.pz-root .pz-solve .ps-ico {
  width: 46px; height: 46px; display: grid; place-items: center; flex-shrink: 0; font-size: 20px;
  color: var(--mp-gold-1); border: 1px solid rgba(216, 177, 90, .3); transform: rotate(45deg);
}
.pz-root .pz-solve .ps-ico > span { display: block; transform: rotate(-45deg); }
.pz-root .pz-solve .ps-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pz-root .pz-solve .ps-title { font-family: var(--mp-serif); font-size: 22px; letter-spacing: 2px; color: var(--mp-bone); font-weight: 700; line-height: 1; margin-bottom: 6px; }
.pz-root .pz-solve .ps-sub { font-size: 12.5px; color: var(--mp-ink); letter-spacing: .3px; }
.pz-root .pz-solve .ps-sub b { color: var(--mp-teal-1); font-weight: 600; font-family: var(--mp-mono); }
.pz-root .pz-solve .ps-arrow { flex-shrink: 0; color: var(--mp-teal-1); font-size: 22px; transition: transform .16s; }
.pz-root .pz-solve:hover .ps-arrow { transform: translateX(4px); }

.pz-root .pz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: auto; }
.pz-root .pz-stat { padding: 16px 14px; text-align: center; background: rgba(11, 13, 18, .5); border: 1px solid rgba(216, 177, 90, .12); }
.pz-root .pz-stat .ps-val { font-family: var(--mp-serif); font-size: 26px; font-weight: 700; color: var(--mp-bone); line-height: 1; margin-bottom: 7px; }
.pz-root .pz-stat.accent .ps-val { color: var(--mp-teal-1); }
.pz-root .pz-stat .ps-lbl { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); }

/* === Themen · Meisterschaft === */
.pz-root .pz-section-label { font-size: 10px; letter-spacing: 3px; color: var(--mp-ink-dim); text-transform: uppercase; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.pz-root .pz-section-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(216, 177, 90, .16), transparent); }
.pz-root .pz-themes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pz-root .pz-theme {
  display: flex; align-items: center; gap: 16px; padding: 18px; transition: all .2s ease;
  background: linear-gradient(180deg, rgba(20, 23, 31, .6), rgba(11, 13, 18, .78)); border: 1px solid rgba(216, 177, 90, .12);
}
.pz-root .pz-theme:hover { border-color: rgba(77, 208, 196, .32); transform: translateY(-2px); background: linear-gradient(180deg, rgba(26, 30, 40, .8), rgba(14, 17, 23, .9)); }
.pz-root .pz-theme.done { border-color: rgba(216, 177, 90, .4); }
.pz-root .pz-theme .pt-meta { min-width: 0; }
.pz-root .pz-theme .pt-name { font-family: var(--mp-serif); font-size: 16px; letter-spacing: .5px; color: var(--mp-bone); font-weight: 600; margin-bottom: 5px; }
.pz-root .pz-theme .pt-count { font-family: var(--mp-mono); font-size: 11.5px; color: var(--mp-ink-dim); letter-spacing: .3px; }
.pz-root .pz-theme .pt-count b { color: var(--mp-teal-1); font-weight: 500; }
.pz-root .pz-theme.done .pt-count b { color: var(--mp-gold-1); }
.pz-root .pt-check { color: var(--mp-gold-1); font-size: 18px; }
.pz-root .pz-theme .pt-done-tag { display: inline-block; margin-top: 6px; font-size: 8.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--mp-gold-1); padding: 2px 7px; border: 1px solid var(--mp-gold-3); }

/* === How-to strip === */
.pz-root .pz-howto { display: flex; align-items: stretch; margin-top: 30px; border: 1px solid rgba(216, 177, 90, .12); background: rgba(11, 13, 18, .45); }
.pz-root .pz-howto .ht-step { flex: 1; display: flex; align-items: center; gap: 14px; padding: 18px 22px; position: relative; }
.pz-root .pz-howto .ht-step:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(180deg, transparent, rgba(216, 177, 90, .18), transparent); }
.pz-root .pz-howto .ht-num { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; font-family: var(--mp-serif); font-size: 13px; font-weight: 700; color: var(--mp-gold-1); border: 1px solid rgba(216, 177, 90, .3); transform: rotate(45deg); }
.pz-root .pz-howto .ht-num > span { transform: rotate(-45deg); }
.pz-root .pz-howto .ht-label { font-size: 13.5px; letter-spacing: .3px; color: var(--mp-ink); font-weight: 500; }
.pz-root .pz-howto .ht-label b { color: var(--mp-bone); font-weight: 600; }

/* === Gäste-Gate auf der Puzzle-Seite (kein persistentes Rating ohne Account). === */
.pz-gate {
  position: relative;
  display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: clamp(34px, 5vw, 60px) clamp(20px, 4vw, 48px);
  border: 1px solid rgba(120, 150, 160, .16);
  background:
    radial-gradient(ellipse 80% 120% at 50% -10%, rgba(216, 177, 90, .12), transparent 60%),
    linear-gradient(160deg, rgba(13, 20, 24, .72), rgba(8, 10, 14, .82));
}
.pz-gate-glyph { font-size: 40px; color: var(--mp-gold-1, #d8b15a); line-height: 1; }
.pz-gate-title { margin: 0; font-family: var(--mp-serif, 'Cinzel', serif); font-size: clamp(20px, 2.4vw, 26px); color: var(--mp-bone, #e8dec5); }
.pz-gate-text { margin: 0; max-width: 460px; font-family: var(--mp-serif-body, serif); font-size: 14.5px; line-height: 1.55; color: rgba(232, 222, 197, .8); }
.pz-gate-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 6px; }
.pz-corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--mp-teal, #4dd0c4); opacity: .85; }
.pz-corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.pz-corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.pz-corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.pz-corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.pz-cta {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  padding: 18px 22px;
  border: 1px solid rgba(77, 208, 196, .4);
  background: linear-gradient(120deg, rgba(77, 208, 196, .16), rgba(77, 208, 196, .05));
  color: var(--mp-parchment, #e8e2d0);
  cursor: pointer;
  text-align: left;
  transition: transform .14s ease, box-shadow .2s ease, background .2s ease;
}
.pz-cta:hover { transform: translateY(-2px); background: linear-gradient(120deg, rgba(77, 208, 196, .26), rgba(77, 208, 196, .09)); box-shadow: 0 12px 40px -12px rgba(77, 208, 196, .55); }
.pz-cta:active { transform: translateY(0); }
.pz-cta .btnCorner { position: absolute; width: 12px; height: 12px; border: 2px solid var(--mp-teal, #4dd0c4); }
.pz-cta .btnCorner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.pz-cta .btnCorner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.pz-cta .btnCorner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.pz-cta .btnCorner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.pz-cta-glyph { font-size: 30px; line-height: 1; filter: drop-shadow(0 0 10px rgba(77, 208, 196, .6)); }
.pz-cta-main { display: grid; gap: 2px; flex: 1; }
.pz-cta-title { font-family: 'Cinzel', serif; font-weight: 800; font-size: 22px; letter-spacing: 1px; color: #fff; }
.pz-cta-sub { font-size: 12px; color: var(--muted, #9aa4ad); }
.pz-cta-arrow { font-size: 24px; color: var(--mp-teal, #4dd0c4); transition: transform .16s ease; }
.pz-cta:hover .pz-cta-arrow { transform: translateX(5px); }

@media (max-width: 1180px) {
  .pz-root .pz-hero { grid-template-columns: 1fr; }
  .pz-root .pz-board-wrap { max-width: 420px; margin: 0 auto; width: 100%; }
  .pz-root .pz-themes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .pz-root .pz-stats { grid-template-columns: repeat(2, 1fr); }
  .pz-root .pz-meters { flex-wrap: wrap; }
  .pz-root .pz-themes-grid { grid-template-columns: 1fr; }
  .pz-root .pz-howto { flex-direction: column; }
  .pz-root .pz-howto .ht-step:not(:last-child)::after { display: none; }
  .pz-root .pz-daily { flex-wrap: wrap; }
}

/* ===================== In-board solving HUD ===================== */

/* Strip the match chrome while solving — just board + HUD. */
body.puzzle-active #gamePanel,
body.puzzle-active #winnerBanner,
body.puzzle-active #pieceInfo,
body.puzzle-active #moveHistory,
body.puzzle-active .legend,
body.puzzle-active #statusLegend { display: none !important; }

/* Puzzles solve in 'demo' mode (which already reveals <main>); this only tunes
   the centering/gap. Deliberately NO `display` here — visibility is owned by the
   board-mode rules — so a lingering .puzzle-active never leaks the board onto
   another page after the user navigates away. */
body.puzzle-active main {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vh, 18px);
}

.puzzleTopHud {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: var(--board-size, 520px);
  max-width: calc(100vw - 40px);
  flex-wrap: wrap;
}
.puzzleTopHud[hidden] { display: none; }
.pzTop-turn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 16px 9px 12px;
  border: 1px solid rgba(120, 150, 160, .2);
  background: linear-gradient(120deg, rgba(13, 20, 24, .85), rgba(8, 10, 14, .85));
  position: relative;
}
.pzTop-side {
  width: 34px; height: 34px; display: grid; place-items: center;
  font-size: 24px; line-height: 1; border-radius: 2px;
}
.pzTop-side.side-w { color: #fff; background: rgba(255, 255, 255, .14); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.pzTop-side.side-b { color: #1a1a1a; background: rgba(220, 220, 220, .9); }
.pzTop-turn-text { display: grid; gap: 1px; }
.pzTop-turn-text strong { font-family: 'Cinzel', serif; font-size: 15px; letter-spacing: .5px; color: #fff; }
.pzTop-turn-text small { font-size: 11px; color: var(--mp-teal-1, #6fe3d6); letter-spacing: .4px; }
.pzTop-pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--mp-teal, #4dd0c4);
  box-shadow: 0 0 0 0 rgba(77, 208, 196, .6); animation: pzPulse 1.5s ease-out infinite;
}
@keyframes pzPulse { 0% { box-shadow: 0 0 0 0 rgba(77, 208, 196, .55); } 70% { box-shadow: 0 0 0 9px rgba(77, 208, 196, 0); } 100% { box-shadow: 0 0 0 0 rgba(77, 208, 196, 0); } }
.pzTop-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pzTop-chip {
  font-size: 12px; padding: 6px 10px;
  border: 1px solid rgba(120, 150, 160, .18); background: rgba(8, 13, 17, .6);
  color: var(--mp-parchment, #e8e2d0); letter-spacing: .3px;
}
.pzTop-chip b { color: var(--muted, #9aa4ad); font-weight: 600; margin-right: 3px; text-transform: uppercase; font-size: 10px; }
.pzTop-chip.teal { border-color: rgba(77, 208, 196, .3); }
.pzTop-chip.flame.hot { border-color: rgba(216, 177, 90, .4); color: #f3d795; }

/* the wrong/hint message floats just under the top hud */
.pzMsg {
  width: var(--board-size, 520px); max-width: calc(100vw - 40px);
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; font-size: 13.5px; font-weight: 600;
  border-left: 3px solid;
  animation: pzMsgIn .22s ease;
}
.pzMsg.error { color: #ff9b8a; background: rgba(120, 30, 20, .28); border-color: #e5573e; }
.pzMsg.hint { color: #f3d795; background: rgba(120, 90, 30, .24); border-color: #e6c14b; }
.pzMsg.success { color: #7ee3c0; background: rgba(20, 90, 70, .26); border-color: #4dd0c4; }
@keyframes pzMsgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.puzzleBar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: var(--board-size, 520px); max-width: calc(100vw - 40px);
}
.puzzleBar[hidden] { display: none; }
.pzBar-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.pzBtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; font-size: 14px; font-weight: 600;
  border: 1px solid rgba(120, 150, 160, .26); background: rgba(10, 15, 19, .7);
  color: var(--mp-parchment, #e8e2d0); cursor: pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
.pzBtn:hover { transform: translateY(-1px); background: rgba(20, 28, 34, .9); border-color: rgba(120, 150, 160, .5); }
.pzBtn.ghost { background: transparent; }
.pzBtn.primary {
  border-color: rgba(77, 208, 196, .5);
  background: linear-gradient(120deg, rgba(77, 208, 196, .22), rgba(77, 208, 196, .08));
  color: #fff;
}
.pzBtn.primary:hover { background: linear-gradient(120deg, rgba(77, 208, 196, .34), rgba(77, 208, 196, .14)); box-shadow: 0 8px 26px -10px rgba(77, 208, 196, .6); }
.pzBtn[disabled] { opacity: .4; cursor: default; transform: none; }

/* ===================== Board markers ===================== */
#board .sq.puzzleHintFrom::after {
  content: ""; position: absolute; inset: 8%; border-radius: 6px;
  border: 3px solid var(--mp-teal, #4dd0c4);
  box-shadow: 0 0 18px rgba(77, 208, 196, .7), inset 0 0 14px rgba(77, 208, 196, .35);
  animation: pzHintPulseBox 1.2s ease-in-out infinite; pointer-events: none; z-index: 4;
}
#board .sq.puzzleHintTo::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 38%; height: 38%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 208, 196, .7), rgba(77, 208, 196, .15) 70%, transparent);
  animation: pzHintPulse 1.2s ease-in-out infinite; pointer-events: none; z-index: 4;
}
@keyframes pzHintPulse { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes pzHintPulseBox { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
#board .sq.puzzleWrong::before {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(circle, rgba(229, 87, 62, .6), rgba(229, 87, 62, .15) 70%, transparent);
  animation: pzWrongFlash .6s ease-out;
}
@keyframes pzWrongFlash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

#boardWrap.pzShake { animation: pzShake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes pzShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

/* ===================== Celebration overlay ===================== */
.pzCelebrateLayer {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(5, 8, 12, .55), rgba(5, 8, 12, .8));
  backdrop-filter: blur(2px);
  overflow: hidden;
  animation: pzMsgIn .2s ease;
}
.pzCelebrateLayer[hidden] { display: none; }

.pzCard {
  position: relative; z-index: 2;
  width: min(380px, 84%);
  display: grid; gap: 12px; justify-items: center; text-align: center;
  padding: 26px 24px 22px;
  border: 1px solid rgba(120, 150, 160, .26);
  background: linear-gradient(165deg, rgba(15, 22, 27, .96), rgba(8, 11, 15, .97));
  box-shadow: 0 28px 80px -24px rgba(0, 0, 0, .8);
  animation: pzCardPop .42s cubic-bezier(.18, .9, .3, 1.2);
}
@keyframes pzCardPop { 0% { opacity: 0; transform: scale(.82) translateY(12px); } 100% { opacity: 1; transform: none; } }
.pzCard .coach-corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--mp-teal, #4dd0c4); }
.pzCard.pzCard-fail .coach-corner { border-color: #b9755a; }
.pzCard .coach-corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.pzCard .coach-corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.pzCard .coach-corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.pzCard .coach-corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.pzCard-badge {
  width: 64px; height: 64px; display: grid; place-items: center;
  font-size: 38px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(77, 208, 196, .3), rgba(77, 208, 196, .05));
  filter: drop-shadow(0 0 16px rgba(77, 208, 196, .6));
  animation: pzBadge 2s ease-in-out infinite;
}
.pzCard-badge.fail { background: radial-gradient(circle at 50% 35%, rgba(185, 117, 90, .26), transparent); filter: none; animation: none; }
@keyframes pzBadge { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
.pzCard-head { font-family: 'Cinzel', serif; font-weight: 800; font-size: 30px; letter-spacing: 1.5px; color: #fff; }
.pzCard.pzCard-win .pzCard-head { background: linear-gradient(180deg, #fff, #9ee9e0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pzCard-sub { font-size: 13px; color: var(--muted, #9aa4ad); margin-top: -4px; }
.pzLevelup {
  font-family: 'Cinzel', serif; font-weight: 800; font-size: 14px; letter-spacing: 2px;
  color: #1a1410; padding: 4px 14px; border-radius: 2px;
  background: linear-gradient(120deg, #f3d795, #d8b15a);
  animation: pzLevelup 1.4s ease-in-out infinite;
}
@keyframes pzLevelup { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(216, 177, 90, .5); } 50% { transform: scale(1.05); box-shadow: 0 0 22px rgba(216, 177, 90, .6); } }

.pzRw-list { display: grid; gap: 6px; width: 100%; margin: 4px 0 6px; }
.pzRw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; background: rgba(8, 13, 17, .55); border: 1px solid rgba(120, 150, 160, .12); }
.pzRw-k { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted, #9aa4ad); }
.pzRw-v { font-size: 15px; color: var(--mp-parchment, #e8e2d0); display: inline-flex; align-items: center; gap: 7px; }
.pzRw-v strong { color: #fff; }
.pzRw-arrow { color: var(--muted, #9aa4ad); }
.pzRw-delta { font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; padding: 1px 8px; border-radius: 2px; }
.pzRw-delta.up { color: #7ee3c0; background: rgba(77, 208, 196, .14); }
.pzRw-delta.down { color: #ff9b8a; background: rgba(229, 87, 62, .14); }
.pzRw-delta.flat { color: var(--muted, #9aa4ad); }
.pzRw-v .teal { color: #6fe3d6; }

.pzCard-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* confetti */
.pzConfettiWrap { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.pzConfetti {
  position: absolute; top: -16px; border-radius: 1px;
  animation: pzConfettiFall var(--d, 1.6s) linear var(--delay, 0s) forwards;
  opacity: 0;
}
@keyframes pzConfettiFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(560px) rotate(var(--rot, 360deg)); opacity: 0; }
}

/* ===================================================================== */
/* PLAY page — "DUELL" (Claude-Design-Vorlage portiert).                  */
/* ===================================================================== */
/* Aeussere Abstaende kommen von .playPage (App-Shell); .duell ist nur der
   zentrierte Inhalts-Block. Vorlage nutzte 46px 64px 90px Eigenpadding. */
.duell {
  position: relative;
  padding: 0 0 28px;
  max-width: 1320px;
  margin: 0 auto;
}

/* Kein eigener Glow auf dem zentrierten .duell-Block — der erzeugte eine harte
   Kante an der Block-Oberkante. Der Ambient-Glow kommt vom seitenweiten
   body.mode-play .modeScreen (von den Seitenecken/-oberkante aus). */

.duell-head { margin-bottom: 38px; max-width: 720px; }

.duell-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--mp-teal-2);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
}

.duell-eyebrow .num { color: var(--mp-gold-2); }

.duell-eyebrow .line {
  height: 1px; width: 46px;
  background: linear-gradient(90deg, var(--mp-gold-3), transparent);
}

.duell-title {
  font-family: var(--mp-serif);
  font-weight: 700;
  font-size: clamp(64px, 9vw, 124px);
  line-height: 0.9;
  letter-spacing: 4px;
  margin: 0 0 20px;
  /* Verlaufs-Box an den Text anpassen — sonst clippt background-clip:text bei
     langen Titeln (RANGLISTEN/AKADEMIE) und ueberstehende Buchstaben werden
     transparent ("abgeschnitten"). max-content ignoriert die Eltern-Breite. */
  width: max-content;
  max-width: 100%;
  background: linear-gradient(180deg, #f6ecd0 0%, #e8c879 48%, #b0842f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.duell-sub {
  font-family: var(--mp-serif-body);
  font-size: 22px;
  line-height: 1.5;
  color: var(--mp-ink);
  margin: 0;
  max-width: 600px;
}

.duell-sub em { color: var(--mp-bone); font-style: normal; }

.duell-section-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--mp-ink-dim);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.duell-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(216,177,90,0.16), transparent);
}

.duell .mode-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 34px;
}

.duell .mode-tile {
  position: relative;
  text-align: left;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(20, 23, 31, 0.6), rgba(11, 13, 18, 0.78));
  border: 1px solid rgba(216, 177, 90, 0.14);
  transition: all 200ms ease;
  overflow: hidden;
}

.duell .mode-tile:hover {
  border-color: rgba(77, 208, 196, 0.35);
  background: linear-gradient(180deg, rgba(26, 30, 40, 0.8), rgba(14, 17, 23, 0.9));
  transform: translateY(-2px);
}

.duell .mode-tile .mt-ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--mp-gold-1);
  border: 1px solid rgba(216, 177, 90, 0.25);
  transform: rotate(45deg);
  margin-bottom: 16px;
}

.duell .mode-tile .mt-ico > * { transform: rotate(-45deg); }

.duell .mode-tile .mt-name {
  font-family: var(--mp-serif);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--mp-bone);
  font-weight: 600;
  margin-bottom: 5px;
}

.duell .mode-tile .mt-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--mp-ink-dim);
  letter-spacing: 0.2px;
}

.duell .mode-tile .mt-check {
  position: absolute;
  top: 14px; right: 14px;
  width: 18px; height: 18px;
  opacity: 0;
  color: var(--mp-gold-1);
  transition: opacity 160ms;
}

.duell .mode-tile.active {
  border-color: var(--mp-gold-1);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(216, 177, 90, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(34, 28, 16, 0.85), rgba(16, 14, 9, 0.92));
  box-shadow: 0 0 0 1px rgba(216, 177, 90, 0.2), 0 10px 34px rgba(216, 177, 90, 0.1);
}

.duell .mode-tile.active .mt-ico {
  color: #0c0e13;
  background: linear-gradient(180deg, #f0d27a, #c89a3e);
  border-color: #f0d27a;
}

.duell .mode-tile.active .mt-name { color: #f6ecd0; }

.duell .mode-tile.active .mt-desc { color: var(--mp-ink); }

.duell .mode-tile.active .mt-check { opacity: 1; }

.duell .mode-tile .mt-glow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mp-gold-1), transparent);
  opacity: 0;
  transition: opacity 200ms;
}

.duell .mode-tile.active .mt-glow { opacity: 1; }

.duell .matchup {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 132px 1fr;
  gap: 0;
  align-items: stretch;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(13, 16, 22, 0.6), rgba(8, 9, 13, 0.85));
  border: 1px solid rgba(216, 177, 90, 0.2);
  margin-bottom: 18px;
}

.duell .matchup::before,
.duell .matchup::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--mp-gold-2);
}

.duell .matchup::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }

.duell .matchup::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.duell .matchup-col { display: flex; flex-direction: column; min-width: 0; }

.duell .matchup-col .col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  height: 18px;
}

.duell .col-head .ch-label {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
}

.duell .col-head .ch-link {
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--mp-teal-2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 140ms;
}

.duell .col-head .ch-link:hover { color: var(--mp-teal-1); }

.duell .col-head .ch-badge {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 700;
  padding: 3px 8px;
  color: var(--mp-gold-1);
  border: 1px solid var(--mp-gold-3);
  text-transform: uppercase;
}

.duell .deck-card {
  position: relative;
  flex: 1;
  min-height: 296px;
  border: 1px solid rgba(216, 177, 90, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: #06080b;
  transition: all 240ms ease;
}

.duell .deck-card .dc-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

.duell .deck-card.is-masked {
  background: linear-gradient(180deg, rgba(18,21,28,0.7), rgba(8,9,13,0.92));
}

.duell .deck-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,9,13,0.15) 0%, rgba(7,9,13,0.4) 45%, rgba(7,9,13,0.94) 100%);
}

.duell .deck-card::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 1;
  border: 1px solid rgba(216, 177, 90, 0.16);
  pointer-events: none;
}

.duell .deck-card.is-you { border-color: rgba(77, 208, 196, 0.45); }

.duell .deck-card.is-you:hover { box-shadow: 0 14px 44px rgba(0,0,0,0.6), 0 0 36px rgba(77, 208, 196, 0.12); }

.duell .deck-card.is-opp { border-color: rgba(120, 218, 162, 0.4); }

.duell .deck-card .dc-faction-tag {
  position: absolute;
  top: 14px; left: 16px;
  z-index: 2;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-gold-1);
  background: rgba(7, 9, 13, 0.55);
  padding: 4px 9px;
  border: 1px solid rgba(216, 177, 90, 0.25);
  backdrop-filter: blur(4px);
}

.duell .deck-card .dc-body {
  position: relative;
  z-index: 2;
  padding: 20px 20px 18px;
}

.duell .deck-card .dc-name {
  font-family: var(--mp-serif);
  font-size: 29px;
  letter-spacing: 2px;
  color: var(--mp-bone);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

.duell .deck-card .dc-format {
  font-family: var(--mp-serif-body);
  font-size: 15px;
  font-style: italic;
  color: var(--mp-ink);
  margin-bottom: 16px;
}

.duell .deck-card .dc-lineup {
  display: flex;
  gap: 6px;
}

.duell .deck-card .dc-piece {
  width: 42px; height: 42px;
  background: rgba(7, 9, 13, 0.5);
  border: 1px solid rgba(216, 177, 90, 0.2);
  display: grid;
  place-items: center;
}

.duell .deck-card .dc-piece img {
  width: 78%; height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.7));
}

/* Volle Aufstellung (2 Reihen, alle Figuren) auf der gewählten eigenen Deck-Karte. */
.duell .deck-card .dc-formation { display: flex; flex-direction: column; gap: 5px; }
.duell .deck-card .dc-form-row { display: flex; gap: 5px; }
.duell .deck-card .dc-fp {
  flex: 1 1 0; max-width: 42px; aspect-ratio: 1;
  background: rgba(7, 9, 13, 0.55);
  border: 1px solid rgba(216, 177, 90, 0.2);
  display: grid; place-items: center;
}
.duell .deck-card .dc-fp.is-empty { border-style: dashed; opacity: .45; }
/* Seltenheits-Rand wie bei "Deine Decks" (.dccm.slot.rarity-*). */
.duell .deck-card .dc-fp.rarity-legendary { border-color: rgba(216, 177, 90, 0.6); }
.duell .deck-card .dc-fp.rarity-epic { border-color: rgba(184, 124, 232, 0.42); }
.duell .deck-card .dc-fp.rarity-rare { border-color: rgba(110, 231, 216, 0.32); }
.duell .deck-card .dc-fp img {
  width: 84%; height: 84%; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}

.duell .deck-card.is-opp .dc-faction-tag { color: #8fe6b4; border-color: rgba(120, 218, 162, 0.3); }

/* Per-Deck-Bilanz (nur eigene Deck-Karte): Siege teal, Niederlagen rot, Rate gold.
   Liegt ueber dem Portrait → kraeftige Farben + Schatten fuer Lesbarkeit; Abstand
   per flex-gap (keine Trenner) damit es beim Umbruch sauber bleibt. */
.duell .deck-card .dc-record {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin-bottom: 14px;
  padding: 7px 11px;
  background: linear-gradient(90deg, rgba(7, 9, 13, 0.66), rgba(7, 9, 13, 0.32));
  border-left: 2px solid rgba(216, 177, 90, 0.45);
  font-family: var(--mp-serif-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--mp-bone);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
.duell .deck-card .dcr-label {
  flex-basis: 100%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mp-gold-1);
  margin-bottom: 2px;
}
.duell .deck-card .dcr-w { color: #84e8b0; font-weight: 700; }
.duell .deck-card .dcr-l { color: #ef958a; font-weight: 700; }
.duell .deck-card .dcr-d { color: var(--mp-ink); }
.duell .deck-card .dcr-rate { color: var(--mp-gold-1); font-weight: 700; }
.duell .deck-card .dcr-empty {
  flex-basis: 100%;
  color: var(--mp-ink);
  font-style: italic;
  font-size: 14px;
}

.duell .deck-switch {
  margin-top: 14px;
}

.duell .deck-switch .ds-label {
  font-size: 9px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
  margin-bottom: 9px;
}

.duell .deck-switch .ds-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.duell .ds-chip {
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: 600;
  padding: 8px 14px;
  color: var(--mp-ink);
  background: rgba(11, 13, 18, 0.6);
  border: 1px solid rgba(216, 177, 90, 0.16);
  transition: all 150ms ease;
}

.duell .ds-chip:hover { color: var(--mp-bone); border-color: rgba(216, 177, 90, 0.4); }

.duell .ds-chip.active {
  color: #0c0e13;
  background: linear-gradient(180deg, #f0d27a, #c89a3e);
  border-color: #f0d27a;
  box-shadow: 0 0 14px rgba(216, 177, 90, 0.25);
}

.duell .ds-chip.count {
  cursor: default;
  color: var(--mp-gold-1);
  font-family: var(--mp-mono);
  background: transparent;
  border-color: rgba(216, 177, 90, 0.22);
}

.duell .ds-chip.count:hover { color: var(--mp-gold-1); border-color: rgba(216, 177, 90, 0.22); }

.duell .matchup-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 8px;
}

.duell .matchup-vs .vs-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(216,177,90,0.3), transparent);
}

.duell .vs-medallion {
  position: relative;
  width: 76px; height: 76px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin: 14px 0;
}

.duell .vs-medallion .vs-diamond {
  position: absolute;
  inset: 0;
  border: 1px solid var(--mp-gold-2);
  transform: rotate(45deg);
  background: radial-gradient(circle at 50% 40%, rgba(34,28,16,0.9), rgba(8,9,13,0.95));
  box-shadow: 0 0 0 1px rgba(216,177,90,0.12), 0 0 24px rgba(216,177,90,0.18);
}

.duell .vs-medallion .vs-diamond.inner {
  inset: 8px;
  border-color: rgba(216, 177, 90, 0.35);
  background: none;
  box-shadow: none;
  animation: ringRotate 24s linear infinite;
}

.duell .vs-medallion .vs-text {
  position: relative;
  font-family: var(--mp-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--mp-gold-1);
  text-shadow: 0 0 14px var(--mp-gold-glow);
}

.duell .ready-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(16, 19, 26, 0.7), rgba(9, 11, 15, 0.85));
  border: 1px solid rgba(216, 177, 90, 0.18);
  margin-bottom: 56px;
}

.duell .ready-left { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.duell .difficulty { display: flex; align-items: center; gap: 12px; }

.duell .difficulty .df-label {
  font-size: 9.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
}

.duell .difficulty .df-seg {
  display: inline-flex;
  border: 1px solid rgba(216, 177, 90, 0.18);
  background: rgba(7, 8, 11, 0.5);
}

.duell .df-seg button {
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 600;
  color: var(--mp-ink-dim);
  text-transform: uppercase;
  border-right: 1px solid rgba(216, 177, 90, 0.12);
  transition: all 150ms;
}

.duell .df-seg button:last-child { border-right: none; }

.duell .df-seg button:hover { color: var(--mp-bone); background: rgba(216, 177, 90, 0.05); }

.duell .df-seg button.active {
  color: var(--mp-teal-1);
  background: rgba(77, 208, 196, 0.1);
  box-shadow: inset 0 -2px 0 var(--mp-teal-2);
}

.duell .match-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mp-mono);
  font-size: 12px;
  color: var(--mp-ink);
  letter-spacing: 0.4px;
}

.duell .match-summary .ms-dot { color: var(--mp-gold-3); }

.duell .match-summary strong { color: var(--mp-bone); font-weight: 500; }

.duell .play-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 38px;
  font-family: var(--mp-sans);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #0c0e13;
  background: linear-gradient(180deg, #f3d88a 0%, #d8b15a 42%, #ad8230 100%);
  border: 1px solid #f0d27a;
  box-shadow:
    0 0 0 1px rgba(216, 177, 90, 0.25),
    0 8px 34px rgba(216, 177, 90, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: all 200ms ease;
}

.duell .play-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(216, 177, 90, 0.45),
    0 12px 48px rgba(216, 177, 90, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.duell .play-cta .cta-ico { display: grid; place-items: center; }

.duell .play-cta .cta-arrow { transition: transform 160ms; }

.duell .play-cta:hover .cta-arrow { transform: translateX(4px); }

.duell .play-cta .corner {
  position: absolute;
  width: 6px; height: 6px;
  border: 1px solid rgba(106, 79, 26, 0.8);
}

.duell .play-cta .corner.tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }

.duell .play-cta .corner.br { bottom: 4px; right: 4px; border-left: none; border-top: none; }

.duell .more-modes-label {
  text-align: center;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--mp-ink-dim);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.duell .more-modes-label::before,
.duell .more-modes-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,177,90,0.18), transparent);
}

.duell .friend-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
  background: linear-gradient(90deg, rgba(35, 155, 149, 0.06), rgba(11, 13, 18, 0.7) 60%);
  border: 1px solid rgba(77, 208, 196, 0.22);
  transition: all 200ms ease;
  cursor: pointer;
}

.duell .friend-card:hover {
  border-color: rgba(77, 208, 196, 0.45);
  box-shadow: 0 0 30px rgba(77, 208, 196, 0.08);
}

.duell .friend-card .fc-ico {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  color: var(--mp-teal-1);
  border: 1px solid rgba(77, 208, 196, 0.3);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.duell .friend-card .fc-ico > * { transform: rotate(-45deg); }

.duell .friend-card .fc-text { flex: 1; min-width: 0; text-align: left; }

.duell .friend-card .fc-name {
  font-family: var(--mp-serif);
  font-size: 19px;
  letter-spacing: 1.5px;
  color: var(--mp-bone);
  font-weight: 600;
  margin-bottom: 5px;
}

.duell .friend-card .fc-desc {
  font-size: 13px;
  color: var(--mp-ink-dim);
  line-height: 1.4;
}

.duell .friend-card .fc-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-teal-1);
  flex-shrink: 0;
}

.duell .friend-card .fc-action .arrow { transition: transform 160ms; }

.duell .friend-card:hover .fc-action .arrow { transform: translateX(4px); }

@media (max-width: 1180px) {
  .duell .mode-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .duell .matchup { grid-template-columns: 1fr; gap: 22px; }
  .duell .matchup-vs { flex-direction: row; padding: 4px 0; }
  .duell .matchup-vs .vs-line { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, rgba(216,177,90,0.3), transparent); }
  .duell .vs-medallion { margin: 0 16px; }
  .duell .ready-bar { grid-template-columns: 1fr; gap: 18px; }
  .duell .play-cta { justify-content: center; width: 100%; }
}

@media (max-width: 640px) {
  .duell .mode-row { grid-template-columns: 1fr; }
  .duell .friend-card { flex-wrap: wrap; }
}

@keyframes ringRotate { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }

/* ===================================================================== */
/* ACCOUNT settings — modern inline-edit rows.                            */
/* ===================================================================== */
.acctSettings .acct-head { margin-bottom: 16px; }
.acctSettings .acct-head h3 { margin: 0 0 4px; }
.acct-sub { margin: 0; font-size: 12.5px; color: var(--muted, #9aa4ad); }

.acct-rows { display: grid; gap: 10px; }
.acct-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(120, 150, 160, .14);
  background: rgba(8, 13, 17, .5);
  transition: border-color .15s, background .15s;
}
.acct-row:hover { border-color: rgba(120, 150, 160, .26); }
.acct-row.is-editing { border-color: rgba(77, 208, 196, .4); background: rgba(10, 18, 22, .7); }

.acct-row-icon {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(77, 208, 196, .1); color: var(--mp-teal, #4dd0c4);
}
.acct-row-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acct-row-main { display: grid; gap: 2px; min-width: 0; }
.acct-row-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted, #9aa4ad); }
.acct-row-value { font-size: 15px; color: var(--mp-parchment, #e8e2d0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-row-value.mono { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--muted, #b8c0c8); }

.acct-edit-btn {
  justify-self: end;
  font-size: 13px; padding: 7px 16px; cursor: pointer;
  border: 1px solid rgba(120, 150, 160, .28); background: transparent; color: var(--mp-parchment, #e8e2d0);
  transition: all .15s;
}
.acct-edit-btn:hover { border-color: var(--mp-teal, #4dd0c4); color: #fff; background: rgba(77, 208, 196, .1); }
.acct-row.is-editing .acct-edit-btn { display: none; }

.acct-edit { display: none; grid-column: 1 / -1; gap: 8px; margin-top: 6px; }
.acct-row.is-editing .acct-edit { display: grid; }
.acct-row.is-editing .acct-row-value { opacity: .45; }
.acct-edit input {
  width: 100%; padding: 11px 13px; font-size: 14px;
  border: 1px solid rgba(120, 150, 160, .3); background: rgba(4, 7, 10, .6); color: var(--mp-parchment, #e8e2d0);
}
.acct-edit input:focus { outline: none; border-color: var(--mp-teal, #4dd0c4); box-shadow: 0 0 0 2px rgba(77, 208, 196, .18); }
.acct-edit .profileHint { font-size: 11.5px; color: var(--muted, #9aa4ad); }
.acct-edit-actions { display: flex; gap: 8px; margin-top: 2px; }
.acct-edit-actions .primary {
  padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid rgba(77, 208, 196, .5); color: #fff;
  background: linear-gradient(120deg, rgba(77, 208, 196, .24), rgba(77, 208, 196, .1));
}
.acct-edit-actions .primary:hover { background: linear-gradient(120deg, rgba(77, 208, 196, .34), rgba(77, 208, 196, .16)); }
.acct-cancel {
  padding: 9px 16px; font-size: 13px; cursor: pointer;
  border: 1px solid rgba(120, 150, 160, .24); background: transparent; color: var(--muted, #b8c0c8);
}
.acct-cancel:hover { color: #fff; border-color: rgba(120, 150, 160, .5); }
.acct-row--static .acct-row-value { color: var(--muted, #b8c0c8); }

.acct-dev { margin-top: 14px; }
.acct-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(120, 150, 160, .12); }
.acct-ghost-btn, .acct-danger-btn {
  padding: 9px 18px; font-size: 13px; cursor: pointer; border: 1px solid rgba(120, 150, 160, .26); background: transparent;
  color: var(--mp-parchment, #e8e2d0); transition: all .15s;
}
.acct-ghost-btn:hover { border-color: rgba(120, 150, 160, .5); background: rgba(20, 28, 34, .6); }
.acct-danger-btn { color: #ff9b8a; border-color: rgba(229, 87, 62, .3); }
.acct-danger-btn:hover { background: rgba(229, 87, 62, .12); border-color: rgba(229, 87, 62, .55); }

.acct-danger-zone {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 18px; padding: 14px 16px;
  border: 1px solid rgba(229, 87, 62, .22); background: rgba(229, 87, 62, .05);
}
.acct-danger-zone-head { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct-danger-zone-title { color: #ff9b8a; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.acct-danger-zone-sub { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.acct-danger-btn--strong { flex: none; font-weight: 600; }
.acct-danger-btn--strong:hover { background: rgba(229, 87, 62, .18); }

@media (max-width: 520px) {
  .acct-danger-zone { flex-direction: column; align-items: stretch; }
  .acct-danger-btn--strong { width: 100%; }

  .acct-row { grid-template-columns: auto 1fr; }
  .acct-edit-btn { grid-column: 2; justify-self: start; }
}

/* ===================================================================== */
/* MESSAGES — inbox: friend requests + DM threads.                        */
/* ===================================================================== */
.messagesPage { width: 100%; }
.messagesGrid { width: 100%; }

.msg-root {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--content-max, 1180px); margin-inline: auto;
  display: grid; gap: 18px; align-content: start;
  color: var(--mp-parchment, #e8e2d0);
}

.msg-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 16px;
  min-height: min(620px, calc(100vh - 240px));
  border: 1px solid rgba(120, 150, 160, .16);
  background: linear-gradient(160deg, rgba(13, 20, 24, .55), rgba(8, 10, 14, .7));
}

.msg-sidebar {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; overflow-y: auto;
  border-right: 1px solid rgba(120, 150, 160, .14);
}
.msg-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted, #9aa4ad);
  margin: 10px 4px 4px;
}
.msg-section-label:first-child { margin-top: 0; }
.msg-count {
  font-size: 11px; padding: 1px 7px; border-radius: 10px; color: #1a1410;
  background: linear-gradient(120deg, #f3d795, #d8b15a); font-weight: 700;
}

.msg-requests { display: grid; gap: 6px; margin-bottom: 8px; }
.msg-request {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 10px; border: 1px solid rgba(216, 177, 90, .22); background: rgba(216, 177, 90, .05);
}
.msg-req-name { font-size: 14px; color: #fff; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-req-name:hover { text-decoration: underline dotted; }
.msg-req-btns { display: flex; gap: 6px; flex: none; }

.msg-avatar {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #07110f;
  background: linear-gradient(135deg, #6fe3d6, #2c8a82);
}
/* Profilbild-Variante: Bild füllt den runden Avatar. */
.msg-avatar.has-img {
  background: rgba(10, 12, 17, .6);
  overflow: hidden;
  border: 1px solid rgba(216, 177, 90, .3);
}
.msg-avatar.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.msg-btn {
  font-size: 12px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(120, 150, 160, .26); background: rgba(10, 15, 19, .6); color: var(--mp-parchment, #e8e2d0);
  transition: all .14s;
}
.msg-btn:hover { border-color: rgba(120, 150, 160, .5); }
.msg-btn.primary { border-color: rgba(77, 208, 196, .5); background: rgba(77, 208, 196, .16); color: #fff; }
.msg-btn.primary:hover { background: rgba(77, 208, 196, .26); }
.msg-btn.ghost { background: transparent; }

.msg-convos { display: grid; gap: 4px; }
.msg-convo {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
  padding: 10px; cursor: pointer; text-align: left; width: 100%;
  border: 1px solid transparent; background: transparent; color: inherit;
  transition: background .14s, border-color .14s;
}
.msg-convo:hover { background: rgba(120, 150, 160, .07); }
.msg-convo.is-active { background: rgba(77, 208, 196, .1); border-color: rgba(77, 208, 196, .3); }
.msg-convo-main { display: grid; gap: 2px; min-width: 0; }
.msg-convo-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.msg-convo-name { font-size: 14px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-convo-time { font-size: 10.5px; color: var(--muted, #9aa4ad); flex: none; }
.msg-convo-preview { font-size: 12.5px; color: var(--muted, #9aa4ad); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-convo.has-unread .msg-convo-preview { color: var(--mp-parchment, #e8e2d0); font-weight: 500; }
.msg-unread {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #07110f; border-radius: 9px;
  background: var(--mp-teal, #4dd0c4);
}

/* Thread */
.msg-thread { display: flex; flex-direction: column; min-width: 0; }
.msg-thread-empty {
  flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center;
  color: var(--muted, #9aa4ad); padding: 30px;
}
.msg-thread-empty-glyph { font-size: 44px; opacity: .5; }
.msg-thread-empty p { max-width: 280px; font-size: 13.5px; }

.msg-thread-head {
  display: flex; align-items: center; gap: 11px; padding: 14px 18px;
  border-bottom: 1px solid rgba(120, 150, 160, .14);
}
.msg-thread-name { font-family: 'Cinzel', serif; font-size: 17px; color: #fff; }
.msg-back {
  display: none; font-size: 22px; line-height: 1; width: 32px; height: 32px;
  background: none; border: 0; color: var(--mp-parchment, #e8e2d0); cursor: pointer;
}

.msg-thread-body {
  flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0;
  padding: 18px; overflow-y: auto;
}
.msg-bubble {
  align-self: flex-start; max-width: 74%;
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 13px;
  border: 1px solid rgba(120, 150, 160, .18); background: rgba(18, 26, 31, .8);
  border-radius: 3px 12px 12px 12px;
}
.msg-bubble.mine {
  align-self: flex-end;
  border-color: rgba(77, 208, 196, .3);
  background: linear-gradient(120deg, rgba(77, 208, 196, .2), rgba(77, 208, 196, .08));
  border-radius: 12px 3px 12px 12px;
}
.msg-bubble-body { font-size: 14px; color: var(--mp-parchment, #e8e2d0); word-break: break-word; }
.msg-bubble-time { font-size: 10px; color: var(--muted, #9aa4ad); align-self: flex-end; }

.msg-compose {
  display: flex; gap: 10px; padding: 14px 18px;
  border-top: 1px solid rgba(120, 150, 160, .14);
}
.msg-compose input {
  flex: 1; padding: 11px 14px; font-size: 14px;
  border: 1px solid rgba(120, 150, 160, .3); background: rgba(4, 7, 10, .6); color: var(--mp-parchment, #e8e2d0);
}
.msg-compose input:focus { outline: none; border-color: var(--mp-teal, #4dd0c4); box-shadow: 0 0 0 2px rgba(77, 208, 196, .16); }
.msg-send {
  width: 46px; flex: none; font-size: 18px; cursor: pointer; color: #07110f;
  border: 0; background: linear-gradient(135deg, #6fe3d6, #2c8a82);
  transition: filter .15s, transform .12s;
}
.msg-send:hover { filter: brightness(1.12); transform: translateY(-1px); }

.msg-hint { color: var(--muted, #9aa4ad); font-size: 13px; padding: 14px 4px; }
.msg-thread-notice { text-align: center; padding: 24px; }

/* Nav unread badge (circular count, distinct from the "Bald" pill) */
.navBadge--count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #07110f; background: var(--mp-teal, #4dd0c4); border: 0;
}

@media (max-width: 760px) {
  .msg-layout { grid-template-columns: 1fr; }
  .msg-sidebar { border-right: 0; border-bottom: 1px solid rgba(120, 150, 160, .14); }
  .msg-thread:not(.has-active) { display: none; }
  .msg-back { display: block; }
}

/* Puzzle of the day card (ported from the Claude Design mockup) */
.pz-root .pz-daily {
  display: flex; align-items: center; gap: 20px; width: 100%;
  padding: 18px 24px; cursor: pointer; text-align: left; transition: all .2s ease;
  border: 1px solid rgba(216, 177, 90, .3);
  background: linear-gradient(90deg, rgba(216, 177, 90, .08), rgba(11, 13, 18, .7) 65%);
}
.pz-root .pz-daily:hover { border-color: rgba(216, 177, 90, .5); box-shadow: 0 0 26px rgba(216, 177, 90, .08); }
.pz-root .pz-daily.is-done { border-color: rgba(77, 208, 196, .25); background: linear-gradient(90deg, rgba(35, 155, 149, .06), rgba(11, 13, 18, .7) 65%); }
.pz-root .pz-daily.is-done:hover { border-color: rgba(77, 208, 196, .42); box-shadow: 0 0 26px rgba(77, 208, 196, .07); }
.pz-root .pz-daily .pd-check {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 20px;
  background: radial-gradient(circle at 40% 35%, #f3d795, #c89a3e); color: #1a1410;
  box-shadow: 0 0 16px rgba(216, 177, 90, .4);
}
.pz-root .pz-daily.is-done .pd-check { background: radial-gradient(circle at 40% 35%, #6ee7d8, #239b95); color: #07221f; box-shadow: 0 0 16px rgba(77, 208, 196, .35); }
.pz-root .pz-daily .pd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pz-root .pz-daily .pd-eyebrow { font-size: 9.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mp-gold-2); font-weight: 700; }
.pz-root .pz-daily.is-done .pd-eyebrow { color: var(--mp-teal-2); }
.pz-root .pz-daily .pd-title { font-family: var(--mp-serif); font-weight: 600; font-size: 19px; letter-spacing: 1px; color: var(--mp-bone); }
.pz-root .pz-daily .pd-sub { font-size: 12.5px; color: var(--mp-ink-dim); }
.pz-root .pz-daily .pd-action { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-gold-1); }
.pz-root .pz-daily.is-done .pd-action { color: var(--mp-teal-1); }
.pz-root .pz-daily .pd-action .arrow { transition: transform .16s; }
.pz-root .pz-daily:hover .pd-action .arrow { transform: translateX(4px); }

/* Puzzle streak milestone (5/10/25/50/100 in a row) */
.pzStreakMilestone {
  font-family: 'Cinzel', serif; font-weight: 800; font-size: 17px; letter-spacing: 1.5px;
  color: #1a1208; padding: 6px 18px; border-radius: 2px;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(120deg, #ffe9a8, #f3d795 45%, #d8b15a);
  box-shadow: 0 0 24px rgba(216, 177, 90, .55);
  animation: pzMilestonePop .5s cubic-bezier(.18,.9,.3,1.4), pzMilestoneGlow 1.6s ease-in-out infinite .5s;
}
@keyframes pzMilestonePop { 0% { opacity: 0; transform: scale(.6) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes pzMilestoneGlow { 0%, 100% { box-shadow: 0 0 18px rgba(216, 177, 90, .45); } 50% { box-shadow: 0 0 30px rgba(216, 177, 90, .7); } }
.pzFlameBurst { font-size: 20px; animation: pzFlame 1s ease-in-out infinite; }
.pzCard-milestone { border-color: rgba(216, 177, 90, .5); box-shadow: 0 28px 80px -24px rgba(0,0,0,.8), 0 0 40px -6px rgba(216, 177, 90, .4); }
.pzCard-milestone .pzCard-badge.win { background: radial-gradient(circle at 50% 35%, rgba(216, 177, 90, .4), rgba(216, 177, 90, .06)); filter: drop-shadow(0 0 18px rgba(216, 177, 90, .7)); }

/* Respect reduced-motion for the puzzle/play/messages animations added above
   (consistent with the existing prefers-reduced-motion blocks). Content stays
   fully visible — only the motion is removed. */
@media (prefers-reduced-motion: reduce) {
  .pzConfettiWrap { display: none !important; }
  .pz-root .pz-streak .st-flame,
  .pz-root .pzb-target-ring,
  .pzFlameBurst,
  .pzTop-pulse,
  .pzCard,
  .pzCard-badge,
  .pzLevelup,
  .pzStreakMilestone,
  .pzMsg,
  .pzCelebrateLayer,
  #board .sq.puzzleHintFrom::after,
  #board .sq.puzzleHintTo::after,
  #board .sq.puzzleWrong::before {
    animation: none !important;
  }
  #boardWrap.pzShake { animation: none !important; }
  .pz-cta:hover,
  .ps-play:hover,
  .pz-root .pz-solve:hover,
  .pz-root .pz-theme:hover,
  .pz-root .pz-daily:hover { transform: none !important; }
  .pz-cta-arrow,
  .pz-root .pz-solve .ps-arrow,
  .pz-root .pz-daily .pd-action .arrow,
  .ps-play-arrow { transition: none !important; }
}

/* ============================================================================
   FIGUREN-DOSSIER (piece-codex.js) — Vollbild-Detailansicht einer Figur.
   Design: "Magic Pieces — Figur Detail"-Vorlage (.fd-*). Das Zugbild-BRETT und
   die Marker-Farben (ziehen=gold · schlagen=roter Ring · beides · Effekt=blau)
   bleiben unser bestehendes Brett (.pcx-board / .pcx-sq). Gemountet auf <body>
   (#pieceCodexRoot); Fraktion faerbt --accent/--cx (inline).
   ========================================================================== */
.pcx-root {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(77, 208, 196, .06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(216, 177, 90, .05), transparent 60%),
    rgba(5, 6, 9, .96);
}
.pcx-root[hidden] { display: none; }
/* schwach angedeutetes Brett-Raster hinter dem Modal */
.pcx-root::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(216, 177, 90, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 177, 90, .04) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 75%);
  opacity: .5;
  pointer-events: none;
}
.pcx-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
}
.pcx-root.show .pcx-backdrop { opacity: 1; }

.fd-frame {
  position: relative;
  z-index: 2;
  width: min(1140px, 95vw);
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(14px) scale(.99);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), opacity .24s ease;
}
.pcx-root.show .fd-frame { opacity: 1; transform: none; }

/* ── Seiten-Pfeile (Diamant) ──────────────────────────────────────────────── */
.fd-arrow {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(24, 28, 37, .9), rgba(10, 11, 15, .95));
  border: 1px solid rgba(216, 177, 90, .3);
  color: var(--mp-gold-1);
  transform: rotate(45deg);
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
.fd-arrow svg { transform: rotate(-45deg); }
.fd-arrow:hover {
  border-color: var(--mp-gold-1);
  color: var(--mp-bone);
  box-shadow: 0 0 0 1px rgba(216, 177, 90, .2), 0 0 22px rgba(216, 177, 90, .25);
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.fd-modal {
  --accent-soft: color-mix(in srgb, var(--accent, var(--mp-teal-1)) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--accent, var(--mp-teal-1)) 34%, transparent);
  --effect: #5a9ad6;
  flex: 1;
  min-width: 0;
  position: relative;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(18, 21, 28, .96), rgba(9, 11, 15, .98));
  border: 1px solid rgba(216, 177, 90, .32);
  box-shadow:
    0 40px 120px -20px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(216, 177, 90, .08),
    inset 0 0 80px rgba(0, 0, 0, .5);
  overflow: hidden;
}

/* Eck-Ornamente */
.fd-corner {
  position: absolute;
  z-index: 6;
  width: 16px;
  height: 16px;
  border: 1px solid var(--mp-gold-2);
  pointer-events: none;
}
.fd-corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.fd-corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.fd-corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.fd-corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.fd-hero {
  position: relative;
  height: 248px;
  flex-shrink: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(216, 177, 90, .22);
}
.fd-hero-art {
  position: absolute;
  inset: 0;
  background-position: var(--art-pos, 60% 22%);
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.02);
}
.fd-hero-art.noimg {
  display: grid;
  place-items: center;
  justify-content: flex-end;
  padding-right: 9%;
  background:
    radial-gradient(ellipse 60% 80% at 72% 42%, var(--accent-soft), transparent 65%),
    linear-gradient(180deg, rgba(14, 16, 22, .2), rgba(8, 10, 14, .85));
}
.fd-hero-sprite {
  width: 150px;
  max-width: 46%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6));
}
.fd-hero-glyph {
  font-size: 118px;
  line-height: 1;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6));
}
.fd-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 11, 15, .96) 0%, rgba(9, 11, 15, .82) 32%, rgba(9, 11, 15, .32) 58%, transparent 78%),
    linear-gradient(180deg, rgba(9, 11, 15, .55) 0%, transparent 32%, rgba(9, 11, 15, .55) 100%),
    radial-gradient(ellipse 50% 70% at 78% 45%, var(--accent-soft), transparent 60%);
}
.fd-hero-grain {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 60%, rgba(216, 177, 90, .06) 100%);
  pointer-events: none;
}
.fd-hero-top {
  position: absolute;
  top: 16px;
  left: 22px;
  right: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fd-crest {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  color: var(--accent, var(--mp-teal-1));
  background: rgba(7, 8, 11, .6);
  border: 1px solid var(--accent-line);
  transform: rotate(45deg);
  box-shadow: 0 0 18px -4px var(--accent-soft);
}
.fd-crest > * { transform: rotate(-45deg); }
.fd-counter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--mp-bone);
  background: rgba(7, 8, 11, .72);
  border: 1px solid rgba(216, 177, 90, .28);
  border-radius: 20px;
}
.fd-counter b { color: var(--mp-gold-1); }
.fd-counter .sep { color: var(--mp-ink-faint); }
.fd-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--mp-ink);
  background: rgba(7, 8, 11, .6);
  border: 1px solid rgba(216, 177, 90, .2);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.fd-close:hover { color: var(--mp-danger); border-color: rgba(194, 90, 74, .5); background: rgba(30, 12, 10, .5); }

.fd-id {
  position: absolute;
  left: 36px;
  bottom: 22px;
  right: 36px;
  z-index: 4;
}
.fd-kicker {
  font-size: 10.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent, var(--mp-teal-1));
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.fd-kicker .sep { color: var(--mp-gold-3); }
.fd-name {
  font-family: var(--mp-serif);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 56px);
  line-height: .92;
  letter-spacing: 1.5px;
  margin: 0;
  color: var(--mp-bone);
  background: linear-gradient(180deg, #f5ebcf 0%, #e9d49a 55%, #cbab63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
.fd-epithet {
  font-family: var(--mp-serif-body);
  font-style: italic;
  font-size: 18px;
  color: var(--mp-ink);
  margin: 8px 0 14px;
}
.fd-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fd-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-bone);
  background: rgba(7, 8, 11, .72);
  border: 1px solid rgba(216, 177, 90, .22);
}
.fd-badge .fd-badge-ic { font-size: 12px; line-height: 1; }
.fd-badge.rarity-legendary {
  color: var(--mp-gold-1);
  border-color: rgba(216, 177, 90, .5);
  background: rgba(40, 30, 12, .55);
  box-shadow: 0 0 16px -6px var(--mp-gold-glow);
}
.fd-badge.role { color: var(--rc, var(--accent)); border-color: color-mix(in srgb, var(--rc, var(--accent)) 45%, transparent); }
.fd-badge.role .fd-badge-ic { color: var(--rc, var(--accent)); }
.fd-badge.owned { color: var(--mp-bone); }
.fd-badge.owned .x { opacity: .6; }
.fd-badge.owned .max { opacity: .55; }

/* ── Body ─────────────────────────────────────────────────────────────────── */
.fd-body {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 177, 90, .25) transparent;
}
.fd-body::-webkit-scrollbar { width: 8px; }
.fd-body::-webkit-scrollbar-thumb { background: rgba(216, 177, 90, .22); }
.fd-col {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.fd-col.left { border-right: 1px solid rgba(216, 177, 90, .12); }

.fd-block { position: relative; }
.fd-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
  margin-bottom: 14px;
}
.fd-block-head svg { color: var(--mp-gold-2); flex-shrink: 0; }
.fd-block-head .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 177, 90, .18), transparent);
}

/* Hintergrund */
.fd-quote {
  font-family: var(--mp-serif-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--mp-bone);
  padding-left: 16px;
  border-left: 2px solid var(--accent, var(--mp-teal-1));
  margin: 0 0 16px;
}
.fd-prose {
  font-family: var(--mp-serif-body);
  font-size: 16px;
  line-height: 1.62;
  color: var(--mp-ink);
  margin: 0;
}

/* Spielweise */
.fd-move-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-family: var(--mp-serif-body);
  font-size: 16.5px;
  color: var(--mp-bone);
}
.fd-tag {
  flex-shrink: 0;
  font-family: var(--mp-sans);
  font-size: 9px;
  letter-spacing: 1.8px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mp-ink);
  padding: 5px 9px;
  background: rgba(216, 177, 90, .08);
  border: 1px solid rgba(216, 177, 90, .2);
}
.fd-ability {
  position: relative;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--accent-soft), transparent 80%), rgba(7, 8, 11, .45);
  border: 1px solid var(--accent-line);
  margin-bottom: 18px;
}
.fd-ability::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent, var(--mp-teal-1)), transparent);
}
.fd-ability-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.fd-ability-label {
  font-size: 9.5px;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent, var(--mp-teal-1));
}
.fd-ability-name {
  font-family: var(--mp-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--mp-bone);
  letter-spacing: .5px;
}
.fd-ability-body { font-size: 14px; line-height: 1.55; color: var(--mp-ink); margin: 0; }

.fd-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.fd-tips li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mp-ink);
}
.fd-tips li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--accent, var(--mp-teal-1));
  transform: rotate(45deg);
  box-shadow: 0 0 6px -1px var(--accent, var(--mp-teal-1));
}
.fd-tips li b { color: var(--mp-bone); font-weight: 600; }

/* verwandte Figuren */
.fd-related { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fd-rel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(7, 8, 11, .45);
  border: 1px solid var(--accent-line);
  cursor: pointer;
  color: var(--mp-bone);
  transition: border-color .14s ease, background .14s ease, transform .12s ease;
}
.fd-rel:hover { border-color: var(--accent, var(--mp-teal-1)); background: var(--accent-soft); transform: translateY(-1px); }
.fd-rel-lbl { font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mp-ink-dim); }
.fd-rel-name { font-size: 13px; font-weight: 700; }
.fd-rel-arr { color: var(--accent, var(--mp-teal-1)); font-size: 15px; line-height: 1; }

/* ── Rechte Spalte — Kosten ───────────────────────────────────────────────── */
.fd-cost {
  padding: 18px 20px;
  background: rgba(7, 8, 11, .5);
  border: 1px solid rgba(216, 177, 90, .16);
}
.fd-cost-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.fd-cost-orb {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--effect);
  border: 1px solid color-mix(in srgb, var(--effect) 45%, transparent);
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--effect) 22%, transparent), transparent 70%), rgba(7, 8, 11, .6);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.fd-cost-orb svg { transform: rotate(-45deg); }
.fd-cost-num { display: flex; align-items: baseline; gap: 8px; }
.fd-cost-num .n { font-family: var(--mp-serif); font-size: 40px; line-height: 1; font-weight: 700; color: var(--mp-bone); }
.fd-cost-num .free { font-family: var(--mp-serif); font-size: 30px; font-weight: 600; color: var(--mp-gold-1); letter-spacing: 1px; }
.fd-cost-num .u { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mp-ink-dim); font-weight: 700; }
.fd-mana-bar { display: flex; gap: 4px; margin-bottom: 8px; }
.fd-mana-pip { flex: 1; height: 6px; background: rgba(216, 177, 90, .1); border: 1px solid color-mix(in srgb, var(--effect) 16%, transparent); }
.fd-mana-pip.full {
  background: linear-gradient(180deg, color-mix(in srgb, var(--effect) 90%, white 10%), color-mix(in srgb, var(--effect) 55%, black));
  border-color: color-mix(in srgb, var(--effect) 60%, transparent);
  box-shadow: 0 0 7px -1px var(--effect);
}
.fd-cost-note { font-size: 11.5px; line-height: 1.45; color: var(--mp-ink-dim); }
.fd-cost-note b { color: var(--mp-ink); font-weight: 600; }

/* ── Zugbild — Rahmen aus der Vorlage, BRETT bleibt unser .pcx-board ───────── */
.fd-zug .pcx-pane,
.fd-zug .pcx-boardwrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.pcx-board-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  padding: 5px;
  background: rgba(7, 8, 11, .55);
  border: 1px solid rgba(216, 177, 90, .14);
  margin-bottom: 16px;
}
.pcx-tab {
  padding: 10px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.pcx-tab:hover { color: var(--mp-ink); }
.pcx-tab.on {
  color: #07080b;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--mp-teal-1)) 95%, white), color-mix(in srgb, var(--accent, var(--mp-teal-1)) 70%, black));
  box-shadow: 0 0 18px -6px var(--accent, var(--mp-teal-1));
}
.pcx-pane { width: 100%; }
.pcx-pane[hidden] { display: none; }

/* ── Unser Brett (unveraendert) + Marker-Farben ──────────────────────────────
   ziehen=gold · schlagen=roter Ring · beides=gold+roter Ring · Effekt=blau. */
/* Brett im Look des echten Spielbretts (#board): Goldrahmen + texturierte Felder. */
.pcx-board {
  position: relative;
  width: min(300px, 92%);
  aspect-ratio: 1;
  margin: 2px auto;
  padding: 4px; overflow: hidden;
  border: 2px solid var(--rift-gold); border-radius: 7px;
  background: var(--mp-board-frame);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.86),
    0 0 18px rgba(10,200,185,.18),
    inset 0 0 0 1px rgba(240,210,131,.22),
    inset 0 0 24px rgba(0,0,0,.7);
}
.pcx-board::before {
  content: ""; position: absolute; inset: 4px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(240,210,131,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.42), inset 0 0 28px rgba(0,0,0,.46);
}
.pcx-grid {
  position: absolute;
  inset: 4px;
  display: grid;
  grid-template-columns: repeat(var(--n, 7), 1fr);
  gap: 1px;
  background: transparent;
}
.pcx-sq {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; isolation: isolate;
  background: var(--mp-sq-light);
}
.pcx-sq.dark { background: var(--mp-sq-dark); }
.pcx-sq[data-cx-target] { cursor: pointer; }
.pcx-dot { width: 30%; height: 30%; border-radius: 50%; transition: transform .12s ease; }
.pcx-sq.move .pcx-dot { background: radial-gradient(circle, var(--mp-mark-move), var(--mp-mark-move-2)); box-shadow: 0 0 8px rgba(240, 210, 131, .55); }
.pcx-sq.cap .pcx-dot {
  width: 52%;
  height: 52%;
  border-radius: 50%;
  background: transparent;
  border: 3px solid var(--mp-mark-cap);
  box-shadow: 0 0 9px rgba(210, 76, 76, .5);
}
.pcx-sq.both .pcx-dot {
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  background: radial-gradient(circle, var(--mp-mark-move), var(--mp-mark-move-2));
  border: 3px solid var(--mp-mark-cap);
  box-shadow: 0 0 9px rgba(210, 76, 76, .4);
}
.pcx-sq.effect .pcx-dot { background: radial-gradient(circle, var(--mp-mark-effect), var(--mp-mark-effect-2)); box-shadow: 0 0 9px rgba(90, 154, 214, .6); }
.pcx-sq[data-cx-target]:hover .pcx-dot { transform: scale(1.25); }
.pcx-sq.flash { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--mp-gold-1)) 60%, transparent), inset 0 0 18px -3px var(--accent, var(--mp-gold-1)) !important; }

.pcx-piece {
  position: absolute;
  left: calc(100% / var(--n, 7) * 3);
  top: calc(100% / var(--n, 7) * 3);
  width: calc(100% / var(--n, 7));
  height: calc(100% / var(--n, 7));
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(0, 0);
  transition: transform .5s cubic-bezier(.45, .05, .25, 1);
  z-index: 3;
  pointer-events: none;
}
.pcx-piece.moving { z-index: 5; }
.pcx-piece img { width: 112%; height: 112%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .7)); }
.pcx-piece-glyph { font-size: 26px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6)); }

/* ── Demo-Animation: Akteure (Opfer/Helfer), Effekt-Pulse, Projektile ──────── */
.pcx-actor {
  position: absolute;
  left: calc(100% / var(--n, 7) * 3);
  top: calc(100% / var(--n, 7) * 3);
  width: calc(100% / var(--n, 7));
  height: calc(100% / var(--n, 7));
  transform: translate(0, 0);
  transition: transform .5s cubic-bezier(.45, .05, .25, 1);
  z-index: 4;
  pointer-events: none;
}
.pcx-actor-body {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  opacity: 0; transform: scale(.55);
  transition: opacity .26s ease, transform .32s cubic-bezier(.2, .9, .3, 1.35);
}
.pcx-actor.in .pcx-actor-body { opacity: 1; transform: scale(1); }
.pcx-actor.gone .pcx-actor-body { opacity: 0; transform: scale(.45); }
.pcx-actor-body img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .7)); }
.pcx-actor-glyph { font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }

/* Effekt-/Schlag-Puls auf einem Feld (Effekt=Blau, Schlag/Gefahr=Rot). */
.pcx-fxmark {
  position: absolute;
  left: calc(100% / var(--n, 7) * 3);
  top: calc(100% / var(--n, 7) * 3);
  width: calc(100% / var(--n, 7));
  height: calc(100% / var(--n, 7));
  z-index: 2; pointer-events: none; opacity: 0;
  transition: opacity .25s ease;
  --fxc: var(--mp-mark-effect);
}
.pcx-fxmark::after {
  content: ""; position: absolute; inset: 16%; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--fxc), color-mix(in srgb, var(--fxc) 30%, transparent) 70%, transparent);
  box-shadow: 0 0 14px -2px var(--fxc);
}
.pcx-fxmark.in { opacity: .92; }
.pcx-fxmark.out { opacity: 0; }
.pcx-fxmark.tone-support, .pcx-fxmark.tone-control, .pcx-fxmark.tone-effect { --fxc: var(--mp-mark-effect); }
.pcx-fxmark.tone-attack, .pcx-fxmark.tone-danger, .pcx-fxmark.tone-cap { --fxc: var(--mp-mark-cap); }
.pcx-fxmark.linger { animation: pcxLinger 1.1s ease-in-out infinite; }
@keyframes pcxLinger { 0%, 100% { opacity: .9; } 50% { opacity: .4; } }

/* Projektil (Kanonenkugel): kleiner Goldball, fliegt entlang transform. */
.pcx-proj {
  position: absolute;
  left: calc(100% / var(--n, 7) * 3);
  top: calc(100% / var(--n, 7) * 3);
  width: calc(100% / var(--n, 7));
  height: calc(100% / var(--n, 7));
  z-index: 6; pointer-events: none;
}
.pcx-proj::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22%; height: 22%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffe9b0, #c89a3e 70%, #6a4f1a);
  box-shadow: 0 0 10px -1px var(--mp-gold-glow);
}

/* Zentrale Figur: aktiviert (Glow-Puls), faellt (Tod) und kehrt zurueck. */
.pcx-piece.pcx-activate { animation: pcxActivate 1s ease-in-out infinite; }
@keyframes pcxActivate {
  0%, 100% { filter: drop-shadow(0 6px 6px rgba(0,0,0,.7)); }
  50% { filter: drop-shadow(0 0 12px var(--accent, var(--mp-mark-effect))) drop-shadow(0 6px 6px rgba(0,0,0,.7)); }
}
.pcx-piece.pcx-fall { transition: opacity .4s ease, transform .4s ease; opacity: 0; transform: translate(0, 6px) scale(.5) rotate(-12deg); }
.pcx-piece.pcx-rise { animation: pcxRise .6s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes pcxRise { from { opacity: 0; transform: translate(0, 8px) scale(.5); } to { opacity: 1; transform: translate(0,0) scale(1); } }

/* ── Realistische Bewegung: Figur wird "aufgehoben" (Lift) und "abgesetzt" ────
   Der aeussere .pcx-piece traegt die Feld-Position (translate). Der Lift laeuft
   auf dem inneren Sprite, damit beides unabhaengig bleibt — wie eine Hand, die
   die Figur anhebt, ueber das Brett traegt und wieder hinstellt. */
.pcx-piece img, .pcx-piece-glyph { transition: transform .2s cubic-bezier(.3, .7, .3, 1), filter .2s ease; will-change: transform; }
.pcx-piece.lifting img { transform: translateY(-15%) scale(1.08); filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .6)); }
.pcx-piece.lifting .pcx-piece-glyph { transform: translateY(-15%) scale(1.08); }
/* Aufprall beim Absetzen (Stauchen → zurueck), gibt dem Stein Gewicht. */
.pcx-piece.settling img, .pcx-piece.settling .pcx-piece-glyph { animation: pcxSettle .34s cubic-bezier(.3, 1.4, .5, 1) 1; }
@keyframes pcxSettle {
  0% { transform: translateY(-15%) scale(1.08); }
  45% { transform: translateY(2%) scale(1.04, .94); }
  100% { transform: translateY(0) scale(1); }
}

/* ── Lande-/Schlag-/Effekt-Ring — exakt die Play-Brett-Sprache ────────────────
   Zug = goldener Atem-Ring (lastMoveBreath), Schlag = roter Schlag-Ring
   (lastCaptureStrike), Effekt = tuerkiser Fokus-Ring (lastEffectFocus). Dieselben
   Keyframes wie auf dem echten Brett, damit das Dossier 1:1 wie im Spiel liest. */
.pcx-land {
  position: absolute;
  left: calc(100% / var(--n, 7) * 3);
  top: calc(100% / var(--n, 7) * 3);
  width: calc(100% / var(--n, 7));
  height: calc(100% / var(--n, 7));
  z-index: 2; pointer-events: none;
}
/* Ring liegt HINTER der Figur (z-index 2) und ist groesser als der Sprite (112%),
   damit er ihn als Schockwelle rahmt statt verdeckt zu werden. */
.pcx-land::before {
  content: ""; position: absolute; inset: -12%;
  border: 3px solid rgba(216, 177, 90, .95);
  border-radius: 3px;
  box-shadow: 0 0 16px -2px rgba(216, 177, 90, .6), inset 0 0 12px -3px rgba(216, 177, 90, .5);
  opacity: 0; transform: scale(.82);
}
.pcx-land.move::before { animation: lastMoveBreath 1.4s ease-out 1; }
.pcx-land.cap::before {
  border-color: rgba(226, 106, 106, .98);
  box-shadow: 0 0 18px -1px rgba(226, 106, 106, .7), inset 0 0 12px -3px rgba(226, 106, 106, .5);
  animation: lastCaptureStrike 1.3s ease-out 1;
}
.pcx-land.effect::before {
  border-color: rgba(77, 208, 196, .98);
  box-shadow: 0 0 20px -1px rgba(77, 208, 196, .7), inset 0 0 12px -3px rgba(77, 208, 196, .5);
  animation: lastEffectFocus 1.6s ease-out 1;
}

.pcx-board-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mp-ink);
  background: rgba(7, 8, 11, .45);
  border: 1px dashed rgba(216, 177, 90, .2);
  padding: 16px;
  text-align: center;
  width: 100%;
}
.pcx-effect-custom { display: flex; flex-direction: column; gap: 6px; }
.pcx-effect-custom strong { color: #7ab6ec; font-size: 14px; letter-spacing: .04em; }
.pcx-effect-note {
  margin: 12px 0 0;
  font-family: var(--mp-serif-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--mp-ink);
  text-align: center;
  max-width: 300px;
}

/* Legende — Marker-Sprache (gold/rot/blau) bleibt */
.pcx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--mp-ink);
}
.pcx-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pcx-legend .lg { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-sizing: border-box; flex-shrink: 0; }
.pcx-legend .lg.move { background: radial-gradient(circle at 40% 35%, var(--mp-mark-move), var(--mp-mark-move-2)); }
.pcx-legend .lg.cap { background: transparent; border: 2px solid var(--mp-mark-cap); }
.pcx-legend .lg.both { background: radial-gradient(circle at 40% 35%, var(--mp-mark-move), var(--mp-mark-move-2)); border: 2px solid var(--mp-mark-cap); }
.pcx-legend .lg.effect { background: radial-gradient(circle at 40% 35%, var(--mp-mark-effect), var(--mp-mark-effect-2)); }

/* "Zug abspielen" — Gold-CTA aus der Vorlage */
.pcx-demo-btn {
  margin-top: 16px;
  width: 100%;
  padding: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--mp-sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #07080b;
  background: linear-gradient(180deg, #f0d27a 0%, #d8b15a 45%, #b08530 100%);
  border: 1px solid #f0d27a;
  box-shadow: 0 0 24px -8px var(--mp-gold-glow), inset 0 1px 0 rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pcx-demo-btn svg { width: 13px; height: 13px; }
.pcx-demo-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 30px -8px var(--mp-gold-glow), inset 0 1px 0 rgba(255, 255, 255, .5); }
.pcx-demo-btn:active { transform: translateY(0); }

.piece-codex-btn { cursor: pointer; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .fd-frame { flex-direction: column; }
  .fd-arrow.left { order: 2; }
  .fd-arrow.right { order: 3; }
  .fd-modal { order: 1; width: 100%; }
  .fd-body { grid-template-columns: 1fr; }
  .fd-col.left { border-right: none; border-bottom: 1px solid rgba(216, 177, 90, .12); }
  .fd-hero { height: 210px; }
  .fd-name { font-size: clamp(30px, 8vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .fd-frame, .pcx-backdrop, .pcx-piece, .pcx-demo-btn, .pcx-dot { transition: none !important; }
  .pcx-actor, .pcx-actor-body, .pcx-fxmark, .pcx-proj { transition: none !important; }
  .pcx-piece img, .pcx-piece-glyph { transition: none !important; }
  .pcx-piece.pcx-activate, .pcx-piece.pcx-rise, .pcx-fxmark.linger,
  .pcx-piece.settling img, .pcx-piece.settling .pcx-piece-glyph,
  .pcx-land::before { animation: none !important; }
}

/* ===========================================================================
   ADMIN-DASHBOARD (mode-admin, teilt sich #infoPage mit Codex/Support).
   Designsprache: scharfe Ecken + Eckklammern, Gold/Teal-Akzente, Serif-Header
   (von .duell-head). Kein Block-Glow (Ambient von der mode-info-Vignette).
   =========================================================================== */
  .adm { max-width: 1180px; margin: 0 auto; width: 100%; }
  .adm .duell-head { margin-bottom: 22px; }

  .adm-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    border-bottom: 1px solid var(--mp-ink-faint);
    margin-bottom: 22px;
  }
  .adm-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; background: none; border: none; cursor: pointer;
    color: var(--mp-ink); font-family: var(--mp-sans); font-weight: 600;
    font-size: 13.5px; letter-spacing: .02em;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
  }
  .adm-tab svg { opacity: .7; }
  .adm-tab:hover { color: var(--mp-bone); }
  .adm-tab.on { color: var(--mp-teal-1); border-bottom-color: var(--mp-teal-1); }
  .adm-tab.on svg { opacity: 1; }

  .adm-loading, .adm-empty, .adm-chart-empty {
    padding: 40px 20px; text-align: center; color: var(--mp-ink-dim);
    font-family: var(--mp-sans); font-size: 14px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  .adm-loading svg { animation: admSpin 1s linear infinite; }
  @keyframes admSpin { to { transform: rotate(360deg); } }

  .adm-live {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
    padding: 11px 16px; margin-bottom: 18px;
    background: var(--mp-panel-2); border: 1px solid var(--mp-ink-faint);
    font-family: var(--mp-sans); font-size: 12.5px; color: var(--mp-ink);
  }
  .adm-live b { color: var(--mp-bone); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
  .adm-live span { display: inline-flex; gap: 6px; align-items: baseline; }
  .adm-live em { font-style: normal; color: var(--mp-teal-1); font-weight: 700; }
  .adm-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mp-teal-1);
    box-shadow: 0 0 8px var(--mp-teal-glow); animation: admPulse 2s ease-in-out infinite; }
  @keyframes admPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

  .adm-kpis {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px; margin-bottom: 22px;
  }
  .adm-kpi {
    position: relative; padding: 18px 16px 15px;
    background: var(--mp-panel); border: 1px solid var(--mp-ink-faint);
    overflow: hidden;
  }
  .adm-kpi::before, .adm-kpi::after {
    content: ""; position: absolute; width: 12px; height: 12px;
    border: 1px solid var(--mp-gold-3); pointer-events: none;
  }
  .adm-kpi::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
  .adm-kpi::after { bottom: 6px; right: 6px; border-left: none; border-top: none; }
  .adm-kpi-val { font-family: var(--mp-serif); font-size: 30px; font-weight: 700; color: var(--mp-bone); line-height: 1; }
  .adm-kpi-label { margin-top: 7px; font-family: var(--mp-sans); font-size: 12px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--mp-ink); }
  .adm-kpi-sub { margin-top: 4px; font-family: var(--mp-sans); font-size: 11.5px; color: var(--mp-ink-dim); }
  .adm-kpi--gold .adm-kpi-val { color: var(--mp-gold-1); }
  .adm-kpi--gold::before, .adm-kpi--gold::after { border-color: var(--mp-gold-2); }
  .adm-kpi--teal .adm-kpi-val { color: var(--mp-teal-1); }
  .adm-kpi--teal::before, .adm-kpi--teal::after { border-color: var(--mp-teal-3); }

  .adm-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .adm-chart { padding: 16px; background: var(--mp-panel); border: 1px solid var(--mp-ink-faint); }
  .adm-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px;
    font-family: var(--mp-sans); font-weight: 600; font-size: 13px; color: var(--mp-bone); }
  .adm-chart-head small { color: var(--mp-ink-dim); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; font-size: 10.5px; }
  .adm-bars { display: flex; align-items: flex-end; gap: 4px; height: 110px; }
  .adm-bar { flex: 1; min-width: 5px; height: var(--h); position: relative;
    background: linear-gradient(180deg, var(--mp-teal-1), var(--mp-teal-3));
    border-radius: 2px 2px 0 0; transition: filter .15s ease; }
  .adm-bar:hover { filter: brightness(1.2); }
  .adm-bar-n { position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    font-family: var(--mp-mono); font-size: 9.5px; color: var(--mp-ink-dim); }

  .adm-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
  .adm-search { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px;
    background: var(--mp-panel-2); border: 1px solid var(--mp-ink-faint); color: var(--mp-ink-dim); }
  .adm-search input { flex: 1; background: none; border: none; outline: none; padding: 11px 0;
    color: var(--mp-bone); font-family: var(--mp-sans); font-size: 14px; }
  .adm-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    background: var(--mp-panel-2); border: 1px solid var(--mp-ink-faint); color: var(--mp-ink); cursor: pointer;
    transition: color .15s ease, border-color .15s ease; }
  .adm-iconbtn:hover { color: var(--mp-teal-1); border-color: var(--mp-teal-3); }

  .adm-table-wrap { border: 1px solid var(--mp-ink-faint); overflow-x: auto; }
  .adm-table { width: 100%; border-collapse: collapse; font-family: var(--mp-sans); font-size: 13.5px; }
  .adm-table thead th { text-align: left; padding: 11px 14px; background: var(--mp-panel-2);
    color: var(--mp-ink); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 1px solid var(--mp-ink-faint); white-space: nowrap; }
  .adm-table tbody td { padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--mp-ink-faint) 55%, transparent);
    color: var(--mp-bone); vertical-align: middle; }
  .adm-table tbody tr:last-child td { border-bottom: none; }
  .adm-table tbody tr:hover td { background: color-mix(in srgb, var(--mp-teal-glow) 8%, transparent); }
  .adm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .adm-right { text-align: right; }
  .adm-dim { color: var(--mp-ink-dim); }
  .adm-w { color: #78daa2; font-weight: 600; }
  .adm-l { color: var(--mp-danger); }
  .adm-d { color: var(--mp-ink); }
  .adm-shards { color: var(--mp-teal-1); font-weight: 600; }
  .adm-gold { color: var(--mp-gold-1); }
  .adm-count { margin-top: 10px; font-family: var(--mp-sans); font-size: 12px; color: var(--mp-ink-dim); text-align: right; }

  .adm-cell-user { display: flex; align-items: center; gap: 11px; }
  .adm-av { width: 36px; height: 36px; flex: none; border-radius: 50%; overflow: hidden;
    border: 1px solid var(--mp-gold-3); display: grid; place-items: center; background: var(--mp-bg-3); }
  .adm-av img { width: 100%; height: 100%; object-fit: cover; }
  .adm-av--text { font-family: var(--mp-serif); font-weight: 700; font-size: 13px; color: var(--mp-gold-1); }
  .adm-user-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .adm-user-name { font-weight: 600; color: var(--mp-bone); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .adm-user-sub { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }

  .adm-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 2px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .adm-badge--admin { background: color-mix(in srgb, var(--mp-teal-3) 28%, transparent); color: var(--mp-teal-1);
    border: 1px solid var(--mp-teal-3); }
  .adm-badge--supporter { background: color-mix(in srgb, var(--mp-gold-3) 25%, transparent); color: var(--mp-gold-1);
    border: 1px solid var(--mp-gold-3); }
  .adm-badge--patron { background: linear-gradient(180deg, color-mix(in srgb, var(--mp-gold-1) 30%, transparent), transparent);
    color: var(--mp-gold-1); border: 1px solid var(--mp-gold-2); }
  .adm-badge--banned { background: color-mix(in srgb, var(--mp-danger) 22%, transparent); color: var(--mp-danger);
    border: 1px solid var(--mp-danger); }
  .adm-act { font-weight: 600; color: var(--mp-bone); }

  /* Pagination / Übersicht-Kopf / Top-Spieler / Mini-Matches / Filter */
  .adm-players-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
  .adm-players-foot .adm-count { margin-top: 0; }
  .adm-over-head { display: flex; align-items: flex-start; gap: 10px; }
  .adm-over-head .adm-live { flex: 1; margin-bottom: 18px; }
  .adm-top .adm-table tbody td { border-bottom: 1px solid color-mix(in srgb, var(--mp-ink-faint) 45%, transparent); }
  .adm-rank { color: var(--mp-gold-1); font-family: var(--mp-serif); font-weight: 700; width: 48px; }
  .adm-mini-matches { display: flex; flex-direction: column; gap: 4px; }
  .adm-mini-match { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
    padding: 7px 10px; background: var(--mp-bg-1); border: 1px solid var(--mp-ink-faint); color: var(--mp-bone);
    font-family: var(--mp-sans); font-size: 12.5px; cursor: pointer; transition: border-color .15s ease; }
  .adm-mini-match:hover { border-color: var(--mp-teal-3); }
  .adm-mini-when { margin-left: auto; }
  .adm-seg--wrap { flex-wrap: wrap; border: none; gap: 5px; }
  .adm-seg--wrap button { border: 1px solid var(--mp-ink-faint); padding: 6px 12px; font-size: 12px; }

  .adm-manage { padding: 6px 13px; background: var(--mp-panel-2); border: 1px solid var(--mp-ink-faint);
    color: var(--mp-bone); font-family: var(--mp-sans); font-weight: 600; font-size: 12.5px; cursor: pointer;
    transition: border-color .15s ease, color .15s ease; white-space: nowrap; }
  .adm-manage:hover { border-color: var(--mp-teal-3); color: var(--mp-teal-1); }

  .adm-modal-ov { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px;
    background: rgba(4,5,8,.72); backdrop-filter: blur(3px); animation: admFade .15s ease; }
  @keyframes admFade { from { opacity: 0; } }
  .adm-modal { position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
    background: var(--mp-bg-2); border: 1px solid var(--mp-gold-3); padding: 24px; }
  .adm-modal-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center;
    background: none; border: 1px solid var(--mp-ink-faint); color: var(--mp-ink); cursor: pointer; }
  .adm-modal-x:hover { color: var(--mp-bone); border-color: var(--mp-ink); }
  .adm-modal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: 34px; margin-bottom: 16px; }
  .adm-modal-head .adm-av { width: 48px; height: 48px; }
  .adm-modal-name { font-family: var(--mp-serif); font-size: 21px; font-weight: 700; color: var(--mp-bone); }
  .adm-modal-id { font-family: var(--mp-mono); font-size: 11.5px; color: var(--mp-ink-dim); }
  .adm-modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 14px; padding: 14px;
    background: var(--mp-panel-2); border: 1px solid var(--mp-ink-faint); margin-bottom: 18px;
    font-family: var(--mp-sans); font-size: 12px; color: var(--mp-ink); }
  .adm-modal-stats b { display: block; color: var(--mp-bone); font-size: 15px; font-weight: 700; margin-top: 2px; }
  .adm-modal-sec { padding: 15px 0; border-top: 1px solid var(--mp-ink-faint); }
  .adm-modal-sec-title { display: flex; align-items: center; gap: 7px; font-family: var(--mp-sans); font-weight: 700;
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mp-gold-1); margin-bottom: 12px; }
  .adm-modal-sec-title svg { color: var(--mp-gold-2); }
  .adm-grant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  .adm-grant-grid label { display: flex; flex-direction: column; gap: 5px; font-family: var(--mp-sans);
    font-size: 11.5px; color: var(--mp-ink); }
  .adm-grant-grid input { background: var(--mp-bg-1); border: 1px solid var(--mp-ink-faint); padding: 9px 11px;
    color: var(--mp-bone); font-family: var(--mp-mono); font-size: 14px; outline: none; }
  .adm-grant-grid input:focus { border-color: var(--mp-teal-3); }
  .adm-hint { font-family: var(--mp-sans); font-size: 11.5px; color: var(--mp-ink-dim); margin: 8px 0 0; }

  .adm-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 1px solid var(--mp-ink-faint);
    background: var(--mp-panel-2); color: var(--mp-bone); font-family: var(--mp-sans); font-weight: 700; font-size: 13px;
    cursor: pointer; transition: filter .15s ease, border-color .15s ease, transform .1s ease; }
  .adm-btn:hover { filter: brightness(1.1); }
  .adm-btn:active { transform: translateY(1px); }
  .adm-btn:disabled { opacity: .5; cursor: default; }
  .adm-btn--teal { border-color: var(--mp-teal-3); color: var(--mp-teal-1);
    background: color-mix(in srgb, var(--mp-teal-3) 16%, var(--mp-panel-2)); }
  .adm-btn--danger { border-color: var(--mp-danger); color: var(--mp-danger);
    background: color-mix(in srgb, var(--mp-danger) 12%, transparent); }
  .adm-btn--danger:hover { background: color-mix(in srgb, var(--mp-danger) 22%, transparent); }

  .adm-seg { display: inline-flex; border: 1px solid var(--mp-ink-faint); }
  .adm-seg button { padding: 9px 18px; background: var(--mp-bg-1); border: none; border-right: 1px solid var(--mp-ink-faint);
    color: var(--mp-ink); font-family: var(--mp-sans); font-weight: 600; font-size: 13px; cursor: pointer;
    transition: background .15s ease, color .15s ease; }
  .adm-seg button:last-child { border-right: none; }
  .adm-seg button.on { background: color-mix(in srgb, var(--mp-gold-3) 30%, transparent); color: var(--mp-gold-1); }
  .adm-seg button:hover:not(.on) { color: var(--mp-bone); }

  .adm-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .adm-modal-row .adm-modal-sec-title { margin-bottom: 4px; }
  .adm-modal-row .adm-hint { margin: 0; }
  .adm-toggle { flex: none; width: 50px; height: 28px; border-radius: 14px; border: 1px solid var(--mp-ink-faint);
    background: var(--mp-bg-1); cursor: pointer; position: relative; transition: background .15s ease, border-color .15s ease; }
  .adm-toggle span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--mp-ink); transition: transform .18s ease, background .18s ease; }
  .adm-toggle.on { background: color-mix(in srgb, var(--mp-teal-3) 40%, transparent); border-color: var(--mp-teal-3); }
  .adm-toggle.on span { transform: translateX(22px); background: var(--mp-teal-1); }

  .adm-modal-danger { padding-top: 16px; border-top: 1px solid var(--mp-ink-faint); margin-top: 4px; }

  .adm-mod-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
    font-family: var(--mp-sans); font-size: 12.5px; color: var(--mp-ink); }
  .adm-msgs { border: 1px solid var(--mp-ink-faint); }
  .adm-msg { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--mp-ink-faint) 55%, transparent); }
  .adm-msg:last-child { border-bottom: none; }
  .adm-msg:hover { background: color-mix(in srgb, var(--mp-teal-glow) 7%, transparent); }
  .adm-msg-main { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
    font-family: var(--mp-sans); font-size: 13.5px; }
  .adm-msg-author { color: var(--mp-gold-1); font-weight: 700; }
  .adm-msg-body { color: var(--mp-bone); word-break: break-word; }
  .adm-msg-time { flex: none; font-family: var(--mp-sans); font-size: 11px; }
  .adm-msg-del { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: none;
    border: 1px solid transparent; color: var(--mp-ink-dim); cursor: pointer; transition: color .15s ease, border-color .15s ease; }
  .adm-msg-del:hover { color: var(--mp-danger); border-color: var(--mp-danger); }

  /* Admin-Nav-Eintrag (Staff-Abzeichen) */
  .navBadgeAdmin { background: color-mix(in srgb, var(--mp-teal-3) 30%, transparent) !important;
    color: var(--mp-teal-1) !important; border: 1px solid var(--mp-teal-3) !important; }

  /* Ansagen-Tab: Eingabe + Liste */
  .adm-announce-new { padding: 16px; background: var(--mp-panel); border: 1px solid var(--mp-ink-faint); margin-bottom: 16px; }
  .adm-textarea { width: 100%; background: var(--mp-bg-1); border: 1px solid var(--mp-ink-faint); color: var(--mp-bone);
    font-family: var(--mp-sans); font-size: 14px; padding: 10px 12px; outline: none; resize: vertical; box-sizing: border-box; }
  .adm-textarea:focus { border-color: var(--mp-teal-3); }
  .adm-announce-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
  .adm-grant-grid select { background: var(--mp-bg-1); border: 1px solid var(--mp-ink-faint); padding: 9px 11px;
    color: var(--mp-bone); font-family: var(--mp-sans); font-size: 14px; outline: none; }
  .adm-grant-grid select:focus { border-color: var(--mp-teal-3); }
  .adm-row-muted td { opacity: .5; }

  /* System-Ankündigungs-Banner (Broadcast, oben in der App) */
  .announceBar { position: relative; z-index: 60; display: flex; flex-direction: column; gap: 1px; }
  .announce { display: flex; align-items: center; gap: 10px; padding: 9px 16px;
    font-family: var(--mp-sans); font-size: 13.5px; color: var(--mp-bone);
    background: color-mix(in srgb, var(--mp-teal-3) 18%, var(--mp-bg-1));
    border-bottom: 1px solid color-mix(in srgb, var(--mp-teal-3) 40%, transparent); }
  .announce--warn { background: color-mix(in srgb, var(--mp-danger) 18%, var(--mp-bg-1));
    border-bottom-color: color-mix(in srgb, var(--mp-danger) 45%, transparent); }
  .announce--maint { background: color-mix(in srgb, var(--mp-gold-3) 22%, var(--mp-bg-1));
    border-bottom-color: color-mix(in srgb, var(--mp-gold-2) 45%, transparent); }
  .announce-ic { display: inline-flex; flex: none; color: var(--mp-teal-1); }
  .announce--warn .announce-ic { color: var(--mp-danger); }
  .announce--maint .announce-ic { color: var(--mp-gold-1); }
  .announce--maint .announce-body strong { color: var(--mp-gold-1); }
  .announce-body { flex: 1; min-width: 0; }
  .announce-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; background: none;
    border: 1px solid transparent; color: var(--mp-ink); cursor: pointer; border-radius: 3px;
    transition: color .15s ease, border-color .15s ease; }
  .announce-x:hover { color: var(--mp-bone); border-color: var(--mp-ink-faint); }

  /* In-Game Melde-Flagge (nur in Brett-Modi, wenn Online verbunden) */
  .reportFlag { display: none; position: fixed; right: 18px; bottom: 18px; z-index: 70;
    width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--mp-panel-2); border: 1px solid var(--mp-ink-faint); color: var(--mp-ink);
    cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); transition: color .15s ease, border-color .15s ease, transform .12s ease; }
  .reportFlag:hover { color: var(--mp-danger); border-color: var(--mp-danger); transform: translateY(-1px); }
  body.has-reporting.mode-demo .reportFlag,
  body.has-reporting.mode-puzzle .reportFlag,
  body.has-reporting.mode-lessons .reportFlag { display: flex; }

  /* ===== Feedback-/Melde-Popup (Claude-Design „Feedback Modal", .fb-*) ===== */
  .fb-ov { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 24px;
    background: rgba(7, 8, 11, 0.88); backdrop-filter: blur(14px); animation: fbOverlayIn 240ms ease; }
  @keyframes fbOverlayIn { from { opacity: 0; } to { opacity: 1; } }
  .fb { position: relative; width: 520px; max-width: 100%;
    background:
      radial-gradient(ellipse 90% 55% at 50% 0%, rgba(77, 208, 196, 0.06), transparent 60%),
      linear-gradient(180deg, rgba(20, 23, 31, 0.97) 0%, rgba(9, 11, 15, 0.98) 100%);
    border: 1px solid rgba(216, 177, 90, 0.3);
    box-shadow: 0 40px 90px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.6),
      inset 0 0 0 1px rgba(216, 177, 90, 0.08), inset 0 0 70px rgba(0,0,0,0.4);
    animation: fbIn 320ms cubic-bezier(.2,.8,.3,1); }
  @keyframes fbIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
  .fb::before, .fb::after { content: ""; position: absolute; width: 18px; height: 18px;
    border: 1px solid var(--mp-gold-2); pointer-events: none; }
  .fb::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .fb::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
  .fb-rule { position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--mp-teal-2) 30%, var(--mp-gold-1) 70%, transparent); opacity: 0.55; }

  .fb-head { padding: 26px 28px 18px; position: relative; }
  .fb-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: 3px;
    text-transform: uppercase; font-weight: 700; color: var(--mp-teal-1); margin-bottom: 12px; }
  .fb-eyebrow .dot { width: 6px; height: 6px; background: var(--mp-teal-1); border-radius: 50%;
    box-shadow: 0 0 8px var(--mp-teal-1); animation: fbPulse 1.9s ease-in-out infinite; }
  .fb-eyebrow .sep { color: var(--mp-gold-3); margin: 0 1px; }
  @keyframes fbPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
  .fb-title { font-family: var(--mp-serif); font-weight: 700; font-size: 27px; letter-spacing: 1.5px;
    color: var(--mp-bone); margin: 0; line-height: 1.05; }
  .fb-flourish { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--mp-gold-3); }
  .fb-flourish .line { height: 1px; flex: 1; background: linear-gradient(90deg, var(--mp-gold-3), transparent); }
  .fb-flourish .diamond { width: 5px; height: 5px; background: var(--mp-gold-1); transform: rotate(45deg); box-shadow: 0 0 6px var(--mp-gold-glow); }
  .fb-close { position: absolute; top: 22px; right: 22px; width: 34px; height: 34px; display: grid; place-items: center;
    background: none; border: 1px solid rgba(216, 177, 90, 0.22); color: var(--mp-ink-dim); cursor: pointer; transition: all 160ms ease; }
  .fb-close:hover { color: var(--mp-bone); border-color: var(--mp-gold-1); background: rgba(28, 22, 12, 0.6); box-shadow: 0 0 16px rgba(216, 177, 90, 0.18); }

  .fb-body { padding: 4px 28px 0; }
  .fb-label { font-size: 9.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mp-ink-dim);
    font-weight: 700; margin-bottom: 11px; display: flex; align-items: center; gap: 9px; }
  .fb-label .num { font-family: var(--mp-mono); color: var(--mp-gold-2); }

  .fb-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 24px; }
  .fb-cat { position: relative; display: flex; align-items: center; gap: 11px; padding: 13px 14px; text-align: left;
    background: rgba(11, 13, 18, 0.6); border: 1px solid rgba(216, 177, 90, 0.14); cursor: pointer; transition: all 170ms ease; }
  .fb-cat .ico { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; color: var(--mp-gold-2); transition: color 170ms ease; }
  .fb-cat .ct { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .fb-cat .cn { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--mp-bone); text-transform: uppercase; }
  .fb-cat .cd { font-size: 10.5px; color: var(--mp-ink-dim); letter-spacing: 0.3px; }
  .fb-cat:hover { border-color: rgba(77, 208, 196, 0.3); background: rgba(15, 28, 30, 0.45); }
  .fb-cat:hover .ico { color: var(--mp-teal-1); }
  .fb-cat.active { border-color: var(--mp-teal-2);
    background: linear-gradient(180deg, rgba(35, 155, 149, 0.14), rgba(15, 28, 30, 0.4));
    box-shadow: 0 0 0 1px rgba(77, 208, 196, 0.18), 0 0 22px rgba(77, 208, 196, 0.1); }
  .fb-cat.active .ico { color: var(--mp-teal-1); }
  .fb-cat.active .cn { color: #fff; }
  .fb-cat .tick { position: absolute; top: 9px; right: 10px; width: 14px; height: 14px; color: var(--mp-teal-1);
    opacity: 0; transform: scale(0.6); transition: all 170ms ease; }
  .fb-cat.active .tick { opacity: 1; transform: scale(1); }

  .fb-field { position: relative; margin-bottom: 12px; }
  .fb-text { width: 100%; min-height: 132px; resize: vertical; padding: 15px 16px; box-sizing: border-box;
    font-family: var(--mp-sans); font-size: 14px; line-height: 1.55; color: var(--mp-parchment);
    background: rgba(7, 8, 11, 0.55); border: 1px solid rgba(216, 177, 90, 0.2); outline: none; transition: all 180ms ease; }
  .fb-text::placeholder { color: var(--mp-ink-faint); }
  .fb-text:focus { border-color: var(--mp-teal-2); background: rgba(7, 10, 12, 0.7);
    box-shadow: 0 0 0 1px rgba(77, 208, 196, 0.18), inset 0 0 24px rgba(77, 208, 196, 0.05); }
  .fb-count { position: absolute; bottom: 10px; right: 12px; font-family: var(--mp-mono); font-size: 10px;
    color: var(--mp-ink-faint); pointer-events: none; letter-spacing: 0.5px; }

  .fb-note { display: flex; align-items: center; gap: 8px; font-family: var(--mp-serif-body); font-style: italic;
    font-size: 14px; color: var(--mp-ink-dim); margin-bottom: 4px; }
  .fb-note .pin { color: var(--mp-gold-3); display: inline-flex; flex: none; }
  .fb-note b { color: var(--mp-ink); font-weight: 600; }

  .fb-foot { padding: 20px 28px 26px; display: flex; gap: 12px; }
  .fb-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--mp-sans); font-weight: 700; font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase;
    padding: 15px 22px; border: 1px solid transparent; background: none; cursor: pointer; transition: all 200ms ease; }
  .fb-btn:disabled { opacity: .6; cursor: default; }
  .fb-btn-ghost { color: var(--mp-ink); background: transparent; border-color: rgba(216, 177, 90, 0.22); }
  .fb-btn-ghost:hover { color: var(--mp-bone); border-color: rgba(216, 177, 90, 0.5); }
  .fb-btn-primary { flex: 1; color: #0c0e13; background: linear-gradient(180deg, #f0d27a 0%, #d8b15a 40%, #b08530 100%);
    border-color: #f0d27a; box-shadow: 0 0 0 1px rgba(216, 177, 90, 0.25), 0 0 28px rgba(216, 177, 90, 0.22), inset 0 1px 0 rgba(255,255,255,0.4); }
  .fb-btn-primary:hover:not(:disabled) { transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(216, 177, 90, 0.4), 0 6px 38px rgba(216, 177, 90, 0.42), inset 0 1px 0 rgba(255,255,255,0.5); }
  .fb-btn-primary .corner { position: absolute; width: 5px; height: 5px; border: 1px solid #6a4f1a; }
  .fb-btn-primary .corner.tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
  .fb-btn-primary .corner.tr { top: 4px; right: 4px; border-left: none; border-bottom: none; }
  .fb-btn-primary .corner.bl { bottom: 4px; left: 4px; border-right: none; border-top: none; }
  .fb-btn-primary .corner.br { bottom: 4px; right: 4px; border-left: none; border-top: none; }

  .fb.sent .fb-body, .fb.sent .fb-foot { display: none; }
  .fb-done { display: none; flex-direction: column; align-items: center; text-align: center; padding: 14px 36px 40px; }
  .fb.sent .fb-done { display: flex; }
  .fb-done .seal { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--mp-gold-3);
    transform: rotate(45deg); margin-bottom: 22px; box-shadow: 0 0 0 1px rgba(216,177,90,0.12) inset, 0 0 26px rgba(77,208,196,0.14); }
  .fb-done .seal svg { transform: rotate(-45deg); color: var(--mp-teal-1); }
  .fb-done h3 { font-family: var(--mp-serif); font-size: 22px; letter-spacing: 1.5px; color: var(--mp-bone); margin: 0 0 8px; font-weight: 700; }
  .fb-done p { font-family: var(--mp-serif-body); font-size: 16px; color: var(--mp-ink); margin: 0; max-width: 320px; line-height: 1.5; }

  @media (max-width: 540px) { .fb-cats { grid-template-columns: 1fr; } .fb-foot { flex-direction: column-reverse; } }

  /* ===== Erstbesuch-Willkommen (Claude-Design „Welcome Modal", .wm-*) ===== */
  .wm-ov { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 24px;
    background: rgba(7, 8, 11, 0.88); backdrop-filter: blur(14px); animation: wmOverlayIn 240ms ease; }
  @keyframes wmOverlayIn { from { opacity: 0; } to { opacity: 1; } }
  .wm { position: relative; width: 580px; max-width: 100%;
    background:
      radial-gradient(ellipse 90% 55% at 50% 0%, rgba(77, 208, 196, 0.06), transparent 60%),
      linear-gradient(180deg, rgba(20, 23, 31, 0.97) 0%, rgba(9, 11, 15, 0.98) 100%);
    border: 1px solid rgba(216, 177, 90, 0.3);
    box-shadow: 0 40px 90px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.6),
      inset 0 0 0 1px rgba(216, 177, 90, 0.08), inset 0 0 70px rgba(0,0,0,0.4);
    animation: wmIn 320ms cubic-bezier(.2,.8,.3,1) both; }
  @keyframes wmIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
  .wm::before, .wm::after { content: ""; position: absolute; width: 18px; height: 18px;
    border: 1px solid var(--mp-gold-2); pointer-events: none; }
  .wm::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .wm::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
  .wm-rule { position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--mp-teal-2) 30%, var(--mp-gold-1) 70%, transparent); opacity: 0.55; }

  .wm-head { padding: 28px 30px 4px; position: relative; }
  .wm-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: 3px;
    text-transform: uppercase; font-weight: 700; color: var(--mp-teal-1); margin-bottom: 14px; }
  .wm-eyebrow .dot { width: 6px; height: 6px; background: var(--mp-teal-1); border-radius: 50%;
    box-shadow: 0 0 8px var(--mp-teal-1); animation: wmPulse 1.9s ease-in-out infinite; }
  .wm-eyebrow .diamond { width: 5px; height: 5px; background: var(--mp-gold-1); transform: rotate(45deg); box-shadow: 0 0 6px var(--mp-gold-glow); }
  .wm-eyebrow .beta { color: var(--mp-gold-1); }
  @keyframes wmPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
  .wm-title { font-family: var(--mp-serif); font-weight: 700; font-size: 38px; letter-spacing: 2px; color: var(--mp-bone);
    margin: 0; line-height: 1; background: linear-gradient(180deg, #f5ebcf 0%, #e8c879 55%, #b88a2f 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .wm-sub { font-family: var(--mp-serif-body); font-size: 19px; line-height: 1.45; color: var(--mp-ink); margin: 16px 0 0; max-width: 480px; }
  .wm-sub strong { color: var(--mp-bone); font-weight: 600; }
  .wm-close { position: absolute; top: 24px; right: 24px; width: 34px; height: 34px; display: grid; place-items: center;
    background: none; border: 1px solid rgba(216, 177, 90, 0.22); color: var(--mp-ink-dim); cursor: pointer; transition: all 160ms ease; }
  .wm-close:hover { color: var(--mp-bone); border-color: var(--mp-gold-1); background: rgba(28, 22, 12, 0.6); box-shadow: 0 0 16px rgba(216, 177, 90, 0.18); }

  .wm-list { padding: 26px 30px 6px; display: flex; flex-direction: column; gap: 2px; }
  .wm-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px dashed rgba(216, 177, 90, 0.12); }
  .wm-row:last-child { border-bottom: none; }
  .wm-ico { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; color: var(--mp-gold-1);
    background: linear-gradient(135deg, #1a1f2a, #0d1015); border: 1px solid var(--mp-gold-3); position: relative; filter: drop-shadow(0 0 6px rgba(216,177,90,0.12)); }
  .wm-ico::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(216, 177, 90, 0.16); pointer-events: none; }
  .wm-rt { min-width: 0; }
  .wm-rt .rn { font-family: var(--mp-serif); font-size: 16px; letter-spacing: 0.6px; color: var(--mp-bone); font-weight: 600; margin-bottom: 4px; }
  .wm-rt .rn .opt { font-family: var(--mp-sans); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--mp-ink-dim); font-weight: 700; margin-left: 8px; vertical-align: middle; }
  .wm-rt .rd { font-size: 13px; line-height: 1.5; color: var(--mp-ink-dim); }

  .wm-note { margin: 18px 30px 0; padding: 14px 16px; position: relative; background: rgba(35, 155, 149, 0.05);
    border: 1px solid rgba(77, 208, 196, 0.18); font-family: var(--mp-serif-body); font-size: 15.5px; line-height: 1.45; color: var(--mp-ink); }
  .wm-note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg, transparent, var(--mp-teal-2), transparent); }
  .wm-note strong { color: var(--mp-teal-1); font-weight: 600; font-style: normal; }

  .wm-foot { padding: 22px 30px 28px; display: flex; gap: 12px; }
  .wm-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--mp-sans); font-weight: 700; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
    padding: 16px 24px; border: 1px solid transparent; background: none; cursor: pointer; transition: all 200ms ease; }
  .wm-btn .arrow { display: inline-block; transition: transform 160ms; }
  .wm-btn:hover .arrow { transform: translateX(3px); }
  .wm-btn-primary { flex: 1.4; color: #0c0e13; background: linear-gradient(180deg, #f0d27a 0%, #d8b15a 40%, #b08530 100%);
    border-color: #f0d27a; box-shadow: 0 0 0 1px rgba(216, 177, 90, 0.25), 0 0 28px rgba(216, 177, 90, 0.22), inset 0 1px 0 rgba(255,255,255,0.4); }
  .wm-btn-primary:hover { transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(216, 177, 90, 0.4), 0 6px 38px rgba(216, 177, 90, 0.42), inset 0 1px 0 rgba(255,255,255,0.5); }
  .wm-btn-primary .corner { position: absolute; width: 5px; height: 5px; border: 1px solid #6a4f1a; }
  .wm-btn-primary .corner.tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
  .wm-btn-primary .corner.tr { top: 4px; right: 4px; border-left: none; border-bottom: none; }
  .wm-btn-primary .corner.bl { bottom: 4px; left: 4px; border-right: none; border-top: none; }
  .wm-btn-primary .corner.br { bottom: 4px; right: 4px; border-left: none; border-top: none; }
  .wm-btn-secondary { flex: 1; color: var(--mp-bone); background: rgba(18, 21, 28, 0.7); border-color: rgba(216, 177, 90, 0.4); }
  .wm-btn-secondary:hover { border-color: var(--mp-gold-1); color: var(--mp-gold-1); background: rgba(28, 22, 12, 0.7); box-shadow: 0 0 20px rgba(216, 177, 90, 0.18); }

  @media (max-width: 560px) { .wm-foot { flex-direction: column; } .wm-title { font-size: 32px; } }

  /* Admin: Meldungs-Karten */
  .adm-reports { display: flex; flex-direction: column; gap: 10px; }
  .adm-report { padding: 14px 16px; background: var(--mp-panel); border: 1px solid var(--mp-ink-faint); }
  .adm-report--done { opacity: .62; }
  .adm-report-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
  .adm-report-by { font-family: var(--mp-sans); font-weight: 600; font-size: 13px; color: var(--mp-bone); }
  .adm-report-when { margin-left: auto; font-family: var(--mp-sans); font-size: 11.5px; }
  .adm-report-body { font-family: var(--mp-sans); font-size: 13.5px; color: var(--mp-bone); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
  .adm-report-ctx { font-family: var(--mp-mono); font-size: 11px; margin-top: 8px; }
  .adm-report-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
  .adm-report-foot .adm-btn { padding: 7px 12px; font-size: 12.5px; }

  /* Wartungsmodus-Karte (Übersicht) */
  .adm-maint-wrap { margin-bottom: 18px; }
  .adm-maint-wrap:empty { display: none; margin: 0; }
  .adm-maint { display: flex; gap: 18px; align-items: flex-start; padding: 16px 18px;
    background: var(--mp-panel); border: 1px solid var(--mp-ink-faint); border-left: 3px solid var(--mp-gold-3); }
  .adm-maint.is-active { border-left-color: var(--mp-danger);
    background: color-mix(in srgb, var(--mp-danger) 9%, var(--mp-panel)); }
  .adm-maint-main { flex: 1; min-width: 0; }
  .adm-maint-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-family: var(--mp-sans);
    font-weight: 700; font-size: 14px; color: var(--mp-bone); }
  .adm-maint-title svg { color: var(--mp-gold-1); }
  .adm-maint.is-active .adm-maint-title svg { color: var(--mp-danger); }
  .adm-maint-state { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 2px; color: var(--mp-ink-dim); border: 1px solid var(--mp-ink-faint); }
  .adm-maint.is-active .adm-maint-state { color: var(--mp-danger); border-color: var(--mp-danger);
    background: color-mix(in srgb, var(--mp-danger) 14%, transparent); }
  .adm-maint .adm-textarea { margin-top: 10px; }
  .adm-maint-side { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: none; padding-top: 2px; }
  .adm-maint-save { padding: 8px 12px; font-size: 12px; white-space: nowrap; }

  /* Endbildschirm-Test (Übersicht) */
  .adm-field { appearance: none; background: var(--mp-bg-2); color: var(--mp-bone);
    border: 1px solid var(--mp-ink-faint); border-radius: 3px; padding: 9px 12px; font: inherit; font-size: 12.5px;
    cursor: pointer; min-width: 200px; }
  .adm-field:focus { outline: none; border-color: var(--mp-gold-3); }
  .adm-endtest-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .adm-endtest-btn { font-size: 12.5px; }
  .adm-endtest-btn[data-end-tone="win"]    { border-color: var(--mp-gold-3); color: var(--mp-gold-1); }
  .adm-endtest-btn[data-end-tone="win"]:hover    { background: color-mix(in srgb, var(--mp-gold-1) 16%, transparent); }
  .adm-endtest-btn[data-end-tone="loss"]   { border-color: var(--mp-danger); color: #e0796d; }
  .adm-endtest-btn[data-end-tone="loss"]:hover   { background: color-mix(in srgb, var(--mp-danger) 18%, transparent); }
  .adm-endtest-btn[data-end-tone="resign"] { border-color: #8b8578; color: #b6b0a2; }
  .adm-endtest-btn[data-end-tone="resign"]:hover { background: color-mix(in srgb, #b6b0a2 16%, transparent); }
  .adm-endtest-btn[data-end-tone="draw"]   { border-color: var(--mp-teal-3); color: var(--mp-teal-1); }
  .adm-endtest-btn[data-end-tone="draw"]:hover   { background: color-mix(in srgb, var(--mp-teal-1) 16%, transparent); }

  /* Live-Auto-Refresh-Schalter (Übersicht-Kopf) */
  .adm-over-actions { display: flex; gap: 8px; align-items: stretch; flex: none; }
  .adm-auto { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; height: 40px;
    background: var(--mp-panel-2); border: 1px solid var(--mp-ink-faint); color: var(--mp-ink);
    font-family: var(--mp-sans); font-weight: 600; font-size: 12.5px; cursor: pointer;
    transition: color .15s ease, border-color .15s ease; }
  .adm-auto:hover { color: var(--mp-bone); border-color: var(--mp-ink); }
  .adm-auto.on { color: var(--mp-teal-1); border-color: var(--mp-teal-3);
    background: color-mix(in srgb, var(--mp-teal-3) 16%, var(--mp-panel-2)); }
  .adm-auto.on svg { animation: admSpin 4s linear infinite; }

  /* Match-Detail (volle Zugliste) */
  .adm-matches tbody tr { cursor: pointer; }
  .adm-eyebrow-sm { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mp-sans);
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mp-gold-1); margin-bottom: 6px; }
  .adm-eyebrow-sm svg { color: var(--mp-gold-2); }
  .adm-match-line { font-size: 17px; line-height: 1.35; }
  .adm-match-stats { grid-template-columns: repeat(2, 1fr); }
  .adm-moves { display: grid; grid-template-columns: auto 1fr 1fr; gap: 3px 14px; align-items: baseline;
    max-height: 320px; overflow-y: auto; padding: 4px 2px; font-family: var(--mp-mono); font-size: 13px; }
  .adm-mv-n { color: var(--mp-ink-dim); text-align: right; font-variant-numeric: tabular-nums; }
  .adm-mv-w, .adm-mv-b { color: var(--mp-bone); }
  .adm-mv { display: inline-block; padding: 1px 4px; }
  .adm-mv--cap { color: var(--mp-danger); }
  .adm-mv--abil { color: var(--mp-teal-1); }

  @media (max-width: 760px) {
    .adm-charts { grid-template-columns: 1fr; }
    .adm-modal-stats { grid-template-columns: repeat(2, 1fr); }
    .adm-grant-grid { grid-template-columns: 1fr; }
    .adm-maint { flex-direction: column; gap: 12px; }
    .adm-maint-side { flex-direction: row; align-self: flex-start; }
  }
  @media (prefers-reduced-motion: reduce) {
    .adm-loading svg, .adm-live-dot, .adm-bar, .adm-toggle span, .adm-auto.on svg { animation: none !important; transition: none !important; }
  }

/* ============================================================
   Endbildschirm (Match-Ergebnis-Inszenierung) — Claude-Design-Vorlage 1:1
   Vier Farbwelten via [data-tone]: win=Gold, loss=Blutrot, resign=Asche, draw=Teal.
   Tokens 1:1 -> --mp-*. Fixed-Overlay über allem; eigener Glow, kein Block-Glow.
   ============================================================ */
.eg-stage {
  position: fixed;
  inset: 0;
  z-index: 6000;
  overflow: hidden;
  background: transparent;
  --eg-speed: 1;
}

/* ---------- Backdrop: das ECHTE laufende Spiel dahinter, geblurrt + abgedunkelt.
   Kein nachgebautes Brett — backdrop-filter wirkt auf den realen Bildschirm. ---------- */
.eg-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-backdrop-filter: blur(3px) brightness(0.5) saturate(0.78);
  backdrop-filter: blur(3px) brightness(0.5) saturate(0.78);
}

/* ---------- Vignette / Verdunkelung ---------- */
.eg-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, transparent 0%, rgba(5,6,9,0.55) 55%, rgba(4,4,7,0.92) 100%),
    linear-gradient(180deg, rgba(4,4,7,0.55) 0%, transparent 30%, transparent 70%, rgba(4,4,7,0.7) 100%);
  animation: egFadeIn calc(900ms / var(--eg-speed)) ease forwards;
}
.eg-fog {
  position: absolute;
  inset: -10%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 50% 40% at 30% 80%, rgba(77,208,196,0.06), transparent 60%),
    radial-gradient(ellipse 60% 30% at 70% 90%, rgba(216,177,90,0.05), transparent 65%);
  filter: blur(8px);
  animation: egFog 1.4s ease forwards, egFogDrift 16s ease-in-out infinite alternate;
}
@keyframes egFog { to { opacity: 1; } }
@keyframes egFogDrift { 0% { transform: translateX(-28px); } 100% { transform: translateX(28px); } }

/* tonaler Wash je Ergebnis */
.eg-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  animation: egWash calc(2600ms / var(--eg-speed)) ease forwards;
}
.eg-stage[data-tone="win"]    .eg-wash { background: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(216,177,90,0.16), transparent 65%); }
.eg-stage[data-tone="loss"]   .eg-wash { background: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(160,40,34,0.22), transparent 65%); }
.eg-stage[data-tone="resign"] .eg-wash { background: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(90,90,100,0.12), transparent 65%); }
.eg-stage[data-tone="draw"]   .eg-wash { background: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(77,208,196,0.14), transparent 65%); }
@keyframes egWash { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0.55; } }

/* ---------- Vordergrund ---------- */
.eg-content {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.eg-headline { text-align: center; position: relative; }

.eg-rule {
  height: 1px;
  width: min(640px, 70vw);
  margin: 0 auto;
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  animation: egRule calc(900ms / var(--eg-speed)) cubic-bezier(.16,.84,.3,1) forwards;
  animation-delay: calc(420ms / var(--eg-speed));
}
.eg-rule.bottom { animation-delay: calc(560ms / var(--eg-speed)); }
.eg-stage[data-tone="win"]    .eg-rule { background: linear-gradient(90deg, transparent, var(--mp-gold-1) 50%, transparent); box-shadow: 0 0 18px var(--mp-gold-glow); }
.eg-stage[data-tone="loss"]   .eg-rule { background: linear-gradient(90deg, transparent, #c8453a 50%, transparent); box-shadow: 0 0 18px rgba(180,40,34,0.5); }
.eg-stage[data-tone="resign"] .eg-rule { background: linear-gradient(90deg, transparent, #8b8578 50%, transparent); box-shadow: 0 0 14px rgba(120,116,104,0.4); }
.eg-stage[data-tone="draw"]   .eg-rule { background: linear-gradient(90deg, transparent, var(--mp-teal-1) 50%, transparent); box-shadow: 0 0 18px var(--mp-teal-glow); }
@keyframes egRule { to { transform: scaleX(1); opacity: 1; } }

.eg-eyebrow {
  font-family: var(--mp-sans);
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: 6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
  margin: 22px 0 6px;
  opacity: 0;
  animation: egFadeUp calc(800ms / var(--eg-speed)) ease forwards;
  animation-delay: calc(700ms / var(--eg-speed));
}
.eg-title {
  font-family: var(--mp-serif);
  font-weight: 800;
  font-size: clamp(58px, 12vw, 168px);
  line-height: 0.92;
  letter-spacing: 0.14em;
  margin: 0;
  padding-left: 0.14em;
  opacity: 0;
  transform: translateY(22px) scale(1.06);
  filter: blur(6px);
  animation: egTitleIn calc(1500ms / var(--eg-speed)) cubic-bezier(.2,.7,.25,1) forwards;
  animation-delay: calc(820ms / var(--eg-speed));
}
@keyframes egTitleIn {
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.eg-stage[data-tone="win"] .eg-title {
  background: linear-gradient(180deg, #f8efce 0%, #e8c879 48%, #b0842c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation-name: egTitleIn, egGlowGold;
  animation-duration: calc(1500ms / var(--eg-speed)), 4.5s;
  animation-delay: calc(820ms / var(--eg-speed)), calc(2200ms / var(--eg-speed));
  animation-iteration-count: 1, infinite;
  animation-timing-function: cubic-bezier(.2,.7,.25,1), ease-in-out;
  animation-fill-mode: forwards, none;
}
@keyframes egGlowGold {
  0%, 100% { text-shadow: 0 0 38px rgba(216,177,90,0.28), 0 0 80px rgba(216,177,90,0.12); }
  50% { text-shadow: 0 0 52px rgba(216,177,90,0.45), 0 0 110px rgba(216,177,90,0.2); }
}
.eg-stage[data-tone="loss"] .eg-title {
  background: linear-gradient(180deg, #e86a5c 0%, #b8302a 52%, #6e1410 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(150,30,26,0.35);
}
.eg-stage[data-tone="resign"] .eg-title {
  background: linear-gradient(180deg, #cfc9bb 0%, #9a9384 50%, #5e5849 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.eg-stage[data-tone="draw"] .eg-title {
  background: linear-gradient(180deg, #d7f6f0 0%, #6ee7d8 50%, #239b95 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 50px rgba(77,208,196,0.28);
}
.eg-sub {
  font-family: var(--mp-serif-body);
  font-size: clamp(16px, 2vw, 24px);
  font-style: italic;
  color: var(--mp-ink);
  margin: 18px 0 0;
  letter-spacing: 0.5px;
  opacity: 0;
  animation: egFadeUp calc(900ms / var(--eg-speed)) ease forwards;
  animation-delay: calc(1450ms / var(--eg-speed));
}
.eg-sub b { color: var(--mp-bone); font-weight: 600; font-style: normal; }
@keyframes egFadeIn { to { opacity: 1; } }
@keyframes egFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Reward-Karte ---------- */
.eg-reward {
  margin-top: clamp(36px, 6vh, 72px);
  width: min(560px, 92vw);
  /* Fast deckend + neutral-dunkel: die Karte sitzt über dem ECHTEN (hellen,
     goldlastigen) Spielbildschirm — bei der Vorlage war dahinter ein dunkles
     Brett. Ohne hohe Deckkraft schimmert das Gold durch -> Karte wirkt golden. */
  background: rgba(10, 12, 16, 0.965);
  border: 1px solid rgba(216, 177, 90, 0.28);
  backdrop-filter: blur(10px) saturate(0.9);
  padding: 22px 26px 24px;
  position: relative;
  opacity: 0;
  transform: translateY(34px);
  animation: egRewardIn calc(900ms / var(--eg-speed)) cubic-bezier(.2,.7,.25,1) forwards;
  animation-delay: calc(2050ms / var(--eg-speed));
}
@keyframes egRewardIn { to { opacity: 1; transform: translateY(0); } }
.eg-reward::before, .eg-reward::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--mp-gold-2);
}
.eg-reward::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.eg-reward::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.eg-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(216, 177, 90, 0.14);
}
.eg-avatar {
  width: 52px; height: 52px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #2a313e, #14171f);
  border: 1px solid var(--mp-gold-3);
  transform: rotate(45deg);
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(216,177,90,0.18);
}
.eg-avatar span { transform: rotate(-45deg); font-family: var(--mp-serif); font-weight: 700; font-size: 17px; color: var(--mp-gold-1); }
.eg-avatar img { width: 140%; height: 140%; object-fit: cover; transform: rotate(-45deg); }
.eg-profile-meta { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.eg-profile-meta .pname { font-family: var(--mp-serif); font-size: 17px; color: var(--mp-bone); letter-spacing: 0.6px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eg-profile-meta .prank { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mp-gold-1); font-weight: 700; }
.eg-result-tag {
  font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800;
  padding: 5px 10px; border: 1px solid; white-space: nowrap;
}
.eg-stage[data-tone="win"]    .eg-result-tag { color: var(--mp-gold-1); border-color: var(--mp-gold-3); }
.eg-stage[data-tone="loss"]   .eg-result-tag { color: #e0796d; border-color: rgba(200,69,58,0.5); }
.eg-stage[data-tone="resign"] .eg-result-tag { color: #b6b0a2; border-color: rgba(150,144,132,0.5); }
.eg-stage[data-tone="draw"]   .eg-result-tag { color: var(--mp-teal-1); border-color: rgba(77,208,196,0.5); }

.eg-stats { display: flex; flex-direction: column; gap: 16px; }
.eg-stat-row { display: flex; flex-direction: column; gap: 8px; }
.eg-stat-top { display: flex; align-items: baseline; justify-content: space-between; }
.eg-stat-label {
  font-size: 9.5px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim);
  display: flex; align-items: center; gap: 8px;
}
.eg-stat-label .gly { color: var(--mp-gold-2); display: inline-flex; }
.eg-stat-value {
  font-family: var(--mp-mono);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 10px;
}
.eg-stat-value .num { font-size: 26px; color: var(--mp-bone); font-weight: 500; letter-spacing: 0.5px; }
.eg-stat-value .delta { font-size: 14px; font-weight: 600; }
.eg-stat-value .delta.up { color: var(--mp-teal-1); }
.eg-stat-value .delta.down { color: var(--mp-danger); }
.eg-stat-value .delta.flat { color: var(--mp-ink-dim); }

.eg-bar {
  position: relative;
  height: 6px;
  background: rgba(216, 177, 90, 0.1);
  border: 1px solid rgba(216,177,90,0.12);
  overflow: hidden;
}
.eg-bar .fill {
  position: absolute; inset: 0;
  transform-origin: left;
  transition: transform 1200ms cubic-bezier(.2,.7,.25,1);
}
.eg-stage[data-tone="loss"] .eg-bar .fill,
.eg-stage[data-tone="resign"] .eg-bar .fill { background: linear-gradient(90deg, #7a2520, #c8453a); }
.eg-bar .fill { background: linear-gradient(90deg, var(--mp-gold-3), var(--mp-gold-1)); }
.eg-stage[data-tone="draw"] .eg-bar .fill { background: linear-gradient(90deg, var(--mp-teal-3), var(--mp-teal-1)); }
.eg-bar .ghost {
  position: absolute; top: 0; bottom: 0;
  border-right: 2px dashed rgba(232,222,197,0.5);
  opacity: 0.7;
}
.eg-bar-scale { display: flex; justify-content: space-between; font-family: var(--mp-mono); font-size: 9px; color: var(--mp-ink-faint); letter-spacing: 0.5px; }

.eg-shards-val .num { color: var(--mp-teal-1); }
.eg-shards-val .plus { color: var(--mp-teal-1); font-family: var(--mp-mono); font-size: 26px; font-weight: 500; }
.eg-shard-glyph { color: var(--mp-teal-1); display: inline-flex; filter: drop-shadow(0 0 6px var(--mp-teal-glow)); }

/* Übungspartie-Hinweis (Computer/Lokal: Karte ohne Wertung) */
.eg-practice { gap: 6px; }
.eg-practice-note { margin: 0; font-family: var(--mp-serif-body); font-style: italic; font-size: clamp(13px, 1.4vw, 15px); color: var(--mp-ink-dim); letter-spacing: 0.3px; }

.eg-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  opacity: 0;
  animation: egFadeUp calc(900ms / var(--eg-speed)) ease forwards;
  animation-delay: calc(2600ms / var(--eg-speed));
}
.eg-actions .eg-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--mp-sans); font-weight: 700; font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase;
  padding: 14px 18px; cursor: pointer; transition: all 180ms ease; border: 1px solid transparent;
}
.eg-btn.primary {
  color: #0c0e13;
  background: linear-gradient(180deg, #f0d27a 0%, #d8b15a 40%, #b08530 100%);
  border-color: #f0d27a;
  box-shadow: 0 0 24px rgba(216,177,90,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
}
.eg-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 34px rgba(216,177,90,0.45), inset 0 1px 0 rgba(255,255,255,0.5); }
.eg-btn.ghost { color: var(--mp-ink); background: rgba(18,21,28,0.7); border-color: rgba(216,177,90,0.32); backdrop-filter: blur(6px); }
.eg-btn.ghost:hover { color: var(--mp-bone); border-color: var(--mp-gold-1); }

.eg-embers { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.eg-ember {
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--mp-gold-1);
  box-shadow: 0 0 8px var(--mp-gold-1);
  opacity: 0;
  animation: egEmber linear infinite;
}
.eg-stage[data-tone="draw"] .eg-ember { background: var(--mp-teal-1); box-shadow: 0 0 8px var(--mp-teal-1); }
@keyframes egEmber {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 0.8; }
  88% { opacity: 0.5; }
  100% { transform: translateY(-104vh) translateX(30px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .eg-backdrop, .eg-fog, .eg-ember, .eg-stage[data-tone="win"] .eg-title { animation: none !important; }
  .eg-veil, .eg-rule, .eg-eyebrow, .eg-title, .eg-sub, .eg-reward, .eg-actions {
    animation-duration: 1ms !important; animation-delay: 0ms !important;
  }
  .fc-card, .fc-power-ico.aktion, .fc-mb-mark.effect { animation: none !important; }
}

/* ============================================================
   Figurenkarte — kompaktes Vorschau-Popover (figure-card.js)
   Vorlage "Magic Pieces - Figurenkarte"; Tokens -> --mp-*.
   ============================================================ */
@keyframes fcPop {
  from { transform: scale(0.82) translateX(var(--pop-x, 0)); }
  to   { transform: scale(1) translateX(0); }
}
@keyframes fcGlow { 0%,100% { box-shadow: 0 0 14px -5px var(--pk); } 50% { box-shadow: 0 0 16px -2px var(--pk); } }
@keyframes fcPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.fc-root { position: fixed; inset: 0; z-index: 1500; pointer-events: none; }
.fc-root.show { pointer-events: auto; }

.fc-card {
  --accent: var(--mp-teal-1);
  --accent-soft: rgba(110, 231, 216, 0.16);
  position: absolute;
  width: 296px;
  max-width: calc(100vw - 20px);
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(20, 23, 31, 0.98), rgba(9, 11, 15, 0.99));
  border: 1px solid rgba(216, 177, 90, 0.4);
  box-shadow: 0 30px 70px -18px rgba(0,0,0,0.92), 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(216,177,90,0.08);
  transform-origin: var(--origin, center left);
  animation: fcPop 320ms cubic-bezier(.18,.9,.32,1.2) both;
}
.fc-card.tone-undead { --accent: #8fe3b3; --accent-soft: rgba(143, 227, 179, 0.15); }
.fc-card.tone-fantasy { --accent: #e6c067; --accent-soft: rgba(216, 177, 90, 0.16); }
.fc-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.8;
}
.fc-tail {
  position: absolute; top: var(--tail-top, 40px); width: 14px; height: 14px;
  background: linear-gradient(135deg, rgba(20,23,31,0.99), rgba(14,16,22,0.99));
  border: 1px solid rgba(216,177,90,0.4); transform: rotate(45deg); z-index: -1;
}
.fc-card.side-right .fc-tail { left: -8px; border-right: none; border-top: none; }
.fc-card.side-left  .fc-tail { right: -8px; border-left: none; border-bottom: none; }
.fc-corner { position: absolute; width: 12px; height: 12px; border: 1px solid var(--mp-gold-2); pointer-events: none; z-index: 4; }
.fc-corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.fc-corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.fc-corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.fc-corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.fc-head { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px 11px; }
.fc-head-text { flex: 1; min-width: 0; }
.fc-name {
  font-family: var(--mp-serif); font-weight: 700; font-size: 22px; letter-spacing: 0.5px; line-height: 1; margin: 0;
  color: var(--mp-bone);
  background: linear-gradient(180deg, #f5ebcf, #e0bf78 70%, #c5a056);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.fc-role { font-size: 9px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-top: 5px; }
.fc-close {
  width: 26px; height: 26px; display: grid; place-items: center; flex-shrink: 0;
  color: var(--mp-ink-dim); border: 1px solid rgba(216,177,90,0.18); border-radius: 50%;
  background: rgba(7,8,11,0.5); transition: all 150ms; cursor: pointer;
}
.fc-close:hover { color: var(--mp-danger); border-color: rgba(194,90,74,0.5); }
.fc-tags { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 11px; }
.fc-faction {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: #07080b;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 95%, white), color-mix(in srgb, var(--accent) 72%, black));
  box-shadow: 0 0 14px -4px var(--accent);
}
.fc-rarity {
  width: 26px; height: 26px; display: grid; place-items: center; color: var(--mp-gold-1);
  border: 1px solid rgba(216,177,90,0.4); border-radius: 50%; background: rgba(40,30,12,0.5);
}
.fc-rarity.epic { color: #b487e0; border-color: rgba(180,135,224,0.45); background: rgba(40,26,52,0.5); }
.fc-art {
  position: relative; margin: 0 12px; height: 168px;
  border: 1px solid rgba(216,177,90,0.5);
  box-shadow: inset 0 0 0 1px rgba(216,177,90,0.12), inset 0 0 50px rgba(0,0,0,0.5);
  background-color: #06080b; background-size: cover; background-position: center top; overflow: hidden;
}
.fc-art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 35%, var(--accent-soft), transparent 65%), linear-gradient(180deg, transparent 55%, rgba(7,8,11,0.55) 100%);
}
.fc-art-inner { position: absolute; inset: 5px; border: 1px solid rgba(216,177,90,0.14); pointer-events: none; z-index: 2; }
.fc-art.is-sprite { background-image: radial-gradient(ellipse 60% 55% at 50% 42%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); background-size: cover; }
.fc-art-sprite { position: absolute; inset: 0; margin: auto; width: 62%; height: 62%; object-fit: contain; z-index: 1; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.6)); }
.fc-power {
  --pk: var(--mp-gold-1); margin: 12px 12px 0;
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pk) 12%, transparent), transparent 70%);
  border: 1px solid color-mix(in srgb, var(--pk) 22%, transparent); border-left: 2px solid var(--pk);
}
.fc-power.kind-aktion { --pk: #e6c067; }
.fc-power.kind-reaktiv { --pk: #e8746a; }
.fc-power.kind-passiv { --pk: #6fb1ec; }
.fc-power-text { flex: 1; min-width: 0; }
.fc-power-kind { font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--pk); margin-bottom: 3px; }
.fc-power-name { font-family: var(--mp-serif); font-size: 16px; font-weight: 600; letter-spacing: 0.5px; color: var(--mp-bone); }
.fc-power-ico {
  width: 28px; height: 28px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; color: var(--pk);
  border: 1px solid color-mix(in srgb, var(--pk) 50%, transparent);
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--pk) 28%, transparent), transparent 70%), rgba(7,8,11,0.5);
  box-shadow: 0 0 14px -5px var(--pk);
}
.fc-power-ico.aktion { animation: fcGlow 2.8s ease-in-out infinite; }
.fc-desc {
  margin: 10px 12px 0; padding: 11px 13px;
  font-family: var(--mp-serif-body); font-size: 14px; line-height: 1.5; color: var(--mp-ink);
  background: rgba(7,8,11,0.4); border: 1px solid rgba(216,177,90,0.1);
}
.fc-desc b { color: var(--mp-bone); font-weight: 600; }
.fc-foot { display: flex; align-items: stretch; margin: 14px 0 0; border-top: 1px solid rgba(216,177,90,0.14); }
.fc-foot-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; cursor: pointer;
  font-family: var(--mp-sans); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
  color: var(--mp-ink-dim); transition: all 160ms; background: transparent; border: none;
}
.fc-foot-btn svg { opacity: 0.7; }
.fc-foot-btn:hover { color: var(--mp-bone); background: rgba(216,177,90,0.05); }
.fc-foot-btn:hover svg { opacity: 1; }
.fc-foot-btn.dossier { border-left: 1px solid rgba(216,177,90,0.14); }
.fc-foot-btn.dossier:hover { color: var(--mp-gold-1); }
.fc-foot-btn.zug .chev { transition: transform 280ms cubic-bezier(.2,.7,.3,1); display: inline-flex; }
.fc-foot-btn.zug.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.fc-foot-btn.zug.on .chev { transform: rotate(90deg); }
.fc-zug-fly {
  position: absolute; top: 6px; width: 224px; padding: 12px;
  background: linear-gradient(180deg, rgba(20, 23, 31, 0.99), rgba(9, 11, 15, 0.99));
  border: 1px solid rgba(216, 177, 90, 0.4);
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.92), inset 0 0 0 1px rgba(216,177,90,0.07);
  opacity: 0; pointer-events: none; transition: opacity 240ms ease, transform 300ms cubic-bezier(.2,.7,.3,1); z-index: 19;
}
.fc-zug-fly::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.7;
}
.fc-card.fly-right .fc-zug-fly { left: calc(100% + 14px); transform: translateX(-12px) scale(0.96); transform-origin: center left; }
.fc-card.fly-left  .fc-zug-fly { right: calc(100% + 14px); transform: translateX(12px) scale(0.96); transform-origin: center right; }
.fc-zug-fly.open { opacity: 1; pointer-events: auto; transform: none; }
.fc-fly-tail {
  position: absolute; top: 30px; width: 12px; height: 12px;
  background: linear-gradient(135deg, rgba(20,23,31,0.99), rgba(14,16,22,0.99));
  border: 1px solid rgba(216,177,90,0.4); transform: rotate(45deg);
}
.fc-card.fly-right .fc-fly-tail { left: -7px; border-right: none; border-top: none; }
.fc-card.fly-left  .fc-fly-tail { right: -7px; border-left: none; border-bottom: none; }
.fc-zug-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 10px;
  background: rgba(7,8,11,0.55); border: 1px solid rgba(216,177,90,0.14);
}
.fc-zug-tab {
  padding: 7px; font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700;
  color: var(--mp-ink-dim); transition: all 150ms; cursor: pointer; background: transparent; border: none;
}
.fc-zug-tab:hover { color: var(--mp-ink); }
.fc-zug-tab.on {
  color: #07080b;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 95%, white), color-mix(in srgb, var(--accent) 70%, black));
  box-shadow: 0 0 14px -6px var(--accent);
}
/* Mini-Brett im Look des echten Spielbretts (#board): Goldrahmen + texturierte Felder. */
.fc-mini-board {
  position: relative;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr);
  gap: 1px; aspect-ratio: 1/1; padding: 4px; overflow: hidden;
  border: 2px solid var(--rift-gold); border-radius: 6px;
  background: var(--mp-board-frame);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.86),
    0 0 16px rgba(10,200,185,.18),
    inset 0 0 0 1px rgba(240,210,131,.22),
    inset 0 0 22px rgba(0,0,0,.7);
}
.fc-mini-board::before {
  content: ""; position: absolute; inset: 4px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(240,210,131,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.42), inset 0 0 24px rgba(0,0,0,.46);
}
.fc-mb-cell {
  position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  background: var(--mp-sq-dark);
}
.fc-mb-cell.light { background: var(--mp-sq-light); }
.fc-mb-cell img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7)); }
.fc-mb-mark { width: 46%; height: 46%; border-radius: 50%; box-sizing: border-box; }
.fc-mb-mark.move { background: radial-gradient(circle at 40% 35%, var(--mp-mark-move), var(--mp-mark-move-2)); box-shadow: 0 0 8px -1px rgba(240,210,131,.6); }
.fc-mb-mark.cap { background: transparent; border: 3px solid var(--mp-mark-cap); box-shadow: 0 0 8px -1px rgba(224,86,79,.55); }
.fc-mb-mark.both { background: radial-gradient(circle at 40% 35%, var(--mp-mark-move), var(--mp-mark-move-2)); border: 3px solid var(--mp-mark-cap); box-shadow: 0 0 8px -1px rgba(224,86,79,.5); }
.fc-mb-mark.effect {
  background: radial-gradient(circle at 40% 35%, var(--mp-mark-effect), var(--mp-mark-effect-2));
  box-shadow: 0 0 9px -1px rgba(90,154,214,.7); animation: fcPulse 2.2s ease-in-out infinite;
}
.fc-mb-note {
  padding: 22px 14px; text-align: center; font-family: var(--mp-serif-body); font-size: 12.5px; line-height: 1.45; color: var(--mp-ink);
  border: 1px dashed rgba(216,177,90,0.22); background: rgba(7,8,11,0.4);
}
.fc-zug-legend { display: flex; justify-content: center; gap: 14px; margin-top: 10px; font-size: 10px; letter-spacing: 0.4px; color: var(--mp-ink); }
.fc-zug-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fc-ld { width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; }
.fc-ld.move { background: radial-gradient(circle at 40% 35%, var(--mp-mark-move), var(--mp-mark-move-2)); }
.fc-ld.cap { background: transparent; border: 2px solid var(--mp-mark-cap); }
.fc-ld.both { background: radial-gradient(circle at 40% 35%, var(--mp-mark-move), var(--mp-mark-move-2)); border: 2px solid var(--mp-mark-cap); }
.fc-ld.effect { background: radial-gradient(circle at 40% 35%, var(--mp-mark-effect), var(--mp-mark-effect-2)); }
.fc-fly-cap { margin-top: 9px; font-family: var(--mp-serif-body); font-size: 12.5px; line-height: 1.4; text-align: center; color: var(--mp-ink); }
/* Schmale Viewports (Mobil): kein Platz fuer den Seiten-Flyout -> er fliesst
   UNTER die Karte (in den Kartenfluss) statt off-screen zu klippen. */
@media (max-width: 560px) {
  .fc-card.fly-left .fc-zug-fly, .fc-card.fly-right .fc-zug-fly {
    position: static; left: auto; right: auto; width: auto; transform: none;
    margin: 0 12px 12px; box-shadow: none; border: none; border-top: 1px solid rgba(216,177,90,0.18);
    opacity: 1; pointer-events: auto; display: none;
  }
  .fc-card.fly-left .fc-zug-fly.open, .fc-card.fly-right .fc-zug-fly.open { display: block; }
  .fc-fly-tail { display: none; }
}

/* ===== Rechtstexte (Impressum/Datenschutz/Nutzung/Jugendschutz) =============
   Markup: app/legal-page.js -> #infoGrid (<div class="legal">). Teilt sich
   mode-info + Ambient-Glow mit Codex/Support; Outer-Padding vom .infoPage-Wrap.
   Lese-orientiert: schmale Spalte, ruhige Prosa, dezente Gold-Akzente. ===== */
/* Container so breit wie Codex, damit der breite .duell-title (background-clip:
   text) NICHT an der Box clippt; die Prosa selbst bleibt schmal & lesbar. */
.legal {
  position: relative; z-index: 1;
  width: 100%; max-width: 1180px; margin: 0 auto;
  font-family: var(--mp-sans);
}
.legal .duell-head { margin-bottom: 26px; }
.legal .lg-nav, .legal .lg-meta, .legal .lg-doc, .legal .lg-foot { max-width: 820px; }
/* Globaler .duell-title nutzt width:max-content + 115px Schrift — in der schmalen
   Info-Spalte clippt das lange Woerter (DATENSCHUTZ/NUTZUNGSBEDINGUNGEN). Hier
   kleiner + umbruchfaehig statt abgeschnitten. */
.legal .duell-title {
  width: auto; max-width: 100%;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Pill-Navigation zwischen den vier Dokumenten (Muster: Codex-TOC). */
.legal .lg-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.legal .lg-pill {
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700;
  color: var(--mp-ink); padding: 8px 14px; cursor: pointer;
  border: 1px solid rgba(216, 177, 90, 0.16); background: rgba(11, 13, 18, 0.5);
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.legal .lg-pill:hover { color: var(--mp-gold-1); border-color: rgba(216, 177, 90, 0.4); }
.legal .lg-pill.on {
  color: var(--mp-bg-0); background: var(--mp-gold-1); border-color: var(--mp-gold-1);
}
.legal .lg-meta {
  font-family: var(--mp-mono); font-size: 11px; letter-spacing: .4px;
  color: var(--mp-ink-dim); margin-bottom: 26px;
}

/* Prosa */
.legal .lg-doc { display: grid; gap: 26px; }
.legal .lg-section { position: relative; padding-left: 16px; }
.legal .lg-section::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  background: linear-gradient(180deg, var(--mp-gold-3), transparent);
}
.legal .lg-h {
  font-family: var(--mp-serif); font-size: 15px; font-weight: 600; letter-spacing: .6px;
  color: var(--mp-bone); margin: 0 0 10px;
}
.legal .lg-body { font-size: 14px; line-height: 1.66; color: var(--mp-ink); }
.legal .lg-body p { margin: 0 0 10px; }
.legal .lg-body p:last-child { margin-bottom: 0; }
.legal .lg-body b { color: var(--mp-bone); font-weight: 600; }
.legal .lg-body ul { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 5px; }
.legal .lg-body li { line-height: 1.5; }
.legal .lg-body a, .legal .lg-body [data-legal] {
  color: var(--mp-teal-2); text-decoration: none; border-bottom: 1px solid rgba(77, 208, 196, .35);
  cursor: pointer; background: none; padding: 0; font: inherit;
}
.legal .lg-body a:hover, .legal .lg-body [data-legal]:hover { color: var(--mp-teal-1); }
.legal .lg-address { font-style: normal; color: var(--mp-bone); line-height: 1.7; }
.legal .lg-note {
  font-size: 12.5px; color: var(--mp-ink-dim); font-style: italic;
  border-left: 2px solid rgba(77, 208, 196, .25); padding-left: 10px; margin-top: 8px;
}
/* PLATZHALTER — sichtbar markiert, damit nichts Ungefuelltes live geht. */
.legal mark.lg-todo, mark.lg-todo {
  background: rgba(216, 177, 90, .14); color: var(--mp-gold-1);
  border: 1px dashed rgba(216, 177, 90, .5); border-radius: 0;
  padding: 0 5px; font-family: var(--mp-mono); font-size: .86em; font-style: normal;
}
.legal .lg-foot {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(216, 177, 90, .12);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: var(--mp-ink-dim);
}
.legal .lg-consent-link {
  background: none; border: none; cursor: pointer; padding: 0; font: inherit;
  color: var(--mp-teal-2); border-bottom: 1px solid rgba(77, 208, 196, .35);
}
.legal .lg-consent-link:hover { color: var(--mp-teal-1); }
.legal .lg-foot-sep { opacity: .5; }
.legal .lg-foot-note { font-style: italic; }

/* Sidebar-Fusszeile: Rechts-Links (klein, gedeckt). */
.sideLegal {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  padding-top: 4px; margin-top: 2px;
}
.sideLegal button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--mp-sans); font-size: 10.5px; letter-spacing: .3px;
  color: var(--mp-ink-dim); transition: color 140ms ease;
}
.sideLegal button:hover { color: var(--mp-gold-1); }
body.side-nav-collapsed .sideLegal { display: none; }

/* ===== Cookie-/Consent-Geruest (ruht, bis Tracking aktiviert wird) ========= */
.consentBanner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: flex; justify-content: center; padding: 14px;
  pointer-events: none;
}
.consentBanner .consentInner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  width: min(960px, 100%); padding: 14px 18px;
  background: var(--mp-panel-2); border: 1px solid rgba(216, 177, 90, .22);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.consentBanner .consentText {
  margin: 0; flex: 1 1 320px; font-size: 12.5px; line-height: 1.55;
  font-family: var(--mp-sans); color: var(--mp-ink);
}
.consentBanner .consentLink {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--mp-teal-2); border-bottom: 1px solid rgba(77, 208, 196, .35);
}
.consentBanner .consentLink:hover { color: var(--mp-teal-1); }
.consentActions { display: flex; gap: 8px; flex-wrap: wrap; }
.consentBtn {
  font-family: var(--mp-sans); font-size: 12px; font-weight: 700; letter-spacing: .4px;
  padding: 9px 16px; cursor: pointer; border: 1px solid transparent;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.consentBtn.ghost {
  background: rgba(11, 13, 18, .5); border-color: rgba(216, 177, 90, .2); color: var(--mp-ink);
}
.consentBtn.ghost:hover { color: var(--mp-gold-1); border-color: rgba(216, 177, 90, .45); }
.consentBtn.primary {
  background: var(--mp-gold-1); color: var(--mp-bg-0); border-color: var(--mp-gold-1);
}
.consentBtn.primary:hover { background: var(--mp-gold-2); border-color: var(--mp-gold-2); }

/* Einstellungs-Dialog */
.cm-overlay {
  position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center;
  padding: 18px; background: rgba(5, 6, 9, .72); backdrop-filter: blur(3px);
}
.cm {
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  padding: 28px 28px 24px; background: var(--mp-panel-2);
  border: 1px solid rgba(216, 177, 90, .22); box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.cm-eyebrow {
  font-family: var(--mp-mono); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mp-teal-2); margin-bottom: 8px;
}
.cm-title {
  font-family: var(--mp-serif); font-size: 22px; font-weight: 600; color: var(--mp-bone);
  margin: 0 0 10px;
}
.cm-intro { font-family: var(--mp-sans); font-size: 13px; line-height: 1.55; color: var(--mp-ink); margin: 0 0 18px; }
.cm-rows { display: grid; gap: 14px; margin-bottom: 22px; }
.cm-row { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; }
.cm-name { font-family: var(--mp-sans); font-size: 13.5px; font-weight: 700; color: var(--mp-bone); }
.cm-desc { font-family: var(--mp-sans); font-size: 12px; line-height: 1.5; color: var(--mp-ink-dim); margin-top: 3px; }
.cm-lock, .cm-soon {
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  color: var(--mp-ink-dim); margin-left: 6px;
}
/* Toggle-Switch */
.cm-toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.cm-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cm-track {
  position: absolute; inset: 0; cursor: pointer; background: rgba(11, 13, 18, .8);
  border: 1px solid rgba(216, 177, 90, .25); transition: background 160ms ease, border-color 160ms ease;
}
.cm-track::before {
  content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; background: var(--mp-ink); transition: left 160ms ease, background 160ms ease;
}
.cm-toggle input:checked + .cm-track { background: rgba(77, 208, 196, .25); border-color: var(--mp-teal-3); }
.cm-toggle input:checked + .cm-track::before { left: 21px; background: var(--mp-teal-1); }
.cm-toggle input:disabled + .cm-track { cursor: not-allowed; opacity: .65; }
.cm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }