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

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

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

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

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

/* === Bibliothek: browse-/filterbare Aufgaben-Liste === */
.pz-root .pz-lib-count { font-family: var(--mp-mono); font-size: 11px; color: var(--mp-teal-1); letter-spacing: 1px; }
.pz-root .pz-library { display: flex; flex-direction: column; gap: 16px; }
.pz-root .pz-lib-filters { display: flex; flex-direction: column; gap: 10px; }
.pz-root .pz-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pz-root .pz-filter-key { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); margin-right: 2px; min-width: 74px; }
.pz-root .pz-filter-sep { flex: 1 1 8px; }
.pz-root .pz-chip {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .4px; color: var(--mp-ink);
  padding: 7px 12px; background: rgba(11, 13, 18, .5); border: 1px solid rgba(216, 177, 90, .16); transition: all .16s ease;
}
.pz-root .pz-chip:hover { border-color: rgba(77, 208, 196, .4); color: var(--mp-bone); }
.pz-root .pz-chip.active { color: #07221f; background: linear-gradient(180deg, #6ee7d8, #239b95); border-color: rgba(77, 208, 196, .6); font-weight: 700; }
.pz-root .pz-chip-toggle.active { background: linear-gradient(180deg, #f3d795, #c89a3e); color: #1a1410; border-color: var(--mp-gold-3); }
.pz-root .pz-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pz-root .pz-lib-card {
  appearance: none; -webkit-appearance: none; position: relative; display: flex; flex-direction: column; gap: 9px; min-height: 96px;
  padding: 13px 14px; cursor: pointer; text-align: left; color: inherit;
  background: linear-gradient(180deg, rgba(20, 23, 31, .6), rgba(11, 13, 18, .8)); border: 1px solid rgba(216, 177, 90, .14);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.pz-root .pz-lib-card:hover { transform: translateY(-2px); border-color: rgba(77, 208, 196, .4); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .8); }
.pz-root .pz-lib-card.ability { border-left: 2px solid rgba(77, 208, 196, .5); }
.pz-root .pz-lib-card.solved { border-color: rgba(77, 208, 196, .28); }
.pz-root .pz-lib-card .plc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pz-root .pz-lib-card .plc-rating { font-family: var(--mp-serif); font-size: 19px; font-weight: 700; color: var(--mp-gold-1); line-height: 1; }
.pz-root .pz-lib-card .plc-badge { font-family: var(--mp-mono); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--mp-ink-dim); border: 1px solid rgba(216, 177, 90, .16); padding: 3px 6px; white-space: nowrap; }
.pz-root .pz-lib-card .plc-title { font-family: var(--mp-serif); font-size: 14px; letter-spacing: .3px; color: var(--mp-bone); font-weight: 600; line-height: 1.25; }
.pz-root .pz-lib-card .plc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.pz-root .pz-lib-card .plc-theme { font-size: 10px; letter-spacing: .3px; color: var(--mp-ink-dim); }
.pz-root .pz-lib-card.ability .plc-theme { color: var(--mp-teal-2); }
.pz-root .pz-lib-card .plc-check { color: var(--mp-teal-1); font-size: 13px; flex-shrink: 0; }
.pz-root .pz-lib-empty { grid-column: 1 / -1; padding: 28px; text-align: center; color: var(--mp-ink-dim); font-size: 13px; border: 1px dashed rgba(216, 177, 90, .16); }
@media (max-width: 760px) {
  .pz-root .pz-lib-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pz-root .pz-filter-key { min-width: 100%; margin-bottom: -2px; }
}

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

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

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

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

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

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

/* Keep the own/opponent profile boxes (avatar · name · ELO · turn · clock ·
   mana) that flank the board, but trim them to just that header while solving:
   standard-piece puzzles have no abilities (empty effect groups) and no
   resign/draw/move-history footer applies. The rails normally stretch to the
   board's full height (min-height) and centre their content — override that so
   each becomes a compact card that sits at the top. */
/* AUSNAHME: Faehigkeiten-Puzzles (body.puzzle-has-abilities, puzzle.js) behalten
   die Effekt-Gruppen — dort IST der Effekt-Chip der Loesungs-Ausloeser. */
body.puzzle-active:not(.puzzle-has-abilities) .effectRail .effectGroups,
body.puzzle-active .effectRail .effectRailFooter { display: none !important; }
body.puzzle-active .effectRail {
  min-height: 0 !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

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

/* ============ Solving rail — ported 1:1 from "Puzzle Panels (Grimoire)" =======
   A vertical rail beside the board: a status/stats panel (piece tile · to-move ·
   Puzzle/You/Streak ledger) stacked over an action panel (Hint/Solution/Exit,
   or Next/Retry once solved). Everything scoped under .puzzleRail so the generic
   child names (.row/.k/.v/.act/.actions/.ledger…) can't leak into the app. */
.puzzleRail {
  display: contents;
  --pzp-gold-1: #d8b15a; --pzp-gold-2: #c89a3e; --pzp-gold-3: #8a6a25; --pzp-gold-hi: #f3dca0;
  --pzp-gold-glow: rgba(216, 177, 90, .35);
  --pzp-teal-1: #6ee7d8; --pzp-teal-2: #4dd0c4; --pzp-teal-glow: rgba(77, 208, 196, .45);
  --pzp-bone: #e8dec5; --pzp-ink: #aea58c; --pzp-ink-dim: #847b65;
  --pzp-serif: 'Cinzel', serif;
  --pzp-serif-body: Georgia, 'Times New Roman', serif;
  --pzp-mono: 'JetBrains Mono', ui-monospace, monospace;
}
.puzzleTopHud[hidden], .puzzleBar[hidden], .puzzleLiveCard[hidden] { display: none; }

/* while solving, the rail is a vertical stack: opponent box (moved in) + status
   + actions + live figure card */
body.puzzle-active .puzzleRail {
  display: flex; flex-direction: column; gap: 18px;
  width: min(320px, calc(100vw - 32px));
}
body.puzzle-active .puzzleTopHud,
body.puzzle-active .puzzleBar { display: flex; flex-direction: column; gap: 12px; }
/* the opponent profile box relocated into the rail fills its width */
body.puzzle-active .puzzleRail > #effectBarEnemy { width: 100%; min-width: 0; margin: 0; }
/* live figure card (render/live-card.js) docked UNDER the action panel — the
   .lcxDock styles come from the effect rail (main-12.css) and apply as-is */
body.puzzle-active .puzzleLiveCard { width: 100%; min-width: 0; }
.puzzleRail.reveal .puzzleLiveCard { animation: pzpFadeUp .55s cubic-bezier(.2,.8,.3,1) backwards; animation-delay: .3s; }

/* panel shell */
.puzzleRail .pzPanel {
  position: relative; padding: 7px;
  background: linear-gradient(180deg, #12141b 0%, #08090d 100%);
  border: 1px solid var(--pzp-gold-3);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -30px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.5);
}
.puzzleRail.reveal .pzPanel { animation: pzpFadeUp .55s cubic-bezier(.2,.8,.3,1) backwards; }
.puzzleRail.reveal .pzPanel.p1 { animation-delay: .05s; }
.puzzleRail.reveal .pzPanel.p2 { animation-delay: .18s; }
@keyframes pzpFadeUp { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: none; } }
.puzzleRail .pzPanel-inner {
  position: relative; overflow: hidden;
  border: 1px solid rgba(216, 177, 90, .22);
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(77,208,196,.09), transparent 62%),
    linear-gradient(180deg, rgba(20,22,30,.5), rgba(7,8,12,.6));
}
.puzzleRail .top-rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent, var(--pzp-gold-2) 50%, transparent); opacity: .5; }
.puzzleRail .pzBr { position: absolute; width: 14px; height: 14px; z-index: 6; border: 1px solid var(--pzp-teal-2); pointer-events: none; }
.puzzleRail .pzBr.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.puzzleRail .pzBr.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.puzzleRail .pzBr.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.puzzleRail .pzBr.br2 { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* status header */
.puzzleRail .status-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px; position: relative; }
.puzzleRail .piece-tile {
  flex-shrink: 0; width: 50px; height: 50px; display: grid; place-items: center; position: relative;
  background: linear-gradient(135deg, #1d222c, #0d1015);
  border: 1px solid var(--pzp-gold-3);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(216,177,90,.14), inset 0 0 22px rgba(0,0,0,.5);
  color: var(--pzp-bone);
}
.puzzleRail .piece-tile::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(216,177,90,.1); }
.puzzleRail .piece-tile svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
/* Magister Schnurr in der Status-Kachel: Mini-Katze mit kraeftigeren Strichen,
   damit die Linien bei 40px nicht verhungern (viewBox 120 -> stroke skaliert). */
