/* ==========================================================================
   NextHit Bilderpuzzle – Frontend Styles
   Dark / cinematic / neon-red. Alles unter .nhpz-wrap gekapselt,
   damit es nicht mit dem Theme kollidiert.
   ========================================================================== */

.nhpz-wrap{
  --nhpz-bg:#0A0A0C;
  --nhpz-panel:#121317;
  --nhpz-cell:#16181f;
  --nhpz-cell-2:#1d2029;
  --nhpz-line:rgba(255,255,255,.08);
  --nhpz-red:#E50914;
  --nhpz-red-bright:#FF2A36;
  --nhpz-text:#F4F5F7;
  --nhpz-muted:#9aa0aa;
  --nhpz-glow:rgba(229,9,20,.55);
  --nhpz-radius:14px;
  --nhpz-font-display:'Archivo',ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --nhpz-font-body:'Manrope',ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;

  max-width:760px;
  margin:2rem auto;
  color:var(--nhpz-text);
  font-family:var(--nhpz-font-body);
  -webkit-font-smoothing:antialiased;
}
.nhpz-wrap *,
.nhpz-wrap *::before,
.nhpz-wrap *::after{ box-sizing:border-box; }

.nhpz-frame{
  position:relative;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(229,9,20,.14), transparent 55%),
    linear-gradient(180deg,#121317 0%,#0b0c10 100%);
  border:1px solid var(--nhpz-line);
  border-radius:22px;
  padding:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;
}
.nhpz-frame::before{ /* feines Scanline-/Grid-Overlay für Atmosphäre */
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
  opacity:.5;
  mask-image:radial-gradient(120% 120% at 50% 0%,#000 40%,transparent 90%);
}

/* ---------- HUD ---------- */
.nhpz-hud{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.nhpz-brand{
  font-family:var(--nhpz-font-display);
  font-weight:900; letter-spacing:.04em; font-size:1.25rem;
  display:flex; align-items:center; gap:.18em; line-height:1;
}
.nhpz-brand-next{ color:#fff; }
.nhpz-brand-hit{ color:#fff; }
.nhpz-brand-dot{
  width:.55em; height:.55em; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--nhpz-red-bright),var(--nhpz-red) 60%,#5e060c);
  box-shadow:0 0 10px var(--nhpz-glow),0 0 22px var(--nhpz-glow);
  transform:translateY(.02em);
}
.nhpz-brand-sub{
  font-family:var(--nhpz-font-body); font-weight:700; font-size:.62rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--nhpz-red-bright);
  margin-left:.5em; align-self:center;
}
.nhpz-stats{ display:flex; gap:10px; }
.nhpz-stat{
  background:rgba(255,255,255,.03);
  border:1px solid var(--nhpz-line);
  border-radius:10px; padding:6px 12px; text-align:center; min-width:62px;
}
.nhpz-stat-label{
  display:block; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--nhpz-muted); margin-bottom:2px;
}
.nhpz-stat-value{ font-family:var(--nhpz-font-display); font-weight:800; font-size:1.15rem; }
.nhpz-stat-best{ color:var(--nhpz-red-bright); }

/* ---------- Status ---------- */
.nhpz-status{
  position:relative; z-index:2; text-align:center;
  font-weight:700; letter-spacing:.02em; min-height:1.4em; margin:4px 0 12px;
  color:var(--nhpz-text); transition:color .2s ease;
}
.nhpz-status.is-watch{ color:#ffd36b; }
.nhpz-status.is-input{ color:var(--nhpz-red-bright); }

/* ---------- Schwierigkeit ---------- */
.nhpz-difficulty{
  position:relative; z-index:2;
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:14px;
}
.nhpz-diff-btn{
  font-family:var(--nhpz-font-body); font-weight:700; font-size:.78rem;
  color:var(--nhpz-muted); background:rgba(255,255,255,.03);
  border:1px solid var(--nhpz-line); border-radius:999px;
  padding:7px 14px; cursor:pointer; transition:all .18s ease;
}
.nhpz-diff-btn:hover{ color:#fff; border-color:rgba(255,255,255,.25); }
.nhpz-diff-btn.is-active{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--nhpz-red-bright),var(--nhpz-red));
  box-shadow:0 4px 16px var(--nhpz-glow);
}

/* ---------- Spielfeld ---------- */
.nhpz-board-shell{ position:relative; z-index:2; }
.nhpz-board{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  aspect-ratio:1/1;
  max-width:540px;
  margin-inline:auto;
}
.nhpz-cell{
  position:relative;
  appearance:none; border:1px solid var(--nhpz-line);
  background:linear-gradient(180deg,var(--nhpz-cell-2),var(--nhpz-cell));
  border-radius:var(--nhpz-radius);
  cursor:pointer; padding:0;
  transition:transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  overflow:hidden;
}
.nhpz-cell::after{ /* dezenter innerer Schein */
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  pointer-events:none;
}
.nhpz-cell-logo{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.7); transition:opacity .05s ease, transform .05s ease;
}
.nhpz-cell-img{ max-width:62%; max-height:62%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 0 6px rgba(0,0,0,.5)); }

