/* 1001 Oyunlar — styles
   Layout: sticky header (3D logo + search) with a category rail, 3D rotating featured stage, game rails, filterable grid; games open in a full-screen player */
:root{
  --night:#15122e; --night-2:#1b1740; --night-glass:rgba(21,18,46,.9); --scrim:rgba(10,8,26,.75);
  --panel:#221d48; --panel-2:#2c2659; --line:#3b3470;
  --ink:#fff6e6; --muted:#bdb3dc;
  --gold:#ffb51f; --gold-hi:#ffc84f; --gold-deep:#8a4a00;
  --rose:#ff4f8b; --teal:#22c38e; --sky:#41b8ff;
  --f-display:"Poppins","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Hind",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:16px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:140px}
html,body{background:var(--night);color:var(--ink)}
body{margin:0;font-family:var(--f-body);font-size:16px;line-height:1.5;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  background:radial-gradient(1200px 600px at 80% -10%,rgba(65,184,255,.10),transparent 60%),radial-gradient(900px 500px at 0% 0%,rgba(255,79,139,.10),transparent 60%),var(--night);background-attachment:fixed}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:16px}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--gold);color:var(--night);padding:8px 12px;border-radius:8px}
.skip:focus{left:16px}

/* Header */
.top{position:sticky;top:0;z-index:40;background:var(--night-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(59,52,112,.7)}
.bar{display:flex;align-items:center;gap:12px 18px;padding-block:10px;flex-wrap:wrap}
.logo{display:block;flex:none;line-height:0}
.logo img{height:46px;width:auto}
.search{position:relative;margin-left:auto;display:flex;align-items:center;gap:8px;flex:1 1 260px;max-width:460px;height:46px;padding-inline:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;color:var(--muted);box-shadow:inset 0 2px 0 rgba(0,0,0,.25)}
.search:focus-within{border-color:var(--gold)}
.search input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.search kbd{font:600 .72rem/1 var(--f-display);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 6px}
.btn3d{--c:var(--gold);--d:var(--gold-deep);--t:var(--night);display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border:0;border-radius:14px;cursor:pointer;
  font:700 .98rem/1 var(--f-display);color:var(--t);background:linear-gradient(180deg,#ffe08a,var(--c) 55%);box-shadow:0 5px 0 var(--d),0 9px 18px rgba(0,0,0,.35);
  text-decoration:none;white-space:nowrap;transition:transform .08s,box-shadow .08s}
.btn3d:hover{filter:brightness(1.05)}
.btn3d:active{transform:translateY(4px);box-shadow:0 1px 0 var(--d),0 3px 8px rgba(0,0,0,.35)}
.btn3d.rose{--c:var(--rose);--d:#7d1035;--t:#fff;background:linear-gradient(180deg,#ff9bc0,var(--rose) 55%)}
.btn3d.ghost{--d:#0b0920;--t:var(--ink);background:linear-gradient(180deg,#3a3374,var(--panel-2) 60%);border:1px solid var(--line)}
.btn3d.sm{height:40px;padding:0 14px;font-size:.9rem;border-radius:12px}
@media (max-width:680px){
  .logo img{height:38px}
  .search{order:3;flex-basis:100%;max-width:none;height:44px}
  .bar .btn3d{margin-left:auto;height:40px;padding:0 14px}
  .bar .btn3d span{display:none}
  .search kbd{display:none}
}

/* Category rail */
.cats{border-top:1px solid rgba(59,52,112,.6)}
.cats-in{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:9px;scroll-behavior:smooth}
.cats-in::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 7px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);font-weight:500;font-size:.93rem;line-height:1;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--dot,var(--gold));box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.chip small{font-size:.75rem;opacity:.75}
.chip:hover{color:var(--ink);border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--night);border-color:var(--ink)}

/* Hero with 3D stage */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px 48px;align-items:center;padding-block:36px 18px}
.hero-text{min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 .74rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--gold)}
.hero h1{font:800 clamp(2.3rem,5.4vw,4.1rem)/1.02 var(--f-display);letter-spacing:-.02em;margin:14px 0 14px;text-wrap:balance}
.hero h1 .n{display:inline-block;color:var(--gold);text-shadow:0 1px 0 #e08a00,0 2px 0 #c97800,0 3px 0 #b06800,0 4px 0 #8a4a00,0 5px 0 #6b3800,0 10px 18px rgba(0,0,0,.45)}
.hero p{color:var(--muted);font-size:1.12rem;max-width:44ch;margin:0 0 24px}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap}
.stats{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;padding:0;list-style:none;color:var(--muted);font-size:.93rem}
.stats b{font-family:var(--f-display);color:var(--ink);font-size:1.05rem;margin-right:4px}