.puzzleRail .pzCatTile { color: var(--mp-gold-1, #d8b15a); }
.puzzleRail .pzCatTile .coachCat { width: 40px; }
.puzzleRail .pzCatTile .coachCat path,
.puzzleRail .pzCatTile .coachCat ellipse { stroke-width: 4.5; }
.puzzleRail .pzCatTile .coachCat .coachCat-sparkles { display: none; }
.puzzleRail .piece-tile.side-b { background: linear-gradient(135deg, #0c0e13, #05060a); color: #cfd4dc; }
.puzzleRail .status-txt { flex: 1; min-width: 0; }
.puzzleRail .status-txt .to-move {
  font-family: var(--pzp-serif); font-weight: 700; font-size: 16px; letter-spacing: 1.4px; line-height: 1.1;
  color: var(--pzp-bone); text-transform: uppercase; margin: 0;
}
.puzzleRail .status-txt .task {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  font-family: var(--pzp-serif-body); font-style: italic; font-size: 15.5px; color: var(--pzp-teal-1);
}
.puzzleRail .status-txt .task .d { width: 4px; height: 4px; transform: rotate(45deg); background: var(--pzp-teal-2); box-shadow: 0 0 6px var(--pzp-teal-glow); }
.puzzleRail .turn-dot {
  position: absolute; top: 16px; right: 16px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #d8fff7, var(--pzp-teal-2) 62%);
  box-shadow: 0 0 0 3px rgba(77,208,196,.12), 0 0 12px var(--pzp-teal-glow);
  animation: pzpDot 2.2s ease-in-out infinite;
}
@keyframes pzpDot { 0%,100% { box-shadow: 0 0 0 3px rgba(77,208,196,.1), 0 0 8px var(--pzp-teal-glow); } 50% { box-shadow: 0 0 0 5px rgba(77,208,196,.05), 0 0 16px var(--pzp-teal-glow); } }

/* divider */
.puzzleRail .p-div { display: flex; align-items: center; gap: 10px; margin: 0 18px; }
.puzzleRail .p-div .ln { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(216,177,90,.26)); }
.puzzleRail .p-div .ln.r { background: linear-gradient(90deg, rgba(216,177,90,.26), transparent); }
.puzzleRail .p-div .gem { width: 5px; height: 5px; background: var(--pzp-gold-1); transform: rotate(45deg); box-shadow: 0 0 6px var(--pzp-gold-glow); }

/* ledger */
.puzzleRail .ledger { padding: 8px 18px 16px; }
.puzzleRail .row { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 10px; }
.puzzleRail .row + .row { border-top: 1px solid rgba(216, 177, 90, .08); }
.puzzleRail .row .k { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700; color: var(--pzp-ink-dim); flex-shrink: 0; }
.puzzleRail .row .lead { flex: 1; height: 0; border-bottom: 1px dotted rgba(216,177,90,.18); transform: translateY(-2px); }
.puzzleRail .row .v { font-family: var(--pzp-mono); font-size: 16px; font-weight: 500; color: var(--pzp-bone); letter-spacing: .5px; flex-shrink: 0; }
.puzzleRail .row.you { background: linear-gradient(90deg, rgba(77,208,196,.09), transparent 82%); border-top-color: rgba(77,208,196,.18) !important; }
.puzzleRail .row.you::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; background: linear-gradient(180deg, transparent, var(--pzp-teal-2), transparent); box-shadow: 0 0 8px var(--pzp-teal-glow); }
.puzzleRail .row.you .k { color: var(--pzp-teal-2); }
.puzzleRail .row.you .v { color: var(--pzp-teal-1); font-weight: 600; }
.puzzleRail .row.you .lead { border-bottom-color: rgba(77,208,196,.22); }
.puzzleRail .row.streak .v { color: var(--pzp-gold-hi); display: inline-flex; align-items: center; gap: 7px; }
.puzzleRail .row.streak .v .fl { font-size: 15px; filter: drop-shadow(0 0 6px rgba(216,120,60,.7)); }

/* Kompakte Aufgaben-Karte (pzTask, app/puzzle-hud.js topHudHtml) — ersetzt
   das alte status-head+ledger-Layout: Kopfzeile mit Katze, Puls-Punkt und
   Serien-Badge, darunter die Duell-Zeile Puzzle|Du. */
.puzzleRail .pzTask-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 11px 14px; }
.puzzleRail .pzTask .piece-tile { width: 40px; height: 40px; }
.puzzleRail .pzTask .pzCatTile .coachCat { width: 32px; }
.puzzleRail .pzTask-txt { flex: 1; min-width: 0; }
.puzzleRail .pzTask-turn {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--pzp-serif); font-weight: 700; font-size: 14.5px; letter-spacing: 1.6px;
  line-height: 1.1; color: var(--pzp-bone); text-transform: uppercase;
}
.puzzleRail .pzTask-turn .dot {
  flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #d8fff7, var(--pzp-teal-2) 62%);
  box-shadow: 0 0 8px var(--pzp-teal-glow);
  animation: pzpDot 2.2s ease-in-out infinite;
}
.puzzleRail .pzTask-goal {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-family: var(--pzp-serif-body); font-style: italic; font-size: 14.5px; color: var(--pzp-teal-1);
}
.puzzleRail .pzTask-goal .d { width: 4px; height: 4px; transform: rotate(45deg); background: var(--pzp-teal-2); box-shadow: 0 0 6px var(--pzp-teal-glow); }
.puzzleRail .pzTask-streak {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 40px; padding: 6px 8px;
  border: 1px solid rgba(216, 177, 90, .16); background: rgba(11, 13, 18, .5);
  color: var(--pzp-ink-dim);
}
.puzzleRail .pzTask-streak b { font-family: var(--pzp-mono); font-size: 12.5px; font-weight: 600; line-height: 1; color: inherit; }
.puzzleRail .pzTask-streak.hot { border-color: rgba(216, 140, 70, .38); color: var(--pzp-gold-hi); }
.puzzleRail .pzTask-streak.hot svg { color: #f2a15a; filter: drop-shadow(0 0 6px rgba(216, 120, 60, .65)); }
.puzzleRail .pzTask-ratings { display: flex; align-items: stretch; border-top: 1px solid rgba(216, 177, 90, .12); }
.puzzleRail .pzTask-r { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 10px 8px 11px; }
.puzzleRail .pzTask-r + .pzTask-r { border-left: 1px solid rgba(216, 177, 90, .12); }
.puzzleRail .pzTask-r .k { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--pzp-ink-dim); }
.puzzleRail .pzTask-r b { font-family: var(--pzp-mono); font-size: 16px; font-weight: 600; letter-spacing: .5px; color: var(--pzp-bone); }
.puzzleRail .pzTask-r.you { background: linear-gradient(180deg, rgba(77, 208, 196, .07), transparent); }
.puzzleRail .pzTask-r.you .k { color: var(--pzp-teal-2); }
.puzzleRail .pzTask-r.you b { color: var(--pzp-teal-1); }

