:root{
  --bg1:#0a0f25;
  --bg2:#091b3a;
  --accent:#6ee7ff;
  --accent2:#8b5cf6;
  --good:#22d3ee;
  --bad:#ff3b6b;
  --text:#e6f0ff;
  --green1:#34d399;
  --green2:#10b981;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
  color:var(--text);
  /* Gradert mørkeblå bakgrunn */
  background:
    radial-gradient(1200px 800px at 70% 20%, #16204a 0%, transparent 60%),
    radial-gradient(900px 700px at 20% 80%, #0e1536 0%, transparent 65%),
    linear-gradient(160deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
}

.top-clear{ height:5vh; }

main.layout{
  display:flex; align-items:center; justify-content:center;
  padding:10px 18px 140px;
}

.game-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }

.page-title{
  margin:0;
  letter-spacing:.12em;
  font-weight:900;
  font-size:clamp(20px, 3.6vw, 40px);
  text-shadow:0 0 18px rgba(110,231,255,.35), 0 0 6px rgba(139,92,246,.25);
}

.canvas-wrap{
  position:relative; display:grid; place-items:center;
  /* Spillet tar 65% av skjermen */
  width:min(65vw, 1200px);
  aspect-ratio: 16 / 9;
}
canvas{
  width:100%;
  height:100%;
  border-radius:22px;
  background: radial-gradient(900px 600px at 50% 50%, rgba(110,231,255,.06) 0%, rgba(139,92,246,.05) 40%, transparent 70%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 20px 60px rgba(0,0,0,.6),
    0 0 80px rgba(110,231,255,.08),
    0 0 80px rgba(139,92,246,.08);
}

.overlay{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; gap:8px;
  background: radial-gradient(600px 400px at 50% 50%, rgba(0,0,0,.45), transparent 70%),
              linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  border-radius:22px;
}
.overlay.is-hidden{ display:none !important; }
.overlay h2{
  font-size: clamp(24px, 4.6vw, 40px);
  margin:0 0 8px;
  text-shadow: 0 0 20px rgba(110,231,255,.4), 0 0 12px rgba(139,92,246,.35);
}
.overlay p{margin:0 0 14px; opacity:.9}
.overlay button{
  appearance:none; border:none; cursor:pointer; padding:12px 18px; margin:6px;
  border-radius:14px; font-weight:800; letter-spacing:.05em;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color:#06111f; box-shadow:0 12px 30px rgba(110,231,255,.25), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.overlay button:hover{transform: translateY(-2px)}
.overlay button:active{transform: translateY(0)}
.overlay #toggleFX{background: linear-gradient(180deg, #9ae6b4, #34d399)}

.controls{
  display:flex; align-items:center; gap:10px; opacity:.9;
  user-select:none; z-index:2; margin-top:4px;
}
.controls .btn{
  font-size:26px; width:60px; height:60px; border-radius:16px; border:none; cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
  color:var(--text);
  box-shadow:0 10px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
  backdrop-filter: blur(4px);
}
.controls .lr{display:flex; gap:10px}
@media (max-width: 900px){
  .scoreboard{ width:min(92vw, 560px); }
}

footer{
  position:fixed; right:16px; bottom:16px; display:flex; gap:18px; opacity:.8; font-size:12px;
  z-index:2;
}

/* Highscore under spillet med padding og hvit kant */
.scoreboard{
  width:min(65vw, 1200px);
  border:1px solid #fff;
  border-radius:14px;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  margin-top:10px;
}
.scoreboard h2{margin:0 0 8px; font-size:18px}
.scoreboard table{
  width:100%; border-collapse:collapse; font-size:14px;
}
.scoreboard th, .scoreboard td{
  border-top:1px solid rgba(255,255,255,.15);
  padding:8px 6px; text-align:left;
}
.scoreboard thead th{border-top:none; opacity:.9}

/* Subtle animated background shimmer */
body:before, body:after{
  content:""; position:fixed; inset:-20%; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(500px 300px at 10% 20%, rgba(110,231,255,.06), transparent 60%),
    radial-gradient(600px 400px at 90% 80%, rgba(139,92,246,.05), transparent 60%);
  animation: float 18s linear infinite alternate;
}
body:after{ animation-duration: 26s; opacity:.8 }
@keyframes float{
  0%{ transform: translateY(-2%) translateX(-1%) }
  100%{ transform: translateY(2%) translateX(1%) }
}