@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Share+Tech+Mono&display=swap");

:root{
  --bg:#04070a;
  --panel:#070c10;
  --ink:#e8f4fb;
  --dim:rgba(232,244,251,.52);
  --faint:rgba(232,244,251,.14);
  --amber:#ffb454; --amberhi:#ffe0b0;
  --cyan:#41e2ec;  --cyanhi:#b6f6fa;
  --magenta:#ff6ad5; --magentaHi:#ffc9ef;
  --amberrgb:255,180,84; --cyanrgb:65,226,236; --magentargb:255,106,213;
  --mono:"Share Tech Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --disp:"Chakra Petch",var(--mono);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
body{
  min-height:100vh;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(65,226,236,.07), transparent 60%),
    radial-gradient(90% 50% at 85% 110%, rgba(255,106,213,.05), transparent 60%),
    var(--bg);
  color:var(--ink);
  font:14px/1.5 var(--mono);
  letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
}

#app{max-width:520px;margin:0 auto;padding:18px 12px 40px;position:relative}

.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- ambient aura ---------- */
#aura{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.aura-spot{position:absolute;width:60vmax;height:60vmax;border-radius:50%;opacity:.12;filter:blur(20px);transition:opacity .4s}
.aura-spot.sp-0{background:radial-gradient(circle,rgba(var(--amberrgb),.6),transparent 65%);left:-12vmax;top:-10vmax}
.aura-spot.sp-1{background:radial-gradient(circle,rgba(var(--cyanrgb),.5),transparent 65%);right:-14vmax;top:24vh}
.aura-spot.sp-2{background:radial-gradient(circle,rgba(var(--magentargb),.5),transparent 65%);left:6vmax;bottom:-18vmax}
.aura-spot.off{opacity:.04}

/* ---------- header ---------- */
.topbar{position:relative;z-index:1;text-align:center;margin-bottom:14px}
.overline{font-size:10px;letter-spacing:.34em;color:var(--dim);text-transform:uppercase;margin-bottom:10px}
.okdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);margin:0 6px 0 10px;vertical-align:1px;animation:blink 2.4s steps(1) infinite}
h1{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(26px,7.4vw,44px);letter-spacing:.14em;
  color:#fff;text-shadow:0 0 8px rgba(255,255,255,.35),0 0 26px rgba(65,226,236,.55);
}
.sub{color:var(--dim);font-size:12px;letter-spacing:.12em;margin-top:6px}

/* ---------- stats ---------- */
.stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:8px;margin-bottom:16px;align-items:stretch}
.stat{
  background:linear-gradient(180deg,rgba(232,244,251,.05),rgba(232,244,251,.015));
  border:1px solid var(--faint);
  border-radius:3px;padding:7px 10px 6px;text-align:center;
}
.stat-label{display:block;font-size:9px;letter-spacing:.3em;color:var(--dim)}
.stat-value{font-size:22px;font-family:var(--disp);color:#fff;text-shadow:0 0 12px rgba(255,255,255,.25)}
.stat:nth-child(1) .stat-value{color:var(--amberhi);text-shadow:0 0 14px rgba(var(--amberrgb),.55)}
.stat:nth-child(2) .stat-value{color:var(--cyanhi);text-shadow:0 0 14px rgba(var(--cyanrgb),.5)}
.stat:nth-child(3) .stat-value{color:var(--magentaHi);text-shadow:0 0 14px rgba(var(--magentargb),.5)}
.btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink);
  background:linear-gradient(180deg,rgba(232,244,251,.07),transparent);
  border:1px solid var(--faint);border-radius:3px;padding:0 14px;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.btn:hover{border-color:var(--cyan);background:rgba(65,226,236,.08);box-shadow:0 0 14px rgba(var(--cyanrgb),.25);color:#fff}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:1px solid var(--cyan);outline-offset:2px}

/* ---------- greenhouse ---------- */
.greenhouse{
  position:relative;z-index:1;
  background:
    linear-gradient(180deg,rgba(232,244,251,.045),rgba(232,244,251,.01) 18%,rgba(232,244,251,.02) 78%,rgba(232,244,251,.05));
  border:1px solid rgba(232,244,251,.16);
  border-top:1px solid rgba(232,244,251,.28);
  border-radius:4px;
  padding:10px 12px 8px;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 24px 60px -30px rgba(65,226,236,.35),inset 0 0 60px rgba(232,244,251,.03);
}
.greenhouse::before,.greenhouse::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  background:
    linear-gradient(var(--cyan),var(--cyan)) top left/12px 1px,
    linear-gradient(var(--cyan),var(--cyan)) top left/1px 12px;
  background-repeat:no-repeat;opacity:.7;
}
.greenhouse::before{top:-1px;left:-1px}
.greenhouse::after{top:-1px;right:-1px;transform:rotate(90deg)}
.corner-b{position:absolute;width:14px;height:14px;bottom:-1px;left:-1px;pointer-events:none;opacity:.7;
  background:linear-gradient(var(--magenta),var(--magenta)) bottom left/12px 1px,linear-gradient(var(--magenta),var(--magenta)) bottom left/1px 12px;background-repeat:no-repeat}