/* actions */
.puzzleRail .actions { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.puzzleRail .act {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; padding: 14px 16px;
  font-family: inherit; font-weight: 700; font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--pzp-bone); cursor: pointer;
  background: rgba(16, 18, 24, .6);
  border: 1px solid rgba(216, 177, 90, .22);
  transition: transform 160ms ease, box-shadow 200ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.puzzleRail .act .crn { position: absolute; width: 5px; height: 5px; border: 1px solid rgba(216,177,90,.4); opacity: 0; transition: opacity 180ms ease; }
.puzzleRail .act .crn.tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.puzzleRail .act .crn.br { bottom: 4px; right: 4px; border-left: none; border-top: none; }
.puzzleRail .act:hover .crn { opacity: 1; }
.puzzleRail .act .ico { display: grid; place-items: center; flex-shrink: 0; }
.puzzleRail .act:hover { transform: translateY(-2px); }
.puzzleRail .act:active { transform: translateY(0); }
.puzzleRail .act[disabled] { opacity: .45; cursor: default; transform: none; }
.puzzleRail .act-hint { color: var(--pzp-gold-hi); border-color: rgba(216,177,90,.4); }
.puzzleRail .act-hint .ico { color: var(--pzp-gold-1); }
.puzzleRail .act-hint:hover { border-color: var(--pzp-gold-1); background: rgba(28, 22, 10, .6); box-shadow: 0 8px 24px -10px var(--pzp-gold-glow), inset 0 0 20px -12px var(--pzp-gold-glow); }
.puzzleRail .act-solution .ico { color: var(--pzp-teal-2); }
.puzzleRail .act-solution:hover { color: var(--pzp-teal-1); border-color: rgba(77,208,196,.45); background: rgba(10, 22, 24, .6); box-shadow: 0 8px 24px -10px var(--pzp-teal-glow); }
.puzzleRail .act-next { color: #06110f; background: linear-gradient(180deg, #8ceadd 0%, #4dd0c4 44%, #2fa79c 100%); border-color: #a6f3e9; }
.puzzleRail .act-next .ico { color: #06110f; }
.puzzleRail .act-next:hover { filter: brightness(1.05); box-shadow: 0 10px 26px -10px var(--pzp-teal-glow); }
.puzzleRail .act-exit { color: var(--pzp-ink); border-color: rgba(216,177,90,.14); background: transparent; letter-spacing: 3px; }
.puzzleRail .act-exit .ico { color: var(--pzp-ink-dim); }
.puzzleRail .act-exit:hover { color: #e0897c; border-color: rgba(194,90,74,.45); background: rgba(28,12,10,.4); }
.puzzleRail .act-exit:hover .ico { color: #e0897c; }
.puzzleRail.reveal .act { animation: pzpFadeUp .5s cubic-bezier(.2,.8,.3,1) backwards; }
.puzzleRail.reveal .act:nth-child(1) { animation-delay: .28s; }
.puzzleRail.reveal .act:nth-child(2) { animation-delay: .36s; }
.puzzleRail.reveal .act:nth-child(3) { animation-delay: .44s; }

/* wrong/hint message — slim notice below the status panel */
.pzMsg {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  border: 1px solid; border-left-width: 3px;
  animation: pzMsgIn .22s ease;
}
.pzMsg.error { color: #ff9b8a; background: rgba(120, 30, 20, .28); border-color: #e5573e; }
.pzMsg.hint { color: #f3d795; background: rgba(120, 90, 30, .24); border-color: #e6c14b; }
.pzMsg.success { color: #7ee3c0; background: rgba(20, 90, 70, .26); border-color: #4dd0c4; }
@keyframes pzMsgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* buttons kept for the fail celebration card (.pzCard-fail uses .pzBtn) */
.pzBtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; font-size: 14px; font-weight: 600;
  border: 1px solid rgba(120, 150, 160, .26); background: rgba(10, 15, 19, .7);
  color: var(--mp-parchment, #e8e2d0); cursor: pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
.pzBtn:hover { transform: translateY(-1px); background: rgba(20, 28, 34, .9); border-color: rgba(120, 150, 160, .5); }
.pzBtn.ghost { background: transparent; }
.pzBtn.primary {
  border-color: rgba(77, 208, 196, .5);
  background: linear-gradient(120deg, rgba(77, 208, 196, .22), rgba(77, 208, 196, .08));
  color: #fff;
}
.pzBtn.primary:hover { background: linear-gradient(120deg, rgba(77, 208, 196, .34), rgba(77, 208, 196, .14)); box-shadow: 0 8px 26px -10px rgba(77, 208, 196, .6); }
.pzBtn[disabled] { opacity: .4; cursor: default; transform: none; }

/* ===================== Desktop: board (+ own/opponent rails) | puzzle rail ====
   The board keeps its two match profile boxes (#effectBar own on the left,
   #effectBarEnemy opponent on the right — avatar, name, ELO, turn, clock, mana).
   The puzzle rail (status + actions) sits to their right. board-size reserves
   room for both profile boxes AND the puzzle rail so nothing overflows. */
@media (min-width: 1360px) {
  body.mode-demo.puzzle-active {
    --pz-rail: 260px;   /* width of the left profile box and the right column */
    /* Hoehen-Reserve wie im Spiel (main-06): main-Padding 32 + boardWrap-Huelle
       (gemessen 56px: Rahmen + #files-Zeile + #actionStatus) + 8px Puffer —
       Brett fuellt die Fensterhoehe, kein Scrollen. */
    --board-size: max(360px, min(
        calc((100dvh - 96px) * 0.98),
        calc((100vw - var(--side-nav-width) - (var(--pz-rail) * 2) - 76px) * 0.98)
      ));
  }
  /* Symmetric own | board | right grid so the board is horizontally centred and
     top-aligned exactly like the match/Play screens. The profile boxes sit at
     the board's top; the right column is the puzzle rail (opponent box + status
     + actions). NB: selector must out-specify `body.mode-demo.exposure-public
     main { justify-content: flex-start }` (main-02) — on the live public build
     that class is set and would otherwise left-align the whole grid. */
  body.mode-demo.puzzle-active main {
    display: grid;
    grid-template-columns: var(--pz-rail) minmax(0, auto) var(--pz-rail);
    grid-template-areas: "own board right";
    /* mittig statt oben: gleicher Rest-Abstand ueber und unter dem Brett */
    align-content: center;
    justify-content: center;
    align-items: start;
    gap: 18px;
  }
  /* boardStage is dissolved so its own-rail and board land in main's own/board
     columns; the opponent box is moved into the puzzle rail by
     renderPuzzleOverlay while solving. */
  body.puzzle-active #boardStage { display: contents; }
  body.puzzle-active #effectBar  { grid-area: own; min-width: 0; align-self: start; }
  body.puzzle-active #boardWrap  { grid-area: board; }
  body.puzzle-active .puzzleRail { grid-area: right; width: var(--pz-rail); }
}

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

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

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

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

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

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

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

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

/* ===================== Puzzle solved — "Checkmate (Grimoire)" ==========
   Ported 1:1 from the Claude Design standalone. Lives inside
   #puzzleCelebrateLayer on a win (the fail path keeps .pzCard above).
   Everything is scoped under .pzcWin so the generic child class names
   (.title, .pod, .btn, .from …) can't leak into the rest of the app.     */
.pzcWin {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  --pzc-gold-1: #d8b15a; --pzc-gold-2: #c89a3e; --pzc-gold-3: #8a6a25; --pzc-gold-hi: #f3dca0;
  --pzc-gold-glow: rgba(216, 177, 90, .35);
  --pzc-teal-1: #6ee7d8; --pzc-teal-2: #4dd0c4; --pzc-teal-3: #239b95;
  --pzc-teal-glow: rgba(77, 208, 196, .45);
  --pzc-aura-1: #f0a6c6; --pzc-aura-glow: rgba(224, 122, 168, .45);
  --pzc-ink: #aea58c; --pzc-ink-dim: #847b65;
  --pzc-serif: 'Cinzel', serif;
  --pzc-serif-body: Georgia, 'Times New Roman', serif;
  --pzc-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ambient rising motes */
.pzcMotes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pzcMotes .m {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(150, 220, 220, .55); box-shadow: 0 0 8px rgba(120, 210, 210, .6);
  opacity: 0; animation: pzcDrift linear infinite;
}
.pzcMotes .m.aura { background: rgba(240, 166, 198, .5); box-shadow: 0 0 8px rgba(224, 122, 168, .6); }
@keyframes pzcDrift { 0% { transform: translateY(0); opacity: 0; } 14% { opacity: .55; } 86% { opacity: .28; } 100% { transform: translateY(-105%); opacity: 0; } }

/* card shell */
.pzcCard {
  position: relative; z-index: 3; margin: auto;
  width: min(452px, 92%); padding: 8px;
  background: linear-gradient(180deg, #12141b 0%, #08090d 100%);
  border: 1px solid var(--pzc-gold-3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 50px 100px -34px rgba(0, 0, 0, .92), 0 2px 12px rgba(0, 0, 0, .6);
}
.pzcCard.reveal { animation: pzcCardPop 620ms cubic-bezier(.2, .9, .3, 1); }
@keyframes pzcCardPop { 0% { opacity: 0; transform: scale(.92) translateY(10px); } 60% { opacity: 1; transform: scale(1.012); } 100% { opacity: 1; transform: none; } }

/* Magister Schnurr lugt jubelnd ueber die rechte obere Kartenkante (z-index
   hinter der Karte -> nur Kopf + Hut ragen heraus, leicht geneigt) */
.pzcCat {
  position: absolute;
  top: -47px;
  right: 20px;
  z-index: -1;
  width: 76px;
  color: var(--mp-gold-1, #d8b15a);
  transform: rotate(7deg);
  pointer-events: none;
}
.pzcCat .coachCat { width: 100%; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55)); }

.pzcInner {
  position: relative; overflow: hidden; text-align: center;
  border: 1px solid rgba(216, 177, 90, .24);
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(77, 208, 196, .12), transparent 62%),
    linear-gradient(180deg, rgba(20, 22, 30, .5), rgba(7, 8, 12, .6));
  padding: 62px 34px 30px;
}
.pzcInner .pzcTopRule {
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent, var(--pzc-gold-2) 50%, transparent); opacity: .55;
}

/* teal corner brackets */
.pzcBr { position: absolute; width: 18px; height: 18px; z-index: 6; border: 1px solid var(--pzc-teal-2); pointer-events: none; }
.pzcBr.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.pzcBr.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.pzcBr.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.pzcBr.br2 { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* crest medallion */
.pzcCrest {
  position: absolute; top: 0; left: 50%; z-index: 8;
  width: 78px; height: 78px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #232a41, #0c0e15 78%);
  border: 1px solid rgba(216, 177, 90, .5);
  box-shadow: 0 0 0 5px #08090d, 0 0 0 6px rgba(216, 177, 90, .22), 0 10px 26px rgba(0, 0, 0, .7), 0 0 34px -6px var(--pzc-teal-glow);
  color: var(--pzc-teal-1);
}
.pzcCrest::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(216, 177, 90, .3); }
.pzcCrest svg { filter: drop-shadow(0 0 10px var(--pzc-teal-glow)); }
.pzcCard.reveal .pzcCrest { animation: pzcCrestSlam .5s cubic-bezier(.2, .9, .3, 1) .34s backwards; }
@keyframes pzcCrestSlam { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(.92); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.pzcCrestRing {
  position: absolute; top: 0; left: 50%; z-index: 7; width: 78px; height: 78px;
  transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--pzc-teal-1);
  opacity: 0; pointer-events: none; box-shadow: 0 0 18px -2px var(--pzc-teal-glow);
}
.pzcCard.reveal .pzcCrestRing { animation: pzcCrestRing .8s .5s ease-out forwards; }
@keyframes pzcCrestRing { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.7); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); } }

/* streak / level ribbons */
.pzcBadges { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto 20px; }
.pzcRibbon {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 20px;
  font-family: var(--pzc-serif); font-weight: 700; font-size: 13.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #241a06;
  background: linear-gradient(180deg, #f6e1a4 0%, #e0bd6a 44%, #c8a24a 100%);
  border: 1px solid var(--pzc-gold-hi);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 10px 22px -10px rgba(216, 177, 90, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%);
  white-space: nowrap;
}
.pzcCard.reveal .pzcRibbon { animation: pzcBadgePop .5s .62s cubic-bezier(.2, 1.5, .4, 1) backwards; }
@keyframes pzcBadgePop { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 55% { opacity: 1; transform: translateY(0) scale(1.06); } 100% { opacity: 1; transform: none; } }
.pzcRibbon .pzcRibbon-ico { line-height: 1; }
.pzcRibbon .flame { font-size: 14px; filter: drop-shadow(0 0 5px rgba(216, 120, 60, .7)); }
.pzcCard.reveal .pzcRibbon.is-milestone { animation: pzcBadgePop .5s .62s cubic-bezier(.2, 1.5, .4, 1) backwards, pzcRibbonGlow 1.6s ease-in-out 1.1s infinite; }
@keyframes pzcRibbonGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 10px 22px -10px rgba(216, 177, 90, .5), inset 0 1px 0 rgba(255, 255, 255, .6); }
  50% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 26px rgba(216, 177, 90, .75), inset 0 1px 0 rgba(255, 255, 255, .6); }
}

/* title + subtitle */
.pzcTitle {
  font-family: var(--pzc-serif); font-weight: 700; font-size: 48px; letter-spacing: 2px; margin: 0; line-height: .98;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f9f0d2 0%, #e6c877 52%, #ab7f2d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pzcCard.reveal .pzcTitle { animation: pzcFadeUp .55s .52s cubic-bezier(.2, .8, .3, 1) backwards; }
.pzcSub {
  font-family: var(--pzc-serif-body); font-style: italic; font-size: 18px; color: var(--pzc-ink);
  margin: 12px 0 0; letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 12px;
}
.pzcSub .d { width: 4px; height: 4px; transform: rotate(45deg); background: var(--pzc-teal-2); box-shadow: 0 0 6px var(--pzc-teal-glow); flex-shrink: 0; }
.pzcPractice {
  font-family: var(--pzc-sans, var(--mp-sans)); font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase;
  color: rgba(216, 177, 90, .82); margin: 10px 0 0; opacity: .9;
}
.pzcCard.reveal .pzcSub { animation: pzcFadeUp .55s .66s cubic-bezier(.2, .8, .3, 1) backwards; }
@keyframes pzcFadeUp { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }

/* divider */
.pzcHr { display: flex; align-items: center; gap: 12px; margin: 24px 0 20px; }
.pzcHr .ln { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(216, 177, 90, .3)); }
.pzcHr .ln.r { background: linear-gradient(90deg, rgba(216, 177, 90, .3), transparent); }
.pzcHr .gem { width: 5px; height: 5px; background: var(--pzc-gold-1); transform: rotate(45deg); box-shadow: 0 0 6px var(--pzc-gold-glow); }
.pzcCard.reveal .pzcHr { animation: pzcFadeUp .5s .8s ease backwards; }

/* hero rating */
.pzcRating { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 22px; }
.pzcCard.reveal .pzcRating { animation: pzcFadeUp .55s .88s cubic-bezier(.2, .8, .3, 1) backwards; }
.pzcRating .lbl {
  font-size: 9.5px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--pzc-ink-dim);
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.pzcRating .from { font-family: var(--pzc-serif); font-size: 30px; font-weight: 600; color: var(--pzc-ink); letter-spacing: 1px; }
.pzcRating .arrow { color: var(--pzc-gold-3); display: inline-flex; }
.pzcRating .to {
  font-family: var(--pzc-serif); font-size: 42px; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(180deg, #f6ecce, #d8b15a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pzcRating .delta {
  font-family: var(--pzc-mono); font-size: 15px; font-weight: 600; color: var(--pzc-teal-1);
  padding: 5px 9px; border: 1px solid rgba(77, 208, 196, .35); background: rgba(77, 208, 196, .08);
  box-shadow: 0 0 16px -6px var(--pzc-teal-glow);
}
.pzcRating .delta.down { color: #ff9b8a; border-color: rgba(229, 87, 62, .35); background: rgba(229, 87, 62, .08); box-shadow: none; }
.pzcRating .delta.flat { color: var(--pzc-ink-dim); border-color: rgba(120, 150, 160, .28); background: transparent; box-shadow: none; }
.pzcRating .delta.pop { animation: pzcDeltaPop .5s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes pzcDeltaPop { 0% { opacity: 0; transform: scale(.6); } 55% { opacity: 1; transform: scale(1.14); } 100% { opacity: 1; transform: scale(1); } }

/* two stat pods */
.pzcPods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 26px; }
.pzcPod { position: relative; padding: 15px 12px 14px; text-align: center; background: rgba(11, 13, 18, .55); border: 1px solid rgba(216, 177, 90, .12); }
.pzcCard.reveal .pzcPod { animation: pzcFadeUp .5s cubic-bezier(.2, .8, .3, 1) backwards; }
.pzcCard.reveal .pzcPod.p1 { animation-delay: 1s; }
.pzcCard.reveal .pzcPod.p2 { animation-delay: 1.1s; }
.pzcPod .k { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--pzc-ink-dim); }
.pzcPod .v { font-family: var(--pzc-serif); font-size: 30px; font-weight: 700; line-height: 1; margin-top: 8px; display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.pzcPod .v .u { font-family: var(--pzc-mono); font-size: 12px; font-weight: 500; }
.pzcPod.aura .v { color: var(--pzc-aura-1); text-shadow: 0 0 18px var(--pzc-aura-glow); }
.pzcPod.streak .v { color: var(--pzc-gold-hi); }
.pzcPod.streak .v .fl { font-size: 20px; filter: drop-shadow(0 0 6px rgba(216, 120, 60, .7)); }
.pzcPod .spark-anchor { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 1px; height: 1px; }

/* actions */
.pzcActions { display: flex; gap: 12px; }
.pzcCard.reveal .pzcActions { animation: pzcFadeUp .55s 1.24s cubic-bezier(.2, .8, .3, 1) backwards; }
.pzcBtn {
  position: relative; overflow: hidden; flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 18px; font-family: inherit; font-weight: 800; font-size: 11.5px; letter-spacing: 2.4px; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: transform 160ms ease, box-shadow 200ms ease, filter 160ms ease, border-color 160ms ease, color 160ms ease;
}
.pzcBtn-next {
  flex: 1.5; color: #06110f;
  background: linear-gradient(180deg, #8ceadd 0%, #4dd0c4 44%, #2fa79c 100%);
  border: 1px solid #a6f3e9;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 12px 28px -10px var(--pzc-teal-glow), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.pzcBtn-next::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -55%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg); animation: pzcSheen 4.6s ease-in-out infinite;
}
@keyframes pzcSheen { 0% { left: -55%; } 28%, 100% { left: 150%; } }
.pzcBtn-next:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 18px 38px -10px var(--pzc-teal-glow), inset 0 1px 0 rgba(255, 255, 255, .55); }
.pzcBtn-next .arrow { display: inline-flex; transition: transform 180ms ease; }
.pzcBtn-next:hover .arrow { transform: translateX(4px); }
.pzcBtn-replay { color: var(--pzc-ink); background: rgba(16, 18, 24, .6); border: 1px solid rgba(216, 177, 90, .24); }
.pzcBtn-replay:hover { color: var(--pzc-gold-1); border-color: var(--pzc-gold-1); transform: translateY(-2px); }
.pzcBtn:active { transform: translateY(0); }

/* replay-animation affordance */
.pzcRewatch {
  position: absolute; top: 12px; right: 12px; z-index: 9; width: 30px; height: 30px;
  display: grid; place-items: center; color: var(--pzc-ink-dim);
  border: 1px solid rgba(216, 177, 90, .16); background: rgba(8, 9, 13, .5); cursor: pointer; transition: all 160ms;
}
.pzcCard.reveal .pzcRewatch { animation: pzcFadeUp .5s 1.4s ease backwards; }
.pzcRewatch:hover { color: var(--pzc-teal-1); border-color: rgba(77, 208, 196, .4); transform: rotate(-40deg); }

/* sparks — on <body> so the layer clip doesn't cut them off */
.pzcSpark { position: fixed; z-index: 60; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; }

@media (max-width: 480px) {
  .pzcTitle { font-size: 38px; }
  .pzcInner { padding: 56px 22px 26px; }
  .pzcRating .to { font-size: 36px; }
  .pzcRating .from { font-size: 26px; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Respect reduced-motion for the puzzle/play/messages animations added above
   (consistent with the existing prefers-reduced-motion blocks). Content stays
   fully visible — only the motion is removed. */
@media (prefers-reduced-motion: reduce) {
  .pzConfettiWrap { display: none !important; }
  .pzcMotes { display: none !important; }
  .pz-root .pz-streak .st-flame,
  .pz-root .pzb-target-ring,
  .pzFlameBurst,
  .puzzleRail .turn-dot,
  .puzzleRail.reveal .pzPanel,
  .puzzleRail.reveal .pzPanel.p1,
  .puzzleRail.reveal .pzPanel.p2,
  .puzzleRail.reveal .act,
  .pzCard,
  .pzCard-badge,
  .pzLevelup,
  .pzStreakMilestone,
  .pzMsg,
  .pzCelebrateLayer,
  .pzcCard,
  .pzcCard.reveal .pzcCrest,
  .pzcCrestRing,
  .pzcCard.reveal .pzcRibbon,
  .pzcCard.reveal .pzcRibbon.is-milestone,
  .pzcCard.reveal .pzcTitle,
  .pzcCard.reveal .pzcSub,
  .pzcCard.reveal .pzcHr,
  .pzcCard.reveal .pzcRating,
  .pzcCard.reveal .pzcPod,
  .pzcCard.reveal .pzcActions,
  .pzcCard.reveal .pzcRewatch,
  .pzcRating .delta.pop,
  .pzcBtn-next::before,
  #board .sq.puzzleHintFrom::after,
  #board .sq.puzzleHintTo::after,
  #board .sq.puzzleWrong::before {
    animation: none !important;
  }
  #boardWrap.pzShake { animation: none !important; }
  .pz-cta:hover,
  .ps-play:hover,
  .pz-root .pz-solve:hover,
  .pz-root .pz-theme:hover,
  .pz-root .pz-daily:hover { transform: none !important; }
  .pz-cta-arrow,
  .pz-root .pz-solve .ps-arrow,
  .pz-root .pz-daily .pd-action .arrow,
  .ps-play-arrow { transition: none !important; }
}

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

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

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

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

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

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

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

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

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

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

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

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