/* ---------- Base (theme defaults) ---------- */
  :root{
    --bg: #0b1020;
    --panel: #0f1630;
    --accent: #7df9ff;
    --good: #39ff88;
    --warn: #ffd166;
    --bad: #ff477e;
    --text: #e8ecff;
    --muted: #9aa3c7;
    --shadow: 0 10px 30px rgba(0,0,0,.45);
    --cell: #131b3a;
    --cell-hover: #1a2450;
    --grid-gap: 6px;
    --cell-size: clamp(28px, 7.2vw, 42px);
    --radius: 14px;
    --speed: .22s;

    /* HUD layout vars (unused now that HUD is not fixed, kept for compatibility) */
    --header-h: 64px;
    --stats-h: 46px;

    /* button vars (overridden by themes when needed) */
    --btn-bg1:#2a2f66; --btn-bg2:#191f4a; --btn-fg: var(--text);

    /* number colors */
    --n1:#7df9ff; --n2:#39ff88; --n3:#ffd166; --n4:#b388ff;
    --n5:#ff85a1; --n6:#9bf6ff; --n7:#f1fa8c; --n8:#ffffff;
  }

  @media (prefers-color-scheme: light){
    :root{
      --bg:#f5f7ff; --panel:#ffffff; --cell:#e9edff; --cell-hover:#dde4ff;
      --text:#0c1230; --muted:#5060a6; --shadow: 0 8px 20px rgba(0,20,80,.15);
    }
  }

  /* ---------- Themes ---------- */
  html[data-theme="neon"]{
    --bg:#0b1020; --panel:#0f1630; --cell:#131b3a; --cell-hover:#1a2450; --text:#e8ecff; --muted:#9aa3c7; --accent:#7df9ff;
    --good:#39ff88; --warn:#ffd166; --bad:#ff477e;
    --n1:#7df9ff; --n2:#39ff88; --n3:#ffd166; --n4:#b388ff; --n5:#ff85a1; --n6:#9bf6ff; --n7:#f1fa8c; --n8:#ffffff;
  }
  html[data-theme="pastel"]{
    --bg:#f8f9ff; --panel:#ffffff; --cell:#eef2ff; --cell-hover:#e6ebff; --text:#1c2150; --muted:#5b64a6; --accent:#a0c4ff;
    --good:#95d5b2; --warn:#ffe08a; --bad:#ff8fab; --shadow: 0 8px 22px rgba(40,60,120,.12);
    --n1:#8ecae6; --n2:#84dcc6; --n3:#ffd166; --n4:#cdb4db; --n5:#ffafcc; --n6:#bde0fe; --n7:#f1fa8c; --n8:#1c2150;
    --btn-bg1:#5862b5; --btn-bg2:#3b458f; --btn-fg:#ffffff;
  }
  html[data-theme="contrast"]{
    --bg:#02030a; --panel:#0a0d18; --cell:#0e1226; --cell-hover:#0c1636; --text:#ffffff; --muted:#c9d1ff; --accent:#00f0ff;
    --good:#00ff87; --warn:#ffd400; --bad:#ff3060; --shadow: 0 12px 30px rgba(0,0,0,.6);
    --n1:#00f0ff; --n2:#00ff87; --n3:#ffd400; --n4:#a78bfa; --n5:#ff5c8a; --n6:#66e0ff; --n7:#ffff66; --n8:#ffffff;
  }
  html[data-theme="modern"]{
    --bg:#0b0f14; --panel: rgba(18,24,32,0.7); --cell:#0f1620; --cell-hover:#131d2a; --text:#e6eef7; --muted:#98a6b8; --accent:#48d1cc;
    --good:#45e0a9; --warn:#ffd27e; --bad:#ff5a7a; --shadow: 0 12px 36px rgba(0,0,0,.45);
    --n1:#48d1cc; --n2:#58e39e; --n3:#ffd27e; --n4:#90a4ff; --n5:#ff8fb3; --n6:#8ee7ff; --n7:#f4f88a; --n8:#e6eef7;
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
  html,body{height:100%; background-color: var(--bg);}

  /* Full-bleed fixed background to prevent white overscroll */
  body::before{
    content:"";
    position: fixed; inset: 0; z-index: -1;
    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(125,249,255,.20), transparent 60%),
      radial-gradient(800px 400px at 110% 10%, rgba(255,71,126,.20), transparent 60%),
      radial-gradient(900px 700px at 40% 120%, rgba(57,255,136,.15), transparent 60%),
      var(--bg);
    background-attachment: fixed;
  }

  body{
    margin:0;
    font-family: ui-rounded, system-ui, "SF Pro Rounded", Inter, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    display:flex; justify-content:center; align-items:flex-start;
    padding: 12px 12px calc(64px + env(safe-area-inset-bottom));
    overscroll-behavior: none;
    transition: color .25s ease;
  }

  .app{ width:min(98vw, 980px); display:grid; gap:14px; grid-template-rows: auto auto 1fr; }

  /* ------- HUD: NOT fixed/sticky anymore ------- */
  header{
    position: static;
    margin-top: calc(8px + env(safe-area-inset-top));
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background: var(--panel); border-radius: var(--radius);
    padding:10px 12px; box-shadow: var(--shadow);
  }
  .stats{
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  }

  .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; }
  .brand .dot{
    width:14px; height:14px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, white, var(--accent) 45%, #00b7ff 70%, #0077ff);
    box-shadow: 0 0 16px #5deaffaa, 0 0 30px #0088ff66 inset;
  }

  .controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .pill{
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08));
    border:1px solid rgba(255,255,255,.12);
    padding:8px 12px; border-radius:999px; display:flex; gap:8px; align-items:center; color:var(--text);
  }
  select, button, input{ appearance:none; border:none; outline:none; font:inherit; color:inherit; }
  select{ background: transparent; padding:6px 8px; border-radius:8px; cursor:pointer; }
  input[type=number]{ width:64px; padding:6px 8px; border-radius:8px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--text); }

  .btn{
    padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700;
    background: linear-gradient(180deg, var(--btn-bg1), var(--btn-bg2));
    color: var(--btn-fg);
    border:1px solid rgba(255,255,255,.12);
    transition: transform .06s ease, box-shadow .2s ease, filter .2s ease, background .25s ease;
    box-shadow: var(--shadow), 0 0 0 0 rgba(125,249,255, .0);
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn:active{ transform: translateY(1px) scale(.99); }

  .stat{ background: var(--panel); border-radius: 12px; padding:8px 12px; display:flex; gap:8px; align-items:center; border:1px solid rgba(255,255,255,.08); }
  .stat .label{ color: var(--muted); font-size:12px; text-transform: uppercase; letter-spacing:.12em; }
  .stat .value{ font-weight:800; font-feature-settings:"tnum" 1, "lnum" 1; }

  /* Board container */
  .board-wrap{
    /* no margin-top needed now */
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
    border:1px solid rgba(255,255,255,.10);
    border-radius: var(--radius);
    padding: 12px 12px 88px; /* extra bottom so floating controls don’t cover tiles */
    box-shadow: var(--shadow);
    position:relative; overflow: hidden;
    transition: background .25s ease;
  }

  #board{ display:grid; gap: var(--grid-gap); justify-content:center; touch-action: manipulation; user-select: none; }

  .cell{
    width:var(--cell-size); height:var(--cell-size);
    background: linear-gradient(180deg, var(--cell), var(--cell-hover));
    border-radius: 10px; display:grid; place-items:center;
    font-weight:900; font-size: calc(var(--cell-size) * .46); color:var(--text);
    box-shadow: inset 0 -2px 6px rgba(0,0,0,.25), inset 0 2px 6px rgba(255,255,255,.1);
    cursor:pointer; transform-style: preserve-3d;
    transition: transform var(--speed) ease, filter var(--speed) ease, background var(--speed) ease;
  }
  .cell:hover{ filter: brightness(1.03); }
  .cell.revealed{ background: linear-gradient(180deg, #0e1433, #0b1030); box-shadow: inset 0 2px 10px rgba(0,0,0,.5); cursor: default; transform: translateZ(0) rotateX(12deg); }
  html[data-theme="pastel"] .cell.revealed{ background: linear-gradient(180deg,#e7ebff,#dde5ff); }
  html[data-theme="contrast"] .cell.revealed{ background: linear-gradient(180deg,#001429,#000d1f); }
  html[data-theme="modern"] .cell.revealed{ background: linear-gradient(180deg,#0f1a28,#0b131d); }

  .cell.mine.revealed{ background: radial-gradient(circle at 50% 50%, var(--bad), #6a1031 55%, #240516); animation: throb .7s ease-in-out infinite alternate; }
  @keyframes throb{ from{ filter: brightness(1);} to{ filter: brightness(1.2);} }

  .cell.is-flagged { background: radial-gradient(circle at 50% 50%, #ff2e63, #6a1031 70%); box-shadow: 0 0 10px #ff2e63aa, inset 0 0 8px rgba(0,0,0,.6); }
  html[data-theme="pastel"] .cell.is-flagged{ background: radial-gradient(circle at 50% 50%, #ff8fab, #a34b64 70%); }
  html[data-theme="contrast"] .cell.is-flagged{ background: radial-gradient(circle at 50% 50%, #ff3060, #6a1031 70%); }
  html[data-theme="modern"] .cell.is-flagged{ background: radial-gradient(circle at 50% 50%, #ff5a7a, #3a0f20 70%); }
  .cell.is-flagged .flag { opacity: 1; transform: translateY(0) scale(1.2); }

  .flag{ width:60%; height:60%; position:relative; opacity:.0; transform: translateY(6px); transition: transform .18s ease, opacity .18s ease; pointer-events: none; }
  .flag::before{ content:""; position:absolute; left:44%; top:10%; width:10%; height:80%; background: linear-gradient(180deg, #ffffff, #a5b2ff); border-radius: 99px; }
  .flag::after{ content:""; position:absolute; left:48%; top:14%; width:52%; height:44%; background: linear-gradient(135deg, #ffffff, #ffd1dc);
    border-top-right-radius: 4px; border-bottom-right-radius: 10px; border-top-left-radius:2px; transform-origin: left center; animation: wave 1s ease-in-out infinite alternate; box-shadow: 0 0 10px rgba(255,255,255,.5); }
  @keyframes wave{ from{ transform: skewY(-6deg);} to{ transform: skewY(6deg);} }

  .number{ text-shadow: 0 2px 10px rgba(0,0,0,.4); transform: translateZ(6px) scale(.95); transition: transform .15s ease; }
  .cell.revealed .number{ transform: translateZ(6px) scale(1); }
  .n1{ color:var(--n1); } .n2{ color:var(--n2); } .n3{ color:var(--n3); } .n4{ color:var(--n4); } .n5{ color:var(--n5); } .n6{ color:var(--n6); } .n7{ color:var(--n7); } .n8{ color:var(--n8); opacity:.92; }

  .toast{ position: fixed; left:50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
    background: #141b3a; color: var(--text); border:1px solid rgba(255,255,255,.12); padding:10px 14px; border-radius: 12px; box-shadow: var(--shadow);
    opacity:0; pointer-events:none; transition: .25s ease; z-index: 60; }
  html[data-theme="pastel"] .toast{ background:#e9edff; border-color:#cfd7ff; }
  html[data-theme="contrast"] .toast{ background:#0d1226; border-color:#223; }
  html[data-theme="modern"] .toast{ background: rgba(20,28,40,.78); border-color: rgba(255,255,255,.10); }
  .toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

  #fxCanvas{ position:absolute; inset:0; pointer-events:none; }

  /* Floating controls (bottom) */
  .floating-controls {
    position: fixed; bottom: calc(10px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; background: rgba(15, 22, 48, 0.85); padding: 8px 10px; border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); backdrop-filter: blur(6px); z-index: 65; transition: opacity .2s ease, transform .2s ease;
  }
  html[data-theme="pastel"] .floating-controls{ background: rgba(240,244,255,.88); }
  html[data-theme="contrast"] .floating-controls{ background: rgba(10,16,32,.9); }
  html[data-theme="modern"] .floating-controls{ background: rgba(16,24,34,.72); border: 1px solid rgba(255,255,255,.08); }
  .floating-controls.hide{ opacity: .1; transform: translateX(-50%) translateY(8px); pointer-events: none; }
  .floating-controls .btn { padding: 8px 12px; font-size: 14px; }

  /* Back-to-top button */
  .back-to-top{
    position: fixed;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(84px + env(safe-area-inset-bottom)); /* sits above floating controls */
    z-index: 66;
    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .back-to-top.show{ opacity: 1; pointer-events: auto; transform: translateY(0); }

  /* Modal */
  .modal-ov{
    position: fixed; inset: 0;
    display: none; place-items: center;
    background: rgba(5,8,20,.6);
    backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             max(16px, calc(env(safe-area-inset-bottom) + 12px)) max(16px, env(safe-area-inset-left));
    z-index: 200;
  }
  .modal-ov.open{ display: grid; opacity: 1; pointer-events: auto; }
  .modal{
    width: min(520px, 96vw);
    background: var(--panel);
    border:1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 18px;
    transform: translateY(12px) scale(.98);
    animation: pop .22s ease forwards;
    color: var(--text);
  }
  @keyframes pop{ to{ transform: translateY(0) scale(1); } }
  .modal h2{ margin: 2px 0 8px; font-size: clamp(20px, 4vw, 26px); }
  .modal .big-emoji{ font-size: clamp(36px, 10vw, 56px); line-height: 1; }
  .modal .meta{ color: var(--muted); margin-bottom: 12px; }
  .modal .row{ display:flex; gap: 10px; flex-wrap: wrap; }
  .modal .row .btn{ flex: 1; text-align:center; }

  @media (prefers-reduced-motion: reduce){
    .cell{ transition:none } .flag::after{ animation:none }
  }

  /* -------- Small-screen tune-ups -------- */
  @media (max-width: 480px){
    .controls{ gap:8px }
    .pill{ padding:6px 10px }
    .btn{ padding:8px 12px; font-size:14px }
    .stat{ padding:6px 10px }
    #board{ --grid-gap: 5px }
    .board-wrap{ padding:10px 10px 88px }
  }

/* Mobilvennlig Custom mode */
.custom-settings {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
}

.custom-settings input {
    width: 70px;
}

/* Til toppen-knapp */
#toTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    background: #0ff;
    color: black;
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
}

/* Popup sentrert */
#popup {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 600px) {
    /* Mindre celler på mobil */
    .cell {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }
}