:root{
      --active:#22c55e;
      --inactive:#e5e7eb;
      --danger:#ef4444;

      --gap: 14px;
    }

    /* STAGE: immer gleich groß – aber iPad-freundlich (kein "Button verschwindet") */

    /* ---------- 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: linear-gradient(145deg, #8772b4, #634d90);
      position:relative;
      overflow:hidden;
      min-height:0;
      display:flex;
      flex-direction:column;
    }
    .hero::after{
      content: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(26px, 4vw, 44px);
      font-weight: 400;
      font-family: "CMB", "Segoe UI", system-ui, sans-serif;
      letter-spacing:.2px;
      color:#f7f9f2;
      text-shadow: 0 1px 0 rgba(8,20,14,.45);
      text-align: center;
    }
    .heroDesc{
      max-width: 58ch;
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      font-weight: 750;
      line-height: 1.35;
      color: #f7f9f2;
    }

    .heroDesc p{
      margin: 0;
    }

    .heroDesc p + p{
      margin-top: 12px;
    }

    .gameInfo{
      border: 1px solid rgba(255,255,255,.20);
      border-radius: 14px;
      background: rgba(10,24,38,.22);
      padding: 9px 12px;
      font-size: 13px;
      line-height: 1.35;
      font-weight: 800;
      color: #f7f9f2;
      text-align: center;
    }

    .gameInfoTitle{
      font-weight: 950;
      margin-bottom: 3px;
    }

    .gameInfoText{
      margin: 0;
    }

    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; }

    .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); }
    .startRow button { flex: none; }

    /* Mode buttons */
    .modeBtns {
      display: flex;
      gap: 6px;
    }
    .modeBtn {
      flex: 1;
      background: #eef2ee;
      color: var(--muted);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 9px 4px;
      font-size: 13px;
      font-weight: 850;
      cursor: pointer;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
      backdrop-filter: none;
    }
    /* override shared.css .settings button for mode + counter buttons */
    .settings .modeBtn { background: #eef2ee; color: var(--muted); border-color: var(--border); }
    .settings .modeBtn:hover { background: #e2ebe2; color: var(--text); filter: none; }
    .settings .modeBtn.active { background: var(--btn); color: #fff; border-color: var(--btn); }
    .settings .modeBtn.active:hover { filter: none; }

    /* Player count + names layout */
    .playerSetup {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      align-items: start;
    }
    .playerCountCol { display: flex; flex-direction: column; gap: 6px; }
    .counterBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
    }
    .counterBtn,
    .settings .counterBtn {
      width: 40px;
      height: 36px;
      background: #eef2ee;
      border: 1px solid var(--border);
      border-radius: 10px;
      font-size: 18px;
      font-weight: 900;
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.1s;
      backdrop-filter: none;
      padding: 0;
    }
    .counterBtn:hover,
    .settings .counterBtn:hover { background: #eef2ee; filter: none; opacity: 0.75; }
    .counterVal {
      font-family: var(--brand-font);
      font-size: clamp(28px, 3.5vw, 38px);
      font-weight: 400;
      color: var(--text);
      line-height: 1;
      min-width: 2ch;
      text-align: center;
    }
    .playerNamesCol { display: flex; flex-direction: column; gap: 4px; }

    /* Horizontal counter (field count) */
    .hCounterBox {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 6px 0 4px;
    }
    .hCounterBtn,
    .settings .hCounterBtn {
      width: 34px;
      height: 34px;
      background: #eef2ee;
      border: 1px solid var(--border);
      border-radius: 10px;
      font-size: 18px;
      font-weight: 900;
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: opacity 0.1s;
      backdrop-filter: none;
      padding: 0;
    }
    .hCounterBtn:hover,
    .settings .hCounterBtn:hover { background: #eef2ee; filter: none; opacity: 0.7; }
    .hCounterBtn:disabled,
    .settings .hCounterBtn:disabled { opacity: 0.3; cursor: not-allowed; }
    .hCounterVal {
      font-family: var(--brand-font);
      font-size: clamp(20px, 2.8vw, 30px);
      font-weight: 400;
      color: var(--text);
      min-width: 3ch;
      text-align: center;
      line-height: 1;
    }
    .hCounterVal.dimmed { opacity: 0.35; }

    /* Toggle switch */
    .toggleRow {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      padding: 4px 0;
      user-select: none;
    }
    .toggleRow input[type="checkbox"] { display: none; }
    .toggleTrack {
      width: 42px;
      height: 24px;
      background: #d0d5d0;
      border-radius: 999px;
      position: relative;
      flex-shrink: 0;
      transition: background 0.2s;
    }
    .toggleRow input:checked + .toggleTrack { background: #2f6d4f; }
    .toggleThumb {
      position: absolute;
      top: 3px; left: 3px;
      width: 18px; height: 18px;
      background: #fff;
      border-radius: 50%;
      transition: transform 0.2s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    }
    .toggleRow input:checked + .toggleTrack .toggleThumb { transform: translateX(18px); }
    .toggleVal { font-size: 13px; font-weight: 850; color: var(--text); min-width: 6ch; }

    /* ---------- 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;
    }

    .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: 14px;
      background:#fff;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .resultsHeader {
      flex: 0 0 auto;
      text-align: center;
    }
    .metaStrong {
      font-family: var(--brand-font);
      font-size: clamp(20px, 2.8vw, 30px);
      font-weight: 400;
      color: var(--text);
    }
    .resultsSub {
      font-size: 13px;
      color: var(--muted);
      font-weight: 750;
      margin-top: 2px;
    }

    .podiumScroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 4px 2px;
    }

    .podiumWrap {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .podiumEntry {
      display: grid;
      grid-template-columns: 3rem 1fr auto;
      align-items: center;
      gap: 10px 14px;
      background: #f7f9f6;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 14px 18px;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.38s ease, transform 0.38s ease;
    }
    .podiumEntry.visible {
      opacity: 1;
      transform: none;
    }

    .podiumRank {
      font-family: var(--brand-font);
      font-size: clamp(22px, 3vw, 32px);
      font-weight: 400;
      color: var(--muted);
      text-align: center;
      line-height: 1;
    }
    .podiumRank.gold   { color: #b8860b; }
    .podiumRank.silver { color: #7a8a99; }
    .podiumRank.bronze { color: #9c5c2a; }

    .podiumName {
      font-family: var(--brand-font);
      font-size: clamp(18px, 2.4vw, 26px);
      font-weight: 400;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .podiumTime {
      font-size: clamp(14px, 1.6vw, 17px);
      font-weight: 850;
      color: var(--muted);
      white-space: nowrap;
      text-align: right;
    }

    /* Eliminated section */
    .podiumDivider {
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--muted);
      text-align: center;
      padding: 4px 0;
    }

    .podiumSmall {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .podiumSmall .podiumEntry {
      grid-template-columns: 2rem 1fr auto;
      padding: 8px 12px;
      background: #fafafa;
      border-radius: 12px;
    }
    .podiumSmall .podiumRank {
      font-size: clamp(13px, 1.6vw, 16px);
    }
    .podiumSmall .podiumName {
      font-size: clamp(13px, 1.6vw, 16px);
    }
    .podiumSmall .podiumTime {
      font-size: clamp(12px, 1.3vw, 14px);
    }

    /* Time + misclicks stacked */
    .podiumTimeWrap {
      text-align: right;
    }

    .podiumMisclicks {
      font-size: 11px;
      color: #c0392b;
      font-weight: 750;
      margin-top: 2px;
      white-space: nowrap;
    }

    /* Final winner: big, left-aligned */
    .podiumEntry.winner {
      padding: 20px 22px;
      background: linear-gradient(145deg, #fffbea, #fef3c7);
      border-color: #f0c040;
      border-width: 2px;
      border-radius: 20px;
    }
    .podiumEntry.winner .podiumRank {
      font-size: clamp(30px, 4.5vw, 48px);
    }
    .podiumEntry.winner .podiumName {
      font-size: clamp(26px, 4vw, 44px);
      white-space: normal;
    }
    .podiumEntry.winner .podiumTime {
      font-size: clamp(16px, 2vw, 20px);
    }

    /* Runner-up: slightly smaller than normal */
    .podiumEntry.runnerup {
      background: linear-gradient(145deg, #f5f7f5, #eef1ee);
      border-color: #b0b8b0;
    }

    /* Confetti */
    .confettiContainer {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 0;
      pointer-events: none;
      z-index: 9999;
      overflow: visible;
    }
    .confettiPiece {
      position: absolute;
      top: -20px;
      animation: confettiFall linear forwards;
    }
    @keyframes confettiFall {
      0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
      75%  { opacity: 1; }
      100% { transform: translateY(105vh) rotate(600deg) scale(0.6); opacity: 0; }
    }

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

    }

    @media (max-height: 700px){

    }

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