/* =========================================================
   Sandbar Games – Global Styles (mobile-first)
   ========================================================= */

:root {
  --bg:#0e0f12; --panel:#151821; --ink:#e9eef7; --muted:#8a93a6; --accent:#69b4ff; --card:#191e28;
  --ok:#8ff0a4; --err:#ff8e8e;
  --border: rgba(255,255,255,0.06);
}

* { box-sizing: border-box; }
html, body { height:100%; }
html, body { overflow-x:hidden; } /* guard against horizontal spill */
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-text-size-adjust: 100%;
}

img, svg, video, canvas { max-width:100%; height:auto; }

/* Links */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =========================================================
   Navbar (desktop + mobile hamburger)
   ========================================================= */

.nav {
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  padding:14px 20px;
  background:var(--panel);
  position:sticky; top:0; z-index:10;
  border-bottom:1px solid var(--border);
}
.nav a { margin-right:14px; color:var(--ink); white-space:nowrap; }
.nav a:last-child { margin-right:0; }
.nav a.brand { font-weight:700; margin-right:20px; }
.nav .btn { background:var(--accent); color:#0b0b0b; padding:8px 12px; border-radius:10px; text-decoration:none; }

.nav-left, .nav-right {
  display:flex; align-items:center;
  gap:14px; flex-wrap:nowrap; min-width:0;
}

/* Hamburger button (hidden on desktop) */
.nav-toggle {
  display:none;
  align-items:center; justify-content:center;
  width:36px; height:36px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
}
.nav-toggle svg { width:20px; height:20px; }

/* Mobile dropdown panel (hidden by default) */
.nav-menu { display:none; }

/* =========================================================
   Layout containers
   ========================================================= */

/* Mobile-first wrap: safe gutters + no spill.
   Scales nicely for 393–440px devices and up. */
.wrap {
  max-width:1100px;
  margin:24px auto;
  padding-inline: clamp(12px, 4vw, 16px);
  width:100%;
}

/* Generic grid for cards (responsive columns) */
.grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap:16px;
}

/* Cards */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  display:flex; flex-direction:column; gap:10px;
  transition: transform .12s ease, border-color .12s ease;
  min-width:0; /* prevent content from forcing overflow */
}
.card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.12); }
.card .icon { width:42px; height:42px; opacity:0.92; }
.card h3 { margin:6px 0 0; font-size:1.15rem; }
.card p { margin:6px 0; color:var(--muted); }
.card .meta { color:var(--muted); font-size:0.92rem; }
.card .actions { margin-top:auto; }

.button {
  display:inline-block; background:#2a3243; padding:8px 12px; border-radius:10px;
}

/* Footer */
.footer { margin:50px 0 30px; text-align:center; color:var(--muted); }

/* =========================================================
   Mobile-first adjustments (393–440px sweet spot)
   ========================================================= */

/* Tighten gutters slightly on very small widths (≤ 400px) */
@media (max-width: 400px) {
  .wrap { padding-inline: 12px; }
  .grid { gap: 14px; }
  .card { border-radius:14px; }
}

/* 440px and below: ensure no wrapping chaos */
@media (max-width: 440px) {
  .nav { padding:12px 14px; }
  .nav a.brand { margin-right:12px; }
}

/* =========================================================
   Breakpoint for mobile hamburger
   ========================================================= */

@media (max-width: 700px) {
  /* Show brand + hamburger; hide inline link clusters */
  .nav-left a:not(.brand),
  .nav-right {
    display:none;
  }
  .nav-toggle {
    display:inline-flex;
  }

  /* Full-width dropdown menu under sticky bar */
  .nav-menu {
    position:fixed;
    left:0; right:0; top:56px; /* matches .nav height */
    background:var(--panel);
    border-top:1px solid var(--border);
    display:none;
    flex-direction:column;
    padding:8px 0;
    z-index:1000;
  }
  .nav.open .nav-menu { display:flex; }

  .nav-menu a {
    padding:12px 16px;
    color:var(--ink);
    text-decoration:none;
    border-bottom:1px solid var(--border);
  }
  .nav-menu a:last-child { border-bottom:none; }

  /* Unify the “Sign In” look inside the panel */
  .nav-menu a.btn {
    background:#2a3243;
    color:var(--ink);
    border-radius:0;
    margin:0;
  }
}

/* =========================================================
   Utilities
   ========================================================= */

/* Prevent long strings from breaking layout */
.u-ellipsis { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-nowrap   { white-space:nowrap; }
.u-muted    { color:var(--muted); }
.u-center   { text-align:center; }


.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #1c1e22;
  padding: 2rem;
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  color: #fff;
  text-align: center;
}

.results-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  font-size: 1.2rem;
  text-align: left;
}

.fat-button {
  font-size: 1.1rem;
  padding: 1rem 2rem;
  margin-top: 1rem;
}