/* ===== Oyun sayfasi: yalniz yerlesim. Renk/font/golge portal.css degiskenlerinden gelir ===== */
.top,.cats{position:static}
.cats{z-index:5}
.play-wrap{max-width:2000px;margin:0 auto;padding:16px var(--pad) 0}
.pl-grid{--arn:1.7778;--chrome:232px;--side:340px;
  --fw:calc((100dvh - var(--chrome)) * var(--arn));  /* ekrana kaydirmadan sigan oyun genisligi */
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pad);align-items:start;justify-content:center}
/* sutun = oyun genisligi: baslik cubugu ve oyun ayni hizada baslar/biter, yanlarda bosluk kalmaz */
.pl-stage{min-width:0;width:100%;max-width:max(480px,var(--fw));margin-inline:auto}

.pl-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px;min-height:46px}
.pl-bar .back{flex:none}
.pl-bar h1{font-size:clamp(20px,1.6vw + 6px,30px);line-height:1.1;font-weight:800;min-width:0;flex:1;display:flex;align-items:center;gap:12px}
.pl-bar h1 .t{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.pl-bar .badge{position:static;flex:none;pointer-events:none}
.pl-tools{display:flex;gap:10px;flex:none}
.pbtn.fav[aria-pressed="true"]{background:var(--paper)}
.pbtn.fav[aria-pressed="true"] svg{color:var(--coral)}
.pbtn.fav[aria-pressed="true"] svg path,.pbtn.fav[aria-pressed="true"] svg use{fill:currentColor}

/* oyun cercevesi: sutunu tam doldurur (sutun genisligi zaten oyun genisligi) */
.pl-frame{position:relative;aspect-ratio:var(--arn,1.7778);width:100%;
  border:var(--bw) solid var(--stroke);border-radius:var(--r-lg);box-shadow:var(--card-sh);background:var(--bg2);overflow:hidden}
.pl-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg2);display:block}
.pl-frame .loading{position:absolute;inset:0;display:grid;place-items:center;font:800 18px var(--head);color:var(--muted)}
.pl-frame.fs{position:fixed;inset:0;z-index:200;width:100%!important;height:100%!important;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.pl-frame:fullscreen{width:100%!important;height:100%!important;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.pl-frame .exitfs{position:absolute;right:12px;top:12px;z-index:5;display:none}
.pl-frame.fs .exitfs,.pl-frame:fullscreen .exitfs{display:inline-flex}

/* yakinda / bulunamadi */
.soon{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;isolation:isolate}
.soon .bgc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(14px) saturate(1.1);transform:scale(1.1);z-index:-2;opacity:.9}
.soon::before{content:"";position:absolute;inset:0;background:rgba(21,16,42,.62);z-index:-1}
.soon .box{max-width:520px;background:var(--paper);color:var(--ink);border:var(--bw) solid var(--stroke);border-radius:var(--r-lg);box-shadow:var(--card-sh);padding:24px 26px}
.soon h2{font-size:34px;font-weight:800;margin-bottom:6px}
.soon p{margin:0 0 16px;color:var(--ink2);font-weight:700}
.soon .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* yan / benzer oyunlar */
.pl-side{min-width:0}
.pl-side h2{font-size:22px;font-weight:800;display:flex;align-items:center;gap:10px;margin:0 0 12px}
.sib{display:block;margin-bottom:22px}
.sib .lab{display:block;font:800 15px var(--body);color:var(--ink2);margin-bottom:8px}
.sib .lab b{color:var(--coral);font-family:var(--head);font-size:17px}
.sib .cv{aspect-ratio:16/9}
.sib .ov{opacity:1;padding:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,10,36,.88),rgba(18,10,36,.15) 60%,transparent);color:#fff}
.sib .ov .nm{font:800 22px/1.1 var(--head);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.sib .ov .pl{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 14px 0 10px;border-radius:999px;background:var(--coral);color:#fff;border:2px solid #2A2140;font:800 14px var(--body);flex:none}
.sib .ov .pl svg{width:14px;height:14px}
.slist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
.sitem{display:block;min-width:0}
.sitem .cap{display:block;margin-top:7px;font:800 14px/1.2 var(--body);color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sitem .badge,.sib .cv .badge{left:auto;right:6px;top:6px;bottom:auto;height:20px;font-size:10px;padding:0 7px;border-width:1.5px}

/* alt bilgi bolumleri */
.pl-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--pad);margin-top:34px}
.pcard{background:var(--paper);border:var(--bw) solid var(--stroke);border-radius:var(--r-lg);box-shadow:var(--card-sh);padding:20px 22px}
.pcard h2{font-size:22px;font-weight:800;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pcard p{margin:0 0 10px;color:var(--ink2);font-weight:600}
.pcard p:last-child{margin-bottom:0}
.pcard ul,.pcard ol{margin:0 0 10px;padding-left:22px;color:var(--ink2);font-weight:600}
.pcard li{margin:3px 0}
.pcard h3{font-size:18px;margin:14px 0 6px}
.pcard a{color:var(--link);text-decoration:underline}
.pcard p[data-ph]{color:var(--muted);font-style:italic}

.sel-lite{display:none}
/* >=1280: [oyun][yan sutun] yan yana, ikisi birlikte ortalanir; oyun sutunu sigdigi kadar buyur, yan sutun hemen yaninda */
@media (min-width:1280px){
  .pl-grid{grid-template-columns:minmax(0,min(max(480px,var(--fw)),calc(100% - var(--side) - var(--pad)))) var(--side)}
  .pl-stage{max-width:none;margin:0}
}
@media (min-width:1700px){
  .pl-grid{--side:400px}
  .slist{gap:18px 14px}
}
/* <1280: benzer oyunlar oyunun altinda yatay serit */
@media (max-width:1279px){
  .pl-side h2{font-size:20px}
  .sib{display:none}
  .sib.in-strip{display:block}
  .slist{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 10px 12px 4px;margin:-4px -10px -12px -4px}
  .slist::-webkit-scrollbar{display:none}
  .sitem{flex:none;width:200px;scroll-snap-align:start}
}
/* tablet: yukseklik siniri yok, oyun tam genislik (iframe kucuk kalmasin; sayfa az kayar) */
@media (max-width:1019px){
  .pl-stage{max-width:none}
}
@media (max-width:1279px) and (min-width:721px){
  .sibwrap{margin-bottom:16px}
}
@media (max-width:900px){.pl-info{grid-template-columns:1fr}.pl-bar h1{font-size:24px}}
.pl-bar h1{view-transition-name:pk-title}
/* mobil: oyun kenardan kenara, ust bar kucuk */
@media (max-width:720px){
  .play-wrap{padding-top:10px}
  .pl-frame-slot{display:block;margin:0 calc(-1*var(--pad))}
  .pl-frame{width:100%;aspect-ratio:auto;height:max(520px,calc(100dvh - 228px));border-left:0;border-right:0;border-radius:0;box-shadow:none}
  .pl-bar{gap:8px;margin-bottom:8px}
  .pl-bar .back,#themeBtn2{display:none}
  .pl-bar h1{font-size:21px;gap:8px}
  .pl-tools{gap:7px;margin-left:auto}
  .pl-tools .pbtn{width:40px;padding:0}
  .pl-tools .pbtn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .top .search,.top .rndm{display:none}
  .soon h2{font-size:26px}
  .soon .box{padding:18px}
  .pl-bar .badge{height:22px;font-size:10px}
  .sitem{width:150px}
  .top .wrap{padding-top:8px;padding-bottom:4px}
  .cats{padding-bottom:10px}
  .chip{height:38px}
  .chip .ci{width:28px;height:28px}
}