/* === Merged: tailwind reset + site.css — zero duplicate rules === */
*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb;margin:0;padding:0}
:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Inter,'Segoe UI',system-ui,sans-serif;font-feature-settings:normal;-webkit-tap-highlight-color:transparent}
body{margin:0;line-height:inherit;background:#fff;color:#1a1a2e}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
iframe{border:none}
hr{height:0;color:inherit;border-top-width:1px}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
b,strong{font-weight:bolder}
button,input,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button,[role=button]{cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent}
:disabled{cursor:default}
ol,ul{list-style:none}
[hidden]{display:none!important}

/* --- Self-hosted Inter Fonts --- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Inter-400.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Inter-500.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/Inter-600.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Inter-700.ttf) format('truetype')}

/* --- Shimmer --- */
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* --- Header --- */
.bg-white{background-color:#fff}.sticky{position:sticky}.top-0{top:0}.z-50{z-index:50}
.border-b{border-bottom:1px solid}.border-gray-200{border-color:#e5e7eb}
.max-w-7xl{max-width:80rem}.max-w-4xl{max-width:56rem}.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}
.flex{display:flex}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}
.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}
.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-gray-600{color:#4b5563}
.no-underline{text-decoration:none}.transition{transition:all .15s cubic-bezier(.4,0,.2,1)}
.hover\:text-purple-600:hover{color:#7c3aed}.hover\:bg-purple-700:hover{background-color:#6d28d9}
.w-8{width:2rem}.h-8{height:2rem}.object-contain{object-fit:contain}
.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh}.block{display:block}
.hidden{display:none}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}
.overflow-hidden{overflow:hidden}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-full{border-radius:9999px}

/* --- Spacing --- */
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}
.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-12{padding-bottom:3rem}
.pt-2{padding-top:.5rem}.pt-6{padding-top:1.5rem}
.mt-1{margin-top:.25rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-8{margin-bottom:2rem}
.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}
.space-y-1\5>:not([hidden])~:not([hidden]){margin-top:.375rem}
.space-y-10>:not([hidden])~:not([hidden]){margin-top:2.5rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}