.stage{position:relative;height:clamp(270px,32vw,390px);perspective:1100px;perspective-origin:50% 40%;overflow:hidden;overflow:clip;border-radius:24px;max-width:100%}
.stage-card{position:absolute;left:50%;top:50%;width:min(66%,440px);aspect-ratio:4/3;border-radius:20px;overflow:hidden;text-decoration:none;
  transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s,filter .7s;background:var(--panel-2);
  box-shadow:0 0 0 4px var(--panel),0 0 0 7px var(--line),0 30px 60px rgba(0,0,0,.55)}
.stage-card img{width:100%;height:100%;object-fit:cover}
.stage-card .cap{position:absolute;inset:auto 0 0;padding:70px 16px 14px;background:linear-gradient(transparent,rgba(15,12,34,.9) 45%,rgba(15,12,34,.98));display:flex;flex-direction:column;gap:2px}
.stage-card .cap b{font:700 1.15rem/1.15 var(--f-display)}
.stage-card .cap span{font-size:.85rem;color:var(--muted)}
.stage-card[data-pos="0"]{transform:translate(-50%,-50%) translateZ(60px);z-index:5;box-shadow:0 0 0 4px var(--panel),0 0 0 7px var(--gold),0 30px 60px rgba(0,0,0,.55)}
.stage-card[data-pos="1"]{transform:translate(-8%,-50%) translateZ(-120px) rotateY(-32deg);z-index:4;filter:brightness(.62)}
.stage-card[data-pos="-1"]{transform:translate(-92%,-50%) translateZ(-120px) rotateY(32deg);z-index:4;filter:brightness(.62)}
.stage-card[data-pos="2"]{transform:translate(20%,-50%) translateZ(-300px) rotateY(-40deg);z-index:3;filter:brightness(.4);opacity:.8}
.stage-card[data-pos="-2"]{transform:translate(-120%,-50%) translateZ(-300px) rotateY(40deg);z-index:3;filter:brightness(.4);opacity:.8}
.stage-card[data-pos="far"]{transform:translate(-50%,-50%) translateZ(-500px);opacity:0;pointer-events:none}
.stage-nav{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px;z-index:6}
.stage-nav button{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:var(--line);cursor:pointer}
.stage-nav button[aria-current="true"]{background:var(--gold);width:26px;border-radius:6px}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-block:22px 6px}.stage{height:clamp(220px,58vw,320px);margin-top:6px}}

