:root {
  color-scheme: light dark;
  /* Shared HUD panel look - a light/white panel with dark blue text, no
     outline (deliberately NOT the darker blue world/uiStyle.ts uses for
     in-game/diegetic labels - the recipe planks, growth bar, Collection
     Point blocks - so the screen-space HUD still reads as its own "meta"
     layer instead of blending into the 3D scene's own UI). Every DOM panel
     below references these instead of inventing its own background/
     border/text color. --hud-outline-width at 0 removes every panel's
     border in one place - bump it back up (and --hud-outline still holds a
     color) to restore outlines later without touching each rule. */
  --hud-track: rgba(255, 255, 255, 0.95);
  --hud-outline: #16283a;
  --hud-outline-width: 0px;
  --hud-text: #0000d1;
  --hud-fill-top: #9df06a;
  --hud-fill-bottom: #3c9a2b;
  /* The "glass" panel look - a dark, semi-transparent pill with light text,
     used where a panel sits directly over the busy 3D scene and reads
     better translucent than as another solid white card (top-status-bar,
     the Backpack panel) - deliberately a second look, not a replacement
     for --hud-track; most panels (quest, pause menu, popups) still want
     the solid opaque card. */
  --panel-glass-bg: rgba(20, 26, 20, 0.55);
  --panel-glass-text: #ffffff;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

#app {
  position: relative;
  width: 100vw;
  height: 100svh;
}

#scene {
  display: block;
  width: 100%;
  height: 100%;
}

#joystick-zone {
  position: absolute;
  inset: 0;
  touch-action: none;
}

/* Right side, same "glass" panel as #top-status-bar (see below). Sits
   BELOW that merged bar rather than beside it - #top-status-bar is
   centered and wide enough (Level + XP bar + Gold all in one row) that a
   fixed right:12px panel at the same top offset collides with its right
   edge on a narrow phone screen; stacking avoids that regardless of how
   wide the merged bar's own content ends up being. */
#backpack-hud {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 54px);
  right: max(12px, env(safe-area-inset-right));
  z-index: 10;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--panel-glass-bg);
  border: none;
  color: var(--panel-glass-text);
  font: 500 12px system-ui, sans-serif;
  pointer-events: none;
  max-width: 38vw;
}

.storage-hud-header {
  font-weight: 700;
  margin-bottom: 2px;
  text-align: right;
}

/* Two fixed-width columns (icon, count) rather than a flex row - a flex
   row's justify-content:flex-end only right-aligns each row as a whole, so
   the icon/text landed at a different x per row depending on that row's
   own content width (e.g. "3" vs "10" vs "20/20"). Fixed grid columns keep
   every row's icon centered under every other row's icon, same for the
   count text, regardless of content length. Shrunk (was 45px/44px columns,
   21px text) after seeing it on an actual phone screen - it was crowding
   out the Level/quest panels next to it. */
.storage-hud-item {
  display: grid;
  grid-template-columns: 22px 26px;
  align-items: center;
  justify-items: center;
  gap: 4px;
  opacity: 0.9;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
}

/* Scoped to the Backpack panel specifically (storageHud.ts is Backpack-only
   now that Pantry's HUD was removed), not the smaller icons elsewhere (crop
   popup, Gold) that still want the compact inline size. Shrunk from 45px
   alongside .storage-hud-item above. */
.storage-hud-item .hud-icon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

/* Shared icon image used across every DOM HUD (Backpack, crop popup, Gold) -
   see ui/iconImg.ts. Sized to sit on the same line as the text next to it
   without pushing line-height around. */
.hud-icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  object-fit: contain;
}

/* One merged "glass" bar (see --panel-glass-bg) carrying Level/XP and Gold
   together, spanning from the Pause button's right edge to the screen's
   own right edge (was a centered, content-sized pill) - Level/XP stays
   left-aligned and Gold right-aligned within it (see justify-content)
   rather than both just sitting in the middle. #xp-hud and #gold-hud are
   plain flex children of this wrapper: no more of their own position,
   background, or border - just their own internal layout. */
