:root{
  --bg:#f6f9fc;
  --card:#ffffff;
  --text:#0c172a;
  --muted:#6c7a90;
  --brand:#2f76ff;
  --brand-2:#6c9dff;
  --ring:rgba(47,118,255,.25);
  --ok:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
img{max-width:100%;height:auto;border-radius:14px}
h1,h2,h3{margin:0 0 .5rem}
p{margin:.25rem 0 .75rem}

.slg-hero{
  min-height:70vh;
  display:grid;
  place-items:center;
  padding:48px 16px;
  background: radial-gradient(1000px 600px at 50% -20%, #eaf2ff 0%, #f6f9fc 60%, transparent 100%);
}
.slg-hero-card{
  text-align:center;
  padding:32px;
}
.slg-logo{
  width:56px;height:56px;border-radius:14px;margin:0 auto 10px;
  display:grid;place-items:center;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 10px 30px rgba(47,118,255,.35);
}

.slg-card{
  background:var(--card);
  border:1px solid #e9eef6;
  border-radius:20px;
  padding:24px;
  box-shadow:0 10px 30px rgba(12,23,42,.06);
}

.slg-feature-wrap{
  margin-top:28px;
  display:grid;gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:980px;width:100%;
}
.slg-feature{ text-align:center }
.slg-emoji{ font-size:28px }

.slg-btn{
  appearance:none;border:1px solid transparent;border-radius:12px;
  padding:12px 16px;background:#eef4ff;color:var(--text);cursor:pointer;
  transition:.2s box-shadow,.2s transform,.2s background,.2s color;
}
.slg-btn:hover{ transform:translateY(-1px) }
.slg-btn:focus{ outline:3px solid var(--ring) }
.slg-btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 10px 25px rgba(47,118,255,.35)
}
.slg-btn-ghost{
  background:transparent;border-color:#dbe6fb;color:var(--text)
}
.slg-chip{
  display:inline-block;padding:8px 12px;border-radius:999px;background:#eef4ff;border:1px solid #dbe6fb;color:#1a2b4a;text-decoration:none
}

.slg-section{ padding:40px 16px }
.slg-head{ display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 auto 16px;max-width:1100px }
.slg-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1100px;margin:0 auto }
.slg-grid-2{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px }

.slg-game h3{ margin-top:.25rem }
.slg-thumb{ width:100%;height:160px;background:#eef4ff;border:1px dashed #dbe6fb;border-radius:14px;margin-bottom:10px }
.slg-thumb-ph{ background:linear-gradient(135deg,#eef4ff,#e7f0ff) }
.slg-blue .slg-thumb-ph{ background:linear-gradient(135deg,#e6f0ff,#cfe1ff) }
.slg-red .slg-thumb-ph{ background:linear-gradient(135deg,#ffe1e1,#ffd0d0) }
.slg-violet .slg-thumb-ph{ background:linear-gradient(135deg,#efe6ff,#dfd2ff) }
.slg-green .slg-thumb-ph{ background:linear-gradient(135deg,#e6ffe9,#d1ffd9) }
.slg-orange .slg-thumb-ph{ background:linear-gradient(135deg,#fff0e1,#ffe2c9) }
.slg-indigo .slg-thumb-ph{ background:linear-gradient(135deg,#e7ecff,#d7dfff) }

.slg-form label{ display:block;font-weight:600;margin-bottom:6px }
.slg-form input{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #dbe6fb;background:#f8fbff;
}
.slg-note{ color:var(--muted);font-size:.9rem }
.slg-players{ display:grid;gap:8px }
.slg-player{ display:flex;align-items:center;gap:10px;background:#f7fbff;border:1px solid #e2ecfb;border-radius:12px;padding:8px 10px }
.slg-avatar{ width:36px;height:36px;border-radius:10px;background:#e9f1ff;display:grid;place-items:center;font-weight:700 }

.slg-next{ margin-top:12px }
.slg-back{ display:inline-block;margin-bottom:12px;color:#1e3a8a;text-decoration:none }
.slg-powered{ color:var(--muted);margin-top:10px }

.slg-ranking{ display:grid;gap:10px }
.slg-row{
  display:grid;grid-template-columns:56px 1fr 100px;gap:10px;align-items:center;
  background:#f7fbff;border:1px solid #e2ecfb;border-radius:14px;padding:10px 12px
}
.slg-rank-head{ display:flex;justify-content:space-between;align-items:center;margin-bottom:10px }

.slg-admin-area{ margin-top:16px }
.slg-admin-item{ display:grid;grid-template-columns:1fr 120px 200px 120px;gap:8px;align-items:center;border-bottom:1px solid #eef3ff;padding:6px 0 }
.slg-admin-actions{ display:flex;gap:8px;margin-bottom:8px }

@media (max-width: 960px){
  .slg-feature-wrap{ grid-template-columns:1fr }
  .slg-grid{ grid-template-columns:1fr }
  .slg-grid-2{ grid-template-columns:1fr }
  .slg-admin-item{ grid-template-columns:1fr 110px 1fr }
}