:root { --primary:#ff6b6b; --secondary:#feca57; }
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        html { scroll-behavior: smooth; }
        body {
            font-family:'Poppins',sans-serif;
            background: linear-gradient(160deg,#0f0f1e 0%,#1a1a2e 50%,#16213e 100%);
            background-attachment: fixed;
            color:#fff; min-height:100vh;
            padding-bottom: env(safe-area-inset-bottom);
            overscroll-behavior-y: none;
        }
        .portal-container {
            max-width: 1000px;
            margin: 0 auto;
            position: relative;
        }
        .navbar { background:rgba(15,15,30,0.98)!important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,0.07); }

        /* Force bottom nav always dark on this dark-themed page */
        .app-bottom-nav.show-in-mobile {
            background: rgba(15,15,30,0.98) !important;
            border-top: 1px solid rgba(255,255,255,0.05) !important;
            box-shadow: 0 -5px 20px rgba(0,0,0,0.6) !important;
        }
        .app-bottom-nav.show-in-mobile .app-nav-item { color: rgba(255,255,255,0.35) !important; }
        .app-bottom-nav.show-in-mobile .app-nav-item.active { color: #fff !important; }
        .app-bottom-nav.show-in-mobile .app-nav-item.active i { color: #feca57 !important; filter: drop-shadow(0 2px 5px rgba(254,202,87,0.4)) !important; }

        /* ===== PORTAL HEADER ===== */
        .portal-header {
            background: linear-gradient(160deg, rgba(255,107,107,0.12) 0%, rgba(254,202,87,0.06) 100%);
            border-bottom: 1px solid rgba(255,255,255,0.07);
            padding: 28px 16px 24px;
            text-align: center;
        }
        .portal-header h1 {
            font-family:'Outfit',sans-serif; font-weight:900; font-size: clamp(1.5rem, 6vw, 2.2rem);
            background: linear-gradient(45deg,#ff6b6b,#feca57);
            -webkit-background-clip:text; -webkit-text-fill-color:transparent;
            margin-bottom: 4px;
        }
        .portal-header p { color:rgba(255,255,255,0.6) !important; font-size: 0.88rem; margin: 0; }

        /* ===== CATEGORY BACK BAR ===== */
        .cat-back-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: rgba(255,255,255,0.04);
            border-bottom: 1px solid rgba(255,255,255,0.07);
            position: sticky;
            top: 56px;
            z-index: 100;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        .cat-back-btn {
            display: flex; align-items: center; justify-content: center;
            width: 36px; height: 36px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            color: #fff;
            text-decoration: none;
            font-size: 0.9rem;
            transition: background 0.2s;
            flex-shrink: 0;
        }
        .cat-back-btn:active { background: rgba(255,255,255,0.25); }
        .cat-back-bar h2 { font-family:'Outfit',sans-serif; font-size: 1.1rem; font-weight: 800; margin: 0; }

        /* ===== HUB GRID ===== */
        .hub-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            padding: 16px;
        }
        @media (min-width: 576px) { .hub-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 20px; } }
        @media (min-width: 992px) { .hub-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 28px 0; } }

        .hub-cat-link {
            display: block;
            text-decoration: none;
            border-radius: 20px;
            overflow: hidden;
            /* Press animation */
            transition: transform 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s;
            will-change: transform;
        }
        .hub-cat-link:active { transform: scale(0.93); }

        .category-hub-card {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.09);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            height: 100%;
        }
        /* Glow accent bottom border from category color */
        .category-hub-card::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 3px;
            background: var(--cat-color, #ff6b6b);
            border-radius: 0 0 20px 20px;
        }
        .category-hub-card .card-body {
            padding: 20px 14px 22px;
            text-align: center;
        }
        .cat-icon-wrapper {
            width: 60px; height: 60px;
            border-radius: 18px;
            margin: 0 auto 12px;
            display: flex; align-items: center; justify-content: center;
            position: relative;
        }
        .cat-icon-wrapper::before {
            content: '';
            position: absolute; inset: 0;
            border-radius: 18px;
            background: var(--cat-color, #ff6b6b);
            opacity: 0.15;
        }
        .cat-icon-wrapper i { font-size: 1.6rem; position: relative; z-index: 1; }
        .category-hub-card h5 {
            font-family:'Outfit',sans-serif; font-weight: 800;
            font-size: 0.95rem; color: #fff !important;
            margin-bottom: 4px; line-height: 1.2;
        }
        .category-hub-card .cat-desc {
            font-size: 0.72rem;
            color: rgba(255,255,255,0.5) !important;
            line-height: 1.35;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .cat-count-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 50rem;
            font-size: 0.7rem;
            font-weight: 700;
            background: var(--cat-color-bg, rgba(255,107,107,0.15));
            color: var(--cat-color, #ff6b6b);
        }

        /* ===== GAMES GRID ===== */
        .games-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
            padding: 16px;
        }
        @media (min-width: 576px) { .games-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px; } }
        @media (min-width: 992px) { .games-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 28px 0; } }

        /* ===== GAME CARDS ===== */
        .quiz-card {
            transition: transform 0.15s cubic-bezier(0.4,0,0.2,1);
            border-radius: 18px; overflow: hidden; min-height: 100%;
            display: flex; flex-direction: column;
            background: rgba(255,255,255,0.06) !important;
            border: 1px solid rgba(255,255,255,0.1) !important;
            will-change: transform;
        }
        .quiz-card:active { transform: scale(0.95) !important; }
        .quiz-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,0.35) !important; }
        .quiz-card .card-img-top { transition: transform 0.4s; }
        .quiz-card:hover .card-img-top { transform: scale(1.04); }
        .quiz-card .card-body { background: transparent; padding: 14px !important; display: flex; flex-direction: column; }
        .quiz-card .card-title { color: #fff !important; font-family:'Outfit',sans-serif; font-size: 0.95rem; margin-bottom: 6px !important; line-height: 1.25; }
        .quiz-card .card-text { color: rgba(255,255,255,0.55) !important; font-size: 0.72rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px !important; line-height: 1.4; }
        .quiz-card .card-img-top, .quiz-card .d-flex { aspect-ratio: 16/9 !important; height: auto !important; width: 100% !important; object-fit: cover !important; }
        .card i.fa-4x, .card i.fa-5x { font-size: 2.8rem !important; color:#fff !important; opacity:0.25 !important; }

        .quiz-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px !important; }
        .quiz-meta span { font-size: 0.68rem; color: rgba(255,255,255,0.55) !important; display:flex; align-items:center; gap:3px; }
        .quiz-meta i { color: #feca57 !important; font-size: 0.65rem; }

        /* ===== BUTTONS ===== */
        .btn-primary {
            background: linear-gradient(45deg,#ff6b6b,#feca57) !important; color:#000 !important;
            border: none !important; border-radius: 50rem; font-weight: 700; font-size: 0.82rem;
            padding: 9px 14px;
            transition: all 0.2s;
            white-space: normal;
            word-wrap: break-word;
            line-height: 1.2;
        }
        .btn-primary:active { transform: scale(0.95); }
        .btn-lock {
            background: rgba(255,255,255,0.07) !important;
            border: 1px solid rgba(255,255,255,0.15) !important;
            color: rgba(255,255,255,0.6) !important;
            border-radius: 50rem; font-weight: 600; font-size: 0.82rem; padding: 9px 14px;
            width: 100%; margin-top: auto;
            white-space: normal;
            word-wrap: break-word;
            line-height: 1.2;
        }
        .btn-back {
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.8);
            border-radius: 50rem; font-weight: 600; font-size: 0.85rem;
            padding: 8px 20px; transition: all 0.2s;
            text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
        }
        .btn-back:active { background: rgba(255,255,255,0.15); color:#fff; }
        .btn-outline-light { border-color:rgba(255,255,255,0.3); color:rgba(255,255,255,0.8); }
        .btn-outline-light:hover { background:rgba(255,255,255,0.1); color:#fff; }

        /* ===== PUZZLE HERO ===== */
        .puzzle-hero {
            background: linear-gradient(135deg,rgba(255,107,107,0.12),rgba(254,202,87,0.08));
            border:1px solid rgba(255,255,255,0.1); border-radius:22px; padding:1.5rem; margin:16px;
        }
        @media (min-width:768px) { .puzzle-hero { padding:2.5rem 2rem; margin:0; } }
        .puzzle-section-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.9); padding:5px 14px; border-radius:50rem; font-size:0.78rem; font-weight:700; text-transform:uppercase; margin-bottom:0.75rem; }
        .puzzle-section-title { font-family:'Outfit',sans-serif; font-size:clamp(1.5rem,4vw,2.4rem); font-weight:900; line-height:1.1; margin-bottom:0.6rem; background:linear-gradient(45deg,#ff6b6b,#feca57); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
        .puzzle-section-desc { color:rgba(255,255,255,0.7) !important; font-size:0.9rem; }
        .puzzle-big-icon { font-size:clamp(4rem,12vw,7rem); line-height:1; animation:floatPuzzle 4s ease-in-out infinite; }
        @keyframes floatPuzzle { 0%,100%{ transform:translateY(0) rotate(-5deg); } 50% { transform:translateY(-12px) rotate(5deg); } }
        .puzzle-stats-pill { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,0.09); border-radius:50rem; padding:4px 12px; font-size:0.78rem; color:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.12); font-weight:600; }
        .puzzle-group-card { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:1rem; transition:all 0.2s; display:flex; align-items:center; gap:12px; }
        .puzzle-group-card:active { background:rgba(255,255,255,0.1); }
        .puzzle-group-card .pg-icon { font-size:1.8rem; flex-shrink:0; }
        .puzzle-group-card .pg-info { flex:1; }
        .puzzle-group-card h6 { font-weight:800; font-size:0.9rem; color:#fff !important; margin-bottom:1px; }
        .puzzle-group-card small { color:rgba(255,255,255,0.5); font-size:0.72rem; }
        .puzzle-progress-mini { height:4px; border-radius:50rem; background:rgba(255,255,255,0.1); margin-top:5px; overflow:hidden; width:60px; }
        .puzzle-progress-mini-bar { height:100%; border-radius:50rem; transition:width 1s ease; }
        .level-cards-grid { display:flex; flex-direction:column; gap:8px; }
        @media (min-width:768px) { .level-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .puzzle-group-card { flex-direction:column; text-align:center; } .puzzle-group-card .pg-icon { font-size:2rem; } .puzzle-progress-mini { width:100%; } }
        .puzzle-cta-btn { background:linear-gradient(45deg,#ff6b6b,#feca57); color:#000 !important; border:none; padding:0.8rem 2rem; border-radius:50rem; font-weight:800; font-size:0.95rem; box-shadow:0 6px 20px rgba(255,107,107,0.3); transition:all 0.2s; display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
        .puzzle-cta-btn:active { transform:scale(0.95); }

        /* ===== EMPTY STATE ===== */
        .empty-state { text-align:center; padding:3rem 1rem; }
        .empty-state i { opacity:0.25; margin-bottom:1rem; display:block; font-size:3.5rem; }
        .empty-state h3 { font-size:1.2rem; margin-bottom:0.4rem; }
        .empty-state p { font-size:0.85rem; color:rgba(255,255,255,0.5) !important; margin:0; }

        /* ===== PAGE TRANSITION ===== */
        .page-content { animation: fadeSlideUp 0.3s ease both; }
        @keyframes fadeSlideUp {
            from { opacity:0; transform:translateY(16px); }
            to   { opacity:1; transform:translateY(0); }
        }