/* Kyle's community website - shared style. Mobile-first, dark survival vibe. */
:root {
  --bg: #0e120c;
  --bg2: #151b12;
  --card: #1a2115;
  --line: #2c3a24;
  --text: #e8e4d8;
  --muted: #9aa08c;
  --accent: #8fb339;      /* moss green */
  --accent2: #d9a441;     /* amber */
  --danger: #c0392b;
  --radius: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 16px 16px 48px; }

/* top bar: NOT sticky — it scrolls away with the page, so it never
   freezes at the top. Only the scrollbox below is a fixed-height
   box that scrolls inside itself. */
.topbar {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 10px 16px; background: var(--bg2);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 8px;
  white-space: nowrap; overflow: hidden;
  font-weight: 800; letter-spacing: .5px; font-size: 14px; }
.brand-name { white-space: nowrap; }
.brand-server { font-weight: 400; color: var(--muted); font-size: 11px; white-space: nowrap; }
nav.links { display: flex; gap: 4px; flex-wrap: wrap; }
/* nav links moved to the bottom of the page, so they never crowd the top */
nav.bottom-links { margin: 28px 0 12px; padding-top: 16px;
  border-top: 1px solid var(--line); justify-content: center; }
nav.links a {
  color: var(--text); text-decoration: none; font-size: 14px;
  padding: 8px 10px; border-radius: 8px;
}
nav.links a.active, nav.links a:active { background: var(--card); color: var(--accent); }

h1 { font-size: 24px; margin: 18px 0 8px; }
h2 { font-size: 18px; margin: 22px 0 8px; }
p { color: var(--text); }
.muted { color: var(--muted); font-size: 14px; }

/* cards */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin: 12px 0;
}
.card h3 { margin: 0 0 6px; font-size: 16px; }
.badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  background: var(--bg2); border: 1px solid var(--line);
  color: var(--accent2); border-radius: 999px; padding: 2px 10px;
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px;
}
.price { font-size: 18px; font-weight: 800; color: var(--accent); margin: 6px 0; }
.desc { color: var(--muted); font-size: 14px; margin: 4px 0 10px; }

/* menu cards on home page */
.menu { display: grid; gap: 12px; margin-top: 16px; }
.menu a {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; text-decoration: none; color: var(--text);
}
.menu a b { font-size: 17px; display: block; margin-bottom: 4px; }
.menu a span { color: var(--muted); font-size: 14px; }
.menu a:active { border-color: var(--accent); }

