/* 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. Abzug = echte Topbar-
       Hoehe (--mp-topbar-h), sonst ragt der Hero um die 4px Differenz zu tief. */
    min-height: calc(100vh - var(--mp-topbar-h));
    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;
    /* Flach = nahtlos an die Überschrift darüber (ein Band pro Abschnitt). */
    background: rgba(7, 8, 11, .9);
  }
  .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;
    /* Hintergrund voll (margin:0 -64px), Inhalt per --home-gutter eingerückt. */
    padding: 0 var(--home-gutter, 64px) 90px;
    margin: 0 -64px;
    /* Flach = nahtlos an die Überschrift darüber (ein Band pro Abschnitt). */
    background: rgba(7, 8, 11, .9);
  }
  .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;
  }
  /* Abschnitt III (Faction-Preview): schmalerer Seitenabstand -> breitere Panels,
     damit Portraits und Text mehr Raum bekommen (User-Wunsch, NUR dieser Abschnitt).
     Header + Showcase teilen denselben Gutter und bleiben so zueinander buendig. */
  .startSectionHead--faction,
  .factionShowcase {
    --home-gutter: max(32px, calc((100vw - var(--side-nav-width) - 1460px) / 2));
  }
  /* Im breiteren Band etwas groessere Fliesstexte (User: "Text zu klein"). */
  .factionShowcase .factionDesc { font-size: 17px; max-width: 460px; }
  .factionShowcase .factionEpithet { font-size: 18px; }
  .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;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .12s ease;
  }
  /* Klickbare Figuren-Chips: dezenter Hover/Fokus, oeffnen das Dossier. */
  .factionPieceChip[data-piece-dossier]:hover,
  .factionPieceChip[data-piece-dossier]:focus-visible {
    border-color: rgba(216, 177, 90, .5);
    background: rgba(20, 23, 31, .92);
    color: var(--mp-bone);
    transform: translateY(-1px);
    outline: none;
  }
  .factionPanel.pirates .factionPieceChip[data-piece-dossier]:hover,
  .factionPanel.pirates .factionPieceChip[data-piece-dossier]:focus-visible { border-color: rgba(77, 208, 196, .55); }
  .factionPanel.undead .factionPieceChip[data-piece-dossier]:hover,
  .factionPanel.undead .factionPieceChip[data-piece-dossier]:focus-visible { border-color: rgba(120, 218, 162, .55); }
  .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;
  }
  /* minmax(0,1fr) statt auto-Spur: sonst diktieren Tabelle/Freunde-Zeilen die
     Spurbreite und alle Panels ragen auf schmalen Screens aus dem Viewport. */
  .profileMain { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .profileTabPanel { display: grid; grid-template-columns: minmax(0, 1fr); 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 { color: var(--mp-aura-1, #f0a6c6); }
  .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; }
  /* KEIN display:flex auf dem td: das nimmt der Zelle die table-cell-Rolle,
     die ganze Zeile rutscht eine Spalte nach links (Datum landet im leeren
     Raum, die 1/0-Chips unter den Namen). Die Chips sind display:grid und
     damit block-level — sie stapeln von selbst, zentriert per margin. */
  .gtScore { width: 1%; }
  .gtScore .gtNum { margin-inline: auto; }
  .gtScore .gtNum + .gtNum { margin-top: 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); }
  /* th.gtNumH:nth-of-type(2) traf nie (das 2. th ist "Spieler" ohne Klasse) —
     der Zuege-Header blieb stehen und verschob alle Kopfspalten um eins. */
  @media (max-width: 560px) {
    .gtMode .gtModeLabel, .gtMoves, .gameTable th.gtMovesH { 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);
    color: var(--mp-ink-dim, #847b65); opacity: .55;
  }
  .achvWidgetIcon svg { display: block; }
  .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));
    color: var(--mp-gold-1, #f0d283); opacity: 1;
  }

  @media (max-width: 980px) {
    .profileBody { grid-template-columns: minmax(0, 1fr); }
    .profileSidebar { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .statCards { grid-template-columns: repeat(2, minmax(0, 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-public) header.sideNav .authPanel {
      display: none !important;
    }
    body.exposure-public: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;
    }
  }

  /* Icon-Rail im Spiel nur fuer 701-820px: auf Phones (<=700) ist die Nav ein
     Off-Canvas-Drawer (main-13.css) und zeigt immer die volle Navigation. */
  @media (min-width: 701px) and (max-width: 820px) {
    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;
    }
  }