/* ===================================================== */
/* Schulzocker.de - Einheitliches Stylesheet             */
/* ===================================================== */

:root {
  --chalk-bg-top: #1f5a35;
  --chalk-bg-mid: #184b2d;
  --chalk-bg-bottom: #133c24;
  --chalk-panel: #1e5131;
  --chalk-panel-2: #19472c;
  --chalk-border: #7db386;
  --chalk-text: #f2ffe9;
  --chalk-text-soft: #d5ebd0;
  --chalk-heading: #f8fff3;
  --chalk-brand-bg: rgba(10, 28, 17, 0.56);
  --chalk-brand-border: rgba(188, 232, 191, 0.52);
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Comic Sans MS", "Comic Sans", cursive !important;
}

body {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.06), transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.05), transparent 26%),
    repeating-linear-gradient(
      -2deg,
      rgba(255, 255, 255, 0.016) 0,
      rgba(255, 255, 255, 0.016) 2px,
      rgba(0, 0, 0, 0.01) 2px,
      rgba(0, 0, 0, 0.01) 4px
    ),
    linear-gradient(180deg, var(--chalk-bg-top) 0%, var(--chalk-bg-mid) 58%, var(--chalk-bg-bottom) 100%) !important;
}

/* ----- klassische Rechtstexte ----- */
body.page-datenschutz,
body.page-kontakt,
body.page-hilfe {
  background: #edf3ef !important;
  color: #12251a !important;
}

body.page-datenschutz .card,
body.page-kontakt .card,
body.page-hilfe .card {
  background: #ffffff !important;
  color: #1c2d23 !important;
  border: 1px solid #d5e2d7 !important;
  box-shadow: 0 10px 28px rgba(12, 32, 20, 0.12) !important;
}

body.page-datenschutz h1,
body.page-kontakt h1,
body.page-hilfe h1 {
  color: #163d27 !important;
  text-shadow: none !important;
}

body.page-datenschutz p,
body.page-datenschutz li,
body.page-kontakt p,
body.page-kontakt li,
body.page-hilfe p,
body.page-hilfe li {
  color: #24382c !important;
}

body.page-datenschutz .topnav .btn,
body.page-kontakt .topnav .btn,
body.page-hilfe .topnav .btn {
  background: #2d6c45 !important;
  border-color: #235737 !important;
  color: #f5fff8 !important;
}

