*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#eef1ff;color:#1d1b3a}
a{color:inherit}header{background:linear-gradient(90deg,#3b0a8a,#7c2bd9 55%,#d6339b);color:#fff;padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}

nav a{color:#fff;text-decoration:none;margin-left:12px;font-weight:600;font-size:.9rem}
main{max-width:1100px;margin:auto;padding:14px}
#search{width:100%;padding:12px 16px;border-radius:30px;border:2px solid #d8d3ff;font-size:1rem;margin:6px 0 10px}
.cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}.cats button{border:0;border-radius:20px;padding:8px 16px;font-weight:700;background:#fff;cursor:pointer;white-space:nowrap}.cats button.on{background:#6a3cff;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:12px;margin-top:10px}
.card{border-radius:18px;overflow:hidden;text-decoration:none;background:#fff;box-shadow:0 4px 12px #0001;transition:transform .15s}.card:hover{transform:translateY(-4px) scale(1.03)}
.thumb{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:2.8rem}.card b{display:block;padding:8px 10px 2px}.card small{display:block;padding:0 10px 10px;color:#777}
.ad-slot{border:2px dashed #bbb;color:#999;text-align:center;padding:18px;margin:14px 0;border-radius:12px;font-size:.8rem}
footer{text-align:center;padding:20px;color:#666;font-size:.85rem}footer a{margin:0 6px}
#cookie{position:fixed;bottom:0;left:0;right:0;background:#1d1b3a;color:#fff;padding:12px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;z-index:9;font-size:.9rem}
#cookie button,.btn{background:#ffd23f;border:0;border-radius:10px;padding:8px 16px;font-weight:800;cursor:pointer;color:#1d1b3a;font-size:1rem}
.gamebox{background:#fff;border-radius:18px;padding:12px;text-align:center;box-shadow:0 4px 12px #0001}
.bar{display:flex;justify-content:space-around;align-items:center;gap:8px;margin-bottom:8px;font-weight:700;flex-wrap:wrap}
canvas{max-width:100%;touch-action:none;border-radius:12px;background:#1d1b3a}
.howto{background:#fff;border-radius:18px;padding:14px 18px;margin-top:14px;line-height:1.6}
.pad{display:grid;grid-template-columns:repeat(3,56px);gap:6px;justify-content:center;margin-top:8px}.pad button{height:50px;font-size:1.4rem;border:0;border-radius:10px;background:#e4e0ff}
.msg{min-height:1.4em;font-weight:800;color:#6a3cff}
.page{background:#fff;border-radius:18px;padding:18px;line-height:1.7}
.board{display:grid;gap:6px;margin:auto;max-width:400px}
#board.mem{grid-template-columns:repeat(4,1fr)}.mc{aspect-ratio:1;font-size:2rem;border:0;border-radius:12px;background:linear-gradient(135deg,#6a3cff,#ff4fa3);cursor:pointer}.mc.o{background:#fff3c4}
#board.wrd{grid-template-columns:repeat(5,1fr);max-width:220px}.lt{aspect-ratio:1;border:2px solid #d3d6da;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.3rem}
#kb div{display:flex;justify-content:center;gap:3px;margin:3px 0}#kb button{flex:1;max-width:38px;height:46px;border:0;border-radius:6px;background:#d3d6da;font-weight:800;padding:0}#kb .wide{max-width:60px;font-size:.75rem}
#board.mine{grid-template-columns:repeat(9,1fr);gap:2px;max-width:380px}.mn{aspect-ratio:1;border:0;border-radius:4px;background:#8fa3c8;font-weight:900;font-size:1rem;padding:0}.mn.o{background:#eef1ff}
#board.xo{grid-template-columns:repeat(3,1fr);max-width:300px}.xc{aspect-ratio:1;font-size:3rem;font-weight:900;border:0;border-radius:14px;background:#eef1ff}

.logo{display:flex;align-items:center;gap:10px;text-decoration:none;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.logo:hover{transform:translateY(-2px) scale(1.04)}.logo:hover img{animation:lgb .6s ease}
@keyframes lgb{40%{transform:translateY(-5px) rotate(-6deg)}70%{transform:translateY(1px) rotate(3deg)}}
.logo img{width:46px;height:46px;filter:drop-shadow(0 0 8px #ffd84d88) drop-shadow(0 2px 3px #0007)}
.logo .wm{position:relative;font-family:"Nunito","Baloo 2","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;font-weight:900;font-size:1.7rem;letter-spacing:.3px;line-height:1;
background:linear-gradient(100deg,#fff 0%,#ffe27a 18%,#ffb800 32%,#ff6fd8 50%,#c77dff 66%,#ffd84d 82%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:wmg 6s linear infinite;filter:drop-shadow(0 0 6px #ff6fd866) drop-shadow(0 2px 0 #3b0a6a);overflow:hidden}

@keyframes wmg{to{background-position:-250% 0}}@keyframes wms{0%,55%{background-position:150% 0}100%{background-position:-150% 0}}
@media(max-width:520px){.logo img{width:38px;height:38px}.logo .wm{font-size:1.35rem}nav a{margin-left:8px;font-size:.8rem}header{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.logo .wm,}

/* ===== v2 eklemeleri: reklam alanları, premium kartlar, rozetler, oyun kabuğu ===== */
/* Reklam alanları: sabit boyut, CLS yok */
.ad-slot{display:flex;align-items:center;justify-content:center;width:100%;max-width:728px;height:90px;min-height:90px;margin:16px auto;padding:0;border:0;border-radius:12px;overflow:hidden;position:relative;contain:layout size;
background:linear-gradient(135deg,#f6f4ff,#ece8ff);box-shadow:inset 0 0 0 1px #d9d2ff}
.ad-slot::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,#ffffff00 0 12px,#ffffff66 12px 24px);opacity:.6}
.ad-slot .ad-label{position:relative;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#a79fd6;font-weight:700}
.ad-slot ins{position:absolute;inset:0;display:block;width:100%;height:100%}
@media(max-width:760px){.ad-slot{max-width:320px;height:100px;min-height:100px}}
/* Kart detayları */
.card{display:flex;flex-direction:column;color:#1d1b3a}.card h3{margin:0;padding:8px 10px 2px;font-size:.95rem;line-height:1.25}.card .cat{display:block;padding:0 10px 2px;color:#6a3cff;font-size:.72rem;font-weight:700}
.card p{margin:0;padding:0 10px 10px;color:#666;font-size:.75rem;line-height:1.35}
.card a,.pk-card2 a{text-decoration:none}.thumb,.th{position:relative}
.cats button{color:#1d1b3a}.empty{padding:10px;color:#666}
[hidden]{display:none!important}
.hs-badge{position:absolute;top:6px;left:6px;background:#1d1b3acc;color:#ffd84d;font-size:.72rem;font-weight:800;padding:3px 8px;border-radius:20px;line-height:1.2;box-shadow:0 0 0 1px #ffd84d66;backdrop-filter:blur(3px)}
/* Premium Öne Çıkanlar kartları */
.pk-card2{position:relative;isolation:isolate;display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;box-shadow:0 6px 18px #0005,0 0 0 1px #ffd84d44}
.pk-card2::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:18px;background:conic-gradient(from var(--a,0deg),#ffd84d,#ff4fd8,#7c2bd9,#00e5ff,#ffd84d);animation:pkspin 4s linear infinite;opacity:.55;filter:blur(6px)}
.pk-card2::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:15px;background:#1c0b3d}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes pkspin{to{--a:360deg}}
.pk-card2:hover,.pk-card2:focus-within{transform:translateY(-6px) scale(1.035);box-shadow:0 14px 32px #0007,0 0 24px #ffd84d88}.pk-card2:hover::before{opacity:1}
.pk-card2 .th{transition:transform .4s}.pk-card2:hover .th{transform:scale(1.06)}
.pk-card2 .thw{overflow:hidden;border-radius:15px 15px 0 0}
.pk-card2 h3{margin:0;padding:8px 10px 0;font-size:1rem}.pk-card2 p{margin:0;padding:2px 10px 6px;color:#d6c7ff;font-size:.78rem;flex:1}
.pk-play{display:block;margin:4px 10px 12px;padding:9px 10px;border-radius:12px;text-align:center;font-weight:900;font-size:.9rem;color:#3b0a6a;background:linear-gradient(180deg,#ffe066,#ffb800);box-shadow:0 3px 0 #b37a00,0 0 14px #ffd84d66;transition:transform .15s,box-shadow .15s}
.pk-card2:hover .pk-play{animation:pkpulse 1s ease-in-out infinite}
@keyframes pkpulse{50%{box-shadow:0 3px 0 #b37a00,0 0 26px #ffd84dcc;transform:scale(1.04)}}
.pk-card2 .stretch::after{content:"";position:absolute;inset:0;z-index:1}
@media(prefers-reduced-motion:reduce){.pk-card2::before,.pk-card2:hover .pk-play{animation:none}.pk-card2,.pk-card2 .th{transition:none}}
/* Oyun sayfaları: pull-to-refresh / kaydırma engeli */
html.gs-page,html.gs-page body{overscroll-behavior:none}
.gs-root,.gs-root canvas{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
.gs-root input{user-select:text;-webkit-user-select:text}
.gs-tools{display:inline-flex;gap:6px}
.gs-btn{width:40px;height:40px;border:0;border-radius:50%;background:#3b0a8a;color:#fff;font-size:1.05rem;cursor:pointer;padding:0;line-height:1}
.gamebox:fullscreen,.gamebox:-webkit-full-screen{background:#fff;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:0}
.gamebox:fullscreen canvas{max-height:calc(100vh - 160px);width:auto}
.gs-fs{position:fixed!important;inset:0!important;z-index:1000!important;max-width:none!important;width:100%!important;height:100%!important;margin:0!important;border-radius:0!important;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:env(safe-area-inset-top)}
.gamebox.gs-fs{background:#fff}.gamebox.gs-fs canvas{max-height:calc(100vh - 170px);width:auto}
.pk-wrap.gs-fs{background:#000}.pk-wrap.gs-fs canvas{max-height:100vh;width:auto;max-width:100vw}
html.gs-lock,html.gs-lock body{overflow:hidden;height:100%}
/* Türkçe sanal klavye: 320px'e kadar tam sığar */
#kb{width:100%;max-width:500px;margin-left:auto;margin-right:auto}
#kb div{display:flex;gap:4px;margin:4px 0;width:100%}
#kb button{flex:1 1 0;min-width:0;max-width:44px;height:48px;font-size:1.05rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#kb .wide{flex:1.6 1 0;max-width:66px;font-size:.72rem}
@media(max-width:420px){.kw.pk-wrap{padding-left:4px!important;padding-right:4px!important}#kb div{gap:3px}#kb button{height:44px;font-size:.92rem;border-radius:5px}main{padding:10px 8px}.gamebox{padding:8px}}
@media(max-width:340px){#kb div{gap:2px}#kb button{height:42px;font-size:.82rem}#kb .wide{font-size:.6rem}}
/* Favoriler, sekmeler, satırlar */
.card,.pk-card2{position:relative}
.fav-btn{border:0;cursor:pointer;font-weight:800;border-radius:20px;padding:6px 12px;background:#fff;color:#d6339b;box-shadow:0 2px 6px #0002;font-size:.9rem}
.fav-btn.on{background:#d6339b;color:#fff}
.fav-btn.sm{position:absolute;top:6px;right:6px;z-index:3;width:32px;height:32px;padding:0;border-radius:50%;font-size:1.05rem;background:#ffffffd9}
.fav-btn.sm.on{background:#d6339b;color:#fff}
.g-desc{margin:4px 0 10px;color:#555}
.grid-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:14px}.grid-head h2{margin:0 4px;font-size:1.15rem}
.tabs{display:flex;gap:6px}.tabs button{border:0;border-radius:20px;padding:7px 12px;font-weight:700;background:#fff;color:#1d1b3a;cursor:pointer}.tabs button.on{background:#1d1b3a;color:#ffd84d}
.row h2{margin:14px 4px 8px;font-size:1.1rem}.hrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,140px);gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}.hrow>*{scroll-snap-align:start}
.gs-share{font-size:.85rem;padding:8px 12px}

/* CLS: JS ile dolan oyun alanlarına önceden yer ayır */
#board.mem,#board.mine,#board.xo{aspect-ratio:1;width:100%}
.kw.pk-wrap.gs-root{touch-action:none}