:root {
  --font: "Baloo 2", "Fredoka One", "Comic Sans MS", "Chalkboard SE", "Trebuchet MS", system-ui, sans-serif;
  --green: #5fd13a;
  --green-d: #3a9b22;
  --purple: #9b5de5;
  --purple-d: #6f35b5;
  --sun: #ffd93b;
  --sun-d: #e6a800;
  --ink: #2b2438;
  --paper: #fffdf5;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #1d2a5e;
  font-family: var(--font); color: var(--ink);
  -webkit-user-select: none; user-select: none;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: crosshair; }
.hidden { display: none !important; }

/* ---------------- lobby ---------------- */
#lobby {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: flex-start;
  padding: 12px 12px 12px max(12px, 5vw); overflow: auto;
  background: linear-gradient(90deg, rgba(10, 15, 50, 0.45) 0%, rgba(10, 15, 50, 0) 60%);
}
@media (max-width: 900px) { #lobby { justify-content: center; padding-left: 12px; } }
.card {
  width: min(560px, 96vw); margin: auto 0;
  background: var(--paper);
  border: 6px solid #fff;
  border-radius: 32px;
  padding: 14px 24px 12px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.22), 0 24px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
  animation: pop-in 0.5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes pop-in { from { transform: scale(0.7) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
h1 {
  margin: 0; font-size: clamp(30px, 6vw, 46px); line-height: 1.1; letter-spacing: 0.5px;
  color: var(--green-d);
  text-shadow: 0 3px 0 #fff, 0 6px 0 rgba(0, 0, 0, 0.12);
}
h1 .t-ico { display: inline-block; animation: bob 2.2s ease-in-out infinite; }
h1 .t-ico:last-child { animation-delay: -1.1s; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(6deg); } }
.tag { margin: 2px 0 10px; font-size: 18px; color: #6c5a8f; }
.label { margin: 8px 0 4px; font-size: 15px; font-weight: 700; color: #7a6a99; text-transform: uppercase; letter-spacing: 1.5px; }
.field { display: block; font-size: 15px; font-weight: 700; color: #7a6a99; text-transform: uppercase; letter-spacing: 1.5px; }
.field input {
  display: block; width: 100%; margin-top: 4px; padding: 8px 14px;
  font: 700 22px var(--font); text-align: center; color: var(--ink);
  border: 4px solid #d8cff0; border-radius: 18px; background: #fff; outline: none;
  -webkit-user-select: text; user-select: text;
}
.field input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(95, 209, 58, 0.25); }
.row { display: flex; gap: 10px; justify-content: center; }
.choice {
  flex: 1; font: 700 18px var(--font); color: var(--ink); cursor: pointer;
  padding: 8px 10px 9px; border-radius: 20px; border: 4px solid #e2dcf2; border-bottom-width: 7px;
  background: #fff; transition: transform 0.08s, border-color 0.12s, background 0.12s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
}
.choice:hover { transform: translateY(-2px); }
.choice:active { transform: translateY(2px); border-bottom-width: 4px; margin-top: 3px; }
.choice .big { font-size: 40px; line-height: 1.1; }
.choice .nm { font-size: 21px; }
.choice .ds { font-size: 13px; font-weight: 600; opacity: 0.7; line-height: 1.15; margin-top: 1px; }
.choice.team.plant.selected { border-color: var(--green); background: #e9ffd9; box-shadow: 0 0 0 4px rgba(95, 209, 58, 0.3); }
.choice.team.zombie.selected { border-color: var(--purple); background: #f0e4ff; box-shadow: 0 0 0 4px rgba(155, 93, 229, 0.3); }
.choice.mode.selected, .choice.diff.selected { border-color: var(--sun-d); background: #fff6c4; box-shadow: 0 0 0 4px rgba(255, 217, 59, 0.4); }
#play {
  margin-top: 10px; width: 100%; padding: 8px 0 12px;
  font: 800 38px var(--font); letter-spacing: 1px; color: #fff; cursor: pointer;
  background: linear-gradient(#7be85a, #43b81f); border: 0; border-radius: 26px;
  border-bottom: 9px solid #2a8a12; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.08s, filter 0.2s;
  animation: pulse 1.6s ease-in-out infinite;
}
#play:hover:not(:disabled) { transform: translateY(-2px) scale(1.01); filter: brightness(1.08); }
#play:active:not(:disabled) { transform: translateY(4px); border-bottom-width: 5px; }
#play:disabled { filter: grayscale(0.8); cursor: wait; animation: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(95, 209, 58, 0.25); } }
#status { margin-top: 6px; min-height: 22px; font-size: 16px; font-weight: 700; color: #6c5a8f; }
#status.bad { color: #d6336c; }
.fine { margin-top: 2px; font-size: 12px; opacity: 0.6; }
.linkbtn {
  margin-top: 2px; padding: 3px 16px 4px; font: 700 15px var(--font); color: #6c5a8f; cursor: pointer;
  background: #f0eafa; border: 3px solid #e2dcf2; border-radius: 16px; transition: transform 0.08s, background 0.12s;
}
.linkbtn:hover { background: #e6dcf8; transform: translateY(-1px); }
.linkbtn:active { transform: translateY(1px); }
kbd { font: 800 13px var(--font); color: #fff; background: var(--ink); border-radius: 7px; padding: 0 6px; }

/* ---------------- look settings ---------------- */
#settings {
  position: fixed; inset: 0; z-index: 50; display: flex; padding: 12px; overflow: auto;
  background: rgba(20, 16, 50, 0.6);
}
.settings-card { width: min(480px, 96vw); margin: auto; padding: 14px 22px 12px; }
.settings-card h2 {
  margin: 0 0 6px; font-size: clamp(26px, 5vw, 36px); line-height: 1.1; color: var(--purple-d);
  text-shadow: 0 3px 0 #fff, 0 5px 0 rgba(0, 0, 0, 0.12);
}
.setrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0; padding: 8px 14px 9px; text-align: left;
  background: #fff; border: 4px solid #e2dcf2; border-bottom-width: 7px; border-radius: 20px;
}
.setname { flex: 1; font-size: 20px; font-weight: 800; line-height: 1.1; }
.setds { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; opacity: 0.65; line-height: 1.15; }
.setval { flex: none; min-width: 64px; text-align: center; font-size: 22px; font-weight: 800; color: var(--green-d); }
.switch {
  position: relative; flex: none; width: 72px; height: 38px; padding: 0; cursor: pointer;
  background: #e9e4f5; border: 4px solid #d8cff0; border-radius: 20px; transition: background 0.12s, border-color 0.12s;
}
.switch i {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); transition: transform 0.15s cubic-bezier(.2, 1.4, .4, 1);
}
.switch[aria-checked="true"] { background: var(--green); border-color: var(--green-d); }
.switch[aria-checked="true"] i { transform: translateX(34px); }
.setrow input[type=range] {
  flex-basis: 100%; width: 100%; height: 30px; margin: 0; cursor: pointer; background: transparent;
  -webkit-appearance: none; appearance: none; accent-color: var(--green-d);
}
.setrow input[type=range]::-webkit-slider-runnable-track { height: 14px; border-radius: 9px; background: #d9d2ea; border: 3px solid #fff; box-shadow: inset 0 2px 3px rgba(0,0,0,0.25), 0 0 0 2px rgba(0,0,0,0.12); }
.setrow input[type=range]::-moz-range-track { height: 8px; border-radius: 9px; background: #d9d2ea; border: 3px solid #fff; box-shadow: inset 0 2px 3px rgba(0,0,0,0.25), 0 0 0 2px rgba(0,0,0,0.12); }
.setrow input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff59d, #ffc107 70%, #ff9800); border: 3px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,0.3); }
.setrow input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff59d, #ffc107 70%, #ff9800); border: 3px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,0.3); }
.switch:focus-visible, .setrow input[type=range]:focus-visible, #set-done:focus-visible, .linkbtn:focus-visible, .choice:focus-visible {
  outline: 4px solid rgba(95, 209, 58, 0.55); outline-offset: 2px;
}
.setbtns { align-items: stretch; margin-top: 10px; }
.setbtns .choice { flex: 0 0 30%; }
#set-done {
  flex: 1; padding: 6px 0 10px; font: 800 32px var(--font); letter-spacing: 1px; color: #fff; cursor: pointer;
  background: linear-gradient(#7be85a, #43b81f); border: 0; border-bottom: 8px solid #2a8a12; border-radius: 24px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); transition: transform 0.08s, filter 0.2s;
}
#set-done:hover { transform: translateY(-2px); filter: brightness(1.08); }
#set-done:active { transform: translateY(4px); border-bottom-width: 4px; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { position: absolute; }
.panel, #hpbox, #mowerbox, #weaponbox, #gardenbox, #sunbox, #topbar {
  background: rgba(255, 253, 245, 0.92);
  border: 4px solid #fff; border-radius: 22px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22), 0 8px 18px rgba(0, 0, 0, 0.25);
}
#vignette {
  inset: 0; background: radial-gradient(ellipse at center, rgba(255, 60, 90, 0) 45%, rgba(255, 40, 80, 0.75) 100%);
  opacity: 0; transition: opacity 0.35s ease-out;
}
#vignette.flash { opacity: 1; transition: none; }

#crosshair { left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i { position: absolute; display: block; }
.ch-dot { left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(20, 30, 50, 0.7); }
.ch-ring { left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 2px rgba(20, 30, 50, 0.35), inset 0 0 0 2px rgba(20, 30, 50, 0.25); }
#hitmark { left: -16px; top: -16px; width: 32px; height: 32px; opacity: 0; transition: opacity 0.25s, transform 0.25s; transform: scale(1.4); }
#hitmark::before, #hitmark::after { content: ""; position: absolute; left: 14px; top: -4px; width: 4px; height: 40px; background: #ffe14a; border-radius: 2px; box-shadow: 0 0 0 2px rgba(40, 20, 0, 0.6); }
#hitmark::before { transform: rotate(45deg); }
#hitmark::after { transform: rotate(-45deg); }
#hitmark.on { opacity: 1; transform: scale(1); transition: none; }

#topbar { top: 10px; left: 50%; transform: translateX(-50%); width: min(460px, 56vw); padding: 5px 14px 6px; text-align: center; }
#wavetext { font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--purple-d); }
#timetrack { position: relative; height: 16px; margin: 3px 4px; border-radius: 10px; background: linear-gradient(90deg, #1b2a6b, #7a4a9c 55%, #ff9a6a 80%, #8fd3ff); border: 3px solid #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 0 2px rgba(0,0,0,0.12); }
#timefill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.0); }
#timesun { position: absolute; top: 50%; left: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff59d, #ffc107 70%, #ff9800); box-shadow: 0 0 10px 3px rgba(255, 214, 59, 0.85); }
#timelabel { font-size: 15px; font-weight: 700; color: #6c5a8f; line-height: 1; }

#gardenbox { top: 10px; right: 12px; padding: 4px 16px 5px; font-size: 22px; font-weight: 800; color: var(--green-d); }
#gardenbox b { font-size: 28px; }
#sunbox { top: 10px; left: 12px; padding: 2px 18px 4px; font-size: 32px; font-weight: 800; color: #b97800; }
#sunbox b { font-size: 36px; }
#sunbox.bump { animation: bump 0.4s ease-out; }
@keyframes bump { 40% { transform: scale(1.25); } }

#seedcards { bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
.seed {
  position: relative; width: 104px; padding: 4px 6px 5px; text-align: center;
  background: #fffbe8; border: 4px solid #fff; border-radius: 18px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22), 0 8px 14px rgba(0, 0, 0, 0.25); line-height: 1.05;
  transition: transform 0.15s, filter 0.2s, opacity 0.2s;
}
.seed .key { position: absolute; left: -6px; top: -8px; width: 26px; height: 26px; border-radius: 9px; background: var(--ink); color: #fff; font-weight: 800; font-size: 17px; line-height: 26px; border: 2px solid #fff; }
.seed .ico { display: block; font-size: 34px; line-height: 1.1; }
.seed .nm { display: block; font-size: 15px; font-weight: 700; }
.seed .cost { display: block; font-size: 17px; font-weight: 800; color: #b97800; }
.seed.no { filter: grayscale(1); opacity: 0.6; }
.seed.near { transform: translateY(-6px) scale(1.06); border-color: #b9f57d; }
.seed.pressed { animation: bump 0.3s ease-out; }

#hpbox { left: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 10px; }
#hpico { font-size: 34px; line-height: 1; }
.hp-track { position: relative; width: 190px; height: 28px; border-radius: 16px; background: #d9d2ea; border: 3px solid #fff; box-shadow: inset 0 3px 5px rgba(0,0,0,0.25), 0 0 0 2px rgba(0,0,0,0.12); overflow: hidden; }
#hpfill { height: 100%; width: 100%; background: linear-gradient(#8bff6a, #3fc21d); transition: width 0.2s, background 0.2s; }
#hpfill.mid { background: linear-gradient(#ffe36a, #f5a800); }
#hpfill.low { background: linear-gradient(#ff8a8a, #e53950); animation: low 0.6s infinite alternate; }
@keyframes low { to { filter: brightness(1.3); } }
#hptext { position: absolute; inset: 0; text-align: center; font-weight: 800; font-size: 18px; line-height: 22px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.45), 0 0 4px rgba(0,0,0,0.4); }

#weaponbox { right: 14px; bottom: 14px; width: 220px; padding: 6px 14px 8px; text-align: center; }
#weaponname { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--ink); }
#pips { display: flex; justify-content: center; gap: 4px; margin: 4px 0; }
#pips i { width: 17px; height: 12px; border-radius: 8px; background: #d9d2ea; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.12); }
#pips i.on { background: linear-gradient(#ffe36a, #f5a800); }
#upgtrack { height: 14px; border-radius: 9px; background: #d9d2ea; border: 3px solid #fff; box-shadow: inset 0 2px 3px rgba(0,0,0,0.25), 0 0 0 2px rgba(0,0,0,0.12); overflow: hidden; }
#upgfill { height: 100%; width: 0%; background: linear-gradient(#b9f57d, #5fd13a); transition: width 0.25s; }
#upgfill.max { background: linear-gradient(#ffe36a, #f5a800); }
#upgtext { font-size: 14px; font-weight: 700; color: #6c5a8f; margin-top: 2px; line-height: 1.1; }
#streak { font-size: 16px; font-weight: 800; color: #c1440e; line-height: 1.1; margin-top: 2px; }
#streak.hot { animation: bump 0.5s ease-out; }

#banner { top: 18%; left: 0; right: 0; text-align: center; opacity: 0; }
#banner.show { animation: banner 2.4s ease-out forwards; }
@keyframes banner {
  0% { opacity: 0; transform: scale(0.3) translateY(30px); }
  10% { opacity: 1; transform: scale(1.18); }
  18% { transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05) translateY(-20px); }
}
#bannertitle { display: inline-block; font-size: clamp(36px, 7vw, 68px); font-weight: 800; color: #fff; text-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 0 0 #000; -webkit-text-stroke: 3px var(--banner-ink, #e6a800); paint-order: stroke fill; letter-spacing: 1px; }
#bannersub { font-size: clamp(22px, 3.5vw, 34px); font-weight: 800; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,0.4); }
#banner.upgrade { --banner-ink: #e6a800; }
#banner.wave { --banner-ink: #6f35b5; }
#banner.good { --banner-ink: #3a9b22; }

#toast { bottom: 24%; left: 0; right: 0; text-align: center; font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,0.5), 0 0 12px rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.25s; }
#toast.on { opacity: 1; }

#downoverlay { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(40, 60, 40, 0.38); text-align: center; }
#downtitle { font-size: clamp(34px, 6vw, 60px); font-weight: 800; color: #fff; text-shadow: 0 5px 0 rgba(0,0,0,0.35); }
#downcount { font-size: clamp(60px, 12vw, 120px); font-weight: 800; color: var(--sun); text-shadow: 0 6px 0 rgba(0,0,0,0.35); line-height: 1; animation: bump 1s infinite; }
#downsub { font-size: 24px; font-weight: 700; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,0.4); }

#help { top: 74px; left: 12px; width: 330px; padding: 8px 14px 10px; font-size: 16px; font-weight: 600; line-height: 1.35; background: rgba(255, 253, 245, 0.92); border: 4px solid #fff; border-radius: 20px; box-shadow: 0 5px 0 rgba(0,0,0,0.2), 0 8px 18px rgba(0,0,0,0.25); transition: opacity 0.6s; }
#help h3 { margin: 0 0 2px; font-size: 20px; color: var(--green-d); }
#help b { background: var(--ink); color: #fff; border-radius: 7px; padding: 0 6px; font-size: 14px; }
#help .dim { opacity: 0.65; font-size: 14px; margin-top: 3px; }
#help.fade { opacity: 0; }
#help.hide { display: none; }
#hud.plant .zombieonly { display: none; }
#hud.zombie .plantonly { display: none; }
#hud.zombie #help h3 { color: var(--purple-d); }

#pausehint { bottom: 38%; left: 50%; transform: translateX(-50%); padding: 10px 28px 12px; text-align: center; font-size: 30px; font-weight: 800; color: #fff; background: rgba(43, 36, 56, 0.82); border: 4px solid #fff; border-radius: 24px; animation: bump 1.4s infinite; }
#pausehint small { display: block; font-size: 16px; font-weight: 700; opacity: 0.8; }
#mutebtn, #optbtn { right: 12px; top: 64px; width: 42px; height: 42px; border-radius: 50%; text-align: center; line-height: 38px; font-size: 22px; background: rgba(255, 253, 245, 0.9); border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,0.25); cursor: pointer; pointer-events: auto; }
#optbtn { top: 112px; }

#endscreen { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(30, 30, 60, 0.45); pointer-events: auto; }
#endtitle { font-size: clamp(44px, 9vw, 96px); font-weight: 800; color: #fff; -webkit-text-stroke: 5px var(--end-ink, #3a9b22); paint-order: stroke fill; text-shadow: 0 8px 0 rgba(0,0,0,0.3); animation: pop-in 0.6s cubic-bezier(.2, 1.4, .4, 1); }
#endscreen.plant { --end-ink: #3a9b22; }
#endscreen.zombie { --end-ink: #6f35b5; }
#endsub { font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,0.45); margin-top: 6px; }
#endcount { font-size: 28px; font-weight: 800; color: var(--sun); text-shadow: 0 3px 0 rgba(0,0,0,0.45); margin: 8px 0 14px; }
#endchange { pointer-events: auto; font: 800 22px var(--font); padding: 6px 22px 9px; color: #fff; background: linear-gradient(#b784f0, #8442d6); border: 0; border-bottom: 6px solid #5a2a9a; border-radius: 20px; cursor: pointer; }
#endchange:active { transform: translateY(3px); border-bottom-width: 3px; }

@media (max-height: 640px) {
  .card { padding: 10px 18px 10px; }
  .choice .big { font-size: 28px; }
  .choice .ds { display: none; }
  #play { font-size: 30px; }
  #help { display: none; }
}

/* ---------------- 2026-10 playtest additions ---------------- */

/* icy frost on the screen edges while a Snow Pea has slowed you */
#frost {
  inset: 0; opacity: 0; transition: opacity 0.35s ease-out;
  background:
    radial-gradient(ellipse at center, rgba(160, 225, 255, 0) 48%, rgba(150, 220, 255, 0.55) 82%, rgba(225, 248, 255, 0.85) 100%);
  box-shadow: inset 0 0 90px 24px rgba(190, 235, 255, 0.55);
}
#frost.on { opacity: 1; }

/* HEADSHOT! pop beside the crosshair */
#headshot {
  left: 50%; top: calc(50% - 150px); opacity: 0; white-space: nowrap; text-align: center;
  font-size: clamp(38px, 6vw, 70px); font-weight: 800; letter-spacing: 2px; color: #fff3a0;
  -webkit-text-stroke: 5px #e53935; paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 200, 40, 0.8);
  transform: translateX(-50%);
}
#headshot.pop { animation: headshot 0.85s ease-out forwards; }
@keyframes headshot {
  0% { opacity: 0; transform: translateX(-50%) scale(0.3) rotate(-6deg); }
  14% { opacity: 1; transform: translateX(-50%) scale(1.3) rotate(3deg); }
  28% { transform: translateX(-50%) scale(1) rotate(-2deg); }
  72% { opacity: 1; transform: translateX(-50%) scale(1) translateY(-8px); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.08) translateY(-34px); }
}
#hitmark.head::before, #hitmark.head::after { background: #ff5a36; width: 6px; height: 48px; top: -8px; left: 13px; }

/* the mower's own HP while you drive it */
#mowerbox { left: 14px; bottom: 84px; display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 10px; }
#mowerico { font-size: 30px; line-height: 1; }
#mowerfill { height: 100%; width: 100%; background: linear-gradient(#ffd27a, #ff9800); transition: width 0.2s, background 0.2s; }
#mowerfill.mid { background: linear-gradient(#ffe36a, #f5a800); }
#mowerfill.low { background: linear-gradient(#ff8a8a, #e53950); animation: low 0.6s infinite alternate; }
#mowertext { position: absolute; inset: 0; text-align: center; font-weight: 800; font-size: 18px; line-height: 22px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.45), 0 0 4px rgba(0,0,0,0.4); }

/* wheelbarrow hit points under the tool name */
#itemhp { position: relative; height: 18px; margin: 3px 0 2px; border-radius: 10px; background: #d9d2ea; border: 3px solid #fff; box-shadow: inset 0 2px 3px rgba(0,0,0,0.25), 0 0 0 2px rgba(0,0,0,0.12); overflow: hidden; }
#itemhpfill { height: 100%; width: 100%; background: linear-gradient(#e0b074, #b9803f); transition: width 0.2s; }
#itemhptext { position: absolute; inset: 0; text-align: center; font-weight: 800; font-size: 13px; line-height: 12px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.45); }