/* styles.css — UI chrome for Web Gardener. The 3D scene fills the screen; every
   panel floats over it as a soft, translucent "cozy garden" card. */

/* These are the static defaults for the "Cottage Garden" palette; src/palette.js is
   the source of truth and re-asserts the same values onto :root at boot via
   injectPaletteVars(), so the DOM chrome and the 3D scene never drift. */
:root {
  --bg: #101a12;
  --panel: rgba(20, 32, 23, 0.62);
  --panel-solid: rgba(17, 27, 20, 0.93);
  --stroke: rgba(255, 255, 255, 0.14);
  --text: #f1f5ea;
  --muted: #aebaa6;
  --accent: #9bd860;   /* sprout */
  --water: #5cb6ff;    /* sky */
  --health: #7be08a;
  --gold: #ffce5a;     /* honey */
  --danger: #ff8a7a;
  /* expanded cozy-with-pop accents (shared with the 3D world) */
  --clay: #c26a43;
  --marigold: #f3a23a;
  --blossom: #ef84b4;
  --lilac: #9f86d8;
  --cornflower: #6f8fe0;
  --cream: #f7edd9;
  --straw: #e7c163;
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
  --r: 16px;
  font-family: ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  touch-action: none;
}

#app { position: fixed; inset: 0; display: block; width: 100%; height: 100%; }

#ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#ui > * { pointer-events: auto; }

#boot {
  position: fixed; inset: 0; display: grid; place-items: center;
  z-index: 50; color: var(--muted); font-size: 18px; letter-spacing: 0.3px;
  background: radial-gradient(120% 120% at 50% 30%, #1b2a1e, #0c120e);
  text-align: center; line-height: 1.6;
  transition: opacity 0.5s ease;     /* fades out (then removed by main.js) once the world is ready */
}
#boot.done { opacity: 0; }
.boot-card {
  display: flex; flex-direction: column; align-items: center; gap: 15px;
  padding: 22px 30px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--stroke); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(13px) saturate(1.25); backdrop-filter: blur(13px) saturate(1.25);
}
.boot-label { font-size: 16px; color: var(--text); opacity: 0.92; }
.boot-track { width: 230px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.boot-fill { display: block; height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--water)); transition: width 0.3s ease; }

.card-base, .wg-clock, .wg-weather, .wg-wallet, .wg-inv, .wg-nav, .wg-panel, .wg-toast {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(13px) saturate(1.25);
  backdrop-filter: blur(13px) saturate(1.25);
}

/* ---- HUD top-left ---- */
.wg-hud { position: fixed; top: 16px; left: 16px; display: flex; gap: 10px; align-items: stretch; }
.wg-clock { padding: 10px 16px; display: flex; flex-direction: column; line-height: 1.15; }
.wg-day { font-size: 12px; color: var(--muted); letter-spacing: 0.6px; text-transform: uppercase; }
.wg-time { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wg-weather { padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 6px; font-size: 20px; }
.wg-windbar { display: block; width: 56px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.16); overflow: hidden; }
.wg-windbar i { display: block; height: 100%; background: linear-gradient(90deg, #9bd860, #5cb6ff); transition: width 0.6s ease; }

/* ---- inventory top-right ---- */
.wg-inv { position: fixed; top: 16px; right: 16px; min-width: 168px; padding: 12px 14px; }
.wg-inv-h { font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.wg-inv-empty { font-size: 13px; color: var(--muted); font-style: italic; }
.wg-inv-list {
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  margin-right: -8px;          /* absorb the reserved gutter so rows still line up with the header */
  scrollbar-gutter: stable;    /* reserve the scrollbar's space so the number column never jumps */
  scrollbar-width: thin;       /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
/* WebKit/Blink: a slim translucent thumb (inset via a transparent border) over no track,
   so the bar reads as part of the frosted card instead of the chunky native scrollbar. */
.wg-inv-list::-webkit-scrollbar { width: 8px; }
.wg-inv-list::-webkit-scrollbar-track { background: transparent; }
.wg-inv-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.22);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.wg-inv-list::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.42); }
.wg-inv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 14px; padding: 3.5px 0; }
.wg-inv-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-inv-row b { color: var(--gold); font-variant-numeric: tabular-nums; }
/* When a care/seed panel is open it sits on the right-centre (desktop); cap the harvest
   list so it scrolls instead of growing down into the panel. Mobile override below. */
