/* Dr. Mow — toy-ink HUD (template docs/06 §1) brightened toward Super Monkey
   Ball / Super Mario 3D World: cream pills with thick ink borders and hard
   shadows over a sky-blue world. Reserved colours: red = danger, green = good /
   mowed, yellow/gold = reward and the primary action. */
:root {
  --ink: #3b2e5a;
  --cream: #fffdf8;
  --sky: #5ec8ff;
  --sky-deep: #2f8fd8;
  --red: #ee4b5e;
  --green: #3ddc84;
  --grass: #5cc85a;
  --yellow: #ffd45e;
  --gold: #ffc53a;
  --orange: #ff8a2a;
  --purple: #6e5ac8;
  --safe-top: max(10px, env(safe-area-inset-top));
  --safe-bottom: max(12px, env(safe-area-inset-bottom));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--sky);
  font-family: "Trebuchet MS", "Avenir Next", system-ui, sans-serif; color: var(--ink);
}
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#game { touch-action: none; }
#overlay { pointer-events: none; }
.hidden { display: none !important; }
button { font: inherit; color: var(--ink); cursor: pointer; }

/* ---------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none;
  padding: var(--safe-top) max(10px, env(safe-area-inset-right)) var(--safe-bottom) max(10px, env(safe-area-inset-left)); }
.hud-top { display: flex; align-items: center; gap: 8px; }
.pill {
  flex: none; background: #fffdf8f0; border: 3px solid var(--ink); border-radius: 999px; padding: 3px 12px;
  font-weight: 900; font-size: 18px; display: flex; flex-direction: column; align-items: center; line-height: 1;
  box-shadow: 0 4px 0 var(--ink); font-variant-numeric: tabular-nums; min-width: 78px;
}
.pill .lbl, .mow .lbl { font-size: 10px; letter-spacing: 1.5px; opacity: .7; font-weight: 800; }
.pill .val { margin-top: 2px; }
.pill.over .val { color: #d4453a; }

/* The mowing meter: the game's one essential number, top centre. */
.mow {
  flex: 1 1 auto; min-width: 0; max-width: 420px; margin: 0 auto; position: relative;
  background: #fffdf8f0; border: 3px solid var(--ink); border-radius: 16px; padding: 4px 44px 6px 10px;
  box-shadow: 0 4px 0 var(--ink);
}
.mow-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.mow-head .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mow-head b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.mow-bar { position: relative; height: 12px; margin-top: 3px; border: 2px solid var(--ink); border-radius: 8px;
  background: repeating-linear-gradient(90deg, #3f9a45 0 6px, #368a3c 6px 12px); overflow: hidden; }
#mow-fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .12s linear;
  background: repeating-linear-gradient(90deg, #aee07a 0 10px, #86c95c 10px 20px); border-right: 2px solid var(--ink); }
.mow-bar i { position: absolute; top: 0; bottom: 0; width: 2px; background: #3b2e5a55; }
.mow.full { background: #fff4c7; }
.mow.full #mow-fill { background: linear-gradient(90deg, #ffe07a, var(--gold)); }
.mow.pop { animation: pop .35s ease-out; }
.mow .can { position: absolute; right: 6px; top: 50%; width: 30px; height: 33px; transform: translateY(-50%); }

.can { --can-fill: #d9d3e8; --can-ink: var(--ink); --can-x: #b9b1cf; }
.can.gold { --can-fill: var(--gold); --can-x: #fff0a8; }
.can.gold { filter: drop-shadow(0 0 6px #ffd24aaa); animation: pop .5s ease-out; }

.mini {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink);
  background: var(--cream); font-weight: 900; font-size: 16px; box-shadow: 0 3px 0 var(--ink);
  pointer-events: auto; touch-action: manipulation;
}
.mini:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

.hud-sub { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.chip { background: var(--ink); color: var(--cream); font-weight: 900; font-size: 12px; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 10px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lives { display: flex; gap: 4px; }
.life { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink); background: var(--orange);
  box-shadow: inset -3px -3px 0 #e0661a; }
.life.lost { background: #cfc8dd; box-shadow: none; opacity: .6; }
.life.pop { animation: lose .5s ease-out; }
.lives.last .life:not(.lost) { animation: pulse .45s infinite alternate; }

#toasts { position: absolute; left: 0; right: 0; top: 32%; text-align: center; }
.toast {
  display: inline-block; margin: 3px; padding: 6px 16px; border-radius: 14px; font-weight: 900; font-size: 22px;
  background: var(--yellow); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  animation: toast 1.6s ease-out forwards; white-space: nowrap;
}
.toast.good { background: #b9f5cf; } .toast.bad { background: #ffc4cc; } .toast.gold { background: linear-gradient(#fff3b0, var(--gold)); }
.toast.big { font-size: 40px; padding: 6px 22px; letter-spacing: 2px; }
.toast.title { font-size: 24px; background: var(--cream); }
.toast.title small { display: block; font-size: 13px; font-weight: 700; opacity: .75; letter-spacing: 0; }
@keyframes toast { 0% { transform: scale(.4); opacity: 0 } 12% { transform: scale(1.12); opacity: 1 }
  20% { transform: scale(1) } 80% { opacity: 1 } 100% { transform: translateY(-30px); opacity: 0 } }
@keyframes pop { 0% { transform: scale(1) } 40% { transform: scale(1.12) } 100% { transform: scale(1) } }
.mow .can.gold { animation: canpop .6s ease-out; }
@keyframes canpop { 0% { transform: translateY(-50%) scale(.5) } 50% { transform: translateY(-50%) scale(1.5) } 100% { transform: translateY(-50%) scale(1) } }
@keyframes pulse { to { transform: scale(1.15); } }
@keyframes lose { 0% { transform: scale(1.6); background: var(--red); } 100% { transform: scale(1); } }

#ach-toasts { position: absolute; left: 50%; translate: -50% 0; top: calc(var(--safe-top) + 96px); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ach-toast { display: flex; gap: 10px; align-items: center; background: var(--cream); border: 3px solid var(--ink);
  border-radius: 14px; padding: 6px 12px; box-shadow: 0 4px 0 var(--ink); animation: achin 3.2s ease-out forwards; }
.ach-toast .ico { font-size: 24px; }
.ach-toast small { display: block; font-size: 10px; letter-spacing: 1.5px; font-weight: 800; color: var(--purple); }
.ach-toast b { font-size: 15px; }
@keyframes achin { 0% { transform: translateY(-20px); opacity: 0 } 10% { transform: none; opacity: 1 } 85% { opacity: 1 } 100% { opacity: 0 } }

.hop-hint { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: calc(var(--safe-bottom) + 30px);
  width: 86px; height: 86px; border-radius: 50%; border: 3px dashed #3b2e5a55; display: grid; place-items: center;
  text-align: center; font-weight: 900; font-size: 12px; color: #3b2e5a88; line-height: 1.1; transition: opacity .4s; }
.hop-hint.flash { background: #fffdf866; }
@media (pointer: fine) { .hop-hint { display: none; } }

/* Chase-mode JUMP button: big, right thumb, acts on pointerdown (input.bindJump). */
.jump-btn { position: absolute; left: 50%; translate: -50% 0; bottom: calc(var(--safe-bottom) + 18px);
  /* bottom-centre and wide: either thumb reaches it without leaving its steering half */
  width: min(56vw, 300px); height: 92px; border-radius: 46px; border: 4px solid var(--ink); background: var(--yellow);
  font: inherit; font-weight: 900; font-size: 20px; letter-spacing: 1px; color: var(--ink);
  box-shadow: 0 6px 0 var(--ink); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.jump-btn.down { transform: translateY(4px) scale(.96); box-shadow: 0 2px 0 var(--ink); }
@media (pointer: fine) { .jump-btn { width: 200px; height: 64px; font-size: 16px; opacity: .85; } }
.mini.cam { font-size: 18px; }
.mini.cam.chase { background: var(--yellow); }

/* Settings: segmented toggles */
.setting { text-align: left; margin: 12px 0; }
.setting > b { display: block; font-size: 14px; margin-bottom: 6px; }
.seg { display: flex; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 3px 0 var(--ink); }
.seg button { flex: 1; border: none; background: var(--cream); padding: 9px 6px; font-weight: 900; font-size: 14px; touch-action: manipulation; }
.seg button + button { border-left: 3px solid var(--ink); }
.seg button.on { background: var(--yellow); }
.setting p { margin: 6px 2px 0; font-size: 12.5px; line-height: 1.35; opacity: .85; }

/* ---------------------------------------------------------------- screens */
.screen {
  position: fixed; inset: 0; display: flex; align-items: safe center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #dff6ff55, #2f8fd8aa); padding: calc(var(--safe-top) + 6px) 14px calc(var(--safe-bottom) + 6px);
  overflow-y: auto;
}
.screen.clear { background: transparent; }
.card {
  background: var(--cream); border: 4px solid var(--ink); border-radius: 24px; box-shadow: 0 8px 0 var(--ink);
  padding: 20px 20px 16px; max-width: 420px; width: 100%; text-align: center; margin: auto 0; animation: cardin .25s ease-out;
}
.card.wide { max-width: 640px; }
@keyframes cardin { from { transform: scale(.9); opacity: 0 } }
.card h1 { margin: 0; font-size: 34px; line-height: 1; color: var(--sky-deep); letter-spacing: 1px; }
.card h2 { margin: 0 0 8px; font-size: 26px; color: var(--purple); }
.card .tag { font-weight: 700; margin: 8px 0; }
.card .how { text-align: left; padding-left: 18px; margin: 8px 0 14px; font-size: 13.5px; line-height: 1.45; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.btn {
  font-weight: 900; font-size: 20px; padding: 10px 22px; border-radius: 16px; border: 3px solid var(--ink);
  background: var(--yellow); box-shadow: 0 5px 0 var(--ink); touch-action: manipulation;
}
.btn.alt { background: var(--cream); font-size: 17px; }
.btn.small { font-size: 14px; padding: 6px 12px; box-shadow: 0 3px 0 var(--ink); border-radius: 12px; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.small { font-size: 13px; opacity: .8; }

/* Wordmark */
.logo { font-size: 60px; font-weight: 900; line-height: .9; margin: 4px 0 2px; letter-spacing: 1px;
  color: var(--orange); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
.logo span { color: var(--grass); }
.logo-sub { font-weight: 900; font-size: 14px; letter-spacing: 4px; color: var(--sky-deep); text-transform: uppercase; }

/* Level select */
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.lvl { position: relative; border: 3px solid var(--ink); border-radius: 14px; background: #e8f7ff; padding: 8px 4px 6px;
  box-shadow: 0 4px 0 var(--ink); display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 92px; touch-action: manipulation; }
.lvl:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.lvl .n { font-size: 24px; font-weight: 900; line-height: 1; }
.lvl .nm { font-size: 10px; font-weight: 800; line-height: 1.1; min-height: 22px; }
.lvl .rk { font-size: 15px; font-weight: 900; }
.lvl .can { width: 18px; height: 20px; }
.lvl .meta { display: flex; align-items: center; gap: 4px; min-height: 20px; }
.lvl:disabled { background: #d6d0e2; opacity: .75; }
.lvl:disabled .n::after { content: ' 🔒'; font-size: 13px; }
.rank-S { color: #e0a100; } .rank-A { color: #2f9e62; } .rank-B { color: var(--sky-deep); } .rank-C { color: var(--purple); } .rank-D { color: #8a7fa3; }

/* Results */
.rank-big { font-size: 96px; font-weight: 900; line-height: .9; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--ink); animation: rankin .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes rankin { from { transform: scale(2.4) rotate(-12deg); opacity: 0 } }
.rows { margin: 10px 0 6px; text-align: left; font-weight: 800; }
.rows div { display: flex; justify-content: space-between; padding: 5px 4px; border-bottom: 2px dashed #3b2e5a22; font-variant-numeric: tabular-nums; }
.rows div span:last-child { color: var(--purple); }
.rows .total { font-size: 20px; border-bottom: none; }
.gold-award { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0; font-weight: 900;
  background: linear-gradient(#fff8d6, #ffe38a); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 10px; }
.gold-award .can { width: 34px; height: 38px; }
.gold-award.miss { background: #efeaf6; font-weight: 700; font-size: 13px; }

/* Achievements */
.ach-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; text-align: left; }
.ach { display: flex; gap: 8px; align-items: center; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 8px; background: #fff8e0; }
.ach .ico { font-size: 22px; }
.ach b { display: block; font-size: 13px; }
.ach span { font-size: 11px; line-height: 1.2; display: block; }
.ach.locked { background: #ece8f3; opacity: .7; }
.ach.locked .ico { filter: grayscale(1); opacity: .5; }

@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ach-list { grid-template-columns: 1fr; }
}
@media (max-height: 640px) {
  .card { padding: 12px 14px 10px; }
  .logo { font-size: 44px; }
  .card .how { font-size: 12px; line-height: 1.35; margin: 6px 0 8px; }
  .rank-big { font-size: 64px; }
  .lvl { min-height: 76px; padding: 4px; }
}
@media (max-width: 380px) {
  .pill { min-width: 64px; font-size: 15px; padding: 3px 8px; }
  .mow { padding-right: 38px; }
  .mow .can { width: 24px; height: 27px; }
}
.zoom-hint { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 40;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 12px; padding: 6px 12px; font-weight: 800; }
.tzg-zoomed .zoom-hint { display: block; }

/* Retro (PS1/N64) mode: the 3D canvas renders at ~240 lines; upscale with hard pixels. */
#game.retro { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------------------------------------------------------------- style meter + moé popups */
.style-meter { position: absolute; right: max(10px, env(safe-area-inset-right)); top: calc(var(--safe-top) + 92px);
  background: #fffdf8ee; border: 3px solid var(--ink); border-radius: 12px; padding: 3px 8px 5px; box-shadow: 0 3px 0 var(--ink);
  display: grid; grid-template-columns: auto auto; gap: 0 6px; align-items: baseline; min-width: 92px; }
.style-meter .lbl { font-size: 10px; letter-spacing: 1.5px; font-weight: 900; opacity: .7; }
.style-meter b { font-size: 16px; font-weight: 900; color: #e08a00; justify-self: end; font-variant-numeric: tabular-nums; }
.style-bar { grid-column: 1 / 3; height: 8px; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: #efe9f7; }
.style-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd45e, #ff8a2a, #ff5fa2); transition: width .15s linear; }
.style-meter.hot { animation: pulse .4s infinite alternate; }

.version { font-size: 11px; opacity: .6; margin-top: 8px; }

/* "Almost there" chip for trick achievements (shown past 50%) */
.ach-near { position: absolute; right: max(10px, env(safe-area-inset-right)); top: calc(var(--safe-top) + 146px);
  background: #fff8e0f0; border: 2px solid var(--ink); border-radius: 10px; padding: 3px 7px 4px; font-size: 11px; font-weight: 800;
  box-shadow: 0 2px 0 var(--ink); max-width: 170px; font-variant-numeric: tabular-nums; }
.ach-near .bar { height: 5px; margin-top: 3px; border-radius: 4px; background: #e8dfc4; overflow: hidden; }
.ach-near .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd45e, #ff8a2a); }
.ach-near.close { animation: pulse .5s infinite alternate; }

/* ---------------------------------------------------------------- level editor */
.editor { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #e9f6ff;
  padding: var(--safe-top) max(8px, env(safe-area-inset-right)) var(--safe-bottom) max(8px, env(safe-area-inset-left)); }
.ed-top { flex: none; display: flex; gap: 6px; align-items: center; }
.ed-top input { flex: 1; min-width: 0; font: inherit; font-weight: 900; font-size: 16px; padding: 7px 10px; border: 3px solid var(--ink); border-radius: 12px; background: var(--cream); color: var(--ink); }
.ed-stage { flex: 1 1 auto; min-height: 0; position: relative; margin: 6px 0; }
.ed-canvas { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border: 3px solid var(--ink); border-radius: 6px; box-shadow: 0 4px 0 var(--ink); touch-action: none; background: #cfe9ff; }
.ed-hint { flex: none; text-align: center; font-size: 12px; font-weight: 800; opacity: .8; min-height: 16px; }
.ed-tools { flex: none; display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; padding-top: 6px; }
.ed-tools button { border: 3px solid var(--ink); border-radius: 12px; background: var(--cream); font-weight: 800; font-size: 10px; padding: 4px 0 3px;
  display: flex; flex-direction: column; align-items: center; box-shadow: 0 3px 0 var(--ink); touch-action: manipulation; }
.ed-tools button span { font-size: 20px; line-height: 1.1; }
.ed-tools button.on { background: var(--yellow); }
@media (max-width: 520px) { .ed-tools { grid-template-columns: repeat(5, 1fr); } }
.lawn-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; text-align: left; max-height: 50vh; overflow-y: auto; }
.lawn-row { display: flex; align-items: center; gap: 6px; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 8px; background: #e8f7ff; }
.lawn-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lawn-row .btn { padding: 4px 9px; font-size: 13px; box-shadow: 0 2px 0 var(--ink); }

.pack-name { width: 100%; font: inherit; font-weight: 900; font-size: 16px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 12px; background: var(--cream); color: var(--ink); margin-top: 6px; }
.btn:disabled { opacity: .45; }

/* Drop-in animated WebP reaction icons (see ICONS.md) anchored to the farmer's head */
.icon-layer { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.icon-react { position: absolute; width: 76px; height: 76px; translate: -50% -50%; animation: iconpop 1.3s ease-out forwards; }
.icon-react.big { width: 120px; height: 120px; }
@keyframes iconpop { 0% { scale: .3; opacity: 0 } 12% { scale: 1.2; opacity: 1 } 22% { scale: 1 } 85% { opacity: 1 } 100% { scale: .6; opacity: 0 } }

/* ---------------------------------------------------------------- slow-mo */
/* Round button on the right, above the hop zone; its ring is the meter (conic gradient on --m). */
.slow-btn { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: calc(var(--safe-bottom) + 150px);
  width: 92px; height: 92px; border-radius: 50%; border: 4px solid var(--ink); padding: 7px; box-shadow: 0 4px 0 var(--ink);
  /* ring = meter: blue to 100%, then a gold second lap for what's banked beyond (up to 200%) */
  background: conic-gradient(#ffc53a calc(var(--m2, 0) * 1turn), transparent 0), conic-gradient(#7cc8ff calc(var(--m, 0) * 1turn), #e9e4f2 0);
  pointer-events: auto; touch-action: none; font: inherit; user-select: none; -webkit-user-select: none; }
.slow-btn span { display: grid; place-items: center; align-content: center; width: 100%; height: 100%; border-radius: 50%; background: #fffdf8; font-size: 30px; line-height: 1; }
.slow-btn small { font-size: 11px; font-weight: 900; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; }
.slow-btn.empty { opacity: .45; }
.slow-btn.on { background: conic-gradient(#ffc53a calc(var(--m2, 0) * 1turn), transparent 0), conic-gradient(#ff5fa2 calc(var(--m, 0) * 1turn), #e9e4f2 0); transform: scale(1.08); }
.slow-btn.on span { background: #ffe9f4; }
.slow-vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(ellipse at center, transparent 55%, #6b4bd566 100%); }
.slow-vignette.on { opacity: 1; }
body.chase .slow-btn { bottom: calc(var(--safe-bottom) + 124px); }

/* ---------------------------------------------------------------- gas gauge (bonus levels) */
.gas { display: flex; margin-top: 3px; align-items: center; gap: 4px; font-size: 13px; }
.gas-bar { flex: 1; height: 10px; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: #efe9f7; }
.gas-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5a4d, #ffb03a); transition: width .1s linear; }
.gas.low .gas-bar i { background: #ff3b4d; animation: pulse .25s infinite alternate; }
.gas.plus { animation: pop .35s ease-out; }
#hud.has-gas .style-meter { top: calc(var(--safe-top) + 120px); }
#hud.has-gas .ach-near { top: calc(var(--safe-top) + 174px); }

/* Level-select pack tabs */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; margin-top: 6px; scrollbar-width: none; }
.tab { flex: none; border: 3px solid var(--ink); border-radius: 12px; background: #fffdf8; font: inherit; font-weight: 900; font-size: 12px; padding: 6px 10px; box-shadow: 0 3px 0 var(--ink); color: var(--ink); }
.tab.on { background: var(--yellow); }

/* Line rating (pro): heat map + breakdown on the results card */
.line-rate { cursor: pointer; display: flex; gap: 10px; align-items: center; margin: 8px 0 2px; text-align: left; }
.line-rate canvas { position: static; inset: auto; width: 116px; height: 116px; border: 3px solid var(--ink); border-radius: 10px; flex: none; image-rendering: auto; }
.line-info { flex: 1; font-size: 11px; }
.line-info b { font-size: 15px; } .line-info small { display: block; opacity: .6; margin-bottom: 3px; }
.lr-row { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 4px; margin: 2px 0; font-weight: 800; }
.lr-row i { height: 7px; border-radius: 4px; background: #e8dfc4; overflow: hidden; }
.lr-row em { display: block; height: 100%; background: linear-gradient(90deg, #7cc8ff, #ffd45e, #ff8a2a); }

/* Results peek: card slides away so the orbiting overview shows */
#screen.peek > * { opacity: 0; transform: translateY(40px); pointer-events: none; transition: opacity .25s, transform .25s; }
#screen.peek { background: transparent; }

/* Gold cinematic: letterbox bars slide in over everything */
body::before, body::after { content: ''; position: fixed; left: 0; right: 0; height: 0; background: #120d20; z-index: 40; pointer-events: none; transition: height .35s ease; }
body::before { top: 0; } body::after { bottom: 0; }
body.cine::before, body.cine::after { height: 12vh; }
body.cine #hud > :not(#toasts), body.cine #overlay, body.cine .hop-hint { opacity: 0 !important; transition: opacity .2s; }
body.cine #toasts { top: auto; bottom: calc(12vh + 8px); z-index: 41; }

/* Garage */
.garage { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; max-height: 58vh; overflow-y: auto; padding: 2px; }
.mower-card { border: 3px solid var(--ink); border-radius: 12px; background: #fffdf8; padding: 8px; text-align: left; font: inherit; color: var(--ink); box-shadow: 0 3px 0 var(--ink); display: flex; flex-direction: column; gap: 3px; }
.mower-card.on { background: var(--yellow); }
.mower-card:disabled { background: #e3dded; opacity: .8; }
.mower-card b { font-size: 13px; } .mower-card small { font-size: 10px; line-height: 1.2; opacity: .8; }
.mower-card .sw { display: flex; gap: 3px; } .mower-card .sw i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink); }
.mower-card:disabled .sw i { filter: grayscale(1) brightness(1.3); }

/* 3D editor view fills the stage (overrides the global game-canvas rule) */
canvas.ed3d { position: absolute; inset: 0; width: 100%; height: 100%; border: 3px solid var(--ink); border-radius: 6px; touch-action: none; }
.ed-tools3d { grid-template-columns: repeat(10, 1fr); }
@media (max-width: 520px) { .ed-tools3d { grid-template-columns: repeat(5, 1fr); } }

/* Pause diorama: no modal. A status strip up top, buttons floating mid-board, drag anywhere else. */
.screen.pause-dio { display: block; background: transparent; touch-action: none; cursor: grab; }
.pause-top { position: absolute; top: calc(var(--safe-top) + 4px); right: max(10px, env(safe-area-inset-right)); text-align: right; background: #fffdf8ee; border: 3px solid var(--ink);
  border-radius: 14px; box-shadow: 0 3px 0 var(--ink); padding: 6px 12px; font-weight: 900; font-size: 14px; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.pause-top div { font-weight: 800; font-size: 12px; opacity: .8; }
.pause-top { max-width: calc(100% - 150px) !important; }
.pause-logo { position: absolute; top: calc(var(--safe-top) + 8px); left: max(12px, env(safe-area-inset-left)); font-size: 28px; -webkit-text-stroke: 2px var(--ink); text-shadow: 0 3px 0 var(--ink); margin: 0; transform: rotate(-4deg); pointer-events: none; }
.pause-btns .btn { white-space: nowrap; }
.pause-btns .rate .btn.on { background: var(--yellow); } .pause-btns .rate .btn.on.bad { background: #ffc2cc; }
.lvl .fb { position: absolute; top: 3px; right: 5px; font-size: 12px; }
.note-box { width: 100%; min-height: 140px; font: inherit; font-size: 14px; border: 3px solid var(--ink); border-radius: 12px; padding: 8px; background: #fffdf8; color: var(--ink); resize: vertical; }
.pause-btns { position: absolute; left: 50%; top: 74%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: auto; }
.pause-btns .row { display: flex; gap: 8px; }
.pause-btns .btn { box-shadow: 0 5px 0 var(--ink), 0 8px 20px #0003; }
.pause-hint { position: absolute; bottom: calc(var(--safe-bottom) + 10px); left: 0; right: 0; text-align: center; font-weight: 800; font-size: 12px; color: #fff; text-shadow: 0 1px 3px #0008; pointer-events: none; }

.line-rate::after { content: 'Tap for details ›'; font-size: 10px; font-weight: 900; opacity: .6; align-self: flex-end; white-space: nowrap; }
/* Line detail modal */
.modal { position: fixed; inset: 0; z-index: 60; background: #1b1430aa; display: flex; align-items: safe center; justify-content: center; padding: 12px; overflow-y: auto; }
.line-detail h2 small { font-size: 12px; opacity: .6; font-weight: 800; }
.line-detail canvas { position: static; width: min(80vw, 360px); height: min(80vw, 360px); border: 3px solid var(--ink); border-radius: 12px; display: block; margin: 6px auto; }
.line-detail .legend { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-wrap: wrap; }
.line-detail .legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.legend .c1 { background: #3cc8f0; } .legend .c2 { background: #e8ff60; } .legend .c3 { background: #ff4a00; }
.ld-row { text-align: left; margin: 8px 0; }
.ld-head { display: flex; justify-content: space-between; font-size: 13px; }
.ld-row > i { display: block; height: 8px; border-radius: 4px; background: #e8dfc4; overflow: hidden; margin: 3px 0; }
.ld-row em { display: block; height: 100%; background: linear-gradient(90deg, #7cc8ff, #ffd45e, #ff8a2a); }
.ld-row small { display: block; font-size: 11px; opacity: .8; } .ld-row .tip { opacity: .65; }

/* Replay */
.replay-bar { position: fixed; top: calc(var(--safe-top) + 6px); left: 50%; translate: -50% 0; z-index: 50; display: flex; align-items: center; gap: 8px;
  background: #fffdf8ee; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); padding: 4px 6px 4px 10px; white-space: nowrap; }
.replay-bar .rec { font-weight: 900; color: #e8394d; animation: pulse .6s infinite alternate; }
.replay-bar b { font-size: 13px; }
.ed-top [data-ed=notes].on { background: var(--yellow); }
/* Narrow screens: the lawn name gets its own row under the editor's top buttons */
@media (max-width: 520px) { .ed-top { flex-wrap: wrap; } .ed-top input { order: 10; flex: 1 1 100%; } }
.line-title { font-weight: 900; font-style: italic; color: var(--purple); margin: 2px 0 4px; }
.line-detail .line-title { font-size: 18px; } .line-detail .line-title small { font-size: 12px; color: var(--ink); opacity: .8; }
.pause-top { white-space: normal !important; max-width: calc(100% - 175px) !important; }
.daynight { display: flex; justify-content: center; gap: 6px; margin: 4px 0 0; }
.daynight button { font: inherit; font-weight: 900; font-size: 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fffdf8; padding: 4px 12px; color: var(--ink); }
.daynight button.on { background: #2c2a66; color: #fff; }
.lvl.night { background: #d8d4f4; }

/* ---------------------------------------------------------------- toy logo */
@font-face { font-family: 'Lilita One'; src: url('../assets/fonts/LilitaOne.ttf') format('truetype'); font-display: swap; } /* OFL, bundled */
.logo.toy { font-family: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif; font-weight: 400; font-size: 76px; line-height: 1;
  letter-spacing: 2px; position: relative; display: inline-flex; gap: 1px; transform: rotate(-4deg); margin: 6px 0 4px;
  -webkit-text-stroke: 0; text-shadow: none; overflow: visible; }
.logo.toy span { display: inline-block; color: var(--c); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink), 0 6px 0 var(--ink), 0 9px 0 #2a1f44, 0 12px 14px #0005; /* chunky 3D extrude */
  animation: toybounce 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); transform-origin: 50% 90%; }
.logo.toy .l0 { --c: #ff5a4d; } .logo.toy .l1 { --c: #ff9a2a; } .logo.toy .l2 { --c: #ffd23a; transform: translateY(6px); }
.logo.toy .l3 { --c: #5fd35a; } .logo.toy .l4 { --c: #39b8ff; } .logo.toy .l5 { --c: #b77cff; }
.logo.toy span { background: none; }
@keyframes toybounce { 0%, 70%, 100% { transform: translateY(0) rotate(0) scale(1); } 78% { transform: translateY(-12px) rotate(-6deg) scale(1.08, .94); } 86% { transform: translateY(2px) scale(1.06, .9); } 92% { transform: translateY(-3px) rotate(3deg); } }
/* a glint sweeping across the letters */
.logo.toy .shine { position: absolute; inset: -10px -20px; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent 40%, #fffc 48%, #fff0 56%); background-size: 250% 100%; animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -60% 0; } }
.logo.toy.pause-logo { font-size: 34px; position: absolute; }
.logo.toy.pause-logo span { -webkit-text-stroke: 3px var(--ink); text-shadow: 0 2px 0 var(--ink), 0 4px 0 var(--ink), 0 6px 8px #0005; }
@media (max-height: 560px) { .logo.toy { font-size: 52px; } }
@media (prefers-reduced-motion: reduce) { .logo.toy span, .logo.toy .shine { animation: none; } }