:root{
  --bg-1:#071025; --card:#0f1724; --accent:#ff5c8a; --muted:#9aa4b2;
  --glass:rgba(255,255,255,0.03); --glass-2:rgba(255,255,255,0.02)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,var(--bg-1),#071022 60%);color:#eaf3ff;min-height:100vh;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* --- background canvas covers everything --- */
.bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* header */
.topbar{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:linear-gradient(90deg, rgba(255,92,138,0.02), transparent);backdrop-filter:blur(4px)}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:46px;height:46px;border-radius:10px;background:conic-gradient(from 120deg,#ff9fb9,#ff5c8a,#8ce3ff);display:flex;align-items:center;justify-content:center;color:#041022;font-weight:800}
.title-block{display:flex;flex-direction:column}
.site-title{font-weight:800;font-size:16px;user-select:none} /* block selection */
.subtitle{font-size:12px;color:var(--muted)}
.nav{display:flex;gap:8px}
.navlink{color:#cfe8ff;text-decoration:none;padding:8px 10px;border-radius:8px}
.navlink.active,.navlink:hover{background:rgba(255,255,255,0.02);color:var(--accent)}

/* container */
.container{max-width:1200px;margin:22px auto;padding:0 16px;position:relative;z-index:2}

/* cards and grids */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.card-small{padding:12px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.feature{min-height:80px}

/* hero layout */
.hero{display:flex;gap:14px;align-items:stretch}
.hero-left{flex:1}
.hero-right{width:320px}
@media(max-width:880px){.hero{flex-direction:column}.hero-right{width:auto}}

/* buttons */
.btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:10px 14px;border-radius:999px;color:inherit;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn.primary{background:linear-gradient(90deg,var(--accent),#ff9fb9);border:none;color:#041022;font-weight:700}

/* wheel */
.wheel-area{display:flex;flex-direction:column;align-items:center;gap:12px}
.wheel-outer{position:relative;width:min(85vw,520px);height:min(85vw,520px)}
.wheel-canvas{width:100%;height:100%;display:block;border-radius:50%}
.wheel-pin{position:absolute;left:50%;top:6%;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:26px solid var(--accent);z-index:3}

/* tasks */
.tasks-list{display:grid;gap:10px;margin-top:10px}
.task-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;background:rgba(255,255,255,0.01);transition:all .28s}
.task-item.done{background:linear-gradient(90deg, rgba(54,191,93,0.14), rgba(255,255,255,0.01));border:1px solid rgba(54,191,93,0.12);transform:scale(1.01)}
.task-actions{margin-left:auto;display:flex;gap:8px}

/* games */
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.game-canvas{width:100%;height:auto;border-radius:8px;background:#081026;display:block}

/* film grid */
.films-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.film-card{background:rgba(255,255,255,0.02);padding:8px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:8px}
.film-thumb{width:100%;height:140px;object-fit:cover;border-radius:6px}
.film-overlay{position:fixed;inset:0;background:linear-gradient(0deg,rgba(0,0,0,0.85),rgba(0,0,0,0.65));display:none;align-items:center;justify-content:center;z-index:30;backdrop-filter:blur(6px);padding:16px}
.film-overlay.open{display:flex}
.overlay-video{width:100%;max-width:1100px;height:auto;border-radius:8px}
.overlay-close{position:absolute;right:16px;top:16px;background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px;border-radius:8px;color:#fff;cursor:pointer}

/* footer */
.footer{padding:18px;text-align:center;color:var(--muted);position:relative;z-index:2;margin-top:16px}

/* duel area */
.duel-area{margin-top:8px;padding:12px;border-radius:8px;background:rgba(255,255,255,0.01)}

/* disable selection globally (client-side) */
*{user-select:none;-webkit-user-select:none;-ms-user-select:none}

/* responsive tweaks */
@media(max-width:560px){
  .logo{width:40px;height:40px}
  .site-title{font-size:14px}
  .hero-right{width:auto}
}