* { box-sizing: border-box; margin: 0; padding: 0; }
        button { font-family: inherit; touch-action: manipulation; }
        html { scrollbar-width: thin; scrollbar-color: var(--ink) var(--cream); }

        :root {
            --cream: #FEF6E4;
            --yellow: #FFC900;
            --pink: #FF9CEE;
            --blue: #86CFFB;
            --green: #69F0AE;
            --cyan: #44DCFB;
            --orange: #FFB347;
            --purple: #B39DDB;
            --red: #FF6B6B;
            --ink: #000;
            --white: #fff;
            --gray: #E8E8E8;
            --font-hand: 'Patrick Hand', cursive;
            --font-body: 'DM Sans', sans-serif;
            --font-mono: 'Fira Code', monospace;
        }

        body {
            font-family: var(--font-body);
            color: var(--ink);
            min-height: 100vh;
            overflow-x: hidden;
            background: var(--cream);
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
        }

        ::selection { background: var(--yellow); }
        :focus-visible {
            outline: 3px solid var(--blue);
            outline-offset: 2px;
            border-radius: 8px;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--cream); }
        ::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 4px; }

        /* ══════════════════════════════════════
           LOADING SCREEN
           ══════════════════════════════════════ */
        #loader-wrapper {
            position: fixed;
            inset: 0;
            background: var(--ink);
            z-index: 99999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.6s ease, visibility 0.6s ease;
        }
        #loader-wrapper.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .loader-terminal {
            width: 90%;
            max-width: 500px;
            border: 3px solid var(--yellow);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 6px 6px 0 var(--yellow);
        }

        .loader-term-bar {
            background: var(--yellow);
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .loader-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid rgba(0,0,0,0.2);
        }
        .loader-dot:nth-child(1) { background: #ff6b6b; }
        .loader-dot:nth-child(2) { background: #fde047; }
        .loader-dot:nth-child(3) { background: #69F0AE; }
        .loader-term-title {
            margin-left: auto;
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: 1px;
        }

        .loader-term-body {
            padding: 20px;
            font-family: var(--font-mono);
            font-size: 12px;
            min-height: 180px;
            background: #111;
            color: var(--green);
            overflow: hidden;
        }

        .loader-line {
            margin-bottom: 4px;
            opacity: 0;
            transform: translateY(4px);
            animation: loaderLineIn 0.2s forwards;
        }
        .loader-line .lp { color: var(--pink); user-select: none; }
        .loader-line .lc { color: var(--green); }
        .loader-line .lo { color: #888; }
        .loader-line .lok { color: var(--green); font-weight: 700; }
        .loader-line .lw { color: var(--yellow); }

        @keyframes loaderLineIn {
            to { opacity: 1; transform: translateY(0); }
        }

        .loader-cursor {
            display: inline-block;
            width: 8px;
            height: 14px;
            background: var(--green);
            animation: blink 1s step-end infinite;
            vertical-align: text-bottom;
            margin-left: 2px;
        }
        @keyframes blink { 50% { opacity: 0; } }

        .loader-progress-wrap {
            width: 90%;
            max-width: 500px;
            margin-top: 16px;
        }
        .loader-progress-label {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--yellow);
            margin-bottom: 6px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        .loader-progress-bg {
            background: rgba(255,201,0,0.1);
            border: 2px solid rgba(255,201,0,0.3);
            border-radius: 20px;
            height: 6px;
            overflow: hidden;
        }
        .loader-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--yellow), var(--pink));
            width: 0%;
            transition: width 0.3s ease;
            border-radius: 20px;
        }

        .loader-status {
            margin-top: 20px;
            font-family: var(--font-mono);
            font-size: 14px;
            font-weight: 700;
            color: var(--yellow);
            letter-spacing: 4px;
            text-transform: uppercase;
        }

        /* ══════════════════════════════════════
           BG PATTERN
           ══════════════════════════════════════ */
        .bg-pattern {
            position: fixed;
            inset: 0;
            background-image: radial-gradient(var(--ink) 1.5px, transparent 1.5px);
            background-size: 24px 24px;
            opacity: 0.06;
            z-index: 0;
            pointer-events: none;
        }

        /* ══════════════════════════════════════
           MAIN CONTENT
           ══════════════════════════════════════ */
        #main-content {
            position: relative;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.6s ease;
            width: 100%;
            flex-shrink: 0;
        }
        #main-content.visible { opacity: 1; }

        .layout-mobile { padding: 78px 20px 0; max-width: 480px; margin: 0 auto; }
        .layout-desktop { display: none; }

        /* ══════════════════════════════════════
           MENU BUTTON
           ══════════════════════════════════════ */
        .menu-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            background: var(--white);
            color: var(--ink);
            border: 3px solid var(--ink);
            padding: 10px 14px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 1000;
            font-size: 1.1rem;
            box-shadow: 4px 4px 0 var(--ink);
            transition: all 0.15s ease;
        }
        .menu-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
        .menu-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }

        /* ══════════════════════════════════════
           SIDEBAR
           ══════════════════════════════════════ */
        .sidebar-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.4);
            z-index: 998;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            backdrop-filter: blur(2px);
        }
        .sidebar-overlay.active { opacity: 1; visibility: visible; }

        .sidebar {
            position: fixed;
            top: 0;
            left: -300px;
            width: 280px;
            height: 100%;
            background: var(--yellow);
            border-right: 4px solid var(--ink);
            transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 999;
            padding-top: 70px;
            box-shadow: 10px 0 0 rgba(0,0,0,1);
        }
        .sidebar.active { left: 0; }

        .sidebar-header {
            padding: 0 25px 20px;
            border-bottom: 3px solid var(--ink);
        }
        .sidebar-header h3 {
            font-family: var(--font-mono);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
        }

        .sidebar ul { list-style: none; margin-top: 12px; }
        .sidebar ul li a {
            color: var(--ink);
            font-weight: 700;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 25px;
            border-bottom: 3px solid var(--ink);
            background: var(--white);
            transition: all 0.2s;
            font-size: 14px;
        }
        .sidebar ul li a:hover { background: var(--pink); padding-left: 32px; }
        .sidebar ul li a i { width: 20px; text-align: center; }

        /* ══════════════════════════════════════
           CARD
           ══════════════════════════════════════ */
        .card {
            background: var(--white);
            border: 4px solid var(--ink);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 8px 8px 0 var(--ink);
        }

        .card-header {
            position: relative;
            padding-top: 70px;
            padding-bottom: 24px;
            text-align: center;
            background: var(--white);
            border-bottom: 4px solid var(--ink);
        }

        .window-header {
            position: absolute;
            top: 0; left: 0; width: 100%;
            height: 42px;
            background: var(--yellow);
            border-bottom: 4px solid var(--ink);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 14px;
        }
        .window-dots { display: flex; gap: 7px; }
        .dot {
            width: 13px; height: 13px;
            border-radius: 50%;
            border: 2.5px solid var(--ink);
        }
        .dot-pink { background: var(--pink); }
        .dot-yellow { background: var(--cream); }
        .dot-green { background: var(--green); }
        .window-title {
            font-family: var(--font-mono);
            font-size: 10px; font-weight: 700;
            letter-spacing: 1.5px; color: var(--ink);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .win-clock { opacity: .7; }

        .avatar-wrapper { position: relative; z-index: 2; display: inline-block; }
        .card-avatar {
            width: 100px; height: 100px;
            border-radius: 50%;
            border: 4px solid var(--ink);
            background: var(--cream);
            object-fit: cover;
            display: block;
            box-shadow: 4px 4px 0 var(--ink);
            transition: transform 0.3s ease;
        }
        .card-avatar:hover { transform: scale(1.05) rotate(3deg); }

        .card-fullname {
            font-family: var(--font-hand);
            font-size: clamp(30px, 8vw, 40px);
            margin-top: 14px;
            font-weight: 900;
        }
        .card-jobtitle {
            font-size: clamp(12px, 3.5vw, 14px);
            font-weight: 700;
            margin-top: 6px;
            background: var(--yellow);
            display: inline-block;
            padding: 4px 14px;
            border: 3px solid var(--ink);
            border-radius: 50px;
            box-shadow: 3px 3px 0 var(--ink);
        }

        .card-main { padding: clamp(18px, 4vw, 28px); background: var(--white); }

        .card-section {
            display: none;
            animation: fadeSlideIn 0.35s ease-out forwards;
        }
        .card-section.is-active { display: block; }

        @keyframes fadeSlideIn {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .card-subtitle {
            font-family: var(--font-mono);
            font-size: 13px;
            margin-bottom: 18px;
            text-align: center;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding-bottom: 8px;
            border-bottom: 3px dashed var(--ink);
        }

        .card-text {
            text-align: center;
            font-size: clamp(14px, 4vw, 16px);
            line-height: 1.7;
            color: #333;
            font-weight: 600;
            background: var(--cream);
            padding: 18px;
            border: 3px solid var(--ink);
            border-radius: 12px;
            box-shadow: 4px 4px 0 var(--ink);
        }

        /* ── Social ── */
        .card-social {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 22px;
            flex-wrap: wrap;
        }
        .social-icon {
            color: var(--ink);
            font-size: 18px;
            width: 44px; height: 44px;
            background: var(--white);
            border: 3px solid var(--ink);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50px;
            text-decoration: none;
            box-shadow: 4px 4px 0 var(--ink);
            transition: all 0.15s ease;
        }
        .social-icon:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
        .social-icon:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
        .whatsapp { background: var(--green); }
        .telegram { background: var(--blue); }
        .github { background: var(--gray); }

        /* ── Skills ── */
        .skill-container { margin-bottom: 16px; }
        .skill-header {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            margin-bottom: 6px;
            font-weight: 700;
        }
        .skill-header i { margin-right: 6px; }
        .skill-bar {
            width: 100%; height: 22px;
            background: var(--gray);
            border: 3px solid var(--ink);
            border-radius: 20px;
            overflow: hidden;
        }
        .skill-progress {
            height: 100%; width: 0;
            border-right: 3px solid var(--ink);
            transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .js-color { background: #FFD874; }
        .html-color { background: #FF9B73; }
        .py-color { background: #74FFED; }
        .prompt-color { background: #E8E8E8; }
        .mysql-color { background: var(--pink); }
        .mongo-color { background: var(--green); }
        .sqlite-color { background: var(--blue); }

        /* ── Contact ── */
        .box-item {
            padding: 14px 16px;
            background: var(--white);
            border: 3px solid var(--ink);
            border-radius: 12px;
            box-shadow: 4px 4px 0 var(--ink);
            margin-bottom: 12px;
            font-weight: 700;
            font-size: clamp(13px, 3.5vw, 14px);
            display: flex;
            align-items: center;
            transition: all 0.15s;
        }
        .box-item:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
        .box-item i { margin-right: 10px; font-size: 16px; width: 20px; text-align: center; }

        .contact-me {
            width: 100%;
            padding: 14px;
            background: var(--cyan);
            color: var(--ink);
            font-weight: 900;
            border: 3px solid var(--ink);
            border-radius: 50px;
            font-size: 15px;
            cursor: pointer;
            box-shadow: 4px 4px 0 var(--ink);
            transition: all 0.15s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }
        .contact-me:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
        .contact-me:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }

        /* ══════════════════════════════════════
           GAMES SECTION
           ══════════════════════════════════════ */
        .games-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .game-card {
            background: var(--white);
            border: 3px solid var(--ink);
            border-radius: 12px;
            padding: 16px 12px;
            text-align: center;
            box-shadow: 4px 4px 0 var(--ink);
            transition: all 0.15s ease;
            cursor: default;
            position: relative;
            overflow: hidden;
        }
        .game-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 4px;
        }
        .game-card:hover {
            transform: translate(-3px, -3px) rotate(-1.5deg);
            box-shadow: 7px 7px 0 var(--ink);
        }
        .game-card .game-name {
            transition: letter-spacing 0.2s ease;
        }
        .game-card:hover .game-name { letter-spacing: 1.5px; }

        .game-card.ml::before { background: linear-gradient(90deg, #1e88e5, #42a5f5); }
        .game-card.ml { box-shadow: 4px 4px 0 #42a5f5; }
        .game-card.ml:hover { box-shadow: 6px 6px 0 #42a5f5; }

        .game-card.mc::before { background: linear-gradient(90deg, #4caf50, #81c784); }
        .game-card.mc { box-shadow: 4px 4px 0 #81c784; }
        .game-card.mc:hover { box-shadow: 6px 6px 0 #81c784; }

        .game-card.coc::before { background: linear-gradient(90deg, #ff9800, #ffb74d); }
        .game-card.coc { box-shadow: 4px 4px 0 #ffb74d; }
        .game-card.coc:hover { box-shadow: 6px 6px 0 #ffb74d; }

        .game-card.roblox::before { background: linear-gradient(90deg, #e53935, #ef5350); }
        .game-card.roblox { box-shadow: 4px 4px 0 #ef5350; }
        .game-card.roblox:hover { box-shadow: 6px 6px 0 #ef5350; }

        .game-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 10px;
            border-radius: 10px;
            border: 2px solid var(--ink);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }
        .game-card.ml .game-icon { background: #bbdefb; }
        .game-card.mc .game-icon { background: #c8e6c9; }
        .game-card.coc .game-icon { background: #ffe0b2; }
        .game-card.roblox .game-icon { background: #ffcdd2; }

        .game-name {
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: 0.5px;
        }
        .game-tag {
            display: inline-block;
            margin-top: 6px;
            font-family: var(--font-mono);
            font-size: 9px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 20px;
            border: 2px solid var(--ink);
            background: var(--cream);
        }

        /* ── Minecraft Server Card ── */
        .mc-server {
            grid-column: 1 / -1;
            background: var(--white);
            border: 3px solid var(--ink);
            border-radius: 12px;
            padding: 16px;
            box-shadow: 4px 4px 0 #81c784;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: all 0.15s ease;
            text-decoration: none;
            color: inherit;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .mc-server::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 4px;
            background: linear-gradient(90deg, #4caf50, #81c784);
        }
        .mc-server:hover {
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 #81c784;
        }
        .mc-server:active {
            transform: translate(4px, 4px);
            box-shadow: 0 0 0 var(--ink);
        }

        .mc-server-logo {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            border: 3px solid var(--ink);
            background: #c8e6c9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
            box-shadow: 3px 3px 0 var(--ink);
        }

        .mc-server-info {
            flex: 1;
        }
        .mc-server-name {
            font-family: var(--font-mono);
            font-size: 15px;
            font-weight: 700;
        }
        .mc-server-desc {
            font-size: 12px;
            color: #666;
            margin-top: 2px;
        }

        .mc-server-badge {
            background: #5865F2;
            color: white;
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 20px;
            border: 2px solid var(--ink);
            box-shadow: 2px 2px 0 var(--ink);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .mc-server-badge i { font-size: 14px; }

        /* ── Mini Player ── */
        .mini-player {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            background: var(--yellow);
            border: 3px solid var(--ink);
            border-radius: 12px;
            padding: 12px 14px;
            box-shadow: 4px 4px 0 var(--ink);
            flex-wrap: wrap;
            gap: 10px;
        }
        .track-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
        .music-icon { display: flex; align-items: flex-end; gap: 3px; height: 14px; flex-shrink: 0; }
        .music-icon .bar { width: 3px; height: 3px; background: var(--ink); border-radius: 2px; }
        .music-icon.playing .bar { animation: bounceBar 0.8s infinite alternate; }
        .music-icon.playing .bar:nth-child(2) { animation-delay: 0.2s; }
        .music-icon.playing .bar:nth-child(3) { animation-delay: 0.4s; }
        @keyframes bounceBar { 0% { height: 3px; } 100% { height: 14px; } }

        .track-name {
            font-size: 12px; font-weight: 700;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            font-family: var(--font-mono);
        }

        .player-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .ctrl-btn {
            background: var(--white);
            border: 3px solid var(--ink);
            border-radius: 8px;
            color: var(--ink);
            cursor: pointer;
            font-size: 12px;
            padding: 5px 8px;
            box-shadow: 2px 2px 0 var(--ink);
            transition: 0.1s;
        }
        .ctrl-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
        .play-btn {
            width: 36px; height: 36px;
            background: var(--white);
            border: 3px solid var(--ink);
            color: var(--ink);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 3px 3px 0 var(--ink);
            cursor: pointer;
            transition: 0.1s;
            font-size: 13px;
        }
        .play-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

        /* ── Bottom Nav ── */
        .card-batten {
            display: flex;
            justify-content: space-between;
            margin-top: 24px;
            gap: 8px;
            flex-wrap: wrap;
        }
        .nav-btn {
            flex: 1;
            min-width: 0;
            background: var(--white);
            border: 3px solid var(--ink);
            color: var(--ink);
            font-size: clamp(10px, 2.5vw, 12px);
            font-weight: 900;
            cursor: pointer;
            padding: 10px 4px;
            border-radius: 50px;
            box-shadow: 4px 4px 0 var(--ink);
            transition: all 0.15s ease;
            font-family: var(--font-mono);
            letter-spacing: 0.5px;
        }
        .nav-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
        .nav-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
        .nav-btn.is-active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
        .nav-btn[data-section="#about"].is-active { background: var(--green); }
        .nav-btn[data-section="#skills"].is-active { background: var(--pink); }
        .nav-btn[data-section="#games"].is-active { background: var(--orange); }
        .nav-btn[data-section="#contact"].is-active { background: var(--blue); }

        /* ── FOOTER ── */
        .footer {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
            padding: 28px 20px calc(26px + env(safe-area-inset-bottom));
        }
        .footer-card {
            background: var(--white);
            border: 4px solid var(--ink);
            border-radius: 16px;
            box-shadow: 8px 8px 0 var(--ink);
            padding: 20px;
        }
        .footer-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .footer-brand { display: flex; align-items: center; gap: 12px; }
        .footer-logo {
            width: 40px; height: 40px;
            background: var(--yellow);
            border: 3px solid var(--ink);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-mono);
            font-weight: 700;
            font-size: 19px;
            box-shadow: 3px 3px 0 var(--ink);
            flex-shrink: 0;
        }
        .footer-name {
            font-family: var(--font-hand);
            font-size: 21px;
            font-weight: 900;
            line-height: 1;
        }
        .footer-tagline {
            font-family: var(--font-mono);
            font-size: 10px;
            color: #777;
            margin-top: 4px;
            letter-spacing: 0.5px;
        }
        .footer-links { display: flex; gap: 8px; flex-wrap: wrap; }
        .footer-links a {
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 700;
            color: var(--ink);
            text-decoration: none;
            background: var(--cream);
            border: 2.5px solid var(--ink);
            border-radius: 50px;
            padding: 6px 13px;
            box-shadow: 3px 3px 0 var(--ink);
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .footer-links a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); background: var(--pink); }
        .footer-links a:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

        .footer-divider { border-top: 3px dashed var(--ink); margin: 16px 0 13px; }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            font-family: var(--font-mono);
            font-size: 10.5px;
            font-weight: 600;
            color: #555;
        }
        .footer-status { display: inline-flex; align-items: center; gap: 7px; }
        .footer-status .status-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: #22c55e;
            border: 1.5px solid var(--ink);
            animation: statusPulse 1.8s ease-in-out infinite;
            flex-shrink: 0;
        }
        .footer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .to-top, .install-btn {
            background: var(--yellow);
            border: 2.5px solid var(--ink);
            border-radius: 50px;
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 700;
            padding: 7px 13px;
            cursor: pointer;
            box-shadow: 3px 3px 0 var(--ink);
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--ink);
            letter-spacing: 0.5px;
        }
        .to-top:hover, .install-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
        .to-top:active, .install-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
        .install-btn { display: none; background: var(--green); }
        .install-btn.show { display: inline-flex; }

        /* ── STATS ── */
        .stat-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-top: 18px;
        }
        .stat-box {
            border: 3px solid var(--ink);
            border-radius: 12px;
            box-shadow: 4px 4px 0 var(--ink);
            padding: 13px 6px 11px;
            text-align: center;
            transition: all 0.15s ease;
        }
        .stat-box:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
        .stat-box:nth-child(1) { background: var(--yellow); }
        .stat-box:nth-child(2) { background: var(--pink); }
        .stat-box:nth-child(3) { background: var(--blue); }
        .stat-box:nth-child(4) { background: var(--green); }
        .stat-num {
            display: block;
            font-family: var(--font-mono);
            font-size: clamp(15px, 4.5vw, 21px);
            font-weight: 700;
            line-height: 1.1;
        }
        .stat-label {
            display: block;
            font-family: var(--font-mono);
            font-size: 8.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 5px;
        }

        /* ── TECH MARQUEE ── */
        .marquee {
            margin-top: 18px;
            background: var(--ink);
            border: 3px solid var(--ink);
            border-radius: 12px;
            padding: 9px 0;
            overflow: hidden;
            box-shadow: 4px 4px 0 var(--ink);
        }
        .marquee-track {
            display: flex;
            width: max-content;
            animation: marqueeMove 20s linear infinite;
        }
        .marquee-track span {
            font-family: var(--font-mono);
            font-size: 10.5px;
            font-weight: 700;
            color: var(--ink);
            background: var(--white);
            border: 2px solid var(--white);
            border-radius: 50px;
            padding: 4px 12px;
            margin-right: 10px;
            white-space: nowrap;
        }
        .marquee-track span:nth-child(odd) { background: var(--cream); border-color: var(--cream); }
        @keyframes marqueeMove { to { transform: translateX(-50%); } }

        /* ── PROJECT CARD ── */
        .project-card {
            display: flex;
            align-items: center;
            gap: 14px;
            background: var(--white);
            border: 3px solid var(--ink);
            border-radius: 12px;
            padding: 16px;
            box-shadow: 4px 4px 0 var(--cyan);
            text-decoration: none;
            color: inherit;
            margin-top: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.15s ease;
        }
        .project-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 4px;
            background: linear-gradient(90deg, var(--cyan), var(--blue));
        }
        .project-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--cyan); }
        .project-card:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
        .project-logo {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            border: 3px solid var(--ink);
            background: var(--cyan);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            flex-shrink: 0;
            box-shadow: 3px 3px 0 var(--ink);
        }
        .project-info { flex: 1; min-width: 0; }
        .project-name { font-family: var(--font-mono); font-size: 15px; font-weight: 700; }
        .project-desc { font-size: 12px; color: #666; margin-top: 2px; }
        .project-badge {
            background: var(--green);
            color: var(--ink);
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 20px;
            border: 2px solid var(--ink);
            box-shadow: 2px 2px 0 var(--ink);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .project-badge .status-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: #16a34a;
            animation: statusPulse 1.8s ease-in-out infinite;
        }

        /* ── Online Badge ── */
        .online-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 14px;
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            background: var(--white);
            border: 2px solid var(--ink);
            border-radius: 50px;
            padding: 5px 14px;
            box-shadow: 3px 3px 0 var(--ink);
        }
        .online-badge .status-dot {
            width: 9px; height: 9px;
            border-radius: 50%;
            background: #22c55e;
            border: 1.5px solid var(--ink);
            animation: statusPulse 1.8s ease-in-out infinite;
        }
        @keyframes statusPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
            50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
        }

        /* ── Floating Background Decor ── */
        .bg-deco {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }
        .bg-deco .fd {
            position: absolute;
            font-family: var(--font-mono);
            font-weight: 900;
            color: var(--ink);
            opacity: .09;
            user-select: none;
            animation: floatY 6s ease-in-out infinite;
        }
        .fd1 { top: 10%; left: 5%; font-size: 3.2rem; }
        .fd2 { top: 68%; left: 11%; font-size: 2.4rem; animation-delay: -2s; }
        .fd3 { top: 18%; right: 7%; font-size: 2.9rem; animation-delay: -1s; }
        .fd4 { bottom: 13%; right: 13%; font-size: 2.2rem; animation-delay: -3s; }
        .fd5 { top: 46%; left: 47%; font-size: 2rem; animation-delay: -4.5s; }
        @keyframes floatY {
            0%, 100% { transform: translateY(0) rotate(-4deg); }
            50% { transform: translateY(-16px) rotate(4deg); }
        }

        /* ── Terminal Status Bar ── */
        .term-status {
            margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-family: var(--font-mono);
            font-size: 10px;
            background: var(--ink);
            color: var(--green);
            border: 3px solid var(--ink);
            border-radius: 12px;
            padding: 11px 14px;
            overflow: hidden;
            box-shadow: 4px 4px 0 var(--ink);
        }
        .term-status .ts-dot {
            width: 9px; height: 9px;
            border-radius: 50%;
            background: var(--green);
            flex-shrink: 0;
            animation: blink 1.2s step-end infinite;
        }
        .term-status .ts-scroll {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
        }
        .term-status .ts-scroll span {
            display: inline-block;
            padding-left: 100%;
            white-space: nowrap;
            animation: ticker 22s linear infinite;
        }
        @keyframes ticker { to { transform: translateX(-100%); } }

        /* ══════════════════════════════════════
           DESKTOP (>=768px)
           ══════════════════════════════════════ */
        @media (min-width: 768px) {
            body {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
                padding: 40px;
            }
            .menu-btn { display: none; }
            .layout-mobile { display: none; }

            .layout-desktop {
                display: grid;
                grid-template-columns: 340px 1fr;
                max-width: 900px;
                width: 100%;
                margin: 0 auto;
                background: var(--white);
                border: 4px solid var(--ink);
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 12px 12px 0 var(--ink);
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }
            .layout-desktop:hover {
                transform: translate(-3px, -3px);
                box-shadow: 16px 16px 0 var(--ink);
            }

            .desktop-left {
                border-right: 4px solid var(--ink);
                display: flex;
                flex-direction: column;
            }

            .desktop-profile {
                padding: 40px 30px 24px;
                text-align: center;
                background: var(--cream);
                border-bottom: 4px solid var(--ink);
                position: relative;
            }
            .desktop-window-bar {
                position: absolute;
                top: 0; left: 0; width: 100%;
                height: 40px;
                background: var(--yellow);
                border-bottom: 4px solid var(--ink);
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 14px;
            }

            .desktop-avatar {
                width: 120px; height: 120px;
                border-radius: 50%;
                border: 4px solid var(--ink);
                background: var(--white);
                object-fit: cover;
                display: block;
                margin: 0 auto;
                box-shadow: 4px 4px 0 var(--ink);
                transition: transform 0.3s ease;
            }
            .desktop-avatar:hover { transform: scale(1.05) rotate(3deg); }

            .desktop-name {
                font-family: var(--font-hand);
                font-size: 36px;
                margin-top: 16px;
                font-weight: 900;
            }
            .desktop-jobtitle {
                font-size: 13px; font-weight: 700;
                margin-top: 8px;
                background: var(--yellow);
                display: inline-block;
                padding: 4px 14px;
                border: 3px solid var(--ink);
                border-radius: 50px;
                box-shadow: 3px 3px 0 var(--ink);
            }

            .desktop-social {
                display: flex;
                justify-content: center;
                gap: 10px;
                margin-top: 20px;
            }
            .desktop-social a {
                color: var(--ink);
                font-size: 16px;
                width: 40px; height: 40px;
                background: var(--white);
                border: 3px solid var(--ink);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50px;
                text-decoration: none;
                box-shadow: 3px 3px 0 var(--ink);
                transition: all 0.15s;
            }
            .desktop-social a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
            .desktop-social .dw { background: var(--green); }
            .desktop-social .dt { background: var(--blue); }
            .desktop-social .dg { background: var(--gray); }

            .desktop-nav {
                padding: 16px;
                display: flex;
                flex-direction: column;
                gap: 8px;
                flex: 1;
            }
            .desktop-nav-btn {
                background: var(--white);
                border: 3px solid var(--ink);
                color: var(--ink);
                font-family: var(--font-mono);
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                padding: 12px 16px;
                border-radius: 10px;
                box-shadow: 4px 4px 0 var(--ink);
                transition: all 0.15s ease;
                text-align: left;
                display: flex;
                align-items: center;
                gap: 10px;
                letter-spacing: 1px;
            }
            .desktop-nav-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
            .desktop-nav-btn.is-active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
            .desktop-nav-btn.is-active[data-section="#d-about"] { background: var(--green); }
            .desktop-nav-btn.is-active[data-section="#d-skills"] { background: var(--pink); }
            .desktop-nav-btn.is-active[data-section="#d-games"] { background: var(--orange); }
            .desktop-nav-btn.is-active[data-section="#d-contact"] { background: var(--blue); }

            .desktop-mini-player {
                margin-top: auto;
                padding: 14px;
                background: var(--yellow);
                border: 3px solid var(--ink);
                border-radius: 12px;
                box-shadow: 4px 4px 0 var(--ink);
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
            }

            .desktop-right {
                padding: 36px;
                display: flex;
                flex-direction: column;
                min-width: 0;
            }

            .desktop-section {
                display: none;
                animation: fadeSlideIn 0.35s ease-out forwards;
            }
            .desktop-section.is-active { display: block; }

            .desktop-subtitle {
                font-family: var(--font-mono);
                font-size: 14px;
                margin-bottom: 20px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 2px;
                padding-bottom: 10px;
                border-bottom: 3px dashed var(--ink);
            }

            .desktop-text {
                font-size: 16px;
                line-height: 1.8;
                color: #444;
                font-weight: 500;
                background: var(--cream);
                padding: 24px;
                border: 3px solid var(--ink);
                border-radius: 14px;
                box-shadow: 6px 6px 0 var(--ink);
            }

            .desktop-skills {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
            }

            .desktop-games-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
            }
            .desktop-games-grid .mc-server {
                grid-column: 1 / -1;
            }

            .desktop-contact-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
            }
            .desktop-contact-grid .contact-me { grid-column: 1 / -1; }
            .desktop-contact-grid .project-card { grid-column: 1 / -1; margin-top: 0; }

            .footer { max-width: 1000px; padding: 34px 0 calc(30px + env(safe-area-inset-bottom)); }
            .footer-card { padding: 24px 28px; }
            .footer-name { font-size: 24px; }
            .footer-tagline { font-size: 11px; }
            .footer-links a, .to-top, .install-btn { font-size: 11.5px; padding: 7px 15px; }
            .footer-bottom { font-size: 11.5px; }
        }

        @media (min-width: 1024px) {
            .layout-desktop { grid-template-columns: 380px 1fr; max-width: 1000px; }
            .desktop-right { padding: 44px; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ══════════════════════════════════════
           SKILL NOTE
           ══════════════════════════════════════ */
        .skill-note {
            grid-column: 1 / -1;
            margin-top: 6px;
            background: var(--cream);
            border: 3px dashed var(--ink);
            border-radius: 12px;
            padding: 14px 16px;
            font-family: var(--font-hand);
            font-size: 17px;
            text-align: center;
            box-shadow: 4px 4px 0 var(--ink);
            transition: all 0.15s ease;
        }
        .skill-note:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
        .skill-note i { margin-right: 6px; color: var(--ink); }

        /* ══════════════════════════════════════
           TRACK INFO (klik = buka playlist)
           ══════════════════════════════════════ */
        .track-info { cursor: pointer; }
        .track-hint {
            margin-left: auto;
            font-size: 12px;
            opacity: 0.5;
            transition: all 0.15s ease;
            flex-shrink: 0;
        }
        .track-info:hover .track-hint { opacity: 1; transform: scale(1.2) rotate(-8deg); }
        .track-info:hover .track-name { text-decoration: underline wavy var(--ink) 1.5px; text-underline-offset: 3px; }

        /* ══════════════════════════════════════
           PLAYLIST MODAL
           ══════════════════════════════════════ */
        .playlist-overlay {
            position: fixed;
            inset: 0;
            z-index: 5000;
            background: rgba(0,0,0,0.45);
            backdrop-filter: blur(3px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s ease;
        }
        .playlist-overlay.active { opacity: 1; visibility: visible; }

        .playlist-modal {
            width: 100%;
            max-width: 430px;
            max-height: min(72vh, 560px);
            background: var(--white);
            border: 4px solid var(--ink);
            border-radius: 16px;
            box-shadow: 10px 10px 0 var(--ink);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: translateY(18px) scale(0.96);
            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .playlist-overlay.active .playlist-modal { transform: none; }

        .pl-header {
            background: var(--yellow);
            border-bottom: 4px solid var(--ink);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .pl-title {
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .pl-title i { font-size: 14px; }
        .pl-close {
            margin-left: auto;
            width: 32px; height: 32px;
            background: var(--white);
            border: 3px solid var(--ink);
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            color: var(--ink);
            box-shadow: 2px 2px 0 var(--ink);
            transition: all 0.12s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .pl-close:hover { background: var(--red); color: var(--white); }
        .pl-close:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

        .pl-tabs {
            display: flex;
            gap: 8px;
            padding: 14px 16px 12px;
            overflow-x: auto;
            flex-shrink: 0;
            border-bottom: 3px dashed var(--ink);
            margin: 0 16px;
            padding-left: 0;
            padding-right: 0;
            scrollbar-width: thin;
        }
        .pl-tabs::-webkit-scrollbar { height: 6px; }
        .pl-tabs::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 3px; }
        .pl-tab {
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 700;
            border: 2.5px solid var(--ink);
            border-radius: 50px;
            padding: 7px 13px;
            background: var(--cream);
            color: var(--ink);
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 3px 3px 0 var(--ink);
            transition: all 0.12s ease;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            flex-shrink: 0;
        }
        .pl-tab:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
        .pl-tab.is-active { background: var(--yellow); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
        .pl-count {
            background: var(--white);
            border: 2px solid var(--ink);
            border-radius: 20px;
            font-size: 9px;
            padding: 1px 7px;
        }

        .pl-list {
            overflow-y: auto;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
            scrollbar-width: thin;
        }
        .pl-list::-webkit-scrollbar { width: 6px; }
        .pl-list::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 3px; }
        .pl-item {
            display: flex;
            align-items: center;
            gap: 11px;
            border: 2.5px solid var(--ink);
            border-radius: 10px;
            padding: 11px 13px;
            background: var(--white);
            cursor: pointer;
            box-shadow: 3px 3px 0 var(--ink);
            font-weight: 700;
            font-size: 13px;
            color: var(--ink);
            transition: all 0.12s ease;
            text-align: left;
            width: 100%;
        }
        .pl-item:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); background: var(--cream); }
        .pl-item:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
        .pl-item.is-active { background: var(--yellow); }
        .pl-item.is-active:hover { background: var(--yellow); }
        .pl-item .num {
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 700;
            width: 24px; height: 24px;
            border: 2px solid var(--ink);
            border-radius: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--cream);
            flex-shrink: 0;
        }
        .pl-item.is-active .num { background: var(--white); }
        .pl-item .pl-item-name {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .pl-item .pl-now { font-size: 15px; flex-shrink: 0; animation: blink 1.2s step-end infinite; }
        .pl-empty {
            text-align: center;
            padding: 34px 12px;
            color: #888;
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 700;
        }
        .pl-footer {
            flex-shrink: 0;
            border-top: 3px dashed var(--ink);
            padding: 10px 16px;
            font-family: var(--font-mono);
            font-size: 9.5px;
            font-weight: 600;
            color: #888;
            text-align: center;
            background: var(--cream);
        }
        .pl-footer span { color: var(--ink); font-weight: 700; }

        @media (min-width: 768px) {
            .playlist-modal { max-width: 470px; }
            .pl-item { font-size: 14px; }
        }

        /* ══════════════════════════════════════
           VISITOR COUNTER
           ══════════════════════════════════════ */
        .visitor-counter {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 480px;
            margin: 4px auto 0;
            padding: 0 20px 6px;
            text-align: center;
        }
        .visitor-counter .vc-label {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            background: var(--white);
            border: 2.5px solid var(--ink);
            border-radius: 50px;
            padding: 5px 14px;
            box-shadow: 3px 3px 0 var(--ink);
            margin-bottom: 12px;
        }
        .visitor-counter img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
            height: auto;
            image-rendering: pixelated;
            -webkit-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .visitor-counter { max-width: 1000px; padding: 0 0 8px; }
            .visitor-counter .vc-label { font-size: 11px; }
        }
        .visitor-counter.is-hidden { display: none; }