/* Games hub (/games) and game pages (/games/<slug>) */
.game-hero{padding:132px 0 26px}
.game-hero h1{font-size:clamp(38px,6vw,68px);letter-spacing:-.015em}
.crumb{margin:0 0 22px;font-size:14px;color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--accent)}
.crumb span{opacity:.5;margin:0 4px}
.noscroll,.noscroll body{overflow:hidden}

/* hub filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.filters button{background:transparent;border:1px solid var(--line);color:var(--muted);font:400 14px var(--sans);padding:7px 16px;border-radius:999px;cursor:pointer;transition:.2s}
.filters button:hover{color:var(--text)}
.filters button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* cards */
.ggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:14px}
.ggrid.small{grid-template-columns:repeat(4,1fr);gap:18px}
.gcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--text);transition:transform .25s,border-color .25s,box-shadow .25s}
.gcard:hover{transform:translateY(-4px);border-color:rgba(71,163,220,.55);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.gcard[hidden]{display:none}
.gcard.big{grid-column:1/-1;flex-direction:row}
.gcard.big .gshot{flex:0 0 60%}
.gcard.big .gbody{padding:34px 36px;justify-content:center}
.gcard.big .gtitle{font-size:clamp(30px,3.4vw,44px)}
.gshot{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.gshot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.gcard:hover .gshot img{transform:scale(1.04)}
.gplay{position:absolute;right:14px;bottom:14px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:14px;padding:8px 16px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:0;transform:translateY(6px);transition:.25s}
.gcard:hover .gplay,.gcard:focus-visible .gplay{opacity:1;transform:none}
.gbody{display:flex;flex-direction:column;gap:10px;padding:22px 24px 22px;flex:1}
.gmeta{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.gtitle{font-family:var(--serif);font-size:26px;line-height:1.15}
.gshort{color:var(--muted);font-size:15.5px;line-height:1.6}
.gfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px}
.gtags{display:flex;flex-wrap:wrap;gap:8px}
.gtags span{border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:12.5px;color:var(--muted)}
.gstat{font-size:13px;color:var(--muted);white-space:nowrap}
.gstat b{font-weight:500;color:var(--accent-ink);background:var(--accent);padding:2px 10px;border-radius:999px;font-size:12px}
.ggrid.small .gbody{padding:14px 16px 16px;gap:6px}
.ggrid.small .gtitle{font-size:19px}
.ggrid.small .gshort,.ggrid.small .gtags{display:none}
.ggrid.small .gplay{font-size:12.5px;padding:6px 12px;right:10px;bottom:10px}
.gnote{margin-top:34px;color:var(--muted);font-size:15px}

/* game page */
.gpage{padding-top:112px}
.gframe{position:relative;background:#000;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.gframe iframe{display:block;width:100%;border:0;background:#111;height:min(820px,calc(100svh - 170px));min-height:520px}
.gframe[data-ratio="16 / 9"] iframe,.gframe[data-ratio="16 / 10"] iframe{height:auto;aspect-ratio:16/9;max-height:calc(100svh - 170px)}
.gframe[data-ratio="16 / 10"] iframe{aspect-ratio:16/10}
.poster{position:relative;display:block;width:100%;aspect-ratio:16/9;max-height:calc(100svh - 170px);border:0;padding:0;background:#000;cursor:pointer;overflow:hidden}
.poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s,filter .3s}
.poster:hover img{transform:scale(1.025);filter:brightness(.9)}
.poster::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(0,0,0,0) 0,rgba(0,0,0,.35) 75%)}
.pbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;gap:14px;background:var(--gaccent,var(--accent));color:#111;font:600 22px var(--sans);padding:16px 30px 16px 18px;border-radius:999px;box-shadow:0 10px 0 rgba(0,0,0,.28),0 20px 50px rgba(0,0,0,.45);transition:transform .2s}
.poster:hover .pbtn{transform:translate(-50%,-50%) scale(1.05)}
.pbtn i{width:44px;height:44px;border-radius:50%;background:#111;display:grid;place-items:center}
.pbtn i::before{content:"";border-left:15px solid var(--gaccent,var(--accent));border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.phint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:1;color:#fff;font-size:14px;background:rgba(0,0,0,.55);padding:6px 14px;border-radius:999px;white-space:nowrap}
.gbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;background:var(--surface);color:var(--muted);font-size:14px}
.gbar-l b{color:var(--text);font-weight:500}.dot{margin:0 8px;opacity:.5}
.gbtns{display:flex;gap:10px;flex-wrap:wrap}
.btn.sm{padding:8px 16px;font-size:14px}
.closefs{display:none;position:absolute;top:max(10px,env(safe-area-inset-top));left:10px;z-index:5;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:18px;cursor:pointer}
.gframe:fullscreen,.gframe.immersive{border-radius:0;border:0}
.gframe:fullscreen iframe,.gframe.immersive iframe{height:100%!important;max-height:none!important;aspect-ratio:auto!important;min-height:0;flex:1}
.gframe:fullscreen .gbar,.gframe.immersive .gbar{display:none}
.gframe:fullscreen .closefs,.gframe.immersive .closefs{display:block}
.gframe.immersive{position:fixed;inset:0;z-index:1000;height:100svh;height:100dvh}

.ghead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:38px 0 10px}
.ghead h1{font-size:clamp(36px,5vw,58px);letter-spacing:-.015em}
.ghead h1 em{font-style:normal;color:var(--gaccent,var(--accent))}
.ghead .eyebrow{color:var(--gaccent,var(--accent))}.ghead .eyebrow::before{background:var(--gaccent,var(--accent))}
.tagline{color:var(--muted);font-size:19px;margin:12px 0 0}
.gactions{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.likebtn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);color:var(--text);font:500 15px var(--sans);padding:10px 18px;border-radius:999px;cursor:pointer;transition:.2s}
.likebtn:hover{border-color:#ff4d6d}
.likebtn .heart{color:var(--muted);font-size:17px;transition:.2s}
.likebtn.on{border-color:#ff4d6d;background:rgba(255,77,109,.12)}
.likebtn.on .heart{color:#ff4d6d}
.likebtn.pop .heart{animation:pop .4s}
@keyframes pop{50%{transform:scale(1.5)}}
.likebtn .cnt{color:var(--muted)}
.plays{color:var(--muted);font-size:14px}
.gactions{flex-direction:row;align-items:center;flex-wrap:wrap}
.share{display:flex;flex-wrap:wrap;gap:6px}
.share a,.share button{border:1px solid var(--line);background:transparent;color:var(--muted);font:400 13px var(--sans);padding:7px 12px;border-radius:999px;cursor:pointer}
.share a:hover,.share button:hover{color:var(--text);border-color:var(--accent)}

.gcols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:42px;margin-top:30px;align-items:start}
.gsec{margin-bottom:56px}
.gsec h2{font-size:clamp(26px,3vw,36px);margin-bottom:18px}
.gsec>p{color:var(--muted);margin:0 0 14px;max-width:760px}
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.feat .fi{font-size:26px;line-height:1}
.feat h3{font-family:var(--sans);font-weight:500;font-size:17px;margin:12px 0 6px}
.feat p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.gallery{display:grid;grid-template-columns:repeat(3,1fr) .55fr;gap:12px;align-items:stretch}
.shotbtn{position:relative;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:zoom-in;background:var(--surface-2)}
.shotbtn img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;transition:transform .4s}
.shotbtn.phone img{aspect-ratio:auto;object-position:top}
.shotbtn:hover img{transform:scale(1.05)}
.ptag{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;padding:2px 8px;border-radius:999px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.how-grid.two{grid-template-columns:repeat(2,1fr)}
.how-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.how-card h3{font-size:22px;margin-bottom:14px}
.how-card ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;color:var(--muted);font-size:15px}
.how-card li{display:flex;gap:12px;align-items:baseline}
.how-card li b{color:var(--text);font-weight:500;white-space:nowrap;min-width:100px}
.tipsh{font-size:22px;margin:28px 0 12px}
.tiplist{margin:0;padding-left:20px;color:var(--muted);display:grid;gap:8px}
.tiplist li::marker{color:var(--gaccent,var(--accent))}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 20px 18px;color:var(--muted)}

