/* Allt i denna fil är på svenska: färger, kommentarer, komponenter */
/* Färger inspirerade av Storspelare: varm brons + ljus accent + mörk bakgrund */
:root{
  --bakgrund: #0e0f13;
  --yta: #151821;
  --text: #F5F5F5;
  --dov: #b9beca;
  --varm-brons: #845A3F;
  --ljus-accent: #F2C3A7;
  --skugga: 0 10px 30px rgba(0,0,0,.25);
  --radie: 16px;
}

/* Reset & bas */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: var(--bakgrund);
  color: var(--text);
  line-height: 1.65;
}
.container{width:min(1200px,92%); margin-inline:auto}

/* Huvud */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.25));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:72px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-logo{height:36px; width:auto; display:block}
.main-nav ul{display:flex; gap:24px; list-style:none; margin:0; padding:0}
.main-nav a{
  color: var(--text); text-decoration:none; font-weight:700;
  padding:10px 8px; border-radius:10px;
}
.main-nav a:hover{background: rgba(255,255,255,.06)}
.auth-cta{display:flex; gap:12px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px; border-radius:12px; text-decoration:none; font-weight:800;
  box-shadow: var(--skugga); transition: transform .08s ease, filter .2s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn-primary{background: var(--varm-brons); color:#fff}
.btn-ghost{background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.25)}
.btn-accent{background: var(--ljus-accent); color:#2a1a12}
.btn-xl{height:56px; padding-inline:28px; border-radius:14px; font-size:1.05rem}
.btn-sm{height:36px; padding:0 14px; border-radius:10px}

/* Hero */
.hero{position:relative; isolation:isolate; min-height:54vh; display:grid; place-items:center}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 60% at 70% 20%, rgba(242,195,167,.25), transparent 60%),
    radial-gradient(40% 40% at 20% 80%, rgba(132,90,63,.35), transparent 60%),
    linear-gradient(180deg, #121319, #0e0f13);
}
.hero-content{text-align:center; padding:56px 0}
.hero-title{font-size: clamp(28px, 4vw, 48px); line-height:1.2; margin:0 0 10px}
.hero-subtitle{color: var(--dov); margin:0 0 22px}

/* Innehåll */
.content{padding: 40px 0 72px}
.content > h1{font-size: clamp(26px, 3vw, 36px); margin:0 0 16px}
.content p{color:#e7e9ef}
.card{
  background: var(--yta); border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radie); padding: 22px; margin: 20px 0; box-shadow: var(--skugga);
}
.card h2{margin-top:0; font-size: clamp(20px, 2.4vw, 26px)}
.steps{margin:0 0 16px 18px}
.list{margin:0 0 16px 18px}
.note{color:#cfd6e3; font-size:.95rem}
.fact{color:#d9bfaa; font-weight:600}

/* Tabeller */
.table-wrap{overflow:auto; border-radius:12px; border:1px solid rgba(255,255,255,.08)}
.table{width:100%; border-collapse:collapse; min-width:720px; background:#0f1219}
.table th,.table td{padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left}
.table thead th{background: rgba(242,195,167,.12); color:#ffe8d8}
.table tbody tr:hover{background: rgba(255,255,255,.03)}

/* Spelgalleri */
.games-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  margin-top:12px
}
.game{background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; overflow:hidden; text-decoration:none; color:var(--text)}
.game img{width:100%; height:120px; object-fit:cover; display:block}
.game span{display:block; padding:10px 12px; font-weight:700}

/* Sticky spelknapp */
.sticky-play{
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  background: var(--ljus-accent); color:#2a1a12; text-decoration:none;
  font-weight:900; padding: 14px 18px; border-radius: 999px; box-shadow: var(--skugga);
  border:2px solid rgba(0,0,0,.1);
}
.sticky-play:hover{filter: brightness(1.02)}

/* Footer */
.site-footer{background:#0b0d12; border-top:1px solid rgba(255,255,255,.08); padding: 32px 0}
.footer-grid{display:grid; gap:28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))}
.footer-nav ul{list-style:none; margin:0; padding:0}
.footer-nav a{color:#e7e9ef; text-decoration:none}
.footer-nav a:hover{text-decoration:underline}
.footer-rg .regulators{list-style:none; margin:8px 0 10px; padding:0; display:grid; gap:6px}
.footer-rg a{color:var(--ljus-accent); text-decoration:none}
.footer-rg a:hover{text-decoration:underline}
.disclaimer{color:#c9ced8; font-size:.925rem}
.footer-org .org-title{display:block; font-weight:700; margin-bottom:8px}
.footer-link{display:inline-block; margin-top:6px; color:var(--ljus-accent); text-decoration:none}
.footer-link:hover{text-decoration:underline}
.footer-legal{border-top:1px solid rgba(255,255,255,.08); margin-top:26px; padding-top:18px; color:#aeb6c7; font-size:.95rem}
.tiny{font-size:.85rem; color:#adb6c7}

/* Tillgänglighet */
a:focus-visible, button:focus-visible{outline:3px solid var(--ljus-accent); outline-offset:2px}

/* Responsiv meny (förenklad) */
@media (max-width: 960px){
  .main-nav{display:none}
  .auth-cta .btn{height:40px}
}