/* Sections & rails */
.sec{margin-top:40px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sec-head h2{display:flex;align-items:center;gap:10px;margin:0;font:700 1.45rem/1.15 var(--f-display);letter-spacing:-.01em}
.sec-head h2 i{width:12px;height:26px;border-radius:4px;background:var(--dot,var(--gold));box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.sec-head h2 small{font:500 .9rem var(--f-body);color:var(--muted)}
.sec-tools{display:flex;align-items:center;gap:8px}
.more{color:var(--gold);font-weight:600;text-decoration:none;background:none;border:0;cursor:pointer;padding:6px 4px}
.more:hover{text-decoration:underline}
.arrow{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--panel);cursor:pointer}
.arrow:hover{border-color:var(--muted)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,18vw,210px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 4px 16px;margin-inline:-4px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rail > *{scroll-snap-align:start}
@media (max-width:560px){.rail{grid-auto-columns:42vw;gap:12px}.arrow{display:none}}

/* Game cards (3D tilt on hover) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:18px}
@media (max-width:560px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.card{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit;perspective:700px}
.card .th{position:relative;display:block;aspect-ratio:4/3;max-width:100%;border-radius:var(--radius);overflow:hidden;background:var(--panel-2);
  border:1px solid var(--line);box-shadow:0 6px 0 #0d0b22,0 10px 20px rgba(0,0,0,.35);transform-origin:50% 100%;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.card .th img{width:100%;height:100%;object-fit:cover}
.card .th::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.22),transparent 40%);opacity:0;transition:opacity .25s}
.card .play{position:absolute;right:10px;bottom:10px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--night);
  background:linear-gradient(180deg,#ffe08a,var(--gold));box-shadow:0 3px 0 var(--gold-deep);opacity:0;transform:translateY(6px) scale(.85);transition:opacity .2s,transform .2s}
.card:hover .th,.card:focus-visible .th{transform:rotateX(8deg) translateY(-6px);border-color:var(--gold);box-shadow:0 12px 0 #0d0b22,0 22px 30px rgba(0,0,0,.45)}
.card:hover .th::after,.card:focus-visible .th::after{opacity:1}
.card:hover .play,.card:focus-visible .play{opacity:1;transform:none}
.card:focus-visible{outline:none}
.card:focus-visible .th{outline:3px solid var(--gold);outline-offset:3px}
.card .nm{margin-top:10px;font:600 .96rem/1.25 var(--f-display);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .ct{font-size:.8rem;color:var(--muted);margin-top:2px}

.browse-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px;margin:48px 0 16px}
.browse-head h2{margin:0;font:800 clamp(1.6rem,3.2vw,2.2rem)/1.1 var(--f-display);letter-spacing:-.01em}
.browse-head p{margin:0;color:var(--muted)}
.load-more{display:flex;justify-content:center;margin-top:28px}
.empty{padding:40px 0;color:var(--muted);text-align:center}

/* Ad slots */
.ad{margin-top:32px;min-height:0;text-align:center}
.ad:empty{display:none}

/* About + footer */
.about{margin-top:56px;padding:26px;border-radius:20px;background:linear-gradient(180deg,var(--panel),var(--night-2));border:1px solid var(--line)}
.about h2{margin:0 0 10px;font:700 1.35rem/1.2 var(--f-display)}
.about p{margin:0 0 10px;color:var(--muted);max-width:80ch}
.foot{margin-top:56px;border-top:1px solid var(--line);background:rgba(10,8,26,.4)}
.foot-in{display:grid;grid-template-columns:auto 1fr;gap:20px 40px;align-items:start;padding-block:30px 40px}
.foot-in > img{height:84px;width:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:12px}
.foot-links a,.foot-links summary{color:var(--muted);text-decoration:none;cursor:pointer}
.foot-links a:hover,.foot-links summary:hover{color:var(--ink);text-decoration:underline}
.foot p{margin:0;color:var(--muted);font-size:.88rem;max-width:80ch}
.foot details{color:var(--muted);font-size:.9rem}
.foot details[open]{flex-basis:100%}
.foot details > div{margin-top:10px;padding:16px;border-radius:12px;background:var(--panel);border:1px solid var(--line);max-width:80ch}
.foot details h3{margin:12px 0 4px;color:var(--ink);font:600 1rem var(--f-display)}
.foot details p{font-size:.9rem;margin-bottom:6px}
@media (max-width:620px){.foot-in{grid-template-columns:1fr}.foot-in > img{height:70px}}

/* Back to top */
.totop{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;width:48px;height:48px;padding:0;border-radius:14px;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s}
.totop.show{opacity:1;pointer-events:auto;transform:none}

/* Player */
.player{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--night);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.pl-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--night-2)}
.pl-bar .ibtn{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--panel);cursor:pointer}
.pl-bar .ibtn:hover{border-color:var(--muted)}
.pl-title{flex:1;min-width:0}
.pl-title h2{margin:0;font:700 1.2rem/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-title span{font-size:.85rem;color:var(--sky)}
.pl-body{flex:1;min-height:0;overflow-y:auto;scroll-behavior:smooth}
.pl-stage{display:grid;place-items:center;padding:16px;height:calc(100% - 0px);min-height:60vh}
.pl-frame{position:relative;width:100%;max-width:calc((100vh - 170px) * var(--ar));aspect-ratio:var(--ar);background:#000;border-radius:14px;overflow:hidden;box-shadow:0 0 0 3px var(--panel),0 20px 50px rgba(0,0,0,.5)}
.pl-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pl-load{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-weight:500}
.pl-frame:fullscreen{border-radius:0;max-width:none;width:100vw;height:100vh;aspect-ratio:auto}
.pl-frame.pseudo{position:fixed;inset:0;z-index:70;max-width:none;width:100vw;height:100vh;aspect-ratio:auto;border-radius:0}
.pl-exit{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:10px;z-index:71}
.pl-tip{margin:0 auto;max-width:900px;padding:0 16px;color:var(--muted);font-size:.9rem;text-align:center}
.pl-more{max-width:1280px;margin:18px auto 0;padding:0 16px 30px}
.pl-more h3{margin:0 0 10px;font:700 1.15rem var(--f-display)}
.rotate-tip{display:none}
@media (max-width:700px) and (orientation:portrait){.rotate-tip{display:block}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rail,.cats-in,.pl-body{scroll-behavior:auto}
  .stage-card,.card .th,.card .play,.totop,.btn3d{transition:none}
  .card:hover .th{transform:none}
}