:root{
  --ph:#B7FFE9;
  --ph-dim:#7FD6BA;
  --ph-deep:#0B2B23;
  --bg:#050807;
  --soil:#171310;
  --soil-2:#211a14;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  font-family:var(--mono);
  color:var(--ph);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(183,255,233,.05), transparent 60%),
    var(--bg);
  min-height:100svh;
  overflow-x:hidden;
}
/* faint scanlines over everything */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.crt-wrap{max-width:1060px;margin:0 auto;padding:20px 18px 48px}

.g-head{
  display:flex;align-items:baseline;gap:16px;
  border:1px solid var(--ph-deep);border-radius:6px;
  padding:10px 14px;background:rgba(11,43,35,.35);
  font-size:.8rem;letter-spacing:.12em;
}
.g-back{color:var(--ph-dim);text-decoration:none}
.g-back:hover{color:var(--ph)}
.g-title{font-weight:600;font-size:inherit;margin:0;display:inline}
.g-ver{color:var(--ph-dim);font-weight:400}
.g-live{margin-left:auto;font-size:.68rem;color:var(--ph-dim)}
.g-live.on{color:var(--ph)}
.g-tag{margin:14px 2px 6px;font-size:.78rem;color:var(--ph-dim);letter-spacing:.06em}
.g-tag strong{color:var(--ph);font-weight:600}

/* ---------- the bed ---------- */
.bed{
  position:relative;
  border:1px solid var(--ph-deep);border-radius:8px;
  margin-top:10px;
  background:
    radial-gradient(90% 70% at 50% 8%, rgba(183,255,233,.06), transparent 55%),
    linear-gradient(#060a09, #07100d 70%, var(--soil-2) 70%, var(--soil));
  overflow:hidden;
  min-height:480px;
}
.plots{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);
  align-items:end;
  padding:34px 10px 0;
  min-height:410px;
}
.soil{
  height:70px;
  background:
    repeating-linear-gradient(87deg, transparent 0 26px, rgba(183,255,233,.03) 26px 27px),
    linear-gradient(var(--soil-2), var(--soil));
  border-top:1px solid #2a2119;
}