.lampbar{display:flex;justify-content:center;gap:14px;padding:2px 0 8px}
.lamp{width:8px;height:8px;border-radius:50%;opacity:.35;transition:opacity .3s;filter:blur(.5px)}
.lamp.sp-0{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.lamp.sp-1{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.lamp.sp-2{background:var(--magenta);box-shadow:0 0 10px var(--magenta)}
.lamp.hot{opacity:.95}

.readout{
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 4px 8px;
}
.ro-label{font-size:9px;letter-spacing:.32em;color:var(--dim);align-self:center}
.ro-big{font-family:var(--disp);font-size:34px;line-height:1;color:#fff;text-shadow:0 0 16px rgba(255,255,255,.4),0 0 34px rgba(var(--cyanrgb),.5);min-width:130px;text-align:center}
.ro-side{font-size:9px;letter-spacing:.2em;color:var(--dim);text-align:right;line-height:1.7}
.ro-side b{color:var(--ink);font-weight:400}
.ro-big.pop{animation:yieldPop .28s ease}
@keyframes yieldPop{30%{transform:scale(1.14);text-shadow:0 0 22px #fff,0 0 44px rgba(var(--cyanrgb),.8)}}

#boardwrap{position:relative;padding:2px 0 0}
#board{
  position:relative;width:100%;aspect-ratio:5/8;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,rgba(232,244,251,.05) 0 1px,transparent 1px calc(100%/8)),
    repeating-linear-gradient(90deg,rgba(232,244,251,.05) 0 1px,transparent 1px calc(100%/5)),
    radial-gradient(80% 46% at 50% 6%,rgba(65,226,236,.06),transparent 70%),
    radial-gradient(70% 40% at 50% 100%,rgba(255,180,84,.05),transparent 70%),
    #020406;
  border:1px solid rgba(232,244,251,.07);
  border-radius:2px;
}
#board::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(255,255,255,.05) 84%,transparent 88%);
}
#guides{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr;z-index:2}
#guides i{position:relative;cursor:pointer;border-radius:2px}
#guides i:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 46%)}
#guides i.sel::before{
  content:"";position:absolute;left:38%;right:38%;top:0;height:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 70%);
  box-shadow:0 0 18px rgba(255,255,255,.06);
}
#guides i.sel::after{
  content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink);filter:drop-shadow(0 0 4px #fff);
}
#fruits{position:absolute;inset:0;z-index:3}
.fruit{
  position:absolute;top:0;left:0;
  width:calc(100%/5);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  will-change:transform;
  transition:transform .22s cubic-bezier(.25,.7,.3,1),opacity .2s;
}
.h-0{--hc:var(--amber);--hglow:rgba(var(--amberrgb),.85);--hrgb:var(--amberrgb)}
.h-1{--hc:var(--cyan);--hglow:rgba(var(--cyanrgb),.85);--hrgb:var(--cyanrgb)}
.h-2{--hc:var(--magenta);--hglow:rgba(var(--magentargb),.85);--hrgb:var(--magentargb)}
.orb{
  pointer-events:auto;cursor:pointer;border-radius:50%;position:relative;
  width:52%;aspect-ratio:1;
  background:
    radial-gradient(circle at 33% 28%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 12%),
    radial-gradient(circle at 38% 34%,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 22%),
    radial-gradient(circle at 50% 60%,var(--hc) 0,var(--hc) 42%,rgba(0,0,0,.25) 100%);
  box-shadow:0 0 10px var(--hglow),0 0 26px var(--hglow),inset 0 -3px 6px rgba(0,0,0,.35);
  transition:width .18s ease,opacity .2s,box-shadow .2s;
}
.fruit.lvl-1 .orb{width:62%}
.fruit.lvl-2 .orb{width:70%;animation:ripe 1.5s ease-in-out infinite}
.fruit.just .orb{animation:pop .3s ease-out}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes ripe{
  0%,100%{box-shadow:0 0 10px var(--hglow),0 0 24px var(--hglow),inset 0 -3px 6px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 18px var(--hglow),0 0 46px var(--hglow),0 0 80px var(--hglow),inset 0 -3px 6px rgba(0,0,0,.3)}
}
.orb::after{
  content:"";position:absolute;inset:-9%;
  border-radius:50%;border:1px dashed var(--hc);
  opacity:.0;transition:opacity .2s;
}
.fruit.lvl-2 .orb::after{opacity:.9;animation:spin 7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fruit.gone{transition:transform .26s ease,opacity .26s ease;opacity:0;transform-origin:center}
.fruit.gone .orb{transform:scale(.25)}

.float{
  position:absolute;z-index:5;pointer-events:none;
  font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.06em;white-space:nowrap;
  text-shadow:0 0 10px currentColor;animation:rise .9s ease-out forwards;
  transform:translate(-50%,-50%);
}
.float.f-0{color:var(--amberhi)}
.float.f-1{color:var(--cyanhi)}
.float.f-2{color:var(--magentaHi)}
.float.big{font-size:19px;color:#fff;text-shadow:0 0 16px #fff,0 0 30px currentColor}
.float.warn{color:#fff}
@keyframes rise{0%{opacity:0;margin-top:6px}12%{opacity:1}100%{opacity:0;margin-top:-34px}}

#soilbar{
  height:9px;margin:0 2px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 70%),#000;
  border:1px solid rgba(232,244,251,.1);border-top:none;border-radius:0 0 3px 3px;
  box-shadow:0 3px 8px rgba(0,0,0,.6),0 -1px 10px rgba(var(--amberrgb),.12);
}

/* glass glare + surge */
.glare{position:absolute;inset:0;border-radius:4px;pointer-events:none;overflow:hidden;z-index:6}
.glare::before{
  content:"";position:absolute;top:-30%;bottom:-30%;width:34%;left:-60%;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.05) 46%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.05) 54%,transparent 68%);
  transform:rotate(8deg);animation:sweep 7.5s linear infinite;
}
@keyframes sweep{0%{left:-60%}55%,100%{left:130%}}
#surge{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:8;border-radius:4px}
#surge.on{animation:flash .5s ease-out forwards}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}