.gside{position:sticky;top:96px}
.infocard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.infocard>img{display:block;width:100%;height:auto}
.btn.wide{display:flex;justify-content:center;margin:18px 18px 6px;width:calc(100% - 36px);background:var(--gaccent,var(--accent));color:#111}
.infocard dl{margin:8px 0 0;padding:6px 20px 4px}
.infocard dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.infocard dl div:last-child{border:0}
.infocard dt{color:var(--muted)}
.infocard dd{margin:0;text-align:right;color:var(--text)}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;padding:4px 20px 20px}
.tagpill{border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:12.5px;color:var(--muted)}
.tagpill:hover{color:var(--accent);border-color:var(--accent)}
.more{margin-top:30px}
.more h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:22px}
.lightbox{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:20px;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lbx{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:20px;cursor:pointer}

@media (max-width:1100px){.ggrid.small{grid-template-columns:repeat(2,1fr)}.gcols{grid-template-columns:1fr}.gside{position:static;margin-top:-20px;margin-bottom:40px}.infocard>img{display:none}}
@media (max-width:900px){
  .game-hero{padding-top:112px}
  .how-grid,.how-grid.two{grid-template-columns:1fr}
  .gcard.big{flex-direction:column}
  .gcard.big .gshot{flex:none}
  .gcard.big .gbody{padding:22px 24px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .shotbtn.phone{grid-row:span 2}
  .ghead{align-items:flex-start}
}
@media (max-width:700px){
  .gpage{padding-top:96px}
  .ggrid,.feats{grid-template-columns:1fr}
  .gframe{border-radius:14px}
  .gframe:not(.immersive) iframe{height:calc(100svh - 150px);aspect-ratio:auto!important;max-height:none;min-height:440px}
  .poster{aspect-ratio:16/10}
  .pbtn{font-size:18px;padding:12px 22px 12px 12px}.pbtn i{width:36px;height:36px}
  .phint{font-size:12px;bottom:12px}
  .gbar-l{display:none}
  .how-card li{flex-direction:column;gap:2px}
  .gplay{opacity:1;transform:none}
  .gallery{grid-template-columns:1fr 1fr}
}