/* ----- page-index ----- */
body.page-index {
& {
      --bg:#f6f7fb;
      --card:#ffffff;
      --text:#0b1220;
      --muted:#4b5563;
      --border:#e5e7eb;
      --shadow: 0 22px 60px rgba(0,0,0,.10);

      --g:#6ee7b7;
      --r:#fca5a5;
      --y:#fde68a;
      --b:#93c5fd;

      --p:#c4b5fd;
      --o:#fdba74;
      --t:#5eead4;
      --pk:#f9a8d4;

      /* einheitliche Body-Höhe der Karten */
      --cardBodyMin: clamp(92px, 10.5vh, 130px);
    }

    *{ box-sizing:border-box; }
& { height:100%; }
& {
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);

      min-height: 100vh;
      min-height: 100dvh;

      display:flex;
      justify-content:center;
      align-items:stretch;

      padding:
        calc(clamp(12px, 2.8vw, 28px) + env(safe-area-inset-top))
        calc(clamp(12px, 2.8vw, 28px) + env(safe-area-inset-right))
        calc(clamp(12px, 2.8vw, 28px) + env(safe-area-inset-bottom))
        calc(clamp(12px, 2.8vw, 28px) + env(safe-area-inset-left));
    }

    .shell{
      width: min(1120px, 100%);
      height: 100%;
      display:flex;
      flex-direction:column;
      gap: clamp(10px, 2.0vw, 14px);
      min-height: 0;
    }

    .app{
      width: 100%;
      background: var(--card);
      border:1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: clamp(14px, 2.2vw, 22px);

      flex: 1 1 auto;
      min-height: 0;

      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    .header{
      display:flex;
      justify-content:flex-end;
      align-items:flex-start;
      margin-bottom: clamp(12px, 2.0vw, 16px);
      flex: 0 0 auto;
    }

    .brand{
      display:inline-flex;
      align-items:baseline;
      gap:6px;
      user-select:none;
      text-decoration:none;
      color:inherit;
      -webkit-tap-highlight-color: transparent;
    }
    .brand .main{
      font-weight: 900;
      letter-spacing: .2px;
      font-size: clamp(22px, 3.2vw, 30px);
      line-height: 1;
    }
    .brand .suffix{
      font-weight: 750;
      color: var(--muted);
      font-size: clamp(12px, 2.0vw, 16px);
      line-height: 1;
    }

    .sliderCard{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: clamp(14px, 2.0vw, 18px);
      background:#fff;

      flex: 1 1 auto;
      min-height: 0;

      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    .sliderTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      margin-bottom: clamp(10px, 1.6vw, 12px);
      flex: 0 0 auto;
    }

    .sliderTitle{
      margin:0;
      font-size: clamp(18px, 2.4vw, 22px);
      letter-spacing:.2px;
    }

    .navBtns{ display:flex; gap:10px; align-items:center; }

    button.nav{
      border:1px solid var(--border);
      background:#f3f4f6;
      color:#111827;
      border-radius: 14px;
      padding: 10px 12px;
      font-weight: 800;
      cursor:pointer;
      line-height: 1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width: 44px;
      transition: transform .06s ease, filter .12s ease, opacity .12s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select:none;
    }
    button.nav:hover{ filter: brightness(1.03); }
    button.nav:active{ transform: translateY(1px); }

    .viewport{
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      overflow:hidden;
      border-radius: 16px;
      outline: none;
      position:relative;

      touch-action: pan-y;
      user-select:none;
      -webkit-user-select:none;
    }

    .track{
      display:flex;
      gap: clamp(12px, 1.8vw, 16px);
      padding: 2px;

      height: 100%;
      align-items: stretch;

      transition: transform 320ms ease;
      will-change: transform;
    }
    .track.dragging{ transition:none !important; cursor:grabbing; }

    .gameCard{
      flex: 0 0 calc((100% - (2 * clamp(12px, 1.8vw, 16px))) / 3);
      height: 100%;

      border:1px solid var(--border);
      border-radius: 18px;
      background:#fff;

      box-shadow: 0 6px 14px rgba(0,0,0,.08);

      overflow:hidden;
      text-decoration:none;
      color:inherit;
      cursor:pointer;
      min-width:0;

      display:grid;
      grid-template-rows: 1fr auto;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .gameCard:hover{
      transform: translateY(-2px);
      box-shadow: 0 8px 18px rgba(0,0,0,.09);
    }
    .gameCard:active{ transform: translateY(-1px); }
    .gameCard:focus{
      outline: 3px solid rgba(0,0,0,.35);
      outline-offset: 2px;
    }

    .thumb{
      display:grid;
      place-items:center;
      background:#fafafa;
      border-bottom: 1px solid var(--border);
      position:relative;
      overflow:hidden;
      min-height: 0;
    }

    .thumb::before{
      content:"";
      position:absolute; inset:-40px;
      background:
        radial-gradient(520px 360px at 25% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, var(--g), var(--b));
      opacity:.95;
    }
    .thumb.bg0::before{ background: radial-gradient(520px 360px at 25% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%), linear-gradient(135deg, var(--g), var(--b)); }
    .thumb.bg1::before{ background: radial-gradient(520px 360px at 25% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%), linear-gradient(135deg, var(--r), var(--y)); }
    .thumb.bg2::before{ background: radial-gradient(520px 360px at 25% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%), linear-gradient(135deg, var(--p), var(--b)); }
    .thumb.bg3::before{ background: radial-gradient(520px 360px at 25% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%), linear-gradient(135deg, var(--o), var(--r)); }
    .thumb.bg4::before{ background: radial-gradient(520px 360px at 25% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%), linear-gradient(135deg, var(--t), var(--y)); }
    .thumb.bg5::before{ background: radial-gradient(520px 360px at 25% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%), linear-gradient(135deg, var(--pk), var(--p)); }

    .thumbLabel{
      position:relative;
      z-index:1;
      font-weight: 950;
      font-size: clamp(15px, 2.0vw, 18px);
      letter-spacing:.15px;
      color:#0b1220;
      text-align:center;
      max-width: 90%;
      background: rgba(255,255,255,.90);
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 14px;
      padding: 10px 12px;
      box-shadow: 0 10px 18px rgba(0,0,0,.10);
    }

    /* WICHTIG: gleiche Höhe in allen Karten */
    .cardBody{
      padding: clamp(12px, 1.8vw, 14px);
      background:#fff;
      min-height: var(--cardBodyMin);
      display:flex;
      align-items:flex-start;
    }

    /* optional: clamp statt “längster Text” wirklich zu messen,
       sorgt aber dafür, dass alle gleich hoch sind */
    .cardBody p{
      margin:0;
      color: var(--muted);
      font-size: clamp(13px, 1.85vw, 14px);
      line-height: 1.38;

      display: -webkit-box;
      -webkit-line-clamp: 5; /* falls extrem lang, bleibt Layout stabil */
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    @media (max-width: 860px){
      .gameCard{ flex: 0 0 calc((100% - (1 * clamp(12px, 1.8vw, 16px))) / 2); }
      .cardBody p{ -webkit-line-clamp: 6; }
    }

    @media (max-width: 520px){
      .gameCard{ flex: 0 0 100%; }
      button.nav{ min-width: 42px; }
      .cardBody p{ -webkit-line-clamp: 7; }
    }

    .legalBar{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:center;
      flex: 0 0 auto;
    }

    .legalBar a{
      text-decoration:none;
      border:1px solid var(--border);
      background:#fafafa;
      color:#111827;
      border-radius: 999px;
      padding: 8px 10px;
      font-weight: 700;
      font-size: 12px;
      transition: transform .06s ease, filter .12s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select:none;
    }
    .legalBar a:hover{ filter: brightness(1.02); }
    .legalBar a:active{ transform: translateY(1px); }
}

/* ----- page-impressum ----- */
body.page-impressum {
& {
      --bg:#f6f7fb;
      --card:#ffffff;
      --text:#0b1220;
      --muted:#4b5563;
      --border:#e5e7eb;
      --shadow: 0 22px 60px rgba(0,0,0,.10);
      --btn:#111827;
    }

    *{ box-sizing:border-box; }
& { height:100%; }
& {
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);

      display:flex;
      justify-content:center;
      align-items:center;

      overflow:auto;
      -webkit-overflow-scrolling: touch;

      padding:
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-top))
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-right))
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-bottom))
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-left));
    }

    .app{
      width: min(1120px, 100%);
      height: min(96dvh, 980px);
      height: min(96vh, 980px);
      background: var(--card);
      border:1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: clamp(12px, 2.0vw, 18px);

      display:flex;
      flex-direction:column;
      gap: clamp(10px, 1.6vw, 14px);
      overflow:hidden;
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex:0 0 auto;
    }

    .brand{
      display:inline-flex;
      align-items:baseline;
      gap:6px;
      user-select:none;
      text-decoration:none;
      color:inherit;
    }
    .brand .main{
      font-weight: 900;
      letter-spacing: .2px;
      font-size: clamp(18px, 2.6vw, 22px);
      line-height:1;
    }
    .brand .suffix{
      font-weight: 800;
      color: var(--muted);
      font-size: clamp(12px, 1.8vw, 14px);
      line-height:1;
    }

    button{
      border:1px solid var(--border);
      background: var(--btn);
      color:white;
      border-radius: 14px;
      padding: clamp(10px, 1.6vw, 12px) clamp(12px, 1.8vw, 14px);
      font-weight: 850;
      cursor:pointer;
      font-size: clamp(12px, 1.6vw, 13px);
      white-space:nowrap;
      transition: transform .06s ease, filter .12s ease, opacity .12s ease;

      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select:none;
    }
    button:hover{ filter: brightness(1.03); }
    button:active{ transform: translateY(1px); }

    button.secondary{
      background:#f3f4f6;
      color:#111827;
    }

    .stage{
      flex:1 1 auto;
      min-height:0;
      border:1px solid var(--border);
      border-radius: 16px;
      background:#fff;
      padding: clamp(12px, 2.0vw, 16px);
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }

    .hero{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 16px;
      background:
        radial-gradient(520px 360px at 25% 18%, rgba(255,255,255,.78), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, #1e3a8a, #60a5fa);
      position:relative;
      overflow:hidden;
      margin-bottom: 14px;
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(900px 620px at 20% 10%, rgba(255,255,255,.32), rgba(255,255,255,0) 60%);
      pointer-events:none;
    }
    .heroInner{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .heroTitle{
      margin:0;
      font-size: clamp(20px, 3.2vw, 34px);
      font-weight: 950;
      letter-spacing:.2px;
      width: fit-content;
      background: rgba(255,255,255,.92);
      border:1px solid rgba(0,0,0,.10);
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: 0 14px 28px rgba(0,0,0,.10);
      color:#0b1220;
    }
    .heroDesc{
      max-width: 70ch;
      background: rgba(255,255,255,.80);
      border:1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      padding: 12px 14px;
      font-weight: 800;
      line-height: 1.35;
      color: rgba(15,23,42,.92);
    }

    .content{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .card{
      border:1px solid var(--border);
      border-radius: 16px;
      background:#fafafa;
      padding: 12px;
    }

    h2{
      margin:0 0 8px 0;
      font-size: 14px;
      color: var(--muted);
      font-weight: 950;
      letter-spacing:.2px;
      text-transform:none;
    }

    p, li{
      margin:0;
      font-size: 14px;
      line-height:1.45;
      font-weight: 700;
      color: rgba(15,23,42,.92);
    }
    ul{ margin:0; padding-left: 18px; }
    .muted{ color: var(--muted); font-weight: 800; font-size: 12px; margin-top:8px; }

    .kv{
      display:grid;
      grid-template-columns: 160px 1fr;
      gap: 10px 12px;
      align-items:start;
    }
    .k{ color: var(--muted); font-weight: 950; font-size: 12px; }
    .v{ font-weight: 800; }

    .footerLinks{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:center;
      margin-top: 12px;
    }
    .footerLinks a{
      text-decoration:none;
      border:1px solid var(--border);
      background:#fafafa;
      color:#111827;
      border-radius: 14px;
      padding: 10px 12px;
      font-weight: 750;
      font-size: 13px;
      transition: transform .06s ease, filter .12s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select:none;
    }
    .footerLinks a:hover{ filter: brightness(1.02); }
    .footerLinks a:active{ transform: translateY(1px); }

    @media (max-width: 680px){
      .kv{ grid-template-columns: 1fr; }
      .k{ margin-top: 6px; }
    }
}

/* ----- page-paarefinden ----- */
body.page-paarefinden {
& {
      --bg:#ffffff;
      --card:#ffffff;
      --text:#0b1220;
      --muted:#4b5563;
      --border:#e5e7eb;
      --shadow: 0 18px 55px rgba(0,0,0,.12);

      /* kräftiges Blau */
      --b:#2563eb;
      --b2:#1e40af;

      --gap: 10px;
    }

    *{ box-sizing:border-box; }
& {
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: #f6f7fb;
      color: var(--text);
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      padding: 10px;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }

    .app{
      width: min(1400px, 100%);
      height: min(96vh, 900px);
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 14px;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    .topbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-bottom: 10px;
      flex: 0 0 auto;
    }

    .topbar h1{
      margin:0;
      font-size: 20px;
      letter-spacing:.2px;
    }

    .topActions{
      display:flex;
      gap:10px;
      align-items:center;
      flex: 0 0 auto;
    }

    button{
      border:1px solid var(--border);
      border-radius: 12px;
      padding: 10px 14px;
      font-weight: 850;
      cursor:pointer;
      background:#111827;
      color:white;
      font-size: 14px;
      white-space:nowrap;
      transition: transform .06s ease, filter .12s ease, opacity .12s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    button:hover{ filter: brightness(1.03); }
    button:active{ transform: translateY(1px); }
    button.secondary{
      background:#f3f4f6;
      color:#111827;
      font-weight: 850;
    }
    button:disabled{
      opacity:.55;
      cursor:not-allowed;
      filter:none;
    }

    .stage{
      flex: 1 1 auto;
      min-height: 0;
      border:1px solid var(--border);
      border-radius: 16px;
      background: #fff;
      padding: 12px;
      overflow:hidden;
      display:flex;
      flex-direction:column;
    }

    /* -------- SETUP -------- */
    .setup{
      display:flex;
      flex:1 1 auto;
      min-height:0;
      gap: 12px;
      overflow:hidden;
    }

    /* Hintergrund wie beim Wortsalat: weichere Radial-Highlights + Blauverlauf */
    .setupLeft{
      flex: 1 1 auto;
      min-width: 0;
      border:1px solid var(--border);
      border-radius: 16px;
      padding: 14px;
      background:
        radial-gradient(520px 360px at 25% 18%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, var(--b2), var(--b));
      position:relative;
      overflow:hidden;
    }
    .setupLeft::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(900px 620px at 20% 10%, rgba(255,255,255,.26), rgba(255,255,255,0) 60%);
      pointer-events:none;
    }

    .setupLeftInner{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      height:100%;
      gap: 12px;
      justify-content:space-between;
    }

    .setupTitle{
      margin:0;
      font-size: clamp(20px, 3.2vw, 34px);
      font-weight: 900;
      letter-spacing:.2px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 16px;
      padding: 12px 14px;
      width: fit-content;
      box-shadow: 0 14px 28px rgba(0,0,0,.10);
    }

    .setupDesc{
      background: rgba(255,255,255,.80);
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      padding: 12px 14px;
      font-weight: 750;
      line-height:1.35;
      max-width: 52ch;
      color: rgba(15,23,42,.92);
    }

    .chips{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:auto;
    }
    .chip{
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 999px;
      padding: 8px 12px;
      font-weight: 850;
      color:#0b1220;
      font-size: 13px;
      box-shadow: 0 10px 20px rgba(0,0,0,.08);
    }

    .setupRight{
      width: min(420px, 44%);
      min-width: 320px;
      border:1px solid var(--border);
      border-radius: 16px;
      padding: 12px;
      display:flex;
      flex-direction:column;
      min-height:0;
      background:#fff;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }

    .settingsTitle{
      margin: 0 0 10px 0;
      font-size: 14px;
      color: var(--muted);
      font-weight: 850;
      letter-spacing:.2px;
      flex: 0 0 auto;
    }

    .block{
      border:1px solid var(--border);
      background:#f8fafc;
      border-radius: 14px;
      padding: 10px;
    }

    .label{
      font-size: 13px;
      color: var(--muted);
      font-weight: 850;
      margin-bottom: 6px;
    }

    input, select{
      width:100%;
      padding: 11px 12px;
      border-radius: 12px;
      border:1px solid var(--border);
      font-weight: 800;
      font-size: 14px;
      background:#fff;
      outline:none;
    }

    .row2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .spacer{ flex:1 1 auto; min-height:12px; }

    .startRow{
      display:flex;
      justify-content:flex-end;
      margin-top: 10px;
    }

    /* -------- GAME -------- */
    .game{
      display:none;
      flex:1 1 auto;
      min-height:0;
      gap: 12px;
      overflow:hidden;
    }

    .scorecol{
      width: 190px;
      display:flex;
      flex-direction:column;
      gap: var(--gap);
      flex: 0 0 auto;
      min-height:0;
    }

    .scoreboard{
      border:1px solid var(--border);
      border-radius: 16px;
      background:#fff;
      padding: 12px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
      min-height:0;
    }
    .scoreboard h2{
      margin:0 0 8px 0;
      font-size: 15px;
      letter-spacing:.2px;
    }
    .score{
      margin:0;
      font-size: 38px;
      font-weight: 950;
      line-height: 1;
    }

    .active{ color:#111827; font-weight: 950; }
    .inactive{ color:#9ca3af; font-weight: 900; }

    /* 2 Spieler */
    .twoPlayers #sb3,
    .twoPlayers #sb4{ display:none; }
    .twoPlayers .scorecol .scoreboard{ flex: 1 1 auto; }

    /* 3 Spieler (zeigt nur Spieler 3 links unten) */
    .threePlayers #sb4{ display:none; }
    .threePlayers #sb3{ display:flex; }
    .threePlayers .scorecol#leftCol .scoreboard{ flex: 1 1 0; }  /* 1 + 3 teilen sich links */
    .threePlayers .scorecol#rightCol .scoreboard{ flex: 1 1 auto; } /* Spieler 2 füllt rechts */

    /* 4 Spieler */
    .fourPlayers .scorecol .scoreboard{ flex: 1 1 0; }

    .boardCard{
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      border:1px solid var(--border);
      border-radius: 16px;
      background:#fff;
      padding: 10px;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    .boardMeta{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 8px;
      flex: 0 0 auto;
    }
    .metaStrong{ color: var(--text); font-weight: 950; }

    .boardFill{
      flex: 1 1 auto;
      min-height:0;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    .grid{
      --cardSize: 72px;
      display:grid;
      gap: var(--gap);
      justify-content:center;
      align-content:center;
      grid-template-columns: repeat(6, var(--cardSize));
      grid-auto-rows: var(--cardSize);
      user-select:none;
    }

    .card{
      width: var(--cardSize);
      height: var(--cardSize);
      perspective: 900px;
      cursor:pointer;
    }
    .card.matched{ cursor: default; }

    .inner{
      position:relative;
      width:100%;
      height:100%;
      transform-style: preserve-3d;
      transition: transform .55s ease;
    }
    .card.flip .inner{ transform: rotateY(180deg); }

    .face{
      position:absolute;
      inset:0;
      backface-visibility:hidden;
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,.14);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: inset 0 -14px 26px rgba(0,0,0,.06);
      overflow:hidden;
    }

    .front{
      transform: rotateY(180deg);
      background:#fff;
      font-size: clamp(20px, 2.7vw, 40px);
    }

    .back{
      background:
        radial-gradient(520px 360px at 25% 18%, rgba(255,255,255,.30), rgba(255,255,255,0) 62%),
        linear-gradient(135deg, var(--b2), var(--b));
      box-shadow:
        inset 0 -16px 28px rgba(0,0,0,.25),
        inset 0 12px 22px rgba(255,255,255,.18);
    }

    /* --- Responsive --- */
    @media (max-width: 980px){
      .setup{ flex-direction:column; }
      .setupRight{ width:100%; min-width:0; }
      .row2{ grid-template-columns: 1fr; }

      .game{ flex-direction:column; }

      .scorecol{
        width: 100%;
        flex-direction:row;
      }
      .scoreboard{
        flex: 1 1 0;
        padding: 10px 12px;
      }
      .scoreboard h2{ margin:0 0 6px 0; font-size: 14px; }
      .score{ font-size: 28px; }
    }
}

/* ----- page-reaktionsspiel ----- */
body.page-reaktionsspiel {
& {
      --bg:#ffffff;
      --card:#ffffff;
      --text:#0b1220;
      --muted:#4b5563;
      --border:#e5e7eb;
      --shadow: 0 22px 60px rgba(0,0,0,.10);

      --active:#22c55e;
      --inactive:#e5e7eb;
      --danger:#ef4444;
      --btn:#111827;

      --gap: 14px;
    }

    *{ box-sizing:border-box; }
& { height: 100%; }
& {
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height:100vh;

      /* iPad/iOS: lieber scrollen erlauben statt “festklemmen” */
      overflow:auto;
      -webkit-overflow-scrolling: touch;

      display:grid;
      place-items:center;

      /* Safe-area + etwas Luft */
      padding:
        calc(clamp(10px, 2.4vw, 24px) + env(safe-area-inset-top))
        calc(clamp(10px, 2.4vw, 24px) + env(safe-area-inset-right))
        calc(clamp(10px, 2.4vw, 24px) + env(safe-area-inset-bottom))
        calc(clamp(10px, 2.4vw, 24px) + env(safe-area-inset-left));
    }

    .app{
      width: min(1120px, 100%);
      background: var(--card);
      border:1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: clamp(12px, 2.0vw, 18px);

      /* iPad: niemals über den Viewport hinaus */
      max-height: min(92vh, 900px);
      max-height: min(92dvh, 900px);
      max-height: min(92svh, 900px);

      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap: clamp(10px, 1.6vw, 14px);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex: 0 0 auto;
    }

    .topbar h1{
      margin:0;
      font-size: clamp(16px, 2.2vw, 20px);
      letter-spacing:.2px;
    }

    .topbarActions{
      display:flex;
      gap:10px;
      align-items:center;
    }

    button{
      border:1px solid var(--border);
      background: var(--btn);
      color:white;
      border-radius: 14px;
      padding: clamp(10px, 1.6vw, 12px) clamp(12px, 1.8vw, 14px);
      font-weight: 850;
      cursor:pointer;
      font-size: clamp(12px, 1.6vw, 13px);
      white-space:nowrap;
      transition: transform .06s ease, filter .12s ease, opacity .12s ease;

      /* iOS tap */
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select:none;
    }
    button:hover{ filter: brightness(1.03); }
    button:active{ transform: translateY(1px); }

    button.secondary{
      background:#f3f4f6;
      color:#111827;
      font-weight: 850;
    }

    button:disabled{
      opacity:.55;
      cursor:not-allowed;
      filter:none;
    }

    /* STAGE: immer gleich groß – aber iPad-freundlich (kein “Button verschwindet”) */
    .stage{
      flex: 1 1 auto;
      min-height: 0;
      border:1px solid var(--border);
      border-radius: 16px;
      background: #fff;
      padding: clamp(10px, 1.8vw, 14px);

      /* statt harter Fixhöhe: flexible Höhe, die in den Viewport passt */
      height: clamp(560px, 78vh, 820px);
      height: clamp(560px, 78dvh, 820px);
      height: clamp(560px, 78svh, 820px);

      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap: clamp(10px, 1.6vw, 12px);
      position: relative;
    }

    .screen{
      flex:1 1 auto;
      min-height:0;
      overflow:hidden;
      display:none;
    }
    .screen.active{ display:block; }

    /* ---------- SETUP ---------- */
    .setup{
      height:100%;
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: clamp(12px, 2.0vw, 16px);
      overflow:hidden;
      min-height:0;
    }

    .hero{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 16px;
      background:
        radial-gradient(520px 360px at 25% 18%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, #1e3a8a, #60a5fa);
      position:relative;
      overflow:hidden;
      min-height:0;
      display:flex;
      flex-direction:column;
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(900px 620px at 20% 10%, rgba(255,255,255,.32), rgba(255,255,255,0) 60%);
      pointer-events:none;
    }
    .heroInner{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:12px;
      min-height:0;
      flex:1 1 auto;
    }
    .heroTitle{
      margin:0;
      font-size: clamp(20px, 3.2vw, 34px);
      font-weight: 950;
      letter-spacing:.2px;
      width: fit-content;
      background: rgba(255,255,255,.92);
      border:1px solid rgba(0,0,0,.10);
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: 0 14px 28px rgba(0,0,0,.10);
      color:#0b1220;
    }
    .heroDesc{
      max-width: 58ch;
      background: rgba(255,255,255,.80);
      border:1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      padding: 12px 14px;
      font-weight: 750;
      line-height: 1.35;
      color: rgba(15,23,42,.92);
    }

    .chips{
      margin-top:auto;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      padding-top: 6px;
    }
    .chip{
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 999px;
      padding: 8px 12px;
      font-weight: 850;
      color:#0b1220;
      font-size: 13px;
      box-shadow: 0 10px 20px rgba(0,0,0,.08);
    }

    .settings{
      border:1px solid var(--border);
      border-radius: 18px;
      background:#fff;
      padding: 12px;
      display:flex;
      flex-direction:column;
      min-height:0;

      /* WICHTIG: rechts kann scrollen, falls Inhalt zu lang */
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }

    .settingsTitle{
      margin:0 0 10px 0;
      font-size: 14px;
      color: var(--muted);
      font-weight: 850;
      letter-spacing:.2px;
      flex:0 0 auto;
    }

    .block{
      border:1px solid var(--border);
      background:#f8fafc;
      border-radius: 14px;
      padding: 10px;
    }

    .label{
      font-size: 13px;
      color: var(--muted);
      font-weight: 850;
      margin-bottom: 6px;
    }

    input, select, textarea{
      width:100%;
      padding: 11px 12px;
      border-radius: 12px;
      border:1px solid var(--border);
      font-weight: 800;
      font-size: 14px;
      background:#fff;
      outline:none;
    }

    textarea{
      resize:none;
      min-height: 120px;
      font-weight: 750;
      line-height:1.25;
    }

    .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .row4{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }

    .small{
      font-size:12px;
      color: var(--muted);
      font-weight: 750;
      margin-top:6px;
      line-height:1.25;
    }

    .spacer{ flex:1 1 auto; min-height: 10px; }
    .startRow{ display:flex; justify-content:flex-end; gap:10px; align-items:center; padding-bottom: env(safe-area-inset-bottom); }

    .toggleLine{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-size: 13px;
      color: var(--muted);
      font-weight: 850;
      margin-top:10px;
    }
    .toggleLine input[type="checkbox"]{ transform: scale(1.15); }

    /* ---------- GAME ---------- */
    .game{
      height:100%;
      display:grid;
      grid-template-columns: 1.70fr 0.60fr;
      gap: clamp(12px, 2.0vw, 16px);
      overflow:hidden;
      align-items:stretch;
      min-height:0;
    }

    .gridWrap{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
    }

    .metaTop{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
      margin-bottom: 10px;
      flex:0 0 auto;
    }

    .gridArea{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      position:relative;
      border-radius: 16px;
    }

    .grid{
      --cell: 120px;
      display:grid;
      grid-template-columns: repeat(3, var(--cell));
      grid-auto-rows: var(--cell);
      gap: var(--gap);
      justify-content:center;
      align-content:center;
    }

    .field{
      width: var(--cell);
      height: var(--cell);
      border:none;
      border-radius: 18px;
      background: var(--inactive);
      cursor:pointer;
      font-size: 22px;
      font-weight: 900;
      color:#111827;
      transition: transform .06s ease, filter .12s ease, box-shadow .12s ease, background .12s ease;
      box-shadow: inset 0 -16px 30px rgba(0,0,0,.07);

      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select:none;
    }
    .field:active{ transform: scale(.99); }
    .field.active{
      background: var(--active);
      box-shadow:
        inset 0 -14px 26px rgba(0,0,0,.06),
        0 18px 40px rgba(0,0,0,.14);
      outline: 4px solid #000;
    }
    .field.wrong{
      background: var(--danger);
      outline: 4px solid #000;
    }
    .field:disabled{ cursor:not-allowed; opacity:.7; }

    .side{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      background:#fff;
      display:flex;
      flex-direction:column;
      min-height:0;

      /* falls zu hoch: rechte Spalte darf scrollen */
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }

    .stats{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 10px;
      flex:0 0 auto;
    }

    .stat{
      border:1px solid var(--border);
      border-radius: 16px;
      padding: 10px;
      background:#fafafa;
      font-size: 12px;
      color: var(--muted);
      font-weight: 800;
      min-width:0;
    }
    .stat strong{
      display:block;
      margin-top: 3px;
      font-size: 18px;
      color: var(--text);
      font-weight: 950;
      line-height:1.05;
    }

    .infoBox{
      border:1px solid var(--border);
      border-radius: 16px;
      background:#fafafa;
      padding: 10px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 800;
      line-height:1.25;
      flex:0 0 auto;
      margin-bottom: 10px;
    }

    .sideButtons{
      display:grid;
      gap:10px;
      flex:0 0 auto;
      margin-top:auto;
      padding-bottom: env(safe-area-inset-bottom);
    }

    .countdown{
      position:absolute;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background: rgba(255,255,255,.75);
      backdrop-filter: blur(2px);
      border-radius: 16px;
    }
    .countdown.active{ display:flex; }
    .countdown span{
      font-size: clamp(44px, 7vw, 82px);
      font-weight: 950;
      letter-spacing: .5px;
      color:#111827;
      background:#fff;
      border:1px solid var(--border);
      border-radius: 22px;
      padding: 14px 22px;
      box-shadow: 0 18px 40px rgba(0,0,0,.12);
      min-width: 2.4em;
      text-align:center;
    }

    /* RESULTS */
    .results{ height:100%; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
    .resultsPanel{
      flex:1 1 auto; min-height:0;
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      background:#fff;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .tableWrap{
      border:1px solid var(--border);
      border-radius: 16px;
      background:#fafafa;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
      flex:1 1 auto;
      min-height:0;
    }

    table{ width:100%; border-collapse:collapse; font-size: 13px; }
    th, td{
      padding: 10px 10px;
      border-bottom: 1px solid var(--border);
      text-align:left;
      white-space:nowrap;
    }
    th{ color: var(--muted); font-weight: 900; }
    td strong{ font-weight: 950; }

    @media (max-width: 980px){
      .setup{ grid-template-columns: 1fr; }
      .row2, .row4{ grid-template-columns: 1fr; }
      .game{ grid-template-columns: 1fr; }
      .side{ min-height: 220px; }
& { --gap: 12px; }
      .stage{
        height: min(82vh, 860px);
        height: min(82dvh, 860px);
        height: min(82svh, 860px);
      }
    }

    @media (max-height: 700px){
      .app{
        max-height: 96vh;
        max-height: 96dvh;
        max-height: 96svh;
      }
      .stat strong{ font-size: 16px; }
      .stage{
        height: min(86vh, 820px);
        height: min(86dvh, 820px);
        height: min(86svh, 820px);
      }
    }

    .disabledInput{
      opacity:.55;
      pointer-events:none;
    }
}

/* ----- page-farbfolge ----- */
body.page-farbfolge {
& {
      --bg:#f6f7fb;
      --card:#ffffff;
      --text:#0b1220;
      --muted:#4b5563;
      --border:#e5e7eb;
      --shadow: 0 22px 60px rgba(0,0,0,.10);

      --g:#6ee7b7;
      --r:#fca5a5;
      --y:#fde68a;
      --b:#93c5fd;
    }

    *{ box-sizing:border-box; }
& { height: 100%; }
& {
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);

      overflow:auto;
      -webkit-overflow-scrolling: touch;

      display:flex;
      justify-content:center;
      align-items:center;

      padding:
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-top))
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-right))
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-bottom))
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-left));
    }

    .app{
      width: min(1120px, 100%);
      height: min(96dvh, 980px);
      height: min(96vh, 980px);
      background: var(--card);
      border:1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: clamp(12px, 2.0vw, 18px);

      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap: clamp(10px, 1.6vw, 14px);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex: 0 0 auto;
    }

    .topbar h1{
      margin:0;
      font-size: clamp(16px, 2.2vw, 20px);
      letter-spacing:.2px;
    }

    .topLinkBtn{
      border:1px solid var(--border);
      background:#f3f4f6;
      color:#111827;
      border-radius: 14px;
      padding: clamp(10px, 1.6vw, 12px) clamp(12px, 1.8vw, 14px);
      font-weight: 750;
      cursor:pointer;
      font-size: clamp(12px, 1.6vw, 13px);
      white-space:nowrap;

      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select:none;
      transition: transform .06s ease, filter .12s ease, opacity .12s ease;
    }
    .topLinkBtn:hover{ filter: brightness(1.03); }
    .topLinkBtn:active{ transform: translateY(1px); }

    .wrap{
      flex: 1 1 auto;
      min-height: 0;
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: clamp(12px, 2.0vw, 18px);
      align-items: stretch;
      overflow:hidden;
    }

    /* LEFT */
    .grid{
      --pad: 140px;

      display:grid;
      grid-template-columns: repeat(2, var(--pad));
      grid-template-rows: repeat(2, var(--pad));
      gap: clamp(12px, 2.0vw, 18px);

      justify-content:center;
      align-content:center;

      min-width: 0;
      min-height: 0;

      /* bisschen Luft damit Effekte nicht "oben/unten verschwinden" */
      padding: 8px;
    }

    .pad{
      width: var(--pad);
      height: var(--pad);

      border-radius: clamp(14px, 1.8vw, 18px);
      border:1px solid rgba(0,0,0,.12);
      box-shadow: inset 0 -14px 26px rgba(0,0,0,.08);
      cursor:pointer;
      transition: box-shadow .12s ease, transform .06s ease, opacity .12s ease;
      position:relative;
      overflow:hidden;

      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select:none;
    }

    .pad:active{ transform: scale(.99); }

    .pad.disabled{
      cursor:not-allowed;
      opacity:.65;
    }

    .pad::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(620px 420px at 25% 18%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%);
      opacity:.6;
      pointer-events:none;
    }

    .green{ background:var(--g); }
    .red{ background:var(--r); }
    .yellow{ background:var(--y); }
    .blue{ background:var(--b); }

    /* Statt outline => inset border, damit oben/unten immer sichtbar */
    .lit-user{
      box-shadow:
        inset 0 0 0 3px rgba(0,0,0,.65),
        inset 0 -14px 26px rgba(0,0,0,.08),
        0 18px 40px rgba(0,0,0,.14);
    }

    .lit-play{
      opacity: 1 !important;
      box-shadow:
        inset 0 0 0 4px #000,
        inset 0 -14px 26px rgba(0,0,0,.06),
        0 22px 52px rgba(0,0,0,.18),
        0 0 24px rgba(0,0,0,.10);
    }
    .pad.disabled.lit-play{ opacity: 1 !important; }

    /* RIGHT */
    .panel{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: clamp(12px, 1.8vw, 16px);
      background:#fff;

      display:flex;
      flex-direction:column;
      height:100%;
      min-width:0;
      min-height:0;

      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }

    .stats{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: clamp(8px, 1.4vw, 10px);
      margin-bottom: clamp(10px, 1.6vw, 12px);
      flex: 0 0 auto;
    }

    .chip{
      border:1px solid var(--border);
      border-radius: 16px;
      padding: clamp(8px, 1.4vw, 10px);
      background:#fafafa;
      font-size: clamp(11px, 1.5vw, 12px);
      color:var(--muted);
      min-width:0;
    }

    .chip strong{
      color:var(--text);
      font-size: clamp(15px, 2.3vw, 18px);
      display:block;
      margin-top:3px;
      line-height:1.05;
    }

    .progress{
      border:1px solid var(--border);
      border-radius:16px;
      background:#fafafa;
      padding: clamp(8px, 1.4vw, 10px);
      color:var(--muted);
      font-size: clamp(11px, 1.5vw, 12px);
      margin-bottom: clamp(8px, 1.4vw, 10px);
      flex: 0 0 auto;
    }
    .progress strong{ color: var(--text); }

    .topActions{
      display:grid;
      gap: clamp(8px, 1.4vw, 10px);
      margin-bottom: clamp(8px, 1.4vw, 10px);
      flex: 0 0 auto;
    }

    .hintInline{
      font-size: clamp(11px, 1.5vw, 12px);
      color: var(--muted);
      background: #fff;
      border: 1px dashed var(--border);
      border-radius: 14px;
      padding: clamp(8px, 1.4vw, 10px);
    }

    .spacer{ flex: 1 1 auto; min-height: 8px; }

    .controls{
      display:grid;
      gap: clamp(8px, 1.4vw, 10px);
      flex: 0 0 auto;
      padding-bottom: env(safe-area-inset-bottom);
    }

    .row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap: clamp(8px, 1.4vw, 10px);
    }

    button{
      border:1px solid var(--border);
      background:#111827;
      color:white;
      border-radius: 14px;
      padding: clamp(10px, 1.6vw, 12px);
      font-weight: 700;
      cursor:pointer;
      font-size: clamp(12px, 1.6vw, 13px);

      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select:none;
      transition: transform .06s ease, filter .12s ease, opacity .12s ease;
    }
    button:hover{ filter: brightness(1.03); }
    button:active{ transform: translateY(1px); }

    button.secondary{
      background:#f3f4f6;
      color:#111827;
      font-weight: 650;
    }

    button:disabled{
      opacity:.5;
      cursor:not-allowed;
      filter:none;
    }

    label{
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-size: clamp(11px, 1.5vw, 12px);
      color:var(--muted);
      background:#fafafa;
      border:1px solid var(--border);
      border-radius: 14px;
      padding: clamp(8px, 1.4vw, 10px);
      gap:12px;
      min-width:0;
    }

    select{
      width: 56%;
      padding: 8px 10px;
      border-radius: 12px;
      border:1px solid var(--border);
      background:#fff;
      font-weight:650;
      font-size: clamp(11px, 1.5vw, 12px);
      min-width:0;
    }

    input[type="checkbox"]{ transform: scale(1.1); }

    .locked label,
    .locked select{
      opacity:.6;
      pointer-events:none;
    }

    @media (max-width: 900px){
      .wrap{ grid-template-columns: 1fr; }
      .panel{ height:auto; }
      .app{ height: min(96dvh, 980px); height: min(96vh, 980px); }
    }

    @media (max-height: 700px){
      .app{ height: min(98dvh, 980px); height: min(98vh, 980px); }
      .chip strong{ font-size: 16px; }
    }
}

