@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap";
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.z-40{z-index:40}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.border{border-style:var(--tw-border-style);border-width:1px}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}:root{--bg-primary:#0a0f0a;--bg-secondary:#0d140d;--bg-card:#111a11;--bg-hover:#162016;--accent:#22c55e;--accent-hover:#16a34a;--accent-2:#06b6d4;--accent-3:#a3e635;--text-primary:#f0faf0;--text-secondary:#7a9a7a;--border:#22c55e1f;--navbar-h:60px;--cats-h:56px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);font-family:Nunito,sans-serif;overflow-x:hidden}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:#1a3a1a;border-radius:3px}.navbar{height:var(--navbar-h);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);z-index:60;background:#0a0f0af5;align-items:center;gap:12px;padding:0 16px;display:flex;position:fixed;top:0;left:0;right:0}.nav-logo{flex-shrink:0;align-items:center;text-decoration:none;display:flex}.nav-search{flex-shrink:0;position:relative}.nav-search input{border:1px solid var(--border);color:var(--text-primary);background:#ffffff0f;border-radius:20px;outline:none;width:180px;padding:7px 14px 7px 34px;font-family:Nunito,sans-serif;font-size:13px;transition:width .3s,border-color .2s}.nav-search input:focus{border-color:var(--accent);width:240px}.nav-search input::placeholder{color:var(--text-secondary)}.nav-search-icon{color:var(--text-secondary);pointer-events:none;font-size:14px;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.nav-icon-btn{border:1px solid var(--border);cursor:pointer;width:36px;height:36px;color:var(--text-secondary);background:#ffffff0f;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;text-decoration:none;transition:all .2s;display:flex;position:relative}.nav-icon-btn:hover{border-color:var(--accent);color:var(--accent);background:#22c55e1f}.btn-login{border:1.5px solid var(--accent);color:var(--accent);cursor:pointer;background:0 0;border-radius:20px;flex-shrink:0;align-items:center;gap:6px;padding:7px 18px;font-family:Nunito,sans-serif;font-size:13px;font-weight:700;text-decoration:none;transition:all .2s;display:flex}.btn-login:hover{background:var(--accent);color:#000}.btn-signup{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#000;cursor:pointer;border:none;border-radius:20px;flex-shrink:0;align-items:center;gap:6px;padding:7px 18px;font-family:Nunito,sans-serif;font-size:13px;font-weight:800;text-decoration:none;transition:opacity .2s;display:flex}.btn-signup:hover{opacity:.9}.cat-bar{top:var(--navbar-h);height:var(--cats-h);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:55;scrollbar-width:none;background:#0a0f0af2;align-items:center;gap:4px;padding:0 16px;display:flex;position:fixed;left:0;right:0;overflow-x:auto}.cat-bar::-webkit-scrollbar{display:none}.cat-item{cursor:pointer;border:1.5px solid #0000;border-radius:12px;flex-direction:column;flex-shrink:0;align-items:center;gap:4px;padding:6px 16px;text-decoration:none;transition:all .15s;display:flex}.cat-item:hover{background:#22c55e14;border-color:#22c55e33}.cat-item.active{border-color:var(--accent);background:#22c55e1f}.cat-icon-wrap{background:#ffffff0f;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:all .15s;display:flex}.cat-item.active .cat-icon-wrap,.cat-item:hover .cat-icon-wrap{background:#22c55e26}.cat-label{color:var(--text-secondary);font-size:11px;font-weight:700;transition:color .15s}.cat-item:hover .cat-label,.cat-item.active .cat-label{color:var(--accent)}.left-drawer-trigger{z-index:49;width:4px;position:fixed;top:0;bottom:0;left:0}.left-drawer{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--border);z-index:70;background:#0a0f0afa;flex-direction:column;width:260px;padding:24px 0;transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.left-drawer.open{transform:translate(0)}.drawer-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:69;opacity:0;pointer-events:none;background:#0009;transition:opacity .28s;position:fixed;inset:0}.drawer-overlay.open{opacity:1;pointer-events:all}.drawer-logo{border-bottom:1px solid var(--border);margin-bottom:16px;padding:0 20px 24px}.drawer-link{color:var(--text-secondary);border-left:3px solid #0000;align-items:center;gap:12px;padding:11px 20px;font-size:14px;font-weight:600;text-decoration:none;transition:all .15s;display:flex}.drawer-link:hover{color:var(--text-primary);border-left-color:var(--accent);background:#22c55e0f}.main-wrap{padding-top:calc(var(--navbar-h) + var(--cats-h));min-height:100vh}.games-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;display:grid}.game-card{background:var(--bg-card);cursor:pointer;border:1px solid #0000;border-radius:14px;text-decoration:none;transition:transform .2s,box-shadow .2s;display:block;overflow:hidden}.game-card:hover{border-color:#22c55e33;transform:translateY(-4px);box-shadow:0 12px 32px #00000080}.game-card-thumb{aspect-ratio:4/3;background:var(--bg-hover);position:relative;overflow:hidden}.game-card-thumb img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.game-card:hover .game-card-thumb img{transform:scale(1.06)}.game-card-play{opacity:0;background:#00000073;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.game-card:hover .game-card-play{opacity:1}.play-circle{background:linear-gradient(135deg, var(--accent), var(--accent-2));border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:18px;display:flex;box-shadow:0 0 24px #22c55e80}.game-card-badge{text-transform:uppercase;letter-spacing:.04em;border-radius:20px;padding:2px 8px;font-size:10px;font-weight:800;position:absolute;top:7px;left:7px}.badge-hot{color:#fff;background:#ef4444}.badge-new{background:var(--accent);color:#000}.badge-top{color:#000;background:#f59e0b}.game-card-info{padding:10px 11px 12px}.game-card-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700;overflow:hidden}.game-card-cat{color:var(--text-secondary);text-transform:capitalize;margin-top:2px;font-size:11px}.hero-grid{border-radius:16px;grid-template-rows:160px 160px;grid-template-columns:2fr 1fr 1fr;gap:8px;margin-bottom:28px;display:grid;overflow:hidden}.hero-main{grid-row:1/3}.hero-cell{cursor:pointer;border-radius:4px;position:relative;overflow:hidden}.hero-cell img{object-fit:cover;width:100%;height:100%;transition:transform .35s}.hero-cell:hover img{transform:scale(1.05)}.hero-overlay{background:linear-gradient(#0000,#000000d9);padding:20px 16px 14px;position:absolute;bottom:0;left:0;right:0}.hero-title-main{color:#fff;font-family:Space Grotesk,sans-serif;font-size:24px;font-weight:800}.hero-title-sub{color:#fff;font-size:13px;font-weight:700}.sec-heading{color:var(--text-primary);align-items:center;gap:8px;margin-bottom:14px;font-family:Space Grotesk,sans-serif;font-size:17px;font-weight:700;display:flex}.modal-backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:200;background:#000000c7;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-box{background:linear-gradient(160deg,#0d1f0d 0%,#0a150a 100%);border:1px solid #22c55e33;border-radius:24px;width:100%;max-width:400px;padding:36px 32px;position:relative;box-shadow:0 32px 80px #000000b3,0 0 60px #22c55e0f}.modal-glow{background:linear-gradient(90deg,#0000,#22c55e,#0000);width:55%;height:2px;position:absolute;top:-1px;left:50%;transform:translate(-50%)}.social-btn{cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:10px;width:100%;padding:12px;font-family:Nunito,sans-serif;font-size:14px;font-weight:700;transition:opacity .2s,transform .1s;display:flex}.social-btn:hover{opacity:.92;transform:translateY(-1px)}.social-btn:active{transform:translateY(0)}.social-google{color:#1a1a1a;background:#fff;border:1px solid #e0e0e0}.social-facebook{color:#fff;background:#1877f2}.social-apple{color:#fff;background:#000;border:1px solid #333}.auth-divider{color:var(--text-secondary);align-items:center;gap:12px;margin:18px 0;font-size:12px;font-weight:600;display:flex}.auth-divider:before,.auth-divider:after{content:"";background:var(--border);flex:1;height:1px}.auth-input{width:100%;color:var(--text-primary);background:#ffffff0d;border:1px solid #22c55e2e;border-radius:12px;outline:none;margin-bottom:10px;padding:13px 16px;font-family:Nunito,sans-serif;font-size:14px;transition:border-color .2s}.auth-input:focus{border-color:var(--accent)}.auth-input::placeholder{color:var(--text-secondary)}.btn-continue{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#000;cursor:pointer;border:none;border-radius:12px;width:100%;padding:13px;font-family:Nunito,sans-serif;font-size:14px;font-weight:800;transition:opacity .2s;box-shadow:0 4px 20px #22c55e4d}.btn-continue:hover{opacity:.9}.btn-continue:disabled{opacity:.5;cursor:not-allowed}@media (max-width:768px){.hero-grid{grid-template-rows:160px 100px;grid-template-columns:1fr 1fr}.hero-main{grid-area:1/1/auto/3}.games-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.nav-search input{width:130px}.nav-search input:focus{width:170px}}.game-card-wrap:hover .play-hover,div:hover>div>.play-hover{opacity:1!important}.main-wrap{min-height:100vh;padding-top:160px}@media (max-width:768px){.main-wrap{padding-top:132px}}div:hover>div>.play-overlay{opacity:1!important}.mobile-bottom-nav{display:none}@media (max-width:768px){.cat-bar-desktop{display:none!important}.main-wrap{padding-top:64px!important;padding-bottom:70px!important}.mobile-bottom-nav{backdropFilter:blur(20px);z-index:60;background:#040a04fa;border-top:1px solid #22c55e1f;justify-content:space-around;align-items:center;height:60px;padding:0 8px;position:fixed;bottom:0;left:0;right:0;display:flex!important}.mob-nav-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:10px;flex-direction:column;align-items:center;gap:3px;min-width:56px;padding:6px 12px;font-family:Nunito,sans-serif;font-size:10px;font-weight:700;text-decoration:none;transition:all .15s;display:flex}.mob-nav-btn.active{color:#22c55e}.mob-nav-btn svg{flex-shrink:0}.games-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}.hero-banner-wrap{height:220px!important}.hero-title-main{font-size:20px!important}.nav-search{display:none!important}.mob-cat-scroll{scrollbar-width:none;background:#040a04f2;border-bottom:1px solid #22c55e14;gap:8px;padding:10px 16px;display:flex;overflow-x:auto}.mob-cat-scroll::-webkit-scrollbar{display:none}.mob-cat-pill{background:var(--bg-card);border:1.5px solid #0000;border-radius:12px;flex-direction:column;flex-shrink:0;align-items:center;gap:4px;padding:8px 12px;text-decoration:none;transition:all .15s;display:flex}.mob-cat-pill.active{background:#22c55e1a;border-color:#22c55e}.mob-cat-pill span{color:var(--text-secondary);font-size:10px;font-weight:700}.mob-cat-pill.active span{color:#22c55e}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}