:root {
      --bg: #020403;
      --panel: rgba(3, 12, 7, 0.86);
      --panel-2: rgba(5, 18, 10, 0.94);
      --stroke: rgba(104, 255, 109, 0.24);
      --text: #f7fff8;
      --muted: #b8c7bc;
      --pink: #9146ff;
      --cyan: #23f6d2;
      --purple: #6bff70;
      --red: #ff315a;
      --yellow: #ffe45e;
      --green: #68ff6d;
      --green-deep: #128f34;
      --orange: #ff8a2b;
      --shadow-cyan: 0 0 24px rgba(35, 246, 210, 0.22);
      --shadow-pink: 0 0 28px rgba(104, 255, 109, 0.28);
      --font: "Trebuchet MS", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.48) 70%, rgba(0, 0, 0, 0.78) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.86)),
        #020403;
      color: var(--text);
      font-family: var(--font);
      overflow: hidden;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    body::before {
      background:
        radial-gradient(ellipse at 73% 28%, rgba(104, 255, 109, 0.18), transparent 30%),
        radial-gradient(ellipse at 12% 77%, rgba(104, 255, 109, 0.16), transparent 26%),
        repeating-linear-gradient(100deg, transparent 0 86px, rgba(70, 255, 93, 0.035) 87px 88px);
      mix-blend-mode: screen;
    }

    body::after {
      background:
        linear-gradient(90deg, rgba(7, 255, 70, 0.11), transparent 10%, transparent 90%, rgba(7, 255, 70, 0.1)),
        radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.72) 100%);
      /* Hinter dem Spiel-UI halten — sonst wirkt alles wie „Abblend-Filter“ (war z-index:18 > .game-shell) */
      z-index: 0;
    }

    button {
      font: inherit;
    }

    .game-shell {
      position: relative;
      /* 100vh ist auf Mobile Safari oft zu hoch (Toolbar-Overlap); dvh folgt der sichtbaren Fläche */
      height: 100vh;
      height: 100dvh;
      padding: 18px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 14px;
      isolation: isolate;
      /* Über body::after-Vignette (0) und .noise/.scanlines (20), unter Modals (.overlay 30) */
      z-index: 22;
    }

    .noise,
    .scanlines,
    .vignette {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 20;
    }

    .noise {
      opacity: 0.07;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.75'/%3E%3C/svg%3E");
      mix-blend-mode: screen;
    }

    .scanlines {
      opacity: 0.16;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.035) 0,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 1px,
        transparent 4px
      );
    }

    .vignette { display: none; }

    .topbar {
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: 1.2fr 2fr 1.2fr;
      gap: 14px;
      align-items: stretch;
    }

    .brand-card,
    .stats-card,
    .status-card,
    .webcam,
    .stream-stage,
    .chat-panel,
    .obs-panel,
    .action-panel {
      border: 1px solid var(--stroke);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        linear-gradient(145deg, rgba(1, 10, 5, 0.82), rgba(0, 0, 0, 0.64));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 0 28px rgba(45, 255, 80, 0.12),
        0 18px 55px rgba(0, 0, 0, 0.56);
      backdrop-filter: blur(10px) saturate(1.18);
    }

    .brand-card {
      border-radius: 8px;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      background: linear-gradient(135deg, rgba(9, 36, 15, 0.9), rgba(0, 0, 0, 0.54));
      border-color: rgba(104, 255, 109, 0.36);
    }

    .logo-mark {
      width: 70px;
      height: 58px;
      object-fit: contain;
      filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
      transform: rotate(-4deg);
    }

    .brand-title {
      margin: 0;
      font-size: clamp(1.1rem, 1.7vw, 1.7rem);
      line-height: 1;
      letter-spacing: 0;
      text-transform: uppercase;
      text-shadow: 2px 0 rgba(35, 246, 210, 0.35), -2px 0 rgba(104, 255, 109, 0.38);
    }

    .brand-subtitle {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 0.85rem;
    }

    .mute-btn {
      font: inherit;
      padding: 8px 12px;
      border-radius: 6px;
      border: 1px solid rgba(104, 255, 109, 0.28);
      background: rgba(0, 0, 0, 0.45);
      color: var(--text);
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      letter-spacing: 0.02em;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }

    .mute-btn:hover {
      border-color: rgba(35, 246, 210, 0.5);
      box-shadow: 0 0 16px rgba(35, 246, 210, 0.15);
    }

    .mute-btn[aria-pressed="true"] {
      border-color: rgba(255, 49, 90, 0.45);
      color: var(--muted);
    }

    .stats-card {
      border-radius: 8px;
      padding: 12px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .stat {
      min-width: 0;
      border-radius: 5px;
      padding: 12px;
      background: rgba(0, 0, 0, 0.48);
      border: 1px solid rgba(104, 255, 109, 0.12);
    }

    .stat-label {
      display: block;
      font-size: 0.72rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .stat-value {
      display: block;
      margin-top: 5px;
      font-size: clamp(1.2rem, 2vw, 2rem);
      font-weight: 900;
      letter-spacing: 0;
      text-shadow: 0 0 14px rgba(104, 255, 109, 0.18);
    }

    .status-card {
      border-radius: 8px;
      padding: 14px;
      display: grid;
      gap: 10px;
      background:
        linear-gradient(135deg, rgba(3, 18, 8, 0.88), rgba(0, 0, 0, 0.62)),
        radial-gradient(circle at 88% 20%, rgba(255, 228, 94, 0.12), transparent 34%);
    }

    .bar-label {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .meter {
      height: 11px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .meter-fill {
      width: 50%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--green), var(--yellow), var(--red));
      box-shadow: 0 0 20px rgba(255, 49, 90, 0.35);
      transition: width 260ms ease;
    }

    .main-grid {
      position: relative;
      z-index: 5;
      min-height: 0;
      display: grid;
      grid-template-columns: 270px minmax(400px, 1.45fr) 300px;
      gap: 14px;
      align-items: stretch;
    }

    .main-grid > * {
      min-height: 0;
    }

    .left-stack {
      min-height: 0;
      display: grid;
      grid-template-rows: 1fr 210px;
      gap: 14px;
    }

    .webcam {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
      border-radius: 8px;
      isolation: isolate;
      border-color: rgba(104, 255, 109, 0.3);
      background: rgba(0, 0, 0, 0.82);
    }

    .webcam-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 78% 34%;
      z-index: 0;
      transform: scale(1.06);
      transform-origin: center;
    }

    .webcam::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.78));
      z-index: 1;
    }

    /* Monitor + Bestenliste untereinander über dem gleichen Hintergrund */
    .webcam-body {
      position: relative;
      z-index: 2;
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 50px 8px 62px;
      align-items: stretch;
    }

    .webcam-monitor {
      position: relative;
      flex: 0 0 auto;
      width: calc(100% - 26px);
      max-width: 100%;
      margin: 0 auto;
      height: 176px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        linear-gradient(180deg, rgba(104, 255, 109, 0.08), rgba(0, 0, 0, 0.5)),
        rgba(2, 6, 4, 0.74);
      border: 1px solid rgba(104, 255, 109, 0.34);
      box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.7), 0 0 34px rgba(104, 255, 109, 0.2);
      animation: monitorHum 3.4s ease-in-out infinite;
    }

    .webcam-monitor-logo {
      width: 128px;
      height: auto;
      max-height: 112px;
      object-fit: contain;
      filter: drop-shadow(0 0 12px rgba(104, 255, 109, 0.35));
    }

    .webcam-live {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 3;
      padding: 8px 11px;
      border-radius: 999px;
      background: rgba(255, 49, 90, 0.18);
      color: var(--red);
      border: 1px solid rgba(255, 49, 90, 0.48);
      font-weight: 900;
      letter-spacing: 0.14em;
      font-size: 0.75rem;
      box-shadow: 0 0 18px rgba(255, 49, 90, 0.22);
      pointer-events: none;
    }

    .webcam-name {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 4;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 14px;
      border-radius: 5px;
      background: rgba(0, 0, 0, 0.72);
      border: 1px solid rgba(104, 255, 109, 0.18);
      color: var(--muted);
      font-size: 0.86rem;
    }

    .webcam-name strong {
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .alert-feed {
      border-radius: 8px;
      padding: 16px;
      opacity: 0.9;
      filter: saturate(0.88) brightness(0.96);
      background:
        linear-gradient(180deg, rgba(2, 13, 6, 0.78), rgba(0, 0, 0, 0.7)),
        radial-gradient(circle at 16% 100%, rgba(104, 255, 109, 0.14), transparent 42%);
      border: 1px solid rgba(104, 255, 109, 0.2);
      overflow: hidden;
    }

    .alert-title {
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 0.75rem;
      margin-bottom: 10px;
    }

    .alert-item {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 10px 12px;
      margin-bottom: 8px;
      border-radius: 5px;
      background: rgba(0, 0, 0, 0.42);
      border: 1px solid rgba(104, 255, 109, 0.11);
      color: var(--muted);
      animation: slideIn 240ms ease;
    }

    .alert-icon {
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: rgba(22, 244, 255, 0.12);
      color: var(--cyan);
      flex: none;
    }

    .stream-stage {
      position: relative;
      min-height: 0;
      overflow: hidden;
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(2, 10, 5, 0.94), rgba(0, 0, 0, 0.72)),
        radial-gradient(ellipse at 70% 10%, rgba(104, 255, 109, 0.22), transparent 36%),
        rgba(0, 0, 0, 0.5);
      border-color: rgba(104, 255, 109, 0.42);
      box-shadow: 0 0 40px rgba(104, 255, 109, 0.08);
    }

    @media (min-width: 1181px) {
      /* Eine Zeile, drei Spalten: gleiche Unterkante, nichts ragt in Nachbar-Container */
      .main-grid > .stream-stage {
        min-height: 0;
        height: 100%;
      }

      .main-grid > .chat-panel {
        height: 100%;
        min-height: 0;
      }

      .main-grid > .left-stack {
        display: grid;
        grid-template-rows: minmax(0, 1fr) 210px;
        height: 100%;
        min-height: 0;
        gap: 14px;
        overflow: hidden;
      }

      .main-grid > .left-stack > .webcam {
        min-height: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        align-self: stretch;
        overflow: hidden;
      }

      .main-grid > .left-stack > .alert-feed {
        height: 210px;
        min-height: 210px;
        max-height: 210px;
        min-width: 0;
        overflow: hidden;
        align-self: stretch;
      }
    }

    .stream-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 78% 18%, rgba(104, 255, 109, 0.2), transparent 28%),
        repeating-linear-gradient(90deg, transparent 0 58px, rgba(104, 255, 109, 0.045) 59px 60px);
      mix-blend-mode: screen;
      opacity: 0.82;
      animation: stagePulse 5s ease-in-out infinite;
    }

    .game-screen {
      position: absolute;
      inset: 18px 18px 24px;
      border-radius: 6px;
      overflow: hidden;
      box-sizing: border-box;
      background:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 72% 42%, rgba(104, 255, 109, 0.16), transparent 30%),
        linear-gradient(115deg, rgba(0, 0, 0, 0.86), rgba(2, 12, 6, 0.8)),
        rgba(2, 4, 3, 0.92);
      background-size: 46px 46px, 46px 46px, auto, auto;
      border: 1px solid rgba(104, 255, 109, 0.28);
      box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.62), 0 0 34px rgba(104, 255, 109, 0.12);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: clamp(12px, 2.2vmin, 34px);
    }

    .game-screen::before {
      content: "FOCUS  ADAPT  WIN";
      position: absolute;
      right: 18px;
      top: 14px;
      color: rgba(104, 255, 109, 0.62);
      font-size: 0.72rem;
      font-weight: 950;
      letter-spacing: 0.22em;
      text-shadow: 0 0 14px rgba(104, 255, 109, 0.42);
    }

    .game-screen::after {
      content: "";
      position: absolute;
      left: 10%;
      right: 10%;
      bottom: -18px;
      height: 14px;
      background: linear-gradient(90deg, transparent, rgba(104, 255, 109, 0.4), transparent);
      filter: blur(10px);
      pointer-events: none;
    }

    .hero-kicker {
      color: var(--green);
      text-transform: uppercase;
      letter-spacing: 0.18em;
      font-size: 0.82rem;
      font-weight: 850;
      text-shadow: 0 0 20px rgba(104, 255, 109, 0.45);
    }

    #introContent {
      position: relative;
      z-index: 1;
      width: min(720px, 100%);
      flex: none;
      min-width: 0;
      overflow: visible;
    }

    .intro-logo {
      display: block;
      width: auto;
      max-width: min(480px, 100%);
      height: auto;
      margin: 0 auto 8px;
      object-fit: contain;
      filter: drop-shadow(0 18px 48px rgba(0, 0, 0, 0.55));
      animation: logoSlam 680ms cubic-bezier(.17,.84,.36,1.24) both;
    }

    .intro-keyvisual {
      position: absolute;
      right: max(-190px, -15vw);
      bottom: -130px;
      width: min(520px, 42vw);
      opacity: 0.22;
      filter: drop-shadow(0 0 34px rgba(104, 255, 109, 0.45));
      pointer-events: none;
    }

    .hero-title {
      max-width: 760px;
      margin: 8px auto 6px;
      font-size: clamp(1.9rem, 4.2vw, 4.1rem);
      line-height: 0.88;
      letter-spacing: 0;
      text-transform: uppercase;
      text-shadow: 3px 0 rgba(35, 246, 210, 0.62), -3px 0 rgba(104, 255, 109, 0.66), 0 20px 42px rgba(0, 0, 0, 0.88);
    }

    .hero-copy {
      max-width: 620px;
      margin: 0 auto 10px;
      color: var(--muted);
      font-size: clamp(0.86rem, 1.05vw, 0.98rem);
      line-height: 1.34;
    }

    .mode-select {
      width: min(640px, 100%);
      margin: 0 auto 10px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .mode-btn {
      cursor: pointer;
      min-height: 48px;
      border: 1px solid rgba(104, 255, 109, 0.2);
      border-radius: 6px;
      padding: 8px;
      color: var(--text);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(0, 0, 0, 0.5);
      display: grid;
      align-content: center;
      gap: 4px;
      text-align: left;
      transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
    }

    .mode-btn:hover,
    .mode-btn.active {
      border-color: rgba(104, 255, 109, 0.72);
      box-shadow: 0 0 24px rgba(104, 255, 109, 0.18);
      transform: translateY(-1px);
    }

    .mode-btn strong {
      font-size: 0.82rem;
      line-height: 1;
      text-transform: uppercase;
    }

    .mode-btn span {
      color: var(--muted);
      font-size: 0.68rem;
      line-height: 1.25;
    }

    .preload-status {
      min-height: 18px;
      margin: -4px 0 8px;
      color: rgba(184, 199, 188, 0.86);
      font-size: 0.78rem;
      font-weight: 850;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .start-btn,
    .restart-btn,
    .share-btn {
      cursor: pointer;
      border: 0;
      border-radius: 5px;
      padding: 13px 20px;
      color: #061008;
      background: linear-gradient(180deg, #68ff6d, #27d449);
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      box-shadow: 0 0 28px rgba(104, 255, 109, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
      transition: transform 160ms ease, filter 160ms ease;
    }

    .start-btn:hover,
    .restart-btn:hover,
    .share-btn:hover,
    .action-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.08);
    }

    .now-event {
      width: min(900px, 96%);
      display: none;
      flex-direction: column;
      gap: 16px;
      align-items: stretch;
      flex: 0 1 auto;
      margin-inline: auto;
      margin-block: auto;
      animation: popIn 180ms ease;
    }

    .tutorial-coach {
      text-align: left;
      border-radius: 16px;
      padding: 18px 20px;
      background: linear-gradient(145deg, rgba(12, 42, 22, 0.95), rgba(2, 10, 5, 0.92));
      border: 1px solid rgba(104, 255, 109, 0.35);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(104, 255, 109, 0.1);
    }

    .tutorial-coach-inner {
      margin: 0;
    }

    .tutorial-coach-step {
      margin: 0 0 10px;
      font-size: 0.72rem;
      font-weight: 950;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--cyan);
      text-shadow: 0 0 12px rgba(35, 246, 210, 0.25);
    }

    .tutorial-coach-body {
      margin: 0 0 12px;
      font-size: 0.98rem;
      line-height: 1.45;
      font-weight: 600;
      color: var(--text);
      text-transform: none;
      letter-spacing: 0;
    }

    .tutorial-coach-tip {
      margin: 0;
      font-size: 0.86rem;
      line-height: 1.4;
      color: var(--muted);
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
    }

    .tutorial-coach-tip kbd,
    .tutorial-coach kbd {
      display: inline-block;
      margin: 0 2px;
      padding: 3px 9px;
      border-radius: 6px;
      font-size: 0.82em;
      font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
      font-weight: 800;
      color: var(--text);
      background: rgba(0, 0, 0, 0.55);
      border: 1px solid rgba(104, 255, 109, 0.35);
      box-shadow: 0 0 12px rgba(104, 255, 109, 0.15);
    }

    .event-card {
      position: relative;
      border-radius: 28px;
      padding: 32px 34px 30px;
      background: rgba(2, 8, 5, 0.88);
      border: 1px solid rgba(104, 255, 109, 0.2);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 42px rgba(104, 255, 109, 0.12);
      overflow: hidden;
    }

    .event-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.07), transparent);
      transform: translateX(-120%);
      animation: shine 2.8s ease-in-out infinite;
    }

    .event-meta {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .pill {
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.055);
      color: var(--muted);
      font-size: 0.76rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .event-user {
      color: var(--cyan);
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-shadow: 0 0 16px rgba(22, 244, 255, 0.3);
    }

    .event-message {
      margin: 16px 0 0;
      font-size: clamp(1.65rem, 3.2vw, 3.35rem);
      line-height: 1.06;
      letter-spacing: -0.045em;
      font-weight: 950;
    }

    .event-timer {
      margin: 22px auto 0;
      width: 100%;
      height: 12px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.09);
    }

    .event-timer-fill {
      height: 100%;
      width: 100%;
      background: linear-gradient(90deg, var(--cyan), var(--pink), var(--red));
      box-shadow: 0 0 24px rgba(255, 49, 90, 0.35);
      transform-origin: left center;
    }

    .feedback {
      /* display:none wenn zu: kein Kasten/Schatten mehr im Layout —auch kein „Streifen“ unten. */
      display: none;
      position: absolute;
      left: 50%;
      top: 17%;
      transform: translateX(-50%);
      min-width: 260px;
      padding: 13px 16px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(4, 5, 14, 0.82);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.11em;
      pointer-events: none;
      z-index: 7;
    }

    .feedback.show {
      display: block;
      /* Nur Einblendung — Ausblendung nur per showFeedback()-Timeout. */
      animation: feedbackPop 420ms ease forwards;
    }

    .feedback.good {
      color: var(--green);
      box-shadow: 0 0 30px rgba(73, 255, 159, 0.18);
    }

    .feedback.bad {
      color: var(--red);
      box-shadow: 0 0 30px rgba(255, 49, 90, 0.18);
    }

    .combo-pop {
      position: absolute;
      right: 26px;
      top: 26px;
      padding: 10px 13px;
      border-radius: 16px;
      color: var(--yellow);
      background: rgba(255, 228, 94, 0.08);
      border: 1px solid rgba(255, 228, 94, 0.2);
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      opacity: 0;
      transform: translateY(-10px);
    }

    .combo-pop.show {
      animation: combo 620ms ease;
    }

    .chat-panel {
      min-height: 0;
      border-radius: 8px;
      padding: 16px;
      display: grid;
      grid-template-rows: auto 1fr;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0.78)),
        radial-gradient(circle at 100% 0%, rgba(35, 246, 210, 0.11), transparent 28%),
        rgba(3, 10, 6, 0.76);
      border-color: rgba(35, 246, 210, 0.22);
      opacity: 0.9;
      filter: saturate(0.88) brightness(0.96);
    }

    .chat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .chat-title {
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .viewer-pill {
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(35, 246, 210, 0.1);
      color: var(--cyan);
      border: 1px solid rgba(35, 246, 210, 0.22);
      font-size: 0.8rem;
      font-weight: 850;
    }

    .chat-feed {
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column-reverse;
      gap: 9px;
      mask-image: linear-gradient(to top, black 80%, transparent 100%);
    }

    .chat-msg {
      padding: 12px;
      border-radius: 5px;
      background: rgba(0, 0, 0, 0.46);
      border: 1px solid rgba(104, 255, 109, 0.09);
      animation: chatIn 220ms ease;
    }

    .chat-msg.current {
      border-color: rgba(35, 246, 210, 0.34);
      background: rgba(35, 246, 210, 0.075);
      box-shadow: 0 0 28px rgba(35, 246, 210, 0.1);
    }

    .chat-user {
      display: block;
      color: var(--cyan);
      font-weight: 900;
      margin-bottom: 5px;
      font-size: 0.84rem;
    }

    .chat-text {
      color: rgba(247, 247, 255, 0.92);
      line-height: 1.35;
      font-size: 0.95rem;
    }

    .bottom-grid {
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 14px;
    }

    .obs-panel,
    .action-panel {
      border-radius: 8px;
      padding: 14px;
      background:
        linear-gradient(180deg, rgba(4, 8, 6, 0.92), rgba(0, 0, 0, 0.82)),
        radial-gradient(circle at 50% 100%, rgba(104, 255, 109, 0.08), transparent 42%);
      opacity: 0.92;
      filter: saturate(0.9) brightness(0.97);
    }

    .obs-panel {
      display: grid;
      grid-template-columns: 1.1fr 1fr 1fr;
      gap: 10px;
    }

    .obs-box {
      border-radius: 5px;
      padding: 12px;
      min-height: 86px;
      background: rgba(0, 0, 0, 0.44);
      border: 1px solid rgba(104, 255, 109, 0.12);
    }

    .obs-label {
      display: block;
      color: var(--muted);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      margin-bottom: 8px;
    }

    .audio-bars {
      height: 38px;
      display: flex;
      align-items: end;
      gap: 5px;
    }

    .audio-bars span {
      width: 10px;
      border-radius: 999px 999px 3px 3px;
      background: linear-gradient(180deg, var(--green), var(--yellow), var(--red));
      animation: audio 620ms ease-in-out infinite alternate;
    }

    .audio-bars span:nth-child(2) { animation-delay: 0.08s; }
    .audio-bars span:nth-child(3) { animation-delay: 0.16s; }
    .audio-bars span:nth-child(4) { animation-delay: 0.24s; }
    .audio-bars span:nth-child(5) { animation-delay: 0.32s; }

    .obs-box-mixer {
      display: flex;
      flex-direction: column;
      min-height: 118px;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(165deg, rgba(0, 0, 0, 0.55) 0%, rgba(12, 22, 18, 0.72) 100%),
        rgba(0, 0, 0, 0.44);
      border-color: rgba(104, 255, 109, 0.2);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 20px rgba(35, 246, 210, 0.06);
    }

    .obs-box-mixer .obs-label {
      margin-bottom: 6px;
    }

    .obs-mixer-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
      flex: 1;
      min-height: 0;
    }

    .obs-box-mixer .audio-bars {
      flex: 1;
      min-width: 0;
      padding: 6px 8px 4px;
      border-radius: 6px;
      background: rgba(0, 0, 0, 0.38);
      border: 1px solid rgba(104, 255, 109, 0.1);
    }

    .obs-mixer-master {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 10px;
      flex-shrink: 0;
    }

    .obs-mixer-rail {
      width: 4px;
      border-radius: 99px;
      background: linear-gradient(180deg, rgba(104, 255, 109, 0.12), rgba(35, 246, 210, 0.38));
      box-shadow: 0 0 12px rgba(35, 246, 210, 0.22);
      align-self: stretch;
      min-height: 56px;
    }

    .mute-btn--master {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-width: 88px;
      min-height: 74px;
      padding: 8px 10px 10px;
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(18, 28, 22, 0.96), rgba(0, 0, 0, 0.78));
      border: 1px solid rgba(104, 255, 109, 0.38);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.5);
    }

    .mute-btn--master:hover {
      border-color: rgba(35, 246, 210, 0.55);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 20px rgba(35, 246, 210, 0.2);
    }

    .mute-btn--master[aria-pressed="true"] {
      color: var(--muted);
      background: linear-gradient(180deg, rgba(38, 14, 18, 0.94), rgba(0, 0, 0, 0.85));
      border-color: rgba(255, 49, 90, 0.55);
      box-shadow:
        inset 0 0 14px rgba(255, 49, 90, 0.14),
        0 4px 14px rgba(0, 0, 0, 0.55);
    }

    .mute-btn__kicker {
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 800;
    }

    .mute-btn__label {
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.02em;
      line-height: 1.2;
      text-align: center;
      color: inherit;
    }

    .mute-btn__led {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: radial-gradient(circle at 32% 28%, #b8ffc4, var(--green) 52%, var(--green-deep));
      box-shadow:
        0 0 12px rgba(104, 255, 109, 0.9),
        inset 0 0 4px rgba(255, 255, 255, 0.45);
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .mute-btn--master[aria-pressed="true"] .mute-btn__led {
      background: radial-gradient(circle at 32% 28%, #ffb8c4, var(--red) 55%, #2a050d);
      box-shadow:
        0 0 10px rgba(255, 49, 90, 0.5),
        inset 0 0 3px rgba(0, 0, 0, 0.35);
    }

    .obs-box-mixer:has(.mute-btn--master[aria-pressed="true"]) .audio-bars span {
      animation-play-state: paused;
      opacity: 0.34;
      filter: grayscale(0.45);
    }

    .scene-list {
      display: grid;
      gap: 7px;
    }

    .scene {
      display: flex;
      justify-content: space-between;
      padding: 7px 9px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.04);
      color: var(--muted);
      font-size: 0.82rem;
    }

    .scene.active {
      color: var(--green);
      background: rgba(104, 255, 109, 0.11);
    }

    .action-panel {
      display: grid;
      gap: 10px;
    }

    .actions-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--muted);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .action-buttons {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 9px;
      perspective: 900px;
    }

    .action-btn {
      position: relative;
      cursor: pointer;
      border: 1px solid rgba(104, 255, 109, 0.28);
      border-radius: 6px;
      min-height: 76px;
      padding: 9px 8px 10px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 28%, rgba(0, 0, 0, 0.44)),
        radial-gradient(circle at 50% 0%, rgba(104, 255, 109, 0.16), transparent 54%),
        #050806;
      color: var(--text);
      display: grid;
      place-items: center;
      gap: 2px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      transform: translateZ(0);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -5px 0 rgba(0, 0, 0, 0.45),
        0 10px 18px rgba(0, 0, 0, 0.48),
        0 0 18px rgba(104, 255, 109, 0.1);
      transition: transform 130ms ease, border-color 130ms ease, background 130ms ease, box-shadow 130ms ease;
    }

    .action-btn::before {
      content: attr(data-icon);
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      margin-bottom: 2px;
      border-radius: 5px;
      color: #061008;
      background: linear-gradient(180deg, rgba(104, 255, 109, 0.96), rgba(39, 212, 73, 0.86));
      box-shadow: 0 0 16px rgba(104, 255, 109, 0.24);
      font-size: 1.05rem;
      line-height: 1;
    }

    .action-btn::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(120deg, transparent 0 34%, rgba(255, 255, 255, 0.13) 42%, transparent 52%);
      opacity: 0;
      transform: translateX(-40%);
      transition: opacity 130ms ease, transform 180ms ease;
      pointer-events: none;
    }

    .action-btn:hover::after {
      opacity: 1;
      transform: translateX(18%);
    }

    .action-btn:hover {
      border-color: rgba(104, 255, 109, 0.72);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -5px 0 rgba(0, 0, 0, 0.4),
        0 12px 24px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(104, 255, 109, 0.22);
    }

    .action-btn:active {
      transform: translateY(4px) scale(0.985);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -2px 0 rgba(0, 0, 0, 0.58),
        0 4px 10px rgba(0, 0, 0, 0.56);
    }

    .action-btn small {
      color: var(--muted);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .action-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      transform: none;
      pointer-events: none;
    }

    .action-btn[data-action="ban"] { box-shadow: inset 0 -2px 0 rgba(255, 49, 90, 0.44); }
    .action-btn[data-action="timeout"] { box-shadow: inset 0 -2px 0 rgba(255, 138, 43, 0.44); }
    .action-btn[data-action="reply"] { box-shadow: inset 0 -2px 0 rgba(22, 244, 255, 0.44); }
    .action-btn[data-action="thank"] { box-shadow: inset 0 -2px 0 rgba(73, 255, 159, 0.44); }
    .action-btn[data-action="ignore"] { box-shadow: inset 0 -2px 0 rgba(174, 178, 215, 0.38); }
    .action-btn[data-action="mod"] { box-shadow: inset 0 -2px 0 rgba(139, 92, 255, 0.44); }
    .action-btn[data-action="obs"] { box-shadow: inset 0 -2px 0 rgba(255, 228, 94, 0.44); }

    .overlay {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: none;
      place-items: center;
      padding: 22px;
      background: rgba(0, 0, 0, 0.68);
      backdrop-filter: blur(14px);
    }

    .overlay.show {
      display: grid;
    }

    .result-card,
    .start-card {
      width: min(760px, 100%);
      border-radius: 34px;
      padding: clamp(24px, 4vw, 42px);
      background:
        radial-gradient(circle at 20% 0%, rgba(255, 43, 214, 0.18), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(22, 244, 255, 0.15), transparent 30%),
        rgba(6, 8, 20, 0.96);
      border: 1px solid rgba(255, 255, 255, 0.13);
      box-shadow: 0 30px 100px rgba(0, 0, 0, 0.62), var(--shadow-cyan), var(--shadow-pink);
      text-align: center;
    }

    .result-title,
    .start-title {
      margin: 0;
      font-size: clamp(2.2rem, 5vw, 5rem);
      line-height: 0.92;
      letter-spacing: -0.08em;
      text-transform: uppercase;
    }

    .result-sub,
    .start-sub {
      margin: 14px auto 26px;
      max-width: 620px;
      color: var(--muted);
      line-height: 1.55;
      font-size: 1.05rem;
    }

    .result-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin: 24px 0;
      text-align: left;
    }

    .leaderboard-panel {
      width: min(640px, 100%);
      margin: 8px auto 10px;
      padding: 8px;
      border: 1px solid rgba(104, 255, 109, 0.2);
      border-radius: 6px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(0, 0, 0, 0.42);
      text-align: left;
    }

    .webcam-leaderboard.leaderboard-panel {
      width: 100%;
      margin: 0;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      padding: 6px 7px;
    }

    .webcam-leaderboard .leaderboard-title {
      font-size: 0.66rem;
      margin-bottom: 4px;
    }

    .webcam-leaderboard .leaderboard-list {
      gap: 4px;
      min-height: 0;
      overflow: hidden;
    }

    .webcam-leaderboard .leaderboard-row,
    .webcam-leaderboard .leaderboard-empty {
      min-height: 24px;
      padding: 4px 6px;
      font-size: 0.72rem;
      grid-template-columns: 26px 1fr auto;
      gap: 5px;
    }

    .webcam-leaderboard .leaderboard-meta strong {
      font-size: 0.74rem;
    }

    .webcam-leaderboard .leaderboard-score {
      font-size: 0.78rem;
    }

    .leaderboard-title {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 6px;
      color: var(--green);
      font-size: 0.76rem;
      font-weight: 950;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .leaderboard-local-hint {
      margin: 0 0 6px;
      padding: 0;
      font-size: 0.58rem;
      font-weight: 650;
      line-height: 1.35;
      letter-spacing: 0.04em;
      color: rgba(184, 199, 188, 0.72);
      text-transform: none;
    }

    .leaderboard-panel.leaderboard-panel--intro-mobile {
      display: none;
    }

    .leaderboard-list {
      display: grid;
      gap: 5px;
    }

    .leaderboard-row,
    .leaderboard-empty {
      min-height: 28px;
      display: grid;
      grid-template-columns: 34px 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 5px 8px;
      border: 1px solid rgba(104, 255, 109, 0.1);
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.36);
      color: rgba(247, 255, 248, 0.9);
      font-size: 0.82rem;
    }

    #homeLeaderboard .leaderboard-row:nth-child(n+4) {
      display: none;
    }

    .leaderboard-empty {
      grid-template-columns: 1fr;
      color: var(--muted);
      text-align: center;
    }

    .leaderboard-row b {
      color: var(--green);
    }

    .leaderboard-meta {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .leaderboard-meta strong {
      color: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.84rem;
    }

    .leaderboard-sub {
      font-size: 0.68rem;
      color: rgba(184, 199, 188, 0.75);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .leaderboard-score {
      color: var(--cyan);
      font-weight: 950;
      font-size: 0.88rem;
      text-align: right;
    }

    .score-submit {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      margin: 4px 0 12px;
    }

    .score-input {
      min-height: 46px;
      border: 1px solid rgba(104, 255, 109, 0.24);
      border-radius: 5px;
      padding: 0 12px;
      color: #fff;
      background: rgba(0, 0, 0, 0.48);
      font: inherit;
      font-weight: 850;
      outline: none;
    }

    .score-input:focus {
      border-color: rgba(104, 255, 109, 0.72);
      box-shadow: 0 0 20px rgba(104, 255, 109, 0.14);
    }

    .result-item {
      border-radius: 18px;
      padding: 14px;
      background: rgba(255, 255, 255, 0.055);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .result-item span {
      display: block;
      color: var(--muted);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 5px;
    }

    .result-item strong {
      font-size: 1.45rem;
      letter-spacing: -0.04em;
    }

    .result-rank {
      margin: 18px 0 24px;
      padding: 16px;
      border-radius: 22px;
      color: #03040b;
      background: linear-gradient(135deg, var(--yellow), var(--cyan));
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .result-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .restart-btn {
      background: linear-gradient(135deg, var(--cyan), var(--pink));
    }

    .share-btn {
      background: linear-gradient(135deg, var(--yellow), var(--green));
    }

    .danger-flash {
      position: fixed;
      inset: 0;
      z-index: 25;
      pointer-events: none;
      opacity: 0;
      background:
        linear-gradient(90deg, rgba(255, 49, 90, 0.24), transparent 20%, transparent 80%, rgba(255, 49, 90, 0.24)),
        radial-gradient(circle at center, transparent 0%, rgba(255, 49, 90, 0.42) 90%);
    }

    .danger-flash.show {
      animation: flash 320ms ease forwards;
    }

    .live-intro,
    .raid-overlay,
    .persona-callout {
      position: fixed;
      pointer-events: none;
      z-index: 28;
    }

    .live-intro {
      inset: 0;
      display: none;
      place-items: center;
      background:
        radial-gradient(circle at 50% 42%, rgba(104, 255, 109, 0.18), transparent 28%),
        rgba(0, 0, 0, 0.58);
      backdrop-filter: blur(8px);
    }

    .live-intro.show {
      display: grid;
      animation: introFade 3.05s ease forwards;
    }

    .live-intro-card {
      display: grid;
      justify-items: center;
      gap: 14px;
      text-align: center;
      text-transform: uppercase;
    }

    .live-intro-logo {
      /* Viewport-aware: respektiert sowohl schmale Breiten ALS AUCH niedrige Hoehen
         (z.B. Game im Monitor-Rig-Iframe ~1000x500). 2.47 = 1788/724 (native Ratio). */
      width: min(420px, 64vw, calc(38vh * 2.47));
      height: auto;
      max-height: 38vh;
      object-fit: contain;
      filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.5));
      animation: introLogo 900ms cubic-bezier(.17,.84,.36,1.24) both;
    }

    .live-count {
      /* font-size nimmt jeweils den kleineren Wert von vw und vh -> bleibt
         in niedrigen Iframes proportional zum verfuegbaren Raum. */
      font-size: clamp(3rem, min(14vw, 22vh), 12rem);
      line-height: 0.82;
      font-weight: 950;
      color: #f7fff8;
      text-shadow: 4px 0 rgba(35, 246, 210, 0.62), -4px 0 rgba(104, 255, 109, 0.72), 0 0 38px rgba(104, 255, 109, 0.36);
      animation: countPunch 780ms ease infinite;
    }

    .live-copy {
      color: var(--green);
      font-weight: 950;
      letter-spacing: 0.22em;
      text-shadow: 0 0 18px rgba(104, 255, 109, 0.56);
    }

    .raid-overlay {
      left: 18px;
      right: 18px;
      top: 134px;
      display: none;
      padding: 12px 16px;
      border: 1px solid rgba(104, 255, 109, 0.48);
      border-radius: 6px;
      color: #061008;
      background: linear-gradient(90deg, rgba(104, 255, 109, 0.94), rgba(35, 246, 210, 0.86), rgba(104, 255, 109, 0.94));
      box-shadow: 0 0 34px rgba(104, 255, 109, 0.34);
      font-weight: 950;
      letter-spacing: 0.16em;
      text-align: center;
      text-transform: uppercase;
    }

    .raid-overlay.show {
      display: block;
      animation: raidSweep 1.35s ease forwards;
    }

    .persona-callout {
      left: 50%;
      top: 18%;
      display: none;
      min-width: min(520px, calc(100vw - 40px));
      padding: 16px 18px;
      border: 1px solid rgba(104, 255, 109, 0.34);
      border-radius: 6px;
      background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.88), rgba(4, 22, 10, 0.78)),
        radial-gradient(circle at 0 0, rgba(104, 255, 109, 0.18), transparent 40%);
      box-shadow: 0 0 34px rgba(104, 255, 109, 0.2), 0 18px 60px rgba(0, 0, 0, 0.6);
      transform: translateX(-50%);
      text-align: center;
      text-transform: uppercase;
    }

    .persona-callout.show {
      display: block;
      animation: personaPop 1.45s ease forwards;
    }

    .persona-callout.rage {
      border-color: rgba(255, 49, 90, 0.56);
      box-shadow: 0 0 34px rgba(255, 49, 90, 0.22), 0 18px 60px rgba(0, 0, 0, 0.6);
    }

    .persona-callout.tactical {
      border-color: rgba(35, 246, 210, 0.56);
      box-shadow: 0 0 34px rgba(35, 246, 210, 0.2), 0 18px 60px rgba(0, 0, 0, 0.6);
    }

    .persona-kicker {
      display: block;
      margin-bottom: 6px;
      color: var(--green);
      font-size: 0.74rem;
      font-weight: 950;
      letter-spacing: 0.18em;
    }

    .persona-text {
      color: #fff;
      font-size: clamp(1.3rem, 2.8vw, 2.4rem);
      line-height: 0.94;
      font-weight: 950;
      text-shadow: 2px 0 rgba(35, 246, 210, 0.42), -2px 0 rgba(104, 255, 109, 0.42);
    }

    body.glitch .game-shell {
      animation: glitchShake 130ms steps(2, end) infinite;
    }

    body.combo-hit .stream-stage {
      animation: hitKick 260ms cubic-bezier(.2,.9,.2,1);
    }

    body.combo-hit .game-screen {
      box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.62), 0 0 54px rgba(104, 255, 109, 0.34);
    }

    body.fail-hit .stream-stage {
      animation: failKick 320ms steps(3, end);
    }

    body.glitch .hero-title,
    body.glitch .event-message,
    body.glitch .brand-title {
      text-shadow:
        2px 0 var(--cyan),
        -2px 0 var(--pink),
        0 0 32px rgba(255, 49, 90, 0.28);
    }

    @keyframes streamerBob {
      0%, 100% { transform: translateY(0) rotate(-1deg); }
      50% { transform: translateY(8px) rotate(1deg); }
    }

    @keyframes monitorHum {
      0%, 100% { filter: brightness(0.94) saturate(1); transform: translateY(0); }
      50% { filter: brightness(1.12) saturate(1.18); transform: translateY(3px); }
    }

    @keyframes slideIn {
      from { opacity: 0; transform: translateX(-16px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes popIn {
      from { opacity: 0; transform: scale(0.96); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes chatIn {
      from { opacity: 0; transform: translateX(20px) scale(0.98); }
      to { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes shine {
      0%, 45% { transform: translateX(-120%); }
      75%, 100% { transform: translateX(120%); }
    }

    @keyframes audio {
      from { height: 9px; }
      to { height: 38px; }
    }

    @keyframes feedbackPop {
      0% { opacity: 0; transform: translate(-50%, -10px) scale(0.96); }
      100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }

    @keyframes combo {
      0% { opacity: 0; transform: translateY(-12px) scale(0.94); }
      18%, 80% { opacity: 1; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
    }

    @keyframes flash {
      0% { opacity: 0; }
      30% { opacity: 1; }
      100% { opacity: 0; }
    }

    @keyframes glitchShake {
      0% { transform: translate(0, 0); }
      25% { transform: translate(2px, -1px); }
      50% { transform: translate(-2px, 1px); }
      75% { transform: translate(1px, 2px); }
      100% { transform: translate(0, 0); }
    }

    @keyframes stagePulse {
      0%, 100% { opacity: 0.62; transform: translate3d(0, 0, 0); }
      50% { opacity: 0.9; transform: translate3d(0, -6px, 0); }
    }

    @keyframes logoSlam {
      0% { opacity: 0; transform: translateY(28px) scale(1.08); filter: blur(8px) drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
      66% { opacity: 1; transform: translateY(-4px) scale(0.98); filter: blur(0) drop-shadow(0 16px 32px rgba(0, 0, 0, 0.42)); }
      100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 18px 48px rgba(0, 0, 0, 0.55)); }
    }

    @keyframes hitKick {
      0% { transform: scale(1); filter: saturate(1); }
      32% { transform: scale(1.018) rotate(-0.18deg); filter: saturate(1.45) brightness(1.12); }
      100% { transform: scale(1); filter: saturate(1); }
    }

    @keyframes failKick {
      0% { transform: translate(0, 0); filter: hue-rotate(0deg); }
      28% { transform: translate(-8px, 3px); filter: hue-rotate(-26deg) contrast(1.22); }
      60% { transform: translate(7px, -4px); }
      100% { transform: translate(0, 0); filter: hue-rotate(0deg); }
    }

    @keyframes introFade {
      0%, 78% { opacity: 1; }
      100% { opacity: 0; }
    }

    @keyframes introLogo {
      0% { opacity: 0; transform: translateY(28px) scale(1.08); filter: blur(10px) drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
      70% { opacity: 1; transform: translateY(-5px) scale(0.98); filter: blur(0) drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45)); }
      100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.5)); }
    }

    @keyframes countPunch {
      0% { transform: scale(0.82); opacity: 0; }
      24%, 72% { transform: scale(1); opacity: 1; }
      100% { transform: scale(1.18); opacity: 0; }
    }

    @keyframes raidSweep {
      0% { opacity: 0; transform: translateY(-18px) scaleX(0.92); filter: blur(6px); }
      18%, 78% { opacity: 1; transform: translateY(0) scaleX(1); filter: blur(0); }
      100% { opacity: 0; transform: translateY(-10px) scaleX(1.04); }
    }

    @keyframes personaPop {
      0% { opacity: 0; transform: translate(-50%, -18px) scale(0.94); filter: blur(5px); }
      16%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
      100% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); }
    }

    @media (max-width: 1180px) {
      html,
      body {
        overflow: auto;
      }

      .game-shell {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
      }

      .topbar,
      .main-grid,
      .bottom-grid {
        grid-template-columns: 1fr;
      }

      .main-grid {
        min-height: 800px;
      }

      .left-stack {
        grid-template-rows: 300px auto;
      }

      .stream-stage {
        min-height: 560px;
      }

      .chat-panel {
        min-height: 420px;
      }

      .action-buttons {
        grid-template-columns: repeat(2, 1fr);
      }

      .obs-panel {
        grid-template-columns: 1fr;
      }
    }

    @media (max-height: 1150px) and (min-width: 1181px) {
      .game-shell {
        padding: 14px 18px;
        gap: 10px;
      }

      .topbar {
        gap: 10px;
      }

      .brand-card,
      .stats-card,
      .status-card {
        min-height: 86px;
      }

      .brand-card {
        padding: 10px 14px;
      }

      .logo-mark {
        width: 58px;
        height: 48px;
      }

      .brand-title {
        font-size: 1.25rem;
      }

      .brand-subtitle {
        font-size: 0.78rem;
      }

      .stat {
        padding: 10px;
      }

      .stat-value {
        font-size: 1.55rem;
      }

      .main-grid {
        gap: 10px;
        grid-template-columns: 320px minmax(360px, 1fr) 390px;
      }

      .left-stack {
        display: grid;
        grid-template-rows: minmax(0, 1fr) 210px;
        height: 100%;
        min-height: 0;
        gap: 10px;
        overflow: hidden;
      }

      .left-stack > .webcam {
        min-height: 0;
        width: 100%;
        height: 100%;
        align-self: stretch;
        overflow: hidden;
      }

      .left-stack > .alert-feed {
        height: 210px;
        min-height: 210px;
        max-height: 210px;
        overflow: hidden;
        align-self: stretch;
      }

      .webcam-body {
        padding: 42px 6px 56px;
        gap: 8px;
      }

      .webcam-monitor {
        height: 116px;
        width: calc(100% - 20px);
      }

      .webcam-monitor-logo {
        width: 98px;
        max-height: 86px;
      }

      .webcam-name {
        bottom: 16px;
      }

      .alert-feed,
      .chat-panel,
      .obs-panel,
      .action-panel {
        padding: 12px;
      }

      .bottom-grid {
        gap: 10px;
      }

      .obs-box {
        min-height: 74px;
        padding: 10px;
      }

      .obs-box-mixer {
        min-height: 108px;
      }

      .mute-btn--master {
        min-width: 78px;
        min-height: 68px;
        padding: 7px 8px 9px;
      }

      .obs-mixer-row {
        gap: 10px;
      }

      .action-btn {
        min-height: 62px;
        padding: 7px 6px 8px;
        font-size: 0.84rem;
      }

      .action-btn::before {
        width: 21px;
        height: 21px;
        font-size: 0.72rem;
      }

      .game-screen {
        inset: 16px;
        padding: clamp(10px, 1.8vmin, 18px);
      }

      /* Ohne Scrollbar: Intro + Bestenliste in der Mittel‑Stage enger gesetzt */
      #introContent .intro-logo {
        max-width: min(360px, 94%);
        margin-bottom: 4px;
      }

      #introContent .hero-kicker {
        font-size: 0.72rem;
      }

      #introContent .hero-title {
        margin: 4px auto;
        font-size: clamp(1.35rem, 2.65vw, 2.65rem);
        line-height: 0.92;
      }

      #introContent .hero-copy {
        margin: 0 auto 6px;
        font-size: clamp(0.74rem, 0.92vw, 0.82rem);
        line-height: 1.26;
      }

      #introContent .tutorial-hint {
        margin: 0 auto 8px;
        padding: 8px 10px;
        font-size: 0.82rem;
        line-height: 1.38;
      }

      #introContent .mode-select {
        margin-bottom: 6px;
        gap: 5px;
      }

      #introContent .mode-btn {
        min-height: 42px;
        padding: 6px 7px;
      }

      #introContent .mode-btn span {
        font-size: 0.62rem;
        line-height: 1.2;
      }

      #introContent .preload-status {
        margin: -2px 0 5px;
        font-size: 0.7rem;
      }

      #introContent .start-btn {
        padding: 10px 16px;
        font-size: 0.88rem;
      }
    }

    @media (max-width: 720px) {
      .game-shell {
        padding: 10px;
      }

      .stats-card {
        grid-template-columns: repeat(2, 1fr);
      }

      .event-card {
        padding: 20px;
      }

      .mode-select {
        grid-template-columns: 1fr;
      }

      .intro-keyvisual {
        width: 72vw;
        right: -34vw;
        opacity: 0.2;
      }

      .result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .score-submit {
        grid-template-columns: 1fr;
      }
    }

    .tutorial-hint {
      margin: 0 auto 14px;
      max-width: 640px;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid rgba(104, 255, 109, 0.28);
      background: rgba(0, 0, 0, 0.45);
      color: rgba(247, 255, 248, 0.92);
      font-size: 0.88rem;
      line-height: 1.45;
    }

    .ps-result-card {
      width: min(920px, 100%);
      border-radius: 10px;
      padding: clamp(22px, 3.5vw, 36px);
      text-align: center;
      border: 1px solid rgba(104, 255, 109, 0.32);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 42%),
        radial-gradient(ellipse 120% 80% at 50% 0%, rgba(104, 255, 109, 0.1), transparent 55%),
        radial-gradient(ellipse 80% 50% at 100% 100%, rgba(35, 246, 210, 0.07), transparent 45%),
        linear-gradient(165deg, rgba(4, 14, 8, 0.97), rgba(0, 0, 0, 0.94));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 28px 80px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(104, 255, 109, 0.12),
        0 0 64px rgba(35, 246, 210, 0.06);
    }

    .result-layout {
      display: grid;
      grid-template-columns: minmax(148px, 0.95fr) minmax(0, 2.4fr);
      gap: clamp(16px, 3vw, 28px);
      align-items: start;
      text-align: left;
    }

    .result-rank-column {
      position: sticky;
      top: 0;
      padding: 12px 12px 14px;
      border-radius: 8px;
      border: 1px solid rgba(104, 255, 109, 0.2);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
        rgba(0, 0, 0, 0.42);
      box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
    }

    .result-rank-ladder-title {
      margin: 0 0 10px;
      font-size: 0.62rem;
      font-weight: 950;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--cyan);
    }

    .result-rank-ladder {
      margin: 0;
      padding: 0 0 0 18px;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
      counter-reset: rankstep;
    }

    .result-rank-ladder-item {
      position: relative;
      margin: 0;
      padding: 8px 8px 8px 10px;
      border-radius: 6px;
      font-size: 0.68rem;
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: 0.04em;
      color: rgba(184, 199, 188, 0.88);
      background: rgba(0, 0, 0, 0.28);
      border: 1px solid rgba(104, 255, 109, 0.1);
      list-style: none;
    }

    .result-rank-ladder-item::before {
      counter-increment: rankstep;
      content: counter(rankstep) ".";
      position: absolute;
      left: -14px;
      top: 8px;
      font-size: 0.58rem;
      font-weight: 900;
      color: rgba(104, 255, 109, 0.45);
    }

    .result-rank-ladder-item.is-current {
      color: #edfff0;
      border-color: rgba(104, 255, 109, 0.55);
      background:
        linear-gradient(135deg, rgba(104, 255, 109, 0.14), rgba(35, 246, 210, 0.08));
      box-shadow: 0 0 20px rgba(104, 255, 109, 0.12);
    }

    .result-main-column {
      min-width: 0;
      text-align: center;
    }

    .result-main-column .result-screen-top,
    .result-main-column .result-stats-panel,
    .result-main-column .result-submit-panel,
    .result-main-column .result-actions {
      text-align: center;
    }

    .result-main-column .result-grid {
      text-align: left;
    }

    .result-action-btn {
      cursor: pointer;
      flex: 1 1 160px;
      min-height: 46px;
      border-radius: 6px;
      padding: 12px 14px;
      font: inherit;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.72rem;
      transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease, background 150ms ease, filter 150ms ease;
    }

    .ps-result-card .result-action-btn--primary {
      border: 1px solid rgba(104, 255, 109, 0.55);
      color: #edfff0;
      background: linear-gradient(180deg, rgba(104, 255, 109, 0.22), rgba(18, 60, 28, 0.95));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 22px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(104, 255, 109, 0.15);
    }

    .ps-result-card .result-action-btn--primary:hover {
      border-color: rgba(35, 246, 210, 0.65);
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 26px rgba(35, 246, 210, 0.2);
    }

    .ps-result-card .result-action-btn--ghost {
      border: 1px solid rgba(35, 246, 210, 0.42);
      color: #e8fffb;
      background: rgba(0, 0, 0, 0.5);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .ps-result-card .result-action-btn--ghost:hover {
      border-color: rgba(35, 246, 210, 0.65);
      background: rgba(35, 246, 210, 0.1);
      transform: translateY(-1px);
    }

    .ps-result-card .result-action-btn--accent {
      border: 1px solid rgba(104, 255, 109, 0.48);
      color: #061008;
      background: linear-gradient(180deg, #68ff6d, #27d449);
      font-weight: 950;
      letter-spacing: 0.07em;
      box-shadow: 0 0 22px rgba(104, 255, 109, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .ps-result-card .result-action-btn--accent:hover:not(:disabled) {
      filter: brightness(1.06);
      transform: translateY(-1px);
    }

    .ps-result-card .result-action-btn--accent:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
      filter: grayscale(0.2);
    }

    .ps-result-card .result-action-btn--menu {
      flex: 0 1 120px;
      min-width: 100px;
    }

    .ps-result-card .result-action-btn--menu.intro-secondary-btn {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .result-screen-top {
      margin-bottom: 8px;
    }

    .result-screen-pills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-bottom: 14px;
    }

    .result-pill {
      display: inline-block;
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 0.65rem;
      font-weight: 900;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(2, 8, 4, 0.95);
      background: linear-gradient(135deg, var(--cyan), var(--green));
      box-shadow: 0 0 18px rgba(35, 246, 210, 0.25);
    }

    .result-pill--outline {
      background: rgba(0, 0, 0, 0.35);
      color: var(--muted);
      border: 1px solid rgba(104, 255, 109, 0.28);
      box-shadow: none;
      letter-spacing: 0.12em;
    }

    .ps-result-card .result-brand {
      margin: 0 0 8px;
    }

    .ps-result-card .result-sub {
      margin: 10px auto 0;
      max-width: 560px;
      font-size: 0.95rem;
      color: rgba(184, 199, 188, 0.95);
      line-height: 1.45;
    }

    .result-stats-panel {
      margin: 20px 0 16px;
      padding: 14px;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.38);
      border: 1px solid rgba(104, 255, 109, 0.14);
      box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.35);
    }

    .ps-result-card .result-grid {
      margin: 0;
      gap: 8px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ps-result-card .result-item {
      min-width: 0;
      border-radius: 6px;
      padding: 12px 14px;
      background: rgba(0, 0, 0, 0.42);
      border: 1px solid rgba(104, 255, 109, 0.14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .ps-result-card .result-item span {
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .ps-result-card .result-item strong {
      font-size: 1.18rem;
      color: var(--text);
      text-shadow: 0 0 18px rgba(104, 255, 109, 0.12);
    }

    .ps-result-card .result-rank {
      margin: 14px 0 18px;
      padding: 14px 16px;
      border-radius: 8px;
      color: var(--green);
      background:
        linear-gradient(135deg, rgba(104, 255, 109, 0.12), rgba(35, 246, 210, 0.08));
      border: 1px solid rgba(104, 255, 109, 0.35);
      box-shadow: 0 0 24px rgba(104, 255, 109, 0.1);
      font-size: 0.88rem;
    }

    .result-submit-panel {
      margin-bottom: 18px;
    }

    .result-submit-panel .score-submit {
      margin-bottom: 12px;
    }

    .result-leaderboard.leaderboard-panel {
      margin: 0 auto;
      width: 100%;
      max-width: 100%;
      padding: 12px;
      border-radius: 8px;
      border-color: rgba(104, 255, 109, 0.22);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
        rgba(0, 0, 0, 0.48);
    }

    .ps-result-card .result-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: 10px;
      margin-top: 4px;
    }

    .ps-result-card .restart-btn {
      background: linear-gradient(180deg, rgba(104, 255, 109, 0.22), rgba(18, 60, 28, 0.95));
      border: 1px solid rgba(104, 255, 109, 0.5);
      color: #edfff0;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 22px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(104, 255, 109, 0.15);
    }

    .ps-result-card .restart-btn:hover {
      border-color: rgba(35, 246, 210, 0.65);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 26px rgba(35, 246, 210, 0.2);
    }

    .ps-result-card .share-btn {
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(35, 246, 210, 0.38);
      color: #e8fffb;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .ps-result-card .share-btn:hover {
      border-color: rgba(35, 246, 210, 0.6);
      background: rgba(35, 246, 210, 0.1);
    }

    .ps-result-card .share-btn-alt {
      background: rgba(0, 0, 0, 0.55);
      border: 1px solid rgba(104, 255, 109, 0.28);
      color: rgba(247, 255, 248, 0.94);
    }

    .overlay.ps-result-open {
      background:
        radial-gradient(ellipse at 50% 0%, rgba(104, 255, 109, 0.12), transparent 42%),
        radial-gradient(ellipse at 80% 100%, rgba(35, 246, 210, 0.08), transparent 40%),
        rgba(0, 10, 5, 0.82);
      backdrop-filter: blur(12px) saturate(1.05);
    }

    .overlay.ps-result-open::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.07;
      background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(104, 255, 109, 0.12) 3px,
        rgba(104, 255, 109, 0.12) 4px
      );
      z-index: 0;
    }

    .overlay.ps-result-open .result-card {
      position: relative;
      z-index: 1;
    }

    img.ps-asset-missing {
      opacity: 0.35;
      outline: 1px dashed rgba(104, 255, 109, 0.28);
      outline-offset: 4px;
    }

    /* --- Chat Chaos v0.9: Hierarchie, Start-Screen, Result --- */
    .main-grid > .left-stack > .webcam,
    .main-grid > .left-stack > .alert-feed,
    .main-grid > .chat-panel {
      opacity: 0.8;
      filter: saturate(0.85) brightness(0.94);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 20px rgba(0, 0, 0, 0.42);
    }

    .stream-stage {
      box-shadow: 0 0 26px rgba(104, 255, 109, 0.07);
    }

    .stream-stage::before {
      opacity: 0.48;
    }

    .game-screen {
      box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.6), 0 0 22px rgba(104, 255, 109, 0.08);
    }

    .game-screen::before {
      color: rgba(104, 255, 109, 0.42);
      text-shadow: none;
    }

    .game-screen::after {
      opacity: 0.45;
    }

    .intro-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 6px auto 16px;
      width: min(640px, 100%);
    }

    .intro-main-btn {
      flex: 1 1 200px;
      min-width: 160px;
    }

    .intro-secondary-btn {
      cursor: pointer;
      flex: 1 1 120px;
      min-height: 46px;
      border-radius: 6px;
      padding: 10px 14px;
      border: 1px solid rgba(104, 255, 109, 0.35);
      background: rgba(0, 0, 0, 0.45);
      color: var(--text);
      font-weight: 850;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 0.78rem;
      transition: border-color 150ms ease, transform 150ms ease;
    }

    .intro-secondary-btn:hover {
      border-color: rgba(104, 255, 109, 0.65);
      transform: translateY(-1px);
    }

    .now-event .event-card {
      border: 1px solid rgba(104, 255, 109, 0.45);
      box-shadow: 0 20px 70px rgba(0, 0, 0, 0.58), 0 0 40px rgba(104, 255, 109, 0.16);
      background: rgba(2, 10, 6, 0.94);
    }

    .pill-focus {
      border-color: rgba(104, 255, 109, 0.55);
      color: var(--green);
      background: rgba(104, 255, 109, 0.08);
      font-weight: 900;
    }

    .pill-muted {
      opacity: 0.72;
      text-transform: none;
      letter-spacing: 0.06em;
    }

    .feedback {
      min-width: min(420px, 92vw);
      max-width: min(560px, 94vw);
      text-transform: none;
      letter-spacing: 0.04em;
      line-height: 1.25;
      font-weight: 800;
      font-size: 0.82rem;
    }

    .bottom-grid .obs-panel {
      opacity: 0.78;
      filter: saturate(0.85);
    }

    .bottom-grid .action-panel {
      opacity: 1;
      border-color: rgba(104, 255, 109, 0.38);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 22px rgba(104, 255, 109, 0.1),
        0 14px 36px rgba(0, 0, 0, 0.5);
    }

    .action-btn:not(:disabled) {
      border-color: rgba(104, 255, 109, 0.42);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -5px 0 rgba(0, 0, 0, 0.45),
        0 12px 22px rgba(0, 0, 0, 0.55),
        0 0 20px rgba(104, 255, 109, 0.12);
    }

    .result-brand {
      margin: 0 0 4px;
      font-size: 0.72rem;
      font-weight: 950;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(104, 255, 109, 0.78);
    }

    .result-tagline {
      margin: 0 0 10px;
      font-size: 0.82rem;
      color: var(--muted);
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .ps-result-card .result-title {
      font-size: clamp(1.9rem, 4.2vw, 3.2rem);
      text-shadow: 2px 0 rgba(35, 246, 210, 0.35), -2px 0 rgba(104, 255, 109, 0.4);
    }

    .result-grid .result-item strong {
      font-size: 1.25rem;
    }

    .ps-result-card .result-grid .result-item strong {
      font-size: 1.18rem;
    }

    .share-btn-alt {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.35)), var(--green-deep);
      color: #e8ffea;
      border: 1px solid rgba(104, 255, 109, 0.35);
    }