/* ----- page-worterraten ----- */
body.page-worterraten {
& {
      --bg:#ffffff;
      --card:#ffffff;
      --text:#0b1220;
      --muted:#4b5563;
      --border:#e5e7eb;
      --shadow: 0 22px 60px rgba(0,0,0,.10);

      --btn:#111827;
      --soft:#f8fafc;
      --accent1:#1e3a8a;
      --accent2:#60a5fa;
      --ok:#065f46;
      --bad:#7f1d1d;

      --kb-gap: 8px;
      --kb-max: 660px;
    }

    *{ box-sizing:border-box; }
& {
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height:100vh;
      display:grid;
      place-items:center;
      padding: clamp(10px, 2.4vw, 24px);
      overflow:auto;
    }

    .app{
      width: min(1120px, 100%);
      background: var(--card);
      border:1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: clamp(12px, 2.0vw, 18px);
      max-height: min(92vh, 980px);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap: clamp(10px, 1.6vw, 14px);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex: 0 0 auto;
    }

    .topbar h1{
      margin:0;
      font-size: clamp(16px, 2.2vw, 20px);
      letter-spacing:.2px;
    }

    .topbarActions{
      display:flex;
      gap:10px;
      align-items:center;
    }

    button{
      border:1px solid var(--border);
      background: var(--btn);
      color:white;
      border-radius: 14px;
      padding: clamp(10px, 1.6vw, 12px) clamp(12px, 1.8vw, 14px);
      font-weight: 850;
      cursor:pointer;
      font-size: clamp(12px, 1.6vw, 13px);
      white-space:nowrap;
      transition: transform .06s ease, filter .12s ease, opacity .12s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    button:hover{ filter: brightness(1.03); }
    button:active{ transform: translateY(1px); }
    button.secondary{
      background:#f3f4f6;
      color:#111827;
      font-weight: 850;
    }
    button:disabled{
      opacity:.55;
      cursor:not-allowed;
      filter:none;
    }

    .stage{
      flex: 1 1 auto;
      min-height: 0;
      border:1px solid var(--border);
      border-radius: 16px;
      background: #fff;
      padding: clamp(10px, 1.8vw, 14px);
      overflow:hidden;
      height: clamp(620px, 78vh, 900px);
      display:flex;
      flex-direction:column;
      gap: clamp(10px, 1.6vw, 12px);
      position: relative;
    }

    .screen{
      flex:1 1 auto;
      min-height:0;
      overflow:hidden;
      display:none;
    }
    .screen.active{ display:block; }

    /* SETUP */
    .setup{
      height:100%;
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: clamp(12px, 2.0vw, 16px);
      overflow:hidden;
    }

    .hero{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 16px;
      background:
        radial-gradient(520px 360px at 25% 18%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, var(--accent1), var(--accent2));
      position:relative;
      overflow:hidden;
      min-height:0;
      display:flex;
      flex-direction:column;
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(900px 620px at 20% 10%, rgba(255,255,255,.32), rgba(255,255,255,0) 60%);
      pointer-events:none;
    }
    .heroInner{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:12px;
      min-height:0;
      flex:1 1 auto;
    }
    .heroTitle{
      margin:0;
      font-size: clamp(20px, 3.2vw, 34px);
      font-weight: 950;
      letter-spacing:.2px;
      width: fit-content;
      background: rgba(255,255,255,.92);
      border:1px solid rgba(0,0,0,.10);
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: 0 14px 28px rgba(0,0,0,.10);
      color:#0b1220;
    }
    .heroDesc{
      max-width: 60ch;
      background: rgba(255,255,255,.80);
      border:1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      padding: 12px 14px;
      font-weight: 750;
      line-height: 1.35;
      color: rgba(15,23,42,.92);
    }

    .settings{
      border:1px solid var(--border);
      border-radius: 18px;
      background:#fff;
      padding: 12px;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }

    .settingsTitle{
      margin:0 0 10px 0;
      font-size: 14px;
      color: var(--muted);
      font-weight: 850;
      letter-spacing:.2px;
      flex:0 0 auto;
    }

    .block{
      border:1px solid var(--border);
      background: var(--soft);
      border-radius: 14px;
      padding: 10px;
    }

    .label{
      font-size: 13px;
      color: var(--muted);
      font-weight: 850;
      margin-bottom: 6px;
    }

    input, select{
      width:100%;
      padding: 11px 12px;
      border-radius: 12px;
      border:1px solid var(--border);
      font-weight: 800;
      font-size: 14px;
      background:#fff;
      outline:none;
    }

    .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .small{
      font-size:12px;
      color: var(--muted);
      font-weight: 750;
      margin-top:6px;
      line-height:1.25;
    }

    .spacer{ flex:1 1 auto; min-height: 10px; }
    .startRow{ display:flex; justify-content:flex-end; gap:10px; align-items:center; }

    /* GAME */
    .game{
      height:100%;
      display:grid;
      grid-template-columns: 1.45fr 0.55fr;
      gap: clamp(12px, 2.0vw, 16px);
      overflow:hidden;
      align-items:stretch;
    }

    .main{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
      background:#fff;
    }

    .mainTop{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
      margin-bottom: 10px;
      flex:0 0 auto;
    }

    .hearts{
      font-size: 18px;
      letter-spacing: 2px;
      line-height: 1.1;
      text-align:center;
      padding: 10px 12px;
      border:1px solid var(--border);
      background: var(--soft);
      border-radius: 16px;
      flex:0 0 auto;
      margin-bottom: 10px;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }

    .wordBox{
      flex: 0 0 auto;
      border:1px solid var(--border);
      background: var(--soft);
      border-radius: 18px;
      padding: clamp(12px, 1.8vw, 16px);
      display:flex;
      align-items:center;
      justify-content:center;
      min-height: clamp(92px, 14vh, 150px);
      margin-bottom: 10px;
      overflow: hidden;
    }

    /* Wichtig: NIE "..." anzeigen -> kein ellipsis, stattdessen Schrift automatisch kleiner */
    .wordDisplay{
      font-weight: 950;
      line-height: 1.05;
      text-align:center;
      color:#0b1220;
      white-space: nowrap;
      max-width: 100%;
      overflow: visible;         /* kein Abschneiden */
      text-overflow: clip;       /* niemals ... */
      letter-spacing: clamp(4px, 1.0vw, 12px);
      font-size: clamp(18px, 3.0vw, 44px);
      transform-origin: center;
    }

    /* Keyboard: mittig + Reihen optisch mittig */
    .keyboardWrap{
      flex: 1 1 auto;
      min-height: 0;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    .keyboard{
      width:100%;
      max-width: var(--kb-max);
      max-height: 100%;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 10px;
      padding: 4px 0;
    }

    .kbRow{
      width:100%;
      display:grid;
      grid-template-columns: repeat(var(--maxCols), 1fr);
      gap: var(--kb-gap);
      justify-content: center;
    }

    .key, .keySpacer{
      width:100%;
      aspect-ratio: 1 / 1;
      border-radius: 14px;
      border:1px solid var(--border);
      background:#fff;
      font-weight: 950;
      font-size: clamp(13px, 1.6vw, 17px);
      box-shadow: inset 0 -10px 18px rgba(0,0,0,.06);
      user-select:none;
      color:#111827;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .key{
      cursor:pointer;
      transition: transform .06s ease, filter .12s ease, background .12s ease, color .12s ease;
    }
    .key:active{ transform: scale(.99); }

    .keySpacer{
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      pointer-events:none;
    }

    .key.used{
      background:#111827;
      color:#fff;
      pointer-events:none;
      filter: none;
    }
    .key.good{
      background:#dcfce7;
      border-color:#bbf7d0;
      color: var(--ok);
      pointer-events:none;
    }
    .key.bad{
      background:#fee2e2;
      border-color:#fecaca;
      color: var(--bad);
      pointer-events:none;
    }

    .side{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      background:#fff;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
    }

    .stat{
      border:1px solid var(--border);
      border-radius: 16px;
      padding: 10px;
      background:#fafafa;
      font-size: 12px;
      color: var(--muted);
      font-weight: 800;
      min-width:0;
      margin-bottom: 10px;
    }
    .stat strong{
      display:block;
      margin-top: 3px;
      font-size: 18px;
      color: var(--text);
      font-weight: 950;
      line-height:1.05;
    }

    .stat.hidden{
      display:none;
    }

    .msg{
      border:1px solid var(--border);
      border-radius: 16px;
      background: var(--soft);
      padding: 10px;
      font-size: 13px;
      color: var(--muted);
      font-weight: 850;
      line-height:1.25;
      min-height: 64px;
    }

    .msg strong{
      color: var(--text);
      font-weight: 950;
    }

    .sideButtons{
      display:grid;
      gap:10px;
      margin-top:auto;
    }

    @media (max-width: 980px){
      .setup{ grid-template-columns: 1fr; }
      .row2{ grid-template-columns: 1fr; }
      .game{ grid-template-columns: 1fr; }
      .side{ min-height: 200px; }
& { --kb-max: 720px; }
    }

    @media (max-height: 720px){
& { --kb-gap: 6px; }
      .wordBox{ min-height: 84px; }
      .keyboard{ gap: 8px; }
    }
}

/* ----- page-wortsalat ----- */
body.page-wortsalat {
& {
      --bg:#ffffff;
      --card:#ffffff;
      --text:#0b1220;
      --muted:#4b5563;
      --border:#e5e7eb;
      --shadow: 0 22px 60px rgba(0,0,0,.10);

      --btn:#111827;
      --soft:#f8fafc;
      --accent1:#1e3a8a;
      --accent2:#60a5fa;
    }

    *{ box-sizing:border-box; }
& {
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height:100vh;
      display:grid;
      place-items:center;
      padding: clamp(10px, 2.4vw, 24px);
      overflow:auto;
    }

    .app{
      width: min(1120px, 100%);
      background: var(--card);
      border:1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: clamp(12px, 2.0vw, 18px);
      max-height: min(92vh, 980px);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap: clamp(10px, 1.6vw, 14px);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex: 0 0 auto;
    }

    .topbar h1{
      margin:0;
      font-size: clamp(16px, 2.2vw, 20px);
      letter-spacing:.2px;
    }

    .topbarActions{
      display:flex;
      gap:10px;
      align-items:center;
    }

    button{
      border:1px solid var(--border);
      background: var(--btn);
      color:white;
      border-radius: 14px;
      padding: clamp(10px, 1.6vw, 12px) clamp(12px, 1.8vw, 14px);
      font-weight: 900;
      cursor:pointer;
      font-size: clamp(12px, 1.6vw, 13px);
      white-space:nowrap;
      transition: transform .06s ease, filter .12s ease, opacity .12s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    button:hover{ filter: brightness(1.03); }
    button:active{ transform: translateY(1px); }
    button.secondary{
      background:#f3f4f6;
      color:#111827;
      font-weight: 900;
    }
    button:disabled{
      opacity:.55;
      cursor:not-allowed;
      filter:none;
    }

    .stage{
      flex: 1 1 auto;
      min-height: 0;
      border:1px solid var(--border);
      border-radius: 16px;
      background: #fff;
      padding: clamp(10px, 1.8vw, 14px);
      overflow:hidden;
      height: clamp(620px, 78vh, 900px);
      display:flex;
      flex-direction:column;
      gap: clamp(10px, 1.6vw, 12px);
      position: relative;
    }

    .screen{
      flex:1 1 auto;
      min-height:0;
      overflow:hidden;
      display:none;
    }
    .screen.active{ display:block; }

    /* SETUP */
    .setup{
      height:100%;
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: clamp(12px, 2.0vw, 16px);
      overflow:hidden;
    }

    .hero{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 16px;
      background:
        radial-gradient(520px 360px at 25% 18%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, var(--accent1), var(--accent2));
      position:relative;
      overflow:hidden;
      min-height:0;
      display:flex;
      flex-direction:column;
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(900px 620px at 20% 10%, rgba(255,255,255,.32), rgba(255,255,255,0) 60%);
      pointer-events:none;
    }
    .heroInner{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:12px;
      min-height:0;
      flex:1 1 auto;
    }
    .heroTitle{
      margin:0;
      font-size: clamp(20px, 3.2vw, 34px);
      font-weight: 950;
      letter-spacing:.2px;
      width: fit-content;
      background: rgba(255,255,255,.92);
      border:1px solid rgba(0,0,0,.10);
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: 0 14px 28px rgba(0,0,0,.10);
      color:#0b1220;
    }
    .heroDesc{
      max-width: 60ch;
      background: rgba(255,255,255,.80);
      border:1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      padding: 12px 14px;
      font-weight: 750;
      line-height: 1.35;
      color: rgba(15,23,42,.92);
    }

    .settings{
      border:1px solid var(--border);
      border-radius: 18px;
      background:#fff;
      padding: 12px;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }

    .settingsTitle{
      margin:0 0 10px 0;
      font-size: 14px;
      color: var(--muted);
      font-weight: 900;
      letter-spacing:.2px;
      flex:0 0 auto;
    }

    .block{
      border:1px solid var(--border);
      background: var(--soft);
      border-radius: 14px;
      padding: 10px;
    }

    .label{
      font-size: 13px;
      color: var(--muted);
      font-weight: 900;
      margin-bottom: 6px;
    }

    input, select{
      width:100%;
      padding: 11px 12px;
      border-radius: 12px;
      border:1px solid var(--border);
      font-weight: 850;
      font-size: 14px;
      background:#fff;
      outline:none;
    }

    .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .small{
      font-size:12px;
      color: var(--muted);
      font-weight: 750;
      margin-top:6px;
      line-height:1.25;
    }

    .spacer{ flex:1 1 auto; min-height: 10px; }
    .startRow{ display:flex; justify-content:flex-end; gap:10px; align-items:center; }

    /* GAME */
    .game{
      height:100%;
      display:grid;
      grid-template-columns: 1.45fr 0.55fr;
      gap: clamp(12px, 2.0vw, 16px);
      overflow:hidden;
      align-items:stretch;
    }

    .main{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
      background:#fff;
    }

    .mainTop{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 10px;
      flex:0 0 auto;
    }

    .hearts{
      font-size: 18px;
      letter-spacing: 2px;
      line-height: 1.1;
      text-align:center;
      padding: 10px 12px;
      border:1px solid var(--border);
      background: var(--soft);
      border-radius: 16px;
      flex:0 0 auto;
      margin-bottom: 10px;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }

    .wordZone{
      flex: 0 0 auto;
      display:grid;
      gap: 10px;
      margin-bottom: 10px;
    }

    .box{
      border:1px solid var(--border);
      background: var(--soft);
      border-radius: 18px;
      padding: clamp(12px, 1.8vw, 16px);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    .scrambled{
      font-weight: 950;
      text-align:center;
      color:#0b1220;
      white-space: nowrap;
      max-width: 100%;
      overflow: visible;
      text-overflow: clip;
      letter-spacing: clamp(6px, 1.3vw, 18px);
      font-size: 44px;
      transform-origin: center;
    }

    .revealed{
      font-weight: 900;
      text-align:center;
      color:#111827;
      white-space: nowrap;
      max-width: 100%;
      overflow: visible;
      text-overflow: clip;
      letter-spacing: clamp(4px, 1.0vw, 12px);
      font-size: 32px;
      transform-origin: center;
    }

    .actionsWrap{
      flex: 1 1 auto;
      min-height: 0;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    .actions{
      width: min(520px, 100%);
      display:grid;
      gap: 10px;
    }

    .side{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      background:#fff;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
    }

    .stat{
      border:1px solid var(--border);
      border-radius: 16px;
      padding: 10px;
      background:#fafafa;
      font-size: 12px;
      color: var(--muted);
      font-weight: 850;
      min-width:0;
      margin-bottom: 10px;
    }
    .stat strong{
      display:block;
      margin-top: 3px;
      font-size: 18px;
      color: var(--text);
      font-weight: 950;
      line-height:1.05;
    }

    .stat.hidden{ display:none; }

    .msg{
      border:1px solid var(--border);
      border-radius: 16px;
      background: var(--soft);
      padding: 10px;
      font-size: 13px;
      color: var(--muted);
      font-weight: 850;
      line-height:1.25;
      min-height: 64px;
    }

    .msg strong{ color: var(--text); font-weight: 950; }

    .sideButtons{
      display:grid;
      gap:10px;
      margin-top:auto;
    }

    @media (max-width: 980px){
      .setup{ grid-template-columns: 1fr; }
      .row2{ grid-template-columns: 1fr; }
      .game{ grid-template-columns: 1fr; }
      .side{ min-height: 220px; }
    }
}

/* ----- page-viergewinnt ----- */
body.page-viergewinnt {
& {
      --bg:#f6f7fb;
      --card:#ffffff;
      --text:#0b1220;
      --muted:#4b5563;
      --border:#e5e7eb;
      --shadow: 0 22px 60px rgba(0,0,0,.10);

      --btn:#111827;
      --p1:#ef4444;   /* rot */
      --p2:#f59e0b;   /* gelb/orange */
    }

    *{ box-sizing:border-box; }
& { height:100%; }
& {
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);

      overflow:auto;
      -webkit-overflow-scrolling: touch;

      display:flex;
      justify-content:center;
      align-items:center;

      padding:
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-top))
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-right))
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-bottom))
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-left));
    }

    .app{
      width: min(1120px, 100%);
      height: min(96dvh, 980px);
      height: min(96vh, 980px);
      background: var(--card);
      border:1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: clamp(12px, 2.0vw, 18px);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap: clamp(10px, 1.6vw, 14px);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex: 0 0 auto;
    }

    .topbar h1{
      margin:0;
      font-size: clamp(16px, 2.2vw, 20px);
      letter-spacing:.2px;
    }

    .topbarActions{
      display:flex;
      gap:10px;
      align-items:center;
    }

    button{
      border:1px solid var(--border);
      background: var(--btn);
      color:white;
      border-radius: 14px;
      padding: clamp(10px, 1.6vw, 12px) clamp(12px, 1.8vw, 14px);
      font-weight: 850;
      cursor:pointer;
      font-size: clamp(12px, 1.6vw, 13px);
      white-space:nowrap;
      transition: transform .06s ease, filter .12s ease, opacity .12s ease;

      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select:none;
    }
    button:hover{ filter: brightness(1.03); }
    button:active{ transform: translateY(1px); }
    button.secondary{
      background:#f3f4f6;
      color:#111827;
      font-weight: 850;
    }
    button:disabled{
      opacity:.55;
      cursor:not-allowed;
      filter:none;
    }

    .stage{
      flex: 1 1 auto;
      min-height: 0;
      border:1px solid var(--border);
      border-radius: 16px;
      background: #fff;
      padding: clamp(10px, 1.8vw, 14px);
      overflow:hidden;

      height: clamp(620px, 78vh, 820px);
      display:flex;
      flex-direction:column;
      gap: clamp(10px, 1.6vw, 12px);
      position: relative;
    }

    .screen{ flex:1 1 auto; min-height:0; overflow:hidden; display:none; }
    .screen.active{ display:block; }

    /* ---------- SETUP ---------- */
    .setup{
      height:100%;
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: clamp(12px, 2.0vw, 16px);
      overflow:hidden;
    }

    .hero{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 16px;
      background:
        radial-gradient(560px 380px at 25% 18%, rgba(255,255,255,.86), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, #1e40af, #93c5fd);
      position:relative;
      overflow:hidden;
      min-height:0;
      display:flex;
      flex-direction:column;
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(980px 680px at 20% 10%, rgba(255,255,255,.34), rgba(255,255,255,0) 62%);
      pointer-events:none;
    }
    .heroInner{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:12px;
      min-height:0;
      flex:1 1 auto;
    }
    .heroTitle{
      margin:0;
      font-size: clamp(20px, 3.2vw, 34px);
      font-weight: 950;
      letter-spacing:.2px;
      width: fit-content;
      background: rgba(255,255,255,.92);
      border:1px solid rgba(0,0,0,.10);
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: 0 14px 28px rgba(0,0,0,.10);
      color:#0b1220;
    }
    .heroDesc{
      max-width: 60ch;
      background: rgba(255,255,255,.82);
      border:1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      padding: 12px 14px;
      font-weight: 750;
      line-height: 1.35;
      color: rgba(15,23,42,.92);
    }
    .chips{
      margin-top:auto;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      padding-top: 6px;
    }
    .chip{
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 999px;
      padding: 8px 12px;
      font-weight: 850;
      color:#0b1220;
      font-size: 13px;
      box-shadow: 0 10px 20px rgba(0,0,0,.08);
    }

    .settings{
      border:1px solid var(--border);
      border-radius: 18px;
      background:#fff;
      padding: 12px;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }
    .settingsTitle{
      margin:0 0 10px 0;
      font-size: 14px;
      color: var(--muted);
      font-weight: 850;
      letter-spacing:.2px;
      flex:0 0 auto;
    }
    .block{
      border:1px solid var(--border);
      background:#f8fafc;
      border-radius: 14px;
      padding: 10px;
    }
    .label{
      font-size: 13px;
      color: var(--muted);
      font-weight: 850;
      margin-bottom: 6px;
    }
    input, select{
      width:100%;
      padding: 11px 12px;
      border-radius: 12px;
      border:1px solid var(--border);
      font-weight: 800;
      font-size: 14px;
      background:#fff;
      outline:none;
      touch-action: manipulation;
    }

    .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .small{ font-size:12px; color: var(--muted); font-weight: 750; margin-top:6px; line-height:1.25; }
    .spacer{ flex:1 1 auto; min-height: 10px; }
    .startRow{ display:flex; justify-content:flex-end; gap:10px; align-items:center; }

    /* ---------- GAME ---------- */
    .game{
      height:100%;
      display:grid;
      grid-template-columns: 1.70fr 0.60fr;
      gap: clamp(12px, 2.0vw, 16px);
      overflow:hidden;
      align-items:stretch;
    }

    .boardWrap{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
      background:#fff;
    }

    .metaTop{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
      margin-bottom: 10px;
      flex:0 0 auto;
    }
    .metaStrong{ color: var(--text); font-weight: 950; }

    .boardArea{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      align-items:center;
      justify-content:center;

      /* wichtig: NICHT abschneiden, aber auch keine “Doppelscroll” */
      overflow:hidden;
      position:relative;
      border-radius: 16px;

      /* Luft für schwarze Ringe */
      padding: 14px;
    }

    .board{
      --cell: 72px;   /* per JS */
      --gap: 10px;

      display:grid;
      grid-template-columns: repeat(7, var(--cell));
      grid-template-rows: repeat(6, var(--cell));
      gap: var(--gap);

      padding: calc(var(--gap) * 1.1);
      border-radius: 18px;
      background:
        radial-gradient(760px 520px at 25% 18%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, #1e40af, #2563eb);
      box-shadow:
        inset 0 -18px 30px rgba(0,0,0,.18),
        0 24px 60px rgba(0,0,0,.12);
      border: 1px solid rgba(0,0,0,.20);
      position:relative;
      overflow:visible;
    }

    .cell{
      width: var(--cell);
      height: var(--cell);
      border-radius: 999px;
      background: rgba(0,0,0,.22);
      box-shadow:
        inset 0 12px 20px rgba(0,0,0,.25),
        inset 0 -10px 18px rgba(255,255,255,.10);
      display:grid;
      place-items:center;
      position:relative;
      overflow:visible;
    }

    /* FIX: KEIN inline opacity mehr verwenden */
    .piece{
      width: 84%;
      height: 84%;
      border-radius: 999px;
      background: rgba(255,255,255,.16);
      box-shadow:
        inset 0 10px 18px rgba(255,255,255,.22),
        inset 0 -16px 22px rgba(0,0,0,.18);
      opacity: 0;
      transform: translateZ(0);
      will-change: transform, opacity;
    }
    .piece.p1{ background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.65), rgba(255,255,255,0) 44%), var(--p1); }
    .piece.p2{ background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.65), rgba(255,255,255,0) 44%), var(--p2); }

    .piece.show{
      opacity: 1;
      animation: drop .18s ease-out;
    }
    @keyframes drop{
      from { transform: translateY(-18px) scale(.98); }
      to   { transform: translateY(0) scale(1); }
    }

    .colHits{
      position:absolute;
      inset: 0;
      display:grid;
      grid-template-columns: repeat(7, 1fr);
      gap: var(--gap);
      padding: calc(var(--gap) * 1.1);
      pointer-events:auto;
    }
    .colBtn{
      border:none;
      background: transparent;
      cursor:pointer;
      border-radius: 14px;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select:none;
    }
    .colBtn:hover{ background: rgba(255,255,255,.08); }
    .colBtn:active{ background: rgba(255,255,255,.12); }
    .colBtn:disabled{ cursor:not-allowed; opacity:.6; }

    .winRing{
      outline: 4px solid #000;
      outline-offset: 0;
      box-shadow: 0 14px 28px rgba(0,0,0,.18);
    }

    .side{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      background:#fff;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }

    .stats{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 10px;
      flex:0 0 auto;
    }
    .stat{
      border:1px solid var(--border);
      border-radius: 16px;
      padding: 10px;
      background:#fafafa;
      font-size: 12px;
      color: var(--muted);
      font-weight: 800;
      min-width:0;
    }
    .stat strong{
      display:block;
      margin-top: 3px;
      font-size: 18px;
      color: var(--text);
      font-weight: 950;
      line-height:1.05;
    }

    .pillRow{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      margin-bottom: 10px;
    }
    .turnPill{
      border:1px solid var(--border);
      border-radius: 999px;
      padding: 8px 10px;
      background:#fff;
      font-weight: 900;
      font-size: 12px;
      color:#111827;
      display:flex;
      align-items:center;
      gap:8px;
    }
    .dot{
      width: 14px; height: 14px; border-radius: 999px;
      border:1px solid rgba(0,0,0,.25);
      box-shadow: inset 0 -8px 12px rgba(0,0,0,.12);
    }
    .dot.p1{ background: var(--p1); }
    .dot.p2{ background: var(--p2); }

    .infoBox{
      border:1px solid var(--border);
      border-radius: 16px;
      background:#fafafa;
      padding: 10px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 800;
      line-height:1.25;
      flex:0 0 auto;
      margin-bottom: 10px;
    }

    .sideButtons{
      display:grid;
      gap:10px;
      margin-top:auto;
      flex:0 0 auto;
      padding-bottom: env(safe-area-inset-bottom);
    }

    .overlay{
      position:absolute;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(2px);
      border-radius: 16px;
      z-index: 5;
      padding: 12px;
      pointer-events:auto;
    }
    .overlay.active{ display:flex; }
    .overlayCard{
      background:#fff;
      border:1px solid var(--border);
      border-radius: 18px;
      box-shadow: 0 24px 60px rgba(0,0,0,.14);
      padding: 14px 16px;
      text-align:center;
      max-width: 520px;
      width: min(520px, 92%);
    }
    .overlayCard h2{
      margin:0 0 8px 0;
      font-size: clamp(18px, 2.6vw, 22px);
      letter-spacing:.2px;
    }
    .overlayCard p{
      margin:0;
      color: var(--muted);
      font-weight: 800;
      line-height:1.35;
      font-size: 13px;
    }

    @media (max-width: 980px){
      .setup{ grid-template-columns: 1fr; }
      .row2{ grid-template-columns: 1fr; }
      .game{ grid-template-columns: 1fr; }
      .side{ min-height: 220px; }
    }

    @media (max-height: 700px){
      .app{ height: min(98dvh, 980px); height: min(98vh, 980px); }
      .stat strong{ font-size: 16px; }
    }
}

