:root{--dark:#013B11} :root{--light:#A8FFC1} :root{--white:#FFFFFF} :root{--black:#000000}
        *{box-sizing:border-box;font-family:'Nunito',sans-serif;margin:0;padding:0}
        html,body{background:var(--white);color:var(--black);height:100%}
        #wrap{max-width:100%;width:100%;margin:18px auto;border-radius:12px;overflow:hidden}
        header.carousel{position:relative;aspect-ratio:191/100;overflow:hidden;background:#eee;}
        .carousel .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
            transition:opacity .8s ease;opacity:0}
        .carousel .slide.active{opacity:1}
        .carousel img{width:100%;height:100%;object-fit:cover}
        nav.topnav{background:var(--dark);display:flex;gap:5px;padding:4px 6px;overflow:auto;scrollbar-width:none;position:sticky;top:0;z-index:1000;font-size:14px;justify-content:center;border-radius:0 0 19px 19px;}
        main{padding:14px;background:var(--white)}
        nav.topnav::-webkit-scrollbar{display:none}
        nav.topnav a{color:var(--white);text-decoration:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px}
        nav.topnav a:focus,nav.topnav a.active{outline:1px dotted var(--light);transform:translateY(-4px);
            padding-top:3px;margin-top:7px;} 
        nav.topnav i {font-size:14px;}
        nav.topnav a i {font-size:14px;}
        nav.topnav.fixed { position: fixed; top: 0; left: 0; right: 0; border-radius: 0 0 19px 19px; z-index: 1000; }
        .hamburger{display:none;align-items:center;justify-content:center;padding:8px;border-radius:8px;background:var(--dark);color:var(--white);cursor:pointer}
        .offcanvas{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:none;align-items:flex-start;justify-content:flex-end;padding:40px;z-index:200}
        .offcanvas .panel{width:260px;background:var(--white);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
        .offcanvas a{color:var(--dark);text-decoration:none;display:flex;gap:12px;align-items:center;padding:10px;border-radius:8px}
        .meta-row{margin-top:5px;padding:6px 10px}
        .datetime{font-size:12px;color:var(--black);margin-bottom:6px;justify-content:center;align-content:center;}
        .sharebtn{display:block;justify-content:center;align-content:center;}
        main{padding:14px;background:var(--white)}
        .gamea{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
        .roqox{background:var(--white);border-radius:17px;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px dotted var(--dark);transition:transform .15s ease}
        .roqox:hover{transform:translateY(-6px)}
        .roqox a{display:block;text-decoration:none;color:var(--black);width:100%}
        .roqox .thumb{width:100%;aspect-ratio:3/2;border-radius:9px 9px 0 0;overflow:hidden;background:#f0f0f0;display:flex;align-items:center;justify-content:center}
        .roqox .thumb img{width:100%;height:100%;object-fit:cover}
        .roqox .label{font-size:14px;margin-top:-5px;padding:3px 7px;border-radius:999px;background:var(--white);display:inline-block;font-weight:600}
        .tabs{margin-top:16px}
        .tabcontent{display:none;padding:12px;border-radius:10px;font-size:14px;background:linear-gradient(180deg,rgba(168,255,193,0.06),rgba(1,59,17,0.02));min-height:120px}
        .tabcontent.active{display:block}
        footer{padding:12px;text-align:center;color:var(--white);font-size:12px;background-color:#013B11;}
        @media (max-width:900px){.gamea{grid-template-columns:repeat(4,1fr)}}
        @media (max-width:700px){.hamburger{display:flex}
        .offcanvas.show{display:flex}.gamea{grid-template-columns:repeat(3,1fr)}}
        @media (max-width:500px){.gamea{grid-template-columns:repeat(2,1fr)}}
        @media (max-width:300px){.gamea{grid-template-columns:repeat(2,1fr)} .roqox .label{font-size:12px}}
        .foac{display:grid;gap:5px;margin-top:14px}
        .foac .col{border:1px dotted var(--light);border-radius:9px;padding:5px}
        .foac .head{padding:3px 5px;font-weight:600;color:var(--black);border-radius:0 0 9px 9px;font-size:15px;}
        .foac .col1 .head{background:var(--light)}
        .foac .col2 .head{background:var(--dark);color:var(--white)}
        .foac .content{font-size:14px}
        @media(min-width:601px){.foac{grid-template-columns:1fr 1fr}}
        @media(max-width:600px){.foac{grid-template-columns:1fr}}
        .roundedbox1 {display:inline-flex; align-items:center; gap:5px; background:#023007; 
            border:1px solid #ddd;border-radius: 50%; padding: 5px 11px; font-size:14px; color: #fff; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);transition: all 0.3s ease; margin-bottom:5px;}
        .rounded-box:hover {background: #023007;color:#33F549;}
        .rounded-box i {font-size: 14px;color: inherit;}
        .fancybox__container .fancybox__slide img {box-shadow: 0 4px 20px rgba(0,0,0,0.35);margin-top:0;}
        .jh-backtop{position:fixed;right:18px;bottom:18px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#0d6b42;color:#fff;border:0;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,0.18);z-index:9999;opacity:0;pointer-events:none;transition:opacity .18s ease;}
        .jh-backtop.show{opacity:1;pointer-events:auto;}
        .jh-backtop.show{opacity:1;visibility:visible;transform:translateY(0)}
        .jh-backtop:focus{outline:3px solid rgba(255,255,255,0.12);box-shadow:0 4px 12px rgba(0,0,0,0.18)}
        @media (max-width:420px){.jh-backtop{width:44px;height:44px;right:12px;bottom:22px;border-radius:9px}}
        @media (prefers-reduced-motion:reduce){
            .jh-backtop,.jh-backtop.show{transition:none}}
        .myframe { width: 100%; height: 1199px; border: none; overflow: auto; }