:root {
    --bg-dark: #121212;
    --panel-bg: #1e1e1e;
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --primary: #8b5cf6;
    --primary-hover: #7c3aed;
    --grid-bg: #2d2d2d;
    --cell-empty: #3a3a3a;
    --color-1: #ef4444; /* red */
    --color-2: #3b82f6; /* blue */
    --color-3: #10b981; /* green */
    --color-4: #f59e0b; /* yellow */
    --color-5: #d946ef; /* pink */
}

/* Eco Mode overrides */
body.eco-mode {
    --bg-dark: #000000;
    --panel-bg: #111111;
    --cell-empty: #222222;
}
body.eco-mode * {
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
    animation: none !important;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Nunito', sans-serif; user-select: none; }
body { background: var(--bg-dark); color: var(--text-main); overflow: hidden; touch-action: none; }
.hidden { display: none !important; }
.screen { height: 100vh; display: flex; flex-direction: column; }
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.column { flex-direction: column; }

/* Auth */
#auth-screen { justify-content: center; align-items: center; }
.auth-box { background: var(--panel-bg); padding: 40px; border-radius: 20px; text-align: center; width: 90%; max-width: 350px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.logo { font-size: 32px; font-weight: 900; background: linear-gradient(45deg, #8b5cf6, #ec4899); -webkit-background-clip: text; color: transparent; margin-bottom: 5px; }
.auth-box p { color: var(--text-muted); margin-bottom: 20px; }
.auth-box input { width: 100%; padding: 15px; margin-bottom: 15px; background: var(--bg-dark); border: none; color: white; border-radius: 12px; font-size: 16px; outline: none; }
.auth-buttons button { width: 100%; padding: 15px; border: none; border-radius: 12px; font-weight: bold; font-size: 16px; cursor: pointer; background: var(--primary); color: white; margin-bottom: 10px; transition: 0.2s; }
.auth-buttons button:hover { background: var(--primary-hover); transform: scale(1.02); }
.auth-buttons button.secondary { background: transparent; color: var(--text-muted); }
.error { background: rgba(239, 68, 68, 0.2); color: #fca5a5; padding: 10px; border-radius: 8px; margin-bottom: 15px; }

/* Header */
header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: var(--panel-bg); }
.header-left, .header-right { display: flex; align-items: center; gap: 15px; }
.logo-small { font-weight: 900; color: white; }
#leaderboard-btn { background: rgba(255,255,255,0.1); border: none; color: white; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: bold; }
.text-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-weight: bold; }

/* Toggle */
.mode-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #555; transition: .3s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: #10b981; }
input:checked + .slider:before { transform: translateX(20px); }

/* Game Area */
.game-container { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 20px 0; justify-content: space-between; max-width: 500px; margin: 0 auto; width: 100%; }

.score-board { display: flex; gap: 20px; width: 90%; justify-content: center; margin-bottom: 10px; }
.score-card { flex: 1; background: var(--panel-bg); text-align: center; padding: 10px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.score-card span { font-size: 12px; color: var(--text-muted); font-weight: bold; letter-spacing: 1px; }
.score-card h3 { font-size: 24px; color: white; }

/* Grid */
.grid-container { 
    display: grid; 
    grid-template-columns: repeat(8, 1fr); 
    grid-template-rows: repeat(8, 1fr); 
    gap: 4px; 
    background: var(--grid-bg); 
    padding: 6px; 
    border-radius: 12px; 
    width: 90vw; 
    max-width: 360px; 
    aspect-ratio: 1;
}
.cell { background: var(--cell-empty); border-radius: 6px; transition: background 0.1s; }
.cell.filled { box-shadow: inset 0 0 10px rgba(255,255,255,0.2); }

/* Spawn Area */
.spawn-area { display: flex; justify-content: space-around; align-items: center; gap: 8px; width: 92%; max-width: 360px; min-height: 110px; margin-top: 14px; }
.spawn-slot { flex: 1; min-height: 108px; display: flex; justify-content: center; align-items: center; }

/* Blocks */
.draggable-block { display: grid; gap: 4px; cursor: grab; position: relative; z-index: 100; }
.draggable-block:active { cursor: grabbing; }
.block-cell { width: var(--tcell,22px); height: var(--tcell,22px); border-radius: 5px; box-shadow: inset 0 0 8px rgba(255,255,255,0.35); }
.draggable-block.dragging { gap: 4px; }
.draggable-block.dragging .block-cell { width: var(--bcell,40px); height: var(--bcell,40px); border-radius: 6px; }

/* Colors */
.color-1 { background: var(--color-1); }
.color-2 { background: var(--color-2); }
.color-3 { background: var(--color-3); }
.color-4 { background: var(--color-4); }
.color-5 { background: var(--color-5); }

/* Modals */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: var(--panel-bg); padding: 30px; border-radius: 20px; width: 90%; max-width: 350px; }
.modal-content h2 { margin-bottom: 10px; }
.highlight { font-size: 32px; font-weight: 900; color: var(--color-4); display: block; margin: 10px 0; }
.modal-actions { display: flex; gap: 15px; margin-top: 20px; }
.btn-primary { width: 100%; padding: 15px; background: var(--primary); color: white; border: none; border-radius: 12px; font-weight: bold; cursor: pointer; }
.btn-gold { width: 100%; padding: 15px; background: linear-gradient(45deg, #f59e0b, #fbbf24); color: #000; border: none; border-radius: 12px; font-weight: bold; cursor: pointer; }

/* Leaderboard */
.leaderboard-list { max-height: 250px; overflow-y: auto; margin-top: 15px; }
.lb-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #333; }
.lb-item:last-child { border-bottom: none; }
.lb-rank { color: var(--color-4); font-weight: bold; width: 30px; }
:root{ --bcell:40px; }
.logo-badge{width:56px;height:56px;border-radius:16px;margin:0 auto 12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary,#7c5cf0),#a78bfa)}
.logo-badge svg{width:30px;height:30px}
.promise{margin-top:16px;font-size:11.5px;color:#9a94b8}
.bm-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140px);background:#fff;color:#12101c;padding:11px 18px;border-radius:12px;font-size:13.5px;font-weight:800;z-index:1000;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.bm-toast.on{transform:translate(-50%,0)}
:root{ --tcell:22px; }
/* animación de limpiado */
@keyframes clearPop { 0%{transform:scale(1)} 40%{transform:scale(1.18);filter:brightness(2)} 100%{transform:scale(0);opacity:0} }
.cell.clearing{ animation:clearPop .26s ease forwards; }
/* combo flotante */
.combo-pop{ position:fixed; left:50%; top:38%; transform:translate(-50%,0); z-index:1200; font-weight:900; font-size:26px; color:#fff; text-shadow:0 2px 12px rgba(124,92,240,.9),0 0 4px #000; pointer-events:none; animation:comboUp .9s ease forwards; }
@keyframes comboUp { 0%{opacity:0;transform:translate(-50%,10px) scale(.7)} 20%{opacity:1;transform:translate(-50%,-6px) scale(1.1)} 70%{opacity:1;transform:translate(-50%,-14px) scale(1)} 100%{opacity:0;transform:translate(-50%,-40px) scale(.9)} }