:root {
    --bg: #f0f4f8; --board-bg: #ffffff; --cell-empty: #e2e8f0; --text-dark: #1e293b;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; }
body { background-color: var(--bg); color: var(--text-dark); font-family: system-ui, -apple-system, sans-serif; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; user-select: none; overflow: hidden; touch-action: manipulation; }

#vfx-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5000; }
#screen-flash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: white; opacity: 0; pointer-events: none; z-index: 4500; transition: opacity 0.1s; }
.flash-active { animation: flashAnim 0.15s ease-out; }
@keyframes flashAnim { 0% { opacity: 0.6; } 100% { opacity: 0; } }

.screen { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--bg); z-index: 1000; 
    opacity: 0; transform: scale(0.95) translateY(15px); pointer-events: none; 
    transition: opacity 0.3s var(--ease-out-quint), transform 0.3s var(--ease-out-quint); 
}
.screen.active { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }

#profile-screen, #shop-screen, #achievements-screen {
    justify-content: flex-start; overflow-y: auto; padding: 20px 10px; touch-action: pan-y;
}
#profile-screen > *, #shop-screen > *, #achievements-screen > * { margin: auto; flex-shrink: 0; }

#main-menu { justify-content: center; }
h1 { font-size: 32px; color: #2563eb; margin-bottom: 10px; letter-spacing: 2px; text-align: center; }
p { color: #64748b; margin-bottom: 20px; font-weight: 600; text-align: center; }

.menu-btn { background: #2563eb; color: white; border: none; padding: 12px 20px; font-size: 15px; font-weight: bold; border-radius: 0; cursor: pointer; box-shadow: 4px 4px 0 #1e40af; margin-bottom: 12px; width: 240px; transition: transform 0.1s, box-shadow 0.1s; touch-action: manipulation; }
.menu-btn.secondary { background: #cbd5e1; color: #334155; box-shadow: 4px 4px 0 #94a3b8; }
.menu-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 transparent; }

.verified-icon { width: 18px; height: 18px; fill: #3b82f6; display: inline-block; vertical-align: middle; margin-left: 4px; filter: drop-shadow(0 2px 2px rgba(59, 130, 246, 0.4)); }

.coin-display { font-size: 18px; font-weight: 800; color: #1e293b; background: #fbbf24; padding: 6px 18px; border-radius: 20px; margin-bottom: 15px; box-shadow: 0 4px 0 #b45309; }
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 95vw; max-width: 340px; margin-bottom: 20px; }
.shop-item { background: white; border: 2px solid #e2e8f0; padding: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; box-shadow: var(--shadow); }
.shop-item-img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 8px; background: #f8fafc; }
.shop-item-title { font-size: 13px; font-weight: bold; margin-bottom: 4px; }
.shop-item-price { font-size: 13px; font-weight: bold; color: #f59e0b; margin-bottom: 8px; }
.buy-btn { background: #2563eb; color: white; border: none; padding: 6px; font-weight: bold; width: 100%; cursor: pointer; box-shadow: 0 3px 0 #1e40af; font-size: 13px; touch-action: manipulation;}
.buy-btn:active { transform: translateY(3px); box-shadow: none; }
.buy-btn.owned { background: #10b981; box-shadow: 0 3px 0 #047857; cursor: default; }
.buy-btn.owned:active { transform: none; box-shadow: 0 3px 0 #047857; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 8000; opacity: 0; transition: opacity 0.2s ease; }
.modal-overlay.active { display: flex; opacity: 1; }
.modal-content { background: white; padding: 20px; width: 95vw; max-width: 340px; border-radius: 0; box-shadow: 6px 6px 0 #1e293b; border: 2px solid #1e293b; text-align: center; transform: scale(0.8) translateY(20px); transition: transform 0.3s var(--ease-out-back); max-height: 85vh; overflow-y: auto; }
.modal-overlay.active .modal-content { transform: scale(1) translateY(0); }
.modal-tabs { display: flex; margin-bottom: 15px; border-bottom: 2px solid #e2e8f0; }
.tab-btn { flex: 1; background: none; border: none; padding: 10px 5px; font-size: 12px; font-weight: bold; color: #94a3b8; cursor: pointer; transition: color 0.2s; touch-action: manipulation;}
.tab-btn.active { color: #2563eb; border-bottom: 3px solid #2563eb; margin-bottom: -2px; }
#modal-leaderboard-list { margin-bottom: 20px; text-align: left; min-height: 150px; }
.modal-score-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 2px solid #f1f5f9; font-weight: bold; align-items: center; opacity: 0; transform: translateX(-15px); animation: slideInRight 0.3s var(--ease-out-quint) forwards; cursor: pointer; transition: background 0.1s; font-size: 14px;}
.modal-score-item:active { background: #e2e8f0; }
@keyframes slideInRight { to { opacity: 1; transform: translateX(0); } }
.ach-count { background: #f59e0b; color: white; padding: 2px 8px; font-size: 11px; }

/* Profile System */
.profile-card { background: white; border: 2px solid #e2e8f0; padding: 15px; width: 95vw; max-width: 340px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; }
.profile-header { display: flex; gap: 10px; width: 100%; align-items: center; margin-bottom: 10px; }
.profile-frame-wrapper { width: 80px; height: 80px; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.profile-avatar { width: 50px; height: 50px; background: #2563eb; color: white; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: bold; border: 2px solid #1e293b; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15); position: relative; z-index: 1; }
.frame-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; object-fit: contain; z-index: 10; }
#frame-anim { display: none; z-index: 11; }
.frame-fallback { border: 4px solid #2563eb; box-shadow: inset 0 0 15px #2563eb, 0 0 10px #2563eb; background: rgba(37, 99, 235, 0.1); width: 80px; height: 80px; position: absolute; z-index: 12; }

.profile-info { display: flex; flex-direction: column; align-items: flex-start; }
.profile-info h2 { margin: 0 0 3px 0; font-size: 20px; color: #1e293b; display: flex; align-items: center; }
.social-stats { display: flex; gap: 10px; font-size: 12px; color: #64748b; }
.social-stats strong { color: #1e293b; }

/* NEW STATS GRID */
.profile-stats-grid { display: flex; justify-content: space-between; width: 100%; margin: 10px 0; gap: 5px; }
.stat-box { flex: 1; background: #f8fafc; border: 2px solid #e2e8f0; padding: 8px 2px; text-align: center; }
.stat-val { font-size: 15px; font-weight: 800; color: #1e293b; }
.stat-label { font-size: 9px; font-weight: 700; color: #64748b; margin-top: 2px; }

.profile-bio { font-size: 13px; color: #475569; text-align: center; margin-bottom: 10px; font-style: italic; width: 100%; border-bottom: 2px dashed #e2e8f0; padding-bottom: 10px; }
.profile-actions { width: 100%; display: flex; flex-direction: column; gap: 2px; }

.verify-panel { width: 100%; background: #eff6ff; border: 2px solid #bfdbfe; padding: 10px; border-radius: 4px; margin-bottom: 10px; text-align: left; }
.verify-panel h4 { margin: 0 0 6px 0; color: #1e40af; font-size: 13px; }
.verify-req { font-size: 11px; color: #1e40af; margin-bottom: 3px; display: flex; justify-content: space-between; }
.verify-req.done { color: #10b981; font-weight: bold; }
.verify-btn { background: #3b82f6; color: white; border: none; padding: 8px; width: 100%; font-weight: bold; cursor: pointer; border-radius: 4px; margin-top: 6px; font-size: 12px; touch-action: manipulation;}
.verify-btn:disabled { background: #94a3b8; cursor: not-allowed; }
.verify-active { background: #f0fdf4; border-color: #bbf7d0; text-align: center; color: #166534; font-weight: bold; font-size: 13px; padding: 12px; }

.arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: 8px; }
.arch-badge { width: 100%; aspect-ratio: 1; background: #f8fafc; border: 2px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #cbd5e1; padding: 4px; text-align: center; animation: popIn 0.4s var(--ease-out-back) forwards; opacity: 0; transform: scale(0.5); }
@keyframes popIn { to { opacity: 1; transform: scale(1); } }
.arch-badge svg { width: 36px; height: 36px; margin-bottom: 5px; }
.arch-name { font-size: 9.5px; font-weight: 700; line-height: 1.1; color: #1e293b; text-transform: uppercase; }

.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 15px; }
.avatar-option { aspect-ratio: 1; background: #f1f5f9; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #64748b; touch-action: manipulation;}
.avatar-option.selected { border-color: #2563eb; background: #eff6ff; color: #2563eb; box-shadow: 0 0 0 2px #2563eb; }
.avatar-option svg { width: 18px; height: 18px; }

.frame-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 15px; }
.frame-option { height: 45px; background: white; border: 2px solid #cbd5e1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: #64748b; overflow: hidden; position: relative; touch-action: manipulation;}
.frame-option.selected { border-color: #2563eb; box-shadow: 0 0 0 2px #2563eb; color: #2563eb; }
.frame-option img { width: 100%; height: 100%; object-fit: contain; }
.frame-option.locked { opacity: 0.5; cursor: not-allowed; background: #e2e8f0; }
.frame-option.locked::after { content: '🔒'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; }
.auth-input { width: 100%; padding: 12px; margin-bottom: 15px; font-size: 15px; border: 2px solid #cbd5e1; border-radius: 0; outline: none; background: white; touch-action: manipulation;}
.auth-input:focus { border-color: #2563eb; }

/* Game UI */
#game-ui { display: none; position: relative; touch-action: none; }
#game-ui.active { display: flex; }
#header { text-align: center; margin-bottom: 15px; z-index: 10; width: 100%; display: flex; flex-direction: column; align-items: center; }
#mode-indicator { font-size: 12px; font-weight: 800; color: #94a3b8; letter-spacing: 1px; margin-bottom: 5px; }
#score-board { font-size: 18px; font-weight: 800; background: #ffffff; padding: 8px 25px; border-radius: 0; box-shadow: var(--shadow); color: #2563eb; border: 2px solid #e2e8f0; }
#combo-board { font-size: 13px; color: #64748b; margin-top: 4px; }
#combo-board.active-combo { color: #ea580c; font-weight: 900; }
#back-btn { position: absolute; top: 15px; left: 15px; background: white; border: 2px solid #e2e8f0; padding: 6px; border-radius: 0; box-shadow: var(--shadow); cursor: pointer; z-index: 100; color: #1e293b; display: flex; touch-action: manipulation;}
#board-container { background: var(--board-bg); padding: 8px; border-radius: 0; box-shadow: var(--shadow); position: relative; border: 2px solid #e2e8f0; touch-action: none; }
#board { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); gap: 4px; width: 92vw; max-width: 360px; aspect-ratio: 1 / 1; }
.cell { background-color: var(--cell-empty); border-radius: 0; transition: background-color 0.1s, transform 0.1s; }
.cell.filled { box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2); }
.cell.valid { box-shadow: inset 0 0 0 3px #fff, inset 0 0 10px rgba(0,0,0,0.3); z-index: 2; transform: scale(0.95); }
.cell.squash { animation: squashAnim 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes squashAnim { 0% { transform: scale(1.3, 0.7); } 50% { transform: scale(0.9, 1.1); } 100% { transform: scale(1, 1); } }
.cell.shatter { animation: shatterAnim 0.25s ease-in forwards; }
@keyframes shatterAnim { 0% { transform: scale(1); box-shadow: 0 0 20px #fff; } 100% { transform: scale(0) rotate(45deg); background-color: transparent; box-shadow: none; } }
#tray { display: flex; justify-content: space-around; align-items: center; width: 92vw; max-width: 360px; height: 90px; margin-top: 10px; touch-action: none; }
.tray-piece { position: relative; cursor: grab; transition: transform 0.1s; touch-action: none; }
.tray-piece:active { cursor: grabbing; transform: scale(0.95); }
.mini-grid { display: grid; gap: 2px; }
.mini-cell { border-radius: 0; width: 18px; height: 18px; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); }
.mini-cell.empty { background-color: transparent !important; box-shadow: none; }
.ghost { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1000; }
.ghost-block { position: absolute; border-radius: 0; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2); }

/* VFX & Overlays */
.score-popup { position: fixed; color: #2563eb; font-size: 22px; font-weight: 900; pointer-events: none; z-index: 6000; text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff; animation: floatUp 0.8s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }
@keyframes floatUp { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 30% { transform: translateY(-20px) scale(1.2); opacity: 1; } 100% { transform: translateY(-60px) scale(1); opacity: 0; } }
.crunch-text { position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(0.5); font-size: 32px; font-weight: 900; color: #ea580c; font-style: italic; text-shadow: 3px 3px 0 #fff, -3px -3px 0 #fff, 0 0 20px #ea580c; pointer-events: none; z-index: 7000; opacity: 0; white-space: nowrap; }
.crunch-active { animation: crunchAnim 0.6s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; }
@keyframes crunchAnim { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(240, 244, 248, 0.95); backdrop-filter: blur(4px); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 2000; touch-action: manipulation;}
.overlay h2 { font-size: 32px; color: var(--text-dark); margin-bottom: 5px; }
#achievement-list { width: 95vw; max-width: 340px; max-height: 50vh; overflow-y: auto; margin-bottom: 20px; padding-right: 5px;}
.ach-item { background: #fff; border: 2px solid #cbd5e1; padding: 12px; border-radius: 0; margin-bottom: 8px; opacity: 0.6; display: flex; align-items: center; gap: 10px; transform: translateY(15px); animation: slideUpFade 0.4s var(--ease-out-quint) forwards; }
@keyframes slideUpFade { to { opacity: 0.6; transform: translateY(0); } }
.ach-item.unlocked { opacity: 1; border-color: #f59e0b; background: #fffbeb; }
.ach-item svg { flex-shrink: 0; color: #94a3b8; }
.ach-item.unlocked svg { color: #f59e0b; }
.ach-text h3 { margin: 0 0 3px 0; font-size: 14px; color: #1e293b; }
.ach-text p { margin: 0; font-size: 11px; color: #64748b; }
.achievement-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background: #1e293b; color: white; padding: 12px 20px; border-radius: 0; z-index: 9999; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 10px; animation: slideDown 0.5s forwards, slideUp 0.5s 2.5s forwards; }
@keyframes slideDown { to { transform: translateX(-50%) translateY(0); } }
@keyframes slideUp { to { transform: translateX(-50%) translateY(-100px); } }

@media (min-width: 768px) {
    #main-menu { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
    #board-container { padding: 15px; }
    #board { max-width: 450px; }
    #tray { max-width: 450px; height: 110px; }
    .mini-cell { width: 22px; height: 22px; }
    .shop-grid { grid-template-columns: repeat(3, 1fr); width: 520px; }
    .modal-content { width: 450px; max-height: 90vh; }
    .profile-card { width: 420px; }
    #back-btn { top: 30px; left: 30px; padding: 10px; }
    #back-btn svg { width: 24px; height: 24px; }
}

/* Undo Button */
#undo-btn {
    position: absolute; top: 15px; right: 15px;
    background: #fbbf24; border: 2px solid #e2e8f0; padding: 6px 12px;
    border-radius: 0; box-shadow: var(--shadow); cursor: pointer;
    z-index: 100; color: #1e293b; font-weight: bold; font-size: 12px;
    touch-action: manipulation;
}
#undo-btn:active { transform: scale(0.95); }

/* Fix blank shop images */
.shop-item-img {
    background-color: #e2e8f0 !important;
    border: 2px solid #cbd5e1;
    padding: 5px;
}

/* --- NEW CUSTOM ABSOLUTE LAYOUT CSS --- */
#main-menu {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
}

.menu-header {
    position: absolute;
    top: 10%;
    width: 100%;
    text-align: center;
    pointer-events: none;
}

/* Hide PC buttons on mobile */
.pc-btn {
    display: none !important;
}

/* Show PC buttons and hide Mobile buttons on Desktop */
@media (min-width: 768px) {
    .mobile-btn {
        display: none !important;
    }
    .pc-btn {
        display: block !important;
    }
}

/* --- CUSTOM LAYOUT FIXES --- */
#main-menu {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
}

.menu-header {
    position: absolute;
    top: 35%; /* Centers the title in the middle of the screen */
    width: 100%;
    text-align: center;
    pointer-events: none;
    z-index: 1; /* Keeps title behind the buttons */
}

.menu-header h1 {
    font-size: 48px;
    margin-bottom: 5px;
    text-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.menu-header .subtitle {
    font-size: 14px;
    color: #8b5cf6;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* Hide PC buttons on mobile */
.pc-btn {
    display: none !important;
}

/* Show PC buttons and hide Mobile buttons on Desktop */
@media (min-width: 768px) {
    .mobile-btn {
        display: none !important;
    }
    .pc-btn {
        display: block !important;
    }
    .menu-header {
        top: 30%; /* Adjust center for PC */
    }
}

/* --- ANIMATED BACKGROUND --- */
#bg-video {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    object-fit: cover; /* Fills the screen without stretching */
    z-index: -2; /* Puts it behind everything */
    opacity: 0.6; /* Adjust this if you want it darker/lighter */
    pointer-events: none;
}

/* Make the game screens slightly transparent to show the video */
.screen {
    background: rgba(240, 244, 248, 0.85) !important; /* 85% solid, 15% transparent */
    backdrop-filter: blur(10px); /* Blurs the background behind the screen */
    -webkit-backdrop-filter: blur(10px); /* For iOS */
}

/* Make the game board background transparent so you can see the video behind the empty cells */
#board-container {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(5px);
}

/* Ensure the main menu title pops against the dark background */
.menu-header h1 {
    color: #fff;
    text-shadow: 0 0 20px #2563eb, 0 4px 10px rgba(0,0,0,0.5);
}

/* Adjust the menu text color for better contrast */
.menu-header p {
    color: #e2e8f0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.menu-header .subtitle {
    color: #a78bfa; /* Brighter purple for the subtitle */
}

/* --- ANIMATED BACKGROUND VIDEO --- */
.bg-video {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ensures it fills the screen without stretching */
    z-index: -2; /* Pushes it behind the game UI */
    pointer-events: none; /* Prevents it from blocking clicks */
    opacity: 0.6; /* Adjust this! 0.6 is slightly dimmed. Change to 1.0 for full brightness */
    transition: opacity 0.5s ease;
}

/* Hide the PC video on mobile screens */
#bg-video-pc { display: block; }
#bg-video-mobile { display: none; }

/* Swap them on PC screens */
@media (min-width: 768px) {
    #bg-video-pc { display: block; }
    #bg-video-mobile { display: none; }
}

/* Swap them on Mobile screens */
@media (max-width: 767px) {
    #bg-video-pc { display: none; }
    #bg-video-mobile { display: block; }
}