.plot{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.plot svg.flower{width:min(190px,100%);height:auto;display:block;overflow:visible;image-rendering:pixelated;transition:filter .5s,transform .5s}
/* pixel-game idle bob: whole-pixel steps, no sub-pixel smoothing */
.flower .swayer{animation:sway 4.8s steps(2,jump-none) infinite}
.plot:nth-child(2) .swayer{animation-duration:5.9s;animation-delay:-2s}
.plot:nth-child(3) .swayer{animation-duration:4.1s;animation-delay:-1s}
.plot:nth-child(4) .swayer{animation-duration:6.7s;animation-delay:-3s}
@keyframes sway{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.flower .swayer{animation:none}}
/* recently watered: visibly perkier for a few seconds */
.plot.perked svg.flower{filter:saturate(1.45) brightness(1.2);transform:translateY(-4px)}

.plot .label{
  margin:8px 0 2px;font-size:.74rem;letter-spacing:.1em;font-weight:600;
}
.plot .stat{font-size:.64rem;color:var(--ph-dim);letter-spacing:.05em;text-align:center;line-height:1.5}
.plot .stat .ok{color:var(--ph)}
.plot .stat .bad{color:#e8a06a}
.plot .waters{
  margin-top:4px;font-size:.62rem;color:var(--ph-dim);
  border:1px solid var(--ph-deep);border-radius:999px;padding:2px 9px;
  background:rgba(11,43,35,.4);
}
.plot .waters em{font-style:normal;color:var(--ph)}
.plot.just-watered .waters{box-shadow:0 0 12px rgba(183,255,233,.5);color:var(--ph)}

/* droplets + sparkles */
.drop{
  position:absolute;width:5px;height:9px;border-radius:60% 60% 60% 60%/40% 40% 70% 70%;
  background:var(--ph);opacity:.85;z-index:6;pointer-events:none;
  animation:fall .7s ease-in forwards;
}
@keyframes fall{from{transform:translateY(-6px);opacity:.9}to{transform:translateY(90px);opacity:0}}
.spark{
  position:absolute;font-size:12px;color:var(--ph);z-index:6;pointer-events:none;
  animation:spark 1s ease-out forwards;
}
@keyframes spark{from{transform:translateY(0) scale(.7);opacity:1}to{transform:translateY(-34px) scale(1.25);opacity:0}}

/* ---------- watering can ---------- */
.can{
  position:absolute;top:22px;right:26px;width:104px;z-index:5;
  cursor:grab;touch-action:none;
  filter:drop-shadow(0 0 8px rgba(183,255,233,.15));
}
.can:active{cursor:grabbing}
.can.pouring{transform:rotate(-28deg)}
.can svg{width:100%;height:auto;display:block}

.g-noscript{padding:40px;color:var(--ph-dim)}

.g-legend{
  margin-top:16px;font-size:.74rem;color:var(--ph-dim);line-height:1.7;
  border:1px solid var(--ph-deep);border-radius:6px;padding:12px 14px;
  background:rgba(11,43,35,.2);
}
.g-legend strong{color:var(--ph);font-weight:600}
.g-legend p+p{margin-top:6px}
.g-small{font-size:.66rem;opacity:.8}
.g-foot{margin-top:12px;font-size:.62rem;color:var(--ph-dim);letter-spacing:.08em}

/* ---------- wall of support ---------- */
.wall{
  margin-top:16px;border:1px solid var(--ph-deep);border-radius:6px;
  background:rgba(11,43,35,.2);overflow:hidden;
}
.wall__head{
  padding:8px 14px;font-size:.7rem;letter-spacing:.14em;font-weight:600;
  border-bottom:1px solid var(--ph-deep);background:rgba(11,43,35,.4);
}
.wall__form{padding:12px 14px;border-bottom:1px dashed var(--ph-deep)}
.wall__prompt{font-size:.74rem;margin-bottom:8px}
.wall__prompt span{font-weight:600}
.wall__fields{display:flex;gap:8px;flex-wrap:wrap}
.wall__fields input{
  font-family:var(--mono);font-size:.72rem;color:var(--ph);
  background:#060a09;border:1px solid var(--ph-deep);border-radius:4px;
  padding:6px 9px;outline:none;
}
.wall__fields input:focus{border-color:var(--ph-dim)}
#noteName{width:150px}
#noteMsg{flex:1;min-width:200px}
.wall__fields button{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;cursor:pointer;
  color:var(--ph);background:var(--ph-deep);border:1px solid var(--ph-dim);
  border-radius:4px;padding:6px 12px;
}
.wall__fields button:hover{background:#12402f}
.wall__fields #noteSkip{background:none;border-color:var(--ph-deep);color:var(--ph-dim)}
.wall__list{list-style:none;max-height:260px;overflow-y:auto}
.wall__list li{
  display:flex;gap:10px;align-items:baseline;
  padding:8px 14px;font-size:.72rem;line-height:1.5;
  border-bottom:1px solid rgba(11,43,35,.6);
}
.wall__list li:last-child{border-bottom:none}
.wall__dot{flex:none;width:8px;height:8px;align-self:center;box-shadow:0 0 6px currentColor}
.wall__who{flex:none;font-weight:600;color:var(--ph)}
.wall__msg{color:var(--ph-dim);overflow-wrap:anywhere}
.wall__when{flex:none;margin-left:auto;font-size:.6rem;color:var(--ph-dim);opacity:.7}
.wall__empty{padding:12px 14px;font-size:.7rem;color:var(--ph-dim)}

@media (max-width:720px){
  .plots{grid-template-columns:repeat(2,1fr);row-gap:18px;padding-top:24px}
  .bed{min-height:0}
  .plot svg.flower{width:min(150px,90%)}
  /* the can's shared position comes from other visitors' screens and can sit
     off-viewport on a phone; tapping a flower waters it instead */
  .can{display:none}
}