/* ============================================
   Browser Games Plus — Ultimate Game Template
   style.css (BUILDER)
   ============================================ */
* { box-sizing: border-box; }

:root{
  /* Neon (default) */
  --bg:#0f1115; --panel:#1a1d25; --panel-2:#0e1016; --text:#f6f7fb;
  --muted:#aab3c7; --accent:#00f2ea; --accent2:#03c9c2; --line:#242a39;
  --hud-bg: rgba(18,22,31,.65);
  --title:#00f2ea; --scoreboard:#f6f7fb;
  --shadow:0 10px 25px rgba(0,0,0,.35);
  --title-font: Inter, system-ui, sans-serif;
}

/* ===== Base / Layout ===== */
html,body{
  height:100%; margin:0; color:var(--text);
  background: radial-gradient(800px 600px at 10% 5%, #151a24, #0b0d12 40%, #07080c 100%);
  font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.layout{
  display:grid; grid-template-columns: 320px 1fr; gap:16px;
  padding:16px; max-width:1280px; margin:0 auto;
}

/* ===== Host panel ===== */
.panel{
  background: linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:16px; position:relative;
  max-height: calc(100vh - 32px); overflow:auto;
}
.panel h2{ margin:4px 0 10px; }
.field{ margin:10px 0 12px; }
.field label{ display:block; margin-bottom:6px; color:var(--muted); font-size:13px; }
select,input[type=range],input[type=text],input[type=number]{ width:100%; }
.checklist label{ display:block; margin:6px 0; }
.checklist .group-title{ margin-top:8px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }

/* Buttons */
.btn{
  background: linear-gradient(180deg,var(--accent),var(--accent2));
  border:none; color:#001112; padding:10px 14px; border-radius:10px;
  font-weight:700; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.25); margin-right:8px;
}
.btn.outline{ background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn.block{ display:block; width:100%; margin:8px 0; }

/* Small text / helpers */
.hint{ color:var(--muted); font-size:12px; }
.small{ font-size:12px; color:var(--muted); }
.row{ display:flex; gap:10px; align-items:center; }
.row > *{ flex:1; }

/* ===== Stage & HUD ===== */
.stage{ position:relative; }
.hud{
  display:flex; gap:24px; align-items:center; justify-content:space-between;
  padding:10px 14px; margin-bottom:10px; border:1px solid var(--line);
  border-radius:12px; background:var(--hud-bg);
}
.gametitle{
  margin-right:auto;
  font-family: var(--title-font);
  font-weight:900; letter-spacing:.02em; color:var(--title);
  font-size: clamp(24px, 5vw, 52px);
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.scorebox{ display:flex; gap:18px; }
.scorebox b{ color:var(--scoreboard); }

canvas{
  width:100%; height:auto; display:block;
  border-radius:12px; border:1px solid var(--line); background:transparent;
}

/* ===== Overlays ===== */
.overlay{
  position:absolute; inset:60px 16px 16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,12,18,.55); backdrop-filter:blur(4px);
  border-radius:12px;
}
.overlay.hidden{ display:none; }
.panel.center{ text-align:center; }
.sub{ color:var(--muted); }

/* ===== Footer link ===== */
.footer{ margin-top:10px; text-align:center; color:var(--muted); font-size:12px; }
.footer a{ color:var(--accent); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

/* ===== Themes (body gets .theme-*) ===== */
body.theme-neon{
  --bg:#0f1115; --panel:#1a1d25; --panel-2:#0e1016; --text:#f6f7fb;
  --muted:#aab3c7; --accent:#00f2ea; --accent2:#03c9c2; --line:#242a39;
  --hud-bg: rgba(18,22,31,.65); --title:#00f2ea; --scoreboard:#f6f7fb;
}

body.theme-forest{
  --bg:#0f1311; --panel:#15201a; --panel-2:#0d1712; --text:#e8f5ec;
  --muted:#9db5a7; --accent:#45d483; --accent2:#2dad69; --line:#1d2a22;
  --hud-bg: rgba(16,24,20,.60); --title:#45d483; --scoreboard:#e8f5ec;
  background: radial-gradient(800px 600px at 15% 10%, #122019, #0c1611 50%, #0a130f 100%);
}

body.theme-sunset{
  --bg:#140e10; --panel:#221319; --panel-2:#1a0f14; --text:#ffe9f2;
  --muted:#e1b9c7; --accent:#ff6a88; --accent2:#ff9966; --line:#2a1820;
  --hud-bg: rgba(30,12,18,.55); --title:#ff6a88; --scoreboard:#ffe9f2;
  background: radial-gradient(900px 650px at 80% 0%, #2a1420, #180d12 55%, #12090c 100%);
}

body.theme-midnight{
  --bg:#0a0c12; --panel:#121826; --panel-2:#0a0f1a; --text:#eaf1ff;
  --muted:#a9b6d5; --accent:#6ca2ff; --accent2:#b678ff; --line:#1a2335;
  --hud-bg: rgba(12,16,24,.6); --title:#6ca2ff; --scoreboard:#eaf1ff;
  background: radial-gradient(1000px 700px at 70% 5%, #0f1522, #0a0e18 55%, #070a10 100%);
}

body.theme-candy{
  --bg:#13090e; --panel:#1e0f17; --panel-2:#140a10; --text:#fff5fb;
  --muted:#f0b9d7; --accent:#ff4dd2; --accent2:#ffa3e2; --line:#2a1722;
  --hud-bg: rgba(18,8,14,.6); --title:#ff4dd2; --scoreboard:#fff5fb;
  background: radial-gradient(880px 640px at 12% 8%, #26101c, #180a12 55%, #12070c 100%);
}

/* ===== Builder-only badges / tags ===== */
.badge{
  display:inline-block;
  padding:4px 8px;
  border:1px solid var(--line, #2a2a39);
  border-radius:999px;
  color:var(--muted, #aab3c7);
  font-size:12px;
}
.badge.accent{
  border-color:var(--accent, #00f2ea);
  color:var(--accent, #00f2ea);
}

/* Marker classes for JS (non-empty so minifiers don’t choke) */
.builder-only{ --builder-marker: 1; }
.compiled-hide{ --compiled-marker: 1; }

/* ===== Accessibility / focus ===== */
input, select, button { outline: none; }
input:focus, select:focus, button:focus{
  /* two-layer focus ring; uses accent with a safe fallback */
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.25),
    0 0 0 4px var(--accent, #00f2ea);
}

/* ===== Divider ===== */
hr{ border:none; border-top:1px solid var(--line); margin:10px 0; }

/* ===== Load screen (builder preview) ===== */
.loadscreen{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.86); color:#fff; z-index:99; flex-direction:column; gap:10px; text-align:center;
}
.loadscreen.hidden{ display:none !important; }
.loadscreen h1{ margin:0; font-size:clamp(26px,4.5vw,48px); color:var(--title); font-family:var(--title-font); }
.spinner{
  width:36px; height:36px; border-radius:50%; border:3px solid rgba(255,255,255,.25);
  border-top-color:var(--accent); animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }