:root{
  --bg:        #0b0c10;
  --fg:        #e8edf5;
  --muted:     #a8b2c2;
  --soft:      #12141a;    
  --chip:      #141826;
  --btnA:      #6ee7ff;
  --btnB:      #8b5cf6;
  --ring:      rgba(110,231,255,.32);
  --shadow:    0 8px 24px rgba(0,0,0,.35);
}


html,body{
  margin:0;
  background: radial-gradient(1000px 700px at 85% -10%, rgba(139,92,246,.16), transparent 60%),
              radial-gradient(900px 650px at 0% 25%, rgba(110,231,255,.10), transparent 60%),
              var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}


.wrap{ max-width: 1100px; margin: 0 auto; padding: 12px; }


.header{
  position: sticky; top: 0; z-index: 10;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: none;            
  border: none;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:20px }
.brand img{ width:32px; height:32px; border-radius:10px; box-shadow: 0 6px 16px rgba(0,0,0,.25) }


.search{
  background: var(--soft);
  border: none;
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: var(--shadow);
}
.search:focus-within{ box-shadow: 0 0 0 4px var(--ring), var(--shadow); }
.search input{ font-size: 15px; color: var(--fg) }

select, .btn{
  border: none;
  border-radius: 12px;
  padding: 9px 12px;
  background: var(--soft);
  color: var(--fg);
  box-shadow: var(--shadow);
}
.btn{
  background: linear-gradient(135deg, var(--btnA), var(--btnB));
  color: #06121f;
  font-weight: 800;
}


.chips{ gap: 8px; padding: 10px 2px; margin: 10px 0 6px; scrollbar-width:none }
.chips::-webkit-scrollbar{ display:none }
.chip{
  background: var(--chip);
  border: none;                        
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
}
.chip.active{
  background: linear-gradient(135deg, var(--btnA), var(--btnB));
  color: #071a2a;
}


.grid{ display:grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 560px){
  .grid{ grid-template-columns: 1fr; }
}
@media (min-width: 900px){
  .grid{ gap: 12px; grid-template-columns: repeat(4, minmax(0,1fr)); }
}


.card{
  background: transparent;            
  border: none;                        
  padding: 6px;
  box-shadow: none;                    
}
.badge{
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  color: var(--muted);
  border: none;                        
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 12px;
  margin-bottom: 8px;
}
.thumb{
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;                 
  object-fit: cover;
  background: #0a0a0a;
  box-shadow: var(--shadow);           
}
.title{ margin: 8px 0 4px; font-size: 15px; line-height: 1.2; font-weight: 800 }
a.game-title{ color: var(--fg); text-decoration: none }


.play{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 200px;                    
  margin: 10px auto 0;                 
  background: linear-gradient(135deg, var(--btnA), var(--btnB));
  color: #07131f;
  border: none;
  border-radius: 999px;                
  padding: 11px 14px;
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow);
}


.ad{ margin: 12px 0; text-align:center }
.ad ins{ border-radius: 12px; overflow: hidden; display: block }


.footer{ text-align:center; color: var(--muted); margin: 18px 0; font-size: 13px }






.header .controls{
  display: flex;
  flex-wrap: wrap;              
  gap: 8px;
  align-items: center;
}

.header .search{ flex: 1 1 240px; min-width: 220px; }
#pageSize, .header .btn, .header label.chip{ flex: 0 0 auto; }


label.chip{ padding: 6px 10px; }
label.chip input{ width: 16px; height: 16px; margin: 0; }
label.chip span{ line-height: 16px; }


.grid{ display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 300px){
  .grid{ grid-template-columns: 1fr; }   
}
@media (min-width: 540px){
  .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px){
  .grid{ gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


.card{
  background: transparent;
  border: none;
  padding: 8px;
  box-shadow: none;
}
.thumb{ border-radius: 14px; }
.badge{ border: none; }


.play{
  display: block;
  width: 100%;
  max-width: none;              
  margin: 10px 0 0;
  border-radius: 999px;
  text-align: center;
  padding: 12px 14px;
  font-size: 16px;              
  box-sizing: border-box;
}


@media (max-width: 560px){
  .wrap{ padding: 10px; }
  .title{ font-size: 15px; }
  .search{ padding: 8px 10px; }
  #pageSize{ padding: 8px 10px; }
  .btn{ padding: 9px 12px; }
}


@supports (padding: max(0px)){
  body{ padding-left: max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right)); }
}



:root{ --search-h: 44px; }


.header .controls{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}


.search{
  position:relative;
  display:flex; align-items:center;
  height: var(--search-h);
  padding: 0 12px;
  border-radius: 14px;
  background: var(--soft);
  border: none;
  box-shadow: var(--shadow);
}
.search:focus-within{ box-shadow: 0 0 0 4px var(--ring), var(--shadow); }


.search input[type="search"]{
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent !important;
  border: 0;
  outline: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 15.5px;
  line-height: 1.2;
  color: var(--fg) !important;
}

.search input::-webkit-search-decoration,
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-results-button,
.search input::-webkit-search-results-decoration{
  -webkit-appearance: none;
  appearance: none;
  display: none !important;
}


