:root{
  --bg:#0a0d08;
  --panel:#12170f;
  --edge:#26301f;
  --ink:#d8e2d0;
  --dim:#7d8a75;
  --green:#55ff55;
  --amber:#ffff55;
  --red:#ff5555;
  --cyan:#55ffff;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono",monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--mono);font-size:14px;line-height:1.4;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible{outline:2px solid var(--green);outline-offset:2px}

#app{
  display:flex;flex-direction:column;height:100dvh;
  padding-top:var(--safe-t);padding-bottom:var(--safe-b);
}

/* ------------------------------------------------------------------- HUD */
#hud{
  flex:0 0 auto;display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;background:var(--edge);border-bottom:1px solid var(--edge);
}
#hud .cell{background:var(--bg);padding:6px 4px 5px;text-align:center;min-width:0}
#hud .k{
  display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:1px;
}
#hud .v{display:block;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
#hud .v.bad{color:var(--red)}
#hud-money{color:var(--green)}
#hud-time{color:var(--cyan)}

#cutwrap{flex:0 0 auto;height:3px;background:#1a2214}
#cutbar{height:100%;width:0;background:var(--green);transition:width .2s linear}

#titlebar{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
  gap:8px;padding:5px 10px;font-size:11px;color:var(--dim);
  border-bottom:1px solid var(--edge);
}
#lawn-name{color:var(--amber);letter-spacing:.04em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#titlebar .tools{display:flex;gap:4px;flex:0 0 auto}
#titlebar .tools button{
  border:1px solid var(--edge);border-radius:3px;padding:3px 8px;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
}
#titlebar .tools button:active{background:var(--edge)}

/* ----------------------------------------------------------------- stage */
#stage{
  flex:1 1 auto;position:relative;min-height:0;
  display:flex;align-items:center;justify-content:center;
  background:#000;overflow:hidden;touch-action:none;
}
#screen{display:block;image-rendering:pixelated}

#toast{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  background:rgba(10,13,8,.92);border:1px solid var(--amber);color:var(--amber);
  padding:6px 12px;border-radius:3px;font-size:12px;letter-spacing:.04em;
  white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}

/* --------------------------------------------------------------- minimap */
#maprow{
  flex:0 0 auto;display:flex;justify-content:center;align-items:center;
  padding:5px 8px;background:#070a05;border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);
}
#minimap{display:block;width:100%;max-width:420px;image-rendering:pixelated;opacity:.9}

/* -------------------------------------------------------------- controls */
#controls{
  flex:0 0 auto;display:flex;gap:12px;align-items:center;
  padding:10px 12px 12px;
}
#speedbox{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;
}
#speedbox .lab{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
#speedbox .row{display:flex;align-items:center;gap:8px}
#speedbox button{
  width:40px;height:40px;border:1px solid var(--edge);border-radius:6px;
  font-size:20px;line-height:1;color:var(--ink);background:var(--panel);
}
#speedbox button:active{background:var(--edge)}
#speed-val{
  min-width:26px;text-align:center;font-size:24px;color:var(--amber);
  font-variant-numeric:tabular-nums;
}

/* floating thumbstick: the base jumps to wherever the thumb lands */
#stickzone{
  flex:1 1 auto;position:relative;align-self:stretch;
  min-height:158px;touch-action:none;
}
#stick{
  position:absolute;left:50%;top:50%;width:150px;height:150px;
  margin:-75px 0 0 -75px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#1d2714 0%,#0e1409 74%);
  border:2px solid #40532f;
  box-shadow:inset 0 0 26px rgba(85,255,85,.06);
  transition:border-color .16s ease,box-shadow .16s ease;
}
#stick::before{
  content:"";position:absolute;inset:14px;border-radius:50%;
  border:1px dashed #33452a;
}
#stick.live{
  border-color:var(--green);
  box-shadow:inset 0 0 30px rgba(85,255,85,.14),0 0 16px rgba(85,255,85,.22);
}
#stick .dot{
  position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:#5b7049;
  transform:rotate(calc(var(--a) * 90deg)) translateY(-61px);
  transition:background .1s,box-shadow .1s;
}
#stick .dot.on{background:var(--green);box-shadow:0 0 10px var(--green)}
#stick .knob{
  position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#38492c 0%,#1f2917 100%);
  border:2px solid #6b8256;
  box-shadow:0 4px 12px rgba(0,0,0,.7);
  transition:background .12s,border-color .12s;
  will-change:transform;
}
#stick .knob::after{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;
  margin:-5px 0 0 -5px;border-radius:50%;background:#9ab389;
}
#stick.live .knob{background:var(--green);border-color:#bfffbf}
#stick.live .knob::after{background:#04170a}

#hint{
  flex:0 0 auto;text-align:center;font-size:10px;color:var(--dim);
  padding:0 12px 8px;letter-spacing:.04em;
}

