/* ================================================================
   NOCTURNE — styles
   ================================================================ */
:root{
  --ink:#cdd3f2;
  --ink-dim:#8b90b8;
  --moon:#e8ecff;
  --glass:rgba(12,10,32,.62);
  --line:rgba(190,196,255,.14);
  --serif:"Bodoni 72","Didot","Playfair Display","Cormorant Garamond",Georgia,"Times New Roman",serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; overflow:hidden; background:#060412; }
body{
  font-family:var(--serif);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
canvas#garden{ position:fixed; inset:0; display:block; cursor:crosshair; }

/* ---- begin overlay ------------------------------------------- */
#overlay{
  position:fixed; inset:0; z-index:30;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem; text-align:center;
  background:radial-gradient(120% 90% at 50% 110%, rgba(38,26,74,.55), rgba(6,4,18,.92) 60%),
             linear-gradient(#0a0722, #050310);
  transition:opacity 2.2s ease, visibility 2.2s;
}
#overlay.gone{ opacity:0; visibility:hidden; pointer-events:none; }
#overlay .moon-dot{
  width:54px; height:54px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #f4f6ff, #cfd4f0 55%, #9aa0c8);
  box-shadow:0 0 34px 10px rgba(210,218,255,.35), 0 0 90px 30px rgba(160,170,255,.14);
  margin-bottom:.6rem;
  animation:moonbreathe 7s ease-in-out infinite;
}
@keyframes moonbreathe{ 50%{ box-shadow:0 0 44px 14px rgba(210,218,255,.45), 0 0 110px 38px rgba(160,170,255,.2);} }
#overlay h1{
  font-weight:400; font-size:clamp(2rem,7vw,3.6rem);
  letter-spacing:.55em; text-indent:.55em; color:var(--moon);
  text-shadow:0 0 26px rgba(180,190,255,.35);
}
#overlay p{
  font-style:italic; font-size:clamp(.95rem,2.6vw,1.15rem);
  color:var(--ink-dim); letter-spacing:.08em;
}
#begin{
  margin-top:1.2rem; padding:.72em 2.6em;
  font-family:var(--serif); font-size:1rem; letter-spacing:.35em; text-indent:.35em;
  color:var(--ink); background:transparent;
  border:1px solid var(--line); border-radius:999px; cursor:pointer;
  transition:box-shadow .6s ease, border-color .6s ease, color .6s ease;
}
#begin:hover, #begin:focus-visible{
  outline:none; color:var(--moon); border-color:rgba(200,208,255,.45);
  box-shadow:0 0 24px rgba(170,180,255,.25), inset 0 0 14px rgba(170,180,255,.12);
}
#overlay small{ position:absolute; bottom:5vh; color:#565b83; letter-spacing:.2em; font-size:.7rem; font-style:italic; }

/* ---- dock ------------------------------------------------------ */
#ui{
  position:fixed; left:50%; bottom:max(18px, env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:20;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  transition:opacity 1.4s ease;
}
body.idle #ui{ opacity:0; pointer-events:none; }
.dock{
  display:flex; align-items:center; gap:.35rem;
  padding:.45rem .8rem;
  background:var(--glass);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:999px;
  box-shadow:0 8px 32px rgba(0,0,10,.45);
}
.dock button{
  appearance:none; border:none; background:transparent; cursor:pointer;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-dim);
  transition:color .4s ease, box-shadow .5s ease, background .4s ease;
}
.dock button:hover{ color:var(--ink); }
.dock button.sel{
  color:var(--moon); background:rgba(150,160,255,.08);
  box-shadow:0 0 14px rgba(170,180,255,.28), inset 0 0 8px rgba(170,180,255,.1);
}
.dock svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.dock .sep{ width:1px; height:22px; background:var(--line); margin:0 .35rem; }
#count{
  min-width:2.2em; text-align:center; font-size:.95rem; font-style:italic;
  color:var(--ink-dim); letter-spacing:.05em;
}
#confirm{
  display:flex; align-items:center; gap:.8rem;
  padding:.5rem 1.1rem; font-size:.85rem; font-style:italic; letter-spacing:.06em;
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:999px; color:var(--ink);
  box-shadow:0 8px 32px rgba(0,0,10,.45);
}
#confirm[hidden]{ display:none; }
#confirm button{
  appearance:none; background:transparent; cursor:pointer;
  font-family:var(--serif); font-size:.8rem; letter-spacing:.18em;
  color:var(--ink-dim); border:1px solid var(--line); border-radius:999px;
  padding:.3em 1.1em; transition:color .3s, border-color .3s;
}
#confirm button:hover{ color:var(--moon); border-color:rgba(200,208,255,.4); }

