:root{
  --bg0:#070A11;
  --bg1:#0B0F18;
  --card:#0F1626;
  --text:#EAF0FF;
  --muted:#A9B6D6;
  --line:rgba(255,255,255,.08);
  --shadow: 0 24px 70px rgba(0,0,0,.55);
  --radius: 22px;
  --accent:#7CFF6B;
  --accent2:#7AA6FF;
  --warn:#FFD66B;
  --hot:#FF4FD8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    /* Softer falloffs to avoid visible "band" cutoffs */
    radial-gradient(1200px 700px at 20% 10%,
      rgba(124,255,107,.18) 0%,
      rgba(124,255,107,.10) 22%,
      rgba(124,255,107,.04) 44%,
      transparent 72%),
    radial-gradient(900px 500px at 85% 20%,
      rgba(122,166,255,.16) 0%,
      rgba(122,166,255,.09) 26%,
      rgba(122,166,255,.035) 48%,
      transparent 74%),
    radial-gradient(760px 520px at 72% 92%,
      rgba(255,79,216,.13) 0%,
      rgba(255,79,216,.07) 28%,
      rgba(255,79,216,.03) 52%,
      transparent 78%),
    linear-gradient(180deg, var(--bg0) 0%, #080B13 40%, var(--bg1) 100%);
}

/* Global continuous gradient overlay to unify sections */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(900px 700px at 50% -10%, rgba(255,255,255,.055), transparent 62%),
    linear-gradient(180deg, rgba(124,255,107,.06), rgba(122,166,255,.04) 45%, rgba(255,79,216,.035) 100%);
  mix-blend-mode: screen;
  opacity:.9;
}

a{color:inherit}

.container{max-width:1120px;margin:0 auto;padding:24px}

.topbar{
  position:sticky; top:0; z-index:20;
  background: linear-gradient(180deg, rgba(7,10,17,.84), rgba(7,10,17,.35));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px 24px;
  max-width:1120px; margin:0 auto;
}