#top-status-bar {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 58px; /* clears the round Pause button (12px left + 38px wide + a small gap) */
  right: max(12px, env(safe-area-inset-right));
  /* Higher than #quest-hud's 10 - position + z-index here makes this its
     own stacking context, so a descendant's own z-index (see
     .restoration-hud-list) can only ever win against #quest-hud if THIS
     context already sits above it; a bigger z-index on the nested list
     alone isn't enough; it only wins comparisons against its own siblings
     within this same context (#xp-hud, #gold-hud). */
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--panel-glass-bg);
  color: var(--panel-glass-text);
  pointer-events: none;
}

/* Level/XP and Restoration sit snug together on the left (normal flex flow
   + the bar's own `gap`); Gold alone gets pushed to the far right via
   margin-left: auto instead of relying on justify-content: space-between,
   which - with 3 children now - would space Restoration to the bar's
   geometric center instead of right next to Level/XP. */
#gold-hud {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffd166;
  font: 800 15px system-ui, sans-serif;
}

#xp-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 13px system-ui, sans-serif;
}

.xp-hud-level {
  white-space: nowrap;
}

/* Shared "plank" progress-bar look (dark navy track, warm white outline,
   glossy green fill) matching the world-space UI style (see world/uiStyle.ts) -
   used by both the XP bar and the quest progress bar below. */
.xp-hud-bar-track,
.quest-hud-bar-track {
  width: 160px;
  margin-top: 2px;
  border-radius: 999px;
  /* A dedicated tint, not --hud-track (white) - with the panel's own
     outline removed, an unfilled bar would otherwise be invisible sitting
     on the same-color panel behind it. */
  background: rgba(22, 40, 58, 0.12);
  overflow: hidden;
}

/* Taller than quest-hud-bar-track (12px) - the XP text sits inside this one
   (see .xp-hud-bar-text) instead of on its own line below, so the whole
   panel reads more compactly. Narrower than the shared 160px too, and no
   top margin - it now sits inline next to the Level text (see #xp-hud)
   inside the merged glass bar, not stacked below it. Its own track tint is
   lighter than the shared one above (rgba(22,40,58,0.12) is barely visible
   against #top-status-bar's own dark background) so the unfilled portion
   still reads clearly. */
.xp-hud-bar-track {
  width: 78px;
  height: 18px;
  margin-top: 0;
  position: relative;
  background: rgba(255, 255, 255, 0.28);
}

.quest-hud-bar-track {
  height: 12px;
}

.xp-hud-bar-fill,
.quest-hud-bar-fill {
  height: 100%;
  background: linear-gradient(180deg, var(--hud-fill-top) 0%, var(--hud-fill-bottom) 100%);
  border-radius: 999px;
  transition: width 0.15s ease-out;
}

/* "12 / 30 XP" overlaid on the bar itself rather than a separate line below
   it (see xpHud.ts) - white text with a dark shadow, matching the merged
   bar's own dark "glass" background (see --panel-glass-bg), reads on both
   the light unfilled track and the green fill. */
.xp-hud-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10px system-ui, sans-serif;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

#quest-hud {
  position: absolute;
  /* Same top offset as #backpack-hud (54px below the status bar) - at the
     user's request, so the quest card and the Backpack panel sit at the
     same height instead of the quest card riding 12px lower. */
  top: calc(max(12px, env(safe-area-inset-top)) + 54px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--hud-track);
  border: var(--hud-outline-width) solid var(--hud-outline);
  color: var(--hud-text);
  font: 500 14px system-ui, sans-serif;
  pointer-events: none;
  text-align: center;
}

.quest-hud-title {
  font-weight: 700;
}

.quest-hud-progress {
  opacity: 0.85;
  margin-top: 2px;
}