/* ---- toast & hint ---------------------------------------------- */
#toast{
  position:fixed; top:7vh; left:50%; transform:translate(-50%,-8px); z-index:25;
  padding:.7em 1.6em; max-width:86vw; text-align:center;
  font-style:italic; font-size:clamp(.9rem,2.4vw,1.05rem); letter-spacing:.05em;
  color:var(--ink); background:var(--glass);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:999px;
  opacity:0; pointer-events:none;
  transition:opacity 1.6s ease, transform 1.6s ease;
}
#toast.show{ opacity:1; transform:translate(-50%,0); }
#hint{
  position:fixed; left:50%; bottom:20vh; transform:translateX(-50%); z-index:15;
  font-style:italic; letter-spacing:.22em; font-size:.8rem; color:#7a80ac;
  text-shadow:0 0 12px rgba(0,0,10,.8);
  opacity:0; transition:opacity 2s ease; pointer-events:none;
  animation:hintfloat 5s ease-in-out infinite;
}
#hint.show{ opacity:.9; }
@keyframes hintfloat{ 50%{ transform:translate(-50%,-6px); } }

/* ---- serenity meter (top) -------------------------------------- */
#serenity{
  position:fixed; top:max(16px, env(safe-area-inset-top)); left:50%;
  transform:translateX(-50%); z-index:20;
  display:flex; align-items:center; gap:.7rem;
  padding:.4rem .5rem .4rem 1rem;
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:999px;
  box-shadow:0 8px 30px rgba(0,0,10,.4);
  transition:opacity 1.4s ease;
}
body.idle #serenity{ opacity:.28; }
#serenity .lab{ font-style:italic; font-size:.74rem; letter-spacing:.22em; color:var(--ink-dim); }
#serenity .bar{
  position:relative; width:min(38vw,240px); height:5px; border-radius:3px;
  background:rgba(150,160,255,.12); overflow:visible;
}
#serFill{
  position:absolute; inset:0; width:0%; border-radius:3px;
  background:linear-gradient(90deg,#5b6bd6,#8f7ff0 55%,#c9b6ff);
  box-shadow:0 0 12px rgba(150,140,255,.6);
  transition:width .5s ease;
}
#serenity .mk{
  position:absolute; top:-3px; width:1px; height:11px;
  background:rgba(220,224,255,.4); transform:translateX(-50%);
}
#almanacBtn{
  display:flex; align-items:center; gap:.35rem;
  appearance:none; border:none; background:transparent; cursor:pointer;
  color:var(--ink-dim); padding:.2rem .5rem; border-radius:999px;
  transition:color .35s;
}
#almanacBtn:hover{ color:var(--moon); }
#almanacBtn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
#almanacBtn #pct{ font-style:italic; font-size:.72rem; letter-spacing:.06em; }

/* ---- two-row dock: seed tray + tools --------------------------- */
#ui{ gap:.5rem; }
.dock.locked-note{ }
.sp.locked{ opacity:.32; }
.sp.locked svg{ opacity:.7; }
.sp.locked::after{
  content:""; position:absolute; margin-top:12px;
  width:6px; height:5px; border:1.4px solid currentColor; border-bottom:none;
  border-radius:3px 3px 0 0;
}
.sp{ position:relative; }
.wx.on{
  color:var(--moon); background:rgba(150,160,255,.10);
  box-shadow:0 0 14px rgba(170,180,255,.3), inset 0 0 8px rgba(170,180,255,.12);
}

/* ---- almanac panel --------------------------------------------- */
#almanac{
  position:fixed; inset:0; z-index:26;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,3,14,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