.search input:-webkit-autofill,
.search input:-webkit-autofill:hover,
.search input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 9999s ease 0s !important;
}


.search input::placeholder{ color: var(--muted); opacity: .85; }


select, .btn{
  height: var(--search-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  line-height: 1;
}


@media (max-width: 560px){
  :root{ --search-h: 36px; }                 
  .header{ padding: 8px 10px; border-radius: 12px; }
  .header .controls{ gap: 6px; }             
  .brand{ font-size: 18px; gap: 8px; }
  .brand img{ width: 28px; height: 28px; }   

  .search{ padding: 0 10px; border-radius: 12px; }
  .search input[type="search"]{ font-size: 14px; }

  select, .btn{
    font-size: 14px;
    padding: 0 10px;
    border-radius: 10px;
    height: var(--search-h);                 
  }
}


@media (max-width: 360px){
  :root{ --search-h: 34px; }                 
  .brand{ font-size: 16px; }
  .brand img{ width: 24px; height: 24px; }
  .search input[type="search"]{ font-size: 13.5px; }
  select, .btn{ font-size: 13.5px; padding: 0 8px; border-radius: 9px; }
}

.frame{ position:relative; background:#000; border-radius:14px; overflow:hidden }
.frame .stage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000;
}

#frame{
  width:100%;
  height:100% !important;
  border:0;
}


.frame.rotate .stage > iframe{
  transform: rotate(90deg);
}


html.fullscreenfix, html.fullscreenfix body{ background:#000; }

.section-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.section-chip{
  display:inline-block;padding:6px 10px;border-radius:999px;
  background:linear-gradient(90deg,#2b2b32,#1d1d22);
  border:1px solid rgba(255,255,255,.08);font-weight:800;font-size:14px
}
.flex-spacer{flex:1}
.pop-nav{
  background:transparent;border:1px solid rgba(255,255,255,.12);
  color:#fff;border-radius:10px;width:32px;height:32px;line-height:30px;
  cursor:pointer;opacity:.75
}
.pop-nav:hover{opacity:1}


.hscroll{
  display:grid; grid-auto-flow:column; grid-auto-columns:220px;
  gap:12px; overflow-x:auto; padding-bottom:2px; scroll-snap-type:x mandatory
}
.hscroll::-webkit-scrollbar{height:6px}
.hscroll::-webkit-scrollbar-thumb{background:#333;border-radius:10px}


.mini-card{
  scroll-snap-align:start; background:var(--card, #111);
  border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.06)
}
.mini-card .cover{display:block;position:relative}
.mini-card img.thumb{display:block;width:100%;height:120px;object-fit:cover}
.mini-card .badge{
  position:absolute;left:8px;top:8px;background:#1e1e27;
  border:1px solid rgba(255,255,255,.08);padding:3px 8px;border-radius:999px;
  font-size:11px;font-weight:700
}
.mini-card .body{padding:10px}
.mini-card .title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-card .meta{font-size:12px;opacity:.75;margin-top:4px}
.mini-card .actions{display:none} 

#popular-grid.hscroll{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:220px;   
  gap:12px;
  overflow-x:auto;
  padding-bottom:2px;
  scroll-snap-type:x mandatory;
}


#popular-grid > .card{
  width:220px; min-width:220px; max-width:220px;
  border-radius:14px; overflow:hidden;
}
#popular-grid > .card img.thumb,
#popular-grid > .card .thumb{           
  width:100%; height:120px; object-fit:cover; display:block;
}
#popular-grid > .card .play{ display:none }  


#popular-grid > .mini-card{ scroll-snap-align:start; }
#popular-grid > .mini-card img.thumb{
  width:100%; height:120px; object-fit:cover;
}

#popular-grid.hscroll{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:220px;   
  gap:12px;
  overflow-x:auto;
  padding-bottom:2px;
  scroll-snap-type:x mandatory;
}

#popular-grid .mini-card{
  width:220px; min-width:220px; max-width:220px;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  background:var(--card,#111);
  scroll-snap-align:start;
}

#popular-grid .mini-card .cover{display:block;position:relative}
#popular-grid .mini-card img.thumb{
  display:block; width:100%;
  height:120px !important;           
  object-fit:cover;
}
#popular-grid .mini-card .badge{
  position:absolute; left:8px; top:8px;
  padding:3px 8px; font-size:11px; font-weight:700;
  background:#1e1e27; border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
}
#popular-grid .mini-card .body{padding:10px}
#popular-grid .mini-card .title{
  font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:14px; line-height:1.2;
}
#popular-grid .mini-card .meta{font-size:12px; opacity:.75; margin-top:4px}
#popular-grid .mini-card .actions, 
#popular-grid .mini-card .play { display:none !important }  


