/* =============================================
   Dark Code — Coding Games Page  (game.css)
   ============================================= */

:root {
    --primary:    #6c63ff;
    --secondary:  #4a44c6;
    --accent:     #ff6584;
    --accent2:    #2ecc71;
    --accent3:    #f39c12;

    /* ── Unified background scale ── */
    --bg-base:    #000000;   /* page canvas  (body, hero, footer)   */
    --bg-surface: #0a0a0a;   /* cards, navbar, modals                */
    --bg-raised:  #111111;   /* hover / slightly elevated elements   */
    --bg-overlay: #181818;   /* deepest popover / dropdown           */

    --light:      #f0f0f8;
    --gray:       #7a7a9a;

    --gradient:   linear-gradient(135deg, var(--primary), var(--secondary));
    --shadow:     0 8px 25px rgba(0,0,0,0.35);
    --shadow-lg:  0 15px 35px rgba(0,0,0,0.50);
    --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);

    /* game accent colors */
    --ga1: #7C4DFF;
    --ga2: #00E5A8;
    --ga3: #FFD24C;
    --ga4: #FF6B8B;
    --ga5: #6FC3FF;

    /* border / glass helpers */
    --border:      rgba(255,255,255,0.07);
    --border-mid:  rgba(255,255,255,0.12);
    --glass:       rgba(255,255,255,0.04);

    --card-radius: 20px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESET & BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-base);
    color: var(--light);
    line-height: 1.6;
    overflow-x: hidden;
    padding-top: 70px;
    -webkit-font-smoothing: antialiased;
}
.sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER & NAV
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
header {
    position: fixed; top: 0; left: 0; width: 100%;
    background: rgba(8,8,26,0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 1000;
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}
header.scrolled {
    background: rgba(8,8,26,0.98);
    box-shadow: 0 4px 24px rgba(0,0,0,0.40);
    border-bottom-color: rgba(255,255,255,0.05);
}
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 8px 12px; border-radius: 12px; transition: 0.3s ease-in-out; }
.logo:hover { transform: translateY(-2px); }
.logo-icon img { width: 45px; height: 45px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: 0.4s ease-in-out; }
.logo:hover .logo-icon img { transform: rotate(10deg) scale(1.1); box-shadow: 0 6px 15px rgba(0,128,128,0.5); }
.logo-text { font-size: 29px; font-weight: 700; color: teal; letter-spacing: 1px; animation: fadeSlide 1s ease forwards; transition: 0.4s ease-in-out; }
.logo:hover .logo-text { color: #009f9f; text-shadow: 0 2px 10px rgba(0,255,255,0.4); transform: translateX(3px); }
@keyframes fadeSlide { from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);} }

.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-link { color: var(--light); text-decoration: none; font-weight: 500; position: relative; padding: 8px 0; display: flex; align-items: center; gap: 5px; transition: var(--transition); }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gradient); border-radius: 2px; transition: var(--transition); }
.nav-link:hover { color: var(--primary); }
.nav-link:hover::after { width: 100%; }
.game-nav-active { color: var(--primary) !important; }

.dropdown { position: relative; }
.dropdown-content {
    position: absolute; top: 100%; left: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(18px);
    min-width: 220px; padding: 15px 0;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
    border: 1px solid var(--border);
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition); z-index: 1001;
}
.dropdown:hover .dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-content li { padding: 10px 25px; transition: var(--transition); }
.dropdown-content li:hover { background: rgba(108,99,255,0.10); }
.dropdown-content a { color: var(--light); text-decoration: none; display: flex; align-items: center; gap: 10px; transition: var(--transition); }
.dropdown-content a:hover { color: var(--primary); padding-left: 5px; }

.search-wrapper { display: flex; align-items: center; gap: 8px; margin-left: 16px; position: relative; }
.search-toggle { background: transparent; border: none; color: var(--light); font-size: 1.05rem; padding: 8px; border-radius: 8px; cursor: pointer; transition: var(--transition); }
.search-toggle:hover { color: var(--primary); transform: translateY(-2px); }
.search-form { display: flex; align-items: center; gap: 8px; background: var(--glass); border: 1px solid var(--border); padding: 6px 8px; border-radius: 12px; transition: var(--transition); }
.search-input { background: transparent; border: none; outline: none; color: var(--light); width: 220px; font-size: 0.95rem; padding: 6px 4px; }
.search-submit { background: var(--primary); border: none; color: white; padding: 8px 10px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

.menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; background: var(--gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: var(--transition); border: none; }
.menu-toggle:hover { transform: scale(1.1); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO BANNER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.game-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 140px 0 90px;
    background: var(--bg-base);
    overflow: hidden;
}

/* ambient blobs */
.gh-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.gh-b1 {
    width: 580px; height: 580px;
    background: radial-gradient(circle, rgba(124,77,255,.13) 0%, transparent 70%);
    top: -200px; left: -200px;
    animation: ghDrift 22s ease-in-out infinite alternate;
}
.gh-b2 {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(0,229,168,.09) 0%, transparent 70%);
    bottom: -120px; right: -150px;
    animation: ghDrift 26s ease-in-out infinite alternate-reverse;
}
.gh-b3 {
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(255,210,76,.06) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    animation: ghDrift 18s ease-in-out infinite alternate;
}
@keyframes ghDrift {
    from { transform: translate(0,0)       scale(1);    }
    to   { transform: translate(40px,30px) scale(1.12); }
}

/* floating tech icons */
.gh-float {
    position: absolute;
    width: 58px; height: 58px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.65rem;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    backdrop-filter: blur(10px);
    z-index: 1;
    animation: ghFloat 6s ease-in-out infinite;
}
.gh-f1 { color:#c4b5fd; top:14%;   left:4%;   animation-delay:0s;   }
.gh-f2 { color:#00E5A8; top:18%;   right:6%;  animation-delay:1.0s; }
.gh-f3 { color:#FFD24C; top:55%;   left:3%;   animation-delay:2.0s; }
.gh-f4 { color:#FF6B8B; bottom:18%;left:8%;   animation-delay:0.5s; }
.gh-f5 { color:#6FC3FF; bottom:22%;right:5%;  animation-delay:1.5s; }
.gh-f6 { color:#6c63ff; top:38%;   right:4%;  animation-delay:2.5s; }
@keyframes ghFloat {
    0%,100% { transform: translateY(0)     rotate(0deg);  }
    50%     { transform: translateY(-18px) rotate(6deg);  }
}

/* inner content */
.gh-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

/* eyebrow tag */
.gh-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(124,77,255,.10);
    border: 1px solid rgba(124,77,255,.28);
    color: #c4b5fd;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: .80rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 28px;
    animation: fadeInUp .6s ease-out both;
}

/* headline */
.gh-title {
    font-size: clamp(2.1rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--light);
    margin-bottom: 22px;
    animation: fadeInUp .6s ease-out .1s both;
}
.gh-accent {
    background: linear-gradient(135deg, #7C4DFF, #00E5A8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* subtitle */
.gh-sub {
    font-size: 1.08rem;
    color: var(--gray);
    max-width: 600px;
    margin: 0 auto 36px;
    line-height: 1.75;
    animation: fadeInUp .6s ease-out .2s both;
}

/* stats row */
.gh-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
    animation: fadeInUp .6s ease-out .3s both;
}
.gh-stat       { text-align: center; }
.gh-stat-n     { display:block; font-size:2rem; font-weight:800; background:linear-gradient(135deg,#7C4DFF,#00E5A8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.gh-stat-l     { display:block; font-size:.78rem; color:var(--gray); text-transform:uppercase; letter-spacing:1.5px; }
.gh-div        { width:1px; height:44px; background:var(--border); }

/* CTA buttons */
.gh-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    animation: fadeInUp .6s ease-out .4s both;
}
.gh-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #7C4DFF, #00E5A8);
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 40px;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .3s, box-shadow .3s;
    box-shadow: 0 8px 28px rgba(124,77,255,.35);
}
.gh-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(124,77,255,.50);
    color: #fff;
}
.gh-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--glass);
    border: 1px solid var(--border-mid);
    color: rgba(255,255,255,.85);
    padding: 13px 24px;
    border-radius: 40px;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all .3s ease;
}
.gh-secondary:hover {
    background: rgba(124,77,255,.12);
    border-color: rgba(124,77,255,.40);
    color: #fff;
    transform: translateY(-2px);
}

/* filter tabs (difficulty) */
.gh-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
    animation: fadeInUp .6s ease-out .5s both;
}
.gh-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--gray);
    padding: 9px 20px;
    border-radius: 30px;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s;
}
.gh-tab:hover {
    background: rgba(124,77,255,.10);
    border-color: rgba(124,77,255,.30);
    color: var(--light);
}
.gh-tab.active {
    background: linear-gradient(135deg, #7C4DFF, #00E5A8);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(124,77,255,.35);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GAMES MAIN SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.games-section {
    background: #000;
    padding: 80px 0 110px;
    position: relative;
}

/* Educational background canvas */
#educational-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    display: block;
}

