/* ── RESET & BASE ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; }

    html, body {
      width: 100%;
      min-height: 100%;
      font-family: 'Anton', sans-serif;
      background: #080600;
      color: #fff;
      user-select: none;
      -webkit-user-select: none;
    }
    /* Player colors — JS overrides these via style.setProperty for each chosen beer */
    body {
      --p1-main:  #2E8B3E;
      --p1-light: #5BC070;
      --p1-dark:  #0F4A1A;
      --p1-glow:  rgba(91,192,112,0.55);
      --p2-main:  #D4920A;
      --p2-light: #F5B030;
      --p2-dark:  #6B4810;
      --p2-glow:  rgba(245,176,48,0.55);
    }
    /* Intro allows scroll; game locks it so board never shifts mid-pour */
    body.game-locked {
      overflow: hidden;
      height: 100%;
    }

    /* ── SCREENS ──────────────────────────────────────────────── */
    .screen {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      overflow: hidden;
    }
    .screen.visible {
      opacity: 1;
      pointer-events: all;
    }

    /* ── FLOATING BUBBLES (shared bg) ────────────────────────── */
    .bubble {
      position: fixed;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%,
        rgba(255,220,80,0.18), rgba(255,150,0,0.03));
      border: 1px solid rgba(255,200,50,0.1);
      pointer-events: none;
      animation: rise linear infinite;
      z-index: 0;
    }
    @keyframes rise {
      from { transform: translateY(105vh); opacity: 0.6; }
      to   { transform: translateY(-15vh); opacity: 0; }
    }

    /* ═══════════════════════════════════════════════════════════
       SCREEN: INTRO
    ═══════════════════════════════════════════════════════════ */
    #screen-intro {
      background: #080600;
      padding: 1.5rem 1.4rem 2.5rem;
      gap: 0;
      justify-content: flex-start;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* Großes Pils-Glas als Hintergrund — leicht geblurred mit dunklem Scrim.
       position:absolute, damit #screen-intro seinen normalen abs-inset-Flow behält. */
    #screen-intro::before {
      content: '';
      position: absolute;
      inset: -20px;
      background: url('../media/bier-trumer-pils.jpg') center/cover no-repeat;
      filter: blur(8px) brightness(0.5) saturate(1.15);
      opacity: 0.8;
      pointer-events: none;
      z-index: 0;
    }
    #screen-intro::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 50% 30%, rgba(100,60,0,0.35) 0%, rgba(6,4,0,0.82) 75%);
      pointer-events: none;
      z-index: 0;
    }
    .intro-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.1rem;
      width: 100%;
      max-width: 400px;
      z-index: 1;
    }
    .intro-eyebrow {
      font-size: 0.62rem;
      letter-spacing: 0.38em;
      color: #F5B030;
      font-family: 'DM Mono', monospace;
      font-weight: 500;
      text-transform: uppercase;
    }
    .intro-title {
      font-size: clamp(2.6rem, 11vw, 3.8rem);
      letter-spacing: 0.04em;
      color: #F5B030;
      text-shadow: 0 0 40px rgba(212,146,10,0.6), 0 2px 8px rgba(0,0,0,0.8);
      text-align: center;
      line-height: 0.95;
    }
    .intro-title span {
      color: #FFF3D0;
    }

    /* Mini board preview */
    .intro-board-preview {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      background: #1a1200;
      border: 2px solid rgba(212,146,10,0.35);
      border-radius: 10px;
      padding: 6px;
      width: min(280px, 90vw);
    }
    .intro-cell {
      aspect-ratio: 1;
      border-radius: 4px;
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.07);
      position: relative;
      overflow: hidden;
    }
    /* Mini pils-glass inside filled intro cells */
    .intro-cell.p1::before,
    .intro-cell.p2::before {
      content: '';
      position: absolute;
      left: 22%; right: 22%;
      top: 8%; bottom: 6%;
      border-radius: 1.5px 1.5px 3px 3px;
      border: 1px solid rgba(255,255,255,0.35);
      border-top: none;
    }
    .intro-cell.p1::before {
      background: linear-gradient(180deg,
        #FFF9E8 0%, #FFF9E8 22%,
        var(--p1-light) 24%, var(--p1-main) 70%, var(--p1-dark) 100%);
      box-shadow: 0 0 6px var(--p1-glow);
    }
    .intro-cell.p2::before {
      background: linear-gradient(180deg,
        #FFF9E8 0%, #FFF9E8 22%,
        var(--p2-light) 24%, var(--p2-main) 70%, var(--p2-dark) 100%);
      box-shadow: 0 0 6px var(--p2-glow);
    }
    .intro-cell.win::before { animation: cellPulse 0.9s ease-in-out infinite alternate; }
    @keyframes cellPulse {
      from { box-shadow: 0 0 6px rgba(245,176,48,0.4); }
      to   { box-shadow: 0 0 20px rgba(245,176,48,0.9); }
    }

    .intro-legend {
      display: flex;
      gap: 1.6rem;
      align-items: center;
    }
    .intro-legend-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem;
      color: rgba(255,243,208,0.7);
    }
    .intro-legend-dot {
      width: 18px; height: 18px;
      border-radius: 50%;
    }
    .intro-legend-dot.p1 { background: var(--p1-main); }
    .intro-legend-dot.p2 { background: var(--p2-main); }

    .intro-rule {
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      color: rgba(255,243,208,0.5);
      text-align: center;
      line-height: 1.7;
    }
    .intro-rule strong {
      color: #F5B030;
      font-style: normal;
    }

    /* Name inputs */
    .intro-inputs {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      width: 100%;
    }
    .intro-input-wrap {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .intro-input-dot {
      width: 14px; height: 14px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .intro-input-dot.p1 { background: var(--p1-main); }
    .intro-input-dot.p2 { background: var(--p2-main); }
    .intro-input-wrap input {
      flex: 1;
      background: rgba(255,243,208,0.06);
      border: 1px solid rgba(212,146,10,0.35);
      border-radius: 8px;
      color: #FFF3D0;
      font-family: 'DM Mono', monospace;
      font-size: 0.92rem;
      letter-spacing: 0.06em;
      padding: 0.65rem 0.9rem;
      outline: none;
      transition: border-color 0.12s ease-out;
      -webkit-appearance: none;
    }
    .intro-input-wrap input:focus {
      border-color: #D4920A;
      background: rgba(212,146,10,0.08);
    }
    .intro-input-wrap input::placeholder {
      color: rgba(255,243,208,0.28);
    }

    .intro-start-btn {
      width: 100%;
      padding: 1rem;
      min-height: 44px;
      background: linear-gradient(135deg, #D4920A 0%, #F5B030 100%);
      color: #060400;
      font-family: 'Anton', sans-serif;
      font-size: 1.25rem;
      letter-spacing: 0.12em;
      border: 2px solid var(--cream);
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 4px 24px rgba(212,146,10,0.45);
      transition: transform 0.1s ease-out, box-shadow 0.12s ease-out;
    }
    .intro-start-btn:active {
      transform: scale(0.97);
      box-shadow: 0 2px 12px rgba(212,146,10,0.3);
    }
    .intro-start-btn[disabled] {
      opacity: 0.4;
      pointer-events: none;
      filter: saturate(0.5);
    }

    /* Hero + Char-Picker */
    .intro-hero-card {
      display: flex;
      gap: 0.75rem;
      align-items: center;
      padding: 0.7rem;
      border: 2px solid #F5B030;
      border-radius: 12px;
      background: rgba(245,176,48,0.08);
      width: 100%;
      box-sizing: border-box;
    }
    .intro-hero-photo {
      width: 54px; height: 54px;
      border-radius: 50%;
      background: #1a0f00 center / cover;
      border: 2px solid #F5B030;
      flex-shrink: 0;
    }
    .intro-hero-info { flex: 1; min-width: 0; }
    .intro-hero-label {
      font-family: 'DM Mono', monospace;
      font-size: 0.68rem;
      color: #F5B030;
      letter-spacing: 0.1em;
    }
    .intro-hero-name {
      font-family: 'Anton', sans-serif;
      font-size: 1.35rem;
      color: #FFF3D0;
      letter-spacing: 0.04em;
    }
    .intro-vs {
      text-align: center;
      font-family: 'Anton', sans-serif;
      font-size: 1.4rem;
      color: #D4920A;
      letter-spacing: 0.15em;
      margin: 0;
    }
    .intro-p2-label {
      font-family: 'DM Mono', monospace;
      font-size: 0.7rem;
      color: #FFF3D0;
      text-align: center;
      letter-spacing: 0.12em;
      opacity: 0.8;
      margin-bottom: 0.35rem;
    }
    .intro-p2-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.4rem;
      width: 100%;
      max-height: 260px;
      overflow-y: auto;
      padding: 0.15rem;
      box-sizing: border-box;
    }
    .intro-p2-item {
      aspect-ratio: 1;
      border-radius: 8px;
      background: #1a0f00 center / cover;
      border: 2px solid transparent;
      position: relative;
      cursor: pointer;
      overflow: hidden;
      transition: border-color 0.12s ease-out, box-shadow 0.12s ease-out, transform 0.1s ease-out;
    }
    .intro-p2-item:active { transform: scale(0.95); }
    .intro-p2-item.selected {
      border-color: #F5B030;
      box-shadow: 0 0 12px rgba(245,176,48,0.6);
    }
    .intro-p2-item-name {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      font-family: 'DM Mono', monospace;
      font-size: 0.55rem;
      background: rgba(0,0,0,0.78);
      color: #FFF3D0;
      text-align: center;
      padding: 2px 1px;
      letter-spacing: 0.04em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .intro-back {
      font-family: 'DM Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      color: rgba(255,243,208,0.3);
      text-decoration: none;
      text-transform: uppercase;
    }
    .intro-back:hover { color: rgba(255,243,208,0.55); }

    /* Beer picker — 4 bottles per player, inline below each hero card */
    .beer-picker {
      display: flex;
      gap: 0.35rem;
      margin-top: 0.45rem;
      width: 100%;
    }
    .beer-picker-item {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2rem;
      padding: 0.35rem 0.15rem 0.3rem;
      background: rgba(0,0,0,0.35);
      border: 1.5px solid rgba(255,243,208,0.08);
      border-radius: 7px;
      cursor: pointer;
      transition: border-color 0.12s ease-out, background 0.12s ease-out, transform 0.1s ease-out;
      font-family: 'DM Mono', monospace;
    }
    .beer-picker-item:active { transform: scale(0.93); }
    .beer-picker-item.selected {
      border-color: #F5B030;
      background: rgba(245,176,48,0.12);
      box-shadow: 0 0 10px rgba(245,176,48,0.35);
    }
    .beer-picker-dot {
      display: block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      box-shadow:
        inset 0 -2px 3px rgba(0,0,0,0.4),
        inset 0 1px 2px rgba(255,255,255,0.3);
    }
    .beer-picker-name {
      font-size: 0.5rem;
      color: rgba(255,243,208,0.7);
      letter-spacing: 0.04em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .beer-picker-item.selected .beer-picker-name { color: #FFF3D0; }

    /* Schnapps items — smaller dot with amber rim so the shot-glass feel reads */
    .beer-picker-item.schnapps .beer-picker-dot {
      width: 16px;
      height: 16px;
      margin-top: 3px;
      margin-bottom: 3px;
      box-shadow:
        inset 0 -2px 3px rgba(0,0,0,0.5),
        inset 0 1px 2px rgba(255,255,255,0.3),
        0 0 0 2px rgba(245,176,48,0.55);
    }
    .beer-picker-item.schnapps::before {
      content: '🥃';
      position: absolute;
      top: 2px;
      right: 3px;
      font-size: 0.55rem;
      opacity: 0.55;
    }
    .beer-picker-item { position: relative; }

    /* P2 beer section — hidden until a gegner is picked */
    .intro-p2-beer {
      width: 100%;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.25s ease-out, opacity 0.18s ease-out, margin 0.25s ease-out;
    }
    .intro-p2-beer.visible {
      max-height: 200px;
      opacity: 1;
    }
    .intro-p2-beer-label {
      font-family: 'DM Mono', monospace;
      font-size: 0.66rem;
      color: #F5B030;
      text-align: center;
      letter-spacing: 0.18em;
      opacity: 0.85;
      margin-bottom: 0.3rem;
    }

    /* ═══════════════════════════════════════════════════════════
       SCREEN: GAME
    ═══════════════════════════════════════════════════════════ */
    #screen-game {
      background: #080600;
      flex-direction: column;
      gap: 0;
      padding: 0;
      overflow: hidden;
      position: relative;
    }
    /* Massives Pils-Foto als Hintergrund — leichter Blur damit Glas noch erkennbar
       ist aber Board nicht erschlägt. Pointer-events off. */
    #screen-game::before {
      content: '';
      position: absolute;
      inset: -20px;
      background: url('../media/bier-trumer-pils.jpg') center/cover no-repeat;
      filter: blur(6px) brightness(0.55) saturate(1.15);
      opacity: 0.85;
      pointer-events: none;
      z-index: 0;
    }
    #screen-game::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.15) 0%, rgba(6,4,0,0.78) 80%);
      pointer-events: none;
      z-index: 0;
    }
    #screen-game > * { position: relative; z-index: 1; }

    /* Top HUD */
    .game-hud {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0.6rem 0.8rem 0.45rem;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
    }
    .hud-player {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex: 1;
      padding: 0.3rem 0.55rem;
      border-radius: 10px;
      border: 2px solid transparent;
      background: rgba(0,0,0,0.25);
      transition: border-color 0.15s ease-out, background 0.15s ease-out, opacity 0.15s ease-out, transform 0.15s ease-out;
      opacity: 0.45;
      filter: grayscale(0.5);
      min-width: 0;
    }
    .hud-player.p2 { flex-direction: row-reverse; }
    .hud-player.active {
      opacity: 1;
      filter: none;
      transform: scale(1.04);
    }
    .hud-player.p1.active {
      border-color: var(--p1-light);
      background: rgba(0,0,0,0.45);
      box-shadow: 0 0 14px var(--p1-glow), inset 0 0 10px rgba(0,0,0,0.3);
    }
    .hud-player.p2.active {
      border-color: var(--p2-light);
      background: rgba(0,0,0,0.45);
      box-shadow: 0 0 14px var(--p2-glow), inset 0 0 10px rgba(0,0,0,0.3);
    }
    .hud-token {
      width: 26px; height: 26px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .hud-token.p1 { background: var(--p1-main); box-shadow: 0 0 10px var(--p1-glow); }
    .hud-token.p2 { background: var(--p2-main); box-shadow: 0 0 10px var(--p2-glow); }
    .hud-name {
      font-size: clamp(0.75rem, 4vw, 1.05rem);
      letter-spacing: 0.05em;
      color: #FFF3D0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 1;
    }
    .hud-player.p2 .hud-name { text-align: right; }
    .hud-player.active .hud-name {
      color: #FFF3D0;
      text-shadow: 0 0 12px currentColor;
    }
    .hud-player.p1.active .hud-name { color: var(--p1-light); }
    .hud-player.p2.active .hud-name { color: var(--p2-light); }

    .hud-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.1rem;
      flex-shrink: 0;
      padding: 0 0.3rem;
    }
    .hud-turn-label {
      font-size: 0.55rem;
      letter-spacing: 0.3em;
      color: #F5B030;
      font-family: 'DM Mono', monospace;
      text-transform: uppercase;
      font-weight: 500;
    }
    /* Arrow pointing to active player */
    .hud-turn-indicator {
      font-family: 'Anton', sans-serif;
      font-size: 1.25rem;
      line-height: 1;
      color: #F5B030;
      text-shadow: 0 0 8px rgba(245,176,48,0.6);
      transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), color 0.15s ease-out;
      animation: arrowBounce 1.2s ease-in-out infinite;
    }
    .hud-turn-indicator.p1 {
      transform: rotate(180deg) translateY(0);
      color: var(--p1-light);
      text-shadow: 0 0 10px var(--p1-glow);
    }
    .hud-turn-indicator.p2 {
      transform: rotate(0deg);
      color: var(--p2-light);
      text-shadow: 0 0 10px var(--p2-glow);
    }
    @keyframes arrowBounce {
      0%, 100% { margin-left: 0; margin-right: 0; }
      50%      { margin-left: -4px; margin-right: 4px; }
    }

    /* Column tap buttons — bottles hovering above their columns so it's obvious
       where to tap. Emoji swaps between 🍺 and 🥃 based on current player's drink. */
    .col-buttons {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      width: 100%;
      max-width: min(420px, 98vw);
      padding: 0 7px;
      gap: 6px;
      flex-shrink: 0;
      margin: 0 auto;
    }
    .col-btn {
      background: transparent;
      border: none;
      padding: 0.4rem 0 0.35rem;
      cursor: pointer;
      transition: transform 0.12s ease-out, filter 0.12s ease-out;
      line-height: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 2px;
      position: relative;
    }
    .col-btn:active { transform: scale(0.88); }
    .col-btn:disabled { opacity: 0.2; cursor: default; }
    .col-btn-bottle {
      font-size: 1.7rem;
      display: block;
      line-height: 1;
      filter: drop-shadow(0 0 10px var(--btn-glow, var(--p1-glow)));
      animation: bottleHover 2.6s ease-in-out infinite;
    }
    .col-btn-arrow {
      font-size: 1.15rem;
      line-height: 1;
      color: var(--btn-color, var(--p1-light));
      opacity: 0.95;
      text-shadow: 0 0 8px var(--btn-glow, var(--p1-glow));
      animation: arrowDrip 1.1s ease-in-out infinite;
    }
    @keyframes arrowDrip {
      0%, 100% { transform: translateY(0); opacity: 0.7; }
      50%      { transform: translateY(3px); opacity: 1; }
    }
    .col-btn.p1-turn { --btn-color: var(--p1-light); --btn-glow: var(--p1-glow); }
    .col-btn.p2-turn { --btn-color: var(--p2-light); --btn-glow: var(--p2-glow); }
    @keyframes bottleHover {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-3px); }
    }
    /* Stagger so 7 bottles don't hover in lockstep */
    .col-btn:nth-child(1) .col-btn-bottle { animation-delay: 0.0s; }
    .col-btn:nth-child(2) .col-btn-bottle { animation-delay: 0.3s; }
    .col-btn:nth-child(3) .col-btn-bottle { animation-delay: 0.6s; }
    .col-btn:nth-child(4) .col-btn-bottle { animation-delay: 0.9s; }
    .col-btn:nth-child(5) .col-btn-bottle { animation-delay: 1.2s; }
    .col-btn:nth-child(6) .col-btn-bottle { animation-delay: 1.5s; }
    .col-btn:nth-child(7) .col-btn-bottle { animation-delay: 1.8s; }

    /* One-shot tap hint above the board — disappears on first drop */
    .tap-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      margin: 0.15rem auto 0.3rem;
      padding: 0.35rem 0.8rem;
      font-family: 'Anton', sans-serif;
      font-size: 0.92rem;
      letter-spacing: 0.14em;
      color: #F5B030;
      background: rgba(245,176,48,0.1);
      border: 1.5px solid rgba(245,176,48,0.45);
      border-radius: 999px;
      text-shadow: 0 0 10px rgba(245,176,48,0.5);
      box-shadow: 0 0 16px rgba(245,176,48,0.2);
      animation: hintPulse 1.3s ease-in-out infinite;
      transition: opacity 0.3s ease-out, transform 0.3s ease-out, margin 0.3s ease-out, padding 0.3s ease-out;
      max-width: min(420px, 96vw);
      flex-shrink: 0;
    }
    .tap-hint.done {
      opacity: 0;
      transform: translateY(-8px) scale(0.9);
      pointer-events: none;
      margin: 0 auto;
      padding: 0;
      max-height: 0;
      overflow: hidden;
      border-width: 0;
    }
    .tap-hint-arrow {
      font-size: 1.15rem;
      animation: hintBob 0.9s ease-in-out infinite;
    }
    .tap-hint-arrow:last-child { animation-delay: 0.45s; }
    @keyframes hintPulse {
      0%, 100% { box-shadow: 0 0 16px rgba(245,176,48,0.2); }
      50%      { box-shadow: 0 0 26px rgba(245,176,48,0.55); }
    }
    @keyframes hintBob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-5px); }
    }

    /* GOLDENER ZAPFHAHN — column glows gold while active */
    .col-btn.golden .col-btn-bottle {
      filter: drop-shadow(0 0 14px #FFD700) drop-shadow(0 0 22px #FFA500);
      animation: goldenPulse 0.7s ease-in-out infinite alternate;
    }
    .col-btn.golden .col-btn-arrow {
      color: #FFD700;
      text-shadow: 0 0 10px #FFD700;
    }
    @keyframes goldenPulse {
      from { transform: translateY(-3px) scale(1);    }
      to   { transform: translateY(-6px) scale(1.18); }
    }

    /* Board container */
    .board-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0 0.5rem 0.5rem;
      overflow: visible;
      position: relative;
    }
    .board {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: repeat(6, 1fr);
      gap: 6px;
      background:
        /* horizontal row separators — makes perspective rows visible */
        repeating-linear-gradient(0deg,
          transparent 0, transparent calc((100% - 42px) / 6),
          rgba(212,146,10,0.08) calc((100% - 42px) / 6),
          rgba(212,146,10,0.08) calc((100% - 42px) / 6 + 1px)),
        linear-gradient(180deg, #221500 0%, #1a1100 60%, #0f0a00 100%);
      border: 2px solid rgba(212,146,10,0.45);
      border-radius: 14px;
      padding: 7px;
      width: 100%;
      max-width: min(420px, 98vw);
      aspect-ratio: 7/6;
      position: relative;
      box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.6),
        0 6px 30px rgba(0,0,0,0.7);
    }
    .cell {
      border-radius: 6px;
      background:
        linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 100%);
      border: 1.5px solid rgba(255,243,208,0.12);
      position: relative;
      overflow: hidden;
      transition: background 0.04s;
      box-shadow:
        inset 0 3px 5px rgba(0,0,0,0.75),
        inset 0 -1px 2px rgba(255,243,208,0.05);
    }

    /* ── TOKEN: side-view Pils-Glas (Foam + Liquid + Glasrand) ───────── */
    .cell-token {
      position: absolute;
      /* Glas-Silhouette: schmaler als Zelle, füllt fast volle Höhe */
      left: 18%;
      right: 18%;
      top: 5%;
      bottom: 4%;
      border-radius: 2px 2px 5px 5px;
      opacity: 0;
      overflow: visible;
      background: transparent;
      border: 1.5px solid rgba(255,255,255,0.42);
      border-top: none;
      transform: scale(0.55) translateY(-60%);
      transition: transform 0.34s cubic-bezier(.34,1.55,.64,1), opacity 0.18s;
    }
    .cell-token.landed { opacity: 1; transform: scale(1) translateY(0); }

    /* Schaumkrone oben */
    .cell-token::before {
      content: '';
      position: absolute;
      top: -6%; left: -6%; right: -6%;
      height: 22%;
      background:
        radial-gradient(ellipse at 50% 80%, #FFFDF5 0%, #FFF3D0 60%, #E8D8A8 95%, transparent 100%);
      border-radius: 50% 50% 40% 40% / 80% 80% 40% 40%;
      box-shadow:
        0 -1px 2px rgba(255,255,255,0.35),
        inset 0 -1px 2px rgba(180,140,60,0.3);
      opacity: 0;
      transition: opacity 0.25s 0.1s;
      z-index: 2;
    }
    .cell-token.landed::before { opacity: 1; }

    /* Blasen-Layer IN der Flüssigkeit */
    .cell-token::after {
      content: '';
      position: absolute;
      inset: 20% 0 0 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s 0.15s;
      background:
        radial-gradient(circle 1.5px at 28% 72%, rgba(255,255,255,0.95), transparent 60%),
        radial-gradient(circle 1.1px at 58% 55%, rgba(255,255,255,0.85), transparent 60%),
        radial-gradient(circle 1.3px at 42% 30%, rgba(255,255,255,0.9), transparent 60%),
        radial-gradient(circle 1px at 70% 82%, rgba(255,255,255,0.75), transparent 60%),
        radial-gradient(circle 1px at 20% 40%, rgba(255,255,255,0.8), transparent 60%);
    }
    .cell-token.landed::after { opacity: 1; animation: bubbleRise 2.8s ease-in-out infinite; }

    /* Player 1 — Flüssigkeit + Glas-Shine */
    .cell-token.p1 {
      background:
        /* Glas-Glanz */
        linear-gradient(90deg,
          rgba(255,255,255,0.22) 0%,
          rgba(255,255,255,0.06) 18%,
          transparent 35%,
          transparent 70%,
          rgba(255,255,255,0.1) 88%,
          rgba(255,255,255,0.04) 100%),
        /* Flüssigkeit */
        linear-gradient(180deg,
          #FFF9E8 0%, #FFF9E8 18%,
          var(--p1-light) 20%, var(--p1-main) 55%, var(--p1-dark) 100%);
      box-shadow:
        inset 0 -2px 4px rgba(0,0,0,0.35),
        inset 2px 0 3px rgba(255,255,255,0.12),
        0 0 5px var(--p1-glow);
    }

    /* Player 2 */
    .cell-token.p2 {
      background:
        linear-gradient(90deg,
          rgba(255,255,255,0.22) 0%,
          rgba(255,255,255,0.06) 18%,
          transparent 35%,
          transparent 70%,
          rgba(255,255,255,0.1) 88%,
          rgba(255,255,255,0.04) 100%),
        linear-gradient(180deg,
          #FFF9E8 0%, #FFF9E8 18%,
          var(--p2-light) 20%, var(--p2-main) 55%, var(--p2-dark) 100%);
      box-shadow:
        inset 0 -2px 4px rgba(0,0,0,0.45),
        inset 2px 0 3px rgba(255,255,255,0.1),
        0 0 5px var(--p2-glow);
    }

    @keyframes bubbleRise {
      0%   { transform: translateY(0); opacity: 0.75; }
      45%  { opacity: 1; }
      100% { transform: translateY(-15%); opacity: 0; }
    }

    /* Winning tokens pulse */
    .cell-token.winner {
      animation: winPulse 0.7s ease-in-out infinite alternate;
    }
    @keyframes winPulse {
      from { box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 0 6px rgba(245,176,48,0.5); }
      to   { box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 0 22px rgba(245,176,48,1), 0 0 38px rgba(212,146,10,0.75); }
    }

    /* ═══════════════════════════════════════════════════════════
       POUR GLASS — CSS-drawn pint, slides above column & tilts
    ═══════════════════════════════════════════════════════════ */
    .pour-glass {
      position: absolute;
      top: -44px;
      left: 0;
      width: 34px;
      height: 50px;
      transform-origin: 80% 95%;
      transform: translateX(var(--col-x, 0px)) rotate(-4deg);
      opacity: 0;
      pointer-events: none;
      z-index: 5;
      transition:
        transform 0.22s cubic-bezier(.45,.05,.55,.95),
        opacity 0.18s ease;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
    }
    .pour-glass.active { opacity: 1; }
    .pour-glass.tilted {
      transform: translateX(var(--col-x, 0px)) rotate(-58deg);
      transition: transform 0.24s cubic-bezier(.55,.06,.68,.19);
    }
    .pour-glass.retracting {
      transform: translateX(var(--col-x, 0px)) rotate(8deg);
      transition: transform 0.28s cubic-bezier(.4,1.6,.5,.9);
    }
    .glass-body {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
        rgba(255,243,208,0.12) 0%,
        rgba(255,243,208,0.05) 100%);
      border: 2px solid #F5B030;
      border-top-width: 1.5px;
      border-radius: 3px 3px 7px 7px;
      overflow: hidden;
      box-shadow:
        inset 0 0 6px rgba(255,200,50,0.2),
        inset -3px 0 4px rgba(0,0,0,0.2);
    }
    .glass-liquid {
      position: absolute;
      left: 0; right: 0;
      bottom: 0;
      height: 78%;
      background: linear-gradient(180deg, var(--p1-light) 0%, var(--p1-main) 55%, var(--p1-dark) 100%);
    }
    .glass-liquid::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle 1.1px at 25% 70%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(circle 0.9px at 60% 50%, rgba(255,255,255,0.5), transparent 60%),
        radial-gradient(circle 1.2px at 40% 30%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(circle 0.9px at 70% 80%, rgba(255,255,255,0.55), transparent 60%);
    }
    .pour-glass.p2 .glass-liquid {
      background: linear-gradient(180deg, var(--p2-light) 0%, var(--p2-main) 55%, var(--p2-dark) 100%);
    }
    .glass-foam {
      position: absolute;
      top: -4px; left: -2px; right: -2px;
      height: 26%;
      background: #FFF9E8;
      border-radius: 50% 50% 40% 40% / 85% 85% 45% 45%;
      box-shadow:
        inset 0 -2px 2px rgba(200,160,80,0.25),
        0 -1px 0 rgba(255,249,232,0.6);
    }
    .pour-glass.p2 .glass-foam { background: #F0D8A8; }
    .glass-handle {
      position: absolute;
      right: -11px;
      top: 18%;
      width: 12px;
      height: 52%;
      border: 2px solid #F5B030;
      border-left: none;
      border-radius: 0 11px 11px 0;
      background: transparent;
    }
    .glass-shine {
      position: absolute;
      top: 22%;
      left: 14%;
      width: 2.5px;
      height: 58%;
      background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.08));
      border-radius: 2px;
    }

    /* ═══════════════════════════════════════════════════════════
       POUR STREAM — amber column of liquid falling from spout
    ═══════════════════════════════════════════════════════════ */
    .pour-stream {
      position: absolute;
      top: 0;
      left: var(--x, 0);
      width: 6px;
      height: var(--h, 100px);
      transform: translateX(-50%) scaleY(0);
      transform-origin: top center;
      border-radius: 4px;
      filter: blur(0.4px);
      pointer-events: none;
      z-index: 3;
    }
    .pour-stream.p1 {
      background: linear-gradient(180deg,
        transparent 0%,
        var(--p1-light) 12%,
        var(--p1-main) 70%,
        var(--p1-light) 100%);
      box-shadow: 0 0 8px var(--p1-glow);
    }
    .pour-stream.p2 {
      background: linear-gradient(180deg,
        transparent 0%,
        var(--p2-light) 12%,
        var(--p2-main) 70%,
        var(--p2-light) 100%);
      box-shadow: 0 0 8px var(--p2-glow);
    }
    .pour-stream.active {
      animation: streamFall 0.4s cubic-bezier(.55,.05,.7,.2) forwards;
    }
    @keyframes streamFall {
      0%   { transform: translateX(-50%) scaleY(0); opacity: 0.9; }
      55%  { transform: translateX(-50%) scaleY(1); opacity: 1; }
      100% { transform: translateX(-50%) scaleY(1); opacity: 0; }
    }

    /* ═══════════════════════════════════════════════════════════
       SPLASH — amber droplets fly out when stream hits cell
    ═══════════════════════════════════════════════════════════ */
    .pour-splash {
      position: absolute;
      width: 0; height: 0;
      pointer-events: none;
      z-index: 4;
    }
    .pour-splash span {
      position: absolute;
      width: 5px; height: 5px;
      border-radius: 50%;
      box-shadow: 0 0 5px currentColor;
      animation: splashFly 0.55s ease-out forwards;
    }
    @keyframes splashFly {
      0%   { transform: translate(0,0) scale(1);   opacity: 1; }
      100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
    }

    /* SCHNAPPS glass variant — smaller, no handle, squat shot-glass silhouette.
       Triggered by .pour-glass.schnapps class (kurze-ficken event or schnapps player). */
    .pour-glass.schnapps {
      width: 24px;
      height: 32px;
      top: -28px;
      transform-origin: 70% 92%;
    }
    .pour-glass.schnapps .glass-body {
      border-width: 2px;
      border-radius: 2px 2px 5px 5px;
    }
    .pour-glass.schnapps .glass-handle { display: none; }
    .pour-glass.schnapps .glass-foam {
      height: 14%;
      top: -2px;
    }
    .pour-glass.schnapps .glass-liquid {
      height: 88%;
    }

    /* ═══════════════════════════════════════════════════════════
       EVENT BANNER — top-center overlay for GOLDENER ZAPFHAHN / KURZE FICKEN
    ═══════════════════════════════════════════════════════════ */
    .event-banner {
      position: fixed;
      top: 12%;
      left: 50%;
      transform: translateX(-50%) scale(0.6);
      padding: 0.7rem 1.2rem;
      font-family: 'Anton', sans-serif;
      font-size: clamp(1.1rem, 5vw, 1.6rem);
      letter-spacing: 0.08em;
      border-radius: 12px;
      pointer-events: none;
      opacity: 0;
      z-index: 50;
      text-align: center;
      white-space: nowrap;
      transition: opacity 0.25s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .event-banner.visible {
      opacity: 1;
      transform: translateX(-50%) scale(1);
      animation: bannerShake 0.5s ease-in-out 0.1s;
    }
    .event-banner.golden {
      background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
      color: #1a0f00;
      box-shadow:
        0 0 30px rgba(255,215,0,0.7),
        0 0 60px rgba(255,165,0,0.45),
        inset 0 -3px 4px rgba(120,70,0,0.25);
      border: 2px solid #FFF3D0;
    }
    .event-banner.kurze {
      background: linear-gradient(135deg, #4A2020 0%, #8B3030 100%);
      color: #FFF3D0;
      box-shadow:
        0 0 26px rgba(139,48,48,0.6),
        inset 0 -2px 4px rgba(0,0,0,0.4);
      border: 2px solid #E8D090;
    }
    @keyframes bannerShake {
      0%, 100% { transform: translateX(-50%) scale(1); }
      20%      { transform: translateX(calc(-50% - 6px)) scale(1.05); }
      40%      { transform: translateX(calc(-50% + 6px)) scale(1.05); }
      60%      { transform: translateX(calc(-50% - 4px)) scale(1.03); }
      80%      { transform: translateX(calc(-50% + 4px)) scale(1.03); }
    }

    /* Turn indicator stripe below HUD */
    .turn-stripe {
      height: 3px;
      width: 100%;
      transition: background 0.15s ease-out;
      flex-shrink: 0;
    }
    .turn-stripe.p1 { background: linear-gradient(90deg, var(--p1-main), var(--p1-light) 50%, var(--p1-main)); }
    .turn-stripe.p2 { background: linear-gradient(90deg, var(--p2-main), var(--p2-light) 50%, var(--p2-main)); }

    /* Column hover highlight */
    .col-hover .cell:not(.has-token) {
      background: rgba(255,200,50,0.04);
    }

    /* ═══════════════════════════════════════════════════════════
       SCREEN: RESULT
    ═══════════════════════════════════════════════════════════ */
    #screen-result {
      background: radial-gradient(ellipse at 50% 20%,
        rgba(100,60,0,0.55) 0%, #080600 65%);
      padding: 2rem 1.4rem calc(88px + env(safe-area-inset-bottom, 0px));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .result-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.1rem;
      width: 100%;
      max-width: 420px;
      z-index: 1;
    }

    .result-eyebrow {
      font-size: 0.62rem;
      letter-spacing: 0.38em;
      color: #F5B030;
      font-family: 'DM Mono', monospace;
      text-transform: uppercase;
    }

    .result-trophy {
      font-size: clamp(3rem, 16vw, 5.5rem);
      animation: trophyBounce 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    @keyframes trophyBounce {
      from { transform: scale(0.3) rotate(-15deg); opacity: 0; }
      to   { transform: scale(1) rotate(0deg); opacity: 1; }
    }

    .result-headline {
      font-size: clamp(1.3rem, 7vw, 2.1rem);
      letter-spacing: 0.05em;
      color: #F5B030;
      text-align: center;
      line-height: 1.15;
      text-shadow: 0 0 30px rgba(212,146,10,0.5);
    }
    .result-headline .loser-line {
      display: block;
      font-size: 0.62em;
      color: rgba(255,243,208,0.6);
      letter-spacing: 0.1em;
      margin-top: 0.3rem;
      font-family: 'DM Mono', monospace;
    }

    /* Emmy verdict row in result */
    .result-emmy-row {
      display: flex;
      align-items: flex-start;
      gap: 0.6rem;
      width: 100%;
      max-width: 360px;
      padding: 0.65rem 0.9rem;
      background: rgba(212,146,10,0.07);
      border-left: 3px solid #D4920A;
    }
    .result-emmy-photo {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #D4920A;
      flex-shrink: 0;
    }
    .result-emmy-photo[src=""] { display: none; }
    .result-emmy-verdict {
      font-family: 'DM Mono', monospace;
      font-size: 0.7rem;
      color: rgba(255,243,208,0.8);
      font-style: italic;
      line-height: 1.5;
    }

    /* Final board mini preview in result */
    .result-board-mini {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
      background: #1a1100;
      border: 1px solid rgba(212,146,10,0.25);
      border-radius: 8px;
      padding: 5px;
      width: min(252px, 80vw);
    }
    .result-cell {
      aspect-ratio: 1;
      border-radius: 3px;
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.05);
      position: relative;
      overflow: hidden;
    }
    .result-cell.p1::before,
    .result-cell.p2::before {
      content: '';
      position: absolute;
      left: 22%; right: 22%;
      top: 8%; bottom: 6%;
      border-radius: 1px 1px 2px 2px;
      border: 1px solid rgba(255,255,255,0.3);
      border-top: none;
    }
    .result-cell.p1::before {
      background: linear-gradient(180deg,
        #FFF9E8 0%, #FFF9E8 22%,
        var(--p1-light) 24%, var(--p1-main) 70%, var(--p1-dark) 100%);
      box-shadow: 0 0 4px var(--p1-glow);
    }
    .result-cell.p2::before {
      background: linear-gradient(180deg,
        #FFF9E8 0%, #FFF9E8 22%,
        var(--p2-light) 24%, var(--p2-main) 70%, var(--p2-dark) 100%);
      box-shadow: 0 0 4px var(--p2-glow);
    }
    .result-cell.win-cell::before {
      animation: winPulse 0.65s ease-in-out infinite alternate;
    }

    .result-btn-row {
      display: flex;
      gap: 0.75rem;
      width: 100%;
    }
    .result-btn {
      flex: 1;
      padding: 0.9rem 0.5rem;
      min-height: 44px;
      border: none;
      border-radius: 8px;
      font-family: 'Anton', sans-serif;
      font-size: 1.05rem;
      letter-spacing: 0.1em;
      cursor: pointer;
      transition: transform 0.1s ease-out, box-shadow 0.12s ease-out;
    }
    .result-btn:active { transform: scale(0.96); }
    .result-btn.primary {
      background: linear-gradient(135deg, #D4920A, #F5B030);
      color: #060400;
      border: 2px solid var(--cream);
      box-shadow: 0 4px 20px rgba(212,146,10,0.4);
    }
    .result-btn.secondary {
      background: rgba(255,243,208,0.06);
      color: rgba(255,243,208,0.65);
      border: 1px solid rgba(255,243,208,0.12);
    }

    /* ── CONFETTI ─────────────────────────────────────────────── */
    .confetti-piece {
      position: fixed;
      width: 10px;
      height: 10px;
      top: -12px;
      border-radius: 2px;
      pointer-events: none;
      z-index: 9999;
      animation: confettiFall linear forwards;
    }
    @keyframes confettiFall {
      0%   { transform: translateY(0) rotate(0deg) scaleX(1);   opacity: 1; }
      80%  { opacity: 1; }
      100% { transform: translateY(110vh) rotate(720deg) scaleX(0.4); opacity: 0; }
    }

    /* ── DRAW RESULT VARIANT ─────────────────────────────────── */
    .result-draw .result-trophy { filter: grayscale(0.4); }
    .result-draw .result-headline { color: #FFF3D0; text-shadow: none; }

    /* ── COLUMN HIGHLIGHT OVERLAY (desktop hover) ────────────── */
    .col-highlight {
      background: rgba(212,146,10,0.04);
      border-radius: 4px;
    }

    /* Bubble containers sit as absolute overlays behind screen content */
    #bubbles-intro,
    #bubbles-result {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
    }
    /* Ensure intro/result content stacks above bubbles */
    #screen-intro .intro-wrap,
    #screen-result .result-wrap {
      position: relative;
      z-index: 1;
    }

    @media (prefers-reduced-motion: reduce) {
      * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }