/* ============================================================================
   BLUXKY QUEST: GRANDPA'S GARDEN — UI
   Brand tokens from BluxkyQuest.com (vintage storybook: cream, forest, gold)
   main.css — tokens, base, generic bits, loading/title, veil, day banner
============================================================================ */
:root {
  --cream-50:#fdf8ec; --cream-100:#f7eedb; --cream-200:#efe1c4; --cream-300:#e3d2ae;
  --forest-400:#519a6f; --forest-500:#3a8159; --forest-600:#2e6b4d; --forest-700:#245539;
  --sky-300:#74b6e4; --sky-500:#2f86c4; --sky-600:#266ca3;
  --gold-200:#f4d784; --gold-300:#eec253; --gold-400:#eab134; --gold-600:#b07d1f;
  --red-500:#a83f3c; --red-600:#8a322f;
  --earth-600:#6b4a2c; --earth-800:#3f2c1d;
  --ink:#2b2019; --bluxky:#1f1a16; --muted:#6b4a2c;
  --pop:0 4px 0 0 rgb(33 28 24 / .18);
  --pop-sm:0 3px 0 0 rgb(33 28 24 / .16);
  --soft:0 14px 34px -16px rgb(33 28 24 / .35);
  --font-display:"Baloo 2", ui-rounded, "Trebuchet MS", sans-serif;
  --font-sans:"Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-hand:"Patrick Hand", "Nunito", cursive;
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px);
  --sar:env(safe-area-inset-right, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; height:100%; overflow:hidden; overscroll-behavior:none; }
body {
  font-family: var(--font-sans); color: var(--ink);
  background:#9cc8e8;
  user-select:none; -webkit-user-select:none;
  position:fixed; inset:0; touch-action:none;
}
#game-canvas { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; outline:none; }

/* ---- generic bits ------------------------------------------------------ */
.card {
  background:var(--cream-50);
  border:2px solid rgb(43 32 25 / .16);
  border-radius:18px;
  box-shadow:var(--pop);
}
.btn {
  font-family:var(--font-display); font-weight:700; letter-spacing:.2px;
  border:none; cursor:pointer; color:var(--cream-50); background:var(--forest-600);
  border-radius:16px; padding:12px 22px; font-size:17px; line-height:1;
  box-shadow:0 4px 0 0 var(--forest-700), var(--soft);
  transition:transform .08s ease, filter .15s ease;
}
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 0 var(--forest-700); }
.btn.gold { background:var(--gold-400); color:var(--ink); box-shadow:0 4px 0 0 var(--gold-600), var(--soft); }
.btn.gold:active { box-shadow:0 1px 0 0 var(--gold-600); }
.btn.ghost { background:var(--cream-200); color:var(--muted); box-shadow:0 4px 0 0 var(--cream-300); }
.btn.ghost:active { box-shadow:0 1px 0 0 var(--cream-300); }
.btn:disabled { filter:grayscale(.5) opacity(.6); cursor:default; }
.hidden { display:none !important; }

/* ---- loading / title --------------------------------------------------- */
#loading {
  position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center;
  background:
    radial-gradient(120% 90% at 50% 108%, #cde7c8 0%, rgba(205,231,200,0) 52%),
    radial-gradient(130% 100% at 50% -20%, #cfe7f7 0%, var(--cream-100) 58%);
  transition:opacity .7s ease; padding:24px;
}
#loading.out { opacity:0; pointer-events:none; }
#loading .sprout { font-size:64px; animation:bob 2.2s ease-in-out infinite; filter:drop-shadow(0 6px 0 rgb(43 32 25 / .12)); }
#loading .kicker { font-family:var(--font-hand); font-size:19px; color:var(--muted); margin-top:6px; }
#loading h1 {
  font-family:var(--font-display); font-weight:800; margin:2px 0 0;
  font-size:clamp(34px, 7vw, 54px); color:var(--forest-700); line-height:1.05;
  text-shadow:0 3px 0 rgb(43 32 25 / .10);
}
#loading h1 .amp { color:var(--gold-600); }
#loading .sub { font-size:15px; font-weight:700; color:var(--muted); letter-spacing:.4px; }
#load-state { margin-top:22px; min-height:56px; display:flex; flex-direction:column; align-items:center; gap:8px; }
#load-msg { font-family:var(--font-hand); font-size:18px; color:var(--muted); }
#tap-begin { display:none; animation:pulse 1.6s ease-in-out infinite; font-size:19px; padding:15px 34px; }
#load-error { display:none; max-width:420px; font-size:14.5px; font-weight:700; color:var(--red-600);
  background:var(--cream-50); border-radius:14px; padding:12px 16px; box-shadow:var(--pop-sm); white-space:pre-line; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-12px) rotate(3deg)} }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }

/* ---- day banner ----------------------------------------------------------- */
#day-banner {
  position:fixed; inset:0; z-index:60; display:none; pointer-events:none;
  align-items:center; justify-content:center; flex-direction:column; gap:6px;
  background:radial-gradient(80% 60% at 50% 50%, rgb(247 238 219 / .96) 0%, rgb(247 238 219 / .88) 55%, rgb(247 238 219 / 0) 100%);
}
#day-banner .sun { font-size:44px; animation:spinSlow 7s linear infinite; }
#day-banner h2 { font-family:var(--font-display); font-weight:800; font-size:52px; margin:0; color:var(--ink); }
#day-banner p { font-family:var(--font-hand); font-size:20px; color:var(--muted); margin:0; }
@keyframes spinSlow { to { transform:rotate(360deg);} }

/* ---- fade veil (day transitions) ----------------------------------------- */
#veil { position:fixed; inset:0; z-index:55; background:#1a1410; opacity:0; pointer-events:none; transition:opacity 1s ease; }

/* ---- small screens tune ------------------------------------------------------ */
@media (max-width:520px){
  #day-banner h2 { font-size:42px; }
}