/* --- Typography --- */
.text-center{text-align:center}
.text-xs{font-size:.75rem;line-height:1rem}.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}
.leading-relaxed{line-height:1.625}
.text-white{color:#fff}.text-purple-600{color:#7c3aed}
.text-yellow-500{color:#eab308}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}

/* --- Colors --- */
.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}
.bg-purple-600{background-color:#7c3aed}.bg-purple-100{background-color:#ede9fe}
.text-purple-400{color:#c084fc}.text-purple-700{color:#6d28d9}

/* --- Grid --- */
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1024px){.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Category pages: force 6 columns on PC regardless of sidebar offset */
@media(min-width:769px){#gameGrid{grid-template-columns:repeat(6,minmax(0,1fr))!important}}

/* --- Breadcrumb --- */
.breadcrumb a{transition:color .2s}.breadcrumb a:hover{color:#6c5ce7}

/* --- Game Logo Cards --- */
.game-logo-card{display:block;border-radius:8px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;background:#f8f9fa;border:none;aspect-ratio:4/3;width:100%;min-width:0;position:relative;text-decoration:none;contain:layout style paint}
.game-logo-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(108,92,231,.2)}
.game-logo-card img{width:100%;height:100%;display:block;object-fit:cover;background:linear-gradient(90deg,#e9ecef 25%,#f0f2f5 50%,#e9ecef 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.game-logo-card img[data-loaded]{background:#e9ecef;animation:none}
.game-logo-card .card-overlay{position:absolute;bottom:0;left:0;right:0;height:45%;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.4) 50%,transparent 100%);pointer-events:none;border-radius:0 0 6px 6px}
.game-logo-card .card-badge{position:absolute;top:4px;left:4px;background:#ff4757;color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:.3px;text-transform:uppercase;pointer-events:none;z-index:2;line-height:1.3}
.game-logo-card .card-badge.trending{background:#fde047;color:#1a1a2e;top:-2px;left:-2px;font-size:13px;padding:3px 9px;border-radius:4px}
.game-logo-card .card-title{position:absolute;bottom:4px;left:5px;right:5px;color:#fff;font-size:8px;font-weight:500;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.7);pointer-events:none;z-index:2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hover-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0);pointer-events:none}
.hover-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* --- Game Frame / Overlay --- */
.game-frame-wrapper{background:#0f0f1a;border-radius:0;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1);position:relative}
.game-frame-wrapper iframe{opacity:1}
.game-play-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.game-play-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(4px) brightness(.5);transform:scale(1.02)}
.game-play-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1rem}
.game-play-thumb{width:140px;height:105px;object-fit:cover;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.4);background:#1a1a2e}
.game-play-btn{background:#facc15;color:#1a1a2e;border:none;padding:.75rem 2rem;border-radius:9999px;font-size:1.25rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;box-shadow:0 4px 16px rgba(0,0,0,.3);transition:transform .2s,background .2s}
.game-play-btn:hover{transform:scale(1.05);background:#fde047}
.game-play-btn:active{transform:scale(.98)}
.game-play-overlay.hidden{display:none}

/* --- Info Bar --- */
.game-info-bar{height:48px;box-sizing:border-box;background:#0f0f1a;color:#fff}
.game-info-bar h1,.game-info-bar .text-gray-900{color:#fff}
.game-info-bar .text-gray-700{color:#d1d5db}
.game-info-bar .text-gray-600{color:#9ca3af}

/* --- Main Layout --- */
.page-wrapper{margin-left:56px}
.main-layout{display:flex;gap:12px;align-items:flex-start;width:100%;justify-content:flex-start}
.main-game-area{flex:1 1 auto;min-width:0;max-width:1063px;margin-left:15px}
.main-game-area .game-block-wrapper{width:100%;background:#0f0f1a;border-radius:8px;overflow:hidden}
.game-frame-wrapper{background:#0f0f1a;border-radius:0;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1);position:relative}
.game-frame-wrapper iframe{opacity:1}
.right-sidebar-area{flex:0 0 290px;min-width:290px;max-width:290px;background:transparent;padding:0;display:flex;flex-direction:column;box-sizing:border-box;height:auto}
.right-sidebar-area .logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:stretch;justify-items:stretch}
.right-sidebar-area .logo-grid .game-logo-card{aspect-ratio:4/3;overflow:hidden;border:none;background:transparent;border-radius:8px;position:relative}
.right-sidebar-area .logo-grid .game-logo-card:hover{border-color:transparent;box-shadow:0 8px 24px rgba(108,92,231,.15)}
.right-sidebar-area .logo-grid .game-logo-card img,.below-games-area .logo-grid .game-logo-card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;background:transparent}
.left-sidebar-area{flex:0 0 162px;min-width:162px;background:transparent;padding:0;display:flex;flex-direction:column;box-sizing:border-box;height:788px}
@media(min-width:1025px) and (max-width:1200px){.left-sidebar-area{flex:0 0 120px;min-width:120px}.right-sidebar-area{flex:0 0 220px;min-width:220px}.main-game-area{max-width:none}}

/* --- Game Nav Sidebar --- */
.game-nav-sidebar{position:fixed;left:0;top:56px;bottom:0;width:56px;background:#f3f4f6;z-index:60;display:flex;flex-direction:column;align-items:center;padding-top:16px;gap:4px;transition:width .3s ease;overflow-y:auto;overflow-x:hidden;box-shadow:2px 0 8px rgba(0,0,0,.1)}
.game-nav-sidebar:hover{width:180px}
.game-nav-item{display:flex;align-items:center;width:100%;padding:10px 16px;gap:12px;color:#374151;transition:all .2s;white-space:nowrap;cursor:pointer;text-decoration:none;border-radius:0}
.game-nav-item:hover{background:rgba(0,0,0,.08);color:#111827}

.game-nav-icon{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px}
.game-nav-label{font-size:13px;font-weight:500;opacity:0;transition:opacity .2s;pointer-events:none}
.game-nav-sidebar:hover .game-nav-label{opacity:1;pointer-events:auto}
.game-nav-divider{width:32px;height:1px;background:rgba(0,0,0,.12);margin:8px 0;flex-shrink:0}

/* --- Content Section (aligned with main game) --- */
.content-section{max-width:1063px;width:100%;margin-left:15px;margin-right:auto;padding:0}
.main-game-area .content-section{margin-left:0}
.main-game-area .content-section:first-of-type{padding-top:3rem;padding-bottom:1.5rem}

/* --- Below Games --- */
.below-games-area{background:transparent;padding:4px;display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-width:100%;margin:16px 0 32px}
.below-games-area .logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;height:auto;width:100%}
.below-games-area .logo-grid .game-logo-card{aspect-ratio:4/3!important;overflow:hidden!important;border-radius:8px!important;position:relative!important;display:block!important}
.below-games-area .logo-grid .game-logo-card img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}

/* --- Info Cards --- */
.info-card{background:#f8f9fa;border-radius:12px;padding:28px;border:1px solid #e9ecef;margin-bottom:20px}

/* --- FAQ --- */
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary{list-style:none;cursor:pointer}

/* --- Footer --- */
footer{border-top:1px solid #e5e7eb}.border-t{border-top:1px solid}.border-gray-200{border-color:#e5e7eb}

/* --- Misc --- */
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-shrink-0{flex-shrink:0}
.items-stretch{align-items:stretch}
.cursor-pointer{cursor:pointer}
.list-disc{list-style-type:disc}.list-inside{list-style-position:inside}
.text-purple-100{color:#ede9fe}.text-neon-pink{color:#ff6b9d}.text-neon-purple{color:#b44cff}.text-neon-blue{color:#00d4ff}.text-neon-orange{color:#ff8c42}.text-green-400{color:#4ade80}.border-green-600\/40{border-color:rgba(22,163,74,.4)}.bg-green-600\/20{background-color:rgba(22,163,74,.2)}
.font-extrabold{font-weight:800}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.resize{resize:both}.outline{outline-style:solid}.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)}
.scale-110{transform:scale(1.1)}.hover\:scale-105:hover{transform:scale(1.05)}
.gap-1{gap:.25rem}.gap-3{gap:.75rem}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
.max-w-2xl{max-width:42rem}.max-w-xl{max-width:36rem}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}
.border{border:1px solid}.border-gray-300{border-color:#d1d5db}.border-gray-100{border-color:#f3f4f6}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-12{padding-top:3rem;padding-bottom:3rem}
.mx-2{margin-left:.5rem;margin-right:.5rem}.mt-2{margin-top:.5rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}
.space-y-2\.5>:not([hidden])~:not([hidden]){margin-top:.625rem}.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}.space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}.space-y-8>:not([hidden])~:not([hidden]){margin-top:2rem}
.min-w-\[60px\]{min-width:60px}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.rounded{border-radius:.25rem}.rounded-sm{border-radius:.125rem}
.hover\:underline:hover{text-decoration-line:underline}
.hover\:text-red-500:hover{color:#ef4444}.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.hover\:-translate-y-1:hover{transform:translateY(-.25rem)}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}
.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:scale-110{transform:scale(1.1)}.opacity-0{opacity:0}
.bg-gradient-to-r{background-image:linear-gradient(to right,#7c3aed,#4338ca)}
.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.05)}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* --- Static Pages --- */
.static-page .glass{background:#f8f9fa;border:1px solid #e9ecef}
.static-page .gradient-text{background:linear-gradient(135deg,#ff6b9d,#b44cff,#00d4ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.contact-form input,.contact-form textarea{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:10px 14px;color:#e0e0e0;width:100%;transition:border-color .2s}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:#b44cff}
.contact-form label{display:block;margin-bottom:6px;color:#c0c0c0;font-size:.9rem}
#gameGrid .game-thumb-wrap{padding-bottom:75%;position:relative;background:#e9ecef;overflow:hidden;width:100%;display:block;contain:layout style}
#gameGrid .game-thumb-wrap img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;max-width:none}
#gameGrid .game-thumb-wrap img{background:linear-gradient(90deg,#e9ecef 25%,#f0f2f5 50%,#e9ecef 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
#gameGrid .game-thumb-wrap img[data-loaded]{background:#e9ecef;animation:none}
@media(min-width:768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:p-10{padding:2.5rem}}
@media(min-width:1024px){.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:w-\[20\%\]{width:20%}.lg\:w-\[80\%\]{width:80%}.lg\:flex-col{flex-direction:column}.lg\:justify-start{justify-content:flex-start}.lg\:justify-between{justify-content:space-between}.lg\:gap-3{gap:.75rem}}

/* --- Responsive --- */
@media(max-width:1024px){
    .game-nav-sidebar{display:none}
    .page-wrapper{margin-left:0}
    .right-sidebar-area{display:none}
    .below-games-area{display:none!important}
    .main-layout{flex-direction:column}
    .main-game-area{flex:1 1 auto!important;width:100%!important;min-width:0!important;max-width:none!important;margin-left:0!important}
    .main-game-area .game-block-wrapper{width:100%}
    .main-game-area .game-block-wrapper .relative{width:100%;aspect-ratio:4/3}
    .game-info-bar{flex-wrap:wrap;height:auto;padding:6px 8px;gap:8px}
    .game-info-bar h1{font-size:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
    .game-info-bar .text-sm{font-size:12px!important}
    .game-info-bar .gap-4{gap:8px!important}
    .game-info-bar button.hover\:text-red-500{display:none}
    .game-info-bar .px-5{padding-left:8px!important;padding-right:8px!important}
    .game-info-bar .py-2{padding-top:4px!important;padding-bottom:4px!important}
    .content-section{width:100%!important;padding:0 1rem!important;margin-left:0!important}
}
@media(min-width:769px) and (max-width:1024px){
    .main-game-area .game-block-wrapper .relative{aspect-ratio:16/9}
    #gameGrid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}
@media(max-width:768px){
    .main-game-area .game-block-wrapper .relative{aspect-ratio:4/3}
}
@media(max-width:1200px){#gameGrid{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
@media(max-width:1024px){#gameGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:768px){#gameGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:640px){#gameGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:360px){#gameGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#gameGrid .game-thumb-wrap{padding-bottom:100%!important}}

/* --- content-visibility for below-fold (reduces layout/paint cost) --- */
@media(min-width:769px){.below-games-area .logo-grid .game-logo-card{content-visibility:auto;contain-intrinsic-size:auto 300px}}
.info-card{content-visibility:auto;contain-intrinsic-size:auto 200px}
.main-game-area,.game-block-wrapper{content-visibility:visible;contain-intrinsic-size:none}
.left-sidebar-area .game-logo-card,.right-sidebar-area .game-logo-card{content-visibility:auto;contain-intrinsic-size:auto 100px}