/* ==========================================================================
   CSS Variables & Theming (Sorte na Mão Pattern)
   ========================================================================== */
   *,
   *::before,
   *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   html,
   body {
     height: 100%;
     overflow: hidden;
     font-family: 'Outfit', sans-serif;
     -webkit-tap-highlight-color: transparent;
     user-select: none;
   }
   
   /* ── THEMES ── */
   [data-theme="dark"] {
     --bg: #06060f;
     --surface: rgba(255, 255, 255, 0.06);
     --surface-hover: rgba(255, 255, 255, 0.10);
     --border: rgba(255, 255, 255, 0.08);
     --text: #f0eeff;
     --text2: rgba(240, 238, 255, 0.55);
     --accent1: #8b5cf6;
     --accent2: #06b6d4;
     --grad: linear-gradient(135deg, #8b5cf6, #06b6d4);
     --glow1: rgba(139, 92, 246, 0.4);
     --glow2: rgba(6, 182, 212, 0.4);
     --orb1: rgba(139, 92, 246, 0.15);
     --orb2: rgba(6, 182, 212, 0.12);
     --orb3: rgba(236, 72, 153, 0.10);
     --input-bg: rgba(255, 255, 255, 0.07);
     --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
     --btn-bg: linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
     --btn-shadow: 0 4px 25px rgba(139, 92, 246, 0.5);
     --modal-bg: rgba(10, 10, 20, 0.92);
     --modal-card: rgba(20, 20, 40, 0.95);
     
     /* App_Pontos specific mappings */
     --primary-color: var(--accent1);
     --danger-color: #ef4444;
   }
   
   [data-theme="light"] {
     --bg: #f5f3ff;
     --surface: rgba(255, 255, 255, 0.75);
     --surface-hover: rgba(255, 255, 255, 0.90);
     --border: rgba(139, 92, 246, 0.12);
     --text: #1e1b4b;
     --text2: rgba(30, 27, 75, 0.50);
     --accent1: #7c3aed;
     --accent2: #0891b2;
     --grad: linear-gradient(135deg, #7c3aed, #0891b2);
     --glow1: rgba(124, 58, 237, 0.2);
     --glow2: rgba(8, 145, 178, 0.2);
     --orb1: rgba(139, 92, 246, 0.12);
     --orb2: rgba(6, 182, 212, 0.10);
     --orb3: rgba(236, 72, 153, 0.08);
     --input-bg: rgba(255, 255, 255, 0.8);
     --shadow: 0 8px 32px rgba(139, 92, 246, 0.10);
     --btn-bg: linear-gradient(135deg, #7c3aed, #6d28d9, #5b21b6);
     --btn-shadow: 0 4px 25px rgba(124, 58, 237, 0.35);
     --modal-bg: rgba(245, 243, 255, 0.92);
     --modal-card: rgba(255, 255, 255, 0.95);
     
     --primary-color: var(--accent1);
     --danger-color: #ef4444;
   }
   
   /* ── APP LAYOUT ── */
   #app {
     position: relative;
     width: 100vw;
     height: 100dvh;
     background: var(--bg);
     overflow: hidden;
     transition: background .5s;
     color: var(--text);
     display: flex;
     justify-content: center;
   }
   
   main {
     width: 100%;
     max-width: 1000px; /* Constrain main content width, wider for desktop */
     height: 100%;
     position: relative;
   }
   
   .bg-orbs {
     position: absolute;
     inset: 0;
     pointer-events: none;
     z-index: 0;
     overflow: hidden;
   }
   
   .orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(80px);
     animation: float 20s ease-in-out infinite;
   }
   
   .orb-1 {
     width: 340px; height: 340px;
     background: var(--orb1);
     top: -10%; left: -5%;
   }
   
   .orb-2 {
     width: 280px; height: 280px;
     background: var(--orb2);
     bottom: -8%; right: -5%;
     animation-delay: -7s;
   }
   
   .orb-3 {
     width: 200px; height: 200px;
     background: var(--orb3);
     top: 40%; left: 60%;
     animation-delay: -14s;
   }
   
   @keyframes float {
     0%, 100% { transform: translate(0, 0); }
     33% { transform: translate(30px, -50px); }
     66% { transform: translate(-20px, 20px); }
   }
   
   /* ── TOP CONTROLS ── */
   .top-controls {
     position: fixed;
     top: 12px;
     left: 0;
     right: 0;
     padding: 0 12px;
     z-index: 200;
     display: flex;
     align-items: center;
     justify-content: space-between;
     pointer-events: none;
     opacity: 1;
     transition: opacity 0.5s ease;
   }
   .top-controls > * { pointer-events: auto; }
   .top-controls-right {
     display: flex;
     gap: 8px;
     margin-left: auto;
   }
   
   .top-controls.hide-during-splash {
     opacity: 0;
     pointer-events: none;
   }
   
   .icon-btn {
     width: 44px;
     height: 44px;
     border: 1px solid var(--border);
     border-radius: 14px;
     background: var(--surface);
     backdrop-filter: blur(16px);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     transition: transform .3s, background .3s, border-color .3s;
     color: var(--text);
   }
   
   .icon-btn:hover {
     transform: scale(1.1);
     background: var(--surface-hover);
     border-color: var(--accent1);
   }
   
   .hidden {
     display: none !important;
   }
   
   /* ── SCREENS ── */
   .screen {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     z-index: 1;
     opacity: 0;
     pointer-events: none;
     transition: opacity .45s, transform .45s;
     transform: scale(.97);
     padding: 20px;
   }
   
   .screen.view-active {
     opacity: 1;
     pointer-events: auto;
     transform: scale(1);
     z-index: 10;
   }
   
   .container {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
   }
   
   /* ── COMPONENTS ── */
   .glass-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 24px;
     backdrop-filter: blur(20px);
     box-shadow: var(--shadow);
   }
   
   .btn-primary, .modal-btn-confirm {
     padding: 14px 20px;
     border: none;
     border-radius: 14px;
     background: var(--btn-bg);
     color: #fff;
     font-family: inherit;
     font-size: 1.05rem;
     font-weight: 700;
     cursor: pointer;
     transition: transform .2s, box-shadow .2s;
     box-shadow: var(--btn-shadow);
     width: 100%;
     letter-spacing: 0.5px;
   }
   
   .btn-primary:hover, .modal-btn-confirm:hover {
     transform: scale(1.02);
     box-shadow: 0 6px 30px rgba(139, 92, 246, 0.6);
   }
   .btn-primary:active { transform: scale(0.98); }
   
   .btn-secondary {
     padding: 14px 20px;
     border: 1px solid var(--border);
     border-radius: 14px;
     background: var(--surface);
     color: var(--text);
     font-family: inherit;
     font-size: 1rem;
     font-weight: 700;
     cursor: pointer;
     transition: all .2s;
     width: 100%;
   }
   .btn-secondary:hover { background: var(--surface-hover); border-color: var(--accent1); transform: scale(1.02);}
   
   /* ── SPLASH SCREEN ── */
   #splash-screen {
     align-items: center;
     justify-content: center;
     background: transparent; /* Allow orbs to show behind */
     z-index: 300;
   }
   .splash-content { text-align: center; }
   
   .logo-pulse {
     width: 120px;
     height: 120px;
     border-radius: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 24px;
     background: var(--grad);
     color: white;
     animation: pulse-glow 3s infinite ease-in-out;
     box-shadow: var(--btn-shadow);
     transform: rotate(45deg);
   }
   
   .logo-pulse svg { transform: rotate(-45deg); }
   
   .logo-text {
     font-size: 2.4rem;
     font-weight: 900;
     letter-spacing: -1px;
     background: var(--grad);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   
   @keyframes pulse-glow {
     0% { transform: rotate(45deg) scale(0.95); box-shadow: 0 0 20px var(--glow1); }
     50% { transform: rotate(45deg) scale(1.05); box-shadow: 0 0 50px var(--accent1); }
     100% { transform: rotate(45deg) scale(0.95); box-shadow: 0 0 20px var(--glow1); }
   }
   
   /* ── HOME SCREEN ── */
   .home-header {
     margin-top: 60px;
     margin-bottom: 16px;
     text-align: center;
     flex-shrink: 0;
   }
   .home-header h1 {
     font-size: clamp(2.2rem, 7vw, 3.6rem);
     font-weight: 900;
     background: var(--grad);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   .home-header p { color: var(--text2); font-size: 1rem; font-weight: 300; margin-top: 4px; }
   
   .home-main {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     gap: 16px;
   }
   .cta-hero { width: 100%; }
   
   /* CTA HERO */
   .cta-hero {
     display: flex;
     justify-content: center;
     padding: 8px 0;
   }
   /* mode-card (identico ao Sorte na Mão) */
   .mode-card {
     position: relative;
     padding: clamp(20px, 4vh, 36px) clamp(14px, 2vw, 24px);
     border: 1px solid var(--border);
     border-radius: 24px;
     background: var(--surface);
     backdrop-filter: blur(20px);
     cursor: pointer;
     text-align: center;
     overflow: hidden;
     transition: transform .35s cubic-bezier(.17,.67,.35,1.3), border-color .3s, box-shadow .3s;
     font-family: inherit;
     color: var(--text);
   }
   .mode-card-glow {
     position: absolute;
     inset: 0;
     background: var(--grad);
     opacity: 0;
     transition: opacity .4s;
   }
   .mode-card:hover .mode-card-glow { opacity: .08; }
   .mode-card:hover {
     transform: translateY(-6px) scale(1.03);
     border-color: var(--accent1);
     box-shadow: 0 12px 40px var(--glow1);
   }
   .mode-card:active { transform: translateY(-2px) scale(.98); }
   .mode-card h2 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 700; margin-bottom: 4px; position: relative; z-index: 1; }
   .mode-card p { font-size: clamp(.7rem, 1.5vw, .82rem); color: var(--text2); line-height: 1.4; position: relative; z-index: 1; }
   .mode-icon { font-size: clamp(2rem, 5vw, 3.2rem); display: block; margin-bottom: 8px; position: relative; z-index: 1; }
   
   /* CTA card full width */
   .cta-card { width: 100%; max-width: 400px; }
   
   /* SECTION TITLE */
   .section-title {
     font-size: 0.95rem;
     font-weight: 700;
     color: var(--text2);
     text-transform: uppercase;
     letter-spacing: 1.5px;
     text-align: center;
     margin-bottom: 10px;
   }
   
   .setup-card {
     padding: clamp(20px, 4vh, 24px);
     flex-shrink: 0;
   }
   
   .input-group { margin-bottom: 14px; width: 100%; }
   .input-row { display: flex; gap: 12px; }
   .input-row .input-group { flex: 1; }
   
   label {
     display: block;
     font-size: 0.8rem;
     font-weight: 600;
     margin-bottom: 6px;
     color: var(--text2);
   }
   
   input[type="text"], input[type="number"] {
     width: 100%;
     padding: 14px 16px;
     border: 1px solid var(--border);
     border-radius: 12px;
     background: var(--input-bg);
     color: var(--text);
     font-family: inherit;
     font-size: 1rem;
     font-weight: 600;
     transition: border-color .3s;
     outline: none;
   }
   input:focus { border-color: var(--accent1); }
   
   .players-inputs {
     max-height: 40vh;
     overflow-y: auto;
     margin-bottom: 16px;
     padding-right: 5px;
   }
   ::-webkit-scrollbar { width: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
   
   .player-input-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
   .player-avatar-preview { width: 38px; height: 38px; border-radius: 12px; display: block; flex-shrink:0;}
   
   .history-section {
     flex-shrink: 0;
     max-height: 35vh;
     display: flex;
     flex-direction: column;
     overflow: hidden;
   }
   .history-section h2 { font-size: 1.1rem; color: var(--text2); margin-bottom: 10px; font-weight: 600; }
   .history-cards {
     flex: 1;
     overflow-y: auto;
     display: flex; flex-direction: column; gap: 12px;
   }
   .empty-history { text-align: center; color: var(--text2); font-size: 0.9rem; padding: 20px 0; }
   .history-card {
     background: var(--surface); border-radius: 16px; padding: 14px 16px;
     border: 1px solid var(--border);
     display: flex; justify-content: space-between; align-items: center;
     backdrop-filter: blur(10px);
   }
   .history-info { display: flex; flex-direction: column; }
   .history-title { font-weight: 700; font-size: 1.05rem; }
   .history-date { font-size: 0.8rem; color: var(--text2); }
   .history-winner { font-size: 0.9rem; color: var(--accent1); font-weight: 700; }
   
   .home-footer {
     display: none;
     text-align: center;
     padding: 12px 0 8px;
     flex-shrink: 0;
   }
   .footer-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; color: var(--text2); margin-bottom: 8px; }
   .store-badges { display: flex; justify-content: center; gap: 16px; margin-bottom: 10px; }
   .store-badge img { height: 38px; }
   .credits a { color: var(--accent2); text-decoration: none; font-weight: 700; font-size: 0.85rem; }
   
   @media (min-width: 768px) {
     .home-footer { display: block; }
     .players-inputs {
       max-height: none;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 12px;
     }
     .player-input-wrap { margin-bottom: 0; }
   }
   
   /* ── SETUP SCREEN ── */
   .setup-header {
     margin-top: 60px;
     margin-bottom: 16px;
     text-align: center;
     flex-shrink: 0;
   }
   .setup-header h1 { font-size: 2rem; font-weight: 900; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
   .setup-header p { color: var(--text2); font-size: 0.9rem; margin-top: 4px; }
   
   .setup-main {
     flex: 1;
     overflow-y: auto;
     padding-bottom: 20px;
   }
   .setup-form { display: flex; flex-direction: column; gap: 20px; }
   
   .setup-section { display: flex; flex-direction: column; gap: 8px; }
   .setup-label {
     font-size: 0.8rem;
     font-weight: 700;
     color: var(--text2);
     text-transform: uppercase;
     letter-spacing: 1px;
   }
   .setup-input {
     width: 100%;
     padding: 14px 16px;
     border: 1px solid var(--border);
     border-radius: 14px;
     background: var(--input-bg);
     color: var(--text);
     font-family: inherit;
     font-size: 1rem;
     font-weight: 600;
     outline: none;
     transition: border-color .3s;
   }
   .setup-input:focus { border-color: var(--accent1); }
   
   /* Steppers */
   .setup-row { display: flex; gap: 12px; }
   .setup-stepper {
     flex: 1;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 14px 12px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     backdrop-filter: blur(12px);
   }
   .stepper-label { font-size: 0.75rem; color: var(--text2); font-weight: 600; text-align: center; }
   .stepper-controls { display: flex; align-items: center; gap: 14px; }
   .stepper-btn {
     width: 36px; height: 36px;
     border-radius: 50%;
     border: 1px solid var(--border);
     background: var(--input-bg);
     color: var(--text);
     font-size: 1.4rem;
     font-weight: 700;
     cursor: pointer;
     display: flex; align-items: center; justify-content: center;
     transition: all .15s;
   }
   .stepper-btn:active { transform: scale(0.9); background: var(--accent1); color: #fff; border-color: var(--accent1); }
   .stepper-value { font-size: 1.8rem; font-weight: 900; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; min-width: 40px; text-align: center; }
   
   .submit-btn { margin-top: 4px; font-size: 1.1rem; font-weight: 900; letter-spacing: 1px; }

   /* ── TOGGLE SWITCH (Sortear) ── */
   .raffle-stepper { justify-content: center; gap: 6px; min-width: 80px; flex: 0 0 auto; }
   .toggle-sublabel { font-size: 0.8rem; font-weight: 700; color: var(--accent1); min-height: 16px; }
   .toggle-switch {
     position: relative;
     display: inline-block;
     cursor: pointer;
   }
   .toggle-switch input { display: none; }
   .toggle-track {
     display: block;
     width: 52px;
     height: 28px;
     border-radius: 14px;
     background: var(--border);
     border: 1px solid var(--border);
     transition: background .3s, border-color .3s;
     position: relative;
   }
   .toggle-switch input:checked ~ .toggle-track {
     background: var(--accent1);
     border-color: var(--accent1);
     box-shadow: 0 0 12px rgba(139,92,246,0.5);
   }
   .toggle-thumb {
     position: absolute;
     top: 3px;
     left: 3px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: #fff;
     transition: transform .3s cubic-bezier(.17,.67,.35,1.4);
     box-shadow: 0 2px 6px rgba(0,0,0,0.3);
   }
   .toggle-switch input:checked ~ .toggle-track .toggle-thumb {
     transform: translateX(24px);
   }

   /* ── RAFFLE SCREEN ── */
   #raffle-screen {
     align-items: center;
     justify-content: center;
     padding: 20px;
   }
   .raffle-screen-inner {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 24px;
     width: 100%;
     max-width: 380px;
     text-align: center;
     min-height: 520px;
     position: relative;
   }
   .raffle-title {
     font-size: 1.5rem;
     font-weight: 900;
     background: var(--grad);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   .emoji-icon {
     -webkit-text-fill-color: initial;
     background: none;
   }
   .wheel-wrap {
     position: relative;
     width: 320px;
     height: 320px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 10px 0;
   }
   .wheel-pointer {
     position: absolute;
     top: -16px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 2.2rem;
     color: #f59e0b;
     filter: drop-shadow(0 0 10px #f59e0b);
     z-index: 5;
     line-height: 1;
   }
   #wheel-canvas {
     border-radius: 50%;
     box-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
   }
   @keyframes spin-in {
     from { transform: scale(0.8); opacity: 0; }
     to   { transform: scale(1);   opacity: 1; }
   }
   .raffle-bottom-area {
     height: 140px;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
   }
   .spin-btn { max-width: 260px; width: 100%; }
   .raffle-result {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     animation: spin-in .5s cubic-bezier(.17,.67,.35,1.4);
   }
   .raffle-result-label { font-size: 0.9rem; color: var(--text2); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
   .raffle-winner-name {
     font-size: 2rem;
     font-weight: 900;
     background: var(--grad);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }

   /* ── ACTIVE MATCH SCREEN ── */
   #match-screen { padding: 70px 16px 0; }
   
   .match-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 14px 18px;
     border-radius: 20px;
     margin-bottom: 12px;
     flex-shrink: 0;
     background: var(--surface);
     border: 1px solid var(--border);
     backdrop-filter: blur(20px);
   }
   .match-info h2 { font-size: 1.1rem; font-weight: 800; }
   .match-target-badge {
     display: inline-block;
     background: rgba(139,92,246,0.15);
     border: 1px solid rgba(139,92,246,0.3);
     border-radius: 20px;
     padding: 3px 10px;
     font-size: 0.78rem;
     color: var(--accent1);
     font-weight: 700;
     margin-top: 4px;
   }
   .btn-danger {
     padding: 10px 16px;
     border: none;
     border-radius: 12px;
     background: linear-gradient(135deg, #ef4444, #dc2626);
     color: #fff;
     font-family: inherit;
     font-size: 0.85rem;
     font-weight: 700;
     cursor: pointer;
     width: auto;
     transition: transform .2s;
     white-space: nowrap;
   }
   .btn-danger:active { transform: scale(0.95); }
   
   .leaderboard-wrap {
     flex: 1;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     padding-bottom: 70px;
   }
   
   .leaderboard {
     flex: 1;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 14px;
     padding: 28px 4px 10px;
   }
   
   .player-card {
     display: flex;
     align-items: center;
     padding: 14px 16px;
     border-radius: 24px;
     position: relative;
     transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
     background: var(--surface);
     border: 1px solid var(--border);
     backdrop-filter: blur(12px);
   }
   
   .player-card::before {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: 24px;
     background: linear-gradient(90deg, var(--player-color, transparent) 0%, transparent 100%);
     opacity: 0.15;
     pointer-events: none;
   }
   
   .player-rank {
     font-size: 1.3rem; font-weight: 900;
     color: var(--text2);
     width: 28px;
   }
   
   .player-info { display: flex; align-items: center; flex: 1; gap: 12px; margin-left: 8px; }
   .player-avatar {
     width: 48px; height: 48px;
     border-radius: 14px;
     color: white;
     display: flex; align-items: center; justify-content: center;
     font-weight: 800; font-size: 1.3rem;
     box-shadow: 0 0 20px var(--player-color);
     background-color: var(--player-color);
   }
   .player-name { font-weight: 700; font-size: 1.1rem; }
   
   .player-score {
     font-size: 2.4rem;
     font-weight: 900;
     width: 65px;
     text-align: center;
     background: var(--grad);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   
   .player-controls { display: flex; flex-direction: column; gap: 6px; }
   .control-btn {
     width: 38px; height: 34px; border-radius: 10px;
     display: flex; align-items: center; justify-content: center;
     font-size: 1.3rem; font-weight: 900; background: var(--input-bg);
     color: var(--text); border: 1px solid var(--border); transition: all 0.1s ease;
   }
   .control-btn:active { transform: scale(0.9); }
   .btn-plus { background: var(--player-color); border-color: var(--player-color); color: #fff;}
   .btn-minus { color: var(--text2); }
   
   .crown-icon {
     position: absolute; top: -14px; left: 14px;
     font-size: 1.8rem;
     filter: drop-shadow(0 0 15px gold);
     animation: float-crown 2s infinite ease-in-out;
   }
   @keyframes float-crown {
     0%, 100% { transform: translateY(0) rotate(-10deg); }
     50% { transform: translateY(-5px) rotate(10deg); }
   }
   
   .banner-ad {
     position: absolute;
     bottom: 0; left: 0; width: 100%; height: 60px;
     background: var(--surface);
     backdrop-filter: blur(16px);
     border-top: 1px solid var(--border);
     display: flex; align-items: center; justify-content: center;
     font-size: 0.75rem; color: var(--text2); z-index: 50;
     border-radius: 24px 24px 0 0;
   }
   
   /* ── MODALS (CONFIRM & VICTORY) ── */
   .modal {
     position: fixed;
     inset: 0;
     z-index: 300;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s ease;
   }
   .modal.view-active { opacity: 1; pointer-events: all; }
   
   .modal-backdrop {
     position: absolute;
     inset: 0;
     background: var(--modal-bg);
     backdrop-filter: blur(12px);
   }
   
   .modal-content {
     position: relative;
     background: var(--modal-card);
     border: 1px solid var(--border);
     border-radius: 24px;
     padding: clamp(24px, 4vw, 32px);
     max-width: 380px;
     width: 100%;
     text-align: center;
     backdrop-filter: blur(20px);
     transform: scale(0.9);
     transition: transform .3s cubic-bezier(.17, .67, .35, 1.5);
   }
   .modal.view-active .modal-content { transform: scale(1); }
   
   .modal-content h3 { font-size: 1.4rem; font-weight: 800; color: var(--text); margin-bottom: 8px; }
   .modal-content p { font-size: .95rem; color: var(--text2); margin-bottom: 24px; }
   
   /* ── VICTORY SCREEN (Cinematográfica) ── */
   .victory-screen {
     align-items: center;
     justify-content: center;
     background: radial-gradient(ellipse at 50% 30%, rgba(139,92,246,0.3) 0%, transparent 65%);
     z-index: 150;
     padding: 30px 20px;
   }
   .confetti-canvas {
     position: absolute;
     inset: 0;
     width: 100%; height: 100%;
     pointer-events: none;
     z-index: 1;
   }
   .victory-content {
     position: relative;
     z-index: 2;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     animation: victory-enter .8s cubic-bezier(.17,.67,.35,1.4) forwards;
   }
   @keyframes victory-enter {
     from { opacity: 0; transform: scale(0.7) translateY(40px); }
     to   { opacity: 1; transform: scale(1) translateY(0); }
   }
   .victory-crown-wrap {
     position: relative;
     width: 140px; height: 140px;
     display: flex; align-items: center; justify-content: center;
   }
   .victory-rays {
     position: absolute;
     width: 140px; height: 140px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255,215,0,0.35) 0%, transparent 70%);
     animation: rays-spin 4s linear infinite;
   }
   @keyframes rays-spin {
     from { transform: scale(0.8) rotate(0deg); opacity:0.6; }
     50% { transform: scale(1.2) rotate(180deg); opacity:1; }
     to   { transform: scale(0.8) rotate(360deg); opacity:0.6; }
   }
   .victory-crown { font-size: 5rem; filter: drop-shadow(0 0 30px gold); animation: float-crown 2s ease-in-out infinite; }
   .victory-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 4px; color: #f59e0b; text-transform: uppercase; }
   .victory-name {
     font-size: clamp(2rem, 8vw, 3.5rem);
     font-weight: 900;
     background: var(--grad);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     line-height: 1.1;
   }
   .victory-score-line { font-size: 1rem; color: var(--text2); }
   .victory-score-num { font-weight: 900; color: var(--accent1); font-size: 1.2rem; }
   .victory-btn { max-width: 280px; margin-top: 8px; }
   
   /* ── ADS MODAL ── */
   .ads-content {
     max-width: 400px;
     padding: 20px;
   }
   .ads-title {
     font-size: 0.85rem;
     color: var(--text2);
     margin-bottom: 12px;
     text-align: center;
     letter-spacing: 1px;
     text-transform: uppercase;
   }
   .ads-placeholder-video {
     width: 100%;
     aspect-ratio: 16/9;
     background: rgba(0,0,0,0.5);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     margin-bottom: 14px;
     border: 1px solid var(--border);
     font-size: 0.8rem;
     color: var(--text2);
   }
   
   /* ── CONFIRM MODAL ── */
   .modal-content h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; color: var(--accent1); }
   .modal-content p { font-size: .9rem; color: var(--text2); margin-bottom: 20px; }
   .confirm-actions { display: flex; gap: 10px; }
   .confirm-actions button { flex: 1; }
   
   /* ── RESULTS SCREEN ── */
   #results-screen { justify-content: flex-start; }
   .results-header { text-align: center; margin: 60px 0 20px; flex-shrink: 0; }
   .results-header h1 { font-size: clamp(2rem, 7vw, 3rem); background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
   .results-header p { color: var(--accent1); text-transform: uppercase; letter-spacing: 2px; font-weight: 800; margin-top: 5px; font-size: 0.9rem;}
   
   .results-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
   .results-card {
     padding: 8px 16px;
     margin-bottom: 20px;
     flex: 1;
     overflow-y: auto;
   }
   .result-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 12px;
     border-radius: 18px;
     margin-bottom: 10px;
     background: var(--surface);
     border: 1px solid var(--border);
     backdrop-filter: blur(12px);
     transition: transform .2s;
   }
   .result-row:hover { transform: scale(1.01); }
   .result-row-first {
     border-color: rgba(245,158,11,0.4);
     background: rgba(245,158,11,0.08);
     box-shadow: 0 0 20px rgba(245,158,11,0.15);
   }
   .result-player { display: flex; align-items: center; gap: 12px; }
   .result-avatar {
     width: 44px; height: 44px;
     border-radius: 12px;
     display: flex; align-items: center; justify-content: center;
     font-weight: 800; font-size: 1.2rem; color: #fff;
     flex-shrink: 0;
   }
   .result-info { display: flex; flex-direction: column; gap: 2px; }
   .result-medal { font-size: 1.2rem; line-height: 1; }
   .result-name { font-size: 1.05rem; font-weight: 700; }
   .result-pts { font-size: 1.6rem; font-weight: 900; }
   .result-pts small { font-size: 0.7rem; font-weight: 600; opacity: 0.8; }
   
   .results-actions { flex-shrink: 0; padding-bottom: 10px; }
   .row-actions { display: flex; gap: 12px; }
   .row-actions button { flex: 1; }
   
   /* Utility */
   .mt-4 { margin-top: 24px; }
   .w-full { width: 100%; }
   .mb-3 { margin-bottom: 12px; }

   /* Emoji/Color Customizer */
   .customizer-grid button {
     width: 44px; height: 44px;
     border-radius: 12px;
     border: 2px solid transparent;
     cursor: pointer;
     font-size: 1.4rem;
     display: flex; align-items: center; justify-content: center;
     background: var(--surface);
     transition: transform .2s, border-color .2s;
   }
   .customizer-grid button:hover { transform: scale(1.1); }
   .customizer-grid button.selected { border-color: var(--text); transform: scale(1.1); box-shadow: 0 0 10px rgba(0,0,0,0.3); }