/* Wild Wander UI — Wild Noir / Electric Teal (2026-11-06 v2) */
:root {
  --ink: #070a09;
  --forest: #12221c;
  --moss: #2d5a45;
  --teal: #00e0c8;
  --teal-dim: #00a896;
  --amber: #f0b429;
  --ember: #ff5a3c;
  --fog: #d4ddd6;
  --paper: #f4f7f2;
  --paper-2: #e4ebe2;
  --hud: rgba(7, 12, 10, 0.78);
  --hud-border: rgba(0, 224, 200, 0.18);
  --hud-fg: #f0f4f1;
  --muted: #8a9a90;
  --danger: #ff5a3c;
  --safe: #3ee08a;
  --display: 'Outfit', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --slot: clamp(40px, 5.6vw, 56px);
  --r: 10px;
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body {
  font-family: var(--body);
  font-size: 15px;
  color: var(--hud-fg);
  box-sizing: border-box;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
button { font-family: inherit; cursor: pointer; color: inherit; }
button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.chip {
  background: var(--hud);
  color: var(--hud-fg);
  border-radius: var(--r);
  padding: 7px 12px;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--hud-border);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

#vig { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.65) 100%); }
#water { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: rgba(0, 80, 100, .45); transition: opacity .18s; }
#hurt { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(255,40,40,.7) 100%); transition: opacity .18s; }

#cross {
  position: fixed; left: 50%; top: 50%; width: 22px; height: 22px;
  margin: -11px 0 0 -11px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.65);
  pointer-events: none; box-sizing: border-box;
  transition: all .12s;
}
#cross i { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #fff; }
#cross.grapple { border-color: var(--teal); transform: scale(1.25); box-shadow: 0 0 14px var(--teal); }
#cross.creature { border-color: var(--amber); transform: scale(1.4); box-shadow: 0 0 16px var(--amber); }

#status { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 8px; pointer-events: none; }
#status b { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; letter-spacing: .03em; }
.pill.safe { background: var(--safe); color: #041208; }
.pill.danger { background: var(--ember); color: #fff; }

#topright { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); display: flex; gap: 6px; }
#topright .chip { font-weight: 700; font-size: 14px; }
#topright .count { background: var(--teal); color: #041208; border-radius: 8px; padding: 1px 7px; font-weight: 800; }

#hearts { position: fixed; left: calc(12px + env(safe-area-inset-left, 0px)); top: calc(54px + env(safe-area-inset-top, 0px)); display: flex; gap: 3px; pointer-events: none; }
#hearts i {
  width: 17px; height: 15px; display: block; background: var(--ember);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 15.5 1.6 8.3C-1.9 4.7 2.6-1.6 9 3.3 15.4-1.6 19.9 4.7 16.4 8.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 15.5 1.6 8.3C-1.9 4.7 2.6-1.6 9 3.3 15.4-1.6 19.9 4.7 16.4 8.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

#hotwrap { position: fixed; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
#hotbar { display: flex; gap: 5px; padding: 5px; background: var(--hud); border-radius: 14px; border: 1px solid var(--hud-border); box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.slot {
  position: relative; width: var(--slot); height: var(--slot); border-radius: 9px;
  background: rgba(255,255,255,.06); border: 2px solid transparent; box-sizing: border-box;
  transition: all .12s;
}
.slot.sel { border-color: var(--teal); background: rgba(0,224,200,.15); box-shadow: 0 0 0 1px var(--teal), 0 0 18px rgba(0,224,200,.5); }

/* Title */
#title { background: linear-gradient(180deg, rgba(7,10,9,.1), rgba(7,10,9,.9)); }
#title h1 {
  font-family: var(--display); font-weight: 800; font-size: clamp(48px, 11vw, 100px);
  line-height: .88; margin: 0; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #fff 0%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 0 #0a1a14) drop-shadow(0 20px 40px rgba(0,0,0,.6));
}
#title .go {
  background: var(--teal); color: #041208; font-weight: 800; font-size: 18px;
  padding: 14px 32px; border-radius: 12px; border: 0;
  box-shadow: 0 4px 0 #008a7a, 0 0 32px rgba(0,224,200,.45);
}
#title .go:active { transform: translateY(2px); box-shadow: 0 2px 0 #008a7a; }

.ww-panel, .sheet { background: var(--paper); color: var(--ink); border-radius: 16px; }
.ww-btn.go, .go { background: var(--teal); color: #041208; }

/* Remaining styles kept lean and updated for consistency */
#abilities, #hint, #prompt, #toast, #touch, #journal, .sheetwrap {
  /* inherit improved variables above */
}