/* =============== TELA DE LOGIN =============== */
    #login-screen {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--vw-safe);
      height: var(--vh-safe);
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      z-index: 1000;
    }

    #login-screen.hidden {
      display: none;
    }

    .login-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 24px;
      padding: 40px;
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(244, 201, 74, 0.2);
      border-radius: 24px;
      backdrop-filter: blur(8px);
      max-width: 400px;
    }

    .login-logo {
      font-family: var(--serif);
      font-size: 3.5rem;
      font-weight: 700;
      color: var(--gold-light);
      line-height: 1;
    }

    .login-title {
      font-family: var(--serif);
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--cream);
    }

    .login-subtitle {
      font-size: 0.95rem;
      color: var(--cream-soft);
      line-height: 1.6;
    }

    #btn-google-login {
      width: 100%;
      padding: 12px 24px;
      border: none;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--gold), var(--gold-deep));
      color: var(--purple-deep2);
      font-weight: 700;
      font-size: 1rem;
      transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
      box-shadow: 0 6px 20px rgba(244, 201, 74, 0.3);
    }

    #btn-google-login:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(244, 201, 74, 0.4);
    }

    #btn-google-login:active {
      transform: scale(0.98);
    }

    #login-status {
      min-height: 20px;
      font-size: 0.85rem;
      color: var(--gold-light);
    }

    /* =============== OVERLAY DE INÍCIO (tela cheia + áudio) =============== */
    #start-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1200;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      background: radial-gradient(ellipse 120% 90% at 15% 0%, var(--purple-mid) 0%, var(--purple-deep) 55%, var(--purple-deep2) 100%);
    }

    #start-overlay.active {
      display: flex;
    }

    #start-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 32px;
      border: none;
      border-radius: 50px;
      background: linear-gradient(135deg, var(--gold), var(--gold-deep));
      color: var(--purple-deep2);
      font-weight: 700;
      font-size: 1.05rem;
      box-shadow: 0 10px 30px rgba(244, 201, 74, 0.35);
      transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }

    #start-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 36px rgba(244, 201, 74, 0.45);
    }

    #start-btn:active {
      transform: scale(0.97);
    }

    #start-btn svg {
      width: 22px;
      height: 22px;
    }

    #start-hint {
      font-size: 0.82rem;
      color: var(--cream-soft);
    }