/* ----- page-ueberstapeln ----- */
body.page-ueberstapeln {
& {
      --bg:#f6f7fb;
      --card:#ffffff;
      --text:#0b1220;
      --muted:#4b5563;
      --border:#e5e7eb;
      --shadow: 0 22px 60px rgba(0,0,0,.10);

      --btn:#111827;

      /* Spielerfarben */
      --p1:#ef4444; /* rot */
      --p2:#2563eb; /* blau */

      --gap: 14px;
    }

    *{ box-sizing:border-box; }
& { height:100%; }
& {
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);

      display:flex;
      justify-content:center;
      align-items:center;

      overflow:auto;
      -webkit-overflow-scrolling: touch;

      padding:
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-top))
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-right))
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-bottom))
        calc(clamp(10px, 2.0vw, 18px) + env(safe-area-inset-left));
    }

    .app{
      width: min(1120px, 100%);
      height: min(96dvh, 980px);
      height: min(96vh, 980px);
      background: var(--card);
      border:1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: clamp(12px, 2.0vw, 18px);

      display:flex;
      flex-direction:column;
      gap: clamp(10px, 1.6vw, 14px);
      overflow:hidden;
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex:0 0 auto;
    }

    .topbar h1{
      margin:0;
      font-size: clamp(16px, 2.2vw, 20px);
      letter-spacing:.2px;
    }

    .topbarActions{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    button{
      border:1px solid var(--border);
      background: var(--btn);
      color:white;
      border-radius: 14px;
      padding: clamp(10px, 1.6vw, 12px) clamp(12px, 1.8vw, 14px);
      font-weight: 850;
      cursor:pointer;
      font-size: clamp(12px, 1.6vw, 13px);
      white-space:nowrap;
      transition: transform .06s ease, filter .12s ease, opacity .12s ease;

      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select:none;
    }
    button:hover{ filter: brightness(1.03); }
    button:active{ transform: translateY(1px); }
    button.secondary{
      background:#f3f4f6;
      color:#111827;
    }
    button:disabled{
      opacity:.55;
      cursor:not-allowed;
      filter:none;
    }

    .stage{
      flex: 1 1 auto;
      min-height:0;
      border:1px solid var(--border);
      border-radius: 16px;
      background:#fff;
      padding: clamp(10px, 1.8vw, 14px);
      overflow:hidden;
    }

    .screen{
      height:100%;
      display:none;
      min-height:0;
      overflow:hidden;
    }
    .screen.active{ display:block; }

    /* SETUP */
    .setup{
      height:100%;
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: clamp(12px, 2.0vw, 16px);
      overflow:hidden;
    }

    .hero{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 16px;
      background:
        radial-gradient(520px 360px at 25% 18%, rgba(255,255,255,.78), rgba(255,255,255,0) 60%),
        linear-gradient(135deg, #1e3a8a, #60a5fa);
      position:relative;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height:0;
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(900px 620px at 20% 10%, rgba(255,255,255,.32), rgba(255,255,255,0) 60%);
      pointer-events:none;
    }
    .heroInner{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:12px;
      flex:1 1 auto;
      min-height:0;
    }
    .heroTitle{
      margin:0;
      font-size: clamp(20px, 3.2vw, 34px);
      font-weight: 950;
      letter-spacing:.2px;
      width: fit-content;
      background: rgba(255,255,255,.92);
      border:1px solid rgba(0,0,0,.10);
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: 0 14px 28px rgba(0,0,0,.10);
      color:#0b1220;
    }
    .heroDesc{
      max-width: 60ch;
      background: rgba(255,255,255,.80);
      border:1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      padding: 12px 14px;
      font-weight: 750;
      line-height: 1.35;
      color: rgba(15,23,42,.92);
    }
    .chips{
      margin-top:auto;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      padding-top: 6px;
    }
    .chip{
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 999px;
      padding: 8px 12px;
      font-weight: 900;
      color:#0b1220;
      font-size: 13px;
      box-shadow: 0 10px 20px rgba(0,0,0,.08);
    }

    .settings{
      border:1px solid var(--border);
      border-radius: 18px;
      background:#fff;
      padding: 12px;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }

    .settingsTitle{
      margin:0 0 10px 0;
      font-size: 14px;
      color: var(--muted);
      font-weight: 900;
      letter-spacing:.2px;
      flex:0 0 auto;
    }

    .block{
      border:1px solid var(--border);
      background:#f8fafc;
      border-radius: 14px;
      padding: 10px;
    }
    .label{
      font-size: 13px;
      color: var(--muted);
      font-weight: 900;
      margin-bottom: 6px;
    }

    input, select{
      width:100%;
      padding: 11px 12px;
      border-radius: 12px;
      border:1px solid var(--border);
      font-weight: 850;
      font-size: 14px;
      background:#fff;
      outline:none;
      touch-action: manipulation;
    }

    .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .small{
      font-size:12px;
      color: var(--muted);
      font-weight: 750;
      margin-top:6px;
      line-height:1.25;
    }

    .spacer{ flex:1 1 auto; min-height: 10px; }
    .startRow{ display:flex; justify-content:flex-end; gap:10px; align-items:center; }

    /* GAME */
    .game{
      height:100%;
      display:grid;
      grid-template-columns: 1.70fr 0.60fr;
      gap: clamp(12px, 2.0vw, 16px);
      overflow:hidden;
      align-items:stretch;
    }

    .boardWrap{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
    }

    .metaTop{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 10px;
      flex:0 0 auto;
      flex-wrap:wrap;
    }
    .metaStrong{ color: var(--text); font-weight: 950; }

    .boardArea{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      position:relative;
    }

    .grid{
      --cell: 140px;
      display:grid;
      grid-template-columns: repeat(3, var(--cell));
      grid-auto-rows: var(--cell);
      gap: var(--gap);
      justify-content:center;
      align-content:center;

      /* Mehr Reserve, damit schwarze Ränder NIE abgeschnitten werden */
      padding: 18px;
      overflow: visible;
    }

    .cell{
      width: var(--cell);
      height: var(--cell);
      border:1px solid rgba(0,0,0,.14);
      border-radius: 18px;
      background:#fafafa;
      cursor:pointer;
      position:relative;
      box-shadow: inset 0 -16px 30px rgba(0,0,0,.06);
      transition: transform .06s ease, filter .12s ease, box-shadow .12s ease;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      user-select:none;
    }
    .cell:active{ transform: scale(.99); }
    .cell.disabled{ cursor:not-allowed; opacity:.75; }

    .cell::after{
      content:"";
      position:absolute; inset:0;
      border-radius: 18px;
      background: radial-gradient(520px 360px at 25% 18%, rgba(255,255,255,.50), rgba(255,255,255,0) 60%);
      pointer-events:none;
      opacity:.6;
    }

    /* ---------------- STEINE: hübscher ---------------- */
    .piece{
      position:absolute;

      /* etwas mehr Abstand -> Rand oben/unten sichtbar */
      inset: 14px;

      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:center;

      color: rgba(255,255,255,.96);
      font-weight: 950;
      letter-spacing:.4px;

      /* dicker schwarzer Rand, aber nicht abgeschnitten */
      border: 4px solid #000;

      box-shadow:
        0 18px 40px rgba(0,0,0,.18),
        inset 0 14px 20px rgba(255,255,255,.16),
        inset 0 -20px 30px rgba(0,0,0,.22);

      transform: translateZ(0);
    }

    /* Glanz */
    .piece::before{
      content:"";
      position:absolute;
      inset: 10%;
      border-radius: 999px;
      background: radial-gradient(240px 160px at 30% 25%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
      pointer-events:none;
      mix-blend-mode: screen;
      opacity:.85;
    }

    /* Innenring */
    .piece::after{
      content:"";
      position:absolute;
      inset: 12%;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,.35);
      pointer-events:none;
      box-shadow: inset 0 -10px 18px rgba(0,0,0,.10);
    }

    /* Farbverläufe je Spieler */
    .p1{
      background: linear-gradient(135deg, #ff6b6b, var(--p1));
    }
    .p2{
      background: linear-gradient(135deg, #60a5fa, var(--p2));
    }

    /* Größen (S/M/L) */
    .sz1{ inset: 30px; }
    .sz2{ inset: 22px; }
    .sz3{ inset: 14px; }

    .pieceLabel{
      position:relative;
      z-index: 2;
      font-size: 18px;
      line-height:1;
      text-shadow: 0 2px 0 rgba(0,0,0,.35);
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: inset 0 -10px 18px rgba(0,0,0,.10);
    }

    .side{
      border:1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      background:#fff;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }

    .stats{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 10px;
      flex:0 0 auto;
    }

    .stat{
      border:1px solid var(--border);
      border-radius: 16px;
      padding: 10px;
      background:#fafafa;
      font-size: 12px;
      color: var(--muted);
      font-weight: 900;
      min-width:0;
    }
    .stat strong{
      display:block;
      margin-top: 3px;
      font-size: 18px;
      color: var(--text);
      font-weight: 950;
      line-height:1.05;
    }

    .picker{
      border:1px solid var(--border);
      border-radius: 16px;
      background:#fafafa;
      padding: 10px;
      margin-bottom: 10px;
      flex:0 0 auto;
    }
    .pickerTitle{
      font-size: 12px;
      color: var(--muted);
      font-weight: 900;
      margin-bottom: 8px;
    }

    .pickRow{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:10px;
    }

    .pickBtn{
      border:1px solid var(--border);
      border-radius: 14px;
      padding: 10px 10px;
      background:#fff;
      color:#111827;
      font-weight: 950;
      cursor:pointer;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:4px;
      min-height: 56px;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      user-select:none;
      transition: transform .06s ease, filter .12s ease, opacity .12s ease;
    }
    .pickBtn:active{ transform: translateY(1px); }
    .pickBtn.selected{
      outline: 4px solid #000;
      outline-offset: 0px;
    }
    .pickBtn.disabled{
      opacity:.5;
      cursor:not-allowed;
    }

    .pickDot{
      border-radius: 999px;
      border: 3px solid #000;
      box-shadow:
        0 10px 20px rgba(0,0,0,.12),
        inset 0 -10px 18px rgba(0,0,0,.20),
        inset 0 10px 18px rgba(255,255,255,.18);
    }
    .dot1{ width: 22px; height: 22px; }
    .dot2{ width: 28px; height: 28px; }
    .dot3{ width: 34px; height: 34px; }

    .msg{
      border:1px solid var(--border);
      border-radius: 16px;
      background:#fafafa;
      padding: 10px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 900;
      line-height:1.25;
      flex:0 0 auto;
      margin-bottom: 10px;
    }
    .msg strong{ color: var(--text); }

    .sideButtons{
      display:grid;
      gap:10px;
      margin-top:auto;
      flex:0 0 auto;
    }

    @media (max-width: 980px){
      .setup{ grid-template-columns: 1fr; }
      .row2{ grid-template-columns: 1fr; }
      .game{ grid-template-columns: 1fr; }
& { --gap: 12px; }
    }

    @media (max-height: 700px){
      .app{
        height: min(98dvh, 980px);
        height: min(98vh, 980px);
      }
      .stat strong{ font-size: 16px; }
    }
}

/* ----- globale Lesbarkeit für Spiele/Index ----- */
body.page-index,
body.page-impressum,
body.page-paarefinden,
body.page-reaktionsspiel,
body.page-farbfolge,
body.page-worterraten,
body.page-wortsalat,
body.page-viergewinnt,
body.page-ueberstapeln {
  color: var(--chalk-text) !important;
}

body.page-index .app,
body.page-impressum .app,
body.page-paarefinden .app,
body.page-reaktionsspiel .app,
body.page-farbfolge .app,
body.page-worterraten .app,
body.page-wortsalat .app,
body.page-viergewinnt .app,
body.page-ueberstapeln .app,
body.page-index .stage,
body.page-impressum .stage,
body.page-paarefinden .stage,
body.page-reaktionsspiel .stage,
body.page-farbfolge .stage,
body.page-worterraten .stage,
body.page-wortsalat .stage,
body.page-viergewinnt .stage,
body.page-ueberstapeln .stage,
body.page-index .panel,
body.page-paarefinden .panel,
body.page-reaktionsspiel .panel,
body.page-farbfolge .panel,
body.page-worterraten .panel,
body.page-wortsalat .panel,
body.page-viergewinnt .panel,
body.page-ueberstapeln .panel {
  background: linear-gradient(180deg, rgba(30, 82, 50, 0.95) 0%, rgba(24, 63, 39, 0.95) 100%) !important;
  border-color: var(--chalk-border) !important;
  color: var(--chalk-text-soft) !important;
}

body.page-index p,
body.page-impressum p,
body.page-paarefinden p,
body.page-reaktionsspiel p,
body.page-farbfolge p,
body.page-worterraten p,
body.page-wortsalat p,
body.page-viergewinnt p,
body.page-ueberstapeln p,
body.page-paarefinden li,
body.page-impressum li,
body.page-reaktionsspiel li,
body.page-farbfolge li,
body.page-worterraten li,
body.page-wortsalat li,
body.page-viergewinnt li,
body.page-ueberstapeln li,
body.page-paarefinden label,
body.page-reaktionsspiel label,
body.page-farbfolge label,
body.page-worterraten label,
body.page-wortsalat label,
body.page-viergewinnt label,
body.page-ueberstapeln label {
  color: var(--chalk-text-soft) !important;
}

body.page-index h1,
body.page-index h2,
body.page-impressum h1,
body.page-paarefinden h1,
body.page-reaktionsspiel h1,
body.page-farbfolge h1,
body.page-worterraten h1,
body.page-wortsalat h1,
body.page-viergewinnt h1,
body.page-ueberstapeln h1 {
  color: var(--chalk-heading) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

/* Index: kein Kasten im Kasten + Logo links + bessere Lesbarkeit */
body.page-index .header {
  justify-content: flex-start !important;
}

body.page-index .brand {
  background: var(--chalk-brand-bg);
  border: 1px solid var(--chalk-brand-border);
  border-radius: 12px;
  padding: 6px 10px;
}

body.page-index .brand .main,
body.page-index .brand .suffix {
  color: #f8fff3 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

body.page-index .sliderCard {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.page-index .thumb.bg0::before { background: linear-gradient(135deg, #3aa95a, #2f8d4c) !important; }
body.page-index .thumb.bg1::before { background: linear-gradient(135deg, #43b165, #2a7f43) !important; }
body.page-index .thumb.bg2::before { background: linear-gradient(135deg, #4dbb6e, #367f4f) !important; }
body.page-index .thumb.bg3::before { background: linear-gradient(135deg, #5ec579, #2f8b4d) !important; }
body.page-index .thumb.bg4::before { background: linear-gradient(135deg, #73cd88, #3a8d57) !important; }
body.page-index .thumb.bg5::before { background: linear-gradient(135deg, #89d79a, #4a9765) !important; }

body.page-index .cardBody {
  background: rgba(18, 49, 31, 0.86) !important;
}

body.page-index .cardBody p,
body.page-index .sliderTitle,
body.page-index .thumbLabel {
  color: #e9f7e7 !important;
}

/* ===================================================== */
/* Final Layout + Contrast Overrides                     */
/* ===================================================== */
:root {
  --dark-green-1: #214c32;
  --dark-green-2: #163826;
  --dark-gray-1: #1b1f21;
  --dark-gray-2: #121518;
  --text-main: #f3f8f4;
  --text-soft: #d8e4da;
  --line-soft: #6f8c79;
}

body.page-index,
body.page-impressum,
body.page-datenschutz,
body.page-kontakt,
body.page-hilfe,
body.page-paarefinden,
body.page-reaktionsspiel,
body.page-farbfolge,
body.page-worterraten,
body.page-wortsalat,
body.page-viergewinnt,
body.page-ueberstapeln {
  margin: 0 !important;
  padding:
    calc(clamp(10px, 2vw, 20px) + env(safe-area-inset-top))
    calc(clamp(10px, 2vw, 20px) + env(safe-area-inset-right))
    calc(clamp(10px, 2vw, 20px) + env(safe-area-inset-bottom))
    calc(clamp(10px, 2vw, 20px) + env(safe-area-inset-left)) !important;
  min-height: 100dvh !important;
}

/* Einheitliche moderate Breite + abgerundeter Hauptkasten */
body.page-index .shell,
body.page-impressum .app,
body.page-datenschutz .wrap,
body.page-kontakt .wrap,
body.page-hilfe .wrap,
body.page-paarefinden .app,
body.page-reaktionsspiel .app,
body.page-farbfolge .app,
body.page-worterraten .app,
body.page-wortsalat .app,
body.page-viergewinnt .app,
body.page-ueberstapeln .app {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-impressum .app,
body.page-paarefinden .app,
body.page-reaktionsspiel .app,
body.page-farbfolge .app,
body.page-worterraten .app,
body.page-wortsalat .app,
body.page-viergewinnt .app,
body.page-ueberstapeln .app {
  border-radius: 20px !important;
  height: auto !important;
  min-height: calc(100dvh - 2 * clamp(10px, 2vw, 20px)) !important;
  max-height: none !important;
}

/* Startseite: oben/unten Luft + Footer sichtbar */
body.page-index .shell {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: calc(100dvh - 2 * clamp(10px, 2vw, 20px)) !important;
  height: auto !important;
}

body.page-index .app {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  border-radius: 20px !important;
}

body.page-index .legalBar {
  flex: 0 0 auto !important;
  margin-top: 2px !important;
}

body.page-index .header {
  justify-content: flex-start !important;
}

body.page-index .brand {
  background: rgba(12, 25, 18, 0.68) !important;
  border: 1px solid rgba(188, 232, 191, 0.5) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
}

body.page-index .brand .main,
body.page-index .brand .suffix {
  color: #fbfffa !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.62) !important;
}

/* Kein Kasten-im-Kasten für Slider */
body.page-index .sliderCard {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

body.page-index .viewport {
  flex: 1 1 auto !important;
  min-height: clamp(360px, 56vh, 720px) !important;
}

body.page-index .track {
  display: flex !important;
  gap: 16px !important;
  align-items: stretch !important;
}

body.page-index .gameCard {
  flex: 0 0 calc((100% - 32px) / 3) !important;
  border-radius: 16px !important;
  border: 1px solid #6f8c79 !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #1d3f2c 0%, #152d20 100%) !important;
}

body.page-index .thumb.bg0::before { background: linear-gradient(135deg, #2f7b4f, #1f2326) !important; }
body.page-index .thumb.bg1::before { background: linear-gradient(135deg, #3a8859, #1c1f22) !important; }
body.page-index .thumb.bg2::before { background: linear-gradient(135deg, #4b9766, #23292c) !important; }
body.page-index .thumb.bg3::before { background: linear-gradient(135deg, #2f7a4e, #171b1e) !important; }
body.page-index .thumb.bg4::before { background: linear-gradient(135deg, #3f8a5c, #262c30) !important; }
body.page-index .thumb.bg5::before { background: linear-gradient(135deg, #4a9363, #1b2024) !important; }

body.page-index .cardBody {
  background: linear-gradient(180deg, #1b1f21 0%, #121518 100%) !important;
  border-top: 1px solid rgba(190, 210, 198, 0.24) !important;
}

body.page-index .sliderTitle,
body.page-index .thumbLabel,
body.page-index .cardBody p,
body.page-index .legalBar a {
  color: var(--text-main) !important;
}

body.page-index .nav {
  background: linear-gradient(180deg, #2a5f40 0%, #1e4632 100%) !important;
  border-color: #84a992 !important;
  color: #f7fff5 !important;
}

@media (max-width: 980px) {
  body.page-index .gameCard {
    flex: 0 0 calc((100% - 16px) / 2) !important;
  }
}

@media (max-width: 640px) {
  body.page-index .gameCard {
    flex: 0 0 100% !important;
  }
}

/* Spiele: dunkle Flächen, weiße Schrift, keine hellen/blauen Restflächen */
body.page-paarefinden .app,
body.page-reaktionsspiel .app,
body.page-farbfolge .app,
body.page-worterraten .app,
body.page-wortsalat .app,
body.page-viergewinnt .app,
body.page-ueberstapeln .app {
  --bg: #1a1f22 !important;
  --card: #1d2426 !important;
  --text: #f3f8f4 !important;
  --muted: #c7d6cb !important;
  --border: #6f8c79 !important;
  background: linear-gradient(180deg, var(--dark-green-1) 0%, var(--dark-green-2) 56%, var(--dark-gray-2) 100%) !important;
}

body.page-paarefinden .stage,
body.page-reaktionsspiel .stage,
body.page-farbfolge .stage,
body.page-worterraten .stage,
body.page-wortsalat .stage,
body.page-viergewinnt .stage,
body.page-ueberstapeln .stage,
body.page-paarefinden .setup,
body.page-reaktionsspiel .setup,
body.page-worterraten .setup,
body.page-wortsalat .setup,
body.page-viergewinnt .setup,
body.page-ueberstapeln .setup,
body.page-paarefinden .panel,
body.page-reaktionsspiel .panel,
body.page-farbfolge .panel,
body.page-worterraten .panel,
body.page-wortsalat .panel,
body.page-viergewinnt .panel,
body.page-ueberstapeln .panel,
body.page-paarefinden .side,
body.page-reaktionsspiel .side,
body.page-worterraten .side,
body.page-wortsalat .side,
body.page-viergewinnt .side,
body.page-ueberstapeln .side,
body.page-paarefinden .settings,
body.page-reaktionsspiel .settings,
body.page-viergewinnt .settings,
body.page-ueberstapeln .settings,
body.page-reaktionsspiel .hero,
body.page-worterraten .hero,
body.page-wortsalat .hero,
body.page-viergewinnt .hero,
body.page-ueberstapeln .hero,
body.page-reaktionsspiel .heroInner,
body.page-worterraten .heroInner,
body.page-wortsalat .heroInner,
body.page-viergewinnt .heroInner,
body.page-ueberstapeln .heroInner,
body.page-paarefinden .boardCard,
body.page-viergewinnt .boardWrap,
body.page-ueberstapeln .boardWrap,
body.page-paarefinden .card,
body.page-viergewinnt .card,
body.page-ueberstapeln .card,
body.page-viergewinnt .board,
body.page-viergewinnt .cell,
body.page-ueberstapeln .grid,
body.page-ueberstapeln .cell,
body.page-worterraten .main,
body.page-wortsalat .main,
body.page-reaktionsspiel .infoBox,
body.page-worterraten .msg,
body.page-wortsalat .msg,
body.page-viergewinnt .turnPill,
body.page-viergewinnt .overlayCard,
body.page-viergewinnt .overlay,
body.page-viergewinnt .stat,
body.page-ueberstapeln .stat,
body.page-paarefinden .chip,
body.page-reaktionsspiel .chip,
body.page-farbfolge .chip,
body.page-worterraten .chip,
body.page-wortsalat .chip,
body.page-viergewinnt .chip,
body.page-ueberstapeln .chip {
  background: linear-gradient(180deg, rgba(36, 76, 53, 0.95) 0%, rgba(25, 28, 31, 0.95) 100%) !important;
  border-color: var(--line-soft) !important;
  color: var(--text-main) !important;
}

body.page-paarefinden p,
body.page-reaktionsspiel p,
body.page-farbfolge p,
body.page-worterraten p,
body.page-wortsalat p,
body.page-viergewinnt p,
body.page-ueberstapeln p,
body.page-paarefinden li,
body.page-reaktionsspiel li,
body.page-farbfolge li,
body.page-worterraten li,
body.page-wortsalat li,
body.page-viergewinnt li,
body.page-ueberstapeln li,
body.page-paarefinden label,
body.page-reaktionsspiel label,
body.page-farbfolge label,
body.page-worterraten label,
body.page-wortsalat label,
body.page-viergewinnt label,
body.page-ueberstapeln label,
body.page-paarefinden .small,
body.page-reaktionsspiel .small,
body.page-worterraten .small,
body.page-wortsalat .small {
  color: var(--text-soft) !important;
}

body.page-paarefinden h1,
body.page-reaktionsspiel h1,
body.page-farbfolge h1,
body.page-worterraten h1,
body.page-wortsalat h1,
body.page-viergewinnt h1,
body.page-ueberstapeln h1,
body.page-paarefinden h2,
body.page-reaktionsspiel h2,
body.page-farbfolge h2,
body.page-worterraten h2,
body.page-wortsalat h2,
body.page-viergewinnt h2,
body.page-ueberstapeln h2 {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) !important;
}

body.page-paarefinden input,
body.page-paarefinden select,
body.page-reaktionsspiel input,
body.page-reaktionsspiel select,
body.page-reaktionsspiel textarea,
body.page-farbfolge select,
body.page-worterraten input,
body.page-worterraten select,
body.page-wortsalat input,
body.page-wortsalat select,
body.page-viergewinnt input,
body.page-viergewinnt select,
body.page-ueberstapeln input,
body.page-ueberstapeln select {
  background: #1c2224 !important;
  color: #f5fff5 !important;
  border: 1px solid #768e7f !important;
}

body.page-paarefinden button,
body.page-reaktionsspiel button,
body.page-farbfolge button,
body.page-worterraten button,
body.page-wortsalat button,
body.page-viergewinnt button,
body.page-ueberstapeln button {
  background: linear-gradient(180deg, #2f6f49 0%, #1e4733 100%) !important;
  border-color: #89a995 !important;
  color: #ffffff !important;
}