:root{
  --bg:#0f1220;
  --panel:#161a2f;
  --panel-2:#1b2140;
  --panel-3:#11162b;
  --accent:#6c7cff;
  --accent-2:#22d3ee;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(108,124,255,.24);
  --good:#22c55e;
  --shadow:0 18px 44px rgba(0,0,0,.34);
  --radius:18px;
  --radius-lg:24px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  font-family:Inter,system-ui,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% 0%, rgba(108,124,255,.14), transparent 55%),
    radial-gradient(900px 600px at 85% 15%, rgba(34,211,238,.10), transparent 55%),
    linear-gradient(135deg,#0f1220,#0b0d1a 58%,#090b14);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.layout-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:280px;
  padding:18px 14px;
  background:linear-gradient(180deg, rgba(22,26,47,.95), rgba(22,26,47,.84));
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:8px 0 30px rgba(0,0,0,.24);
  z-index:60;
}
.brand{
  display:flex;align-items:center;gap:10px;padding:10px 10px 16px;margin-bottom:10px;
}
.brand-mark{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  background:rgba(108,124,255,.20);border:1px solid rgba(108,124,255,.38);
  color:var(--accent);font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.brand-copy{display:flex;flex-direction:column;gap:2px}
.brand-title{font-weight:900;font-size:15px;letter-spacing:.2px}
.brand-sub{font-size:12px;color:rgba(229,231,235,.72)}
.nav-stack{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:20px;background:rgba(15,18,32,.34);border:1px solid var(--line)}
.nav-link{
  display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:14px;font-weight:800;font-size:14px;
  color:var(--text);border:1px solid transparent;transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.nav-link:hover{background:rgba(108,124,255,.12);border-color:rgba(108,124,255,.22);transform:translateY(-1px)}
.nav-link.active{background:rgba(108,124,255,.20);border-color:rgba(108,124,255,.38)}
.sidebar-note{
  position:absolute;left:14px;right:14px;bottom:14px;padding:12px;border-radius:20px;background:rgba(15,18,32,.38);
  border:1px solid var(--line);font-size:12px;color:rgba(229,231,235,.72);line-height:1.45
}

.page-shell{padding-left:280px}
.page-main{padding:18px 18px 56px}
.page-topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  backdrop-filter:blur(10px);background:rgba(15,18,32,.78);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);padding:12px 14px;margin-bottom:14px;
}
.top-title{display:flex;flex-direction:column;gap:2px}
.top-title h1{margin:0;font-size:16px;font-weight:900;display:flex;align-items:center;gap:8px}
.top-title p{margin:0;font-size:12px;color:rgba(229,231,235,.70)}
.top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{padding:8px 10px;border-radius:999px;background:rgba(22,26,47,.72);border:1px solid var(--line);font-size:12px;color:rgba(229,231,235,.8);font-weight:800;white-space:nowrap}
.menu-btn{display:none;border:none;background:rgba(255,255,255,.08);color:var(--text);width:40px;height:40px;border-radius:14px;cursor:pointer}
.menu-btn:hover{background:rgba(255,255,255,.12)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:55}
.scrim.show{display:block}

.container{width:min(1380px,100%);margin:0 auto}
.hero{margin-top:2px;margin-bottom:14px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
.panel,.hero-card,.feature-card,.stat,.announcement,.game-card,.player-shell,.tools{
  background:rgba(22,26,47,.58);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius-lg)
}
.hero-main{padding:28px;position:relative;overflow:hidden;min-height:320px;background:
  radial-gradient(900px 500px at 20% 20%, rgba(108,124,255,.30), transparent 55%),
  radial-gradient(900px 500px at 90% 10%, rgba(34,211,238,.16), transparent 55%),
  linear-gradient(135deg, rgba(108,124,255,.16), rgba(22,26,47,.68));}
