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

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

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

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

/* ---------- Status ---------- */
.nhmc-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(--nhmc-text); transition:color .2s ease;
}
.nhmc-status.is-watch{ color:#ffd36b; }
.nhmc-status.is-input{ color:var(--nhmc-red-bright); }

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

/* ---------- Spielfeld ---------- */
.nhmc-board-shell{ position:relative; z-index:2; }
.nhmc-board{
  display:grid;
  grid-template-columns:repeat(var(--nhmc-cols,5),1fr);
  gap:10px;
  aspect-ratio:1/1;
  max-width:540px;
  margin-inline:auto;
}
.nhmc-cell{
  position:relative;
  appearance:none; border:1px solid var(--nhmc-line);
  background:linear-gradient(180deg,var(--nhmc-cell-2),var(--nhmc-cell));
  border-radius:var(--nhmc-radius);
  cursor:pointer; padding:0;
  transition:transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  overflow:hidden;
}
.nhmc-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;
}
.nhmc-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;
}
.nhmc-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)); }

.nhmc-cell-target{
  display:none;
}

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

/* Aufleuchten in der Sequenz / bei Klick – komplette Zelle leuchtet weiß */
.nhmc-cell.is-lit{
  background:#ffffff;
  border-color:#ffffff;
  box-shadow:0 0 18px rgba(255,255,255,.65),0 0 42px rgba(255,255,255,.45),inset 0 0 12px rgba(255,255,255,.5);
}
.nhmc-cell.is-lit .nhmc-cell-logo{ opacity:1; transform:scale(1); }

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

/* Fehler – rotes Blinken */
.nhmc-cell.is-wrong{ animation:nhmc-wrong .5s ease; }
@keyframes nhmc-wrong{
  0%,100%{ background:linear-gradient(180deg,var(--nhmc-cell-2),var(--nhmc-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(--nhmc-cell-2),var(--nhmc-cell)); }
}
.nhmc-wrap.is-shake .nhmc-board{ animation:nhmc-shake .4s ease; }
@keyframes nhmc-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(7px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(3px); }
}