.nhpz-cell-target{
  width:42%; height:42%; border-radius:50%;
  border:3px solid #fff;
  position:relative;
}
.nhpz-cell-target::before,
.nhpz-cell-target::after{
  content:""; position:absolute; background:#fff;
}
.nhpz-cell-target::before{ left:50%; top:-30%; width:2px; height:160%; transform:translateX(-50%); }
.nhpz-cell-target::after{ top:50%; left:-30%; height:2px; width:160%; transform:translateY(-50%); }

/* Hover (nur wenn Eingabe erlaubt) */
.nhpz-wrap.is-input .nhpz-cell:hover{
  border-color:rgba(255,255,255,.25);
  transform:translateY(-2px);
}

/* Aufleuchten in der Sequenz / bei Klick */
.nhpz-cell.is-lit{
  background:linear-gradient(135deg,var(--nhpz-red-bright),var(--nhpz-red));
  border-color:var(--nhpz-red-bright);
  box-shadow:0 0 18px var(--nhpz-glow),0 0 38px var(--nhpz-glow),inset 0 0 12px rgba(255,255,255,.25);
}
.nhpz-cell.is-lit .nhpz-cell-logo{ opacity:1; transform:scale(1); }

/* Korrekter Klick (kurzes Pulsen) */
.nhpz-cell.is-correct{ animation:nhpz-correct .32s ease; }
@keyframes nhpz-correct{
  0%{ box-shadow:0 0 0 rgba(229,9,20,0); }
  40%{ box-shadow:0 0 20px var(--nhpz-glow),0 0 40px var(--nhpz-glow); transform:scale(1.04); }
  100%{ box-shadow:0 0 0 rgba(229,9,20,0); transform:scale(1); }
}