.wg-panel-open .wg-inv-list { max-height: max(120px, calc(50vh - 240px)); }

/* ---- breadcrumb bottom-center ---- */
.wg-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; max-width: 92vw; }
.wg-back { font: inherit; font-size: 14px; color: var(--text); background: rgba(255,255,255,0.08); border: 1px solid var(--stroke); border-radius: 10px; padding: 6px 12px; cursor: pointer; transition: background 0.15s; }
.wg-back:hover { background: rgba(255,255,255,0.18); }
.wg-crumbs { display: flex; align-items: center; gap: 4px; overflow: hidden; }
.wg-crumb { font: inherit; font-size: 14px; color: var(--muted); background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: 9px; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.wg-crumb:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.wg-crumb.active { color: var(--accent); font-weight: 700; }
.wg-sep { color: var(--muted); opacity: 0.6; }

/* ---- side panel ---- */
.wg-panel { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); width: 272px; padding: 16px; animation: slideIn 0.25s ease; }
@keyframes slideIn { from { opacity: 0; transform: translate(14px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.wg-p-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.wg-p-ic { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.wg-p-name { font-size: 19px; font-weight: 700; }
.wg-p-stage { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.wg-bar { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; margin: 9px 0; }
.wg-bar-l { font-size: 12px; color: var(--muted); }
.wg-bar-t { height: 9px; border-radius: 6px; background: rgba(255,255,255,0.12); overflow: hidden; }
.wg-bar-f { height: 100%; width: 0%; border-radius: 6px; transition: width 0.45s ease, background 0.3s; }
.wg-bar-f.w { background: linear-gradient(90deg, #2f7fc4, var(--water)); }
.wg-bar-f.w.low { background: linear-gradient(90deg, #b04a2a, #ff9a5a); }
.wg-bar-f.h { background: linear-gradient(90deg, #3f9a55, var(--health)); }
.wg-bar-f.g { background: linear-gradient(90deg, #6a9a2a, var(--accent)); }

.wg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.wg-act { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); background: rgba(255,255,255,0.08); border: 1px solid var(--stroke); border-radius: 11px; padding: 9px 8px; cursor: pointer; transition: transform 0.1s, background 0.15s, box-shadow 0.15s; }
.wg-act:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.wg-act:active { transform: translateY(0); }
.wg-act.w:hover { box-shadow: 0 0 0 1px rgba(92,182,255,0.5) inset; }
.wg-act.g.ready { background: linear-gradient(180deg, rgba(255,206,90,0.34), rgba(255,206,90,0.14)); box-shadow: 0 0 18px rgba(255,206,90,0.28); }
.wg-act.f:hover { box-shadow: 0 0 0 1px rgba(155,216,96,0.5) inset; }
.wg-act:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* seed picker */
.wg-seedgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.wg-seed { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 6px; color: var(--text); background: rgba(255,255,255,0.07); border: 1px solid var(--stroke); border-radius: 12px; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.wg-seed span { font-size: 26px; }
.wg-seed small { font-size: 11.5px; color: var(--muted); }
.wg-seed:hover { background: rgba(155,216,96,0.18); transform: translateY(-2px); }

/* ---- wallet (HUD pill, beside the clock): coins + lumber ---- */
.wg-wallet { padding: 10px 14px; display: flex; align-items: center; gap: 6px; font-size: 15px; }
.wg-wal-i { font-size: 16px; }
.wg-wal-i.wood { margin-left: 6px; }
.wg-wal-v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold); }
.wg-wal-i.wood + .wg-wal-v { color: var(--straw); }

/* ---- Trading Post + build panels (side-panel content) ---- */
.wg-market, .wg-build { display: flex; flex-direction: column; gap: 7px; }
.wg-mk-h { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); margin: 4px 0 1px; }
.wg-mk-h.sub { margin-top: 9px; }
.wg-mk-empty { font-size: 13px; color: var(--muted); font-style: italic; padding: 4px 0; }
.wg-mk-list { display: flex; flex-direction: column; gap: 5px; max-height: 36vh; overflow-y: auto; margin-right: -6px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent; }
.wg-mk-list::-webkit-scrollbar { width: 7px; }
.wg-mk-list::-webkit-scrollbar-track { background: transparent; }
.wg-mk-list::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.22); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
.wg-mk-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.wg-mk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-mk-qty { color: var(--muted); font-variant-numeric: tabular-nums; }
.wg-mk-sell { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--gold); background: rgba(255,206,90,0.12); border: 1px solid rgba(255,206,90,0.34); border-radius: 9px; padding: 5px 9px; cursor: pointer; white-space: nowrap; transition: background 0.15s, transform 0.1s; }
.wg-mk-sell:hover { background: rgba(255,206,90,0.24); transform: translateY(-1px); }
.wg-mk-allbtn { font: inherit; font-size: 13px; font-weight: 700; color: #2a2410; background: linear-gradient(180deg, var(--gold), #e8b43e); border: none; border-radius: 11px; padding: 9px; margin-top: 3px; cursor: pointer; box-shadow: 0 6px 16px rgba(255,206,90,0.26); transition: transform 0.12s; }
.wg-mk-allbtn:hover { transform: translateY(-1px); }
.wg-mk-buy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wg-mk-buybtn { font: inherit; font-size: 13px; font-weight: 600; color: var(--text); background: rgba(255,255,255,0.08); border: 1px solid var(--stroke); border-radius: 10px; padding: 9px 6px; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.wg-mk-buybtn:hover:not(:disabled) { background: rgba(155,216,96,0.18); transform: translateY(-1px); }
.wg-mk-buybtn:disabled { opacity: 0.4; cursor: not-allowed; }
.wg-mk-note { font-size: 11px; line-height: 1.4; color: var(--muted); opacity: 0.85; margin-top: 5px; }

.wg-build-plants { display: flex; flex-wrap: wrap; gap: 5px; }
.wg-build-chip { font-size: 11.5px; padding: 3px 8px; background: rgba(255,255,255,0.07); border: 1px solid var(--stroke); border-radius: 99px; color: var(--text); white-space: nowrap; }
.wg-build-cost { display: flex; gap: 10px; }
.wg-build-c { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 6px 13px; background: rgba(255,255,255,0.06); border: 1px solid var(--stroke); border-radius: 10px; }
.wg-build-btn { font: inherit; font-size: 14px; font-weight: 700; color: #142013; background: linear-gradient(180deg, #b6f06a, #8fd14f); border: none; border-radius: 12px; padding: 11px; margin-top: 7px; cursor: pointer; box-shadow: 0 6px 18px rgba(143,209,79,0.3); transition: transform 0.12s; }
.wg-build-btn:hover:not(:disabled) { transform: translateY(-2px); }
.wg-build-btn:disabled { opacity: 0.55; cursor: not-allowed; color: var(--text); background: rgba(255,255,255,0.08); box-shadow: none; }

/* ---- tooltip ---- */
/* The scene hover tooltip follows the cursor, offset toward the bottom-right, so it can
   poke onto a floating card while the cursor is still over the canvas. Keep it beneath all
   UI chrome: a negative z-index sits at the back of #ui's stacking context but still above
   the 3D canvas, so the tooltip recedes behind the frosted card instead of covering it —
   and main.js clears it outright once the cursor actually enters the UI layer. */
.wg-tip { position: fixed; transform: translate(14px, 16px); padding: 5px 10px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--panel-solid); border: 1px solid var(--stroke); border-radius: 9px; pointer-events: none; z-index: -1; white-space: nowrap; box-shadow: var(--shadow); }

/* ---- toasts ---- */
.wg-toasts { position: fixed; left: 16px; bottom: 84px; display: flex; flex-direction: column-reverse; gap: 8px; }
.wg-toast { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: 14px; font-weight: 600; opacity: 0; transform: translateX(-16px); transition: opacity 0.35s, transform 0.35s; }
.wg-toast span { font-size: 18px; }
.wg-toast.show { opacity: 1; transform: translateX(0); }
.wg-toast-x { font-size: 12px; font-weight: 800; opacity: 0.6; margin-left: 1px; }
@keyframes wg-toast-bump { 0%, 100% { transform: translateX(0) scale(1); } 35% { transform: translateX(0) scale(1.06); } }
.wg-toast.bump { animation: wg-toast-bump 0.28s ease; }

/* ---- help button + overlay ---- */
.wg-help-btn { position: fixed; right: 16px; bottom: 18px; width: 38px; height: 38px; border-radius: 50%; font: 700 18px ui-rounded, system-ui; color: var(--text); background: var(--panel); border: 1px solid var(--stroke); cursor: pointer; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px); }
.wg-help-btn:hover { background: rgba(255,255,255,0.18); }

/* ---- audio controls: volume + mute, a frosted pill left of the help button ---- */
.wg-audio { position: fixed; right: 62px; bottom: 18px; height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 11px 0 13px; background: var(--panel); border: 1px solid var(--stroke); border-radius: 19px; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(13px) saturate(1.25); backdrop-filter: blur(13px) saturate(1.25); }
.wg-audio.muted .wg-vol { opacity: 0.45; }
.wg-vol { width: 82px; height: 5px; -webkit-appearance: none; appearance: none; border-radius: 3px; background: rgba(255,255,255,0.18); outline: none; cursor: pointer; transition: opacity 0.15s; }
.wg-vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.45); cursor: pointer; }
.wg-vol::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.45); cursor: pointer; }
.wg-sound-btn { background: none; border: none; box-shadow: none; padding: 0; width: 24px; height: 38px; display: grid; place-items: center; font-size: 18px; line-height: 1; color: var(--text); cursor: pointer; transition: transform 0.1s, opacity 0.15s; }
.wg-sound-btn:hover { transform: scale(1.12); }
.wg-sound-btn.muted { opacity: 0.6; }

/* ---- settings button + diagnostics panel (stacked above the help button) ---- */
.wg-settings-btn {
  position: fixed; right: 16px; bottom: 64px; width: 38px; height: 38px;
  border-radius: 50%; font-size: 17px; line-height: 1; color: var(--text);
  background: var(--panel); border: 1px solid var(--stroke); cursor: pointer;
  box-shadow: var(--shadow); display: grid; place-items: center;
  -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
  transition: background 0.15s, transform 0.25s;
}
.wg-settings-btn:hover { background: rgba(255, 255, 255, 0.18); transform: rotate(35deg); }
.wg-settings-btn.active { background: rgba(255, 255, 255, 0.18); transform: rotate(90deg); }

.wg-settings {
  position: fixed; right: 16px; bottom: 110px; width: 236px; padding: 14px 16px;
  background: var(--panel-solid); border: 1px solid var(--stroke); border-radius: var(--r);
  box-shadow: var(--shadow); animation: fadeUp 0.2s ease;
  max-height: calc(100vh - 130px); overflow-y: auto;
  -webkit-backdrop-filter: blur(13px) saturate(1.25); backdrop-filter: blur(13px) saturate(1.25);
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wg-set-h { font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.wg-set-h.sub { margin-top: 2px; }

/* music picker (settings panel) */
.wg-music { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.wg-music-l { color: var(--muted); font-size: 13px; white-space: nowrap; }
.wg-music-sel {
  flex: 1; max-width: 150px; font: inherit; font-size: 13px; color: var(--text);
  background: rgba(255, 255, 255, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23aebaa6' stroke-width='1.6'%3E%3Cpath d='M1 1.5l4 3.5 4-3.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 10px 6px;
  border: 1px solid var(--stroke); border-radius: 9px; padding: 5px 28px 5px 10px;
  cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; transition: background-color 0.15s;
}
.wg-music-sel:hover { background-color: rgba(255, 255, 255, 0.14); }
.wg-music-sel option { background: var(--panel-solid); color: var(--text); }
.wg-music-d { font-size: 11.5px; line-height: 1.35; color: var(--muted); margin: 0 0 12px; opacity: 0.9; }

/* clear-save / danger button (settings panel) */
.wg-reset-btn {
  width: 100%; font: inherit; font-size: 13px; font-weight: 600; color: var(--text);
  background: rgba(255, 138, 122, 0.12); border: 1px solid rgba(255, 138, 122, 0.42);
  border-radius: 10px; padding: 9px 10px; cursor: pointer; text-align: center;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.wg-reset-btn:hover { background: rgba(255, 138, 122, 0.2); transform: translateY(-1px); }
.wg-reset-btn:active { transform: translateY(0); }
.wg-reset-btn.armed { background: var(--danger); color: #2a0f0c; border-color: var(--danger); box-shadow: 0 0 16px rgba(255, 138, 122, 0.45); }
.wg-reset-note { font-size: 11.5px; line-height: 1.35; color: var(--muted); margin: 7px 0 12px; opacity: 0.85; }

.wg-stats { display: flex; flex-direction: column; gap: 5px; }
.wg-stat { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.wg-stat-l { color: var(--muted); }
.wg-stat-v { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.wg-stat-v.good { color: var(--health); }
.wg-stat-v.ok { color: var(--gold); }
.wg-stat-v.bad { color: var(--danger); }

.wg-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(8, 14, 10, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; }
.wg-overlay.show { opacity: 1; visibility: visible; }
.wg-card { width: min(560px, 92vw); padding: 30px 34px; background: linear-gradient(180deg, rgba(28,40,30,0.95), rgba(18,26,20,0.95)); border: 1px solid var(--stroke); border-radius: 22px; box-shadow: var(--shadow); transform: translateY(10px) scale(0.98); transition: transform 0.4s; }
.wg-overlay.show .wg-card { transform: none; }
.wg-card h1 { margin: 0 0 6px; font-size: 34px; letter-spacing: 0.3px; background: linear-gradient(90deg, #b6f06a, #6fd0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wg-sub { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.wg-card ul { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.wg-card li { font-size: 14.5px; line-height: 1.5; color: var(--text); padding-left: 2px; }
.wg-card b { color: var(--accent); font-weight: 700; }
.wg-go { font: inherit; font-size: 16px; font-weight: 700; color: #142013; background: linear-gradient(180deg, #b6f06a, #8fd14f); border: none; border-radius: 13px; padding: 13px 22px; width: 100%; cursor: pointer; box-shadow: 0 8px 22px rgba(143,209,79,0.34); transition: transform 0.12s, box-shadow 0.15s; }
.wg-go:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(143,209,79,0.45); }

/* ---- renderer backend toggle (settings panel) ---- */
.wg-render-toggle {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text);
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--stroke); border-radius: 10px;
  padding: 9px 12px; cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.wg-render-toggle:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); }
.wg-render-toggle:active { transform: translateY(0); }
.wg-rt-alt { font-size: 11px; font-weight: 500; color: var(--muted); border-left: 1px solid var(--stroke); padding-left: 8px; }
.wg-render-note { font-size: 11.5px; line-height: 1.35; color: var(--muted); margin: 7px 0 12px; opacity: 0.85; }

@media (max-width: 600px) {
  .wg-panel { width: min(86vw, 300px); top: auto; bottom: 84px; transform: none; right: 50%; margin-right: -150px; }
  @keyframes slideIn { from { opacity: 0; } to { opacity: 1; } }
  .wg-inv { min-width: 130px; padding: 9px 11px; }
  /* mobile: the panel spans the bottom — keep the harvest list in the top zone, clear of it */
  .wg-panel-open .wg-inv-list { max-height: max(90px, calc(100vh - 420px)); }
  .wg-time { font-size: 18px; }
  /* drop the slider on phones — the mute button alone keeps the bottom bar clear */
  .wg-audio { padding: 0; right: 62px; width: 38px; justify-content: center; border-radius: 50%; }
  .wg-vol { display: none; }
  .wg-settings { right: 8px; width: min(78vw, 236px); }
}