.hero-main::after{content:"";position:absolute;right:-80px;bottom:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle, rgba(34,211,238,.12), transparent 68%)}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid rgba(108,124,255,.35);background:rgba(108,124,255,.10);color:#cfd4ff;font-weight:800;font-size:.86rem;letter-spacing:.03em}
.hero h1{font-size:clamp(2.2rem,5vw,4.6rem);line-height:.95;margin:18px 0 12px;max-width:10ch}
.hero p{margin:0;color:rgba(229,231,235,.82);font-size:1.02rem;line-height:1.7;max-width:60ch}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);font-weight:800;cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.12)}
.btn.primary{background:rgba(108,124,255,.22);border-color:rgba(108,124,255,.42)}
.btn.primary:hover{background:rgba(108,124,255,.28);border-color:rgba(108,124,255,.52)}
.btn.ghost{background:rgba(255,255,255,.03)}
.quick-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.stat{padding:22px}
.stat-label{color:var(--muted);font-size:.83rem;text-transform:uppercase;letter-spacing:.08em}
.stat-value{font-size:1.8rem;font-weight:900;margin-top:8px}
.section{margin-top:14px}
.section-wrap{padding:14px;border-radius:24px;background:rgba(22,26,47,.52);border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.14)}
.section-head{padding:0 2px 12px;display:flex;align-items:end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.section h2{margin:0;font-size:clamp(1.5rem,2vw,2.1rem)}
.section-copy{color:var(--muted);max-width:68ch;line-height:1.7}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feature-card{padding:18px;background:rgba(15,18,32,.35)}
.feature-card h3{margin:12px 0 8px;font-size:1.02rem}
.feature-card p{margin:0 0 14px;color:var(--muted);line-height:1.6;font-size:.95rem}
.tag{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(108,124,255,.18);border:1px solid rgba(108,124,255,.35);color:#d8dcff;font-weight:800;font-size:.78rem}
.announcement-list{display:flex;flex-direction:column;gap:10px}
.announcement{padding:14px 16px;background:rgba(12,15,29,.70)}
.meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin-bottom:8px}
.announcement h3{margin:0 0 4px;font-size:1rem}
.announcement p{margin:0;color:rgba(229,231,235,.84);line-height:1.5}
.ann-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.hidden-ann{display:none}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid .full{grid-column:1/-1}
label{display:block;font-size:.9rem;font-weight:700;margin-bottom:8px;color:#d9dce8}
.input,.textarea,.select{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#0f1420;color:var(--text);outline:none}
.input:focus,.textarea:focus,.select:focus{border-color:rgba(108,124,255,.46);box-shadow:0 0 0 3px rgba(108,124,255,.16)}
.textarea{min-height:140px;resize:vertical}
.form-note{margin:14px 0 0;color:var(--muted);font-size:.92rem;line-height:1.7}
.footer{padding:22px 0 34px;color:var(--muted)}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px}
.tools{display:flex;flex-wrap:wrap;gap:10px;padding:16px;background:rgba(15,18,32,.38);margin-bottom:12px}
.search{flex:1 1 320px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:#121723;color:var(--muted);font-weight:800;cursor:pointer;transition:.18s ease}
.chip:hover{transform:translateY(-1px);border-color:var(--line-2);color:var(--text)}
.chip.active{background:rgba(108,124,255,.14);border-color:rgba(108,124,255,.35);color:#d8dcff}
.games-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.game-card{overflow:hidden;border-radius:22px;background:#121722;display:flex;flex-direction:column}
.cover-wrap{position:relative;aspect-ratio:16/10;background:#0f1420;overflow:hidden}
.cover-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.game-card:hover img{transform:scale(1.03)}
.badge-row{position:absolute;left:12px;top:12px;right:12px;display:flex;justify-content:space-between;gap:8px;pointer-events:none}
.badge{padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);font-size:.75rem;font-weight:800;backdrop-filter:blur(8px)}
.game-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.game-title{font-weight:800;line-height:1.3;min-height:2.8em}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.game-actions{display:flex;gap:10px;margin-top:auto}
.game-actions .btn{flex:1;padding:12px 14px}
.countbar{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.95rem;margin-bottom:12px}
.player-shell{padding:22px;background:rgba(16,20,31,.74)}
.player-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.player-stage{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#05070b;min-height:72vh}
.player-stage iframe{width:100%;height:72vh;border:0;background:#05070b}
.inline-note{padding:14px 16px;border-radius:16px;background:rgba(108,124,255,.10);border:1px solid rgba(108,124,255,.24);color:#dfe2ff}
.empty{padding:34px;border-radius:24px;border:1px dashed rgba(255,255,255,.12);text-align:center;color:var(--muted);background:rgba(255,255,255,.02)}

@media (max-width:1200px){
  .games-grid{grid-template-columns:repeat(4,1fr)}
  .card-grid,.hero-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .layout-sidebar{transform:translateX(-105%);transition:transform .28s ease;width:290px}
  .layout-sidebar.open{transform:translateX(0)}
  .page-shell{padding-left:0}
  .menu-btn{display:inline-flex}
  .sidebar-note{position:static;margin-top:14px}
}
@media (max-width:800px){
  .games-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .page-main{padding:14px 14px 42px}
  .games-grid{grid-template-columns:1fr}
  .hero-main{padding:22px}
  .stat-value{font-size:1.45rem}
}