.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.logo{
  width:42px;height:42px;border-radius:16px;
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.logo svg{width:30px;height:30px;display:block}
.logo .ring{stroke: rgba(255,255,255,.16)}
.logo .mark{
  fill: none;
  stroke: url(#logoGrad);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-text strong{font-size:14px; letter-spacing:.3px}
.brand-text span{font-size:12px; color:var(--muted)}

.nav{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.nav a{
  text-decoration:none;
  font-size:13px;
  color:rgba(234,240,255,.86);
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:14px;
}
.nav a:hover{
  border-color: var(--line);
  background: rgba(255,255,255,.04);
}
.nav a[aria-current="page"]{
  border-color: rgba(124,255,107,.24);
  background: rgba(124,255,107,.08);
}

.hero{
  padding:26px 0 8px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-main{padding:26px}
.hero-fill{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  align-items:stretch;
}
.stat.stat-compact{
  padding:14px;
}
.stat.stat-compact strong{
  font-size:16px;
}
.hero-note{
  grid-column: 1 / -1;
  margin-top: 0;
}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  font-size:12px;
  color:rgba(234,240,255,.84);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.kicker .dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--hot));
  box-shadow: 0 0 0 6px rgba(255,255,255,.03);
}
.hero h1{
  margin:14px 0 10px;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-.02em;
}
.gradient{
  background: linear-gradient(135deg, var(--accent), var(--accent2), var(--hot));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  margin:0;
  color:rgba(169,182,214,.98);
  font-size:15px;
  line-height:1.65;
  max-width:60ch;
}

.cta-row{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius: 16px;
  border:1px solid var(--line);
  text-decoration:none;
  font-size:13px;
  background: rgba(255,255,255,.03);
}
.btn.primary{
  border-color: rgba(124,255,107,.28);
  background: linear-gradient(135deg, rgba(124,255,107,.18), rgba(122,166,255,.10));
}
.btn:hover{transform: translateY(-1px); transition: transform .12s ease}
.btn .pill{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  color:rgba(234,240,255,.82);
}

.hero-side{padding:18px}
.stat{
  display:flex; flex-direction:column; gap:4px;
  padding:16px;
  border-radius: 18px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.stat + .stat{margin-top:10px}
.stat strong{font-size:20px; letter-spacing:-.02em}
.stat span{font-size:12px;color:rgba(169,182,214,.95); line-height:1.5}
.chiprow{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-size:12px;
  color:rgba(234,240,255,.86);
}
.chip i{
  width:10px;height:10px;border-radius:999px; display:inline-block;
  background: linear-gradient(135deg, var(--accent2), var(--hot));
}

.section{
  margin-top:22px;
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px;
  margin: 14px 0 10px;
}
.section-head h2{
  margin:0;
  font-size:18px;
  letter-spacing:-.01em;
}
.section-head p{
  margin:0;
  color:rgba(169,182,214,.95);
  font-size:13px;
  line-height:1.5;
}

.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.grid.grid-4{
  grid-template-columns: repeat(4, 1fr);
}
.grid.grid-3{
  grid-template-columns: repeat(3, 1fr);
}
.grid.grid-2{
  grid-template-columns: repeat(2, 1fr);
}
.card{
  padding:16px;
  border-radius: 20px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:-80px;
  background:
    radial-gradient(140px 140px at 20% 30%, rgba(124,255,107,.12), transparent 60%),
    radial-gradient(170px 170px at 80% 15%, rgba(122,166,255,.10), transparent 60%),
    radial-gradient(220px 220px at 60% 110%, rgba(255,79,216,.08), transparent 60%);
  pointer-events:none;
}
.card > *{position:relative}
.game-icon{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  display:grid; place-items:center;
  overflow:hidden;
}
.game-icon img{width:100%;height:100%;object-fit:cover}
.game-title{
  display:block;
  margin-top: 12px;
  font-size: 15px;
  letter-spacing: -.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.game-desc{
  margin:10px 0 12px;
  color:rgba(234,240,255,.86);
  font-size:13px;
  line-height:1.55;
  min-height: 3.1em;
}
.game-actions{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.badge{
  font-size:11px;
  color:rgba(234,240,255,.85);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:6px 10px;
  border-radius:999px;
}
.play{
  text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(124,255,107,.24);
  background: linear-gradient(135deg, rgba(124,255,107,.16), rgba(255,255,255,.02));
  font-size:12px;
}
.play:hover{transform: translateY(-1px); transition: transform .12s ease}
.play svg{width:16px;height:16px}

.content{
  padding: 18px 20px;
}
.content h1{margin:4px 0 8px; font-size:26px; letter-spacing:-.02em}
.content h2{margin:18px 0 8px; font-size:16px}
.content p, .content li{
  color:rgba(234,240,255,.86);
  font-size:13px;
  line-height:1.75;
}
.content .muted{color:rgba(169,182,214,.95)}
.content a{color:rgba(234,240,255,.92)}
.content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: rgba(234,240,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 2px 6px;
  border-radius: 10px;
}

.footer{
  margin-top: 30px;
  padding: 20px 0 34px;
  border-top: 1px solid rgba(255,255,255,.06);
  color:rgba(169,182,214,.95);
  font-size:12px;
}
.footer-grid{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}
.footer a{color:rgba(234,240,255,.82); text-decoration:none}
.footer a:hover{text-decoration:underline}

.notice{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(169,182,214,.95);
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .hero h1{font-size:38px}
  .grid{grid-template-columns: repeat(2, 1fr)}
  .hero-fill{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .topbar-inner{padding:12px 16px}
  .container{padding:16px}
  .hero-main{padding:18px}
  .hero h1{font-size:32px}
  .grid{grid-template-columns:1fr}
  .game-desc{min-height:auto}
  .game-icon{border-radius:24px}
  .footer-grid{padding:14px 14px}
}

/* In-page game play overlay (keeps existing UI style) */
html.playmask-lock, body.playmask-lock{
  overflow:hidden;
}
body.playmask-lock{
  /* Prevent scroll jump on lock: JS sets position/top */
  touch-action: none;
}
.playmask{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
}
.playmask.is-open{display:block}
.playmask-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
}
.playmask-dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(1100px, calc(100vw - 28px));
  height: min(78vh, 740px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.playmask-topbar{
  height: 52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(7,10,17,.65), rgba(7,10,17,.18));
}
.playmask-title{
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(234,240,255,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.playmask-close{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(234,240,255,.88);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.playmask-close:hover{transform: translateY(-1px); transition: transform .12s ease}
.playmask-close svg{width:18px;height:18px}
.playmask-frame{
  height: calc(100% - 52px);
  background: rgba(0,0,0,.22);
}
#playmask_iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#000;
}
@media (max-width: 640px){
  .playmask-dialog{
    width: calc(100vw - 18px);
    height: min(82vh, 720px);
  }
}