#burst{
  position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;
}
#burst.on{animation:burstIn 1.1s ease-out forwards}
#burst span{
  font-family:var(--disp);font-weight:700;letter-spacing:.18em;font-size:clamp(16px,5vw,26px);
  padding:6px 18px;border:1px solid currentColor;background:rgba(0,0,0,.55);
  box-shadow:0 0 30px currentColor;
}
#burst.bt-0{color:var(--amberhi)}#burst.bt-1{color:var(--cyanhi)}#burst.bt-2{color:var(--magentaHi)}#burst.bt-w{color:#fff}
@keyframes burstIn{0%{opacity:0;transform:scale(.7)}18%{opacity:1;transform:scale(1.04)}70%{opacity:1}100%{opacity:0;transform:scale(1.12)}}

#statusline{
  margin:9px 0 2px;min-height:18px;text-align:center;
  font-size:10.5px;letter-spacing:.14em;color:var(--dim);
}
#statusline.ok{color:var(--cyanhi)}#statusline.bad{color:var(--amberhi)}

/* ---------- dock ---------- */
.dock{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.queue{display:flex;align-items:center;gap:10px}
.q-label{font-size:9px;letter-spacing:.3em;color:var(--dim)}
#queueSlots{display:flex;gap:8px}
.qslot{
  width:30px;height:30px;border:1px solid var(--faint);border-radius:3px;
  display:grid;place-items:center;background:rgba(0,0,0,.4);
}
.qslot.cur{border-color:rgba(255,255,255,.4);box-shadow:0 0 10px rgba(255,255,255,.12)}
.qslot .orb{width:64%;cursor:default;animation:none}
.qslot.cur .orb{animation:ripe 1.4s ease-in-out infinite}
.qslot .orb::after{display:none}
.hint{font-size:9.5px;color:var(--dim);letter-spacing:.08em;line-height:1.6;text-align:right}
kbd{border:1px solid var(--faint);border-radius:2px;padding:0 4px;color:var(--ink);font-family:var(--mono)}

/* ---------- console ---------- */
.console{position:relative;z-index:1;margin-top:16px;border:1px solid var(--faint);border-radius:3px;background:rgba(0,0,0,.45);padding:8px 10px}
.c-head{font-size:9px;letter-spacing:.3em;color:var(--dim);margin-bottom:6px}
#logbox{min-height:60px;max-height:108px;overflow:hidden}
.logln{font-size:11px;line-height:1.55;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:logIn .2s ease}
.logln b{color:var(--ink);font-weight:400}
.logln.lg-0 b{color:var(--amberhi)}.logln.lg-1 b{color:var(--cyanhi)}.logln.lg-2 b{color:var(--magentaHi)}.logln.lg-w b{color:#fff}
@keyframes logIn{from{opacity:0;transform:translateX(4px)}to{opacity:1}}

.footer{position:relative;z-index:1;text-align:center;font-size:9px;letter-spacing:.26em;color:rgba(232,244,251,.3);margin-top:22px}

/* scanline texture over everything */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}

#boardwrap.no-more{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

@media (max-width:420px){
  #app{padding:14px 10px 34px}
  .greenhouse{padding:8px 8px 6px}
  .ro-big{font-size:28px;min-width:96px}
  .dock{flex-direction:column;align-items:flex-start;gap:8px}
  .hint{text-align:left}
  .stats{grid-template-columns:repeat(3,1fr)}
  .btn{grid-column:1/-1;padding:7px}
  .logln{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}