:root{
  --bg:#000; --ink:#fff; --ink-dim:#bfbfbf; --card:#0a0a0a; --border:#1a1a1a;
  --glow:0 0 8px rgba(255,255,255,.6), 0 0 22px rgba(255,255,255,.35);

  /* site-wide primary */
  --primary:#ffffff;
  --primary-glow-color:#ffffff;
  --primary-glow:0 0 8px var(--primary-glow-color), 0 0 22px var(--primary-glow-color);

  /* background controls */
  --bg-hue:0deg;               /* hue-rotate degrees */
  --bg-tint: transparent;      /* rgba/hex; overlay when enabled */
  --bg-tint-opacity: .6;       /* overlay strength */
}

*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}

/* blurred background image with optional tint layer */
#theme-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:center/cover no-repeat;
  filter:hue-rotate(var(--bg-hue)) blur(50px) brightness(.8) saturate(120%);
  opacity:.45;
}
#theme-bg::after{
  content:""; position:absolute; inset:0;
  background: var(--bg-tint);
  mix-blend-mode: color;       /* recolor while preserving luminance */
  opacity: var(--bg-tint-opacity);
  pointer-events:none;
}

/* banner */
#banner{position:sticky;top:0;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 14px;background:rgba(0,0,0,.4);border-bottom:1px solid var(--border);backdrop-filter:blur(6px);z-index:50}
#banner-text{grid-column:2;text-align:center;font-weight:700;text-shadow:var(--glow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#banner-plus{grid-column:3;justify-self:end;border:1px solid var(--border);background:var(--card);color:var(--ink);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,background .12s ease}
#banner-plus:hover{transform:scale(1.05);background:#121212}

.container{max-width:1100px;margin:48px auto;padding:0 16px}
.center-only{display:flex;flex-direction:column;align-items:center;text-align:center}

/* title/buttons use primary */
.neon{font-size:64px;letter-spacing:8px;margin-top:40px;color:var(--primary);text-shadow:var(--primary-glow)}
.madeby{margin-top:8px;font-size:14px;color:var(--ink-dim);letter-spacing:.5px}

/* generic buttons */
button, input[type="button"], input[type="submit"]{
  appearance:none;-webkit-appearance:none;padding:10px 14px;background:#121212;color:var(--ink);
  border:1px solid var(--border);border-radius:10px;font:inherit;cursor:pointer;
  transition:transform .12s ease,background .12s ease,border-color .12s ease}
button:hover, input[type="button"]:hover, input[type="submit"]:hover{background:#171717;transform:translateY(-1px)}
button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible{outline:2px solid #3a8fff;outline-offset:2px;border-color:#3a8fff}

/* link-like buttons */
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;border:1px solid var(--border);background:#121212;color:var(--primary);text-shadow:var(--primary-glow);text-decoration:none;transition:transform .12s ease,background .12s ease}
.btn-primary.big{padding:14px 22px;font-size:18px;margin:60px auto 0}
.btn-secondary{margin-top:16px}
.btn-primary:hover,.btn-secondary:hover{transform:translateY(-1px);background:#171717}

/* modal */
#modal.hidden{display:none}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:100}
.modal-content{width:min(720px,95vw);background:#0c0c0c;border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 8px 40px rgba(0,0,0,.6);position:relative;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.modal-content h2{margin:0 0 14px;text-shadow:var(--glow)}
.close{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--ink);font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer}
.close:hover{background:#121212}

label{display:block;margin:10px 0 6px;color:var(--ink-dim)}
input[type="text"],input[type="password"],input[type="color"],input[type="range"],select{width:100%;padding:10px 12px;background:#0a0a0a;border:1px solid var(--border);border-radius:10px;color:var(--ink);outline:none}
input[type="color"]{padding:2px;height:44px}
small.helper{color:#9a9a9a;display:block;margin-top:4px}
hr.div{border:none;border-top:1px solid var(--border);margin:14px 0}

.settings-section{margin-top:10px}
.settings-section h3{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.4px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
@media (max-width:640px){.grid-2{grid-template-columns:1fr}}
.inline{display:flex;align-items:center;gap:10px;margin-top:6px;color:var(--ink-dim)}
.buttons-row{margin-top:16px;display:flex;gap:10px;justify-content:flex-end}
.err{color:#ff6b6b;margin-top:6px;min-height:1.2em}
.hint{margin-top:10px;color:#aaa;text-align:center}
#save-status{margin-top:8px;color:var(--ink-dim);min-height:1.2em}

/* games grid */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:26px}
.game-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:#0b0b0b;border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.game-card:hover{transform:translateY(-2px);background:#111;box-shadow:0 8px 26px rgba(0,0,0,.35)}
.game-card .thumb{width:100%;padding-top:56.25%;background-size:cover;background-position:center;filter:saturate(115%)}
.game-card .meta{padding:10px 12px;display:flex;justify-content:center}
.game-card .title{font-weight:700;text-align:center;color:var(--primary);text-shadow:var(--primary-glow)}

/* keep settings form hidden until unlocked */
#banner-form{display:none}
#banner-form.unlocked{display:block}

/* ===== BOTTOM AD BANNER ===== */
#bottom-ad {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110px; /* supports 728x90 with nice padding */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 10px 0;
}

#bottom-ad img {
  max-width: 728px;
  max-height: 90px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* tablet */
@media (max-width: 900px) {
  #bottom-ad {
    height: 90px;
  }
  #bottom-ad img {
    max-width: 600px;
  }
}

/* mobile */
@media (max-width: 600px) {
  #bottom-ad {
    height: 70px;
  }
  #bottom-ad img {
    max-width: 320px; /* mobile banner scale-down */
  }
}