/* ------------------------------------------------------------------ */
/* Trevor's tutorial dialogue - a small bottom-anchored card, never a    */
/* full-screen modal. Sits above every plain HUD panel (z-index 10-25)   */
/* but below the Pause Menu (50) - the two are never open at once (see   */
/* main.ts's togglePauseMenu guard), so their relative order only        */
/* matters as a "just in case" safety margin.                            */
/* ------------------------------------------------------------------ */
#trevor-dialogue:empty {
  display: none;
}

#trevor-dialogue {
  position: absolute;
  left: 0;
  right: 0;
  /* Clears the Restoration HUD widget sitting in the actual bottom-left
     corner (see #restoration-hud) - without this, the dialogue panel's own
     rounded corner lets a sliver of it peek out from underneath. */
  bottom: max(64px, calc(env(safe-area-inset-bottom) + 64px));
  z-index: 45;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  /* The wrapper spans the full width (so centering works) but only the
     panel itself should intercept taps - everywhere else in this strip
     still reaches the joystick/scene underneath. */
  pointer-events: none;
}

.trevor-dialogue-panel {
  pointer-events: auto;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--hud-track);
  border: var(--hud-outline-width) solid var(--hud-outline);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.trevor-dialogue-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.trevor-dialogue-name {
  font: 800 15px system-ui, sans-serif;
  color: var(--hud-text);
  letter-spacing: 0.5px;
}

.trevor-dialogue-progress {
  font: 600 12px system-ui, sans-serif;
  color: var(--hud-text);
  opacity: 0.55;
}

.trevor-dialogue-message {
  font: 500 15px/1.45 system-ui, sans-serif;
  color: var(--hud-text);
  /* Preserves the \n line breaks data/tutorialSteps.ts uses between two
     short sentences in one card - never actual paragraph/lore text. */
  white-space: pre-line;
}

.trevor-dialogue-button {
  align-self: flex-end;
  margin-top: 2px;
  padding: 9px 22px;
  border: none;
  border-radius: 10px;
  background: #7ad0ff;
  color: var(--hud-text);
  font: 700 14px system-ui, sans-serif;
  cursor: pointer;
}

#crop-popup:empty {
  display: none;
}

#crop-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  min-width: 180px;
  border-radius: 12px;
  background: var(--hud-track);
  border: var(--hud-outline-width) solid var(--hud-outline);
  font: 500 14px system-ui, sans-serif;
}

.crop-popup-header {
  color: var(--hud-text);
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
}

.crop-popup-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(22, 40, 58, 0.08);
  color: var(--hud-text);
  font: inherit;
  cursor: pointer;
}

.crop-popup-option:hover:not(.locked) {
  background: rgba(22, 40, 58, 0.16);
}

.crop-popup-option.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Brief shake + red flash on a deliberate click of a locked option - see cropSelectionPopup.ts. Purely cosmetic feedback, never affects selection. */
.crop-popup-option.locked-shake {
  animation: crop-popup-locked-shake 0.35s ease;
}

@keyframes crop-popup-locked-shake {
  0% { transform: translateX(0); background: rgba(22, 40, 58, 0.08); }
  20% { transform: translateX(-4px); background: rgba(214, 67, 43, 0.35); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); background: rgba(22, 40, 58, 0.08); }
}

.crop-popup-name {
  font-weight: 600;
}

.crop-popup-lock {
  opacity: 0.85;
  font-size: 12px;
  white-space: nowrap;
}

/* A hand-drawn SVG icon, not the "⏸" emoji character this used to be - an
   emoji glyph renders using the OS's own emoji set (on iOS, its colorful
   Memoji-style artwork), which looked inconsistent with the rest of this
   flat vector HUD and differed from how it read on desktop. The SVG always
   renders identically everywhere and inherits `color` via `fill:
   currentColor` (see the markup in main.ts), so it never needs its own
   color rule beyond this button's own `color`. */
#pause-button {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  z-index: 15;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--hud-outline-width) solid var(--hud-outline);
  border-radius: 50%;
  background: var(--hud-track);
  color: var(--hud-text);
  cursor: pointer;
}

