: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],
  #authLogout[hidden] {
    display: none;
  }
  .authPanel {
    display: none !important;
  }
  body.exposure-public .authPanel:not([hidden]) {
    display: block !important;
  }
  .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, #9a3f6a, #f0a6c6);
    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;
    display: flex;
    color: #e6c14b;
  }
  .achvIcon svg { display: block; }
  .achv--locked .achvIcon {
    color: var(--muted);
    opacity: .55;
  }
  .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-soul-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);
  }
  /* Avatar-Bild in der Rauten-Kachel: gross genug, um nach dem Zurueckdrehen die
     Raute voll zu decken (150% ~ sqrt(2)), per overflow auf die Raute geclippt.
     Absolut positioniert, weil Prozent-Hoehen als Grid-Kind in auto-Tracks
     zyklisch sind und auf die natuerliche Bildgroesse zurueckfallen (Bild
     erschien riesig, Raute zeigte nur einen Ausschnitt). */
  .rk-root .board-row .pc-av.hasAv { overflow: hidden; }
  .rk-root .board-row .pc-av .pc-img {
    position: absolute;
    left: 50%; top: 50%;
    width: 150%; height: 150%;
    object-fit: cover;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .rk-root .board-row .pc-av.hasAv .pc-ini { display: none; }
  .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; }
  /* Look/Animation kommen aus .mp-close (main-12.css); hier nur Position/Größe. */
  .pmClose { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; }
  .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 { display: flex; color: #e6c14b; }
  .pmAchv svg { display: block; }
  .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; }