/* GameLiora - reference-inspired visual framework (dark, dense, 16:9 grid).
   Only the visual layer changed. The ad-slot block below is preserved
   byte-for-byte from the Chapter 11 contract: it is not part of the skin. */

:root{
  --bg:#0b0d12;
  --bg2:#11141c;
  --surface:#171b24;
  --surface2:#212632;
  --solid:#12161e;
  --solid2:#1b202a;
  --text:#f4f6fa;
  --muted:#8f96a6;
  --accent:#b7f23d;
  --accent2:#8f7bff;
  --accent3:#ff5f86;
  --grad:linear-gradient(120deg,#c8f94a 0%,#8fe02e 100%);
  --grad2:linear-gradient(135deg,#ff5f86 0%,#8f7bff 100%);
  --grad3:linear-gradient(135deg,#8f7bff 0%,#4ec9ff 100%);
  --footer-bg:#0b0d12;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.15);
  --danger:#ff5f7a;
  --ok:#3ee08f;
  --glow:0 8px 26px rgba(0,0,0,.5);
  --radius:10px;
  --header-h:56px;
  --maxw:1380px;
  --anchor-h:0px; /* measured by ads.js; 0 = no blank reserve */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}

/* ---------- header: dark bar, centered pill search, round icon buttons ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:50;
  background:#0b0d12;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:0 14px;
}
.back-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--text);flex:0 0 auto;transition:.15s;}
.back-btn:hover{background:var(--surface2);color:#fff;}
.back-btn svg{width:18px;height:18px;}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:17px;letter-spacing:-.4px;white-space:nowrap;text-transform:uppercase;color:#fff;flex:0 0 auto;}
.brand .logo-img{width:30px;height:30px;border-radius:8px;background:#fff;}
.brand small{display:none;}
.nav{display:none;gap:2px;margin-left:auto;align-items:center;min-width:0;}
.nav a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:0;color:var(--muted);transition:.15s;flex:0 0 auto;background:transparent;}
.nav a .ni{display:inline-flex;flex:0 0 auto;}
.nav a .ni svg{width:17px;height:17px;}
.nav a:hover{color:#fff;background:var(--surface2);}
.nav a.active{color:#0b0d12;background:var(--accent);}
.nav a.search-link{color:var(--accent);}
.hamburger{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);padding:9px;border-radius:50%;width:36px;height:36px;align-items:center;justify-content:center;flex:0 0 auto;}
.hamburger span{width:15px;height:2px;border-radius:2px;background:var(--text);}
.hamburger span:nth-child(2){background:var(--accent);}
.search-btn{margin-left:auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--text);transition:.15s;flex:0 0 auto;}
.search-btn:hover{background:var(--surface2);color:#fff;}
.search-btn svg{width:18px;height:18px;flex:0 0 auto;}
.icon-btn,.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--text);transition:.15s;flex:0 0 auto;}
.icon-btn:hover,.theme-btn:hover{background:var(--surface2);color:#fff;}
.icon-btn svg,.theme-btn svg{width:18px;height:18px;}
.i{width:20px;height:20px;display:inline-block;vertical-align:middle;}

/* desktop: turn the search button into the centered pill, nav into an icon row */
@media (min-width:1100px){
  .site-header{gap:12px;padding:0 20px;}
  .site-header > .search-btn{
    width:min(430px,34vw);height:38px;border-radius:999px;justify-content:flex-start;
    gap:10px;padding:0 15px;margin-left:auto;margin-right:0;
    background:#1c212b;border-color:transparent;color:var(--muted);
  }
  .site-header > .search-btn::after{content:"Search games and categories";font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .site-header > .search-btn:hover{background:#242a36;color:var(--muted);}
  .site-header > .search-btn svg{order:2;margin-left:auto;width:17px;height:17px;}
  .nav{display:none;margin-left:0;}
  .hamburger{display:flex;}
  .site-header > .theme-btn{margin-left:0;}
}
@media (max-width:1099px){
  .nav{display:none;}
  .hamburger{display:flex;}
}

.mobile-menu{position:fixed;top:var(--header-h);left:0;right:0;background:#10131a;backdrop-filter:blur(14px);border-bottom:1px solid var(--line);z-index:49;display:flex;flex-direction:column;padding:8px;box-shadow:0 18px 36px rgba(0,0,0,.6);max-height:70vh;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-12px);pointer-events:none;transition:opacity .25s ease,transform .3s cubic-bezier(.4,0,.2,1),visibility .25s;}
.mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.mobile-menu a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:8px;font-weight:700;font-size:14px;color:var(--muted);}
.mobile-menu a .mi{display:inline-flex;flex:0 0 auto;color:var(--accent);}
.mobile-menu a .mi svg{width:18px;height:18px;}
.mobile-menu a:hover{background:var(--surface2);color:#fff;}
.mobile-menu a.mm-special{color:var(--accent);font-weight:800;}
.mobile-menu a .mm-label{flex:1 1 auto;}
.mobile-menu a .mm-count{margin-left:auto;font-size:11px;font-weight:800;color:var(--muted);background:var(--surface2, #1a1f29);padding:2px 9px;border-radius:999px;white-space:nowrap;}

/* ---------- layout ---------- */
.content{padding-top:calc(var(--header-h) + 8px);padding-bottom:0;max-width:var(--maxw);margin:0 auto;padding-left:14px;padding-right:14px;}
main.content:last-of-type{padding-bottom:calc(var(--anchor-h) + 36px);}
.content.no-ad{padding-bottom:calc(var(--anchor-h) + 48px);}
.content.flush{padding-top:calc(var(--header-h) + 8px);}
.section-title{font-size:19px;font-weight:900;margin:20px 0 10px;display:flex;align-items:center;gap:8px;letter-spacing:-.3px;color:#fff;text-transform:none;}
.section-title .dot{width:9px;height:9px;border-radius:3px;background:var(--cat,var(--accent));transform:rotate(45deg);box-shadow:none;}
.section-title .count{color:var(--muted);font-size:12px;font-weight:700;margin-left:2px;}
.section-sub{margin:0 0 10px;color:var(--muted);font-size:13px;font-weight:500;}
.intro{margin:16px 0 8px;}
.intro h1{font-size:clamp(28px,4vw,44px);margin:0 0 6px;font-weight:900;letter-spacing:-1.2px;line-height:1.06;text-transform:uppercase;color:#fff;}
.intro h1 em{font-style:normal;color:var(--accent);}
.intro p{margin:0;color:var(--muted);font-size:14px;max-width:720px;line-height:1.55;}
.chips{display:flex;gap:8px;overflow-x:auto;padding:6px 0 10px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:12.5px;color:var(--muted);transition:.15s;white-space:nowrap;}
.chip:hover,.chip.active{color:#0b0d12;border-color:transparent;background:var(--accent);}

/* ---------- game grid: dense 16:9 thumbnail tiles (reference style) ---------- */
.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px;}
.game-card{background:none;border:0;border-radius:var(--radius);overflow:visible;position:relative;display:block;transition:transform .16s ease,filter .16s ease;min-width:0;}
.game-card:hover{transform:translateY(-3px) scale(1.015);filter:brightness(1.09);}
.game-card:active{transform:scale(.985);}
.game-card .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);background:var(--solid);display:block;}
.game-card .meta{padding:7px 2px 2px;min-width:0;}
.game-card .name{font-weight:700;font-size:12.5px;margin:0 0 1px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-card .tag{color:var(--muted);font-size:11px;margin:0;min-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-card .stats{display:flex;justify-content:space-between;align-items:center;margin-top:3px;font-size:10.5px;color:var(--muted);}
.game-card .cat-badge{position:absolute;top:7px;left:7px;background:rgba(9,11,16,.8);padding:3px 8px;border-radius:6px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#fff;box-shadow:none;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-card .rating{color:var(--accent);}

.scroll-grid{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;margin-top:10px;}
.scroll-grid::-webkit-scrollbar{display:none;}
.scroll-grid .game-card{flex:0 0 200px;}
.list-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px;}
.list-grid .game-card.wide{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--radius);padding:8px;}
.list-grid .game-card.wide .thumb{width:120px;aspect-ratio:16/9;flex:0 0 auto;}
.list-grid .game-card.wide .meta{flex:1;min-width:0;padding:0;}

/* Homepage Puzzle / Racing sections: a 2-up list of vertical game tiles (max 6). */
.cat-section.two-col .list-grid{grid-template-columns:repeat(2,1fr);}
.cat-section.two-col .list-grid .game-card.wide{display:block;background:none;border:0;border-radius:var(--radius);padding:0;overflow:hidden;position:relative;}
.cat-section.two-col .list-grid .game-card.wide .thumb{width:100%;aspect-ratio:16/9;flex:0 0 auto;}
.cat-section.two-col .list-grid .game-card.wide .meta{flex:none;padding:7px 2px 2px;min-width:0;}

.strip-head{display:flex;align-items:center;gap:8px;margin:20px 0 2px;}
.strip-head .flame{font-size:18px;}
.strip{display:flex;gap:12px;overflow-x:auto;padding:8px 2px 14px;scrollbar-width:none;}
.strip::-webkit-scrollbar{display:none;}
.strip .game-card{flex:0 0 200px;}

@media (min-width:560px){.game-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:820px){.game-grid{grid-template-columns:repeat(4,1fr);}}
@media (min-width:1100px){.game-grid{grid-template-columns:repeat(5,1fr);}}
@media (min-width:1400px){.game-grid{grid-template-columns:repeat(6,1fr);}}
@media (min-width:768px){
  .nav{display:none;}
  .content{padding-left:24px;padding-right:24px;}
  .list-grid{grid-template-columns:1fr;}
  .intro h1{font-size:44px;}
  .section-title{font-size:20px;}
}
@media (min-width:768px) and (max-width:1099px){.nav{display:none;}}
@media (max-width:767px){.cat-section .game-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}

/* AD BLOCK INJECTED HERE VERBATIM */

/* ---------- ad slots (template 22-43 / Chapter 11) ----------
   default = visible lowercase "advertisement", no background / no border
   filled  = real creative + label above it
   empty   = platform said unfilled -> whole block folded, zero blank space.
   Chapter 11.3 / P3: fold with height:0 + overflow:hidden, NEVER
   display:none. The element must stay measurable in the layout tree or
   the request self-locks at 0x0 and a late creative can never land. */
.ad-slot{width:100%;height:auto;display:block;margin:14px 0;background:none;border:0;}
.ad-label{display:block;width:100%;font-size:10px;line-height:1;letter-spacing:.08em;text-transform:lowercase;color:var(--muted);opacity:.7;margin:0 0 6px;text-align:left;background:none;border:0;padding:0;}
/* Fold the WHOLE block (slot + label + anchor host), including the label. */
.ad-slot.ad-empty,
[data-slot][data-ad-state="empty"]{
  height:0 !important;min-height:0 !important;overflow:hidden !important;
  margin:0 !important;padding:0 !important;border:0 !important;
}
.ad-slot.ad-empty .ad-label,
[data-slot][data-ad-state="empty"] .ad-label{display:none !important;}
.ad-slot.ad-empty::before,
[data-slot][data-ad-state="empty"]::before{content:none !important;}

/* ---------- bottom: fixed anchor — no background, no fixed size ---------- */
.anchor-host{position:fixed;left:0;right:0;bottom:0;z-index:45;}
.anchor-host .ad-slot{margin:0;}
.anchor-host:has(.ad-slot.ad-empty),
.anchor-host:has([data-slot][data-ad-state="empty"]){
  height:0 !important;min-height:0 !important;overflow:hidden !important;
  padding:0 !important;border:0 !important;
}

/* ---------- interstitial: only rendered when a real creative exists ---- */
#adInterstitial{position:fixed;inset:0;z-index:80;align-items:center;justify-content:center;background:rgba(6,7,16,.82);backdrop-filter:blur(6px);padding:18px;}
#adInterstitial .ad-slot{width:min(100%,340px);margin:0;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);}
#adInterstitial .inter-close{position:absolute;top:16px;right:18px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
#adInterstitial .inter-close:hover{border-color:var(--accent);color:#fff;}
.site-footer{background:var(--footer-bg);margin-top:26px;padding:18px 14px calc(var(--anchor-h) + 20px);text-align:center;border-top:1px solid var(--line);}
.site-footer .copy{color:rgba(154,163,199,.7);font-size:12.5px;margin:0 0 10px;}
.footer-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.footer-btns a{padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:13px;color:var(--text);transition:.15s;}
.footer-btns a:hover{border-color:var(--accent);background:rgba(124,92,255,.18);color:#fff;box-shadow:0 0 14px rgba(124,92,255,.3);}
.footer-btns a.active{color:#fff;border-color:transparent;background:var(--grad);}
.play-footer{margin-top:0;padding-bottom:calc(var(--anchor-h) + 18px);}

/* ---------- footer visual recolor (keeps the anchor-height padding above) ---------- */
.site-footer{background:var(--footer-bg);border-top:1px solid var(--line);text-align:center;}
.site-footer .copy{color:var(--muted);font-size:12px;margin:0 0 10px;}
.footer-btns a{padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:12.5px;color:var(--muted);transition:.15s;}
.footer-btns a:hover{border-color:var(--accent);background:var(--surface2);color:#fff;}
.footer-btns a.active{color:#0b0d12;border-color:transparent;background:var(--accent);}

/* ---------- floating action buttons ---------- */
.fab-stack{position:fixed;right:16px;bottom:calc(var(--anchor-h) + 126px);z-index:46;display:flex;flex-direction:column;gap:10px;}
.fab{width:44px;height:44px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;transition:transform .15s,opacity .2s;background:var(--surface2);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.5);}
.fab:active{transform:scale(.92);}
.fab svg{width:21px;height:21px;}
.to-top{background:var(--grad);color:#0b0d12;opacity:0;pointer-events:none;transform:translateY(8px);}
.to-top.show{opacity:1;pointer-events:auto;transform:none;}
.to-home{position:relative;background:var(--grad);color:#0b0d12;box-shadow:0 6px 20px rgba(183,242,61,.3),inset 0 0 0 1px rgba(255,255,255,.25);}
.to-home::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(183,242,61,.55);pointer-events:none;}
.to-home::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(183,242,61,.2);pointer-events:none;}
.to-home:hover{transform:translateY(-3px) scale(1.06);}
.to-home svg{width:22px;height:22px;}

/* ---------- home category navbar ---------- */
.cat-nav-wrap{position:sticky;top:var(--header-h);margin-top:var(--header-h);z-index:48;background:rgba(11,13,18,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.cat-nav-row{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:8px;padding:0 14px;}
.cat-nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding:10px 0;}
.cat-nav::-webkit-scrollbar{display:none;}
.cat-nav a,.cat-drop a{flex:0 0 auto;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:12.5px;color:var(--muted);transition:.15s;white-space:nowrap;}
.cat-nav a:hover,.cat-drop a:hover{color:#fff;border-color:var(--line2);background:var(--surface2);}
.cat-nav a.active{color:#0b0d12;border-color:transparent;background:var(--accent);}
.cat-expand{flex:0 0 auto;width:34px;height:34px;align-self:center;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;transition:.15s;}
.cat-expand .chev{display:block;width:18px;height:18px;transition:transform .25s;}
.cat-expand:hover{border-color:var(--line2);color:#fff;background:var(--surface2);}
.cat-expand.open{background:var(--accent);border-color:transparent;color:#0b0d12;}
.cat-expand.open .chev{transform:rotate(-12deg) scale(1.1);}
.cat-drop{position:absolute;top:100%;left:0;right:0;background:#10131a;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.6);overflow:hidden;max-height:0;opacity:0;transform:translateY(-10px);visibility:hidden;transition:max-height .32s ease,opacity .22s ease,transform .32s ease,visibility 0s linear .32s,border-bottom-width 0s linear .32s;border-bottom-width:0;}
.cat-drop.open{max-height:480px;opacity:1;transform:translateY(0);visibility:visible;border-bottom-width:1px;transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .28s ease,transform .38s ease;}
.cat-drop .drop-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 14px;}
.cat-drop a{background:var(--surface2);}
.cat-section{scroll-margin-top:calc(var(--header-h) + 70px);}
.cat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 8px;}
.cat-head .section-title{margin:0;}
.view-all{flex:0 0 auto;font-weight:800;font-size:12px;color:var(--accent);padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);transition:.15s;white-space:nowrap;}
.view-all:hover{color:#0b0d12;border-color:transparent;background:var(--accent);}

/* ---------- detail page ---------- */
.detail{max-width:1080px;margin:8px auto 0;}
/* Related games sit in the detail column: cap columns so names never collide. */
.detail .game-grid{grid-template-columns:repeat(2,1fr);}
@media (min-width:700px){.detail .game-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1000px){.detail .game-grid{grid-template-columns:repeat(4,1fr);}}
.detail-top{margin:2px 0 10px;}
.not-found{text-align:center;padding:48px 16px;}
.not-found h1{font-size:22px;margin:0 0 8px;color:#fff;}
.not-found p{color:var(--muted);margin:0 0 18px;}
.page-back{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:12.5px;transition:.15s;}
.page-back:hover{border-color:var(--line2);color:#fff;background:var(--surface2);}
.page-back svg{width:15px;height:15px;}
.detail-head{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;}
.detail-head img{width:92px;height:92px;border-radius:12px;background:var(--solid);flex:0 0 auto;}
.detail-head h1{margin:0 0 4px;font-size:23px;color:#fff;font-weight:900;letter-spacing:-.5px;}
.detail-head .sub{color:var(--muted);margin:0;font-size:13px;}
.detail-head .rate{color:var(--accent);font-size:12.5px;margin-top:6px;font-weight:700;}
.play-row{display:flex;gap:10px;margin:14px 0;align-items:stretch;}
.play-row .play-btn::before{content:"\25B6\00A0";}
.play-btn{display:inline-flex;align-items:center;gap:8px;flex:1;padding:13px 20px;border-radius:999px;border:0;background:var(--grad);color:#0b0d12;font-weight:900;font-size:15px;justify-content:center;letter-spacing:.2px;box-shadow:0 6px 20px rgba(183,242,61,.22);}
.play-btn:active{transform:translateY(2px);}
.fav-btn{flex:0 0 auto;width:52px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--accent3);display:flex;align-items:center;justify-content:center;transition:.15s;}
.fav-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.fav-btn:hover{background:var(--surface2);}
.fav-btn.on{background:var(--accent3);color:#fff;}
.fav-btn.on svg{fill:#fff;}
.fav-btn.pop{animation:favPop .35s ease;}
@keyframes favPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.detail-desc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;color:#d6dbe7;font-size:14px;line-height:1.65;}
.detail-desc h3{margin:0 0 8px;font-size:16px;color:#fff;}
.game-frame{width:100%;border:0;border-radius:12px;background:var(--bg2);margin-top:14px;display:none;min-height:640px;border:1px solid var(--line);}
.game-frame.show{display:block;}
.reviews{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.reviews h3{margin:0 0 2px;font-size:16px;color:#fff;}
.reviews .r-summary{color:var(--muted);font-size:12.5px;margin:0 0 6px;}
.review{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);}
.review:first-of-type{border-top:0;padding-top:6px;}
.review .ava{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:14px;background:var(--grad2);}
.review .r-body{flex:1;min-width:0;}
.review .r-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.review .r-name{font-weight:800;color:#fff;font-size:13.5px;}
.review .r-stars{color:var(--accent);font-size:12.5px;letter-spacing:1px;}
.review .r-text{color:#c9d1e0;font-size:13.5px;line-height:1.55;margin:4px 0 0;word-wrap:break-word;}

/* ---------- search / filters ---------- */
.search-box{display:flex;gap:8px;margin:14px 0;}
.search-box input{flex:1;padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:14px;}
.search-box input::placeholder{color:var(--muted);}
.search-box input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(183,242,61,.14);}
.search-box button{padding:0 20px;border:0;border-radius:999px;background:var(--grad);color:#0b0d12;font-weight:800;}
.no-results{color:var(--muted);padding:30px 0;text-align:center;font-weight:600;}
.filters{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:14px 0 18px;}
.filters .chip{margin:0;}
.filters label{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--muted);}
.filters select{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;}

/* ---------- page hero / empty states / legal ---------- */
.page-hero{margin:16px 0 4px;padding:18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);}
.page-hero h1{margin:0 0 4px;font-size:26px;font-weight:900;letter-spacing:-.6px;text-transform:uppercase;}
.page-hero h1 em{font-style:normal;color:var(--accent);}
.page-hero p{margin:0;color:var(--muted);font-size:13.5px;font-weight:500;}
.page-hero.has-cat{background:radial-gradient(130% 150% at 15% 0%,color-mix(in srgb,var(--cat) 34%,transparent),transparent 58%),var(--surface);border-color:color-mix(in srgb,var(--cat) 30%,transparent);}
.page-hero.has-cat h1{color:#fff;}
.empty-state{text-align:center;padding:44px 16px;color:var(--muted);}
.empty-state .big{font-size:48px;line-height:1;margin-bottom:10px;}
.empty-state p{margin:0 0 16px;font-weight:600;}
.empty-state a{display:inline-block;padding:10px 20px;border-radius:999px;background:var(--grad);color:#0b0d12;font-weight:800;}
.text-btn{margin-top:14px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-weight:700;font-size:12.5px;}
.text-btn:hover{color:#fff;border-color:var(--danger);background:var(--surface2);}
.legal{max-width:760px;margin:10px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;}
.legal h1{font-size:23px;margin:0 0 6px;color:#fff;}
.legal h2{font-size:16px;margin:22px 0 8px;color:var(--accent);}
.legal p{color:#cdd4e2;font-size:14px;line-height:1.7;margin:0 0 10px;}
.legal ul{color:#cdd4e2;font-size:14px;line-height:1.7;padding-left:20px;}

/* ---------- play overlay (iframe launcher) ---------- */
.play-overlay{position:fixed;inset:0;z-index:120;background:rgba(6,7,10,.96);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;}
.play-overlay.open{display:flex;}
.play-frame{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:#05060c;}
.play-top{height:52px;flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:0 12px;background:#10131a;border-bottom:1px solid var(--line);}
.play-title{font-weight:900;font-size:15px;color:#fff;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.play-close{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:#fff;font-size:21px;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.play-close:hover{border-color:var(--accent);background:var(--surface2);}
.play-frame iframe{flex:1;width:100%;border:0;background:#000;min-height:0;}
#interstitial.hidden{display:none;}

/* ---------- legacy full-screen play page (kept for completeness) ---------- */
.play-page{background:var(--bg);margin:0;height:100vh;height:100dvh;width:100%;position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;}
.play-bar{position:fixed;top:0;left:0;right:0;height:calc(52px + env(safe-area-inset-top));z-index:10;display:flex;align-items:center;gap:10px;padding:env(safe-area-inset-top) 12px 0;background:#10131a;border-bottom:1px solid var(--line);}
.play-back{color:var(--accent);font-weight:800;font-size:14px;}
.play-name{font-weight:900;font-size:15px;margin:0 auto;color:#fff;}
.play-restart{background:var(--grad);color:#0b0d12;border:0;padding:8px 14px;border-radius:999px;font-weight:800;font-size:12.5px;}
#stage-wrap{position:fixed;top:calc(52px + env(safe-area-inset-top));left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;touch-action:none;}
body.kb #stage-wrap{bottom:var(--kb-h,0px);}
#stage{position:relative;width:360px;height:600px;overflow:hidden;transform-origin:center center;background:var(--bg2);border-radius:10px;border:1px solid var(--line);}
#stage .sprite{position:absolute;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.hud{position:absolute;top:8px;left:10px;right:10px;z-index:5;display:flex;align-items:center;gap:8px;font-weight:900;font-size:15px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7);pointer-events:none;}
.hud .lives{margin-left:auto;color:#ff8ba7;}
.pw-badge{padding:2px 8px;border-radius:999px;font-size:11px;background:rgba(255,201,60,.25);border:1px solid rgba(255,201,60,.7);}
.pw-badge.bolt{background:rgba(56,224,255,.2);border-color:rgba(56,224,255,.7);}
.pw-flash{padding:2px 8px;border-radius:999px;font-size:12px;background:var(--grad);animation:pwpop .3s ease-out;}
@keyframes pwpop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.hud-hint{font-size:11px;font-weight:700;opacity:.75;}
.overlay{position:fixed;inset:0;z-index:20;background:rgba(6,7,10,.88);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px);}
.overlay.hidden{display:none;}
.overlay-card{background:var(--solid2);border:1px solid var(--line);border-radius:16px;padding:26px 24px;text-align:center;width:100%;max-width:320px;box-shadow:0 24px 60px rgba(0,0,0,.65);}
.overlay-card h2{margin:0 0 6px;font-size:23px;color:#fff;}
.overlay-card p{color:var(--muted);margin:0 0 18px;}
.ov-emoji{font-size:50px;line-height:1;margin-bottom:8px;}
.ov-emoji.fail{animation:ovShake .6s ease-in-out infinite;}
.ov-emoji.win{animation:ovPop .55s ease-in-out infinite alternate;}
.ov-reason{color:var(--muted);font-size:13.5px;margin:-2px 0 10px;}
@keyframes ovShake{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg) translateY(-5px)}}
@keyframes ovPop{from{transform:scale(.85)}to{transform:scale(1.15)}}
.mob-kb{position:fixed;left:0;right:0;bottom:0;z-index:18;display:flex;flex-direction:column;gap:6px;padding:8px 6px calc(8px + env(safe-area-inset-bottom));background:#10131a;border-top:1px solid var(--line);max-height:48vh;overflow:auto;}
.mob-kb .krow{display:flex;gap:6px;justify-content:center;}
.mob-kb button{flex:1 1 auto;min-width:0;max-width:56px;height:46px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:#fff;font-weight:800;font-size:18px;font-family:inherit;line-height:1;}
.mob-kb button:active{background:var(--accent);color:#0b0d12;transform:scale(.94);}
.mob-kb button.wide{max-width:92px;}
.mob-kb button.spacer{flex:1 1 auto;max-width:56px;background:none;border:0;visibility:hidden;}
.ov-img{width:112px;height:112px;margin:0 auto 4px;display:block;}
.ov-burst{height:30px;margin:2px 0 4px;display:flex;gap:8px;align-items:center;justify-content:center;}
.ov-burst span{font-size:26px;line-height:1;opacity:0;transform:translateY(8px) scale(.6);}
.ov-burst.show span{animation:ovBurst .7s cubic-bezier(.2,.9,.3,1.3) forwards;}
.ov-burst.show span:nth-child(1){animation-delay:.02s;}
.ov-burst.show span:nth-child(2){animation-delay:.12s;}
.ov-burst.show span:nth-child(3){animation-delay:.22s;}
.ov-burst.show span:nth-child(4){animation-delay:.32s;}
.ov-rank{display:none;margin:2px auto 14px;padding:6px 14px;border-radius:999px;font-weight:900;font-size:15px;width:fit-content;background:var(--surface2);color:#fff;}
.overlay-card.res-win .ov-rank{background:linear-gradient(90deg,#ffd23c,#ff8a3d);color:#3a1d00;}
.overlay-card.res-win{box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 0 2px rgba(255,210,60,.35) inset;}
.overlay-card.res-fail{box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 0 2px rgba(255,90,90,.3) inset;}
@keyframes ovBurst{to{opacity:1;transform:translateY(0) scale(1);}}

/* ---------- comments ---------- */
.comments{max-width:780px;margin:26px auto 0;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
.comments h2{margin:0 0 4px;font-size:19px;}
.comments .c-sub{margin:0 0 14px;color:var(--muted);font-size:13px;}
.comment-form{display:grid;gap:10px;margin:14px 0;}
.comment-form input,.comment-form textarea{width:100%;padding:11px 13px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font:inherit;}
.comment-form textarea{min-height:84px;resize:vertical;}
.comment-form .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.comment-form .err{color:var(--danger);font-size:13px;min-height:16px;}
.comment-form .ok{color:var(--ok);font-size:13px;min-height:16px;}
.btn-primary{display:block;width:100%;padding:12px;border:0;border-radius:999px;background:var(--grad);color:#0b0d12;font-weight:900;font-size:15px;box-shadow:none;cursor:pointer;}
.comment-form .btn-primary{width:auto;padding:10px 18px;font-size:13.5px;}
.btn-primary:active{transform:translateY(2px);}
.btn-ghost{display:block;color:var(--accent);font-weight:700;font-size:13.5px;}
.comments-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px;}
.comment{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);}
.c-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px;}
.c-name{font-weight:800;font-size:13.5px;}
.c-date{color:var(--muted);font-size:12px;}
.c-text{margin:0;font-size:14px;line-height:1.5;}

/* ---------- retention dashboard ---------- */
#retention-root{margin:18px 0 4px;}
.ret-daily{display:flex;align-items:center;gap:18px;background:linear-gradient(115deg,rgba(143,123,255,.22),rgba(183,242,61,.10));border:1px solid var(--line);border-radius:14px;padding:16px 18px;position:relative;overflow:hidden;}
.ret-daily::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 92% -10%,color-mix(in srgb,var(--cat) 34%,transparent),transparent 60%);pointer-events:none;}
.ret-daily .rd-info{position:relative;z-index:1;flex:1;min-width:0;}
.ret-daily .rd-flag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.5px;color:var(--accent);background:rgba(183,242,61,.12);padding:3px 9px;border-radius:999px;text-transform:uppercase;}
.ret-daily .rd-name{font-size:20px;font-weight:900;margin:7px 0 2px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ret-daily .rd-tag{color:var(--muted);margin:0;font-size:12.5px;}
.ret-daily .rd-sub{color:var(--accent);font-size:11.5px;margin:6px 0 10px;}
.ret-daily .rd-btn{display:inline-block;background:var(--grad);color:#0b0d12;font-weight:800;font-size:12.5px;padding:8px 16px;border-radius:999px;transition:transform .15s;}
.ret-daily .rd-btn:hover{transform:translateY(-2px);}
.ret-daily .rd-icon{position:relative;z-index:1;width:88px;height:88px;border-radius:12px;flex:0 0 auto;background:var(--solid);object-fit:cover;}
.ret-row{display:grid;grid-template-columns:1.05fr 1fr;gap:12px;margin-top:12px;}
.ret-streak{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;}
.ret-streak .rs-ico{font-size:24px;line-height:1;}
.ret-streak .rs-main{font-weight:800;color:#fff;font-size:14px;}
.ret-streak .rs-sub{color:var(--muted);font-size:11.5px;margin-top:3px;}
.ret-stats{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ret-stats .rs-cell{background:var(--surface2);border-radius:9px;padding:9px 11px;text-align:center;}
.ret-stats .rs-cell b{display:block;font-size:20px;font-weight:900;color:#fff;}
.ret-stats .rs-cell span{font-size:11px;color:var(--muted);}
.ret-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center;}
.ret-badge{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:11.5px;color:var(--muted);opacity:.55;transition:opacity .2s,border-color .2s;}
.ret-badge.on{opacity:1;color:#fff;border-color:var(--accent);box-shadow:0 0 12px rgba(183,242,61,.15);background:rgba(183,242,61,.12);}
.ret-badge .rb-ico{font-size:14px;}
.ret-hint{font-size:11px;color:var(--muted);}
.ret-section{margin-top:18px;}
.ret-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;}
.ret-sec-head h2{font-size:16px;font-weight:900;color:#fff;margin:0;}
.ret-sec-head a{color:var(--accent);font-size:12px;font-weight:700;}
.ret-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;}
.ret-strip::-webkit-scrollbar{display:none;}
.ret-strip .game-card{flex:0 0 190px;}
.ret-card-wrap{position:relative;flex:0 0 190px;}
.ret-time{position:absolute;bottom:8px;right:8px;background:rgba(9,11,16,.85);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;pointer-events:none;}
.ret-empty{color:var(--muted);font-size:12.5px;padding:14px 16px;background:var(--surface);border:1px dashed var(--line);border-radius:10px;text-align:center;}
.fav-heart{position:absolute;top:7px;right:7px;width:28px;height:28px;border:none;border-radius:50%;background:rgba(9,11,16,.7);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;backdrop-filter:blur(4px);transition:transform .15s,background .15s;}
.fav-heart svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;}
.fav-heart.on{background:var(--accent3);}
.fav-heart.on svg{fill:#fff;stroke:#fff;}
.fav-heart:hover{transform:scale(1.12);}
.fav-heart.pop{animation:heartpop .35s ease;}
@keyframes heartpop{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}
.ret-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--solid2);border:1px solid var(--line);border-radius:12px;padding:11px 15px;display:flex;align-items:center;gap:10px;box-shadow:0 16px 40px rgba(0,0,0,.6);opacity:0;transition:opacity .35s,transform .35s;z-index:999;max-width:90vw;}
.ret-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.ret-toast .rt-ico{font-size:22px;}
.ret-toast b{display:block;font-size:12px;color:var(--accent);}
.ret-toast span{font-size:12.5px;color:#fff;font-weight:700;}
@media (max-width:560px){.ret-row{grid-template-columns:1fr;}.ret-daily .rd-icon{width:70px;height:70px;}}

/* ---------- light theme (kept functional; recolored to the same framework) ---------- */
[data-theme="light"]{
  --bg:#f2f4f8; --bg2:#e8ebf2; --surface:#ffffff; --surface2:#e9edf4;
  --solid:#ffffff; --solid2:#f5f7fb; --text:#151a24; --muted:#5c6577;
  --accent:#5a8f00; --accent2:#6a4bff; --accent3:#d62f86;
  --footer-bg:#eceff5; --line:rgba(18,24,38,.12); --line2:rgba(18,24,38,.22);
  --grad:linear-gradient(120deg,#7fbf16 0%,#5a8f00 100%);
}
[data-theme="light"] body{background:var(--bg);color:var(--text);}
[data-theme="light"] .site-header,[data-theme="light"] .cat-nav-wrap,[data-theme="light"] .mobile-menu,[data-theme="light"] .play-top,[data-theme="light"] .mob-kb{background:#ffffff;}
[data-theme="light"] .brand,[data-theme="light"] .intro h1,[data-theme="light"] .page-hero h1,[data-theme="light"] .section-title,[data-theme="light"] .detail-head h1,[data-theme="light"] .game-card .name{color:#151a24;}
[data-theme="light"] .search-btn,[data-theme="light"] .icon-btn,[data-theme="light"] .theme-btn,[data-theme="light"] .hamburger{color:#151a24;}
[data-theme="light"] .site-header > .search-btn{background:#eef1f6;color:#5c6577;}
[data-theme="light"] .nav a{color:#5c6577;}
[data-theme="light"] .site-footer{border-top-color:var(--line);}
[data-theme="light"] .legal p,[data-theme="light"] .legal ul,[data-theme="light"] .detail-desc,[data-theme="light"] .review .r-text{color:#3c4557;}

/* Mobile header: search button + hamburger pinned to the right. */
@media (max-width:767px){
  .site-header > .search-btn{margin-left:auto;margin-right:0;}
  .site-header > .search-btn::after{content:none;}
  .site-header > .search-btn svg{order:0;margin-left:0;}
  /* Filters: let chips take a full row so they scroll cleanly on their own. */
  .filters{gap:10px;}
  .filters .chips{flex:1 1 100%;min-width:0;}
  .filters label{margin:0;}
}
body[data-page="search"] .content{padding-bottom:30px;}
body[data-page="search"] .site-footer{padding-bottom:24px;}
body[data-page="search"] .fab-stack{bottom:124px;}

/* ---------- home featured showcase: real gameplay video + several games ---------- */
.showcase{margin:22px 0 8px;}
.showcase-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px;}
.showcase-head h2{font-size:19px;font-weight:900;color:#fff;margin:0;letter-spacing:-.3px;}
.showcase-head h2 .arw{color:var(--accent);margin-left:4px;}
.showcase-head .sub{color:var(--muted);font-size:12px;}
.showcase-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.feature-video{position:relative;display:block;width:100%;border-radius:var(--radius);overflow:hidden;background:#0b0d12;aspect-ratio:16/9;cursor:pointer;}
.feature-video:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.feature-video video{width:100%;height:100%;object-fit:cover;display:block;}
.feature-video .fv-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,12,.15) 0%,rgba(6,8,12,0) 40%,rgba(6,8,12,.82) 100%);pointer-events:none;}
.feature-video .fv-tag{position:absolute;top:12px;left:12px;background:var(--accent);color:#0b0d12;font-size:10px;font-weight:900;letter-spacing:.7px;text-transform:uppercase;padding:5px 9px;border-radius:5px;}
.feature-video .fv-body{position:absolute;left:14px;right:14px;bottom:13px;display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;}
.feature-video .fv-body strong{font-size:clamp(15px,2vw,20px);font-weight:900;color:#fff;letter-spacing:-.4px;text-shadow:0 2px 10px rgba(0,0,0,.6);}
.feature-video .fv-body .fv-play{margin-left:auto;background:#fff;color:#0b0d12;font-weight:900;font-size:12.5px;padding:8px 14px;border-radius:999px;white-space:nowrap;}
.feature-video:hover .fv-body .fv-play{background:var(--accent);}
.showcase-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:start;}
/* Featured rows: one video cover on the first row, two game cards below. */
.showcase-head .view-all{margin-left:auto;}

/* Ad label: keep the lowercase "advertisement" wording, center it in the slot.
   Override lives outside the Chapter 11 block so that contract stays byte-for-byte intact. */
.ad-slot .ad-label{text-align:center;}