/* =====================================================================
   PUZZLE-SEITE (app/puzzle.js, Bausteine in app/puzzle-hub-view.js).
   Links das naechste Puzzle als Brett, rechts Rating-Leiter, Tagesraetsel
   und LOESEN; darunter Themen-Siegel und alle Aufgaben als Rauten-Karte.
   Vokabular wie Akademie und Tagesweg: Gold = dran, Teal = geloest,
   dunkel = offen, Blau = Faehigkeit. Titel nutzen die .duell-*-Klassen.
   ===================================================================== */
.pzh {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  container-type: inline-size;
  color: var(--mp-bone);
}
.pzh > * { position: relative; z-index: 1; }
.pzh-head { margin-bottom: 30px; }
.pzh .duell-sub { max-width: 640px; }

.pzh-k {
  font-size: 9.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
}
.pzh-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-ink-dim);
}
.pzh-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(216, 177, 90, .18), transparent); }
.pzh-label-count, .pzm-count, .pzt-count { font-family: var(--mp-mono); letter-spacing: .5px; color: var(--mp-ink-dim); }
.pzh-label-count b, .pzm-count b, .pzt-count b { font-weight: 600; color: var(--mp-teal-1); }
.pzh-section { margin-top: 38px; }

/* ── Mini-Brett (Held, Tagesraetsel, Vorschau): Look wie das echte Brett ── */
.pzb { position: relative; width: 100%; aspect-ratio: 1; }
.pzb-frame {
  position: absolute;
  inset: 0;
  padding: 3px;
  border: 1px solid var(--rift-gold, #c89b3c);
  border-radius: 6px;
  overflow: hidden;
  background: var(--mp-board-frame);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(240, 210, 131, .2), inset 0 0 22px rgba(0, 0, 0, .7);
}
.pzb-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 1px; width: 100%; height: 100%; }
.pzb-tile { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--mp-sq-dark); }
.pzb-tile.light { background: var(--mp-sq-light); }
.pzb-tile::before { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(240, 210, 131, .1); pointer-events: none; }
.pzb-coord {
  position: absolute;
  z-index: 3;
  font-size: clamp(7px, .75vw, 10px);
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--rift-gold-bright, #f0d283) 70%, rgba(255, 255, 255, .35));
  opacity: .55;
  pointer-events: none;
}
.pzb-rank { top: 3px; left: 3px; }
.pzb-file { bottom: 2px; right: 3px; }
.pzb-piece { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; }
.pzb-piece img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
/* Ziel: der gegnerische Koenig — ein feiner roter Ring, der langsam atmet. */
.pzb-target {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(224, 86, 79, .55);
  box-shadow: 0 0 12px rgba(224, 86, 79, .28), inset 0 0 10px rgba(224, 86, 79, .18);
  animation: pzbTarget 3.4s ease-in-out infinite;
}
@keyframes pzbTarget { 0%, 100% { opacity: .45; scale: .94; } 50% { opacity: 1; scale: 1; } }

/* ── Held: Brett links, Seitenspalte rechts ── */
.pzh-hero {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: 34px;
  padding: 26px;
  border: 1px solid rgba(216, 177, 90, .16);
  background: linear-gradient(180deg, rgba(13, 16, 22, .62), rgba(8, 9, 13, .86));
}
.pzh-br { position: absolute; width: 16px; height: 16px; border: 1px solid var(--mp-gold-1); pointer-events: none; }
.pzh-br.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.pzh-br.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.pzh-stage { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pzh-board .pzb-frame { border-width: 2px; padding: 4px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .86), 0 0 26px rgba(10, 200, 185, .14), inset 0 0 0 1px rgba(240, 210, 131, .22), inset 0 0 28px rgba(0, 0, 0, .7); }