/* Fehler – rotes Blinken */
.nhpz-cell.is-wrong{ animation:nhpz-wrong .5s ease; }
@keyframes nhpz-wrong{
  0%,100%{ background:linear-gradient(180deg,var(--nhpz-cell-2),var(--nhpz-cell)); }
  20%,60%{ background:linear-gradient(135deg,#ff4d4d,#c40811); box-shadow:0 0 24px rgba(255,60,60,.8); }
  40%,80%{ background:linear-gradient(180deg,var(--nhpz-cell-2),var(--nhpz-cell)); }
}
.nhpz-wrap.is-shake .nhpz-board{ animation:nhpz-shake .4s ease; }
@keyframes nhpz-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(7px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(3px); }
}

/* ---------- Overlay ---------- */
.nhpz-overlay{
  position:absolute; inset:0; z-index:5;
  display:flex;
  overflow-y:auto; overscroll-behavior:contain;
  background:radial-gradient(100% 100% at 50% 0%,rgba(10,10,12,.86),rgba(10,10,12,.96));
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border-radius:var(--nhpz-radius);
  opacity:1; transition:opacity .25s ease;
}
.nhpz-overlay.is-hidden{ opacity:0; pointer-events:none; }
.nhpz-overlay-inner{ margin:auto; padding:20px; max-width:94%; width:100%; text-align:center; }
.nhpz-overlay-title{
  font-family:var(--nhpz-font-display); font-weight:900; font-size:1.7rem;
  letter-spacing:-.01em; margin-bottom:10px; line-height:1.1;
}
.nhpz-overlay-title .nhpz-big{ display:block; font-size:2.6rem; color:var(--nhpz-red-bright); text-shadow:0 0 24px var(--nhpz-glow); }
.nhpz-overlay-text{ color:var(--nhpz-muted); font-size:.95rem; line-height:1.6; margin-bottom:18px; }
.nhpz-overlay.is-record .nhpz-overlay-title{ color:#ffd36b; text-shadow:0 0 26px rgba(255,200,80,.55); }

/* ---------- Buttons ---------- */
.nhpz-btn{
  font-family:var(--nhpz-font-display); font-weight:800; font-size:1rem;
  border:0; border-radius:999px; padding:14px 30px; cursor:pointer;
  color:#fff; background:linear-gradient(135deg,var(--nhpz-red-bright),var(--nhpz-red));
  box-shadow:0 6px 22px var(--nhpz-glow);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.nhpz-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 10px 30px var(--nhpz-glow); }
.nhpz-btn:active{ transform:translateY(0); }

/* ---------- Footer ---------- */
.nhpz-footer{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; margin-top:14px;
}
.nhpz-sound-toggle{
  font-family:var(--nhpz-font-body); font-weight:700; font-size:.8rem;
  color:var(--nhpz-muted); background:rgba(255,255,255,.03);
  border:1px solid var(--nhpz-line); border-radius:999px; padding:7px 14px; cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.nhpz-sound-toggle:hover{ color:#fff; border-color:rgba(255,255,255,.25); }
.nhpz-sound-toggle .nhpz-sound-off{ display:none; }
.nhpz-sound-toggle:not(.is-on) .nhpz-sound-on{ display:none; }
.nhpz-sound-toggle:not(.is-on) .nhpz-sound-off{ display:inline; }
.nhpz-credit{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--nhpz-muted);
}

/* ---------- Während Anzeige: Klicks sperren ---------- */
.nhpz-wrap:not(.is-input) .nhpz-cell{ cursor:default; }

/* ---------- Responsive ---------- */
@media (max-width:480px){
  .nhpz-wrap{ margin:1rem auto; }
  .nhpz-frame{ padding:14px; border-radius:18px; }
  .nhpz-board{ gap:7px; }
  .nhpz-cell{ border-radius:11px; }
  .nhpz-brand{ font-size:1.05rem; }
  .nhpz-stat{ min-width:54px; padding:5px 9px; }
  .nhpz-overlay-title{ font-size:1.4rem; }
  .nhpz-overlay-title .nhpz-big{ font-size:2.1rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .nhpz-wrap *{ animation:none !important; transition:none !important; }
}

/* ==========================================================================
   Stufe 2 – Highscore-Formular (im Overlay) + Rangliste
   ========================================================================== */

/* ---------- Eintrag-Formular ---------- */
.nhpz-form{
  display:flex; flex-direction:column; gap:10px;
  width:100%; max-width:340px; margin:0 auto 18px;
  text-align:left;
}
.nhpz-input{
  width:100%;
  font-family:var(--nhpz-font-body); font-size:.95rem; color:var(--nhpz-text);
  background:rgba(255,255,255,.04);
  border:1px solid var(--nhpz-line); border-radius:12px;
  padding:12px 14px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.nhpz-input::placeholder{ color:var(--nhpz-muted); opacity:.85; }
.nhpz-input:focus{
  outline:none; background:rgba(255,255,255,.06);
  border-color:var(--nhpz-red-bright);
  box-shadow:0 0 0 3px rgba(229,9,20,.18);
}
/* Honeypot: für Menschen unsichtbar */
.nhpz-hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; opacity:0; pointer-events:none;
}
.nhpz-form-actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:4px;
}
.nhpz-btn-ghost{
  background:rgba(255,255,255,.05) !important; color:var(--nhpz-muted) !important;
  box-shadow:none !important; border:1px solid var(--nhpz-line) !important;
}
.nhpz-btn-ghost:hover{ color:#fff !important; }
.nhpz-form-msg{
  min-height:1.2em; text-align:center; font-size:.9rem; font-weight:600;
  color:var(--nhpz-muted); margin-top:2px;
}

/* ==========================================================================
   Rangliste (Shortcode [nexthit_puzzle_ranking]) – eigenständig gekapselt
   ========================================================================== */
.nhpz-ranking{
  --nhpz-bg:#0A0A0C;
  --nhpz-panel:#121317;
  --nhpz-line:rgba(255,255,255,.08);
  --nhpz-red:#E50914;
  --nhpz-red-bright:#FF2A36;
  --nhpz-text:#F4F5F7;
  --nhpz-muted:#9aa0aa;
  --nhpz-glow:rgba(229,9,20,.45);
  --nhpz-font-display:'Archivo',ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --nhpz-font-body:'Manrope',ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;

  max-width:760px; margin:2rem auto; color:var(--nhpz-text);
  font-family:var(--nhpz-font-body);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(229,9,20,.12), transparent 55%),
    linear-gradient(180deg,#121317 0%,#0b0c10 100%);
  border:1px solid var(--nhpz-line); border-radius:22px;
  padding:22px 20px; box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.nhpz-ranking *,
.nhpz-ranking *::before,
.nhpz-ranking *::after{ box-sizing:border-box; }

.nhpz-rank-head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:16px;
}
.nhpz-rank-brand{
  font-family:var(--nhpz-font-display); font-weight:900; letter-spacing:.04em; font-size:1.15rem;
}
.nhpz-rank-brand-next{ color:var(--nhpz-red-bright); }
.nhpz-rank-title{
  font-family:var(--nhpz-font-display); font-weight:700; color:var(--nhpz-muted);
  text-transform:uppercase; letter-spacing:.14em; font-size:.8rem;
}

/* Tabs */
.nhpz-rank-tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;
}
.nhpz-rank-tab{
  font-family:var(--nhpz-font-body); font-weight:700; font-size:.85rem;
  color:var(--nhpz-muted); background:rgba(255,255,255,.03);
  border:1px solid var(--nhpz-line); border-radius:999px; padding:8px 16px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.nhpz-rank-tab:hover{ color:#fff; border-color:rgba(255,255,255,.25); }
.nhpz-rank-tab.is-active{
  color:#fff; background:linear-gradient(135deg,var(--nhpz-red-bright),var(--nhpz-red));
  border-color:transparent; box-shadow:0 6px 18px var(--nhpz-glow);
}

/* Podium */
.nhpz-podium{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px;
}
.nhpz-podium-slot{
  position:relative; text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--nhpz-line); border-radius:16px; padding:16px 10px 14px;
}
.nhpz-podium-slot.nhpz-gold{
  border-color:rgba(255,200,80,.55);
  box-shadow:0 0 26px rgba(255,200,80,.18) inset, 0 10px 28px rgba(0,0,0,.35);
  transform:translateY(-6px);
}
.nhpz-podium-slot.nhpz-silver{ border-color:rgba(208,214,228,.45); }
.nhpz-podium-slot.nhpz-bronze{ border-color:rgba(205,127,50,.5); }
.nhpz-podium-medal{ font-size:1.7rem; line-height:1; margin-bottom:8px; }
.nhpz-podium-name{
  font-family:var(--nhpz-font-display); font-weight:800; font-size:1rem;
  word-break:break-word; line-height:1.2;
}
.nhpz-podium-meta{ font-size:.72rem; color:var(--nhpz-muted); margin-top:3px; min-height:1em; }
.nhpz-podium-score{
  font-family:var(--nhpz-font-display); font-weight:900; font-size:1.5rem;
  margin-top:8px; color:#fff;
}
.nhpz-gold .nhpz-podium-score{ color:#ffd36b; text-shadow:0 0 18px rgba(255,200,80,.45); }

/* Liste ab Platz 4 */
.nhpz-rank-list{ list-style:none; margin:0; padding:0; }
.nhpz-rank-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:12px;
  border:1px solid transparent; border-bottom:1px solid var(--nhpz-line);
}
.nhpz-rank-item:nth-child(odd){ background:rgba(255,255,255,.02); }
.nhpz-rank-pos{
  flex:0 0 auto; min-width:28px; text-align:center;
  font-family:var(--nhpz-font-display); font-weight:800; color:var(--nhpz-muted);
}
.nhpz-rank-name{ flex:1 1 auto; font-weight:700; word-break:break-word; }
.nhpz-rank-company{ color:var(--nhpz-muted); font-weight:500; font-size:.85em; }
.nhpz-rank-web{ color:var(--nhpz-red-bright); text-decoration:none; font-weight:800; }
.nhpz-rank-web:hover{ filter:brightness(1.2); }
.nhpz-rank-score{
  flex:0 0 auto; font-family:var(--nhpz-font-display); font-weight:900; font-size:1.05rem; color:#fff;
}
.nhpz-rank-empty{
  text-align:center; color:var(--nhpz-muted); padding:26px 10px; font-size:.95rem;
}

@media (max-width:480px){
  .nhpz-ranking{ padding:16px 13px; border-radius:18px; }
  .nhpz-podium{ gap:8px; }
  .nhpz-podium-slot{ padding:12px 6px 11px; }
  .nhpz-podium-name{ font-size:.85rem; }
  .nhpz-podium-score{ font-size:1.2rem; }
  .nhpz-podium-medal{ font-size:1.4rem; }
}

/* ==========================================================================
   Stufe 4 – Hall of Fame, Live-Ticker, Social-Sharing
   ========================================================================== */

/* ---------- Social-Sharing (im Overlay) ---------- */
.nhpz-share{ margin:6px auto 16px; max-width:340px; }
.nhpz-share-label{ font-size:.8rem; color:var(--nhpz-muted); text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px; }
.nhpz-share-buttons{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.nhpz-share-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--nhpz-font-body); font-weight:700; font-size:.85rem;
  color:#fff; text-decoration:none; cursor:pointer;
  border:0; border-radius:999px; padding:9px 16px; line-height:1;
  transition:transform .15s ease, filter .2s ease;
}
.nhpz-share-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.nhpz-share-btn.is-wa{ background:#25D366; }
.nhpz-share-btn.is-x{ background:#111; border:1px solid rgba(255,255,255,.25); }
.nhpz-share-btn.is-fb{ background:#1877F2; }
.nhpz-share-btn.is-copy{ background:rgba(255,255,255,.08); border:1px solid var(--nhpz-line); }
.nhpz-share-btn.is-native{ background:linear-gradient(135deg,var(--nhpz-red-bright),var(--nhpz-red)); }

/* ---------- Hall of Fame ---------- */
.nhpz-hof{
  --nhpz-red:#E50914; --nhpz-red-bright:#FF2A36; --nhpz-text:#F4F5F7; --nhpz-muted:#9aa0aa;
  --nhpz-line:rgba(255,255,255,.08); --nhpz-glow:rgba(229,9,20,.45);
  --nhpz-font-display:'Archivo',ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --nhpz-font-body:'Manrope',ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --gold:#ffd36b;
  max-width:760px; margin:2rem auto; color:var(--nhpz-text); font-family:var(--nhpz-font-body);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,200,80,.10), transparent 55%),
    linear-gradient(180deg,#141416 0%,#0b0c10 100%);
  border:1px solid var(--nhpz-line); border-radius:22px; padding:22px 20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.nhpz-hof *,.nhpz-hof *::before,.nhpz-hof *::after{ box-sizing:border-box; }
.nhpz-hof-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.nhpz-hof-title{
  font-family:var(--nhpz-font-display); font-weight:900; letter-spacing:.04em; font-size:1.2rem;
  background:linear-gradient(90deg,var(--gold),#fff7e0); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nhpz-hof-top{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.nhpz-hof-card{
  position:relative; text-align:center; padding:22px 16px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--nhpz-line); border-radius:18px;
}
.nhpz-hof-card.is-overall{ border-color:rgba(255,200,80,.55); box-shadow:0 0 32px rgba(255,200,80,.16) inset; }
.nhpz-hof-card.is-monthly{ border-color:rgba(229,9,20,.45); box-shadow:0 0 32px rgba(229,9,20,.12) inset; }
.nhpz-hof-icon{ font-size:2.1rem; line-height:1; }
.nhpz-hof-caption{ font-family:var(--nhpz-font-display); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--nhpz-muted); margin:6px 0 10px; }
.nhpz-hof-name{ font-family:var(--nhpz-font-display); font-weight:800; font-size:1.15rem; word-break:break-word; }
.nhpz-hof-company{ font-size:.78rem; color:var(--nhpz-muted); margin-top:2px; }
.nhpz-hof-company a{ color:var(--nhpz-red-bright); text-decoration:none; font-weight:800; }
.nhpz-hof-score{ font-family:var(--nhpz-font-display); font-weight:900; font-size:2.1rem; margin-top:8px; color:#fff; }
.is-overall .nhpz-hof-score{ color:var(--gold); text-shadow:0 0 22px rgba(255,200,80,.5); }
.nhpz-hof-badge{ display:inline-block; margin-top:8px; font-size:.72rem; font-weight:700; color:var(--nhpz-muted); border:1px solid var(--nhpz-line); border-radius:999px; padding:3px 12px; }
.nhpz-hof-empty{ color:var(--nhpz-muted); padding:14px 0; }
.nhpz-hof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.nhpz-hof-mini{ text-align:center; background:rgba(255,255,255,.03); border:1px solid var(--nhpz-line); border-radius:14px; padding:12px 8px; }
.nhpz-hof-mini-label{ font-family:var(--nhpz-font-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; color:var(--nhpz-muted); }
.nhpz-hof-mini-name{ font-weight:700; margin:6px 0 2px; word-break:break-word; font-size:.9rem; }
.nhpz-hof-mini-empty{ color:var(--nhpz-muted); }
.nhpz-hof-mini-score{ font-family:var(--nhpz-font-display); font-weight:900; font-size:1.2rem; color:#fff; }

@media (max-width:560px){
  .nhpz-hof-top{ grid-template-columns:1fr; }
  .nhpz-hof-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Live-Ticker ---------- */
.nhpz-ticker{
  --nhpz-red:#E50914; --nhpz-red-bright:#FF2A36; --nhpz-text:#F4F5F7; --nhpz-muted:#9aa0aa;
  --nhpz-line:rgba(255,255,255,.08);
  --nhpz-font-display:'Archivo',ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --nhpz-font-body:'Manrope',ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  max-width:760px; margin:1.2rem auto; color:var(--nhpz-text); font-family:var(--nhpz-font-body);
  display:flex; align-items:stretch; gap:0; overflow:hidden;
  background:linear-gradient(180deg,#141416,#0b0c10);
  border:1px solid var(--nhpz-line); border-radius:999px;
}
.nhpz-ticker *,.nhpz-ticker *::before,.nhpz-ticker *::after{ box-sizing:border-box; }
.nhpz-ticker-label{
  display:flex; align-items:center; gap:6px; flex:0 0 auto;
  font-family:var(--nhpz-font-display); font-weight:900; letter-spacing:.1em; font-size:.78rem; color:#fff;
  background:linear-gradient(135deg,var(--nhpz-red-bright),var(--nhpz-red));
  padding:0 16px; position:relative; z-index:2;
}
.nhpz-ticker-label::before{ content:""; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff; animation:nhpz-blink 1.2s infinite; }
@keyframes nhpz-blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
.nhpz-ticker-viewport{ position:relative; flex:1 1 auto; overflow:hidden; }
.nhpz-ticker-track{ display:inline-flex; align-items:center; white-space:nowrap; padding:10px 0; will-change:transform; animation:nhpz-marquee 32s linear infinite; }
.nhpz-ticker:hover .nhpz-ticker-track{ animation-play-state:paused; }
@keyframes nhpz-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.nhpz-ticker-item{ display:inline-flex; align-items:center; gap:8px; padding:0 22px; border-right:1px solid var(--nhpz-line); }
.nhpz-ticker-fire{ font-size:.95rem; }
.nhpz-ticker-name{ font-weight:800; }
.nhpz-ticker-score{ font-family:var(--nhpz-font-display); font-weight:900; color:var(--nhpz-red-bright); }
.nhpz-ticker-diff{ font-size:.74rem; color:var(--nhpz-muted); text-transform:uppercase; letter-spacing:.06em; }
.nhpz-ticker-empty{ color:var(--nhpz-muted); }

@media (prefers-reduced-motion:reduce){
  .nhpz-ticker-track{ animation:none; }
}

.nhpz-share-hint{ margin-top:8px; font-size:.8rem; color:var(--nhpz-muted); min-height:1em; }

/* Stufe 5 – Champion der Woche + 3-Spalten-Podest in der Hall of Fame */
.nhpz-hof-top-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.nhpz-hof-card.is-weekly{ border-color:rgba(229,9,20,.5); box-shadow:0 0 32px rgba(229,9,20,.12) inset; }
@media (max-width:760px){ .nhpz-hof-top-3{ grid-template-columns:1fr; } }

/* ==========================================================================
   Spielregeln-Button + Modal
   ========================================================================== */
.nhpz-rules-btn{
  appearance:none; cursor:pointer;
  font-family:var(--nhpz-font-body); font-weight:700; font-size:.82rem; color:var(--nhpz-muted);
  background:rgba(255,255,255,.05); border:1px solid var(--nhpz-line); border-radius:999px;
  padding:7px 14px; transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.nhpz-rules-btn:hover{ color:#fff; border-color:var(--nhpz-red-bright); }

.nhpz-modal{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.nhpz-modal[hidden]{ display:none; }
.nhpz-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(3px); }
.nhpz-modal-inner{
  position:relative; z-index:1;
  width:100%; max-width:560px; max-height:85vh; overflow-y:auto;
  color:var(--nhpz-text); font-family:var(--nhpz-font-body);
  background:linear-gradient(180deg,#141416 0%,#0b0c10 100%);
  border:1px solid var(--nhpz-line); border-radius:20px;
  padding:26px 24px; box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.nhpz-modal-x{
  position:absolute; top:12px; right:14px; appearance:none; cursor:pointer;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--nhpz-line);
  background:rgba(255,255,255,.05); color:var(--nhpz-text); font-size:1.3rem; line-height:1;
}
.nhpz-modal-x:hover{ border-color:var(--nhpz-red-bright); color:#fff; }
.nhpz-modal-title{
  font-family:var(--nhpz-font-display); font-weight:900; font-size:1.4rem; margin:0 0 14px; color:#fff;
}
.nhpz-modal-body h4{
  font-family:var(--nhpz-font-display); font-weight:800; font-size:1rem; color:#fff;
  margin:18px 0 6px;
}
.nhpz-modal-body p{ margin:0 0 8px; color:var(--nhpz-text); line-height:1.55; font-size:.95rem; }
.nhpz-modal-body ul,.nhpz-modal-body ol{ margin:0 0 8px; padding-left:20px; }
.nhpz-modal-body li{ margin:4px 0; line-height:1.5; font-size:.95rem; color:var(--nhpz-text); }
.nhpz-modal-body strong{ color:var(--nhpz-red-bright); }
.nhpz-modal-ok{ margin-top:18px; width:100%; }

/* Tabelle der Schwierigkeiten im Regel-Fenster (Werte aus den Einstellungen) */
.nhpz-modal-table-wrap{ overflow-x:auto; margin:8px 0 6px; -webkit-overflow-scrolling:touch; }
.nhpz-modal-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.nhpz-modal-table th, .nhpz-modal-table td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--nhpz-line); white-space:nowrap; }
.nhpz-modal-table thead th{ color:var(--nhpz-muted); text-transform:uppercase; letter-spacing:.05em; font-size:.7rem; }
.nhpz-modal-table tbody tr:nth-child(odd){ background:rgba(255,255,255,.02); }
.nhpz-modal-table strong{ color:#fff; }
.nhpz-modal-legend{ color:var(--nhpz-muted); font-size:.8rem; line-height:1.5; margin-top:4px; }

/* Ergebnis-Bild teilen/speichern */
.nhpz-share-btn.is-img{ background:rgba(255,255,255,.08); border:1px solid var(--nhpz-line); }
.nhpz-share-btn.is-shareimg{ background:linear-gradient(135deg,var(--nhpz-red-bright),var(--nhpz-red)); }

/* ============================================================
   Schiebe-Puzzle – Brett & Kacheln
   ============================================================ */
.nhpz-board.nhpz-puzzle-board{
	position:relative;
	display:block;
	width:100%;
	max-width:540px;
	margin:0 auto;
	aspect-ratio:1 / 1;
	background:#0b0c10;
	border:1px solid var(--nhpz-line,rgba(255,255,255,.10));
	border-radius:16px;
	overflow:hidden;
	touch-action:manipulation;
}
.nhpz-tile{
	position:absolute;
	margin:0;
	padding:0;
	border:0;
	box-sizing:border-box;
	background-repeat:no-repeat;
	background-color:#15171c;
	cursor:pointer;
	border-radius:8px;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), inset 0 0 22px rgba(0,0,0,.25);
	transition:left .12s ease, top .12s ease, box-shadow .12s ease;
	will-change:left,top;
}
.nhpz-tile:hover{ box-shadow:inset 0 0 0 2px var(--nhpz-red,#E50914); }
.nhpz-tile.is-fallback{
	display:flex; align-items:center; justify-content:center;
	color:#fff; font-family:Archivo,system-ui,sans-serif; font-weight:800;
	font-size:clamp(14px,6vw,38px); text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.nhpz-tile-fill{ pointer-events:none; box-shadow:none; }
.nhpz-puzzle-board.is-preview .nhpz-tile{ cursor:default; }
.nhpz-puzzle-board.is-preview .nhpz-tile:hover{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.45); }

/* ===== Motiv-Auswahl im Startbildschirm ===== */
.nhpz-picker{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	margin:6px 0 14px;
	width:100%;
}
.nhpz-picker-label{
	font-weight:700;
	font-size:14px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:#e6e6e6;
	opacity:.85;
}
.nhpz-picker-preview{
	width:min(220px,60%);
	aspect-ratio:1/1;
	object-fit:cover;
	border-radius:14px;
	border:2px solid rgba(229,9,20,.55);
	box-shadow:0 8px 28px rgba(0,0,0,.45);
	background:#0e0f12;
	display:block;
}
.nhpz-picker-thumbs{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px;
	max-width:340px;
}
.nhpz-thumb{
	width:54px;
	height:54px;
	border-radius:10px !important;
	border:2px solid rgba(255,255,255,.18) !important;
	padding:0 !important;
	margin:0 !important;
	cursor:pointer;
	background-color:#0e0f12 !important;
	background-repeat:no-repeat !important;
	box-shadow:none !important;
	transition:border-color .15s ease, transform .15s ease;
	-webkit-appearance:none !important;
	appearance:none !important;
}
.nhpz-thumb:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.4) !important; }
.nhpz-thumb.is-active{
	border-color:#E50914 !important;
	box-shadow:0 0 0 2px rgba(229,9,20,.45) !important;
}

/* ---------- Spielmusik-Auswahl ---------- */
.nhpz-music{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:2px 0 16px;
}
.nhpz-music-label{
  font-family:var(--nhpz-font-body); font-weight:700; font-size:.82rem;
  color:var(--nhpz-muted); letter-spacing:.02em;
}
.nhpz-music-select{
  font-family:var(--nhpz-font-body); font-weight:700; font-size:.85rem;
  color:var(--nhpz-text); background:rgba(255,255,255,.05);
  border:1px solid var(--nhpz-line); border-radius:999px;
  padding:7px 34px 7px 14px; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%239aa0aa' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px;
  transition:color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.nhpz-music-select:hover{ color:#fff; border-color:rgba(255,255,255,.25); }
.nhpz-music-select.is-playing{ color:#fff; border-color:var(--nhpz-red-bright); box-shadow:0 0 0 1px var(--nhpz-red-bright) inset; }
.nhpz-music-select option{ color:#111; background:#fff; }