/* ============================================================================ */
/* === MOBILE OPTIMIZATIONS (Mai 2026) ======================================== */
/* Breakpoints:                                                                 */
/*   ≤ 720px : Phone Landscape / Small Tablet                                   */
/*   ≤ 480px : Phone Portrait                                                   */
/* Spaeter im File als die alten 1180/720er Bloecke -> gewinnt automatisch      */
/* bei gleicher Spezifitaet. Kein !important noetig.                            */
/* ============================================================================ */

/* --- Touch-Foundation (auch fuer Stylus auf grossen Screens harmlos) ------- */
@media (hover: none), (max-width: 720px) {
  .action-btn,
  .start-btn,
  .restart-btn,
  .share-btn,
  .intro-secondary-btn,
  .mode-btn,
  .mute-btn,
  .result-action-btn,
  .leaderboard-clear-btn,
  .save-score-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(104, 255, 109, 0.22);
  }
  .action-btn:hover,
  .start-btn:hover,
  .restart-btn:hover,
  .share-btn:hover,
  .intro-secondary-btn:hover,
  .mode-btn:hover {
    transform: none;
    filter: none;
  }
}

/* --- Phone Landscape / Small Tablet (≤ 720px) ------------------------------ */
@media (max-width: 720px) {
  .game-shell {
    padding: 10px;
    gap: 10px;
  }

  /* === Topbar: vertikal gestapelt, kompakt === */
  .topbar {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .brand-card {
    padding: 8px 10px;
    gap: 10px;
  }
  .brand-title {
    font-size: 1.1rem;
  }
  .brand-subtitle {
    font-size: 0.72rem;
  }
  .logo-mark {
    width: 36px;
    height: 36px;
  }
  .stats-card {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px 10px;
  }
  .stat {
    padding: 4px 0;
  }
  .stat-label {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }
  .stat-value {
    font-size: 1.05rem;
  }
  .status-card {
    padding: 8px 12px;
    gap: 8px;
  }
  .bar-label {
    font-size: 0.66rem;
  }

  /* === Main-Grid: vertikal, kein riesiges min-height === */
  .main-grid {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* === Left-Stack: webcam + alert-feed kompakt === */
  .left-stack {
    grid-template-rows: auto auto;
    gap: 8px;
  }
  .webcam {
    min-height: 0;
    height: 200px;
    overflow: hidden;
  }
  .webcam-monitor {
    transform: scale(0.7);
    transform-origin: top left;
  }
  .webcam-leaderboard {
    padding: 8px;
    font-size: 0.72rem;
  }
  .webcam-name {
    font-size: 0.78rem;
    padding: 6px 10px;
  }
  .alert-feed {
    height: 130px;
    min-height: 130px;
    max-height: 130px;
    padding: 8px 12px;
  }
  .alert-title {
    font-size: 0.7rem;
  }

  /* === Stream-Stage: kleiner, kompaktes Game-Screen === */
  .stream-stage {
    min-height: 360px;
  }
  .game-screen {
    padding: 14px 12px;
  }
  .hero-kicker {
    font-size: 0.74rem;
  }
  .hero-title {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }
  .hero-copy {
    font-size: 0.85rem;
  }
  .intro-actions {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .intro-actions > .start-btn,
  .intro-actions > .intro-secondary-btn {
    width: 100%;
    min-height: 48px;
  }

  /* === Chat-Panel: stacked, kompakte Hoehe === */
  .chat-panel {
    min-height: 220px;
    max-height: 32vh;
    padding: 12px;
  }
  .chat-feed {
    font-size: 0.78rem;
  }
  .chat-title {
    font-size: 0.84rem;
  }
  .viewer-pill {
    font-size: 0.66rem;
    padding: 3px 8px;
  }

  /* === Bottom-Grid stacked, kompakt === */
  .bottom-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .obs-panel {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .obs-box {
    padding: 8px 12px;
  }
  .obs-label {
    font-size: 0.7rem;
  }
  .scene-list {
    font-size: 0.74rem;
    gap: 4px;
  }
  .action-panel {
    padding: 12px;
  }
  .actions-title {
    font-size: 0.72rem;
  }

  /* === Action-Buttons: 3-Spalten Grid (3+3+1, letzter spannt volle Breite) === */
  .action-buttons {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    perspective: none;
  }
  .action-btn {
    min-height: 64px;
    padding: 8px 6px;
    font-size: 0.86rem;
    flex-direction: column;
    justify-content: center;
  }
  .action-btn::before {
    width: 22px;
    height: 22px;
    font-size: 0.78rem;
    margin-bottom: 2px;
  }
  /* (Frueher: OBS-Button-Span 1/-1 -> eigene Reihe. Entfernt: 7 Buttons im
     4-Spalten-Grid ergeben 4+3 in 2 Reihen, was eine Zeile spart.) */
  /* Touch-Active-State: visuelles Feedback bei Tap */
  .action-btn:not(:disabled):active {
    transform: translateY(2px) scale(0.97);
    background: rgba(104, 255, 109, 0.16);
    border-color: rgba(104, 255, 109, 0.95);
  }
  /* Tastatur-Hints raus auf Mobile (1-7 sind nutzlos) */
  .action-btn small {
    display: none;
  }
  .actions-title > span:last-child {
    display: none;
  }

  /* === Tutorial-Coach: kompakter, gut lesbar === */
  .tutorial-coach {
    margin: 0 0 10px;
    padding: 12px 14px;
    font-size: 0.86rem;
  }
  .tutorial-coach-step {
    font-size: 0.7rem;
  }
  .tutorial-coach-body {
    font-size: 0.92rem;
  }
  .tutorial-coach-tip {
    font-size: 0.78rem;
  }

  /* === Result-Overlay: kompakt fürs Smartphone (Höhe, Scroll, Typo) === */
  .overlay {
    padding: max(6px, env(safe-area-inset-top, 0px)) 8px max(10px, env(safe-area-inset-bottom, 0px));
    place-items: start center;
    align-content: start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .overlay.ps-result-open {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .result-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .result-rank-column {
    position: static;
    padding: 8px 10px 10px;
    max-height: min(30vh, 220px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .result-rank-ladder-title {
    margin: 0 0 6px;
    font-size: 0.58rem;
  }
  .result-rank-ladder {
    gap: 4px;
    padding-left: 14px;
  }
  .result-rank-ladder-item {
    padding: 5px 6px 5px 8px;
    font-size: 0.62rem;
    line-height: 1.2;
  }
  .result-rank-ladder-item::before {
    left: -12px;
    top: 6px;
    font-size: 0.52rem;
  }
  .ps-result-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 10px;
    border-radius: 10px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 0 1px rgba(0, 0, 0, 0.45),
      0 12px 40px rgba(0, 0, 0, 0.55);
  }
  .result-screen-top {
    margin-bottom: 4px;
  }
  .result-screen-pills {
    gap: 6px;
    margin-bottom: 8px;
  }
  .result-pill {
    padding: 4px 9px;
    font-size: 0.58rem;
  }
  .ps-result-card .result-brand {
    margin: 0 0 4px;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
  }
  .ps-result-card .result-title {
    font-size: clamp(1.35rem, 7.5vw, 1.85rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
  }
  .ps-result-card .result-sub {
    margin: 6px auto 0;
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .result-stats-panel {
    margin: 10px 0 10px;
    padding: 8px;
  }
  .ps-result-card .result-grid {
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ps-result-card .result-item {
    min-width: 0;
    padding: 8px 10px;
    border-radius: 5px;
  }
  .ps-result-card .result-item span {
    font-size: 0.58rem;
    margin-bottom: 2px;
  }
  .ps-result-card .result-item strong,
  .ps-result-card .result-grid .result-item strong {
    font-size: 0.92rem;
  }
  .ps-result-card .result-rank {
    margin: 8px 0 10px;
    padding: 8px 10px;
    font-size: 0.74rem;
  }
  .result-submit-panel {
    margin-bottom: 10px;
  }
  .result-leaderboard.leaderboard-panel {
    max-height: min(34vh, 260px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
  }
  .result-leaderboard .leaderboard-title {
    font-size: 0.64rem;
    margin-bottom: 4px;
  }
  .result-leaderboard .leaderboard-row {
    min-height: 24px;
    padding: 4px 6px;
    font-size: 0.72rem;
    grid-template-columns: 28px 1fr auto;
    gap: 5px;
  }
  /* Ergebnis-Footer: 1 Zeile primär (volle Breite), 2. Zeile Share | Menü */
  .ps-result-card .result-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-direction: unset;
    gap: 6px;
  }
  .ps-result-card .result-actions .result-action-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    font-size: 0.62rem;
    line-height: 1.2;
    overflow-wrap: break-word;
    text-align: center;
  }
  .ps-result-card .result-actions .result-action-btn--primary {
    grid-column: 1 / -1;
    min-height: 46px;
    font-size: 0.66rem;
    letter-spacing: 0.07em;
  }
  .result-action-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.66rem;
  }
  .score-submit {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .score-input,
  .save-score-btn {
    min-height: 44px;
  }
}

/* --- Phone Portrait (≤ 480px): noch kompakter ------------------------------ */
@media (max-width: 480px) {
  .game-shell {
    padding: 8px;
    gap: 8px;
  }
  .topbar {
    gap: 6px;
  }

  /* === Brand: minimaler === */
  .brand-card {
    grid-template-columns: 32px 1fr;
    padding: 7px 10px;
  }
  .logo-mark {
    width: 32px;
    height: 32px;
  }
  .brand-title {
    font-size: 1rem;
  }
  .brand-subtitle {
    font-size: 0.66rem;
  }

  /* === Stats: 2x2 statt 4x1 === */
  .stats-card {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    padding: 6px 8px;
  }
  .stat-label {
    font-size: 0.58rem;
  }
  .stat-value {
    font-size: 1rem;
  }

  /* === Webcam: noch kleiner === */
  .webcam {
    height: 160px;
  }

  /* === Stream-Stage: Hauptfokus === */
  .stream-stage {
    min-height: 320px;
  }
  .game-screen {
    padding: 12px 10px;
  }
  .intro-logo {
    max-width: 78%;
  }
  .hero-kicker {
    font-size: 0.66rem;
  }
  .hero-title {
    font-size: clamp(1.4rem, 8vw, 2rem);
  }
  .hero-copy {
    font-size: 0.78rem;
  }

  /* === Chat-Panel: noch kompakter === */
  .chat-panel {
    min-height: 180px;
    max-height: 26vh;
    padding: 10px;
  }
  .chat-feed {
    font-size: 0.74rem;
  }

  /* === Action-Buttons bleiben 3-Spalten, etwas kleiner === */
  .action-buttons {
    gap: 6px;
  }
  .action-btn {
    min-height: 60px;
    padding: 6px 4px;
    font-size: 0.78rem;
  }
  .action-btn::before {
    width: 20px;
    height: 20px;
    font-size: 0.74rem;
  }

  /* === Result-Overlay: Portrait — noch dichter, Rang-Pills kleiner === */
  .result-rank-column {
    max-height: min(24vh, 168px);
    padding: 6px 8px;
  }
  .result-rank-ladder {
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 0;
    gap: 3px;
  }
  .result-rank-ladder-item {
    flex: 1 0 calc(50% - 2px);
    text-align: center;
    padding: 4px 6px;
    font-size: 0.58rem;
  }
  .result-rank-ladder-item::before {
    position: static;
    display: inline-block;
    margin-right: 3px;
    left: auto;
    top: auto;
    vertical-align: baseline;
    font-size: 0.52rem;
  }
  .result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ps-result-card {
    padding: 10px 8px;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 14px);
    border-radius: 8px;
  }
  .ps-result-card .result-title {
    font-size: clamp(1.15rem, 6.2vw, 1.45rem);
  }
  .result-leaderboard.leaderboard-panel {
    max-height: min(26vh, 200px);
  }

  .ps-result-card .result-actions {
    gap: 5px;
  }
  .ps-result-card .result-actions .result-action-btn {
    min-height: 40px;
    padding: 7px 6px;
    font-size: 0.58rem;
  }
  .ps-result-card .result-actions .result-action-btn--primary {
    min-height: 44px;
    font-size: 0.64rem;
  }

  /* === Bottom-Grid: noch kompakter === */
  .obs-box {
    padding: 6px 10px;
  }
  .scene-list {
    grid-template-columns: 1fr;
    gap: 4px;
    font-size: 0.7rem;
  }
}

/* ============================================================================
   Monitor-Rig-Iframe — gemessene Hoehe GILT fuer jede Innenbreite
   
   Ursache fuer „wie vor 10 Anfragen“: die Regeln mit --ps-rig-frame-h hingen
   NUR unter @media (max-width: 720px). Die Game-Pane ist typisch 768px–900px+
   breit → Css-Variabel wurde gesetzt, aber nie auf html/.game-shell angewandt,
   waehrend @media (max-width: 1180px) weiter min-height: 100vh und 800px-Grid
   erzwingt (Zeilen ~1824ff) → untere Aktionsreihe wirkt abgeschnitten.

   Dieser Block ist absichtlich OHNE max-width — nur aktiv mit Klasse
   .ps-rig-frame-metrics (setzt monitor-rig per postMessage).
   ============================================================================ */
html.ps-rig-frame-metrics {
  height: var(--ps-rig-frame-h, 100%) !important;
  max-height: var(--ps-rig-frame-h, 100%) !important;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
html.ps-rig-frame-metrics *,
html.ps-rig-frame-metrics *::before,
html.ps-rig-frame-metrics *::after {
  box-sizing: border-box;
}
html.ps-rig-frame-metrics body {
  margin: 0;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
}
/* Schlägt kritisches Inline (.game-shell { height: 100vh }) und 1180px-Tablet-Mindesthoehen */
html.ps-rig-frame-metrics .game-shell {
  flex: 1 1 0;
  min-height: 0 !important;
  max-height: 100% !important;
  height: auto !important;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html.ps-rig-frame-metrics .topbar {
  flex: 0 0 auto;
}
html.ps-rig-frame-metrics .main-grid {
  min-height: 0 !important;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
html.ps-rig-frame-metrics .stream-stage,
html.ps-rig-frame-metrics .chat-panel,
html.ps-rig-frame-metrics .left-stack {
  min-height: 0 !important;
}
html.ps-rig-frame-metrics .bottom-grid {
  flex-shrink: 0;
}

/* ============================================================================ */
/* === MOBILE FULLSCREEN-NO-SCROLL OVERRIDE (Mai 2026) ======================== */
/* Smartphone-User muessen waehrend einer Reaktions-Runde sehen koennen ohne     */
/* zu scrollen: Stats oben, Event-Card mittig, Action-Buttons immer am Rand     */
/* unten. Atmosphaeren-UI (Webcam, Chat, Audio-Mixer-Bars, Szenen, System) wird */
/* bewusst ausgeblendet — auf Phone Platz fuer Spielgeschehen wichtiger.         */
/* Ueberschreibt absichtlich die "stacked"-Settings der vorherigen Bloecke.     */
/*                                                                              */
/* Vorher nur (pointer: coarse): Chrome DevTools / Maus-Zoom triggert das nicht, */
/* dann fehlen Flex/minmax-Fixes → mittlere Stage frisst die Hoehe, Aktions-     */
/* reihe im iframe unten abgeschnitten. Ab jetzt: alles schmale Viewports ≤720. */
/* Schmales Desktop-Fenster: bewusst gleiche enge UI wie Phone (Lesbarkeit).    */
/* ============================================================================ */
@media (max-width: 720px) {
  /* Iframe-Hoehe + Shell-Layout: globaler html.ps-rig-frame-metrics-Block oben
     (gilt fuer alle Breiten); hier nur noch die schmale-Viewport-UI. */

  /* === Viewport: Prozent-Kette fuellt den iframe exakt ein. Nur dvh/100vw
     nutzen war im Monitor-2 (Hugo iframe) unzuverlaessig — Shell konnte hoeher
     rechnen als die iframe-Box → unterer Rand (Aktionen) abgeschnitten.
     Body = flex column, main.game-shell flex:1 min-height:0 = klassisches Pattern.
     Zusaetzlich max-height:100% auf html/body: Chrome/Edge Mobile (und DevTools)
     vermeiden, dass das Dokument ueber die Iframe-Hinaus waechst. */
  html {
    height: 100%;
    max-height: 100%;
    /* Kleinstes Viewport (Toolbar sichtbar): Prozent-Höhen-Kette nicht höher als sichtbare Fläche */
    min-height: 100vh;
    min-height: 100svh;
  }
  html,
  body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    min-height: 100vh;
    min-height: 100svh;
    /* iOS: nutzt die vom System gemeldete „fill“-Höhe statt des großen 100vh-Layouts */
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
  }

  .game-shell {
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    /* Safe Area + Puffer: Safaris schwebende untere Leiste (nicht nur Home-Indikator) */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(14px, 5vmin, 36px));
    overflow: hidden;
    box-sizing: border-box;
  }
  .game-shell *,
  .game-shell *::before,
  .game-shell *::after {
    box-sizing: border-box;
  }

  /* === TOP: Topbar bleibt kompakt, fixe Hoehe === */
  .topbar {
    flex: 0 0 auto;
    grid-template-rows: auto;
    gap: 4px;
  }

  /* === Brand-Card komplett ausblenden auf Phone ===
     Spart ~56px. Das Hero-Title "CHAT CHAOS" im Intro ist gross genug;
     waehrend Gameplay schafft Branding nur Ablenkung von der Reaktion. */
  .topbar > .brand-card,
  .game-shell .brand-card {
    display: none;
  }

  /* === Stats: alle 4 nebeneinander (4x1) statt 2x2 ===
     padding-right: 50px reserviert Platz fuer den Mute-Button (40px + 10px luft). */
  .stats-card {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 5px 56px 5px 8px;
  }
  .stat {
    padding: 3px 6px;
    min-width: 0;
    overflow: hidden;
  }
  .stat-label {
    font-size: 0.55rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .stat-value {
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* === Stimmung + Chaos-Bar (.status-card): einzeilig nebeneinander ===
     Spart ~25px. Die Bars selbst werden duenner/kompakter.
     HTML: .status-card > div > (.bar-label, .meter > .meter-fill) x2 */
  .topbar > .status-card,
  .status-card {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto;
    gap: 6px;
    padding: 3px 6px !important;
  }
  .status-card > div {
    margin: 0;
    min-width: 0;
  }
  .status-card .bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.55rem !important;
    line-height: 1.1;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .status-card .bar-label strong {
    font-size: 0.6rem !important;
    margin-left: 4px;
  }
  .status-card .meter {
    height: 5px !important;
    margin-top: 2px;
  }

  /* === MIDDLE: Main-Grid wird zu single-pane mit Stream-Stage als grow-child
     minmax(0,1fr): Zeile darf unter Inhalt des event-card schrumpfen — sonst
     wächst die Grid-Zeile mit dem Content und schiebt bottom-grid aus 100dvh. */
  .main-grid {
    flex: 1 1 0;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    /* Untere Aktionsleiste liegt als Geschwister dahinter; gleiches z-index (5)
       wie .bottom-grid liess je nach Paint-Order die Stage optisch „über“ den Buttons enden. */
    z-index: 1;
    position: relative;
  }
  /* Atmosphaeren-UI raus auf Phone — kein Spielgeschehen, nur Eye-Candy */
  .main-grid > .left-stack,
  .main-grid > .chat-panel {
    display: none;
  }
  .main-grid > .stream-stage {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    align-items: stretch;
  }
  .stream-stage {
    min-height: 0;
  }
  .game-screen {
    /* Desktop: absolute + inset — ohne Zurücksetzen wirkt inset auch bei
       position:relative und verschiebt die Box (asymmetrisch zum Stage-Rahmen).
       !important: ältere @media (max-width:720px)-Blöcke könnten inset/teile
       davon sonst spaeter nicht ueberschreiben. */
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 1 1 0;
    height: auto;
    max-height: 100%;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
    overflow-y: hidden;
    overscroll-behavior: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .game-screen::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .stream-stage {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .stream-stage::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* === BOTTOM: Action-Buttons — Flex statt 1-spaltigem Grid: vermeidet in
     Chrome/Edge Layout-Zellen durch display:contents + position:fixed (Mute),
     die die zweite Button-Reihe nach unten aus dem sichtbaren Bereich schieben. */
  .bottom-grid {
    position: relative !important;
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    overflow: visible;
    z-index: 20;
    isolation: isolate;
  }

  /* === Audio-Mixer auf Phone: nur der Master-Mute-Button bleibt sichtbar ===
     Strategie:
       1. Der gesamte obs-panel-Container wird auf display:contents gesetzt
          -> verschwindet aus dem Layout, seine Children werden direkte
          Children des bottom-grid (das per Mobile-CSS overflow:visible hat).
       2. Alle anderen obs-boxes werden hidden.
       3. Der mute-btn SELBST wird position:fixed an top-right gepinnt
          (nicht absolute, weil position:fixed ignoriert alle Container-
          Hierarchie und Padding/Margin von Eltern). */
  .game-shell .obs-panel,
  .game-shell .bottom-grid .obs-panel {
    display: contents !important;
  }
  .obs-box:not(.obs-box-mixer) {
    display: none !important;
  }
  /* obs-box-mixer auf 0 schrumpfen — der mute-btn fliegt eh als
     position:fixed raus aus dem Layout-Flow. */
  .obs-box-mixer {
    display: contents !important;
  }
  .obs-box-mixer > .obs-label,
  .obs-box-mixer .audio-bars,
  .obs-box-mixer .obs-mixer-rail,
  .obs-box-mixer .mute-btn__kicker,
  .obs-box-mixer .mute-btn__label {
    display: none !important;
  }
  .obs-box-mixer .obs-mixer-row,
  .obs-box-mixer .obs-mixer-master {
    display: contents !important;
  }
  /* Der Mute-Button selbst — position:fixed pinnt ihn unabhaengig von
     allen Eltern-Containern an die obere rechte Ecke des Viewports. */
  .obs-box-mixer .mute-btn,
  button.mute-btn--master {
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1000 !important;
    min-height: 40px !important;
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(104, 255, 109, 0.45) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }
  .obs-box-mixer .mute-btn__led {
    margin: 0 auto !important;
  }

  /* === Brand-Card: padding-right damit Title nicht unter Mute-Button rutscht */
  .brand-card {
    padding-right: 60px;
  }

  /* Action-Panel: vormals overflow:hidden — schneidet bei knapper Gesamthoehe
     die 2. Button-Reihe ab (nur 4/7 sichtbar). Kein Clipping; Hoehe kommt aus Content. */
  .action-panel {
    padding: 2px;
    min-width: 0;
    flex-shrink: 0;
    width: 100%;
    overflow: visible;
    flex: 0 0 auto;
  }
  .actions-title {
    display: none;
  }
  /* Zwei Reihen: kompakte Zeilenhoehe; 40px statt 42 spart ~6px Gesamthoehe. */
  .action-buttons {
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 40px 40px !important;
    gap: 3px;
  }
  .action-btn {
    min-width: 0;
    min-height: 40px;
    height: 40px;
    max-height: 40px;
    padding: 2px 2px;
    font-size: 0.52rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .action-btn-icon {
    transform: scale(0.7);
    margin: 0;
    flex-shrink: 0;
  }
  .action-btn small {
    display: none;
  }
  /* Mobile: Aktionsleiste — hoher Kontrast (Lesbarkeit bei Sonne / schnellem Scan) */
  .bottom-grid .action-panel {
    border-color: rgba(104, 255, 109, 0.72) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 0 32px rgba(45, 255, 80, 0.35),
      0 10px 28px rgba(0, 0, 0, 0.45) !important;
    background:
      linear-gradient(180deg, rgba(18, 48, 28, 0.98), rgba(6, 18, 10, 0.96)),
      radial-gradient(ellipse 120% 80% at 50% 0%, rgba(104, 255, 109, 0.2), transparent 55%) !important;
  }
  .action-buttons {
    padding: 4px;
    border-radius: 8px;
    background: rgba(8, 18, 12, 0.94);
    border: 1px solid rgba(104, 255, 109, 0.55);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 22px rgba(104, 255, 109, 0.12);
    gap: 4px;
  }
  .action-btn {
    border: 1px solid rgba(104, 255, 109, 0.78);
    border-radius: 5px;
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-shadow:
      0 0 14px rgba(104, 255, 109, 0.55),
      0 1px 3px rgba(0, 0, 0, 0.95);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(14, 34, 22, 0.9) 48%, rgba(5, 14, 9, 0.96)),
      radial-gradient(circle at 50% 0%, rgba(104, 255, 109, 0.4), transparent 62%),
      #0e1a12;
    /* kein filter — data-action setzt box-shadow (farbiger Streifen unten) */
  }
  .action-btn::before {
    width: 17px !important;
    height: 17px !important;
    font-size: 0.82rem !important;
    margin-bottom: 1px !important;
    border-radius: 4px !important;
    text-shadow:
      0 0 12px rgba(104, 255, 109, 0.9),
      0 0 2px rgba(0, 0, 0, 0.8) !important;
    box-shadow:
      0 0 14px rgba(104, 255, 109, 0.65),
      inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  }
  .action-btn:not(:disabled):active {
    border-color: rgba(168, 255, 172, 0.95);
    outline: 2px solid rgba(104, 255, 109, 0.42);
    outline-offset: -2px;
    transform: scale(0.98);
  }
  .action-btn:disabled {
    opacity: 0.6;
    border-color: rgba(104, 255, 109, 0.42);
    color: rgba(255, 255, 255, 0.78);
  }
  /* Farbakzente unten pro Aktion — auf Mobile kraeftiger (Zuordnung Icon/Text) */
  .action-btn[data-action="ban"] { box-shadow: inset 0 -3px 0 rgba(255, 73, 110, 0.88); }
  .action-btn[data-action="timeout"] { box-shadow: inset 0 -3px 0 rgba(255, 156, 60, 0.88); }
  .action-btn[data-action="reply"] { box-shadow: inset 0 -3px 0 rgba(50, 230, 255, 0.88); }
  .action-btn[data-action="thank"] { box-shadow: inset 0 -3px 0 rgba(100, 255, 170, 0.88); }
  .action-btn[data-action="ignore"] { box-shadow: inset 0 -3px 0 rgba(190, 198, 230, 0.72); }
  .action-btn[data-action="mod"] { box-shadow: inset 0 -3px 0 rgba(170, 120, 255, 0.88); }
  .action-btn[data-action="obs"] { box-shadow: inset 0 -3px 0 rgba(255, 232, 110, 0.88); }
  /* Note: Frueher hatte OBS einen grid-column: 1/-1 Span (eigene 3. Reihe).
     Jetzt: 7 Buttons im 4-Spalten-Grid -> 4 + 3 (mit 1 leerem Slot rechts unten),
     nur 2 Reihen total -> spart eine ganze Zeile (~60px). */

  /* Game-Screen: vertikal im Stage-Container zentrieren (Intro + Event).
     safe center: bei Overflow wirds Start-Ausrichtung — kein Abschneiden. */
  .game-screen {
    padding: 3px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    align-items: stretch;
    align-content: center;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .game-screen > * {
    min-width: 0;
    max-width: 100%;
  }
  /* Event-Card: Mobile ohne Zwischen-Scroll; langer Text wird geklippt.
     margin-block:auto zentriert die Event-Spalte vertikal im .game-screen. */
  .now-event,
  .event-card {
    margin-inline: auto;
    width: 100%;
    max-width: 100%;
  }
  /* flex: 0 1 auto — Block hat Inhaltshoehe; Auto-Margins teilen Resthoehe. */
  .now-event {
    margin-block: auto;
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(100%, 72vh);
    overflow-y: hidden;
    overflow-x: hidden;
    align-items: stretch;
  }
  .event-card {
    padding: 12px 14px !important;
  }
  .event-card .event-text,
  .event-card .event-message,
  .event-card p,
  .event-text {
    font-size: clamp(0.95rem, 4.5vw, 1.45rem) !important;
    line-height: 1.25 !important;
    margin: 6px 0 !important;
  }
  .event-card .event-tags,
  .event-tags {
    gap: 4px !important;
    margin-bottom: 6px;
  }
  .event-card .event-tag,
  .event-tag {
    padding: 3px 8px !important;
    font-size: 0.62rem !important;
  }
  .event-card .event-persona,
  .event-persona {
    font-size: 0.72rem !important;
    margin: 4px 0 !important;
  }
  .event-card .event-mood,
  .event-mood,
  .event-card .event-bar {
    height: 5px !important;
    margin-top: 6px !important;
  }
  /* Webcam-Hintergrund im Game-Screen ganz aus dem Flow nehmen
     -> verhindert die 18px Overflow im Game-Screen, die das scale(0.7)
     allein nicht behoben hat (transform skaliert nur visuell, nicht den
     Layout-Slot). */
  .game-screen .webcam,
  .stream-stage .webcam {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.18;
    transform: scale(0.85);
    transform-origin: center center;
  }
  .stream-stage {
    position: relative;
  }
  /* Event-Card und andere Game-Inhalte ueber den Webcam-Layer.
     .feedback / .combo-pop nicht: die sind absolute Overlays (eigenes z-index). */
  .game-screen > *:not(.feedback):not(.combo-pop),
  .stream-stage > * {
    position: relative;
    z-index: 1;
  }
  /* Schmale Viewports: Tutorial-Feedback fix am Viewport (grün + rot). */
  .game-screen .feedback.bad.show,
  .game-screen .feedback.good.show {
    position: fixed;
    left: 50%;
    right: auto;
    top: max(40px, env(safe-area-inset-top, 0px) + 8px);
    bottom: auto;
    width: min(560px, calc(100vw - 20px));
    max-height: min(38vh, 220px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10000;
    box-sizing: border-box;
  }
  /* === HERO (Intro): groesseres Logo + Titel wie Abschlusskarte; Copy weiterhin clampa ===
     Wichtig: alles wraps + max-width sicherstellen, sonst wird Text
     rechts abgeschnitten (passiert vor allem bei der hero-copy).
     introContent + alle Children mit !important auf 100% Width
     einsperren — sonst rutscht es 25px nach rechts (Side-Effect der
     game-screen flex/stretch Regel + ererbtes max-width). */
  #introContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 6px 4px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: min(78dvh, 720px) !important;
    text-align: center;
    flex: 0 1 auto !important;
    min-height: 0 !important;
  }
  .leaderboard-panel.leaderboard-panel--intro-mobile {
    display: block !important;
    margin: 8px auto 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    max-height: min(32vh, 220px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #introContent > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #introContent .intro-logo {
    max-width: min(96%, 420px);
    width: auto;
    height: auto;
    max-height: none;
    margin: 0 auto 8px;
    object-fit: contain;
  }
  #introContent .hero-kicker {
    margin: 0 0 5px;
    font-size: clamp(0.6rem, 3vw, 0.74rem);
    letter-spacing: 0.12em;
  }
  #introContent .hero-title {
    margin: 6px auto 8px;
    font-size: clamp(1.55rem, 9.5vw, 2.45rem);
    line-height: 0.92;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    text-shadow:
      2px 0 rgba(35, 246, 210, 0.35),
      -2px 0 rgba(104, 255, 109, 0.4),
      0 14px 32px rgba(0, 0, 0, 0.78);
  }
  body.glitch #introContent .hero-title {
    text-shadow:
      2px 0 rgba(35, 246, 210, 0.35),
      -2px 0 rgba(104, 255, 109, 0.4),
      0 14px 32px rgba(0, 0, 0, 0.78);
  }
  #introContent .hero-copy {
    margin: 1px 0 3px;
    font-size: 0.65rem;
    line-height: 1.25;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 0 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  /* === Intro-Buttons kompakt fuer Mobile (Spezifitaet: #introContent) === */
  #introContent .intro-actions {
    margin: 2px 0 4px;
    gap: 4px;
    flex-direction: column;
  }
  #introContent .start-btn,
  #introContent .intro-main-btn {
    min-height: 44px;
    height: 44px;
    max-height: 44px;
    padding: 6px 12px;
    font-size: 0.88rem;
    width: 100%;
    flex: 0 0 auto;
  }
  #introContent .intro-secondary-btn {
    min-height: 36px;
    height: 36px;
    max-height: 36px;
    padding: 5px 10px;
    font-size: 0.72rem;
    width: 100%;
    flex: 0 0 auto;
  }
  /* === Mode-Select: 3 Spalten nebeneinander (LIVE | CHILL | CHAOS) ===
     width: 100% + box-sizing fix verhindern Overflow ueber introContent
     hinaus (war Grund warum CHAOS rechts abgeschnitten wurde). */
  #introContent .mode-select {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin: 2px 0 2px !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #introContent .mode-btn {
    min-height: 40px !important;
    max-height: 44px !important;
    padding: 3px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #introContent .mode-btn strong {
    font-size: 0.7rem !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap;
  }
  #introContent .mode-btn span {
    font-size: 0.55rem !important;
    line-height: 1.1 !important;
    opacity: 0.85;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #introContent .preload-status {
    margin: 4px 0 0 !important;
    font-size: 0.6rem !important;
    text-align: center;
  }

  /* === Live-Intro Overlay (3-2-1 Countdown): mobile-friendly === */
  .live-intro-card {
    padding: 18px 22px;
  }
  .live-intro-logo {
    max-width: 70%;
    max-height: 80px;
  }
}

/* === Phone Portrait (≤ 480px) — wie 720-Block ohne pointer-Filter === */
@media (max-width: 480px) {
  .game-shell {
    gap: 6px;
    padding: 6px;
  }
  .obs-box-mixer .mute-btn {
    min-width: 50px;
    padding: 4px 6px;
  }
  .intro-logo {
    max-height: 70px;
  }
  /* Stats bleiben 4 nebeneinander, aber noch kompakter */
  .stats-card {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 5px 6px;
  }
  .stat {
    padding: 3px 4px;
  }
  .stat-label {
    font-size: 0.5rem;
  }
  .stat-value {
    font-size: 0.85rem;
  }
}

/* === COMPACT MODE fuer enge Hoehen (Phone + Iframe „Monitor 2“)
   Schwelle 960px: z. B. iPhone XR (896) & Co — bei 800px griff der Block
   nicht, unten fehlten die 2. Button-Reihe (Ignorieren / Mod / OBS).
   Ebenfalls: schmale Desktop-Fenster mit wenig Hoehe. */
@media (max-height: 960px) and (max-width: 720px) {
  .game-shell {
    gap: 5px !important;
    padding: 5px !important;
  }
  /* Topbar: gap reduziert */
  .topbar {
    gap: 4px !important;
  }
  /* Stats-Card noch flacher */
  .stats-card {
    padding: 3px 50px 3px 6px !important;
    gap: 3px !important;
  }
  .stat {
    padding: 2px 4px !important;
  }
  .stat-label {
    font-size: 0.5rem !important;
  }
  .stat-value {
    font-size: 0.85rem !important;
  }
  /* Status-Card (Mood/Chaos) noch flacher */
  .status-card {
    padding: 3px 6px !important;
  }
  .status-card .bar-label {
    font-size: 0.5rem !important;
  }
  .status-card .meter {
    height: 4px !important;
  }
  /* Action-Buttons: 40px-Zeilen — genug Touch-Flaeche, passt oefter in Iframe */
  .action-buttons {
    grid-template-rows: 40px 40px !important;
    gap: 3px !important;
  }
  .action-btn {
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding: 2px 1px !important;
    font-size: 0.58rem !important;
  }
  .action-btn-icon {
    transform: scale(0.6) !important;
  }
  .action-panel {
    padding: 2px !important;
  }
  /* Mute-Btn etwas kleiner */
  .obs-box-mixer .mute-btn,
  button.mute-btn--master {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    top: 6px !important;
    right: 6px !important;
  }
  /* Intro: etwas Luft fuer Logo/Titel, bleibt unter den Mode-Cards */
  #introContent .intro-logo {
    max-width: min(94%, 380px) !important;
    width: auto !important;
    height: auto !important;
    max-height: 72px !important;
    margin: 0 auto 5px !important;
    object-fit: contain !important;
  }
  #introContent .hero-kicker {
    font-size: clamp(0.56rem, 2.8vw, 0.66rem) !important;
    margin: 0 0 3px !important;
  }
  #introContent .hero-title {
    font-size: clamp(1.28rem, 7vw, 1.95rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.05em !important;
    text-transform: uppercase !important;
    text-shadow:
      2px 0 rgba(35, 246, 210, 0.35),
      -2px 0 rgba(104, 255, 109, 0.4),
      0 12px 28px rgba(0, 0, 0, 0.78) !important;
    margin: 3px 0 !important;
  }
  body.glitch #introContent .hero-title {
    text-shadow:
      2px 0 rgba(35, 246, 210, 0.35),
      -2px 0 rgba(104, 255, 109, 0.4),
      0 12px 28px rgba(0, 0, 0, 0.78) !important;
  }
  #introContent .hero-copy {
    font-size: 0.62rem !important;
    margin: 1px 0 3px !important;
    line-height: 1.2 !important;
  }
  #introContent .intro-actions {
    gap: 4px !important;
    margin: 3px 0 4px !important;
  }
  #introContent .start-btn,
  #introContent .intro-main-btn {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
  }
  #introContent .intro-secondary-btn {
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
  }
  #introContent .mode-btn {
    min-height: 42px !important;
    max-height: 46px !important;
    padding: 3px 2px !important;
  }
  #introContent .mode-btn strong {
    font-size: 0.62rem !important;
  }
  #introContent .mode-btn span {
    font-size: 0.5rem !important;
  }
  #introContent .preload-status {
    font-size: 0.55rem !important;
    margin: 2px 0 0 !important;
  }
  /* Event-Card: kompakter Padding waehrend Gameplay */
  .event-card {
    padding: 8px 10px !important;
  }
  .event-card .event-text,
  .event-card .event-message,
  .event-card p,
  .event-text {
    font-size: clamp(0.85rem, 4vw, 1.2rem) !important;
    line-height: 1.25 !important;
  }
}

/* === EXTRA COMPACT fuer sehr enge Iframes (≤ 600px Hoehe) === */
@media (max-height: 600px) and (max-width: 720px) {
  .stats-card {
    padding: 2px 46px 2px 4px !important;
  }
  .stat {
    padding: 1px 3px !important;
  }
  .stat-value {
    font-size: 0.78rem !important;
  }
  .status-card .meter {
    height: 3px !important;
  }
  .action-buttons {
    grid-template-rows: 40px 40px !important;
    gap: 2px !important;
  }
  .action-btn {
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    font-size: 0.54rem !important;
  }
  .action-btn-icon {
    transform: scale(0.55) !important;
  }
  .obs-box-mixer .mute-btn,
  button.mute-btn--master {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
}