/* Aufgabe: Koenig der Seite am Zug in der Raute, Ziel, Rating-Chip. */
.pzh-task { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pzh-king {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
}
.pzh-king::before {
  content: "";
  position: absolute;
  inset: 5px;
  rotate: 45deg;
  border: 1px solid var(--mp-gold-1);
  background: linear-gradient(135deg, #1d222c, #0b0d12);
  box-shadow: 0 0 0 3px #0b0d12, 0 0 0 4px rgba(216, 177, 90, .3), 0 4px 12px rgba(0, 0, 0, .6);
}
.pzh-king img { position: relative; width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
.pzh-task-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pzh-turn { font-family: var(--mp-serif); font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mp-bone); }
.pzh-goal { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mp-serif-body, Georgia, serif); font-style: italic; font-size: 15px; color: var(--mp-teal-1); }
.pzh-pips { display: inline-flex; gap: 5px; }
.pzh-pips i { width: 6px; height: 6px; rotate: 45deg; background: var(--mp-gold-1); box-shadow: 0 0 6px rgba(216, 177, 90, .5); }
.pzh-chip {
  flex-shrink: 0;
  padding: 5px 9px;
  font-family: var(--mp-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mp-gold-1);
  border: 1px solid rgba(216, 177, 90, .28);
  background: rgba(7, 8, 11, .5);
}

.pzh-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Rating-Karte: Zahl, Stufe, Leiter, drei Werte. */
.pzh-rating {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  border: 1px solid rgba(216, 177, 90, .16);
  background: linear-gradient(180deg, rgba(20, 23, 31, .55), rgba(9, 11, 15, .7));
}
.pzh-rating-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pzh-band { font-family: var(--mp-serif); font-size: 14px; font-weight: 600; letter-spacing: .6px; color: var(--mp-gold-1); }
.pzh-rating-num {
  margin: 6px 0 18px;
  font-family: var(--mp-serif);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #f6e1a4 0%, #d8b15a 55%, #a07a2c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.pzh-rating-num.is-locked { opacity: .22; filter: grayscale(.6); }
.pzh-rating.is-guest .pzh-save { margin-top: auto; align-self: flex-start; }

.pzl { position: relative; height: 30px; margin: 0 6px 14px; }
.pzl-track { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(216, 177, 90, .14); }
.pzl-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pos);
  background: linear-gradient(90deg, rgba(216, 177, 90, .35), var(--mp-gold-1));
  box-shadow: 0 0 8px rgba(216, 177, 90, .35);
}
.pzl-node {
  position: absolute;
  top: 7px;
  width: 9px;
  height: 9px;
  translate: -50% -50%;
}
.pzl-node::before {
  content: "";
  position: absolute;
  inset: 0;
  rotate: 45deg;
  border: 1px solid rgba(216, 177, 90, .35);
  background: #0b0d12;
}
.pzl-node em {
  position: absolute;
  top: 13px;
  left: 50%;
  translate: -50% 0;
  font-style: normal;
  font-family: var(--mp-mono);
  font-size: 9px;
  color: var(--mp-ink-dim);
  white-space: nowrap;
}
.pzl-node.is-past::before { border-color: var(--mp-gold-1); background: var(--mp-gold-2, #c89a3e); }
.pzl-node.is-here::before { border-color: var(--mp-gold-1); }
.pzl-node.is-past em, .pzl-node.is-here em { color: var(--mp-gold-2, #c89a3e); }
.pzl-marker {
  position: absolute;
  top: 7px;
  left: var(--pos);
  width: 13px;
  height: 13px;
  translate: -50% -50%;
  rotate: 45deg;
  background: linear-gradient(135deg, #f6e1a4, #c89a3e);
  border: 1px solid #f3dca0;
  box-shadow: 0 0 0 3px #0b0d12, 0 0 14px rgba(216, 177, 90, .55);
  animation: pzlBreathe 3.4s ease-in-out infinite;
}
.is-guest .pzl-marker { display: none; }
@keyframes pzlBreathe {
  0%, 100% { box-shadow: 0 0 0 3px #0b0d12, 0 0 10px rgba(216, 177, 90, .35); }
  50% { box-shadow: 0 0 0 3px #0b0d12, 0 0 20px rgba(216, 177, 90, .7); }
}

.pzh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; border-top: 1px solid rgba(216, 177, 90, .1); padding-top: 14px; }
.pzh-stat { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pzh-stat + .pzh-stat { border-left: 1px solid rgba(216, 177, 90, .1); }
.pzh-stat .v { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--mp-serif); font-size: 22px; font-weight: 700; line-height: 1; color: var(--mp-bone); }
.pzh-stat .v b { font-weight: 700; }
.pzh-stat .v small { font-family: var(--mp-mono); font-size: 11px; font-weight: 500; color: var(--mp-ink-dim); }
.pzh-stat .v svg { align-self: center; color: var(--mp-ink-dim); }
.pzh-stat.is-hot .v svg { color: #f2a15a; filter: drop-shadow(0 0 6px rgba(216, 120, 60, .6)); }
.pzh-stat .k { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); }

.pzh-save {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mp-gold-1);
  border: 1px solid rgba(216, 177, 90, .4);
  background: rgba(28, 22, 10, .4);
  cursor: var(--mp-cur-pointer);
  transition: border-color .18s ease, background .18s ease, translate .18s ease;
}
.pzh-save:hover { border-color: var(--mp-gold-1); background: rgba(40, 30, 12, .6); translate: 0 -1px; }

/* Raetsel des Tages: Mini-Brett mit Siegel, Titel, Aktion. */
.pzh-daily {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 16px 12px 12px;
  font: inherit;
  color: inherit;
  text-align: left;
  border: 1px solid rgba(216, 177, 90, .16);
  background: linear-gradient(90deg, rgba(216, 177, 90, .06), rgba(9, 11, 15, .6) 60%);
  cursor: var(--mp-cur-pointer);
  transition: border-color .2s ease, translate .2s ease;
}
.pzh-daily:hover { border-color: rgba(216, 177, 90, .45); translate: 0 -1px; }
.pzh-daily-board { position: relative; flex-shrink: 0; width: 64px; }
.pzh-daily-board .pzb-frame { padding: 2px; border-radius: 4px; }
.pzh-daily-seal {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #1c1406;
  background: radial-gradient(circle at 35% 30%, #f6e1a4, #c89a3e 72%);
  box-shadow: 0 0 0 3px #0b0d12, 0 0 12px rgba(216, 177, 90, .4);
}
.pzh-daily.is-done .pzh-daily-seal { color: #07120f; background: radial-gradient(circle at 35% 30%, #8ef0e2, #2c8a82 72%); box-shadow: 0 0 0 3px #0b0d12; }
.pzh-daily-txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pzh-daily-title { font-family: var(--mp-serif); font-size: 15px; font-weight: 600; letter-spacing: .4px; color: var(--mp-bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pzh-daily-go { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--mp-gold-1); }
.pzh-daily.is-done .pzh-daily-go { color: var(--mp-teal-1); }
.pzh-daily-go svg { transition: translate .18s ease; }
.pzh-daily:hover .pzh-daily-go svg { translate: 4px 0; }

/* LOESEN — goldener Knopf wie "Gegen Computer" auf der Play-Seite. */
.pzh-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 18px 24px;
  font-family: var(--mp-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: #0c0e13;
  background: linear-gradient(180deg, #f3d88a 0%, #d8b15a 42%, #ad8230 100%);
  border: 1px solid #f0d27a;
  overflow: hidden;
  cursor: var(--mp-cur-pointer);
  box-shadow: 0 0 0 1px rgba(216, 177, 90, .25), 0 8px 34px rgba(216, 177, 90, .28), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform 220ms cubic-bezier(.22, .8, .24, 1), box-shadow 260ms ease;
}
.pzh-cta::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 38%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  pointer-events: none;
  animation: pzhSheen 7s linear infinite;
}
@keyframes pzhSheen { 0%, 82% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
.pzh-cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(216, 177, 90, .45), 0 12px 48px rgba(216, 177, 90, .48), inset 0 1px 0 rgba(255, 255, 255, .55); }
.pzh-cta:active { transform: translateY(0) scale(.985); transition-duration: 90ms; }
.pzh-cta .cta-ico, .pzh-cta .cta-arrow { display: grid; place-items: center; }
.pzh-cta .cta-arrow { transition: transform 200ms cubic-bezier(.22, .8, .24, 1); }
.pzh-cta:hover .cta-arrow { transform: translateX(4px); }
.pzh-cta .corner { position: absolute; width: 6px; height: 6px; border: 1px solid rgba(106, 79, 26, .8); }
.pzh-cta .corner.tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.pzh-cta .corner.br { bottom: 4px; right: 4px; border-left: none; border-top: none; }
.pzh-cta:focus-visible, .pzh-daily:focus-visible, .pzt:focus-visible, .pzd:focus-visible, .pzh-save:focus-visible { outline: 1px solid var(--mp-teal-1); outline-offset: 3px; }

/* ── Themen-Siegel: Figur in der Raute, Fortschritt laeuft am Rand ── */
.pzh-themes { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.pzt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 12px 4px 14px;
  font: inherit;
  color: inherit;
  border: 1px solid transparent;
  background: transparent;
  cursor: var(--mp-cur-pointer);
  transition: background .2s ease, border-color .2s ease;
}
.pzt:hover { background: rgba(216, 177, 90, .04); border-color: rgba(216, 177, 90, .12); }
.pzt-seal { position: relative; display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 4px; transition: translate .25s cubic-bezier(.22, .8, .24, 1); }
.pzt:hover .pzt-seal { translate: 0 -3px; }
.pzt-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pzt-track { fill: rgba(11, 13, 18, .9); stroke: rgba(216, 177, 90, .2); stroke-width: 1.5; }
.pzt-prog {
  fill: none;
  stroke: var(--mp-teal-2, #4dd0c4);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--p, 0));
  filter: drop-shadow(0 0 4px rgba(77, 208, 196, .45));
  transition: stroke-dashoffset .8s cubic-bezier(.22, .8, .24, 1);
}
.pzt.is-done .pzt-prog { stroke: var(--mp-gold-1); filter: drop-shadow(0 0 5px rgba(216, 177, 90, .55)); }
.pzt-art { position: relative; display: grid; place-items: center; width: 58%; height: 58%; }
.pzt-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .7)); }
.pzt-art img.is-crystal { width: 74%; height: 74%; filter: drop-shadow(0 0 8px rgba(122, 182, 236, .45)); }
.pzt-num { font-family: var(--mp-serif); font-size: 22px; font-weight: 700; letter-spacing: 1px; color: var(--mp-gold-1); text-shadow: 0 0 12px rgba(216, 177, 90, .35); }
.pzt-check {
  position: absolute;
  right: 2px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #07120f;
  background: radial-gradient(circle at 35% 30%, #8ef0e2, #2c8a82 72%);
  box-shadow: 0 0 0 3px #0b0d12;
}
.pzt-name { max-width: 100%; font-family: var(--mp-serif); font-size: 12.5px; font-weight: 600; letter-spacing: .2px; line-height: 1.2; color: var(--mp-bone); text-align: center; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; transition: color .2s ease; }
.pzt-count { font-size: 10.5px; }
.pzt.is-on .pzt-name { color: var(--mp-gold-1); }
.pzt.is-on .pzt-track { stroke: rgba(216, 177, 90, .55); }
.pzt-glide {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, 0);
  height: 2px;
  translate: var(--x, 0) calc(var(--y, 0) - 2px);
  background: linear-gradient(90deg, transparent, var(--mp-gold-1) 30% 70%, transparent);
  box-shadow: 0 0 10px rgba(216, 177, 90, .5);
  opacity: 0;
  pointer-events: none;
  transition: translate .42s cubic-bezier(.22, .8, .24, 1), width .42s cubic-bezier(.22, .8, .24, 1), opacity .25s ease;
}
.pzt-glide.is-on { opacity: 1; }

/* ── Rauten-Karte: alle Aufgaben, eine Reihe je Stufe ── */
.pzh-map {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  border: 1px solid rgba(216, 177, 90, .12);
  background: linear-gradient(180deg, rgba(13, 16, 22, .5), rgba(8, 9, 13, .7));
}
.pzm-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; padding: 10px 0; transition: opacity .3s ease; }
.pzm-row + .pzm-row { border-top: 1px solid rgba(216, 177, 90, .07); }
.pzm-row.is-empty { opacity: .35; }
.pzm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 3px; }
.pzm-band { font-family: var(--mp-serif); font-size: 13px; font-weight: 600; letter-spacing: .6px; color: var(--mp-bone); }
.pzm-count { font-size: 11px; }
.pzm-cells { display: flex; flex-wrap: wrap; gap: 2px; }
.pzd {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: var(--mp-cur-pointer);
  transition: opacity .3s ease;
}
.pzd i {
  position: relative;
  width: 11px;
  height: 11px;
  rotate: 45deg;
  border: 1px solid rgba(216, 177, 90, .32);
  background: #0d1016;
  transition: scale .18s cubic-bezier(.22, .8, .24, 1), border-color .18s ease, box-shadow .18s ease;
}
.pzd.is-solved i { border-color: #8ef0e2; background: linear-gradient(135deg, #8ef0e2, #2c8a82); box-shadow: 0 0 6px rgba(77, 208, 196, .35); }
.pzd.is-next i {
  border-color: #f3dca0;
  background: linear-gradient(135deg, #f6e1a4, #c89a3e);
  animation: pzdBreathe 3.4s ease-in-out infinite;
  animation-delay: var(--mp-t, 0ms);
}
@keyframes pzdBreathe { 0%, 100% { box-shadow: 0 0 4px rgba(216, 177, 90, .35); } 50% { box-shadow: 0 0 14px rgba(216, 177, 90, .8); } }
.pzd.is-ability i::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--mp-mark-effect, #7ab6ec);
  box-shadow: 0 0 5px rgba(122, 182, 236, .8);
}
.pzd:hover i, .pzd.is-peek i { scale: 1.45; border-color: var(--mp-bone); z-index: 2; }
.pzd.is-dim { opacity: .13; }
.pzd.is-dim:hover { opacity: .6; }

.pzh-peek {
  position: absolute;
  z-index: 20;
  width: 228px;
  padding: 10px;
  border: 1px solid rgba(216, 177, 90, .4);
  background: linear-gradient(180deg, #12151c, #08090d);
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .6);
  opacity: 0;
  translate: 0 6px;
  pointer-events: none;
  transition: opacity .16s ease, translate .2s cubic-bezier(.22, .8, .24, 1);
}
.pzh-peek.is-shown { opacity: 1; translate: 0 0; }
.pzh-peek[hidden] { display: none; }
.pzh-peek-meta { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pzh-peek-title { font-family: var(--mp-serif); font-size: 13.5px; font-weight: 600; letter-spacing: .4px; color: var(--mp-bone); padding-right: 24px; }
.pzh-peek .pzh-task { gap: 10px; }
.pzh-peek .pzh-king { width: 30px; height: 30px; }
.pzh-peek .pzh-turn { font-size: 10.5px; letter-spacing: 1.2px; }
.pzh-peek .pzh-goal { font-size: 13px; }
.pzh-peek .pzh-chip { padding: 3px 7px; font-size: 11px; }
.pzh-peek-seal {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #07120f;
  background: radial-gradient(circle at 35% 30%, #8ef0e2, #2c8a82 72%);
}
.pzh-peek-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #0c0e13;
  background: linear-gradient(180deg, #f3d88a 0%, #d8b15a 42%, #ad8230 100%);
  border: 1px solid #f0d27a;
}

/* ── Einzug beim Oeffnen (nicht bei stillen Neuaufbauten) ── */
.pzh.is-enter .pzh-hero,
.pzh.is-enter .pzh-section { animation: pzhIn .6s cubic-bezier(.2, .7, .2, 1) both; }
.pzh.is-enter .pzh-section { animation-delay: .18s; }
.pzh.is-enter .pzh-section + .pzh-section { animation-delay: .3s; }
.pzh.is-enter .pzh-board .pzb-piece { animation: pzhPiece .5s cubic-bezier(.2, .8, .3, 1.15) both; animation-delay: calc(.25s + var(--k, 0) * 70ms); }
.pzh.is-enter .pzl-fill { animation: pzhFill 1.1s cubic-bezier(.22, .8, .24, 1) .3s both; }
.pzh.is-enter .pzl-marker { animation: pzhMarker 1.1s cubic-bezier(.22, .8, .24, 1) .3s both, pzlBreathe 3.4s ease-in-out 1.4s infinite; }
.pzh.is-enter .pzt { animation: pzhIn .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.2s + var(--i, 0) * 45ms); }
.pzh.is-enter .pzt-prog { animation: pzhDraw 1s cubic-bezier(.22, .8, .24, 1) both; animation-delay: calc(.4s + var(--i, 0) * 45ms); }
.pzh.is-enter .pzd { animation: pzhCell .4s ease-out both; animation-delay: calc(.35s + var(--i, 0) * 7ms); }
@keyframes pzhIn { from { opacity: 0; translate: 0 12px; } }
@keyframes pzhPiece { from { opacity: 0; translate: 0 -14%; scale: .9; } }
@keyframes pzhFill { from { width: 0; } }
@keyframes pzhMarker { from { left: 0; } }
@keyframes pzhDraw { from { stroke-dashoffset: 100; } }
@keyframes pzhCell { from { opacity: 0; scale: .4; } }

/* ── Schmal (Container < 900px): eine Spalte ── */
@container (max-width: 899px) {
  .pzh-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pzh-stage { max-width: 470px; width: 100%; margin: 0 auto; }
  .pzh-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pzm-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pzm-head { justify-content: flex-start; }
}

/* ── Handy ── */
body.mp-phone .pzh-head { margin-bottom: 18px; }
body.mp-phone .pzh-hero { padding: 14px; gap: 18px; }
body.mp-phone .pzh-side { gap: 14px; }
body.mp-phone .pzh-cta { order: -1; }
body.mp-phone .pzh-rating { padding: 16px; }
body.mp-phone .pzh-rating-num { font-size: 46px; margin-bottom: 14px; }
body.mp-phone .pzh-section { margin-top: 28px; }
body.mp-phone .pzh-themes { gap: 4px; }
body.mp-phone .pzt { padding: 8px 0 10px; }
body.mp-phone .pzt-seal { width: 60px; height: 60px; }
/* Lange Namen (Kanonenschuss) duerfen am Handy knapp in die Luecke ragen statt mitten im Wort umzubrechen. */
body.mp-phone .pzt-name { font-size: 9.5px; letter-spacing: -.1px; white-space: nowrap; overflow-wrap: normal; }
body.mp-phone .pzh-map { padding: 10px 12px; }
body.mp-phone .pzd { width: 26px; height: 26px; }
body.mp-phone .pzd i { width: 12px; height: 12px; }
body.mp-phone .pzh-peek {
  position: fixed;
  left: 10px !important;
  right: 10px;
  top: auto !important;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  width: auto;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  pointer-events: auto;
}
body.mp-phone .pzh-peek[hidden] { display: none; }
body.mp-phone .pzh-peek .pzh-peek-meta { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .pzb-target, .pzl-marker, .pzd.is-next i, .pzh-cta::after { animation: none; }
  .pzt-glide { transition: none; }
}