#almanac[hidden]{ display:none; }
#almanac .sheet{
  width:min(90vw,560px); max-height:82vh; overflow:auto;
  padding:1.8rem 2rem; text-align:center;
  background:linear-gradient(160deg, rgba(20,16,44,.94), rgba(9,7,26,.96));
  border:1px solid var(--line); border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,8,.6);
}
#almanac h2{ font-weight:400; letter-spacing:.5em; text-indent:.5em; color:var(--moon); font-size:1.5rem; }
#almanac .sub{ font-style:italic; color:var(--ink-dim); margin:.3rem 0 1.4rem; letter-spacing:.06em; }
#almanac .cols{ display:flex; gap:1.6rem; text-align:left; }
#almanac .cols > div{ flex:1; }
#almanac h3{ font-weight:400; font-style:italic; color:var(--ink-dim); letter-spacing:.16em; font-size:.8rem; margin-bottom:.6rem; text-transform:uppercase; }
#almanac ul{ list-style:none; display:flex; flex-direction:column; gap:.5rem; }
#almanac li{ display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:#565b83; letter-spacing:.03em; }
#almanac li.got{ color:var(--ink); }
#almanac li .dot{ width:8px; height:8px; border-radius:50%; background:rgba(150,160,255,.2); flex:none; }
#almanac li.got .dot{ background:radial-gradient(circle,#dfe4ff,#8f7ff0); box-shadow:0 0 8px rgba(160,150,255,.7); }
#almanac .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:1.6rem; }
#almanac #almPct{ font-style:italic; color:var(--ink-dim); font-size:.82rem; letter-spacing:.05em; }
#almanac #almClose{
  appearance:none; background:transparent; cursor:pointer; color:var(--ink-dim);
  font-family:var(--serif); font-size:.8rem; letter-spacing:.2em;
  border:1px solid var(--line); border-radius:999px; padding:.4em 1.4em;
  transition:color .3s, border-color .3s;
}
#almanac #almClose:hover{ color:var(--moon); border-color:rgba(200,208,255,.4); }
@media (max-width:520px){ #almanac .cols{ flex-direction:column; gap:1rem; } #serenity .lab{ display:none; } }

/* ================================================================
   micro-polish — entrances, breathing glows, a serenity sheen
   (CSS-only; nothing here touches the canvas or game logic)
   ================================================================ */

/* a faint field of twinkling stars behind the intro, so the opening
   screen breathes rather than sitting on a flat wash */
#overlay::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 24%, rgba(226,232,255,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 16%, rgba(210,220,255,.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 41% 62%, rgba(230,236,255,.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 86% 47%, rgba(200,212,255,.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 8% 70%, rgba(220,228,255,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 60% 82%, rgba(214,224,255,.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 12%, rgba(232,238,255,.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 92% 78%, rgba(206,216,255,.7), transparent 60%);
  animation:skyTwinkle 6.5s ease-in-out infinite;
}
@keyframes skyTwinkle{ 0%,100%{ opacity:.35; } 50%{ opacity:.8; } }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes titleGlow{ 50%{ text-shadow:0 0 34px rgba(190,200,255,.55), 0 0 66px rgba(160,172,255,.28); } }

#overlay h1{ animation:fadeUp 2s ease .15s both, titleGlow 6.5s ease-in-out 2.2s infinite; }
#overlay p{ animation:fadeUp 2s ease .45s both; }
#begin{ animation:fadeUp 2s ease .75s both; }
#overlay small{ animation:fadeUp 2.2s ease 1.05s both; }

/* a slow ribbon of light travels the serenity meter — the garden feels alive
   even at rest */
#serFill{ overflow:hidden; }
#serFill::after{
  content:""; position:absolute; inset:0; border-radius:3px;
  background:linear-gradient(90deg, transparent, rgba(236,240,255,.55), transparent);
  transform:translateX(-130%);
  animation:serSheen 5.2s ease-in-out infinite;
}
@keyframes serSheen{ 0%,60%,100%{ transform:translateX(-130%); } 30%{ transform:translateX(130%); } }

/* the chosen seed breathes gently, so the current species is unmistakable */
@keyframes seedBreathe{
  50%{ box-shadow:0 0 20px rgba(180,190,255,.4), inset 0 0 11px rgba(180,190,255,.16); }
}
.dock button.sel{ animation:seedBreathe 4s ease-in-out infinite; }

/* honour readers who prefer stillness */
@media (prefers-reduced-motion: reduce){
  #overlay::before, #overlay h1, #overlay p, #begin, #overlay small,
  #serFill::after, .dock button.sel, #hint, .moon-dot{ animation:none !important; }
}