﻿/* Extracted from games.html inline <style> blocks */

        :root{
            --bg-start:#4a2816;
            --bg-mid:#1d1b22;
            --bg-end:#07142e;
            --text:#E0E0E0;
            --muted:#c7ced9;
            --accent:#f2ab58;
            --accent-bright:#ffd7ad;
            --accent-soft:rgba(242,171,88,.14);
            --accent-soft-strong:rgba(242,171,88,.24);
            --accent-line:rgba(255, 196, 142, .28);
            --accent-line-strong:rgba(255, 196, 142, .52);
            --accent-copper:rgba(181, 109, 58, .22);
            --card:#0d121c;
            --card-2:#111828;
            --border:rgba(255,255,255,.34);
        }
        *{box-sizing:border-box}
        body{
            margin:0;
            min-height:100vh;
            font-family:"Outfit",Arial,Helvetica,sans-serif;
            color:var(--text);
            background:
                radial-gradient(1100px 560px at 8% 12%, rgba(242,171,88,.28), transparent 62%),
                radial-gradient(1000px 520px at 88% 86%, rgba(16,44,90,.34), transparent 64%),
                linear-gradient(130deg,var(--bg-start) 0%,var(--bg-mid) 34%,var(--bg-end) 100%);
        }
        .page{
            width:min(1100px, calc(100% - 2rem));
            margin:96px auto 60px;
        }
        .menu{
            position:fixed;
            top:18px;
            left:clamp(4px,2.2vw,28px);
            z-index:30;
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin:0;
        }
        .menu a{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.5rem .85rem;
            border-radius:999px;
            border:1px solid rgba(255, 196, 142, .5);
            color:#ffd7ad;
            text-decoration:none;
            background:linear-gradient(145deg, rgba(26, 18, 12, .9), rgba(10, 12, 17, .92));
            font-size:.8rem;
            line-height:1;
            transition:transform .16s ease, border-color .16s ease, color .16s ease;
        }
        .menu a:hover{
            transform:translateY(-1px);
            border-color:rgba(255, 196, 142, .9);
            color:#ffe2c2;
        }
        .page_intro{
            width:min(74rem, 100%);
            margin:0 auto 1rem;
            position:relative;
            padding:.68rem 0 .76rem;
        }
        .page_intro::before,
        .page_intro::after{
            content:"";
            position:absolute;
            width:100vw;
            left:50%;
            transform:translateX(-50%);
            height:1px;
            background:linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 196, 142, .06) 14%,
                rgba(255, 196, 142, .12) 50%,
                rgba(255, 196, 142, .06) 86%,
                transparent 100%
            );
            pointer-events:none;
        }
        .page_intro::before{
            top:0;
        }
        .page_intro::after{
            bottom:0;
        }
        .page_badge{
            display:inline-flex;
            align-items:center;
            gap:.3rem;
            margin:0 0 .45rem;
            padding:.26rem .62rem;
            border-radius:999px;
            border:1px solid var(--accent-line-strong);
            background:linear-gradient(145deg, rgba(27, 20, 14, .74), rgba(14, 17, 24, .7));
            color:var(--accent-bright);
            font-family:"Sora","Outfit",Arial,Helvetica,sans-serif;
            font-size:.72rem;
            letter-spacing:.08em;
            text-transform:uppercase;
            box-shadow:0 0 0 1px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255,255,255,.04);
        }
        .page_badge .material-symbols-outlined{
            font-size:1rem;
            line-height:1;
            color:#ffc27f;
        }
        .page_title{
            margin:0;
            color:#f7f4ef;
            font-family:"Sora","Outfit",Arial,Helvetica,sans-serif;
            font-weight:420;
            font-size:clamp(1.14rem,.98rem + .82vw,1.62rem);
            line-height:1.14;
            letter-spacing:.01em;
        }
        .page_text{
            margin:.55rem 0 0;
            color:#9ca3af;
            max-width:62ch;
            font-family:"IBM Plex Sans","Inter","Segoe UI",sans-serif;
            font-size:clamp(.92rem,.84rem + .32vw,1.02rem);
            line-height:1.62;
        }
        .games_search{
            width:min(52rem, 100%);
            margin:.9rem auto 0;
            padding:.82rem .9rem;
            border-radius:16px;
            border:1px solid rgba(255, 196, 142, .18);
            background:
                linear-gradient(160deg, rgba(18, 18, 20, .74), rgba(12, 15, 21, .8)),
                radial-gradient(circle at 14% 8%, rgba(242,171,88,.1), transparent 52%),
                radial-gradient(circle at 88% 100%, rgba(160, 94, 44, .08), transparent 46%);
            box-shadow:
                0 14px 30px rgba(0, 0, 0, .24),
                0 0 0 1px rgba(255, 196, 142, .04),
                inset 0 1px 0 rgba(255, 255, 255, .06);
            backdrop-filter:blur(10px) saturate(125%);
            -webkit-backdrop-filter:blur(10px) saturate(125%);
        }
        .games_search_label{
            display:inline-flex;
            align-items:center;
            gap:.36rem;
            color:#f6d1ab;
            font-family:"Sora","Outfit",Arial,Helvetica,sans-serif;
            font-size:.8rem;
            font-weight:600;
            letter-spacing:.03em;
        }
        .games_search_label .material-symbols-outlined{
            font-size:1rem;
            line-height:1;
            color:#efb777;
        }
        .games_search_row{
            margin-top:.5rem;
            display:flex;
            align-items:center;
            gap:.5rem;
        }
        .games_search_input{
            width:100%;
            min-height:42px;
            border-radius:12px;
            border:1px solid rgba(255, 196, 142, .24);
            background:linear-gradient(150deg, rgba(18, 20, 24, .94), rgba(11, 14, 20, .96));
            color:#f3ede4;
            font-family:"IBM Plex Sans","Inter","Segoe UI",sans-serif;
            font-size:.94rem;
            font-weight:500;
            letter-spacing:.01em;
            padding:.56rem .76rem;
            outline:none;
            transition:border-color .16s ease, box-shadow .16s ease;
        }
        .games_search_input::placeholder{
            color:rgba(229, 210, 187, .54);
        }
        .games_search_input:focus{
            border-color:rgba(255, 196, 142, .64);
            box-shadow:0 0 0 3px rgba(242,171,88,.16);
        }
        .games_search_reset{
            width:42px;
            min-width:42px;
            height:42px;
            border-radius:12px;
            border:1px solid rgba(255, 196, 142, .24);
            background:linear-gradient(145deg, rgba(27, 22, 18, .86), rgba(12, 15, 21, .88));
            color:#f0d9bf;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            transition:transform .15s ease, border-color .15s ease, background .15s ease;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        }
        .games_search_reset .material-symbols-outlined{
            font-size:1.15rem;
            line-height:1;
        }
        .games_search_reset:hover{
            transform:translateY(-1px);
            border-color:rgba(255, 196, 142, .46);
            background:linear-gradient(145deg, rgba(38, 28, 21, .92), rgba(15, 18, 24, .92));
        }
        .games_search_meta{
            margin:.48rem 0 0;
            color:#cbb8a2;
            font-family:"IBM Plex Sans","Inter","Segoe UI",sans-serif;
            font-size:.82rem;
            line-height:1.35;
        }
        .cards{
            display:flex;
            flex-direction:column;
            gap:16px;
        }
        .cards .card[hidden]{
            display:none !important;
        }
        .card{
            display:flex;
            align-items:center;
            gap:20px;
            padding:20px 24px;
            border-radius:18px;
            border:1px solid var(--border);
            background:linear-gradient(150deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
            backdrop-filter:blur(10px) saturate(125%);
            -webkit-backdrop-filter:blur(10px) saturate(125%);
            box-shadow:
                0 14px 30px rgba(0,0,0,.24),
                inset 0 1px 0 rgba(255,255,255,.24);
            color:var(--text);
            text-decoration:none;
            transition:transform .16s ease, border-color .16s ease, background .16s ease;
        }
        .card:hover{
            transform:translateY(-1px);
            border-color:rgba(255,255,255,.56);
            background:linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
        }
        .card_main{
            display:flex;
            align-items:center;
            gap:20px;
            flex:1;
            min-width:0;
        }
        .card_media{
            width:92px;
            min-width:92px;
            height:92px;
            border-radius:12px;
            border:1px solid rgba(255,255,255,.3);
            display:flex;
            align-items:center;
            justify-content:center;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
        }
        .card_media .material-symbols-outlined{
            font-size:42px;
            color:#ffd49f;
        }
        .card_media_spaceship{
            background:linear-gradient(155deg, rgba(71, 34, 111, .45), rgba(16, 22, 52, .78));
        }
        .card_media_reaction{
            background:linear-gradient(155deg, rgba(28, 99, 158, .45), rgba(13, 31, 55, .78));
        }
        .card_media_labyrinth{
            background:linear-gradient(155deg, rgba(79, 26, 40, .48), rgba(8, 16, 29, .82));
        }
        .card_head{
            display:flex;
            align-items:center;
            gap:8px;
        }
        .card_head .material-symbols-outlined{
            font-size:22px;
            color:#f2ab58;
        }
        .card_title{
            margin:0;
            font-size:20px;
            font-weight:600;
            line-height:1.2;
            letter-spacing:.01em;
        }
        .card_body{
            display:flex;
            flex-direction:column;
            gap:6px;
            max-width:600px;
            min-width:0;
        }
        .card_text{
            margin:0;
            max-width:600px;
            font-size:14px;
            line-height:1.5;
            font-weight:500;
            color:#E0E0E0;
            opacity:.7;
        }
        .card_cta{
            margin-left:auto;
            white-space:nowrap;
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 14px;
            border-radius:10px;
            border:1px solid rgba(255,219,173,.6);
            color:#ffe3bf;
            text-decoration:none;
            font-weight:600;
            font-size:14px;
            background:linear-gradient(140deg, rgba(52,33,19,.58), rgba(18,28,47,.64));
        }
        .mobile_quick_nav{
            display:none;
        }
        @media (max-width:1024px){
            body{
                overflow-x:hidden;
            }
            .menu{
                display:none;
            }
            .page{
                margin-top:72px;
                display:block !important;
                visibility:visible !important;
                opacity:1 !important;
                position:relative;
                z-index:1;
            }
            .page_intro{
                margin-bottom:.82rem;
            }
            .page_text{
                font-size:.92rem;
                line-height:1.56;
            }
            .games_search{
                margin-top:.72rem;
                padding:.7rem .7rem .64rem;
                border-radius:14px;
            }
            .games_search_label{
                font-size:.74rem;
            }
            .games_search_row{
                gap:.42rem;
            }
            .games_search_input{
                min-height:40px;
                font-size:.92rem;
            }
            .games_search_reset{
                width:40px;
                min-width:40px;
                height:40px;
            }
            .games_search_meta{
                font-size:.78rem;
            }
            .page > *{
                visibility:visible !important;
                opacity:1 !important;
            }
            .mobile_quick_nav{
                position:fixed;
                top:10px;
                left:10px;
                z-index:60;
                display:flex;
                align-items:center;
                gap:8px;
            }
            .mobile_quick_home{
                width:36px;
                height:36px;
                border-radius:50%;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                border:1px solid rgba(242,176,98,.58);
                background:linear-gradient(145deg, rgba(24,17,15,.86), rgba(13,23,41,.8));
                color:#f0c987;
                text-decoration:none;
                box-shadow:0 7px 16px rgba(3,8,17,.3), 0 1px 0 rgba(255,224,189,.09) inset;
            }
            .mobile_quick_home .material-symbols-outlined{
                font-size:18px;
                line-height:1;
                color:#ffffff;
            }
            .mobile_quick_menu_wrap{
                position:relative;
            }
            .mobile_quick_toggle{
                display:inline-flex;
                align-items:center;
                gap:.3rem;
                padding:.4rem .62rem;
                border-radius:999px;
                border:1px solid rgba(242,176,98,.58);
                background:linear-gradient(145deg, rgba(24,17,15,.86), rgba(13,23,41,.8));
                color:#f0c987;
                font-family:"Outfit",Arial,Helvetica,sans-serif;
                font-size:.74rem;
                letter-spacing:.05em;
                text-transform:uppercase;
                cursor:pointer;
            }
            .mobile_quick_toggle .material-symbols-outlined{
                font-size:19px;
                line-height:1;
                color:#ffffff;
            }
            .mobile_quick_menu{
                position:absolute;
                top:calc(100% + 7px);
                left:0;
                right:auto;
                display:flex;
                flex-direction:column;
                gap:6px;
                min-width:146px;
                padding:8px;
                border-radius:12px;
                border:1px solid rgba(240,170,88,.5);
                background:
                    linear-gradient(155deg, rgba(18,12,10,.9), rgba(8,14,26,.86)),
                    radial-gradient(circle at 14% 10%, rgba(237,141,52,.18), transparent 58%);
                box-shadow:
                    0 12px 26px rgba(4,9,18,.38),
                    0 1px 0 rgba(255,219,180,.09) inset;
                opacity:0;
                transform:translateY(-6px);
                pointer-events:none;
                transition:opacity .16s ease, transform .16s ease;
            }
            .mobile_quick_nav.open .mobile_quick_menu{
                opacity:1;
                transform:translateY(0);
                pointer-events:auto;
            }
            .mobile_quick_item{
                width:100%;
                display:inline-flex;
                align-items:center;
                gap:.34rem;
                padding:.45rem .6rem;
                border-radius:10px;
                border:1px solid rgba(242,176,98,.5);
                background:linear-gradient(145deg, rgba(33,25,22,.7), rgba(19,31,53,.62));
                box-shadow:
                    0 6px 14px rgba(3,8,17,.28),
                    0 1px 0 rgba(255,224,189,.08) inset;
                color:#ffd7ad;
                text-decoration:none;
                font-family:"Outfit",Arial,Helvetica,sans-serif;
                font-size:.74rem;
                letter-spacing:.045em;
                text-transform:uppercase;
            }
            .mobile_quick_item .material-symbols-outlined{
                font-size:18px;
                color:#ffffff;
            }
        }
        @media (max-width:740px){
            .page{margin-top:72px}
            .card{flex-direction:column;align-items:flex-start}
            .card_main{width:100%}
            .card_cta{margin-left:0}
            .card_cta{width:100%;justify-content:center}
        }
    