/* section header */
.games-section-title {
    text-align: center;
    padding: 0 0 56px;
}
.gst-title {
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--light) 0%, var(--gray) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}
.gst-sub {
    color: var(--gray);
    font-size: .96rem;
    margin-bottom: 16px;
}
.gst-count {
    display: inline-block;
    background: rgba(124,77,255,.10);
    border: 1px solid rgba(124,77,255,.20);
    color: #c4b5fd;
    padding: 5px 18px;
    border-radius: 20px;
    font-size: .84rem;
    font-weight: 600;
}
.title-divider {
    width: 80px; height: 4px;
    border-radius: 4px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, #7C4DFF, #00E5A8);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARDS GRID
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Single game card ── */
.game-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .5s ease,
        transform .5s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
    cursor: pointer;
}
.game-card.gc-vis {
    opacity: 1;
    transform: translateY(0);
}
.game-card:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.50);
    border-color: rgba(124,77,255,.28);
    background: var(--bg-raised);
}

/* coloured top stripe */
.gc-bar {
    height: 4px;
    width: 100%;
    flex-shrink: 0;
}

/* card top row */
.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 0;
    margin-bottom: 16px;
}
.icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    flex-shrink: 0;
}
.gc-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
.gct {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.gct-beginner    { background:rgba(46,204,113,.15);  color:#4ecb77; border:1px solid rgba(46,204,113,.28); }
.gct-intermediate{ background:rgba(108,99,255,.18);  color:#9d97ff; border:1px solid rgba(108,99,255,.28); }
.gct-advanced    { background:rgba(231,76,60,.15);   color:#e87b6e; border:1px solid rgba(231,76,60,.28); }
.gct-practice    { background:rgba(0,229,168,.12);   color:#00E5A8; border:1px solid rgba(0,229,168,.22); }
.gct-learning    { background:rgba(255,210,76,.12);  color:#FFD24C; border:1px solid rgba(255,210,76,.22); }
.gct-free        { background:rgba(46,204,113,.10);  color:#2ecc71; border:1px solid rgba(46,204,113,.22); }

/* card body */
.card-body-content {
    flex: 1;
    padding: 0 22px;
    margin-bottom: 20px;
}
.card-title {
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--light);
    margin-bottom: 8px;
    line-height: 1.35;
}
.card-sub {
    font-size: .875rem;
    color: var(--gray);
    line-height: 1.65;
    margin-bottom: 12px;
}
.gc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .76rem;
    color: var(--gray);
}
.gc-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.gc-meta i {
    color: rgba(124,77,255,.75);
    font-size: .78rem;
}

/* card accent glow */
.card-accent {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0.12;
    pointer-events: none;
    border-radius: var(--card-radius);
}



/* ── Play button ── */
.play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 22px;
    padding: 13px 20px;
    background: linear-gradient(135deg, var(--btn-color, #7C4DFF), var(--btn-darker, #4a44c6));
    color: #fff !important;
    border: none;
    border-radius: 14px;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .3s, box-shadow .3s;
    position: relative;
    overflow: hidden;
    width: calc(100% - 44px);
    box-sizing: border-box;
    font-family: inherit;
}
.play-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform: translateX(-100%);
    transition: transform .4s ease;
}
.play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px var(--btn-shadow, rgba(124,77,255,.38));
    color: #fff !important;
}
.play-btn:hover::after { transform: translateX(100%); }
.play-btn:active       { transform: translateY(0); }

.difficulty { display: none; }

.card-footer {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NO RESULTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 90px 20px;
    text-align: center;
    gap: 16px;
    display: none;
}
.gm-empty-ico {
    width: 80px; height: 80px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    color: var(--gray);
    opacity: .5;
}
.gm-empty h3 { font-size: 1.5rem; color: var(--light); }
.gm-empty p  { color: var(--gray); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GAME MODAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.game-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4,4,20,.90);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.game-modal-overlay.open { opacity: 1; visibility: visible; }

.game-modal {
    background: var(--bg-surface);
    border: 1px solid rgba(124,77,255,.18);
    border-radius: 22px;
    width: 100%;
    max-width: 900px;
    height: calc(100vh - 24px);
    max-height: 800px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,.80), 0 0 0 1px rgba(255,255,255,0.04);
    transform: translateY(28px) scale(0.97);
    transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
}
.game-modal-overlay.open .game-modal {
    transform: translateY(0) scale(1);
}

.game-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-raised);
    min-height: 68px;
}
.gm-modal-icon {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.gm-modal-title-wrap { flex: 1; min-width: 0; }
.gm-modal-title {
    font-size: 15px; font-weight: 700; color: var(--light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin: 0 0 3px; line-height: 1.3;
}
.gm-modal-subtitle {
    font-size: 11.5px; color: var(--gray); margin: 0; letter-spacing: .3px;
}
.gm-modal-actions {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.gm-close-btn {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    color: var(--gray);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px;
    transition: background .2s, color .2s, border-color .2s;
    flex-shrink: 0;
}
.gm-close-btn:hover {
    background: rgba(124,77,255,.18);
    color: #c4b5fd;
    border-color: rgba(124,77,255,.35);
}

.game-modal-body {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    position: relative;
    background: var(--bg-base);
    padding: 24px;
}

.game-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-raised);
    flex-wrap: wrap;
    min-height: 64px;
}
.game-modal-meta {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.game-modal-meta span {
    font-size: 12px; color: var(--gray);
    display: flex; align-items: center; gap: 6px; letter-spacing: .2px;
}
.game-modal-meta span i { font-size: 11px; color: rgba(124,77,255,.7); }
.meta-free { color: #22c55e !important; }
.meta-free i { color: #22c55e !important; }

.game-modal-play-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 26px;
    background: linear-gradient(135deg, #7C4DFF, #00E5A8);
    border: none; border-radius: 12px;
    color: #fff !important; font-size: 13.5px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: transform .22s, box-shadow .22s;
    box-shadow: 0 5px 20px rgba(124,77,255,.35);
    letter-spacing: .35px; white-space: nowrap;
    flex-shrink: 0; position: relative; overflow: hidden;
}
.game-modal-play-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform: translateX(-100%);
    transition: transform .4s ease;
}
.game-modal-play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(124,77,255,.50);
}
.game-modal-play-btn:hover::after { transform: translateX(100%); }

/* ── Default game template inside modal ── */
.default-game {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
    padding: 40px 20px; min-height: 300px; gap: 16px;
}
.game-icon-large { font-size: 4rem; }
.default-game h3 { font-size: 1.5rem; font-weight: 700; color: var(--light); }
.game-description { color: var(--gray); font-size: .95rem; }
.game-placeholder {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px; padding: 24px 32px;
    color: var(--gray); font-size: .9rem;
    display: flex; flex-direction: column; gap: 8px;
}

/* ── Other modal game content classes ── */
.typing-game-container, .code-challenge, .math-battle, .puzzle-game,
.memory-game, .quiz-game, .learning-module { color: var(--light); }

.code-editor { background: rgba(0,0,0,.5); border-radius: 10px; padding: 1rem; }
.code-input {
    width: 100%; background: transparent; border: none; outline: none;
    color: #00E5A8; font-family: 'Courier New', monospace;
    font-size: 0.9rem; resize: vertical; min-height: 120px;
}
.code-result { margin-top: 1rem; padding: 0.75rem; border-radius: 8px; }
.success { color: #00E5A8; }
.error   { color: #FF6B8B; }

.typing-area { background: rgba(0,0,0,.4); border-radius: 10px; padding: 1.5rem; }
.typing-target { color: var(--gray); font-size: 1.1rem; line-height: 1.8; margin-bottom: 1rem; }
.typing-input-field {
    width: 100%; background: var(--bg-surface);
    border: 1px solid var(--border-mid); border-radius: 8px;
    color: var(--light); padding: 0.75rem 1rem;
    font-family: 'Courier New', monospace; font-size: 1rem; outline: none;
}
.typing-stats { display: flex; gap: 1.5rem; margin-top: 1rem; }
.stat-box { background: var(--bg-surface); border-radius: 8px; padding: 0.75rem 1rem; text-align: center; }
.stat-box .stat-value { font-size: 1.5rem; font-weight: 800; color: #00E5A8; }
.stat-box .stat-label { font-size: 0.75rem; color: var(--gray); }

.game-modal-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .75rem 1.5rem; border-radius: 10px;
    border: none; font-weight: 600; cursor: pointer;
    transition: all .3s ease; flex: 1; justify-content: center;
    font-family: inherit; font-size: .9rem;
}
.restart-btn {
    background: linear-gradient(135deg, #00E5A8, #27ae60);
    color: white; box-shadow: 0 4px 15px rgba(0,229,168,0.3);
}
.restart-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,229,168,0.4); }
.close-btn {
    background: var(--bg-raised); border: 1px solid var(--border-mid); color: var(--light);
}
.close-btn:hover { background: var(--bg-overlay); transform: translateY(-2px); }

/* ── Result modal ── */
.result-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.75); backdrop-filter: blur(8px);
    z-index: 10000; display: none;
    align-items: center; justify-content: center;
}
.result-modal-overlay.show { display: flex; }
.result-modal {
    background: var(--bg-surface); border: 1px solid rgba(124,77,255,.2);
    border-radius: 20px; padding: 2rem; max-width: 400px; width: 90%;
    text-align: center;
}
.result-icon { font-size: 3rem; margin-bottom: 1rem; }
.result-title { font-size: 1.5rem; font-weight: 800; color: var(--light); margin-bottom: 0.5rem; }
.result-message { color: var(--gray); margin-bottom: 1.5rem; }
.result-stats { display: flex; gap: 1rem; justify-content: center; margin-bottom: 1.5rem; flex-wrap: wrap; }
.result-stat { background: var(--bg-raised); border-radius: 10px; padding: .75rem 1rem; }
.result-stat-value { font-size: 1.3rem; font-weight: 800; background: linear-gradient(135deg, #7C4DFF, #00E5A8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.result-stat-label { font-size: .72rem; color: var(--gray); }
.result-actions { display: flex; gap: .75rem; justify-content: center; }

/* ── Various game sub-content styles ── */
.preview-box { background: rgba(0,0,0,.6); padding: 1.5rem; border-radius: 8px; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.api-concept, .api-details { background: var(--bg-surface); padding: 1.5rem; border-radius: 10px; margin: 1.5rem 0; }
.detail-item { padding: .75rem 0; border-bottom: 1px solid var(--border); color: var(--light); }
.detail-item:last-child { border-bottom: none; }
.detail-item strong { color: var(--ga1); }
.examples-list, .regex-pattern, .regex-examples, .patterns-list, .practices-list, .principles-list, .guidelines-list { background: var(--bg-surface); padding: 1.5rem; border-radius: 10px; margin: 1.5rem 0; }
.example-item, .pattern-item, .practice-item, .principle-item, .guideline-item { padding: .75rem 0; border-bottom: 1px solid var(--border); color: var(--gray); font-size: .95rem; line-height: 1.5; }
.example-item:last-child, .pattern-item:last-child, .practice-item:last-child, .principle-item:last-child, .guideline-item:last-child { border-bottom: none; }
.pattern-item strong, .principle-item strong { color: var(--ga1); font-size: 1.1rem; }
.pattern-label, .examples-label { font-size: .9rem; color: var(--gray); margin-bottom: .5rem; font-weight: 600; }
.pattern-code { display: block; background: rgba(0,0,0,.6); padding: 1rem; border-radius: 8px; color: #00E5A8; font-family: 'Courier New', monospace; font-size: 1.1rem; margin-bottom: .75rem; }
.regex-explanation { color: var(--light); line-height: 1.6; margin-bottom: 1.5rem; }
.match-item { padding: .75rem 0; color: var(--light); font-size: .95rem; }
.match-item::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--ga2); border-radius: 50%; margin-right: .5rem; }
.practice-item::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--ga2); border-radius: 50%; margin-right: .5rem; }
.guideline-item::before { content: '•'; display: inline-block; width: 1.5rem; color: var(--ga1); font-weight: bold; }
.blocks-container { display: flex; flex-direction: column; gap: .75rem; }
.block { background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: 8px; padding: 1rem 1.25rem; color: var(--light); font-family: 'Courier New', monospace; cursor: grab; transition: all .2s ease; }
.block:hover { background: rgba(124,77,255,.15); border-color: rgba(124,77,255,.3); }
.block:active { cursor: grabbing; }
.puzzle-result { margin-top: 1rem; padding: .75rem; border-radius: 8px; text-align: center; font-weight: 600; }
.math-problem { background: var(--bg-surface); padding: 2rem; border-radius: 10px; text-align: center; margin: 1rem 0; }
.math-problem h2 { font-size: 2.5rem; font-weight: 900; background: linear-gradient(135deg, var(--ga1), var(--ga3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.math-input { width: 100%; background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: 8px; color: var(--light); padding: .75rem 1rem; font-size: 1.5rem; text-align: center; outline: none; font-family: inherit; }
.math-result { margin-top: 1rem; text-align: center; font-weight: 600; font-size: 1.1rem; }
.score-display { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.5rem; }
.score-box { text-align: center; background: var(--bg-surface); padding: 1rem 1.5rem; border-radius: 10px; }
.score-label { font-size: .8rem; color: var(--gray); }
.score-value { font-size: 1.8rem; font-weight: 900; background: linear-gradient(135deg, var(--ga1), var(--ga2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.quiz-question { background: var(--bg-surface); padding: 1.5rem; border-radius: 10px; margin-bottom: 1.5rem; }
.quiz-question h3 { font-size: 1.1rem; font-weight: 600; color: var(--light); line-height: 1.5; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.quiz-option { background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: 10px; padding: 1rem; color: var(--light); font-size: .9rem; cursor: pointer; transition: all .2s ease; text-align: left; font-family: inherit; }
.quiz-option:hover { background: rgba(124,77,255,.15); border-color: rgba(124,77,255,.3); }
.quiz-option.correct { background: rgba(0,229,168,.12); border-color: rgba(0,229,168,.4); color: #00E5A8; }
.quiz-option.wrong   { background: rgba(255,107,139,.12); border-color: rgba(255,107,139,.4); color: #FF6B8B; }
.learning-steps { display: flex; flex-direction: column; gap: 1rem; }
.learning-step { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; display: none; }
.learning-step.active { display: block; }
.step-number { font-size: .75rem; font-weight: 700; color: var(--ga2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: .5rem; }
.step-title { font-size: 1.1rem; font-weight: 700; color: var(--light); margin-bottom: .75rem; }
.step-content { color: var(--gray); line-height: 1.6; }

/* scroll-to-top */
.scroll-top-btn {
    position: fixed; bottom: 30px; right: 30px;
    width: 46px; height: 46px;
    background: linear-gradient(135deg, #7C4DFF, #00E5A8);
    color: white; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 999;
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: all .3s ease;
    box-shadow: 0 4px 15px rgba(124,77,255,.35);
}
.scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(124,77,255,.50); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer {
    background: var(--bg-base);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border);
}
.footer-wave { display: block; line-height: 0; overflow: hidden; background: var(--bg-base); }
.footer-wave svg { display: block; width: 100%; height: 80px; }

.footer-newsletter-bar {
    background: linear-gradient(135deg, rgba(108,99,255,0.10), rgba(255,101,132,0.07));
    border-top: 1px solid rgba(108,99,255,0.15);
    border-bottom: 1px solid rgba(108,99,255,0.10);
    padding: 22px 0;
}
.newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.newsletter-text { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; color: rgba(255,255,255,0.75); font-weight: 500; }
.newsletter-text i { color: #fee140; font-size: 1.1rem; animation: boltFlash 2.5s ease-in-out infinite; }
@keyframes boltFlash { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.6;transform:scale(1.2);} }
.newsletter-form { display: flex; align-items: center; background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: 40px; padding: 4px 4px 4px 16px; min-width: 340px; transition: border-color 0.3s; }
.newsletter-form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,99,255,0.15); }
.newsletter-form input { flex: 1; background: transparent; border: none; outline: none; color: white; font-size: 0.9rem; padding: 8px 0; }
.newsletter-form input::placeholder { color: var(--gray); }
.newsletter-form button { background: var(--gradient); border: none; color: white; padding: 10px 20px; border-radius: 30px; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; white-space: nowrap; }
.newsletter-form button:hover { transform: scale(1.04); box-shadow: 0 6px 18px rgba(108,99,255,0.35); }

.footer-body { padding: 70px 0 50px; }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.2fr; gap: 50px; }
.footer-brand-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 20px; }
.footer-brand-logo img { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.4s ease; }
.footer-brand-logo:hover img { transform: rotate(10deg) scale(1.1); }
.footer-brand-logo span { font-size: 1.6rem; font-weight: 800; color: teal; letter-spacing: 0.5px; }
.footer-tagline { font-size: 0.9rem; color: var(--gray); line-height: 1.7; margin-bottom: 28px; max-width: 300px; }
.footer-socials { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.f-social { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.95rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.f-social:hover { transform: translateY(-4px) scale(1.1); }
.f-social--fb { background: rgba(24,119,242,0.12); border: 1px solid rgba(24,119,242,0.25); }
.f-social--fb:hover { background: #1877f2; border-color: #1877f2; box-shadow: 0 8px 20px rgba(24,119,242,0.4); }
.f-social--wa { background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.25); }
.f-social--wa:hover { background: #25D366; border-color: #25D366; box-shadow: 0 8px 20px rgba(37,211,102,0.4); }
.f-social--ig { background: rgba(193,53,132,0.12); border: 1px solid rgba(193,53,132,0.25); }
.f-social--ig:hover { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: transparent; box-shadow: 0 8px 20px rgba(193,53,132,0.4); }
.f-social--li { background: rgba(10,102,194,0.12); border: 1px solid rgba(10,102,194,0.25); }
.f-social--li:hover { background: #0a66c2; border-color: #0a66c2; box-shadow: 0 8px 20px rgba(10,102,194,0.4); }
.f-social--gh { background: rgba(255,255,255,0.06); border: 1px solid var(--border); }
.f-social--gh:hover { background: #333; border-color: #666; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }

.footer-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.f-stat-pill { display: flex; flex-direction: column; align-items: center; padding: 10px 16px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; font-size: 0.72rem; color: var(--gray); transition: all 0.3s ease; }
.f-stat-pill:hover { background: rgba(108,99,255,0.10); border-color: rgba(108,99,255,0.25); transform: translateY(-2px); }
.f-stat-n { font-size: 1.1rem; font-weight: 800; background: var(--gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 2px; }

.footer-col-title { font-size: 0.92rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.45); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
.footer-col-title i { color: var(--primary); font-size: 0.9rem; }
.footer-nav-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.footer-nav-list a { color: var(--gray); text-decoration: none; font-size: 0.88rem; display: flex; align-items: center; gap: 8px; padding: 7px 0; transition: all 0.25s ease; }
.footer-nav-list a i { font-size: 0.6rem; color: transparent; transition: all 0.25s ease; }
.footer-nav-list a:hover { color: white; padding-left: 6px; }
.footer-nav-list a:hover i { color: var(--primary); }
.footer-badge { font-size: 0.65rem; background: linear-gradient(135deg,var(--accent3),#e67e22); color: white; padding: 2px 8px; border-radius: 10px; font-weight: 700; margin-left: 4px; }

.footer-contact-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 14px; }
.f-contact-icon { width: 36px; height: 36px; background: rgba(108,99,255,0.10); border: 1px solid rgba(108,99,255,0.18); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 0.85rem; flex-shrink: 0; transition: all 0.3s ease; }
.footer-contact-list li:hover .f-contact-icon { background: var(--primary); color: white; transform: scale(1.1) rotate(-5deg); }
.footer-contact-list > li > div { display: flex; flex-direction: column; gap: 2px; }
.f-contact-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); font-weight: 600; }
.footer-contact-list span, .footer-contact-list a { font-size: 0.87rem; color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s ease; }
.footer-contact-list a:hover { color: white; }

.footer-bottom-bar { border-top: 1px solid var(--border); padding: 22px 0; background: rgba(0,0,0,0.20); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-copy { font-size: 0.82rem; color: var(--gray); }
.footer-copy strong { color: rgba(255,255,255,0.65); }
.footer-made { font-size: 0.82rem; color: var(--gray); display: flex; align-items: center; gap: 6px; }
.footer-made i { color: var(--accent); animation: heartBeat 1.8s ease-in-out infinite; }
@keyframes heartBeat { 0%,100%{transform:scale(1);}14%{transform:scale(1.3);}28%{transform:scale(1);}42%{transform:scale(1.3);}70%{transform:scale(1);} }
.footer-legal-links { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; }
.footer-legal-links a { color: var(--gray); text-decoration: none; transition: color 0.2s ease; }
.footer-legal-links a:hover { color: white; }
.footer-legal-links span { color: rgba(255,255,255,0.12); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANIMATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0);    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GAMES SECTION — alt background strip
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Slight surface lift for the cards section so it doesn't blend with the hero */
.games-section {
    background: #000;
    padding: 80px 0 110px;
    position: relative;
}
/* thin gradient divider between hero and cards */
.games-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124,77,255,.35), rgba(0,229,168,.25), transparent);
    pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DEVELOPER TOOLS SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tools-section {
    background: #000;
    padding: 90px 0 110px;
    position: relative;
    overflow: hidden;
}

.tools-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,229,168,.30), rgba(124,77,255,.20), transparent);
    pointer-events: none;
    z-index: 1;
}

.tools-section .container {
    position: relative;
    z-index: 2;
}

/* Section title */
.tools-section-title {
    text-align: center;
    margin-bottom: 56px;
}
.ts-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,229,168,.08);
    border: 1px solid rgba(0,229,168,.24);
    color: #00E5A8;
    padding: 7px 20px;
    border-radius: 30px;
    font-size: .79rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 22px;
    animation: fadeInUp .6s ease-out both;
}
.ts-title {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--light);
    margin-bottom: 12px;
    animation: fadeInUp .6s ease-out .1s both;
}
.ts-accent {
    background: linear-gradient(135deg, #00E5A8, #7C4DFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ts-sub {
    color: var(--gray);
    font-size: .96rem;
    max-width: 520px;
    margin: 0 auto 18px;
    line-height: 1.75;
    animation: fadeInUp .6s ease-out .2s both;
}

/* Tools grid */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 24px;
}

/* Single tool card */
.tool-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .5s ease,
        transform .5s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}
.tool-card.tc-vis {
    opacity: 1;
    transform: translateY(0);
}
.tool-card:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.50);
    border-color: rgba(124,77,255,.28);
    background: var(--bg-raised);
    text-decoration: none;
    color: inherit;
}

.tc-bar {
    height: 4px;
    width: 100%;
    flex-shrink: 0;
}

.tc-accent {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0.10;
    pointer-events: none;
    border-radius: var(--card-radius);
}

.tc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 0;
    margin-bottom: 16px;
}
.tc-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    flex-shrink: 0;
    transition: transform .35s ease, box-shadow .35s ease;
}
.tool-card:hover .tc-icon {
    transform: translateY(-4px) rotate(-6deg) scale(1.08);
    box-shadow: 0 12px 28px rgba(0,0,0,.50);
}
.tc-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
.tct {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.tct-utility  { background:rgba(108,99,255,.16);  color:#9d97ff; border:1px solid rgba(108,99,255,.26); }
.tct-security { background:rgba(0,229,168,.12);   color:#00E5A8; border:1px solid rgba(0,229,168,.24); }
.tct-design   { background:rgba(255,107,139,.14); color:#ff8faa; border:1px solid rgba(255,107,139,.24); }
.tct-encoder  { background:rgba(255,210,76,.12);  color:#ffd24c; border:1px solid rgba(255,210,76,.24); }
.tct-editor   { background:rgba(111,195,255,.12); color:#6FC3FF; border:1px solid rgba(111,195,255,.24); }
.tct-free     { background:rgba(46,204,113,.10);  color:#2ecc71; border:1px solid rgba(46,204,113,.22); }

.tc-body {
    flex: 1;
    padding: 0 22px;
    margin-bottom: 20px;
}
.tc-title {
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--light);
    margin-bottom: 8px;
    line-height: 1.35;
}
.tc-sub {
    font-size: .875rem;
    color: var(--gray);
    line-height: 1.65;
    margin-bottom: 12px;
}
.tc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .76rem;
    color: var(--gray);
}
.tc-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tc-meta i {
    color: rgba(0,229,168,.70);
    font-size: .78rem;
}

.tc-footer {
    padding: 0 22px;
}
.tc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    background: linear-gradient(135deg, var(--tc-btn-color, #7C4DFF), var(--tc-btn-darker, #4a44c6));
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: .9rem;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: transform .3s, box-shadow .3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(124,77,255,.20);
}
.tc-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform: translateX(-100%);
    transition: transform .4s ease;
}
.tool-card:hover .tc-btn {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(124,77,255,.35);
}
.tool-card:hover .tc-btn::after { transform: translateX(100%); }
.tool-card:hover .tc-btn i {
    transform: translateX(4px);
    transition: transform .25s ease;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOOL MODAL OVERLAY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tool-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4,4,20,.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.tool-modal-overlay.open { opacity: 1; visibility: visible; }

.tool-modal {
    background: var(--bg-surface);
    border: 1px solid rgba(0,229,168,.15);
    border-radius: 22px;
    width: 100%;
    max-width: 860px;
    height: calc(100vh - 24px);
    max-height: 820px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,.80), 0 0 60px rgba(0,229,168,.04);
    transform: translateY(28px) scale(0.97);
    transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
}
.tool-modal-overlay.open .tool-modal { transform: translateY(0) scale(1); }

.tool-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-raised);
    min-height: 68px;
}
.tm-icon {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.tm-title-wrap { flex: 1; min-width: 0; }
.tm-title {
    font-size: 15px; font-weight: 700; color: var(--light);
    margin: 0 0 3px; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-subtitle { font-size: 11.5px; color: var(--gray); margin: 0; }
.tm-close-btn {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    color: var(--gray);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px;
    transition: background .2s, color .2s, border-color .2s;
    flex-shrink: 0;
}
.tm-close-btn:hover {
    background: rgba(0,229,168,.15);
    color: #00E5A8;
    border-color: rgba(0,229,168,.32);
}

.tool-modal-body {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    background: var(--bg-base);
    padding: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SHARED TOOL UI  (dc-tool)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dc-tool {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--light);
}

.dc-tool__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
}
.dc-tool__icon {
    width: 50px; height: 50px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.dc-tool__title {
    font-size: 1.05rem; font-weight: 700;
    color: var(--light); margin: 0 0 4px;
}
.dc-tool__desc { font-size: .84rem; color: var(--gray); margin: 0; }

.dc-tool__body { padding: 20px 24px 28px; flex: 1; }

.dc-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    margin-bottom: 7px;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.dc-muted { color: var(--gray); font-size: .8em; }

.dc-input {
    width: 100%;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--light);
    padding: 10px 14px;
    font-size: .92rem;
    font-family: inherit;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.dc-input:focus {
    border-color: rgba(0,229,168,.45);
    box-shadow: 0 0 0 3px rgba(0,229,168,.08);
}
.dc-textarea {
    width: 100%;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--light);
    padding: 12px 14px;
    font-size: .9rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 90px;
    transition: border-color .2s, box-shadow .2s;
    line-height: 1.6;
}
.dc-textarea:focus {
    border-color: rgba(0,229,168,.40);
    box-shadow: 0 0 0 3px rgba(0,229,168,.07);
}
.dc-output {
    background: rgba(0,0,0,.35) !important;
    color: #a5f3c0 !important;
    cursor: default;
}
.dc-mono { font-family: 'Courier New', monospace !important; font-size: .88rem !important; }

.dc-color {
    height: 42px;
    padding: 4px !important;
    cursor: pointer;
    width: 60px !important;
    border-radius: 8px !important;
}

.dc-select {
    width: 100%;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--light);
    padding: 10px 14px;
    font-size: .92rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
}
.dc-select option { background: var(--bg-overlay); }

.dc-range {
    width: 100%;
    accent-color: #00E5A8;
    cursor: pointer;
    height: 6px;
    border-radius: 3px;
}

.dc-field { display: flex; flex-direction: column; }
.dc-row   { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

.dc-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0;
}
.dc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    font-size: .88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, background .2s;
    white-space: nowrap;
}
.dc-btn--primary {
    background: linear-gradient(135deg, var(--c, #00E5A8), var(--cs, #00a87a));
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,229,168,.25);
}
.dc-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,229,168,.38);
}
.dc-btn--secondary {
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    color: rgba(255,255,255,.75);
}
.dc-btn--secondary:hover {
    background: var(--bg-overlay);
    color: #fff;
    transform: translateY(-1px);
}

.dc-output-wrap { position: relative; }
.dc-output-copy {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--gray);
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .85rem;
    transition: background .2s, color .2s;
    z-index: 1;
}
.dc-output-copy:hover { background: rgba(0,229,168,.18); color: #00E5A8; border-color: rgba(0,229,168,.32); }

.dc-error {
    background: rgba(248,113,113,.10);
    border: 1px solid rgba(248,113,113,.28);
    color: #F87171;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .87rem;
    margin-top: 8px;
}

.dc-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.dc-hint { font-size: .82rem; color: var(--gray); margin: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PASSWORD TOOL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pw-output-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,.35);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.pw-output {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    color: #00E5A8;
    word-break: break-all;
    min-height: 26px;
}
.pw-copy-btn {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--gray);
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .9rem;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
.pw-copy-btn:hover { background: rgba(0,229,168,.18); color: #00E5A8; }

.pw-strength { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.pw-strength__bar {
    flex: 1; height: 6px;
    background: var(--bg-overlay);
    border-radius: 3px; overflow: hidden;
}
.pw-strength__fill { height: 100%; border-radius: 3px; transition: width .4s ease, background .4s ease; }
.pw-strength__label { font-size: .8rem; font-weight: 700; min-width: 50px; }

.pw-options { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 12px 0; }
.pw-check {
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; color: var(--gray); cursor: pointer;
}
.pw-check input[type="checkbox"] { accent-color: #00E5A8; width: 16px; height: 16px; cursor: pointer; }

.pw-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pw-list-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 14px;
}
.pw-list-pass { flex: 1; font-family: 'Courier New', monospace; font-size: .9rem; color: #00E5A8; word-break: break-all; }
.pw-list-copy {
    background: transparent; border: none;
    color: var(--gray); cursor: pointer; font-size: .85rem;
    padding: 4px 8px; border-radius: 6px; transition: color .2s;
    flex-shrink: 0;
}
.pw-list-copy:hover { color: #00E5A8; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COLOR TOOL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.col-palette {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.col-swatch {
    flex: 1 1 80px;
    min-width: 70px;
    height: 80px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    position: relative;
    transition: transform .2s, box-shadow .2s;
    border: 1px solid var(--border);
    overflow: hidden;
}
.col-swatch:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.50); }
.col-swatch__label {
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
    letter-spacing: .5px;
    text-transform: uppercase;
    pointer-events: none;
}
.col-info {
    display: none;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 16px;
}
.col-info__swatch { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; border: 1px solid var(--border-mid); }
.col-info__vals { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.col-info__vals div { display: flex; align-items: center; gap: 8px; }
.col-info__label { font-size: .72rem; font-weight: 700; color: var(--gray); text-transform: uppercase; min-width: 32px; }
.col-info__vals code { font-family: 'Courier New', monospace; font-size: .85rem; color: #00E5A8; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE64 TOOL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.b64-mode {
    display: flex; gap: 8px; margin-bottom: 16px;
}
.b64-mode-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-raised);
    color: var(--gray);
    font-size: .88rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: all .2s;
}
.b64-mode-btn.active {
    background: rgba(255,210,76,.10);
    border-color: rgba(255,210,76,.32);
    color: #FFD24C;
}
.b64-stats {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: .80rem; color: var(--gray);
    margin-top: 8px;
    padding: 10px 14px;
    background: var(--bg-surface);
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   JSON TOOL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.json-status {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .87rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.json-status--ok  { background: rgba(0,229,168,.08); border: 1px solid rgba(0,229,168,.25); color: #00E5A8; }
.json-status--err { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); color: #F87171; }

.json-tree { margin-top: 16px; }
.json-tree__content {
    background: rgba(0,0,0,.35);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 10px;
    font-family: 'Courier New', monospace;
    font-size: .84rem;
    overflow-x: auto;
    max-height: 260px;
    overflow-y: auto;
}
.jt-key  { color: #6FC3FF; }
.jt-str  { color: #a5f3c0; }
.jt-num  { color: #FFD24C; }
.jt-bool { color: #F87171; }
.jt-null { color: var(--gray); font-style: italic; }
.jt-punct { color: rgba(255,255,255,.35); }
.jt-row  { padding: 2px 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MARKDOWN TOOL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.md-split {
    display: flex;
    gap: 0;
    height: 420px;
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.md-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.md-pane__header {
    padding: 10px 14px;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
    font-size: .82rem;
    font-weight: 600;
    color: var(--gray);
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.md-count { margin-left: auto; font-size: .75rem; font-weight: 400; }
.md-editor {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    resize: none;
    min-height: unset;
    height: 100%;
    background: rgba(0,0,0,.20) !important;
    padding: 14px !important;
    font-size: .87rem !important;
}
.md-divider { width: 1px; background: var(--border); flex-shrink: 0; }
.md-preview {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
    font-size: .9rem;
    line-height: 1.75;
    color: rgba(255,255,255,.82);
}
.md-preview h1,.md-preview h2,.md-preview h3,.md-preview h4 {
    color: var(--light); margin: 1em 0 .5em; font-weight: 700;
}
.md-preview h1 { font-size: 1.5rem; }
.md-preview h2 { font-size: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: .3em; }
.md-preview h3 { font-size: 1.05rem; }
.md-preview p  { margin: .6em 0; }
.md-preview code {
    background: rgba(0,0,0,.5); color: #00E5A8;
    padding: 2px 6px; border-radius: 5px; font-size: .85em;
    font-family: 'Courier New', monospace;
}
.md-preview pre {
    background: rgba(0,0,0,.5); border-radius: 8px;
    padding: 14px; overflow-x: auto; margin: .8em 0;
}
.md-preview pre code { background: none; padding: 0; }
.md-preview blockquote {
    border-left: 3px solid rgba(124,77,255,.55);
    padding: 8px 14px; margin: .8em 0;
    background: rgba(124,77,255,.05);
    border-radius: 0 8px 8px 0; color: var(--gray);
}
.md-preview ul,.md-preview ol { padding-left: 20px; margin: .6em 0; }
.md-preview li { margin: .3em 0; }
.md-preview a { color: #6FC3FF; text-decoration: underline; }
.md-preview hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
.md-preview strong { color: var(--light); }
.md-preview img { max-width: 100%; border-radius: 8px; }

@media (max-width: 600px) {
    .md-split { flex-direction: column; height: auto; }
    .md-editor { min-height: 180px; }
    .md-divider { width: 100%; height: 1px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REGEX TOOL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.rx-highlight {
    background: rgba(0,0,0,.35);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: .87rem;
    line-height: 1.8;
    max-height: 200px;
    overflow-y: auto;
    color: rgba(255,255,255,.70);
}
.rx-mark {
    background: rgba(255,210,76,.25);
    color: #FFD24C;
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 700;
}
.rx-match-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 200px; overflow-y: auto;
}
.rx-match-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 12px;
}
.rx-match-idx { font-size: .75rem; color: var(--gray); min-width: 28px; }
.rx-match-val { font-family: 'Courier New', monospace; font-size: .88rem; color: #FFD24C; flex: 1; word-break: break-all; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GRADIENT TOOL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.grad-preview {
    width: 100%;
    height: 140px;
    border-radius: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    transition: background .3s ease;
}
.grad-stops { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.grad-stop-row {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.grad-stop-row .dc-input:not(.dc-color) { width: 70px !important; }

.grad-presets-row {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
.grad-preset-swatch {
    width: 52px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s, transform .2s;
}
.grad-preset-swatch:hover { border-color: rgba(255,255,255,.32); transform: scale(1.1); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TIMESTAMP TOOL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ts-live {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: rgba(16,185,129,.06);
    border: 1px solid rgba(16,185,129,.20);
    border-radius: 12px;
    padding: 14px 18px;
}
.ts-live__label { font-size: .8rem; color: var(--gray); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.ts-live__val {
    font-family: 'Courier New', monospace;
    font-size: 1.2rem; font-weight: 800;
    color: #10B981; letter-spacing: 1px;
}
.ts-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    margin-top: 16px;
}
.ts-panel__title {
    font-size: .9rem; font-weight: 700;
    color: rgba(255,255,255,.65);
    margin: 0 0 14px;
    display: flex; align-items: center; gap: 8px;
}
.ts-output {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    background: rgba(0,0,0,.28);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}
.ts-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ts-row__label {
    font-size: .75rem; font-weight: 700;
    color: var(--gray); text-transform: uppercase; min-width: 90px;
}
.ts-row__val {
    font-family: 'Courier New', monospace;
    font-size: .85rem; color: #10B981; flex: 1; word-break: break-all;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COUNTER TOOL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cnt-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 0;
    background: rgba(245,158,11,.05);
    border: 1px solid rgba(245,158,11,.18);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 4px;
}
.cnt-stat { text-align: center; padding: 0 14px; }
.cnt-stat__n {
    display: block;
    font-size: 1.5rem; font-weight: 800;
    background: linear-gradient(135deg,#F59E0B,#FFD24C);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2; margin-bottom: 3px;
}
.cnt-stat__l { display: block; font-size: .70rem; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; }
.cnt-divider { width: 1px; height: 36px; background: var(--border); }
@media (max-width: 480px) { .cnt-divider { display: none; } .cnt-stat { padding: 4px 10px; } }

.cnt-density { display: flex; flex-direction: column; gap: 7px; }
.cnt-kw-row { display: flex; align-items: center; gap: 10px; }
.cnt-kw-word { width: 100px; font-size: .85rem; color: var(--light); font-family: 'Courier New', monospace; }
.cnt-kw-bar-wrap { flex: 1; height: 6px; background: var(--bg-overlay); border-radius: 3px; overflow: hidden; }
.cnt-kw-bar { height: 100%; background: linear-gradient(90deg,#F59E0B,#FFD24C); border-radius: 3px; transition: width .4s ease; }
.cnt-kw-count { font-size: .78rem; color: var(--gray); min-width: 70px; text-align: right; }
.cnt-speed-info {
    display: flex; align-items: center; gap: 8px;
    font-size: .80rem; color: var(--gray);
    margin-top: 12px; padding: 10px 14px;
    background: var(--bg-surface);
    border-radius: 8px; border: 1px solid var(--border);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — 1024px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
    .games-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
    .gh-f3, .gh-f4 { display: none; }
    .game-modal { max-width: 96vw; height: calc(100vh - 16px); max-height: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — 768px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .game-hero   { padding: 120px 0 70px; min-height: auto; }
    .gh-title    { font-size: 2rem; }
    .gh-sub      { font-size: .98rem; }
    .gh-stat-n   { font-size: 1.6rem; }
    .gh-div      { display: none; }
    .gh-stats    { gap: 18px; }
    .gh-float    { width: 48px; height: 48px; font-size: 1.35rem; }
    .gh-f5, .gh-f6 { display: none; }
    .games-grid  { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
    .gst-title   { font-size: 1.9rem; }
    .game-modal-overlay { padding: 8px; }
    .game-modal  { border-radius: 18px; height: calc(100vh - 16px); max-height: none; }
    .game-modal-header { padding: 13px 16px; min-height: 60px; }
    .game-modal-footer { padding: 12px 16px; min-height: 58px; }
    .gm-modal-title { font-size: 14px; }
    .game-modal-play-btn { padding: 10px 20px; font-size: 13px; }
    .nav-links   { display: none; position: fixed; top: 70px; left: 0; right: 0; background: rgba(8,8,26,.98); flex-direction: column; padding: 20px; gap: 5px; border-bottom: 1px solid var(--border); }
    .nav-links.active { display: flex; }
    .menu-toggle { display: block; }
    .search-wrapper { display: none; }
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
    .newsletter-inner { flex-direction: column; align-items: flex-start; }
    .newsletter-form { min-width: unset; width: 100%; }
    .footer-body { padding: 50px 0 40px; }
    .tools-section { padding: 70px 0 90px; }
    .tools-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
    .ts-title { font-size: 1.9rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — 600px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 600px) {
    .game-modal-overlay { padding: 0; align-items: flex-end; }
    .game-modal { border-radius: 20px 20px 0 0; height: 96vh; max-height: none; width: 100%; max-width: 100%; }
    .game-modal-footer { flex-direction: column; gap: 10px; align-items: stretch; }
    .game-modal-play-btn { width: 100%; justify-content: center; }
    .tool-modal-overlay { padding: 0; align-items: flex-end; }
    .tool-modal { border-radius: 20px 20px 0 0; height: 96vh; max-height: none; width: 100%; max-width: 100%; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — 540px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 540px) {
    .game-hero  { padding: 110px 0 55px; }
    .gh-title   { font-size: 1.8rem; }
    .gh-sub     { font-size: .92rem; }
    .gh-float   { display: none; }
    .gh-tabs    { gap: 7px; }
    .gh-tab     { padding: 7px 13px; font-size: .80rem; }
    .gh-tab i   { display: none; }
    .games-grid { grid-template-columns: 1fr; gap: 14px; }
    .play-btn   { margin: 0 16px; padding: 12px 16px; width: calc(100% - 32px); }
    .card-top, .card-body-content { padding-left: 16px; padding-right: 16px; }
    .gst-title  { font-size: 1.7rem; }
    .game-modal-header { padding: 12px 14px; gap: 10px; min-height: 56px; }
    .gm-modal-icon { width: 38px; height: 38px; font-size: 1.1rem; }
    .gm-modal-title { font-size: 13px; }
    .gm-modal-subtitle { display: none; }
    .tools-section { padding: 60px 0 70px; }
    .tools-grid { grid-template-columns: 1fr; gap: 14px; }
    .tc-btn   { padding: 12px 16px; }
    .tc-top, .tc-body, .tc-footer { padding-left: 16px; padding-right: 16px; }
    .ts-title { font-size: 1.7rem; }
    .ts-tag   { font-size: .72rem; padding: 6px 14px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — 380px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 380px) {
    .gh-title   { font-size: 1.6rem; }
    .gh-tag     { font-size: .72rem; padding: 6px 14px; }
    .play-btn   { font-size: .84rem; }
    .gst-title  { font-size: 1.5rem; }
    .game-modal { height: 100vh; border-radius: 0; }
    .game-modal-overlay { padding: 0; }
    .ts-title { font-size: 1.5rem; }
    .tc-title { font-size: .96rem; }
}

:focus { outline: none; }
:focus-visible { outline: 3px solid rgba(124,77,255,0.22); outline-offset: 4px; }
/* ══════════════════════════════════════════════
   MOBILE FRIENDLY IMPROVEMENTS
   (Added for full mobile optimization)
══════════════════════════════════════════════ */

/* ── Touch target improvements ── */
@media (max-width: 768px) {
    /* Larger touch targets for all interactive elements */
    button, a, input, select, textarea, .play-btn, .gh-tab, .gh-cta, .gh-secondary {
        -webkit-tap-highlight-color: transparent;
    }

    /* Prevent zoom on input focus (iOS) */
    input, select, textarea, .dc-input, .dc-textarea, .dc-select {
        font-size: 16px !important;
    }

    /* Better scroll on modals */
    .game-modal-body, .tool-modal-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Typing stats — stack on mobile */
    .typing-stats {
        flex-direction: column;
        gap: .75rem;
    }
    .stat-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .6rem 1rem;
    }
    .stat-box .stat-value { font-size: 1.3rem; }

    /* Quiz options — single column on mobile */
    .quiz-options {
        grid-template-columns: 1fr;
        gap: .6rem;
    }
    .quiz-option {
        padding: .85rem 1rem;
        font-size: .88rem;
    }

    /* Game modal body padding reduced */
    .game-modal-body {
        padding: 16px;
    }

    /* Score display — wrap on mobile */
    .score-display {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .score-box {
        flex: 1;
        min-width: 100px;
        padding: .75rem 1rem;
    }

    /* Result stats wrap */
    .result-stats {
        gap: .6rem;
    }
    .result-stat {
        padding: .6rem .8rem;
    }

    /* Result actions stack */
    .result-actions {
        flex-direction: column;
        gap: .5rem;
    }
    .result-actions .game-modal-btn {
        width: 100%;
    }

    /* Game modal meta wrap better */
    .game-modal-meta {
        gap: 10px;
    }
    .game-modal-meta span {
        font-size: 11px;
    }

    /* Math input larger on mobile */
    .math-input {
        font-size: 1.2rem;
        padding: .65rem;
    }
    .math-problem h2 {
        font-size: 2rem;
    }

    /* Tools modal */
    .tool-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .tool-modal {
        border-radius: 22px 22px 0 0;
        height: 95vh;
        max-height: none;
        width: 100%;
        max-width: 100%;
    }

    /* DC Tool body */
    .dc-tool__body {
        padding: 16px 16px 24px;
    }
    .dc-tool__header {
        padding: 14px 16px;
    }

    /* DC Row — force wrap on small screens */
    .dc-row {
        flex-direction: column;
        gap: 10px;
    }

    /* DC Actions */
    .dc-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .dc-btn {
        flex: 1;
        min-width: 120px;
        justify-content: center;
        padding: 11px 14px;
        font-size: .84rem;
    }

    /* Blocks container — prevent horizontal overflow */
    .blocks-container {
        max-width: 100%;
    }
    .block {
        font-size: .82rem;
        padding: .8rem 1rem;
        word-break: break-word;
    }

    /* Typing area */
    .typing-area {
        padding: 1rem;
    }
    .typing-target {
        font-size: .95rem;
    }
    .typing-input-field {
        font-size: 16px; /* prevent iOS zoom */
        padding: .65rem .8rem;
    }

    /* Scroll top button position on mobile */
    .scroll-top-btn {
        bottom: 20px;
        right: 16px;
        width: 42px;
        height: 42px;
    }

    /* Navbar - body scroll lock improvements */
    body.nav-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    /* Footer stats - better spacing */
    .footer-stats {
        gap: 8px;
    }
    .f-stat-pill {
        padding: 8px 12px;
    }

    /* Container padding for very small screens */
    .container {
        padding: 0 16px;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — 480px (small phones)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 480px) {
    /* Game hero padding tighter */
    .game-hero {
        padding: 100px 0 50px;
    }

    /* Hero CTA buttons stack */
    .gh-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .gh-cta, .gh-secondary {
        justify-content: center;
        padding: 13px 20px;
    }

    /* Hero stats row — smaller */
    .gh-stats {
        gap: 12px;
    }
    .gh-stat-n {
        font-size: 1.4rem;
    }

    /* Difficulty tabs — scroll horizontally */
    .gh-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-bottom: 6px;
        gap: 8px;
        scrollbar-width: none;
    }
    .gh-tabs::-webkit-scrollbar { display: none; }
    .gh-tab {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 8px 14px;
        font-size: .78rem;
    }

    /* Game card improvements */
    .game-card {
        border-radius: 16px;
    }
    .card-top {
        padding: 16px 16px 0;
        margin-bottom: 12px;
    }
    .card-body-content {
        padding: 0 16px;
        margin-bottom: 14px;
    }
    .card-title {
        font-size: .97rem;
    }
    .card-sub {
        font-size: .83rem;
    }
    .play-btn {
        margin: 0 16px;
        padding: 12px 16px;
        width: calc(100% - 32px);
        font-size: .87rem;
    }
    .icon {
        width: 46px;
        height: 46px;
        font-size: 1.35rem;
        border-radius: 12px;
    }
    .gct {
        font-size: .63rem;
        padding: 2px 8px;
    }

    /* Tool card improvements */
    .tool-card {
        border-radius: 16px;
    }
    .tc-top {
        padding: 16px 16px 0;
    }
    .tc-body {
        padding: 14px 16px;
    }
    .tc-footer {
        padding: 0 16px 16px;
    }
    .tc-title {
        font-size: .95rem;
    }
    .tc-sub {
        font-size: .82rem;
    }
    .tc-btn {
        padding: 11px 14px;
        font-size: .84rem;
    }

    /* DC tools — full width select */
    .dc-select {
        width: 100%;
    }

    /* QR tool canvas/img sizing */
    .dc-preview canvas,
    .dc-preview img {
        max-width: 100%;
        height: auto;
    }

    /* Gradient tool presets */
    .grad-presets-row {
        gap: 8px;
    }
    .grad-preset-swatch {
        width: 44px;
        height: 30px;
    }

    /* Gradient stop rows */
    .grad-stop-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .grad-stop-row .dc-input:not(.dc-color) {
        width: 100% !important;
    }

    /* Timestamp live display */
    .ts-live {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .ts-live__val {
        font-size: 1rem;
    }

    /* Markdown split — stacked on small phones */
    .md-split {
        flex-direction: column;
        height: auto;
    }
    .md-editor {
        min-height: 160px;
    }
    .md-divider {
        width: 100%;
        height: 1px;
    }

    /* Counter stats — grid on small screens */
    .cnt-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px;
    }
    .cnt-divider { display: none; }
    .cnt-stat {
        padding: 8px;
        background: rgba(0,0,0,.2);
        border-radius: 10px;
    }
    .cnt-stat__n { font-size: 1.3rem; }

    /* Footer */
    .footer-body { padding: 40px 0 30px; }
    .footer-grid { gap: 28px; }
    .footer-col-title { margin-bottom: 14px; }
    .footer-socials { gap: 8px; }
    .f-social {
        width: 36px;
        height: 36px;
        font-size: .85rem;
        border-radius: 10px;
    }

    /* Section titles */
    .gst-title { font-size: 1.65rem; }
    .ts-title  { font-size: 1.65rem; }

    /* Modal footer meta — hide some meta labels on very small */
    .game-modal-meta .meta-free {
        display: none;
    }

    /* Game section padding */
    .games-section { padding: 60px 0 80px; }
    .tools-section { padding: 55px 0 70px; }
    .games-section-title { padding: 0 0 36px; }
    .tools-section-title { padding-bottom: 36px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — 360px (very small)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 360px) {
    .gh-title { font-size: 1.5rem; }
    .gh-tag { font-size: .68rem; padding: 5px 12px; }
    .gst-title { font-size: 1.4rem; }
    .ts-title { font-size: 1.4rem; }
    .game-modal-body { padding: 12px; }
    .dc-tool__body { padding: 12px 12px 20px; }
    .dc-btn { padding: 10px 12px; font-size: .8rem; }
    .cnt-stats { grid-template-columns: 1fr 1fr; }
    .container { padding: 0 12px; }
    .play-btn { font-size: .82rem; padding: 11px 14px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LANDSCAPE PHONE FIX
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-height: 500px) and (orientation: landscape) {
    .game-hero {
        padding: 80px 0 40px;
        min-height: auto;
    }
    .gh-float { display: none; }
    .gh-blob  { display: none; }
    .game-modal {
        height: 100vh;
        border-radius: 0;
    }
    .game-modal-overlay {
        padding: 0;
    }
    .tool-modal {
        height: 100vh;
        border-radius: 0;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SAFE AREA INSETS (iPhone notch/home bar)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 600px) {
        .game-modal,
        .tool-modal {
            padding-bottom: env(safe-area-inset-bottom);
        }
        .game-modal-footer,
        .footer-bottom-bar {
            padding-bottom: calc(14px + env(safe-area-inset-bottom));
        }
        .scroll-top-btn {
            bottom: calc(20px + env(safe-area-inset-bottom));
        }
    }
}

/* ===== MOBILE TYPING FIX ===== */
.mobile-hidden-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: none;
    outline: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    font-size: 16px; /* prevent iOS zoom */
    z-index: -1;
}

.typing-target {
    position: relative;
    cursor: text;
}

.typing-target:focus,
.typing-target.mobile-active {
    outline: 2px solid var(--primary, #6c63ff);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Mobile tap hint */
.mobile-tap-hint {
    display: none;
    font-size: 0.78rem;
    color: var(--gray, #aaa);
    text-align: center;
    margin-top: 6px;
    animation: pulse-hint 1.5s ease-in-out infinite;
}

@keyframes pulse-hint {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@media (pointer: coarse) {
    .mobile-tap-hint { display: block; }
}