/* ===== TheDoctorTTV UI – polished & responsive ===== */
    :root {
      --page-bg: #787878;
      /* your gray backdrop */
      --panel-1: #3a006d;
      /* main purple */
      --panel-2: #2b0f4a;
      /* deeper purple */
      --text: #f7f7f7;
      --muted: #cfcfe6;
      --border: #1c1c1c;

      --btn-bg: #dbdbdb;
      --btn-fg: #2a2a2a;
      --btn-hover-bg: #3a3a3a;
      --btn-hover-fg: #d4d4d4;

      --chip-bg: #ffffff11;

      --radius-lg: 22px;
      --radius-md: 16px;

      --shadow-1: 0 30px 60px -20px #000;
      --shadow-2: 0 0 0 1px #000 inset;
      --glow: inset 0 0 20px rgba(168, 107, 255, .35);
    }

    /* Page */
    html,
    body {
      height: 100%;
      margin: 0;
      font-family: Kodchasan, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(1200px 600px at 50% 0%, rgba(255, 255, 255, .06), transparent 55%),
        linear-gradient(#00000040, #00000040),
        var(--page-bg);
      overflow: hidden;
      /* you had this already – keeps the canvas full screen */
    }

    /* Canvas stays transparent over the gradient */
    canvas {
      display: block;
      background: transparent
    }

    /* Shared window styling (menu, settings, end screen) */
    .controls,
    .end-screen {
      position: absolute;
      inset: 50% auto auto 50%;
      transform: translate(-50%, -50%);
      width: min(92vw, 560px);
      padding: clamp(16px, 3.2vw, 26px);
      background: linear-gradient(180deg, var(--panel-1), var(--panel-2));
      color: var(--text);
      text-align: center;
      border: 2px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-1), var(--shadow-2), var(--glow);
      z-index: 10;
    }

    /* Header look */
    .controls h3,
    .end-screen h3 {
      margin: 0 0 .35rem;
      font-weight: 700;
      letter-spacing: .2px;
      font-size: clamp(18px, 3.4vw, 22px);
    }

    .controls .sub,
    .end-screen .sub {
      color: var(--muted);
      opacity: .95;
      font-weight: 600;
      margin: .25rem 0 1rem;
      font-size: clamp(12px, 1.8vw, 14px);
    }

    /* Avatar */
    .pfp {
      width: clamp(44px, 9vw, 60px);
      height: clamp(44px, 9vw, 60px);
      border-radius: 999px;
      border: 2px solid #ffffffcc;
      box-shadow: 0 6px 18px -8px #000, 0 0 0 2px #00000055;
      margin: .25rem auto .5rem;
      display: block;
    }

    /* Buttons */
    .button {
      appearance: none;
      border: 2px solid var(--border);
      background: var(--btn-bg);
      color: var(--btn-fg);
      font-weight: 800;
      padding: clamp(10px, 2.4vw, 12px) clamp(16px, 4vw, 18px);
      border-radius: 999px;
      margin: .35rem .35rem 0;
      cursor: pointer;
      box-shadow: 0 2px 0 #000, 0 10px 20px -12px #000;
      transition: transform .06s ease, filter .15s ease, background-color .15s ease, color .15s ease;
    }

    .button:hover {
      background: var(--btn-hover-bg);
      color: var(--btn-hover-fg)
    }

    .button:active {
      transform: translateY(1px)
    }

    .button:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }

    /* Inputs */
    .controls label {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      margin: .2rem .35rem;
      font-weight: 600;
    }

    .controls input {
      color: var(--btn-fg);
      background: var(--btn-bg);
      width: clamp(56px, 12vw, 80px);
      padding: .45rem .6rem;
      border-radius: 14px;
      border: 2px solid var(--border);
      transition: background-color .15s ease, color .15s ease, transform .06s ease;
    }

    .controls input:hover {
      background: var(--btn-hover-bg);
      color: var(--btn-hover-fg)
    }

    .controls input:focus {
      outline: 2px solid #ffffffcc;
      outline-offset: 2px
    }

    /* Make the Streamer.bot input wider without breaking small screens */
    .sb-action input {
      width: clamp(160px, 36vw, 240px)
    }

    /* Winner text */
    #winnerMessage {
      font-size: clamp(18px, 4.4vw, 26px);
      font-weight: 800;
      margin: 0 0 16px;
    }

    /* Hide these by default as before */
    #endScreen {
      display: none
    }

    #settings {
      display: none
    }

    /* Micro-chips (nice for small notes) */
    .controls p {
      color: var(--muted);
      background: var(--chip-bg);
      border: 1px solid #00000066;
      box-shadow: inset 0 0 10px #00000055;
      padding: .5rem .75rem;
      border-radius: 10px;
      display: inline-block;
    }

    /* Responsive tweaks */
    @media (max-width: 420px) {

      .controls,
      .end-screen {
        width: 94vw;
        border-radius: var(--radius-md);
        padding: 16px;
      }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }