/* ==========================================================================
   BUGWORLD — base design system.
   Panels/HUD/screens inject their own scoped styles; this file owns the
   tokens, the reset, the primitives and the loading screen.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:        #0a0d0b;
  --panel:     rgba(16, 22, 18, 0.82);
  --panel-2:   rgba(24, 32, 26, 0.92);
  --stroke:    rgba(140, 200, 150, 0.16);
  --stroke-2:  rgba(140, 200, 150, 0.30);

  /* type */
  --text:      #eaf3ea;
  --muted:     #8fa596;

  /* brand */
  --accent:    #7ee08a;   /* leaf green   */
  --accent-2:  #ffc93c;   /* honey gold   */
  --good:      #51cf66;
  --warn:      #ffa94d;
  --bad:       #ff5a5a;
  --gold:      #ffd43b;
  --mana:      #6ad2ff;

  --shadow:    0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --radius:    14px;
  --radius-sm: 9px;
  --blur:      blur(16px) saturate(1.25);

  --font:      'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:      ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  overscroll-behavior: none;
}

body.playing { cursor: none; }
body.ui-open { cursor: default; }

#gameCanvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   primitives — shared by hud.js and screens.js
   -------------------------------------------------------------------------- */
.bw-panel {
  background: var(--panel);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.bw-btn {
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #08140b;
  background: linear-gradient(180deg, #9df0a6, var(--accent) 55%, #58c46a);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  cursor: pointer;
  transition: transform .12s cubic-bezier(.2,.9,.3,1.3), box-shadow .18s, filter .18s;
  box-shadow: 0 6px 18px rgba(126, 224, 138, 0.28), inset 0 1px 0 rgba(255,255,255,.45);
}
.bw-btn:hover   { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 26px rgba(126,224,138,.38), inset 0 1px 0 rgba(255,255,255,.5); }
.bw-btn:active  { transform: translateY(0) scale(.98); }
.bw-btn:disabled { filter: grayscale(.7) brightness(.6); cursor: not-allowed; transform: none; box-shadow: none; }

.bw-btn.ghost {
  background: rgba(255,255,255,.05);
  color: var(--text);
  border: 1px solid var(--stroke-2);
  box-shadow: none;
}
.bw-btn.ghost:hover { background: rgba(255,255,255,.11); }

.bw-input {
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  user-select: text;
}
.bw-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(126,224,138,.18); }
.bw-input::placeholder { color: var(--muted); }

.bw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 12px; font-weight: 600;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  color: var(--muted);
}

.bw-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.bw-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,.25); border-radius: 8px; }
.bw-scroll::-webkit-scrollbar-thumb { background: rgba(126,224,138,.28); border-radius: 8px; }
.bw-scroll::-webkit-scrollbar-thumb:hover { background: rgba(126,224,138,.45); }

/* --------------------------------------------------------------------------
   shared animations
   -------------------------------------------------------------------------- */
@keyframes bw-fade   { from { opacity: 0 } to { opacity: 1 } }
@keyframes bw-rise   { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes bw-pop    { 0% { transform: scale(.82); opacity: 0 } 60% { transform: scale(1.05) } 100% { transform: scale(1); opacity: 1 } }
@keyframes bw-spin   { to { transform: rotate(360deg) } }
@keyframes bw-pulse  { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes bw-float  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes bw-shimmer{ 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
@keyframes bw-crawl  { 0% { transform: translateX(-60px) rotate(-4deg) } 50% { transform: translateX(0) rotate(4deg) } 100% { transform: translateX(60px) rotate(-4deg) } }

/* --------------------------------------------------------------------------
   loading screen
   -------------------------------------------------------------------------- */
#loadingScreen {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  background:
    radial-gradient(1200px 700px at 50% 24%, #17301e 0%, transparent 62%),
    radial-gradient(900px 600px at 78% 84%, #1b2b3a 0%, transparent 60%),
    var(--bg);
}
#loadingScreen h1 {
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, #b6ffbe, var(--accent) 40%, var(--accent-2) 78%, #ffe9a8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 24px rgba(126, 224, 138, .22));
}
#loadingScreen .load-bug { font-size: 42px; animation: bw-crawl 1.9s ease-in-out infinite; }
#loadingScreen .load-msg { color: var(--muted); font-size: 15px; letter-spacing: .02em; min-height: 20px; }
#loadingScreen .load-track {
  width: min(420px, 74vw); height: 7px;
  background: rgba(255,255,255,.08);
  border-radius: 99px; overflow: hidden;
  border: 1px solid var(--stroke);
}
#loadingScreen .load-fill {
  height: 100%; width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 16px rgba(126,224,138,.5);
  transition: width .35s cubic-bezier(.2,.8,.3,1);
}
#loadingScreen.hide { opacity: 0; pointer-events: none; transition: opacity .5s ease; }

/* --------------------------------------------------------------------------
   fatal error card (shown if boot throws)
   -------------------------------------------------------------------------- */
#bootError {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center; padding: 24px;
  background: rgba(6, 9, 7, .92);
}
#bootError .card {
  max-width: 620px; padding: 26px 28px;
  background: var(--panel-2);
  border: 1px solid rgba(255, 90, 90, .35);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#bootError h2 { color: var(--bad); font-size: 21px; margin-bottom: 10px; }
#bootError pre {
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: var(--muted); white-space: pre-wrap; word-break: break-word;
  max-height: 40vh; overflow: auto; user-select: text;
  background: rgba(0,0,0,.35); padding: 12px; border-radius: 8px; margin-top: 12px;
}

/* --------------------------------------------------------------------------
   crosshair (hud.js styles the rest)
   -------------------------------------------------------------------------- */
#crosshair {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 40; pointer-events: none;
  width: 22px; height: 22px;
  display: none;
}
#crosshair::before, #crosshair::after {
  content: ''; position: absolute; background: rgba(255,255,255,.85);
  box-shadow: 0 0 4px rgba(0,0,0,.8);
}
#crosshair::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
#crosshair::after  { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }
body.playing #crosshair { display: block; }

@media (max-width: 720px) {
  :root { --radius: 11px; }
}

/* --------------------------------------------------------------------------
   EARTH 1 — the blocky world has no health, hunger, hotbar, mining, boss or
   match, so the bug HUD panels for those are hidden. Chat, nameplates, the
   status pills, toasts and the scoreboard stay.
   -------------------------------------------------------------------------- */
body.earth1 #hud-root .hud-hotbar,
body.earth1 #hud-root .hud-xp,
body.earth1 #hud-root .hud-vitals,
body.earth1 #hud-root .hud-match,
body.earth1 #hud-root .hud-boss,
body.earth1 #hud-root .hud-kick,
body.earth1 #hud-root .hud-prompt,
body.earth1 #hud-root .hud-center,
body.earth1 #hud-root .hud-map,
body.earth1 #hud-root .hud-killfeed {
  display: none !important;
}

/* the one true server, front and centre */
#earthBar {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%);
  z-index: 34; pointer-events: none;
  display: none; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: var(--panel); backdrop-filter: var(--blur);
  border: 1px solid var(--stroke); border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
body.earth1 #earthBar { display: flex; }
#earthBar .eb-name { color: var(--accent-2); }
#earthBar .eb-sep { opacity: .3 }
#earthBar .eb-v { color: var(--text) }
#earthBar .eb-lab { color: var(--muted); font-weight: 600; font-size: 11.5px }

/* --------------------------------------------------------------------------
   SHIFT LOCK — Roblox's over-the-shoulder mode. The crosshair becomes a ring
   so you can tell at a glance which camera mode you are in.
   -------------------------------------------------------------------------- */
body.shiftlock #crosshair { width: 26px; height: 26px; }
body.shiftlock #crosshair::before,
body.shiftlock #crosshair::after { background: rgba(255,255,255,.95); }
body.shiftlock #crosshair::before { top: 0; height: 7px; }
body.shiftlock #crosshair::after  { left: 0; width: 7px; }
body.shiftlock #crosshair {
  border: 1.5px solid rgba(255,255,255,.9);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(0,0,0,.5);
}
#shiftLockChip {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 34; pointer-events: none; display: none;
  padding: 5px 12px; border-radius: 999px;
  background: var(--panel); backdrop-filter: var(--blur);
  border: 1px solid var(--stroke-2); box-shadow: var(--shadow);
  font-size: 11.5px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
  color: var(--accent);
}
body.shiftlock #shiftLockChip { display: block; animation: bw-pop .22s ease both; }

/* interaction prompt (Earth 1 vending machine, shrine, ...) */
#earthPrompt {
  position: fixed; left: 50%; bottom: 132px; transform: translateX(-50%);
  z-index: 34; pointer-events: none; display: none;
  align-items: center; gap: 9px;
  padding: 8px 15px 8px 9px;
  background: var(--panel); backdrop-filter: var(--blur);
  border: 1px solid var(--stroke-2); border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 13.5px; font-weight: 700;
  animation: bw-pop .18s ease both;
}
#earthPrompt .ep-key {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 7px;
  background: linear-gradient(180deg, #9df0a6, var(--accent) 60%, #58c46a);
  color: #08140b; font-size: 12px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
#earthPrompt .ep-t { color: var(--text); }

/* --------------------------------------------------------------------------
   HUNGER REMOVED — hide the food readout and its arc. The value stays pinned
   full underneath so anything reading it still behaves as "well fed".
   -------------------------------------------------------------------------- */
#hud-root .hud-vrow:has([data-v="food"]) { display: none; }
#hud-root .hud-arc[data-k="fd"],
#hud-root .hud-arc-bg[data-k="fd"] { display: none; }