/* ---------- Overlay ---------- */
.nhmc-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(--nhmc-radius);
  opacity:1; transition:opacity .25s ease;
}
.nhmc-overlay.is-hidden{ opacity:0; pointer-events:none; }
.nhmc-overlay-inner{ margin:auto; padding:20px; max-width:94%; width:100%; text-align:center; }
.nhmc-overlay-title{
  font-family:var(--nhmc-font-display); font-weight:900; font-size:1.7rem;
  letter-spacing:-.01em; margin-bottom:10px; line-height:1.1;
}
.nhmc-overlay-title .nhmc-big{ display:block; font-size:2.6rem; color:var(--nhmc-red-bright); text-shadow:0 0 24px var(--nhmc-glow); }
.nhmc-overlay-text{ color:var(--nhmc-muted); font-size:.95rem; line-height:1.6; margin-bottom:18px; }
.nhmc-overlay.is-record .nhmc-overlay-title{ color:#ffd36b; text-shadow:0 0 26px rgba(255,200,80,.55); }

/* ---------- Buttons ---------- */
.nhmc-btn{
  font-family:var(--nhmc-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(--nhmc-red-bright),var(--nhmc-red));
  box-shadow:0 6px 22px var(--nhmc-glow);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.nhmc-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 10px 30px var(--nhmc-glow); }
.nhmc-btn:active{ transform:translateY(0); }

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

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

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

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

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

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

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

  max-width:760px; margin:2rem auto; color:var(--nhmc-text);
  font-family:var(--nhmc-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(--nhmc-line); border-radius:22px;
  padding:22px 20px; box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.nhmc-ranking *,
.nhmc-ranking *::before,
.nhmc-ranking *::after{ box-sizing:border-box; }

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

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

/* Podium */
.nhmc-podium{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px;
}
.nhmc-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(--nhmc-line); border-radius:16px; padding:16px 10px 14px;
}
.nhmc-podium-slot.nhmc-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);
}
.nhmc-podium-slot.nhmc-silver{ border-color:rgba(208,214,228,.45); }
.nhmc-podium-slot.nhmc-bronze{ border-color:rgba(205,127,50,.5); }
.nhmc-podium-medal{ font-size:1.7rem; line-height:1; margin-bottom:8px; }
.nhmc-podium-name{
  font-family:var(--nhmc-font-display); font-weight:800; font-size:1rem;
  word-break:break-word; line-height:1.2;
}
.nhmc-podium-meta{ font-size:.72rem; color:var(--nhmc-muted); margin-top:3px; min-height:1em; }
.nhmc-podium-score{
  font-family:var(--nhmc-font-display); font-weight:900; font-size:1.5rem;
  margin-top:8px; color:#fff;
}
.nhmc-gold .nhmc-podium-score{ color:#ffd36b; text-shadow:0 0 18px rgba(255,200,80,.45); }

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

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

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

/* ---------- Social-Sharing (im Overlay) ---------- */
.nhmc-share{ margin:6px auto 16px; max-width:340px; }
.nhmc-share-label{ font-size:.8rem; color:var(--nhmc-muted); text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px; }
.nhmc-share-buttons{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.nhmc-share-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--nhmc-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;
}
.nhmc-share-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.nhmc-share-btn.is-wa{ background:#25D366; }
.nhmc-share-btn.is-x{ background:#111; border:1px solid rgba(255,255,255,.25); }
.nhmc-share-btn.is-fb{ background:#1877F2; }
.nhmc-share-btn.is-copy{ background:rgba(255,255,255,.08); border:1px solid var(--nhmc-line); }
.nhmc-share-btn.is-native{ background:linear-gradient(135deg,var(--nhmc-red-bright),var(--nhmc-red)); }

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

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

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

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

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

/* Stufe 5 – Champion der Woche + 3-Spalten-Podest in der Hall of Fame */
.nhmc-hof-top-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.nhmc-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){ .nhmc-hof-top-3{ grid-template-columns:1fr; } }

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

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

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

/* ==========================================================================
   Robuste Overrides – verhindern, dass Theme/Page-Builder/CDN die Spielfelder
   rund (border-radius) oder farbig überschreiben. Hohe Spezifität + !important.
   ========================================================================== */
.nhmc-wrap .nhmc-board .nhmc-cell{
  border-radius:8px !important;
  background:linear-gradient(180deg,var(--nhmc-cell-2),var(--nhmc-cell)) !important;
  border:1px solid var(--nhmc-line) !important;
  -webkit-mask:none !important;
          mask:none !important;
}
.nhmc-wrap .nhmc-board .nhmc-cell.is-lit{
  background:#ffffff !important;
  border-color:#ffffff !important;
  box-shadow:0 0 18px rgba(255,255,255,.65),0 0 42px rgba(255,255,255,.45),inset 0 0 12px rgba(255,255,255,.5) !important;
}
.nhmc-wrap .nhmc-board .nhmc-cell-target{ display:none !important; }

/* ---------- Spielmusik-Auswahl ---------- */
.nhmc-music{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:2px 0 16px;
}
.nhmc-music-label{
  font-family:var(--nhmc-font-body); font-weight:700; font-size:.82rem;
  color:var(--nhmc-muted); letter-spacing:.02em;
}
.nhmc-music-select{
  font-family:var(--nhmc-font-body); font-weight:700; font-size:.85rem;
  color:var(--nhmc-text); background:rgba(255,255,255,.05);
  border:1px solid var(--nhmc-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;
}
.nhmc-music-select:hover{ color:#fff; border-color:rgba(255,255,255,.25); }
.nhmc-music-select.is-playing{ color:#fff; border-color:var(--nhmc-red-bright); box-shadow:0 0 0 1px var(--nhmc-red-bright) inset; }
.nhmc-music-select option{ color:#111; background:#fff; }