/* ==========================================================================
   GAME-SHELL — gemeinsame Optik aller Spielseiten
   Wird nach dem seiteneigenen <style> geladen und überschreibt die Hülle:
   Kopfzeile, Punktestand, Spielfeldrahmen, Startbild, Knöpfe.
   Jede Seite setzt vorher --acc (R,G,B) auf ihre eigene Spielfarbe.
   ========================================================================== */
:root{
  --shell-ink:      #f5edff;
  --shell-ink-soft: #cbc0e0;
  --shell-ink-mute: #8d80a8;
  --shell-glas:     rgba(255,255,255,.05);
  --shell-linie:    rgba(255,255,255,.10);
}

/* ---------- Grundfläche: etwas Tiefe statt flachem Schwarz ---------- */
body{
  background-image:
    radial-gradient(ellipse 60% 45% at 50% -12%, rgba(var(--acc,255,229,74),.13), transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 118%, rgba(var(--acc,255,229,74),.05), transparent 64%),
    linear-gradient(180deg, #120722 0%, #0a0410 55%, #070310 100%) !important;
}

/* ---------- Kopfzeile ---------- */
.site-header{
  padding:11px clamp(12px,3vw,30px) !important;
  border-bottom:1px solid var(--shell-linie) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
  gap:12px;
}
.site-header .back{
  border:1px solid var(--shell-linie);
  border-radius:999px;
  padding:7px 14px 7px 11px !important;
  font-size:13px !important;
  letter-spacing:.02em;
  color:var(--shell-ink-soft) !important;
  background:var(--shell-glas);
}
.site-header .back:hover{
  color:#fff !important;
  border-color:rgba(var(--acc,255,229,74),.55);
  background:rgba(var(--acc,255,229,74),.10) !important;
}
.site-header .title{
  font-size:clamp(15px,2.2vw,20px) !important;
  letter-spacing:.01em !important;
  display:inline-flex; align-items:center; gap:9px;
  white-space:nowrap;
}
.site-header .title::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:rgb(var(--acc,255,229,74)); box-shadow:0 0 12px rgba(var(--acc,255,229,74),.85);
  flex:none;
}

/* ---------- Punktestand als Chips ---------- */
.score-bar{ gap:8px !important; align-items:center; font-size:12px !important; }
.score-bar > span{
  display:inline-flex; align-items:baseline; gap:7px;
  background:var(--shell-glas);
  border:1px solid var(--shell-linie);
  border-radius:999px;
  padding:6px 13px;
  line-height:1;
}
.score-bar .score-key{
  font-size:9.5px !important; letter-spacing:.14em; text-transform:uppercase;
  color:var(--shell-ink-mute) !important; margin-right:0 !important; font-weight:500 !important;
}
.score-bar .score-val{ font-size:14px !important; color:#fff !important; }
.score-bar .score-val.is-high{ color:rgb(var(--acc,255,229,74)) !important; }

/* ---------- Spielfeld ---------- */
.stage{
  border-radius:18px !important;
  border:1px solid rgba(var(--acc,255,229,74),.34) !important;
  box-shadow:
    0 40px 90px -40px rgba(0,0,0,.95),
    0 0 60px -24px rgba(var(--acc,255,229,74),.45),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(var(--acc,255,229,74),.07) !important;
}

/* ---------- Startbild / Rundenende ---------- */
.overlay{
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(var(--acc,255,229,74),.10), transparent 70%),
    rgba(6,3,14,.86) !important;
  -webkit-backdrop-filter:blur(9px) !important;
  backdrop-filter:blur(9px) !important;
}
.overlay-inner{ max-width:min(92%,520px); margin:0 auto; }
.overlay-inner h2{
  font-size:clamp(34px,5.6vw,58px) !important;
  letter-spacing:-.035em !important;
  margin-bottom:14px !important;
  filter:drop-shadow(0 6px 26px rgba(var(--acc,255,229,74),.28));
}
.overlay-inner p{
  color:var(--shell-ink-soft) !important;
  font-size:15.5px !important;
  line-height:1.62;
  max-width:42ch !important;
  margin:0 auto 26px !important;
}
.overlay-inner p b, .overlay-inner p strong{ color:#fff; font-weight:600; }

/* Zahlen am Rundenende */
.end-stats{ gap:0 !important; margin-bottom:26px !important; }
.end-stats .stat{ padding:0 26px; position:relative; }
.end-stats .stat + .stat::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:var(--shell-linie);
}
.end-stats .stat-key{ font-size:9.5px !important; letter-spacing:.18em !important; }
.end-stats .stat-val{ font-size:34px !important; letter-spacing:-.02em; }
.end-stats .stat:first-child .stat-val{ color:rgb(var(--acc,255,229,74)) !important; }

/* ---------- Knöpfe ---------- */
.btn{
  padding:14px 30px !important;
  border-radius:12px !important;
  font-size:15.5px !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  color:#0a0410 !important;
  background:linear-gradient(155deg, #ffffff -10%, rgb(var(--acc,255,229,74)) 42%) !important;
  box-shadow:0 14px 34px -14px rgba(var(--acc,255,229,74),.85), inset 0 1px 0 rgba(255,255,255,.6) !important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
.btn:hover{ transform:translateY(-2px) !important; filter:brightness(1.04); box-shadow:0 20px 40px -14px rgba(var(--acc,255,229,74),.95) !important; }
.btn:active{ transform:translateY(0) !important; }
.btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width:560px){
  .site-header{ padding:9px 12px !important; }
  .site-header .back{ padding:6px 11px !important; font-size:12px !important; }
  .site-header .back span, .site-header .back .back-text{ display:inline; }
  .score-bar > span{ padding:5px 10px; }
  .score-bar .score-val{ font-size:13px !important; }
  .overlay-inner p{ font-size:14.5px !important; margin-bottom:20px !important; }
  .btn{ padding:13px 26px !important; }
}
@media (prefers-reduced-motion:reduce){ .btn{ transition:none !important; } }

/* ---------- Spielfelder mit eigenem Namen (Blockfall) ---------- */
.board-wrap{
  border-radius:18px !important;
  border:1px solid rgba(var(--acc,255,229,74),.34) !important;
  box-shadow:
    0 40px 90px -40px rgba(0,0,0,.95),
    0 0 60px -24px rgba(var(--acc,255,229,74),.45),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(var(--acc,255,229,74),.07) !important;
}
/* Seitenleiste (Nächster Stein, Level, Linien) */
.rail-box{
  border:1px solid var(--shell-linie) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}