:root {
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  color: #173b2b;
  background: #203d2d;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --pine: #173b2b;
  --pine-dark: #102e22;
  --cream: #fff9eb;
  --paper: #f5efdf;
  --butter: #e7ec99;
  --grass: #a2c25f;
  --orange: #dc744b;
  --line: rgba(25, 62, 44, 0.17);
  --serif: "Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body, #app { width: 100%; height: 100%; margin: 0; }

body { overflow: hidden; }

button { font: inherit; cursor: pointer; }

button:focus-visible { outline: 3px solid #e3a05e; outline-offset: 4px; }

[hidden] { display: none !important; }

#world { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(#9fcbcc 0 49%, #6eab54 50%); }
#world canvas { display: block; width: 100%; height: 100%; }

.world-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(18, 49, 35, .20), transparent 24%, transparent 63%, rgba(13, 39, 27, .32)), radial-gradient(ellipse at center, transparent 38%, rgba(14, 37, 26, .12));
  z-index: 2;
}

#reticle {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}

.reticle-ring { position: absolute; inset: 8px; border: 1.5px solid rgba(255, 255, 238, .9); border-radius: 50%; }
.reticle-ring::before, .reticle-ring::after { content: ""; position: absolute; background: rgba(255, 255, 238, .9); }
.reticle-ring::before { width: 1px; height: 5px; left: calc(50% - .5px); top: -8px; box-shadow: 0 31px rgba(255, 255, 238, .9); }
.reticle-ring::after { height: 1px; width: 5px; top: calc(50% - .5px); left: -8px; box-shadow: 31px 0 rgba(255, 255, 238, .9); }
.reticle-dot { position: absolute; width: 4px; height: 4px; left: 17px; top: 17px; border-radius: 50%; background: #fffef0; }

.hud { position: fixed; inset: 0; z-index: 10; color: var(--pine); pointer-events: none; }
.hud-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px 28px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fffced; text-shadow: 0 2px 12px rgba(24, 53, 36, .5); }
.brand-symbol { position: relative; width: 38px; height: 38px; border: 1.5px solid currentColor; border-radius: 50%; display: inline-block; transform: rotate(-20deg); }
.brand-symbol i { position: absolute; width: 2px; height: 20px; background: currentColor; bottom: 7px; border-radius: 2px; transform-origin: bottom; }
.brand-symbol i:nth-child(1) { left: 11px; transform: rotate(-29deg); }
.brand-symbol i:nth-child(2) { left: 18px; height: 23px; }
.brand-symbol i:nth-child(3) { left: 25px; transform: rotate(29deg); }
.brand-words { display: flex; flex-direction: column; line-height: 1; gap: 5px; }
.brand-words strong { font-size: 17px; letter-spacing: .22em; font-weight: 800; }
.brand-words small { font-size: 9px; letter-spacing: .23em; font-weight: 700; }
.hud-top-right { display: flex; align-items: flex-start; gap: 12px; }
.day-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 15px; color: #fff8dd; border: 1px solid rgba(255, 255, 236, .5); border-radius: 999px; background: rgba(20, 62, 40, .45); backdrop-filter: blur(10px); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .09em; white-space: nowrap; }
.day-chip-sun { width: 11px; height: 11px; border-radius: 50%; background: #f6dc8b; box-shadow: 0 0 0 3px rgba(246, 220, 139, .25); }
.money-card { min-width: 162px; padding: 12px 17px 10px; border-radius: 12px; background: var(--cream); box-shadow: 0 9px 28px rgba(23, 51, 32, .17); border: 1px solid rgba(255, 255, 255, .6); }
.hud-label { display: block; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .14em; line-height: 1.2; color: #6a765f; }
.money-line { display: flex; align-items: baseline; gap: 3px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.money-sign { font-family: var(--serif); font-size: 24px; font-weight: 700; color: #608b4d; }
.money-line strong { font-family: var(--serif); font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.04em; }

.hud-bottom { position: absolute; left: 24px; right: 24px; bottom: 75px; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.45fr) minmax(230px, 1fr); align-items: end; gap: 12px; }
.tool-card, .field-card, .upgrade-card { min-height: 138px; padding: 17px 19px; background: rgba(255, 250, 236, .94); border: 1px solid rgba(255, 255, 245, .9); border-radius: 14px; box-shadow: 0 12px 35px rgba(17, 47, 25, .20); backdrop-filter: blur(15px); }
.card-topline, .field-card-heading, .upgrade-card-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tool-level { font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #758c61; }
.tool-card h2 { margin: 8px 0 0; font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.03; letter-spacing: -.04em; }
.tool-card p { margin: 5px 0 0; color: #64725c; font-size: 12px; line-height: 1.3; }
.mow-indicator { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; padding: 6px 9px; border-radius: 999px; background: #e9edcb; color: #405e37; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.mow-indicator-dot { width: 6px; height: 6px; background: #78a04c; border-radius: 50%; box-shadow: 0 0 0 3px rgba(120, 160, 76, .17); }
.field-card { position: relative; padding: 19px 22px 17px; }
.field-card-heading { align-items: end; }
.field-card-heading strong { display: block; margin-top: 5px; font-family: var(--serif); font-size: 24px; line-height: 1; letter-spacing: -.025em; }
.field-percentage { font-family: var(--serif); font-size: 43px; font-weight: 700; line-height: .9; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.progress-track { display: block; width: 100%; height: 12px; margin: 23px 0 7px; padding: 2px; border: 1px solid #d0d4a9; border-radius: 999px; background: #e1e6b8; overflow: hidden; }
#progress-fill { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #719b4c, #a4c762); transition: width .45s ease; }
.field-caption { font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .16em; color: #78816a; }
.upgrade-card-main { align-items: baseline; margin-top: 9px; }
.upgrade-card-main strong { font-family: var(--serif); font-size: 24px; line-height: 1; letter-spacing: -.025em; }
.upgrade-card-main span { flex: none; color: #668b4d; font-family: var(--mono); font-size: 13px; font-weight: 800; }
.shop-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 14px; padding: 9px 12px; border: 0; border-radius: 7px; background: var(--pine); color: #fff9e8; font-size: 12px; font-weight: 750; pointer-events: auto; transition: background .18s ease, transform .18s ease; }
.shop-toggle:hover { background: #2d6040; transform: translateY(-2px); }
.shop-toggle span { font-size: 17px; line-height: .8; }
.control-strip { position: absolute; bottom: 0; left: 0; right: 0; min-height: 55px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 22px; padding: 10px 24px; background: rgba(17, 49, 33, .84); border-top: 1px solid rgba(255, 255, 220, .17); color: #eff3d7; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; backdrop-filter: blur(13px); }
.control-strip > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 19px; padding: 0 4px; border: 1px solid rgba(239, 243, 215, .53); border-radius: 3px; color: inherit; font: inherit; letter-spacing: 0; }
.mouse-icon { position: relative; display: inline-block; width: 13px; height: 19px; border: 1px solid currentColor; border-radius: 8px; }
.mouse-icon::after { content: ""; position: absolute; width: 1px; height: 6px; top: 0; left: 5px; background: currentColor; }
.mouse-icon-filled::before { content: ""; position: absolute; width: 5px; height: 5px; top: 2px; left: 1px; border-radius: 5px 0 0 0; background: #e6ed9b; }

.toast-stack { position: fixed; z-index: 90; right: 24px; top: 111px; display: grid; gap: 8px; pointer-events: none; }
.toast, .toast-item { max-width: 280px; padding: 11px 15px; border: 1px solid rgba(255, 255, 236, .9); border-radius: 10px; background: rgba(255, 249, 231, .96); color: var(--pine); box-shadow: 0 8px 22px rgba(18, 44, 27, .2); font-size: 13px; font-weight: 700; animation: toast-in .28s ease both; }
.floaters { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.floater, .earning-floater { position: absolute; color: #fffbe4; text-shadow: 0 2px 5px rgba(22, 58, 35, .85); font-family: var(--serif); font-size: 28px; font-weight: 700; animation: float-up 1.1s ease-out forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float-up { from { opacity: 0; transform: translateY(12px) scale(.9); } 25% { opacity: 1; } to { opacity: 0; transform: translateY(-42px) scale(1.06); } }

.overlay { position: fixed; inset: 0; z-index: 30; }
.start-screen { z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; padding: 28px; background: rgba(10, 35, 25, .78); backdrop-filter: blur(14px); }
.start-frame { display: grid; grid-template-columns: 1.1fr .9fr; width: min(1040px, 100%); min-height: min(620px, calc(100vh - 105px)); overflow: hidden; border: 1px solid rgba(255, 253, 224, .35); border-radius: 12px; background: var(--cream); box-shadow: 0 35px 90px rgba(4, 24, 13, .45); }
.start-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(30px, 5vw, 66px); }
.start-masthead { width: 100%; display: flex; align-items: center; gap: 11px; color: var(--pine); font-family: var(--mono); font-size: 10px; font-weight: 900; letter-spacing: .13em; white-space: nowrap; }
.start-masthead-mark { font-size: 27px; line-height: .6; font-family: var(--serif); }
.start-masthead-line { flex: 1; height: 1px; background: #bdc5a3; }
.eyebrow { margin: 0; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .15em; line-height: 1.6; }
.start-copy > .eyebrow { margin-top: auto; color: #839162; }
.start-copy h1 { margin: 18px 0 17px; font-family: var(--serif); font-size: clamp(62px, 6.5vw, 98px); font-weight: 700; line-height: .88; letter-spacing: -.07em; }
.start-copy h1 em, .pause-card h2 em { color: #7b9d55; font-weight: 400; }
.start-intro { max-width: 390px; margin: 0; color: #5b6f5c; font-family: var(--serif); font-size: 19px; line-height: 1.4; }
.primary-button { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-width: 241px; margin-top: 33px; padding: 17px 21px; border: 0; border-radius: 7px; background: var(--pine); color: #fff9e8; font-size: 14px; font-weight: 800; box-shadow: 0 7px 0 #a5b76e; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.primary-button:hover { transform: translateY(3px); box-shadow: 0 4px 0 #a5b76e; background: #285b3f; }
.primary-button:active { transform: translateY(7px); box-shadow: 0 0 0 #a5b76e; }
.primary-button span { font-size: 23px; line-height: .7; font-weight: 400; }
.start-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 40px; color: #889779; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.start-controls b { color: #c6cdab; }
.start-art { position: relative; min-height: 530px; overflow: hidden; background: #a4c6b1; }
.art-sky { position: absolute; inset: 0 0 38%; background: linear-gradient(#92b8b5, #d9d5a3); }
.art-sun { position: absolute; top: 15%; left: 24%; width: 145px; height: 145px; border-radius: 50%; background: #f7e5ab; box-shadow: 0 0 0 26px rgba(255, 240, 182, .17), 0 0 0 55px rgba(255, 240, 182, .12); }
.art-horizon { position: absolute; bottom: -16px; left: -10%; width: 120%; height: 78px; border-radius: 50% 50% 0 0; background: #5b905c; }
.art-field { position: absolute; inset: 53% -35% -35%; transform: perspective(350px) rotateX(22deg); overflow: hidden; background: repeating-linear-gradient(98deg, #6f9e54 0 41px, #84ac5b 41px 88px, #a6ba67 88px 110px, #5e9255 110px 154px); }
.art-field::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(31, 81, 42, .18) 0 2px, transparent 2px 22px); }
.art-field span { position: absolute; bottom: 0; width: 3px; height: 80px; background: #e1d68e; transform: rotate(-14deg); box-shadow: 12px 7px #dae09a, 21px -11px #dae09a, 32px 9px #e1d68e; opacity: .55; }
.art-field span:nth-child(1) { left: 8%; bottom: 18%; }
.art-field span:nth-child(2) { left: 24%; bottom: 3%; transform: scale(.8) rotate(-19deg); }
.art-field span:nth-child(3) { left: 36%; bottom: 17%; transform: scale(.65) rotate(8deg); }
.art-field span:nth-child(4) { left: 55%; bottom: 5%; transform: scale(.9) rotate(12deg); }
.art-field span:nth-child(5) { left: 68%; bottom: 17%; transform: scale(.55) rotate(-5deg); }
.art-field span:nth-child(6) { left: 83%; bottom: 8%; transform: scale(.8) rotate(8deg); }
.art-field span:nth-child(7) { left: 92%; bottom: 23%; transform: scale(.5) rotate(-10deg); }
.art-stamp { position: absolute; right: 8%; top: 9%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 147px; height: 147px; padding: 19px; border: 1.5px dashed rgba(30, 76, 48, .72); border-radius: 50%; background: rgba(246, 237, 201, .87); color: #345d3d; text-align: center; transform: rotate(14deg); box-shadow: 0 3px 15px rgba(45, 86, 51, .1); }
.art-stamp span, .art-stamp small { font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.art-stamp strong { margin: 7px 0; font-family: var(--serif); font-size: 22px; line-height: .95; letter-spacing: -.05em; }
.art-caption { position: absolute; bottom: 21px; left: 26px; right: 26px; color: #f6f5d6; font-family: var(--serif); font-size: 14px; font-style: italic; text-align: center; text-shadow: 0 2px 8px rgba(21, 53, 30, .6); }
.start-footer { margin: 0; color: #e6edce; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .19em; text-align: center; }
.start-footer span { margin: 0 9px; font-size: 14px; vertical-align: -2px; }

.shop-overlay { z-index: 70; display: flex; justify-content: flex-end; }
.shop-backdrop { position: absolute; inset: 0; background: rgba(13, 36, 24, .61); backdrop-filter: blur(7px); }
.shop-sheet { position: relative; display: flex; flex-direction: column; width: min(485px, 100%); height: 100%; overflow-y: auto; padding: 31px 33px 20px; background: var(--cream); box-shadow: -24px 0 70px rgba(4, 24, 12, .35); }
.shop-header { display: flex; justify-content: space-between; align-items: start; gap: 15px; }
.shop-header .eyebrow { color: #859366; }
.shop-header h2 { margin: 8px 0 0; font-family: var(--serif); font-size: 48px; font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.period { color: #d17953; }
.icon-button { display: grid; place-items: center; flex: none; width: 37px; height: 37px; padding: 0; border: 1px solid #cbd3bb; border-radius: 50%; background: transparent; color: var(--pine); font-size: 27px; font-weight: 300; line-height: 1; transition: background .18s ease, transform .18s ease; }
.icon-button:hover { background: #e6eac9; transform: rotate(90deg); }
.shop-wallet { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; padding: 14px 17px; background: #e7edcf; border: 1px solid #d7deba; border-radius: 9px; }
.shop-wallet > span:first-child { font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .13em; color: #567049; }
.shop-wallet strong { font-family: var(--serif); font-size: 29px; line-height: 1; letter-spacing: -.04em; }
.shop-wallet strong span { font: inherit; letter-spacing: inherit; color: inherit; }
.shop-intro { display: flex; gap: 17px; align-items: start; margin: 23px 0 15px; border-bottom: 1px solid var(--line); }
.shop-intro span { flex: none; margin-top: 3px; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #82926b; }
.shop-intro p { margin: 0 0 18px; font-family: var(--serif); color: #506553; font-size: 17px; line-height: 1.3; }
.shop-items { display: grid; gap: 10px; }
.shop-items > * { padding: 14px 15px; border: 1px solid #d5dcc4; border-radius: 9px; background: #fbf8ea; }
.shop-item, .upgrade-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shop-item h3, .upgrade-item h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 22px; line-height: 1; letter-spacing: -.03em; }
.shop-item p, .upgrade-item p { margin: 0; color: #718067; font-size: 11px; line-height: 1.35; }
.shop-items button { flex: none; padding: 9px 13px; border: 1px solid var(--pine); border-radius: 5px; background: var(--pine); color: #fff9e8; font-size: 11px; font-weight: 800; transition: background .15s ease, transform .15s ease; }
.shop-items button:hover:not(:disabled) { background: #326344; transform: translateY(-1px); }
.shop-items button:disabled { cursor: default; border-color: #ced5c2; background: #e8ebdc; color: #84937d; }
.shop-item.is-owned, .shop-item.owned, .upgrade-item.is-owned { border-color: #c3d5a7; background: #ecf0dc; }
.shop-item.is-next, .upgrade-item.is-next { border-color: #8da968; box-shadow: inset 3px 0 #83aa5e; }
.shop-footnote { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: auto; padding-top: 20px; color: #8b9b79; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-align: center; }
.shop-footnote-star { font-family: var(--serif); font-size: 16px; }

.pause-screen { z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(10, 35, 25, .73); backdrop-filter: blur(12px); }
.pause-card { display: flex; flex-direction: column; align-items: center; width: min(430px, 100%); padding: 32px 35px 38px; border: 1px solid rgba(255, 255, 235, .6); border-radius: 11px; background: var(--cream); text-align: center; box-shadow: 0 25px 75px rgba(7, 27, 15, .35); }
.pause-flower { font-family: var(--serif); font-size: 44px; line-height: 1; color: #8aa663; }
.pause-card .eyebrow { margin-top: 23px; color: #829267; }
.pause-card h2 { margin: 13px 0 14px; font-family: var(--serif); font-size: 62px; letter-spacing: -.07em; line-height: .91; }
.pause-card p:not(.eyebrow) { max-width: 260px; margin: 0; color: #65745c; font-family: var(--serif); font-size: 18px; line-height: 1.35; }
.pause-card .primary-button { min-width: 240px; margin-top: 25px; }
.pause-hint { margin-top: 24px; color: #88977b; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .13em; }

@media (max-width: 950px) {
  .day-chip { display: none; }
  .hud-bottom { grid-template-columns: minmax(190px, 1fr) minmax(230px, 1.3fr) minmax(190px, 1fr); gap: 8px; left: 14px; right: 14px; }
  .tool-card, .field-card, .upgrade-card { padding: 14px; }
  .tool-card h2 { font-size: 25px; }
  .field-card-heading strong, .upgrade-card-main strong { font-size: 20px; }
  .field-percentage { font-size: 36px; }
  .control-strip { gap: 8px 13px; }
  .start-frame { grid-template-columns: 1.2fr .8fr; }
}

@media (max-width: 700px) {
  .hud-top { padding: 14px; }
  .brand-symbol { width: 30px; height: 30px; }
  .brand-symbol i { transform: scale(.75); bottom: 2px; }
  .brand-words strong { font-size: 12px; }
  .brand-words small { font-size: 7px; }
  .money-card { min-width: 100px; padding: 9px 11px; }
  .money-line strong { font-size: 26px; }
  .money-sign { font-size: 19px; }
  .hud-label { font-size: 8px; }
  .hud-bottom { bottom: 55px; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .tool-card { grid-column: 1 / -1; min-height: 0; padding: 11px 13px; }
  .tool-card h2 { margin-top: 4px; font-size: 23px; }
  .tool-card p { display: none; }
  .mow-indicator { margin-top: 5px; padding: 4px 7px; font-size: 8px; }
  .field-card, .upgrade-card { min-height: 105px; padding: 12px; }
  .field-card-heading strong { display: none; }
  .field-percentage { font-size: 29px; }
  .progress-track { margin: 18px 0 6px; }
  .field-caption { font-size: 7px; }
  .upgrade-card-main { margin-top: 5px; display: block; }
  .upgrade-card-main strong { display: block; font-size: 19px; }
  .upgrade-card-main span { display: block; margin-top: 3px; font-size: 10px; }
  .shop-toggle { margin-top: 7px; padding: 6px 9px; font-size: 10px; }
  .control-strip { min-height: 43px; justify-content: flex-start; flex-wrap: nowrap; gap: 16px; overflow-x: auto; padding: 8px 14px; scrollbar-width: none; }
  .control-strip::-webkit-scrollbar { display: none; }
  .control-strip > span { font-size: 8px; }
  .control-strip kbd { height: 17px; min-width: 18px; }
  .toast-stack { right: 10px; top: 76px; }
  .start-screen { padding: 14px; }
  .start-frame { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 60px); overflow-y: auto; }
  .start-copy { min-height: 495px; padding: 27px; }
  .start-copy > .eyebrow { margin-top: 55px; }
  .start-copy h1 { font-size: clamp(58px, 11vw, 75px); }
  .start-intro { font-size: 17px; }
  .start-art { display: none; }
  .start-controls { padding-top: 40px; }
  .start-footer { font-size: 8px; letter-spacing: .08em; }
  .shop-sheet { padding: 24px 20px 17px; }
}

@media (max-height: 620px) and (min-width: 701px) {
  .hud-bottom { bottom: 55px; }
  .tool-card, .field-card, .upgrade-card { min-height: 113px; padding: 11px 14px; }
  .tool-card h2 { font-size: 24px; }
  .mow-indicator { margin-top: 6px; }
  .progress-track { margin-top: 12px; }
  .control-strip { min-height: 45px; }
  .start-frame { min-height: 0; height: calc(100vh - 65px); }
  .start-copy { padding: 30px 40px; }
  .start-copy h1 { font-size: 66px; }
  .start-copy > .eyebrow { margin-top: 28px; }
  .start-controls { padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* The field stays in the foreground; gameplay information lives at the edges. */
.start-name-label { display: block; margin-top: 25px; color: #667a5c; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.start-name-input { width: min(290px, 100%); margin-top: 7px; padding: 11px 13px; border: 1px solid #b6c5aa; border-radius: 6px; background: #fffef3; color: var(--pine); font: 700 15px "Avenir Next", Avenir, "Segoe UI", sans-serif; }
.start-name-input:focus, .field-chat input:focus { outline: 2px solid #a7c96f; outline-offset: 2px; }
.start-name-input + .primary-button { margin-top: 18px; }
.player-name-tags { position: fixed; inset: 0; z-index: 11; overflow: hidden; pointer-events: none; }
.player-name-tag { position: absolute; top: 0; left: 0; padding: 4px 9px; border: 1px solid rgba(255,255,229,.42); border-radius: 5px; background: rgba(11,37,30,.76); color: #fff9e8; font: 800 11px var(--mono); white-space: nowrap; text-shadow: 0 1px 3px #14301f; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.player-name-tag[hidden] { display: none; }
.field-chat { position: fixed; z-index: 22; left: 20px; bottom: 230px; width: min(390px, calc(100vw - 40px)); pointer-events: none; color: #fff9e8; font: 12px "Avenir Next", Avenir, "Segoe UI", sans-serif; }
.chat-log { display: flex; flex-direction: column; justify-content: end; gap: 4px; min-height: 28px; max-height: 154px; overflow-y: auto; }
.chat-line { width: fit-content; max-width: 100%; padding: 4px 7px; border-radius: 4px; background: rgba(12, 35, 27, .73); overflow-wrap: anywhere; line-height: 1.3; text-shadow: 0 1px 2px #12281a; transition: opacity 1.5s; }
.chat-line strong { color: #cfe69e; }
.chat-line.is-faded { opacity: 0; }
.field-chat.is-open { pointer-events: auto; }
.field-chat.is-open .chat-line { opacity: 1; }
.chat-form { margin-top: 8px; padding: 8px; border: 1px solid rgba(230,241,210,.36); border-radius: 7px; background: rgba(10,34,26,.88); box-shadow: 0 7px 22px rgba(0,0,0,.24); }
.chat-form[hidden] { display: none; }
.chat-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.chat-heading label { color: #bfd59f; font: 800 9px var(--mono); letter-spacing: .1em; white-space: nowrap; }
.chat-heading input { min-width: 0; flex: 1; padding: 4px 6px; border: 1px solid rgba(230,241,210,.3); border-radius: 3px; background: rgba(255,255,241,.95); color: #193b29; font-size: 12px; font-weight: 700; }
.chat-heading button { border: 0; background: none; color: #fff9e8; font-size: 20px; cursor: pointer; }
.chat-form form { display: flex; gap: 6px; }
.chat-form form input { flex: 1; min-width: 0; padding: 8px; border: 0; border-radius: 4px; background: #fffef3; color: #193b29; font-size: 12px; }
.chat-form form button { padding: 0 10px; border: 0; border-radius: 4px; background: #a4c975; color: #193b29; font: 800 10px var(--mono); cursor: pointer; }
.chat-hint { display: block; width: fit-content; margin-top: 5px; padding: 3px 6px; border-radius: 4px; background: rgba(11,37,30,.6); color: #e3ebd3; font: 800 9px var(--mono); letter-spacing: .08em; }
.field-chat.is-open .chat-hint { display: none; }
@media (max-width: 700px) { .field-chat { left: 12px; bottom: 218px; width: min(350px, calc(100vw - 24px)); } .chat-hint { display: none; } .start-name-label { margin-top: 18px; } }
.hud-top { padding: 16px 20px; align-items: flex-start; }
.brand { gap: 9px; }
.brand-symbol { width: 29px; height: 29px; }
.brand-symbol i { height: 15px; bottom: 5px; }
.brand-symbol i:nth-child(1) { left: 8px; }
.brand-symbol i:nth-child(2) { left: 13px; height: 18px; }
.brand-symbol i:nth-child(3) { left: 19px; }
.brand-words strong { font-size: 12px; letter-spacing: .24em; }
.brand-words small { font-size: 7px; letter-spacing: .2em; }
.hud-top-right { align-items: center; gap: 8px; }
.day-chip { padding: 8px 10px; border-color: rgba(255, 255, 240, .14); background: rgba(11, 37, 30, .62); font-size: 9px; }
.money-card { min-width: 112px; padding: 7px 12px; border: 1px solid rgba(255, 255, 240, .14); border-radius: 8px; background: rgba(11, 37, 30, .72); color: #fff9ec; box-shadow: 0 4px 18px rgba(8, 25, 17, .15); backdrop-filter: blur(12px); }
.money-card .hud-label { color: #afc9aa; font-size: 8px; }
.money-line { margin-top: 2px; }
.money-sign { color: #cfe692; font-size: 17px; }
.money-line strong { font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; font-size: 22px; letter-spacing: -.02em; }
.network-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 7px 5px 10px; border: 1px solid rgba(255, 255, 240, .14); border-radius: 8px; background: rgba(11, 37, 30, .72); color: #f4f7e9; box-shadow: 0 4px 18px rgba(8, 25, 17, .15); backdrop-filter: blur(12px); pointer-events: auto; }
.network-dot { display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #b6d779; box-shadow: 0 0 0 3px rgba(182, 215, 121, .13); }
.network-label { font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .09em; white-space: nowrap; }
.network-invite { flex: none; padding: 5px 7px; border: 1px solid rgba(178, 220, 176, .32); border-radius: 5px; background: rgba(168, 217, 148, .12); color: #d8eac1; font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.network-invite:hover { background: rgba(168, 217, 148, .24); }

.hud-bottom { left: 18px; right: 205px; bottom: 18px; display: flex; align-items: stretch; gap: 7px; width: min(770px, calc(100% - 223px)); max-width: none; }
.tool-card, .field-card, .upgrade-card { min-width: 0; min-height: 0; height: 103px; padding: 10px 12px; border: 1px solid rgba(255, 255, 235, .15); border-radius: 8px; background: rgba(10, 38, 31, .70); color: #fff9ec; box-shadow: 0 5px 23px rgba(5, 27, 18, .18); backdrop-filter: blur(12px); }
.tool-card { position: relative; flex: 1.12; }
.field-card { flex: 1; }
.upgrade-card { flex: 1.02; }
.tool-card .hud-label, .field-card .hud-label, .upgrade-card .hud-label { color: #b8cfae; font-size: 8px; letter-spacing: .12em; }
.tool-level { color: #cce1b6; font-size: 9px; }
.tool-card h2 { margin: 5px 0 0; font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; font-size: 18px; font-weight: 750; line-height: 1.05; letter-spacing: -.02em; }
.tool-card p { display: block; margin-top: 4px; overflow: hidden; color: #d6e3ca; font-size: 10px; line-height: 1.18; white-space: nowrap; text-overflow: ellipsis; }
.mow-indicator { margin-top: 6px; padding: 0; background: none; color: #bce6a5; font-size: 9px; }
.mow-indicator-dot { width: 5px; height: 5px; }
.field-card-heading { align-items: center; }
.field-card-heading strong { display: block; margin-top: 5px; color: #e8efdf; font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; font-size: 13px; font-weight: 650; letter-spacing: 0; }
.field-percentage { color: #d3ee9c; font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.04em; }
.progress-track { height: 7px; margin: 14px 0 5px; padding: 1px; border-color: rgba(212, 236, 185, .29); background: rgba(224, 239, 189, .14); }
#progress-fill { background: linear-gradient(90deg, #90c16d, #dbeca0); }
.field-caption { color: #b9cba8; font-size: 8px; }
.upgrade-card-main { align-items: baseline; margin-top: 5px; }
.upgrade-card-main strong { overflow: hidden; font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; font-size: 16px; font-weight: 750; letter-spacing: -.025em; white-space: nowrap; text-overflow: ellipsis; }
.upgrade-card-main span { color: #d3ee9c; font-size: 10px; }
.shop-toggle { margin-top: 10px; padding: 6px 8px; border: 1px solid rgba(212, 235, 186, .35); border-radius: 5px; background: rgba(185, 224, 150, .15); color: #f2f9e7; font-size: 10px; }
.shop-toggle:hover, .shop-toggle.can-buy { background: rgba(175, 225, 145, .35); }
.shop-toggle span { font-size: 14px; }

.control-strip { top: 62px; bottom: auto; left: 50%; right: auto; width: max-content; min-height: 0; max-width: calc(100% - 540px); transform: translateX(-50%); flex-wrap: nowrap; gap: 14px; padding: 7px 11px; border: 1px solid rgba(255, 255, 236, .15); border-radius: 8px; background: rgba(10, 38, 31, .65); color: #e9f0e1; box-shadow: 0 4px 18px rgba(7, 25, 17, .14); font-size: 8px; backdrop-filter: blur(12px); }
.control-strip > span { gap: 4px; }
.control-strip kbd { height: 16px; min-width: 16px; padding: 0 4px; }
.control-strip .mouse-icon { transform: scale(.75); margin-right: 1px; }

.minimap-shell { position: absolute; right: 18px; bottom: 18px; width: 166px; height: 166px; overflow: hidden; border: 3px solid rgba(249, 248, 222, .87); border-radius: 50%; background: #a8c08b; box-shadow: 0 0 0 1px rgba(11, 43, 29, .65), 0 9px 26px rgba(7, 29, 17, .38); pointer-events: none; }
#mini-map { display: block; width: 100%; height: 100%; border-radius: 50%; }
.minimap-caption { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); min-width: 80px; padding: 3px 7px; border-radius: 999px; background: rgba(12, 40, 30, .82); color: #f5f6dc; font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-align: center; white-space: nowrap; }
.context-tip { position: absolute; left: 50%; bottom: 135px; transform: translateX(-50%); max-width: min(490px, calc(100% - 40px)); padding: 9px 15px; border: 1px solid rgba(251, 251, 228, .19); border-radius: 999px; background: rgba(11, 35, 30, .77); color: #fff9e8; box-shadow: 0 5px 20px rgba(9, 26, 18, .18); font-size: 11px; font-weight: 600; text-align: center; backdrop-filter: blur(12px); }

.start-screen { justify-content: center; gap: 0; padding: 25px; background: linear-gradient(180deg, rgba(5, 25, 22, .54) 0%, rgba(8, 27, 22, .32) 32%, rgba(7, 25, 21, .32) 60%, rgba(4, 20, 18, .78) 100%); backdrop-filter: none; }
.start-copy { display: flex; flex-direction: column; align-items: center; width: min(900px, 100%); padding: 0; color: #fff9eb; text-align: center; text-shadow: 0 2px 20px rgba(3, 21, 17, .65); }
.start-copy > .eyebrow { margin: 0; color: #d7e6ba; font-size: 10px; letter-spacing: .31em; }
.start-copy h1 { margin: 15px 0 13px; padding-left: .15em; color: #fff9eb; font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; font-size: clamp(56px, 9.4vw, 135px); font-weight: 700; line-height: .96; letter-spacing: .15em; white-space: nowrap; }
.start-copy h1 .period { color: #bee699; }
.start-intro { max-width: 450px; margin: 0; color: #f3f3e3; font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.55; }
.start-screen .primary-button { justify-content: center; min-width: 0; margin-top: 25px; padding: 12px 19px; border: 1px solid rgba(221, 250, 224, .55); border-radius: 999px; background: #a9dfbf; color: #163b2b; box-shadow: 0 5px 22px rgba(4, 25, 19, .26); font-size: 12px; font-weight: 800; text-shadow: none; }
.start-screen .primary-button:hover { background: #c5ebcc; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(4, 25, 19, .3); }
.start-screen .primary-button:active { transform: translateY(0); }
.start-screen .primary-button span { font-size: 17px; }
.start-controls { display: inline-flex; align-items: center; justify-content: center; gap: 18px; margin-top: 23px; padding: 7px 14px; border: 1px solid rgba(255, 255, 240, .18); border-radius: 999px; background: rgba(8, 33, 28, .61); color: #f3f6e9; font-size: 9px; text-shadow: none; backdrop-filter: blur(10px); }
.start-controls > span { display: inline-flex; align-items: center; gap: 6px; }
.start-footer { position: absolute; bottom: 22px; left: 12px; right: 12px; color: rgba(249, 251, 232, .8); }

@media (max-width: 1050px) {
  .day-chip, .control-strip { display: none; }
  .hud-bottom { right: 185px; width: calc(100% - 203px); }
  .minimap-shell { width: 150px; height: 150px; }
}

@media (max-width: 700px) {
  .hud-top { padding: 10px; }
  .brand-symbol { display: none; }
  .brand-words strong { font-size: 11px; }
  .brand-words small { display: none; }
  .hud-top-right { gap: 5px; }
  .network-chip { min-height: 29px; padding: 5px 7px; }
  .network-label { max-width: 77px; overflow: hidden; text-overflow: ellipsis; font-size: 8px; }
  .network-invite { display: none; }
  .money-card { min-width: 72px; padding: 5px 8px; }
  .money-line strong { font-size: 18px; }
  .money-sign { font-size: 14px; }
  .hud-bottom { left: 8px; right: 8px; bottom: 8px; display: grid; grid-template-columns: 1fr 1fr; width: auto; gap: 5px; }
  .tool-card, .field-card, .upgrade-card { height: 73px; padding: 7px 8px; }
  .tool-card { grid-column: 1 / -1; height: 57px; }
  .tool-card h2 { font-size: 15px; }
  .tool-card p { max-width: 65%; font-size: 9px; }
  .mow-indicator { position: absolute; right: 10px; bottom: 9px; font-size: 8px; }
  .field-card-heading strong { display: none; }
  .field-percentage { font-size: 21px; }
  .progress-track { margin: 10px 0 3px; }
  .field-caption { font-size: 7px; }
  .upgrade-card-main strong { font-size: 13px; }
  .upgrade-card-main span { font-size: 8px; }
  .shop-toggle { margin-top: 4px; padding: 3px 6px; font-size: 8px; }
  .minimap-shell { top: 61px; right: 9px; bottom: auto; width: 102px; height: 102px; border-width: 2px; }
  .minimap-caption { bottom: 3px; min-width: 0; font-size: 6px; }
  .context-tip { bottom: 152px; font-size: 10px; }
  .start-screen { padding: 15px; }
  .start-copy { min-height: 0; padding: 0; }
  .start-copy > .eyebrow { margin: 0; font-size: 8px; letter-spacing: .2em; }
  .start-copy h1 { margin: 15px 0 12px; font-size: clamp(43px, 12vw, 82px); letter-spacing: .08em; padding-left: .08em; }
  .start-intro { max-width: 320px; font-size: 12px; }
  .start-controls { flex-wrap: wrap; gap: 8px 12px; max-width: 330px; border-radius: 8px; font-size: 8px; }
  .start-footer { bottom: 14px; font-size: 7px; }
}

@media (max-height: 520px) {
  .start-copy h1 { font-size: min(10vw, 58px); }
  .start-screen .primary-button { margin-top: 14px; }
  .start-controls { margin-top: 13px; }
  .start-footer { display: none; }
}

.job-card { position: absolute; top: 70px; left: 18px; width: 248px; padding: 11px 13px 12px; border: 1px solid rgba(255, 255, 235, .18); border-radius: 8px; background: rgba(10, 38, 31, .74); color: #fff9ec; box-shadow: 0 5px 23px rgba(5, 27, 18, .18); backdrop-filter: blur(12px); }
.job-kicker, .job-progress-line, .stamina-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.job-kicker { color: #b8cfae; }
.job-kicker strong { color: #d3ee9c; font-size: 10px; }
.job-card > strong { display: block; margin-top: 6px; font-size: 16px; line-height: 1.05; letter-spacing: -.02em; }
.job-card p { margin: 4px 0 9px; color: #d6e3ca; font-size: 10px; line-height: 1.25; }
.job-progress-line { color: #dbe9cb; letter-spacing: .04em; }
.job-progress-line span:last-child { color: #a6bca4; font-size: 7px; }
.job-track, .stamina-track { height: 5px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: rgba(224, 239, 189, .16); }
.job-track > span, .stamina-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #88bc70, #dcf1a2); transition: width .2s ease; }
.stamina-row { margin-top: 12px; color: #a6bca4; }
.stamina-row strong { color: #dbe9cb; font-size: 8px; }
.stamina-track > span { width: 100%; background: linear-gradient(90deg, #e0af74, #f4dea4); }
.shop-items > .shop-group-title { padding: 10px 0 3px; border: 0; border-radius: 0; background: transparent; color: #5d765c; font-family: var(--mono); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.shop-items > .shop-group-title:not(:first-child) { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 23px; }
.shop-item-level { display: inline-block; margin-left: 7px; color: #718f65; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0; vertical-align: middle; }

@media (max-width: 700px) {
  .job-card { top: 51px; left: 8px; width: min(192px, calc(100% - 132px)); padding: 8px 9px; }
  .job-card > strong { margin-top: 4px; font-size: 13px; }
  .job-card p { margin: 3px 0 6px; font-size: 8px; }
  .job-kicker, .job-progress-line, .stamina-row { font-size: 7px; }
  .job-progress-line span:last-child { display: none; }
  .stamina-row { margin-top: 7px; }
  .job-track, .stamina-track { height: 4px; margin-top: 3px; }
}

@media (max-height: 560px) and (min-width: 701px) {
  .job-card { top: 59px; width: 215px; padding: 8px 10px; }
  .job-card p { margin-bottom: 6px; }
  .stamina-row { margin-top: 7px; }
}

/* A small field guide for the live sky and coastal conditions. */
.weather-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 5px 8px; border: 1px solid rgba(255, 255, 240, .18); border-radius: 8px; background: rgba(11, 37, 30, .72); color: #f4f7e9; box-shadow: 0 4px 18px rgba(8, 25, 17, .15); font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .07em; white-space: nowrap; backdrop-filter: blur(12px); pointer-events: auto; transition: background .18s ease, border-color .18s ease; }
.weather-toggle:hover, .weather-toggle[aria-expanded="true"] { border-color: rgba(208, 237, 174, .55); background: rgba(32, 73, 47, .9); }
.weather-toggle-symbol { color: #f2d985; font-size: 15px; line-height: 1; }
.weather-toggle kbd { min-width: 16px; height: 17px; margin-left: 2px; border-color: rgba(230, 239, 217, .35); font-size: 8px; }

.weather-panel { position: absolute; z-index: 16; top: 62px; right: 20px; display: flex; flex-direction: column; width: min(340px, calc(100vw - 40px)); max-height: calc(100dvh - 252px); overflow: hidden; border: 1px solid rgba(255, 255, 239, .88); border-radius: 11px; background: rgba(253, 249, 235, .97); color: var(--pine); box-shadow: 0 16px 45px rgba(5, 25, 18, .32), 0 0 0 1px rgba(28, 66, 42, .12); backdrop-filter: blur(18px); pointer-events: auto; }
.weather-panel:focus { outline: none; }
.weather-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex: none; padding: 15px 16px 13px; border-bottom: 1px solid #dce2cf; background: linear-gradient(130deg, #fffcef, #eff2df); }
.weather-kicker { margin: 0 0 4px; color: #6c855f; font-family: var(--mono); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.weather-panel h2 { margin: 0; font-family: var(--serif); font-size: 27px; line-height: 1; letter-spacing: -.045em; }
.weather-panel h2 span { color: #d4784f; }
.weather-close { display: grid; place-items: center; flex: none; width: 27px; height: 27px; padding: 0; border: 1px solid #d3ddc7; border-radius: 50%; background: #f8faeb; color: #44604c; font-size: 21px; line-height: 1; transition: background .18s ease, transform .18s ease; }
.weather-close:hover { background: #e8efdb; transform: rotate(90deg); }
.weather-panel-content { min-height: 0; padding: 12px 16px 17px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #aebf9b transparent; scrollbar-width: thin; }
.weather-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #d5e0c8; border-radius: 7px; background: #eaf0dc; }
.weather-switch-row label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.weather-switch-row strong { font-size: 12px; line-height: 1.1; }
.weather-switch-row small { color: #6a8067; font-size: 10px; line-height: 1.2; }
.weather-switch-row input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #3f7c54; cursor: pointer; }
.weather-switch-row-compact { margin: 3px 0 11px; padding: 7px 10px; background: #f6f8ec; }
.weather-switch-row-compact small { font-size: 9px; }
.weather-group-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 8px; padding-top: 1px; color: #63805d; font-family: var(--mono); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.weather-group-title span:last-child { color: #99a88b; font-size: 8px; }
.weather-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.weather-presets button { min-width: 0; padding: 8px 2px; border: 1px solid #d5dfc8; border-radius: 5px; background: #fbfcf2; color: #3b5b42; font-family: var(--mono); font-size: 9px; font-weight: 800; }
.weather-presets button:hover, .weather-presets button[aria-pressed="true"], .weather-presets button.is-active { border-color: #6e9b6c; background: #deecd1; color: #244b32; }
.weather-control { margin-top: 10px; }
.weather-control-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.weather-control label { color: #34523d; font-size: 11px; font-weight: 700; }
.weather-control output { flex: none; color: #426e4d; font-family: var(--mono); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.weather-control input[type="range"] { display: block; width: 100%; height: 16px; margin: 0; padding: 0; appearance: none; background: transparent; cursor: pointer; }
.weather-control input[type="range"]::-webkit-slider-runnable-track { height: 5px; border: 1px solid #c5d6b7; border-radius: 999px; background: #dce8cd; }
.weather-control input[type="range"]::-moz-range-track { height: 5px; border: 1px solid #c5d6b7; border-radius: 999px; background: #dce8cd; }
.weather-control input[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; appearance: none; border: 2px solid #fffdf1; border-radius: 50%; background: #467d52; box-shadow: 0 1px 4px rgba(22, 65, 39, .35); }
.weather-control input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border: 2px solid #fffdf1; border-radius: 50%; background: #467d52; box-shadow: 0 1px 4px rgba(22, 65, 39, .35); }
.weather-control input[type="range"]:focus-visible, .weather-switch-row input:focus-visible { outline: 3px solid #e3a05e; outline-offset: 3px; }
.weather-control input[type="range"]:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 700px) {
  .weather-toggle { width: 30px; min-height: 29px; padding: 4px; }
  .weather-toggle-text, .weather-toggle kbd { display: none; }
  .weather-panel { top: 50px; right: 9px; width: min(340px, calc(100vw - 18px)); max-height: calc(100dvh - 60px); }
  .weather-panel-header { padding: 11px 12px; }
  .weather-panel h2 { font-size: 23px; }
  .weather-panel-content { padding: 10px 12px 14px; }
}

/* Keep the first view focused on the field and its single call to action. */
#app:has(#start-screen:not([hidden])) .hud,
#app:has(#start-screen:not([hidden])) #reticle,
#app:has(#start-screen:not([hidden])) .toast-stack { visibility: hidden; }

/* Keep the lawn visible. Core progress lives in one short bottom rail. */
.brand-words strong { font-size: 13px; }
.brand-words small { font-size: 8px; }
.network-label, .day-chip, .weather-toggle { font-size: 10px; }
.money-card .hud-label { font-size: 9px; }
.money-line strong { font-size: 22px; }
.job-card { width: 250px; padding: 10px 12px; }
.job-kicker, .stamina-row { font-size: 9px; }
.job-card > strong { font-size: 17px; }
.job-card p { font-size: 11px; line-height: 1.35; }
.job-progress-line { font-size: 10px; }
.job-progress-line span:last-child { font-size: 8px; }
.job-track, .stamina-track { height: 6px; }
.hud-bottom { left: 14px; right: 174px; bottom: 14px; width: min(690px, calc(100% - 188px)); height: 98px; }
.tool-card, .field-card, .upgrade-card { height: 98px; padding: 10px 12px; background: rgba(10, 38, 31, .67); }
.tool-card .hud-label, .field-card .hud-label, .upgrade-card .hud-label { font-size: 9px; }
.tool-level { font-size: 9px; }
.tool-card h2 { margin-top: 5px; font-size: 18px; }
.tool-card p { display: block; margin-top: 4px; overflow: hidden; font-size: 10px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.mow-indicator { position: absolute; bottom: 9px; left: 12px; font-size: 9px; }
.field-card-heading strong { display: none; }
.field-percentage { font-size: 23px; }
.field-caption { font-size: 8px; letter-spacing: .04em; }
.field-card .progress-track { margin: 7px 0 4px; }
.season-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; color: #d8e7cc; font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.season-row strong { color: #d3ee9c; font-size: 9px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.season-row em { color: #f0c786; font-style: normal; }
.season-track { height: 4px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: rgba(224, 239, 189, .16); }
#season-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e4bb7b, #f5dfab); transition: width .3s ease; }
.upgrade-card-main strong { font-size: 16px; }
.upgrade-card-main span { font-size: 11px; }
.shop-toggle { margin-top: 8px; padding: 6px 8px; font-size: 10px; }
.control-strip { top: 58px; gap: 9px; font-size: 8px; }
.minimap-shell { right: 14px; bottom: 14px; width: 142px; height: 142px; }
.minimap-legend { position: absolute; right: 14px; bottom: 165px; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 9px; width: 142px; padding: 5px 7px; border: 1px solid rgba(255, 255, 235, .15); border-radius: 6px; background: rgba(10, 38, 31, .72); color: #f4f4df; box-shadow: 0 4px 12px rgba(5, 27, 18, .15); font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .03em; pointer-events: none; }
.minimap-legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.minimap-legend span:first-child { flex-basis: 100%; justify-content: center; color: #f5dea0; }
.minimap-legend b { display: inline-grid; place-items: center; width: 13px; height: 13px; border: 1px solid rgba(239, 243, 215, .53); border-radius: 3px; font-size: 9px; }
.route-swatch { display: inline-block; width: 14px; height: 5px; border-radius: 999px; background: #e7a54f; box-shadow: 0 0 0 1px rgba(255, 239, 187, .45); }

/* Put the next purchasable equipment in view when the tool shed opens. */
.shop-sheet { padding: 22px 28px 17px; }
.shop-header h2 { font-size: 42px; }
.shop-wallet { margin-top: 17px; padding: 11px 14px; }
.shop-intro { margin: 14px 0 10px; }
.shop-intro p { margin-bottom: 11px; font-size: 15px; }
.shop-items { gap: 6px; }
.shop-items > * { padding: 10px 12px; }
.shop-item h3, .upgrade-item h3 { font-size: 20px; }
.shop-items button { padding: 8px 10px; }
.shop-items button:disabled { color: #526953; }
.shop-items > .shop-group-title:not(:first-child) { margin-top: 12px; padding-top: 16px; }
.weather-panel { max-height: calc(100dvh - 75px); }

.blade-toggle { position: absolute; right: 10px; bottom: 7px; display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 6px; border: 1px solid rgba(238, 206, 128, .55); border-radius: 5px; background: rgba(226, 169, 76, .18); color: #ffe4ae; font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; pointer-events: auto; }
.blade-toggle:hover { background: rgba(226, 169, 76, .32); }
.blade-toggle[aria-pressed="true"] { border-color: rgba(177, 234, 143, .66); background: rgba(135, 194, 106, .25); color: #dcffb6; }
.blade-toggle kbd { min-width: 15px; height: 15px; padding: 0 3px; }
.tool-card.has-blade-control .mow-indicator { max-width: calc(100% - 117px); overflow: hidden; white-space: nowrap; }

.version-notice { position: fixed; z-index: 90; left: 50%; top: 104px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 24px); padding: 10px 12px 10px 17px; border: 1px solid rgba(223, 239, 181, .7); border-radius: 9px; background: rgba(23, 49, 36, .94); color: #f3f4d7; box-shadow: 0 8px 30px rgba(16, 32, 24, .28); font: 700 12px var(--mono); letter-spacing: .02em; white-space: nowrap; pointer-events: auto; }
.version-notice[hidden] { display: none; }
.version-notice button { flex: none; padding: 7px 10px; border: 0; border-radius: 5px; background: #d8edbd; color: #213d2b; font: 800 10px var(--mono); cursor: pointer; }
.version-notice button:hover { background: #f4ffd9; }

@media (max-width: 1050px) {
  .hud-bottom { height: auto; }
  .hud-bottom { right: 158px; width: calc(100% - 172px); }
  .minimap-shell { width: 132px; height: 132px; }
  .minimap-legend { bottom: 155px; width: 132px; }
}

@media (max-width: 700px) {
  .brand-words strong { font-size: 11px; }
  .network-label { font-size: 8px; }
  .money-line strong { font-size: 18px; }
  .job-card { width: min(192px, calc(100% - 132px)); padding: 8px 9px; }
  .job-card > strong { font-size: 13px; }
  .job-card p { font-size: 9px; }
  .job-kicker, .job-progress-line, .stamina-row { font-size: 8px; }
  .hud-bottom { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .tool-card, .field-card, .upgrade-card { height: 84px; padding: 7px 8px; }
  .tool-card { height: 49px; }
  .field-card { height: 84px; }
  .tool-card h2 { margin-top: 4px; font-size: 15px; }
  .tool-card p { display: none; }
  .mow-indicator { right: 10px; bottom: 9px; left: auto; font-size: 8px; }
  .tool-card.has-blade-control .mow-indicator { right: auto; left: 8px; max-width: calc(100% - 105px); }
  .blade-toggle { right: 7px; bottom: 6px; min-height: 22px; font-size: 7px; }
  .field-percentage { font-size: 21px; }
  .field-card .progress-track { margin: 5px 0 3px; }
  .field-caption { display: block; overflow: hidden; font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
  .season-row { gap: 3px; margin-top: 4px; font-size: 7px; letter-spacing: 0; }
  .season-row strong { font-size: 7px; }
  .season-track { height: 4px; margin-top: 3px; }
  .upgrade-card-main strong { font-size: 13px; }
  .upgrade-card-main span { font-size: 8px; }
  .shop-toggle { min-height: 28px; margin-top: 6px; font-size: 9px; }
  .shop-sheet { padding: 22px 18px 16px; }
  .weather-panel { max-height: calc(100dvh - 60px); }
  .minimap-shell { right: 9px; width: 102px; height: 102px; }
  .minimap-legend { top: 169px; right: 9px; bottom: auto; width: 102px; flex-direction: column; flex-wrap: nowrap; gap: 2px; align-items: center; padding: 4px 5px; font-size: 7px; }
  .minimap-legend span:first-child { flex-basis: auto; }
  .minimap-legend b { width: 11px; height: 11px; font-size: 8px; }
}

@media (max-width: 360px) {
  .hud-top { gap: 4px; }
  .brand { flex: none; }
  .brand-words strong { font-size: 10px; letter-spacing: .11em; white-space: nowrap; }
  .hud-top-right { gap: 4px; }
  .money-card { padding: 5px 6px; }
  .money-line strong { font-size: 17px; }
  .field-card-heading .hud-label { font-size: 7px; letter-spacing: .05em; white-space: nowrap; }
}