.section-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.section-chip{
  display:inline-block;padding:6px 10px;border-radius:999px;
  background:linear-gradient(90deg,#2b2b32,#1d1d22);
  border:1px solid rgba(255,255,255,.08);
  font-weight:800;font-size:14px
}
.flex-spacer{flex:1}
.pop-nav{
  background:transparent;border:1px solid rgba(255,255,255,.12);
  color:#fff;border-radius:10px;width:32px;height:32px;line-height:30px;
  cursor:pointer;opacity:.75
}
.pop-nav:hover{opacity:1}



.hscroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 8px 14px;
  scroll-snap-type: x mandatory;
}
.hscroll::-webkit-scrollbar { height: 8px }




.ad ins[data-ad-status="unfilled"] {
  height: 0 !important;
  min-height: 0 !important;
  display: block !important;   
  overflow: hidden !important;
  border: 0 !important;
}
.ad ins[data-ad-status="unfilled"] > div,
.ad ins[data-ad-status="unfilled"] iframe {
  display: none !important;    
}


.ad {
  margin: 8px 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
  min-height: 2px;             
}
.ad ins {
  display: block;
  height: auto !important;
  min-height: 2px !important;
}


.ad ins[data-adsbygoogle-status="done"]:not([data-ad-status="unfilled"]) {
  min-height: 60px !important;       
}
@media (max-width:560px){
  .ad ins[data-adsbygoogle-status="done"]:not([data-ad-status="unfilled"]) {
    min-height: 48px !important;     
  }
}


a.btn,
a.btn:visited,
a.btn:hover,
.btn[href] { text-decoration: none !important; }


a.game-title,
a.game-title:visited,
a.game-title:hover { text-decoration: none !important; }


@supports (height: 100dvh){
  .frame{ min-height: 80dvh; }
}
@supports not (height: 100dvh){
  .frame{ min-height: 80vh; }
}

.ad--banner{display:flex;justify-content:center;margin:8px 0}
.ad--banner .ad-mob{display:inline-block}
.ad--banner .ad-desktop{display:none}
@media (min-width:768px){
  .ad--banner .ad-mob{display:none}
  .ad--banner .ad-desktop{display:inline-block}
}


.card.ad-card{ padding:0 }
.ad--card{
  display:flex;align-items:center;justify-content:center;
  min-height:250px;
}
.ad--card .ad-mob{display:inline-block}
.ad--card .ad-desktop{display:none}
@media (min-width:768px){
  .ad--card .ad-mob{display:none}
  .ad--card .ad-desktop{display:inline-block}
}

  .meta{font-size:12px;opacity:.75;margin-top:4px}
  .brand{display:flex;align-items:center;gap:8px}
  .brand .site-title{margin:0;font-size:24px;line-height:1;font-weight:800}
  
  
@media (max-width: 560px){
  .ad--banner{
    max-height: 52px;          
    overflow: hidden;          
  }
  .ad--banner .ad-mob{
    width: 100% !important;
    height: 50px !important;   
  }
}


@media (min-width: 561px){
  .ad--banner{
    max-height: 96px;
    overflow: hidden;
  }
}

.ad-inline{
  grid-column: 1 / -1;
  display:flex; justify-content:center; align-items:center;
  padding: 8px 0;
}


.ad--banner-inline{ max-height:96px; overflow:hidden; }
@media (max-width:560px){
  .ad--banner-inline{ max-height:52px; }
  .ad--banner-inline .ad-desktop{ display:none !important; }
  .ad--banner-inline .ad-mob{ display:inline-block !important; }
}
@media (min-width:561px){
  .ad--banner-inline .ad-mob{ display:none !important; }
  .ad--banner-inline .ad-desktop{ display:inline-block !important; }
}


.header .brand { gap: 8px; } 
.header .brand img { width: 30px; height: 30px; } 

.header .site-title{
  font-size: 24px !important;   
  line-height: 1.1;
  margin: 0;
  font-weight: 700;
}


@media (max-width: 560px){
  .header .site-title{ font-size: 18px !important; }
  .header .brand img{ width: 26px; height: 26px; }
}


.header .brand .site-title{
  font-size: clamp(16px, 0.6vw + 14px, 22px) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  font-weight: 800;
}
@media (max-width:560px){
  .header .brand .site-title{ font-size: 18px !important; }
}
.header{ padding: 8px 10px !important; }


:root{
  --search-h: 38px;                 
}


.header{
  padding: 6px 10px !important;     
  border-radius: 12px !important;
}


.header .brand img{ width: 26px !important; height: 26px !important; }
.header .brand .site-title{
  font-size: 20px !important;       
  line-height: 1.05 !important;
  margin: 0 !important;
  font-weight: 800;
}


.header .controls{ gap: 6px !important; }
.select, .btn{ height: var(--search-h) !important; }
.search{ padding: 0 10px !important; border-radius: 12px !important; }


@media (max-width:560px){
  :root{ --search-h: 34px; }        
  .header{ padding: 5px 8px !important; }
  .header .brand .site-title{ font-size: 18px !important; }
}


:root{ --search-h: 38px !important; }           

.header{
  padding: 6px 10px !important;
  border-radius: 12px !important;
}

.header .brand img{ width: 26px !important; height: 26px !important; }

.header .brand .site-title{
  font-size: 18px !important;    
  line-height: 1.05 !important;
  margin: 0 !important;
  font-weight: 800 !important;
}