#pause-button svg {
  width: 18px;
  height: 18px;
}

#pause-menu:empty {
  display: none;
}

#pause-menu {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}

.pause-menu-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 28px;
  min-width: 240px;
  border-radius: 14px;
  background: var(--hud-track);
  border: var(--hud-outline-width) solid var(--hud-outline);
  color: var(--hud-text);
  font: 500 15px system-ui, sans-serif;
}

.pause-menu-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 8px;
}

.pause-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pause-menu-toggle {
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: rgba(22, 40, 58, 0.1);
  color: var(--hud-text);
  font: 700 12px system-ui, sans-serif;
  cursor: pointer;
  min-width: 52px;
}

.pause-menu-toggle.on {
  background: #5fae4a;
  color: var(--hud-text);
}

.pause-menu-toggle.off {
  opacity: 0.6;
}

.pause-menu-slider {
  width: 100%;
  margin: 2px 0 6px;
  accent-color: #2f6fb3;
}

.pause-menu-resume {
  margin-top: 10px;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: #7ad0ff;
  color: var(--hud-text);
  font: 700 14px system-ui, sans-serif;
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Restoration HUD: a compact "🏡 N/4" badge nested inside               */
/* #top-status-bar, between Level/XP and Gold (was its own bottom-left  */
/* panel). `position: relative` here + `position: absolute` on the      */
/* expanded checklist below is what lets that checklist drop down       */
/* below the badge as an overlay instead of stretching the status bar's */
/* own height when it opens.                                            */
/* ------------------------------------------------------------------ */
#restoration-hud {
  position: relative;
  /* Smaller than the rest of the bar (13px) - this badge is secondary to
     Level/Gold, not primary. Shortened to "🏡 Restoration N/4" (was "🏆 Farm
     Restoration N/4") for the same reason: less text competing with Gold for
     room on the right edge of a narrow phone screen. */
  font: 700 11px system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
}

.restoration-hud-header {
  white-space: nowrap;
}

#restoration-hud.complete .restoration-hud-header {
  color: var(--hud-fill-top);
}

.restoration-hud-list {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* Above #quest-hud (z-index 10) - both sit at a similar screen position,
     and this is a deliberately-opened overlay, so it should always win. */
  z-index: 20;
  margin-top: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  border-radius: 10px;
  background: var(--panel-glass-bg);
  font-weight: 500;
}

.restoration-hud-row.done {
  opacity: 0.75;
  text-decoration: line-through;
}

.restoration-hud-pulse {
  animation: restoration-hud-pulse 0.6s ease;
}

@keyframes restoration-hud-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ */
/* Result Panel: the Farm Restored finale stats + Play Again.           */
/* ------------------------------------------------------------------ */
#result-panel:empty {
  display: none;
}

#result-panel {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
}

.result-panel-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 32px;
  min-width: 260px;
  border-radius: 16px;
  background: var(--hud-track);
  border: var(--hud-outline-width) solid var(--hud-outline);
  color: var(--hud-text);
  font: 500 15px system-ui, sans-serif;
}

.result-panel-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  color: var(--hud-text);
}

.result-panel-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result-panel-stat {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  opacity: 0.9;
}

.result-panel-play-again {
  margin-top: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: #5fae4a;
  color: var(--hud-text);
  font: 800 15px system-ui, sans-serif;
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Level Up toast: brief, self-clearing, centered above the quest HUD.  */
/* ------------------------------------------------------------------ */
#level-up-toast {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 25;
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--hud-track);
  border: var(--hud-outline-width) solid var(--hud-outline);
  color: var(--hud-text);
  font: 800 20px system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#level-up-toast.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.level-up-toast-unlock {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hud-text);
}

#gold-hud.pulse {
  animation: gold-hud-pulse 0.5s ease;
}

@keyframes gold-hud-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.18); color: #ffffff; }
  100% { transform: scale(1); }
}
/*$vite$:1*/