/* TDzStudio — modern glass hub. Light/dark via [data-theme]. */
:root{
  --bg:#EDF0F8; --fg:#1b1f2a; --muted:#5b6472;
  --glass:rgba(255,255,255,.58); --glass-2:rgba(255,255,255,.42);
  --border:rgba(255,255,255,.7); --shadow:0 20px 50px rgba(31,38,60,.14);
  --b1:#FFB0D3; --b2:#8FB4FF; --b3:#B79CFF; --blob-a:.55;
}
html[data-theme="dark"]{
  --bg:#0a0e19; --fg:#eaf0ff; --muted:#93a0b8;
  --glass:rgba(255,255,255,.06); --glass-2:rgba(255,255,255,.03);
  --border:rgba(255,255,255,.14); --shadow:0 24px 60px rgba(0,0,0,.5);
  --b1:#7E3F9E; --b2:#2A6CF7; --b3:#00C2A8; --blob-a:.5;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Fredoka",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--fg);background:var(--bg);min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;transition:background .4s,color .4s;
}

/* Animated gradient blobs (AI vibe) */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;filter:blur(70px)}
.bg span{position:absolute;width:46vmax;height:46vmax;border-radius:50%;opacity:var(--blob-a);
  mix-blend-mode:normal;animation:float 22s ease-in-out infinite}
.bg span:nth-child(1){background:var(--b1);top:-12vmax;left:-8vmax}
.bg span:nth-child(2){background:var(--b2);bottom:-14vmax;right:-6vmax;animation-delay:-7s}
.bg span:nth-child(3){background:var(--b3);top:30%;left:40%;animation-delay:-13s;width:34vmax;height:34vmax}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6vmax,-4vmax) scale(1.1)}66%{transform:translate(-5vmax,5vmax) scale(.95)}}
@media (prefers-reduced-motion:reduce){.bg span{animation:none}}

/* Top bar */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 20px;backdrop-filter:blur(16px);
  background:var(--glass-2);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font-size:1.3rem;font-weight:600}
.brand img{width:34px;height:34px;border-radius:9px;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.brand b{background:linear-gradient(90deg,#FF8FB4,#8FB4FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.controls{display:flex;align-items:center;gap:10px}
.select{position:relative}
.select select{appearance:none;font:inherit;font-size:.9rem;color:var(--fg);cursor:pointer;
  padding:8px 30px 8px 14px;border-radius:14px;border:1px solid var(--border);
  background:var(--glass);backdrop-filter:blur(10px)}
.select::after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.icon-btn{width:40px;height:40px;border-radius:14px;border:1px solid var(--border);background:var(--glass);
  backdrop-filter:blur(10px);cursor:pointer;font-size:1.05rem;line-height:1;display:grid;place-items:center;color:var(--fg)}
.icon-btn .moon{display:none}
html[data-theme="dark"] .icon-btn .sun{display:none}
html[data-theme="dark"] .icon-btn .moon{display:inline}

/* Layout */
.wrap{max-width:1040px;margin:0 auto;padding:20px}
.hero{text-align:center;padding:48px 12px 30px}
.hero h1{margin:0;font-size:clamp(2.6rem,7vw,4.4rem);font-weight:600;letter-spacing:-.5px}
.grad{background:linear-gradient(100deg,#FF8FB4,#B79CFF 45%,#5EE0C0);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:clamp(1rem,2.4vw,1.2rem);max-width:36ch;margin:14px auto 0}
.section-title{font-size:1.4rem;font-weight:600;margin:10px 4px 16px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}

/* Glass game card — themed per game via --accent/--accent2 */
.game{position:relative;display:flex;gap:16px;padding:20px;border-radius:24px;
  background:var(--glass);border:1px solid var(--border);box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(1.3);overflow:hidden;transition:transform .25s,box-shadow .25s}
/* Decorative overlays are purely visual — never let them intercept clicks on
   the buttons / links beneath (this was swallowing the store links). */
.game::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(130deg,var(--accent),var(--accent2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.6}
.game::after{content:"";position:absolute;width:150px;height:150px;right:-40px;top:-50px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--accent),transparent 70%);opacity:.35;filter:blur(6px)}
.game:hover{transform:translateY(-4px);box-shadow:0 26px 60px color-mix(in srgb,var(--accent) 35%,transparent)}
.ico{width:76px;height:76px;border-radius:18px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 6px 16px rgba(0,0,0,.28)}
.body{display:flex;flex-direction:column;min-width:0}
.body h3{margin:2px 0 4px;font-size:1.2rem;font-weight:600}
.tag{margin:0;color:var(--muted);font-size:.93rem;line-height:1.5;flex:1}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.btn{text-decoration:none;font-weight:600;font-size:.85rem;padding:9px 16px;border-radius:20px;color:#fff;
  background:linear-gradient(120deg,var(--accent),var(--accent2));box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 45%,transparent)}
.btn.soon{background:var(--glass-2);color:var(--muted);border:1px solid var(--border);box-shadow:none;cursor:default}
.links{margin-top:12px;font-size:.85rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.links a{color:var(--fg);opacity:.8;text-decoration:none;font-weight:600}
.links a:hover{opacity:1;text-decoration:underline}
.links i{color:var(--muted);font-style:normal}
.muted{color:var(--muted)}

/* Grid card acts as a link into the detail screen */
a.game{color:var(--fg);text-decoration:none;cursor:pointer;align-items:center}
a.game .go{margin-left:auto;align-self:center;flex:0 0 auto;font-size:1.4rem;color:var(--muted);
  opacity:.6;transition:transform .25s,opacity .25s}
a.game:hover .go{opacity:1;transform:translateX(3px)}
.chips{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.chip{font-size:.72rem;font-weight:600;color:var(--muted);border:1px solid var(--border);
  background:var(--glass-2);padding:4px 11px;border-radius:999px}

/* Game detail screen */
.detail{max-width:640px;margin:0 auto;animation:fadeUp .3s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.back{display:inline-flex;align-items:center;gap:6px;margin:6px 0 18px;padding:9px 16px;border-radius:16px;
  color:var(--fg);opacity:.85;text-decoration:none;font-weight:600;
  border:1px solid var(--border);background:var(--glass);backdrop-filter:blur(10px)}
.back:hover{opacity:1}
.detail-card{position:relative;text-align:center;padding:34px 26px;border-radius:26px;overflow:hidden;
  background:var(--glass);border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(1.3)}
.detail-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(130deg,var(--accent),var(--accent2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.6}
.detail-ico{width:104px;height:104px;border-radius:26px;object-fit:cover;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.detail-title{margin:16px 0 6px;font-size:1.6rem;font-weight:600}
.detail-tag{color:var(--muted);font-size:1rem;line-height:1.6;max-width:46ch;margin:0 auto}
.detail-btns{justify-content:center;margin-top:22px}
.detail-links{justify-content:center;margin-top:20px}

.foot{max-width:1040px;margin:30px auto 0;padding:24px 20px 40px;display:flex;gap:12px;
  justify-content:space-between;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
.foot a{color:var(--fg);opacity:.8;text-decoration:none;font-weight:600}
.foot a:hover{opacity:1}

@media (max-width:520px){.game{flex-direction:column}.ico{width:64px;height:64px}}