/* forms + buttons */
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
input, select, textarea {
  width: 100%; padding: 12px; font-size: 16px; /* 16px stops iPhone zoom */
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
}
textarea { min-height: 70px; resize: vertical; }
button, .btn {
  display: inline-block; width: 100%; padding: 14px; margin-top: 12px;
  font-size: 16px; font-weight: 700; text-align: center;
  background: var(--accent); color: #101408; border: 0; border-radius: 10px;
  cursor: pointer; text-decoration: none;
}
button:active { opacity: .85; }
button.secondary { background: var(--bg2); color: var(--text); border: 1px solid var(--line); }
button.danger { background: var(--danger); color: #fff; }
button.small, .btn.small { width: auto; padding: 8px 14px; font-size: 14px; margin-top: 8px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* shop grid */
.grid { display: grid; gap: 12px; }
@media (min-width: 560px) { .grid { grid-template-columns: 1fr 1fr; } }

/* shop search + category tabs */
.searchbar { margin: 12px 0 8px; }
.tabs { display: flex; gap: 8px; overflow-x: auto; margin: 4px 0 12px; padding-bottom: 4px; }
.tab {
  white-space: nowrap; background: var(--card); border: 1px solid var(--line);
  color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 14px;
  cursor: pointer; width: auto; margin: 0;
}
.tab.active { background: var(--accent); color: #14100a; border-color: var(--accent); font-weight: 700; }

/* home page hero banner with nav buttons overlaid on the image */
.hero-top { position: relative; margin: 0; }
.hero-top img { display: block; width: 100%; height: auto; }
/* Hero buttons, in Jenna's rows:
   Row 1: Shop (left) / GPS (right)
   Row 2: Rentals (left) / Decode (right)
   Row 3: Loadouts (left) / Home (centre) / Leaderboard (right)
   Admin is not in the hero — it is still in the cards below the hero. */
.hero-nav {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 10px 8px;
}
.hero-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.hero-row a.active { font-size: 13px; padding: 9px 16px; }
.hero-nav a {
  background: rgba(10, 14, 8, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #94d600; text-decoration: none; font-size: 12px; font-weight: 600;
  white-space: nowrap;
  padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
}
.hero-nav a.active {
  background: rgba(24, 30, 18, .78); border-color: #e8e4d8; color: #b8f53d;
}

/* loadout builder (rebuilt DST-style) */
.saved-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.saved-item .btn.small { margin-top: 0; }

/* map */
.mapbox { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mapbox img { display: block; width: 100%; height: auto; touch-action: manipulation; }
/* checkout mini-map + Map page: zoomable, pannable, shared camera */
.mapbox .mapview { position: relative; height: 340px; overflow: hidden; touch-action: none; background: #0a0c0a; }
.mapbox .mapview.tall { height: min(70vh, 560px); }
/* standalone mapview (rentals page) — same sizing without .mapbox wrapper */
.mapview { position: relative; height: 340px; overflow: hidden; touch-action: none; background: #0a0c0a; border-radius: 12px; }
.mapbox .mapview img { position: absolute; left: 0; top: 0; width: auto; height: auto; max-width: none; max-height: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.mapbox .mapview .marker { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid #ffd24a; border-radius: 50%; background: rgba(255,210,74,.25); box-shadow: 0 0 0 2px #000; pointer-events: none; }
.mapbox .mapview .marker::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #ffd24a; }
.zoomctl { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.zoomctl button {
  width: 44px; height: 44px; border-radius: 12px; font-size: 24px; line-height: 1;
  background: rgba(20, 24, 18, .85); color: var(--accent); border: 1px solid var(--line);
}
.zoomctl button:disabled { opacity: .35; }
/* admin tabs */
.admintabs { display: flex; gap: 8px; margin-bottom: 12px; position: sticky; top: 0; z-index: 5;
  background: var(--bg); padding: 8px 0; }
.admintabs button { flex: 1; padding: 12px 4px; border-radius: var(--radius);
  background: var(--bg2); color: var(--muted); border: 1px solid var(--line);
  font-weight: 700; font-size: 15px; }
.admintabs button.active { background: var(--accent); color: #141810; border-color: var(--accent); }
#panel h2 { scroll-margin-top: 12px; }
.marker {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 3px solid var(--accent2); border-radius: 50%;
  background: rgba(217,164,65,.35); pointer-events: none;
  box-shadow: 0 0 0 2px #000;
}
.coords {
  font-size: 30px; font-weight: 800; text-align: center; letter-spacing: 1px;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px; margin: 12px 0;
}
.coords small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }

/* notices */
.notice {
  background: #241d0e; border: 1px solid var(--accent2); color: #f0d9a8;
  border-radius: var(--radius); padding: 12px 14px; font-size: 14px; margin: 12px 0;
}
.ok {
  background: #14210f; border: 1px solid var(--accent); color: #cfe8a3;
  border-radius: var(--radius); padding: 12px 14px; font-size: 14px; margin: 12px 0;
}
.err {
  background: #2a100d; border: 1px solid var(--danger); color: #f2b8b0;
  border-radius: var(--radius); padding: 12px 14px; font-size: 14px; margin: 12px 0;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.hidden { display: none !important; }
footer { text-align: center; color: var(--muted); font-size: 12px; margin-top: 32px; }

/* ---------- v0.2: shop pictures, kits, cart, catalog picker ---------- */
.thumb {
  width: 100%; height: 110px; object-fit: contain;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 8px;
  overflow: hidden;
}
.thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.color-dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  margin-right: 6px; border: 1px solid var(--line); vertical-align: baseline;
}
.thumb.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.thumb.tiny { width: 44px; height: 44px; margin: 0; flex-shrink: 0; }
.thumb.tiny.placeholder { font-size: 22px; }

.card.kit { border-color: var(--accent); }
.kit-badge { background: var(--accent); color: #14100a; border: none; }
.kit-contents { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.kit-line {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 8px; margin: 4px 0;
}
.kit-line .thumb { width: 34px; height: 34px; margin: 0; }
.kit-line .thumb.placeholder { font-size: 18px; }
.kit-pick-list { margin: 8px 0; }

.cartbar {
  position: sticky; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 10px 14px; margin: 14px 0;
}
.cart-line { display: flex; gap: 12px; align-items: center; }
.cart-line .thumb { width: 56px; height: 56px; margin: 0; flex-shrink: 0; }
.cart-line .thumb.placeholder { font-size: 26px; }
.cart-info { flex: 1; }
.qtyrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.total-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 18px; margin: 14px 0;
}

.picker-results { margin: 4px 0 8px; }
.picker-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 8px; margin: 4px 0;
  cursor: pointer;
}
.picker-row:active { border-color: var(--accent); }

.mono { font-family: ui-monospace, monospace; font-size: 12px; }
/* (retired: the old cropped mini-map layout is gone; .mapview owns sizing now) */

/* ---------- loadout builder (DST-style) ---------- */
.mg { color: #b8f53d; }
.status-pill {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 16px; margin: 12px 0;
  font-size: 14px; color: var(--muted); text-align: center;
}
.status-pill b { color: var(--text); }
.sec-label {
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
/* gear slot cards */
.gear-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gear-card {
  width: 100%; margin: 0; padding: 12px; text-align: left;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--text); cursor: pointer;
}
.gear-card b { display: block; font-size: 15px; }
.gear-card span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.gear-card:active { border-color: #94d600; }
.gear-card.sel { border-color: #94d600; box-shadow: 0 0 10px rgba(148,214,0,.3); }
.gear-card.sel b { color: #b8f53d; }
/* body preview with hotspot buttons */
.bodyview {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: #0a0d09; border: 1px solid var(--line);
}
.bodyview img { display: block; width: 100%; height: auto; }
/* gear pictures pinned over the body (mask on face, pack at side) */
.bodyview .gear-overlay {
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: none; height: auto;
}
#packOverlay { left: 84%; top: 47%; width: 26%; }
.hotspot {
  position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  padding: 0; border-radius: 50%; border: 2px solid rgba(148,214,0,.7);
  background: rgba(10,14,8,.55); color: #b8f53d;
  font-size: 20px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.hotspot:active { transform: scale(1.1); }
.hotspot.sel { background: rgba(148,214,0,.9); color: #14100a; border-color: #94d600; }
/* filled slot: red "+" so you can see at a glance it's taken (tap to change it) */
.hotspot.has { border-color: rgba(255,107,107,.9); color: #ff6b6b;
  box-shadow: 0 0 10px rgba(255,80,80,.55); }
.hotspot.has.sel { background: rgba(255,107,107,.92); color: #1c0a0a; border-color: #ff6b6b; }
/* quickbar */
.qb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* item picker: live search results under the search box */
.pick-results { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pick-row { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--line);
  background: rgba(148,214,0,.06); cursor: pointer; text-align: left; }
.pick-row:active { background: rgba(148,214,0,.18); }.qb-cell {
  width: 100%; margin: 0; padding: 10px; text-align: left;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--text); cursor: pointer;
}
.qb-cell b { display: block; font-size: 17px; }
.qb-cell span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.qb-cell.sel { border-color: #94d600; box-shadow: 0 0 10px rgba(148,214,0,.3); }
.qb-cell.sel b { color: #b8f53d; }

/* ---------- configure-item bottom sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.68); z-index: 300;
  display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop.hidden { display: none; }
.sheet { background: #161a15; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto;
  border-radius: 18px 18px 0 0; padding: 14px 14px 22px; border-top: 3px solid var(--accent);
  box-shadow: 0 -8px 40px rgba(0,0,0,.6); }
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 17px; }
.sheet-head b { flex: 1; }
.icon-btn { background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px;
  padding: 6px 10px; font-size: 15px; }
.sheet-item { display: flex; gap: 12px; align-items: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.sheet-qty { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 10px 0; }
.sheet-qty button { width: 44px; height: 44px; font-size: 20px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.sheet-qty b { font-size: 18px; min-width: 30px; text-align: center; }
.btn-primary { display: block; width: 100%; background: var(--accent); color: #101408; border: 0;
  border-radius: 12px; padding: 13px; font-size: 16px; font-weight: 800; margin: 8px 0; }
.btn-attach { display: block; width: 100%; background: #1d2b12; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 12px; padding: 13px; font-size: 16px;
  font-weight: 700; margin: 8px 0; }
.btn-ghost { display: block; width: 100%; background: none; color: var(--muted);
  border: 1px solid var(--line); border-radius: 12px; padding: 11px; font-size: 15px; margin: 8px 0; }
.sheet-picked-list { margin-bottom: 8px; }
.sheet-picked { display: flex; align-items: center; gap: 8px; background: #1d2b12;
  border: 1px solid var(--accent); border-radius: 10px; padding: 6px 8px; margin-bottom: 6px; }
.sheet-nested { display: flex; align-items: center; gap: 8px; background: #141a10;
  border: 1px dashed var(--line); border-radius: 10px; padding: 5px 8px 5px 26px; margin: -2px 0 6px; }
.mini-qty button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 15px; }
.mini-btn { border: 1px solid var(--accent2); background: none; color: var(--accent2);
  border-radius: 8px; padding: 5px 8px; font-size: 12px; white-space: nowrap; }
.compat-ok { color: var(--accent); font-weight: 700; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.chip { border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 8px 14px; font-size: 14px; }
.chip.on { background: var(--accent); color: #101408; border-color: var(--accent); font-weight: 700; }
.sheet-search { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 15px; margin-bottom: 8px; }
.sheet-results { margin-bottom: 8px; }

/* paper-doll: filled slots show the item's picture on the character */
.hotspot.filled { padding: 3px; }
.hotspot.filled img { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; }
.hs-count { position: absolute; bottom: -7px; right: -7px; background: var(--accent); color: #101408;
  font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 6px; line-height: 1.4; }

/* Scroll box: shop + admin lists scroll inside ONE box, page still scrolls.
   The header is NOT frozen — it scrolls away normally. This box is the
   frozen part: a fixed height, so its items scroll inside it.
   Left edge: flush with the left edge of the page (it cancels the page
   wrap's 16px left padding). Width: 94%, not full width — the strip of
   page to the right of the green box is still the page, so touching
   there (or below the box) scrolls the page itself down to the
   redirect links at the bottom. Green border, like the kit cards. */
.scrollbox { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--accent); border-radius: var(--radius); padding: 12px;
  margin-left: -16px; width: 94%; }
footer a { color: var(--accent); }