/* ---------------------------------------------------------------- panels */
#overlay{
  position:fixed;inset:0;background:rgba(4,6,3,.88);
  display:grid;place-items:center;padding:20px;z-index:20;
  overflow-y:auto;
}
#overlay[hidden],.panel[hidden]{display:none}
.panel{
  width:100%;max-width:400px;background:var(--panel);
  border:1px solid var(--edge);border-radius:8px;padding:22px 20px;
  box-shadow:0 20px 60px -20px #000;
}
.panel h1{
  margin:0 0 4px;font-size:22px;letter-spacing:-.01em;color:var(--green);
}
.panel h2{margin:0 0 10px;font-size:18px;color:var(--amber);letter-spacing:-.01em}
.panel .sub{margin:0 0 18px;font-size:12px;color:var(--dim);line-height:1.55}
.panel p{margin:0 0 14px;font-size:12.5px;color:var(--dim);line-height:1.6}
.panel p b{color:var(--ink);font-weight:400}
.stat{
  display:flex;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--edge);font-size:13px;
}
.stat:last-child{border-bottom:0}
.stat span{color:var(--dim)}
.stat b{font-weight:400;font-variant-numeric:tabular-nums}
.field{display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin:0 0 12px;font-size:12px;color:var(--dim)}
.field select{
  font:inherit;font-size:13px;background:var(--bg);color:var(--ink);
  border:1px solid var(--edge);border-radius:4px;padding:6px 8px;min-width:150px;
}
.btn{
  display:block;width:100%;margin-top:16px;padding:13px;
  background:var(--green);color:#04170a;border-radius:6px;
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;
}
.btn:active{filter:brightness(.85)}
.btn.ghost{background:none;border:1px solid var(--edge);color:var(--dim);margin-top:8px}
.vito{
  margin-top:14px;padding:10px 12px;border:1px solid var(--red);border-radius:4px;
  color:var(--red);font-size:11.5px;letter-spacing:.04em;
}
.legend{
  display:grid;grid-template-columns:repeat(2,1fr);gap:4px 14px;
  margin:0 0 16px;font-size:11.5px;color:var(--dim);
}
.legend i{font-style:normal;display:inline-block;width:14px;text-align:center}
.legend .g{color:var(--green)} .legend .w{color:#5555ff}
.legend .r{color:var(--red)} .legend .a{color:var(--amber)}
.legend .b{color:#aa5500} .legend .d{color:#00aa00}
.credit{margin-top:16px;font-size:10px;color:#4d5747;line-height:1.6;text-align:center}

/* The start panel is a tall portrait column on a phone. On a landscape screen
   with room to spare it becomes a landscape card instead: the briefing on the
   left, the controls you actually came to press on the right, no scrolling. */
.mcol{display:contents}
@media (min-width:740px) and (min-height:380px) and (orientation:landscape){
  #panel-menu{
    max-width:900px;
    display:grid;grid-template-columns:1.15fr 1fr;gap:0 34px;align-items:start;
    padding:30px 32px;
  }
  #panel-menu .mcol{display:block}
  #panel-menu .mcol + .mcol{
    border-left:1px solid var(--edge);padding-left:34px;margin-left:0;
  }
  #panel-menu h1{font-size:30px}
  #panel-menu .legend{grid-template-columns:1fr 1fr}
  #panel-menu .btn{margin-top:22px}
  #panel-menu .about{margin-top:18px}
}

/* short screens: give the lawn the room instead of the stick */
@media (max-height:700px){
  #stickzone{min-height:126px}
  #stick{width:124px;height:124px;margin:-62px 0 0 -62px}
  #stick .dot{transform:rotate(calc(var(--a) * 90deg)) translateY(-50px)}
  #stick .knob{width:50px;height:50px;margin:-25px 0 0 -25px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- site integration ---- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--green);color:#04170a;padding:10px 14px;border-radius:0 0 4px 0;
}
.skip:focus{left:0}
#titlebar .home{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent}
#titlebar .home:hover,#titlebar .home:focus{color:var(--green);border-bottom-color:var(--green)}
.panel .about{margin-top:20px;padding-top:18px;border-top:1px solid var(--edge)}
.panel .about h2{font-size:14px;color:var(--ink);margin:0 0 10px;letter-spacing:.02em}
.panel .about p{font-size:12px;line-height:1.65;color:var(--dim);margin:0 0 10px}
.panel .about strong{color:var(--ink);font-weight:400}
.panel .credit-long{color:#5d6656;font-size:11.5px}

/* full width under both columns, set in two text columns so a wide card does
   not end up with 130-character lines */
@media (min-width:740px) and (min-height:380px) and (orientation:landscape){
  #panel-menu .about{grid-column:1 / -1;margin-top:6px}
  #panel-menu .about h2{column-span:all}
  #panel-menu .about .cols{column-count:2;column-gap:30px}
  #panel-menu .about p{break-inside:avoid}
}