@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/roboto-condensed-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* One compact scene-volume control covers the engine, horn, traffic and ambience. */
.volume-control {
  display: grid;
  align-content: center;
  gap: 7px;
  width: 96px;
  height: 58px;
  padding: 8px 10px;
  border: 1px solid rgb(101 179 214 / .72);
  border-radius: 8px;
  background: #0c3b45;
  color: #dfffe8;
  box-shadow: 0 6px 14px rgb(0 0 0 / .24), inset 0 1px 0 rgb(255 255 255 / .09);
}
.volume-control span {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.volume-control output { color: #9ad7cf; font-variant-numeric: tabular-nums; }
.volume-control input {
  width: 100%;
  height: 5px;
  margin: 0;
  appearance: none;
  border-radius: 3px;
  background: linear-gradient(90deg, #86d657 0 var(--volume-level), #35565a var(--volume-level) 100%);
  cursor: pointer;
}
.volume-control input::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  appearance: none;
  border: 2px solid #efffe9;
  border-radius: 50%;
  background: #65b3d6;
  box-shadow: 0 2px 5px rgb(0 0 0 / .35);
}
.volume-control input::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 2px solid #efffe9;
  border-radius: 50%;
  background: #65b3d6;
  box-shadow: 0 2px 5px rgb(0 0 0 / .35);
}
.volume-control input:focus-visible { outline: 3px solid #dfffad; outline-offset: 5px; }

@media (orientation: landscape) and (min-width: 1450px) {
  .tv-stage .volume-control {
    position: absolute;
    left: 1728px;
    top: 22px;
    width: 100px;
    height: 60px;
    margin: 0;
  }
}

@media (max-width: 980px), (orientation: portrait) {
  .volume-control { grid-column: 4; grid-row: 2; justify-self: stretch; width: auto; height: 44px; padding: 6px 8px; }
  .pause-button { grid-column: 5; grid-row: 1; }
  .restart-button { grid-column: 5; grid-row: 2; }
}

@media (max-width: 560px) {
  .volume-control { grid-column: 3; grid-row: 2; }
  .pause-button { grid-column: 4; grid-row: 1; }
  .restart-button { grid-column: 4; grid-row: 2; }
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/roboto-condensed-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --gold: #efc64c;
  --ui-font: 'Roboto Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
  --cargo-wheat: #ffd43b;
  --cargo-seed: #22c7ff;
  --cargo-feed: #8cdf3e;
  --radius-control: 8px;
  --radius-round: 50%;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #234a27; color: #fff6dc; font-family: var(--ui-font); letter-spacing: 0; }
button { font: inherit; }
.game-shell { min-height: 100vh; padding: 18px; background: radial-gradient(circle at 50% 0, #56883b 0, #234a27 62%); }
.game-board { position: relative; width: min(1500px, 100%); min-height: calc(100vh - 36px); margin: 0 auto; overflow: hidden; border: 3px solid #bc8c43; border-radius: 10px; background: linear-gradient(135deg, #1b4825, #376d31); box-shadow: inset 0 0 0 2px rgb(255 231 155 / .28), 0 24px 70px rgb(0 0 0 / .35); padding: 18px; }
.hud { display: grid; grid-template-columns: minmax(250px, 1.2fr) 170px minmax(150px, .8fr) 170px 46px; align-items: center; gap: 12px; position: relative; z-index: 5; }
.title-plank, .level-plank, .hud-box, .restart-button { border: 2px solid #d7ad5c; box-shadow: inset 0 0 0 2px rgb(52 25 7 / .45), 0 8px 18px rgb(0 0 0 / .22); }
.title-plank { border-radius: 8px; padding: 10px 18px; background: repeating-linear-gradient(0deg, #875324 0 13px, #a5682b 13px 26px); text-shadow: 0 2px 0 #301506; }
.title-plank span, .title-plank strong { display: block; line-height: 1; }
.title-plank span { font-size: 18px; font-weight: 900; }
.title-plank strong { color: #ffd44b; font-size: 25px; }
.level-plank { border-radius: 8px; padding: 14px 12px; background: linear-gradient(#547f2d, #2d5f26); color: #fff7d5; text-align: center; font-size: 22px; font-weight: 900; text-shadow: 0 2px #193719; }
.hud-box { border-radius: 8px; padding: 9px 12px; background: #3a220e; text-align: center; }
.hud-box span, .hud-box strong { display: block; }
.hud-box span { color: #edcf91; font-size: 11px; font-weight: 900; }
.hud-box strong { font-size: 24px; line-height: 1.05; }
.restart-button { width: 44px; height: 44px; cursor: pointer; border-radius: 50%; background: #3a220e; color: #ffe08a; font-size: 25px; }
.scene-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr) 170px; gap: 14px; align-items: stretch; min-height: 650px; margin-top: 14px; }
.left-rail, .right-rail { position: relative; min-width: 0; }
.farm-landmarks { position: relative; height: 310px; }
.landmark { position: absolute; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 8px 5px rgb(0 0 0 / .28)); }
.farmhouse { left: 0; top: 8px; width: 180px; height: 190px; background-image: url('./assets/farmhouse.png'); }
.office-people { position: absolute; z-index: 4; left: 92px; bottom: 2px; width: 72px; height: 96px; object-fit: contain; animation: people-walk-out 12s ease-in-out infinite; pointer-events: none; }
.silo { right: 4px; top: 12px; width: 84px; height: 120px; background-image: url('./assets/silo.png'); }
.windmill { right: 24px; bottom: 0; width: 120px; height: 170px; background-image: url('./assets/windmill.png'); }
.start-gate { margin: -18px 24px 12px; border: 4px solid #6b3e18; border-radius: 50% 50% 9px 9px; padding: 12px 8px 9px; background: linear-gradient(#9a642b, #653717); color: #fff0c2; text-align: center; font-size: 20px; font-weight: 900; text-shadow: 0 2px #321608; box-shadow: inset 0 0 0 2px #d29a4b, 0 7px 12px rgb(0 0 0 / .28); }
.instruction-panel { border: 3px solid #a87b3f; border-radius: 9px; padding: 14px; background: linear-gradient(145deg, #f6e4b7, #d7b77b); color: #2b1a0e; box-shadow: 0 9px 15px rgb(0 0 0 / .24); }
.instruction-panel h1 { margin: 0 0 8px; color: #225225; font-size: 21px; text-align: center; }
.instruction-panel p { min-height: 56px; margin: 0 0 12px; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; }
.field-legend { display: grid; gap: 5px; margin: 0 0 10px; font-size: 10px; font-weight: 800; }.legend-row { display: flex; align-items: center; gap: 6px; }.legend-swatch { width: 17px; height: 17px; flex: 0 0 17px; border: 1px solid #876127; border-radius: 3px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }.legend-path { background: #6e8040; }.legend-wall { background: repeating-linear-gradient(90deg, #bb801b 0 5px, #e3ad31 5px 10px); }.legend-bale { background: #7a8d4c url('./assets/bale.png') center / contain no-repeat; }
.legend-puddle { background: radial-gradient(ellipse at 50% 56%, #6f9fa0 0 35%, transparent 36%), radial-gradient(ellipse at 45% 60%, #2e666b 0 54%, #567b62 55% 100%); }
.control-caption { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 5px; padding: 5px; background: #2f612c; color: #fff3c9; text-align: center; font-size: 12px; font-weight: 900; }
.control-caption small { display: inline-flex; align-items: center; gap: 4px; color: #c6ddd1; font-size: 8px; text-transform: uppercase; }
.control-caption small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8ba399; box-shadow: 0 0 0 1px rgb(255 255 255 / .3); }
.control-caption small.connected { color: #d9ffd5; }
.control-caption small.connected::before { background: #8ff071; box-shadow: 0 0 7px #8ff071; }
.control-caption .performance-status { flex: 0 0 52px; font: 700 11px/1.3 monospace; color: #dfffe4; white-space: nowrap; }
.dpad { display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(2, 40px); justify-content: center; gap: 5px; margin-top: 12px; }
.dpad button { border: 2px solid #6b451f; border-radius: 6px; background: #f9edce; color: #2b1a0e; cursor: pointer; font-size: 20px; font-weight: 900; box-shadow: 0 3px 0 #6b451f; }
.dpad button:first-child { grid-column: 2; }.dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }.dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }.dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }
.field-wrap { min-width: 0; display: flex; align-items: center; justify-content: center; }.field-frame { width: 100%; padding: 9px; border: 8px solid #b98a47; border-radius: 10px; background: #d7af63; box-shadow: 0 16px 25px rgb(0 0 0 / .33), inset 0 0 0 2px #f0d899; transform: rotateX(9deg) rotateZ(-1.5deg); transform-origin: center center; transform-style: preserve-3d; }
.field-grid { position: relative; display: grid; width: 100%; aspect-ratio: 17 / 12; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); overflow: hidden; border-radius: 4px; background: #865b2c; }
.map-tile { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }.path-tile { background: #6e8040; }.crop-tile { background: radial-gradient(ellipse at 25% 25%, #edc144 0 8%, transparent 9%), radial-gradient(ellipse at 72% 45%, #d49824 0 8%, transparent 9%), repeating-linear-gradient(90deg, #bb801b 0 5px, #e3ad31 5px 10px); box-shadow: inset 0 0 0 1px #8e5c16, inset 0 -5px 0 rgb(65 37 8 / .2); }
.bale-sprite { position: absolute; z-index: 2; inset: 19%; width: 62%; height: 62%; object-fit: contain; filter: drop-shadow(0 3px 2px rgb(63 28 5 / .42)); }.barn-marker { position: absolute; z-index: 3; left: 50%; top: 25%; transform: translateX(-50%); padding: 3px 5px; border: 1px solid #e8bd65; border-radius: 3px; background: #235125; color: #fff6d0; font-size: 8px; font-weight: 900; }
.puddle-sprite { position: absolute; z-index: 2; left: 12%; top: 25%; width: 76%; height: 50%; border: 2px solid #37696b; border-radius: 50%; background: radial-gradient(ellipse at 55% 42%, #a9cdca 0 12%, transparent 13%), radial-gradient(ellipse at 45% 60%, #5b9898 0 34%, #2d666b 35% 67%, #53765c 68%); box-shadow: inset 0 -3px 0 rgb(17 61 64 / .35), 0 3px 3px rgb(0 0 0 / .2); animation: puddle-shimmer 1.2s ease-in-out infinite; }
.tractor-sprite { position: absolute; z-index: 5; left: 11%; top: 11%; width: 78%; height: 78%; background: center / contain no-repeat; filter: drop-shadow(0 5px 3px rgb(0 0 0 / .4)); transition: left 130ms ease, top 130ms ease; pointer-events: none; }.tractor-right { background-image: url('./assets/tractor-right.png'); }.tractor-left { background-image: url('./assets/tractor-left.png'); }.tractor-up { background-image: url('./assets/tractor-back.png'); }.tractor-down { background-image: url('./assets/tractor-front.png'); }.tractor-right, .tractor-left, .tractor-up, .tractor-down { background-image: url('./assets/tractor-green.png'); }
.tractor-slowed { animation: tractor-blink .32s steps(2, start) infinite; } @keyframes tractor-blink { 50% { opacity: .25; } } @keyframes puddle-shimmer { 50% { transform: scale(.94); opacity: .78; } } @keyframes truck-drive-out { 0%, 8% { transform: translateX(0); opacity: 0; } 14% { opacity: 1; } 72% { opacity: 1; } 90%, 100% { transform: translateX(300px); opacity: 0; } } @keyframes people-walk-out { 0%, 10% { transform: translate(0, 12px); opacity: 0; } 20% { opacity: 1; } 72% { transform: translate(38px, 0); opacity: 1; } 86%, 100% { transform: translate(70px, 6px); opacity: 0; } }
.right-rail { display: flex; flex-direction: column; justify-content: center; }.warehouse-art { height: 238px; min-height: 0; overflow: hidden; border: 2px solid rgb(213 170 88 / .78); border-radius: 12px; background: radial-gradient(circle at 50% 68%, rgb(246 203 95 / .24), transparent 48%), rgb(44 81 37 / .65) url('./assets/warehouse.png') center 78% / 126% auto no-repeat; box-shadow: inset 0 0 0 4px rgb(255 237 166 / .12), 0 10px 18px rgb(0 0 0 / .28); filter: drop-shadow(0 10px 5px rgb(0 0 0 / .32)); }.goal-card { border: 2px solid #d5aa58; border-radius: 7px; padding: 12px 8px; background: #3a220e; text-align: center; box-shadow: 0 8px 15px rgb(0 0 0 / .25); }.goal-card span, .goal-card strong { display: block; }.goal-card span { color: #f0d291; font-size: 11px; font-weight: 900; }.goal-card strong { color: #fff1bd; font-size: 14px; line-height: 1.1; }.goal-ready { border-color: #edc94c; background: #2d612a; }.exit-marker { display: inline-flex; margin-top: 4px; padding: 2px 5px; border: 1px solid #e5b75b; border-radius: 3px; background: #4b2b11; color: #ffe6a3; font-size: 7px; font-weight: 900; letter-spacing: .04em; }
.bottom-strip { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr) 1.2fr; align-items: center; gap: 10px; min-height: 60px; margin-top: 14px; padding: 10px 14px; border: 3px solid #875421; border-radius: 8px; background: repeating-linear-gradient(0deg, #70411b 0 12px, #8c5726 12px 24px); color: #fff2ce; font-size: 13px; font-weight: 800; box-shadow: inset 0 0 0 2px rgb(255 227 146 / .2); }.bottom-heading { color: #fff8d7; font-size: 18px; text-shadow: 0 2px #321508; }.bottom-strip div:not(.bottom-heading):not(.finish-note) { display: flex; align-items: center; gap: 7px; }.bottom-strip b { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--gold); color: #4b2a0d; }.finish-note { color: #ffe05c; text-align: right; }
.warehouse-art { position: relative; }.delivery-truck { position: absolute; z-index: 2; left: -110px; bottom: 14px; width: 84px; height: 64px; object-fit: contain; animation: truck-drive-out 13s linear infinite; pointer-events: none; }
@media (max-width: 980px) { .game-shell { padding: 8px; } .game-board { min-height: calc(100vh - 16px); padding: 10px; } .hud { grid-template-columns: 1fr 1fr 1fr 1fr 40px; gap: 6px; } .title-plank { grid-column: span 2; } .level-plank { font-size: 15px; padding: 11px 5px; } .hud-box { padding: 7px 4px; } .hud-box strong { font-size: 16px; } .hud-box span { font-size: 8px; } .scene-grid { grid-template-columns: 1fr; min-height: 0; } .left-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .farm-landmarks { display: none; } .start-gate { margin: 0; align-self: center; } .instruction-panel { padding: 8px; } .instruction-panel p { min-height: 32px; font-size: 12px; } .right-rail { display: none; } .field-grid { --cell: min(5.1vw, 64px); } .bottom-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hud { grid-template-columns: 1fr 1fr 1fr 40px; } .title-plank { grid-column: span 2; } .hud-box.timer { grid-column: 3; grid-row: 1; } .level-plank { display: none; } .restart-button { grid-column: 4; grid-row: 1; } .field-frame { padding: 4px; border-width: 5px; } .field-grid { --cell: min(5.15vw, 50px); } .bottom-strip { font-size: 11px; } .bottom-heading { font-size: 14px; } }

/* Reference pass: dark teal glass HUD, modern farm buildings, and a slightly tilted rectangular field. */
:root { --ink: #102c31; --field-green: #6f865e; --teal: #0b5361; --cyan: #43d6cc; --cream: #f4f0dc; }
body { background: #183f36; }
.game-shell { padding: 0; background: linear-gradient(rgb(10 47 38 / .66), rgb(10 47 38 / .8)), url('./assets/forest-texture.png') center / cover, radial-gradient(circle at 50% 12%, #4f7759 0, #1d4d3e 45%, #12352f 100%); }
.game-board { width: min(1536px, 100%); min-height: 100vh; padding: 20px 24px 16px; border: 0; border-radius: 0; background: linear-gradient(180deg, rgb(12 54 50 / .42), rgb(19 73 57 / .58)), radial-gradient(circle at 50% 60%, rgb(120 148 93 / .55), rgb(37 79 63 / .72) 72%); box-shadow: inset 0 0 0 1px rgb(206 229 182 / .28), 0 24px 70px rgb(0 0 0 / .35); }
.hud { grid-template-columns: minmax(250px, 1.2fr) 190px minmax(150px, .8fr) 180px 46px; gap: 12px; }
.title-plank, .level-plank, .hud-box, .restart-button { border: 2px solid #2cc7c2; box-shadow: inset 0 0 0 1px rgb(201 250 226 / .28), 0 8px 18px rgb(0 0 0 / .28); background: linear-gradient(135deg, rgb(8 43 54 / .94), rgb(9 73 77 / .9)); }
.title-plank { height: 78px; padding: 0; border-radius: 18px; background: rgb(5 37 49 / .92); text-shadow: none; font-size: 0; }
.brand-art, .landmark-art, .warehouse-modern-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-art { object-fit: fill; }
.title-plank span, .title-plank strong { display: none; }
.hud-box { border-radius: 16px; padding: 9px 12px; }
.hud-box span { color: #e5f6e1; font-size: 11px; }
.hud-box strong { color: #fff; font-size: 25px; }
.level-plank { border-radius: 16px; padding: 14px 12px; color: #fff; font-size: 22px; text-shadow: 0 2px 10px rgb(0 0 0 / .6); }
.restart-button { color: #d9ffff; }
.scene-grid { grid-template-columns: 280px minmax(560px, 1fr) 235px; gap: 20px; min-height: 690px; margin-top: 18px; }
.farm-landmarks { height: 285px; }
.landmark { filter: drop-shadow(0 12px 8px rgb(0 0 0 / .34)); }
.farmhouse { left: -12px; top: 0; width: 270px; height: 245px; background-image: none; }
.landmark-art { object-fit: cover; }
.silo, .windmill { display: none; }
.office-people { left: 154px; bottom: 4px; width: 64px; height: 90px; }
.start-gate { height: 112px; margin: -6px 8px 16px; border: 0; border-radius: 0; padding: 0; background: url('./assets/reference-extracts/start-gate.png') center / 100% 100% no-repeat; font-size: 0; box-shadow: none; }
.instruction-panel { border: 2px solid #36ccc1; border-radius: 18px; padding: 16px; background: linear-gradient(145deg, rgb(4 43 51 / .96), rgb(8 71 67 / .94)); color: #fff; box-shadow: 0 12px 25px rgb(0 0 0 / .32); }
.instruction-panel h1 { color: #48ded0; font-size: 20px; }
.instruction-panel p { min-height: 64px; color: #f5f6e2; font-size: 13px; }
.field-legend { color: #e4f2dc; }
.legend-path { background: #6f865e; }
.legend-wall { background: linear-gradient(135deg, #2b684c, #153f36); }
.legend-bale { background-color: #5b7654; }
.legend-puddle { border-color: #45bec6; }
.control-caption { border: 1px solid #3ad7c2; border-radius: 9px; background: #155e51; color: #dfffe4; }
.dpad button { border: 1px solid #53c9c0; border-radius: 9px; background: #0c3b45; color: #ecffff; box-shadow: 0 3px 0 #07252e; }
.field-frame { padding: 10px; border: 3px solid #bdcdbd; border-radius: 5px; background: #879d76; box-shadow: 0 18px 30px rgb(0 0 0 / .38), inset 0 0 0 2px rgb(238 250 218 / .46); transform: rotateX(8deg) rotateZ(-1deg); }
.field-grid { aspect-ratio: 17 / 12; border: 2px solid rgb(202 223 183 / .48); border-radius: 2px; background: #5d7552; }
.path-tile { background: radial-gradient(ellipse at 38% 58%, rgb(194 173 104 / .42) 0 11%, transparent 12%), radial-gradient(ellipse at 76% 28%, rgb(211 190 119 / .3) 0 7%, transparent 8%), radial-gradient(circle at 20% 78%, rgb(125 133 76 / .42) 0 10%, transparent 11%), linear-gradient(135deg, #a29662, #78885b 58%, #6f8159); }
.crop-tile { background: radial-gradient(circle at 18% 28%, #81aa68 0 17%, transparent 18%), radial-gradient(circle at 52% 18%, #5f965c 0 22%, transparent 23%), radial-gradient(circle at 82% 42%, #79a766 0 18%, transparent 19%), radial-gradient(circle at 30% 76%, #4f8653 0 24%, transparent 25%), radial-gradient(circle at 72% 82%, #3e724b 0 23%, transparent 24%), linear-gradient(135deg, #2d684a, #174536); box-shadow: inset 0 0 0 1px rgb(12 50 43 / .62), inset 0 -5px 0 rgb(11 41 35 / .2); }.wheat-tile { background: linear-gradient(rgb(255 205 67 / .12), rgb(107 62 14 / .18)), url('./assets/wheat-tile.png') center / cover; box-shadow: inset 0 0 0 2px rgb(96 59 15 / .72), inset 0 -6px 0 rgb(84 46 9 / .24); }
.bale-sprite { inset: 15%; width: 70%; height: 70%; }
.important-bale { filter: drop-shadow(0 0 5px #fff6a8) drop-shadow(0 4px 3px rgb(0 0 0 / .46)); }
.puddle-sprite { border-color: #4cc4ca; background: radial-gradient(ellipse at 55% 42%, #b7ece7 0 12%, transparent 13%), radial-gradient(ellipse at 45% 60%, #4eabb2 0 34%, #207079 35% 67%, #4c725d 68%); }
.tractor-sprite { left: 7%; top: 7%; width: 86%; height: 86%; }
.barn-marker { padding: 4px 6px; border-color: #7de2d0; background: #0a5960; color: #fff; }
.right-rail { justify-content: flex-start; padding-top: 30px; }
.warehouse-art { height: 330px; border: 2px solid #2cc7c2; border-radius: 16px; background: #0a4148; box-shadow: 0 14px 22px rgb(0 0 0 / .32), inset 0 0 0 2px rgb(208 252 237 / .18); filter: drop-shadow(0 10px 5px rgb(0 0 0 / .32)); }
.warehouse-modern-art { position: absolute; inset: 0; object-fit: cover; }
.delivery-truck { left: 14px; bottom: 14px; width: 96px; height: 76px; }
.goal-card { margin-top: 16px; border: 2px solid #2cc7c2; border-radius: 14px; padding: 14px 10px; background: linear-gradient(135deg, rgb(5 43 52 / .95), rgb(8 70 69 / .95)); box-shadow: 0 8px 16px rgb(0 0 0 / .28); }
.goal-card span { color: #62e4d4; }
.goal-card strong { color: #fff; }
.goal-ready { background: linear-gradient(135deg, #0b6153, #1d845c); }
.exit-marker { border-color: #55d5c7; background: #0b4148; color: #ddfff5; }
.bonus-points { color: #a4f2a5; }.cargo-counter, .hud-box.timer, .level-plank { position: relative; overflow: hidden; border-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }.cargo-counter { background-image: url('./assets/reference-extracts/hud-counter.png'); }.hud-box.timer { background-image: url('./assets/reference-extracts/hud-timer.png'); }.level-plank { background-image: url('./assets/reference-extracts/hud-level.png'); }.cargo-counter::before, .hud-box.timer::before { content: ''; position: absolute; z-index: 0; border-radius: 9px; background: #071f27; }.cargo-counter::before { inset: 8px 0 4px 55px; }.hud-box.timer::before { inset: 8px 0 4px 72px; }.cargo-counter span, .cargo-counter strong, .hud-box.timer span, .hud-box.timer strong { position: relative; z-index: 1; }.level-plank { text-shadow: none; font-size: 0; }
.bottom-strip { grid-template-columns: 1.2fr repeat(3, 1fr) 1.2fr; margin-top: 18px; border: 2px solid #2cc7c2; border-radius: 14px; background: linear-gradient(135deg, rgb(7 48 53 / .95), rgb(7 77 66 / .92)); color: #efffe7; box-shadow: inset 0 0 0 1px rgb(205 248 226 / .16); }
.bottom-heading { color: #63e5d5; text-shadow: none; }
.bottom-strip b { background: #f4c842; }
.finish-note { color: #8ff5c3; }

@media (max-width: 980px) { .game-board { padding: 12px; } .scene-grid { grid-template-columns: 1fr; gap: 12px; } .left-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .farm-landmarks, .right-rail { display: none; } .start-gate { margin: 0; height: 90px; } .field-frame { transform: rotateX(5deg); } }
@media (max-width: 560px) { .game-board { padding: 8px; } .hud { grid-template-columns: 1fr 1fr 1fr 40px; } .title-plank { height: 56px; } .cargo-counter, .hud-box.timer { background-image: none; background: linear-gradient(135deg, rgb(8 43 54 / .96), rgb(9 73 77 / .92)); } .cargo-counter::before, .hud-box.timer::before { display: none; } .hud-box strong { font-size: 16px; } .left-rail { grid-template-columns: 1fr; } .instruction-panel { border-radius: 14px; } .field-frame { padding: 4px; border-width: 2px; } .bottom-strip { border-radius: 10px; } }

@media (min-width: 1450px) { .hud { grid-template-columns: 382px 18px 200px 130px 285px 245px 240px; gap: 0; } .title-plank { grid-column: 1; height: 90px; } .hud-box:not(.timer) { grid-column: 3; min-height: 90px; } .level-plank { grid-column: 5; min-height: 90px; } .hud-box.timer { grid-column: 7; min-height: 90px; } .restart-button { display: none; } .scene-grid { grid-template-columns: 280px minmax(560px, 1fr) 260px; min-height: 700px; } .field-wrap { align-items: flex-start; padding-top: 8px; } .field-frame { position: relative; top: -30px; left: 8px; } .field-grid { aspect-ratio: 17 / 13; } .map-tile { overflow: visible; } .tractor-sprite { left: -25%; top: -25%; width: 150%; height: 150%; } .farm-landmarks { height: 350px; } .farmhouse { left: -12px; width: 400px; height: 310px; } .office-people { z-index: 10; } .start-gate { width: 340px; height: 170px; margin: -6px 0 8px -15px; } .instruction-panel { width: 310px; height: 270px; margin-left: -10px; padding: 12px; overflow: hidden; } .instruction-panel p { min-height: 40px; margin-bottom: 7px; font-size: 12px; } .field-legend { gap: 3px; margin-bottom: 6px; } .dpad { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 32px); gap: 3px; margin-top: 6px; } .dpad button { font-size: 17px; } .right-rail { padding-top: 16px; } .warehouse-art { width: 256px; height: 450px; margin-left: 28px; } .goal-card { display: none; } .bottom-strip { display: none; } }
@media (min-width: 981px) and (max-width: 1449px) { .field-wrap { align-items: flex-start; padding-top: 8px; } .field-frame { position: relative; top: -30px; } .map-tile { overflow: visible; } .tractor-sprite { left: -15%; top: -15%; width: 130%; height: 130%; } .farmhouse { width: 320px; height: 260px; } .start-gate { width: 300px; height: 150px; margin-left: -10px; } }
@media (min-width: 1450px) { .field-frame { top: -25px; left: 15px; width: calc(100% - 16px); } .field-grid { aspect-ratio: 17 / 13.7; } }
@media (min-width: 1450px) { .farmhouse { left: -4px; top: 16px; z-index: 2; width: 370px; height: 300px; } .title-plank, .cargo-counter, .level-plank, .hud-box.timer { left: 0; } }
.wheat-tile { background: linear-gradient(rgb(255 205 67 / .08), rgb(107 62 14 / .16)), url('./assets/wheat-fill.png') center / cover; }
.crop-tile:not(.wheat-tile) { background: linear-gradient(rgb(16 65 47 / .16), rgb(10 48 36 / .25)), url('./assets/hedge-tile.png') center / 180% 180%; box-shadow: inset 0 0 0 1px rgb(12 50 43 / .6), inset 0 -5px 0 rgb(11 41 35 / .2); }
.map-tile:nth-child(3n + 1).crop-tile:not(.wheat-tile) { background-position: 20% 24%; }
.map-tile:nth-child(3n + 2).crop-tile:not(.wheat-tile) { background-position: 76% 36%; }
.map-tile:nth-child(3n).crop-tile:not(.wheat-tile) { background-position: 44% 78%; }

/* Mechanics layer: readable cargo states, warehouse targets, and a stable HUD. */
.hud { align-items: stretch; }
.hud > * { min-width: 0; }
.level-plank { width: min(285px, 100%); min-width: 0; height: 96px; aspect-ratio: 285 / 96; align-self: center; justify-self: center; padding: 0; background-size: 100% 100%; }
.hud-box { display: grid; align-content: center; gap: 2px; }
.hud-box small { position: relative; z-index: 1; color: #bfe9d5; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.capacity-counter { background: linear-gradient(135deg, rgb(8 43 54 / .94), rgb(9 73 77 / .9)); }
.warehouse-road { position: relative; height: 60px; overflow: hidden; margin-top: -3px; border-radius: 8px; background: linear-gradient(180deg, transparent 0 42%, rgb(62 99 74 / .7) 43% 62%, transparent 63%), linear-gradient(90deg, rgb(42 83 65 / .6), rgb(104 137 88 / .38)); }
.warehouse-road .delivery-truck { position: absolute; z-index: 2; left: -90px; bottom: 4px; width: 74px; height: 54px; object-fit: contain; animation: truck-road-loop 11s linear infinite; }
@keyframes truck-road-loop { 0%, 8% { transform: translateX(0); opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translateX(360px); opacity: 0; } }
.warehouse-list { display: grid; gap: 6px; margin-top: 8px; }
.warehouse-list h2 { margin: 0 0 1px; color: #c8f9d8; font-size: 13px; letter-spacing: .08em; }
.warehouse-card { display: grid; gap: 2px; padding: 7px 9px; border: 1px solid rgb(199 240 211 / .32); border-left: 4px solid var(--warehouse-color); border-radius: 7px; background: rgb(4 43 51 / .72); }
.warehouse-card span { color: var(--warehouse-color); font-size: 10px; font-weight: 900; }
.warehouse-card strong { color: #f4ffe9; font-size: 11px; }
.warehouse-card small { color: #b9d8ca; font-size: 8px; }
.warehouse-card-active { box-shadow: 0 0 0 2px var(--warehouse-color), 0 5px 10px rgb(0 0 0 / .25); }
.warehouse-card-yellow { --warehouse-color: #ffd84d; }.warehouse-card-blue { --warehouse-color: #48d4ff; }.warehouse-card-green { --warehouse-color: #a8df58; }
.warehouse-tile { box-shadow: inset 0 0 0 2px var(--warehouse-color); }
.warehouse-yellow { --warehouse-color: #f6ca4d; }.warehouse-blue { --warehouse-color: #6ed7ef; }.warehouse-green { --warehouse-color: #9bce55; }
.warehouse-marker { position: absolute; z-index: 4; left: 50%; top: 14%; display: grid; gap: 1px; min-width: 64px; padding: 3px 4px; transform: translateX(-50%); border: 1px solid var(--warehouse-color); border-radius: 4px; background: rgb(5 35 40 / .9); color: #fff; text-align: center; box-shadow: 0 2px 4px rgb(0 0 0 / .35); }
.warehouse-marker b { font-size: 7px; }.warehouse-marker small { color: var(--warehouse-color); font-size: 6px; font-weight: 900; }
.warehouse-marker-yellow { --warehouse-color: #ffd84d; }.warehouse-marker-blue { --warehouse-color: #48d4ff; }.warehouse-marker-green { --warehouse-color: #a8df58; }
.cargo-marker { position: absolute; z-index: 3; inset: 8%; display: grid; place-items: center; }
.cargo-marker .bale-sprite { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 2px rgb(63 28 5 / .5)); }
.cargo-marker small { position: absolute; z-index: 2; bottom: -4px; padding: 2px 3px; border-radius: 3px; background: #143b3b; color: #fff; font-size: 6px; font-weight: 900; text-transform: uppercase; }
.cargo-yellow .bale-sprite { filter: drop-shadow(0 3px 2px rgb(63 28 5 / .5)); }.cargo-blue .bale-sprite { filter: drop-shadow(0 3px 2px rgb(5 30 63 / .5)); }.cargo-green .bale-sprite { filter: drop-shadow(0 3px 2px rgb(31 51 10 / .55)); }
.important-cargo { animation: cargo-float 1.8s ease-in-out infinite; }.optional-cargo { opacity: .86; }.cargo-state-growing { opacity: .96; }.cargo-state-growing .bale-sprite { opacity: .28; transform: scale(.58); filter: grayscale(.65) sepia(.4) saturate(.55); }.cargo-state-growing::before { content: ''; position: absolute; z-index: 1; left: 29%; top: 39%; width: 42%; height: 31%; border: 2px solid #75ad62; border-radius: 50% 50% 45% 45%; background: radial-gradient(ellipse at 50% 70%, #6c873b 0 32%, #9eaf55 33% 58%, transparent 59%); }.cargo-state-growing::after { content: ''; position: absolute; z-index: 2; left: 35%; top: 16%; width: 30%; height: 36%; background: linear-gradient(64deg, transparent 43%, #8acb69 44% 55%, transparent 56%) left center / 50% 100% no-repeat, linear-gradient(-64deg, transparent 43%, #65b45e 44% 55%, transparent 56%) right center / 50% 100% no-repeat; }.cargo-state-growing small { background: #386c46; color: #d9ffb9; }.cargo-state-urgent { animation: cargo-alert .55s steps(2, start) infinite; }.cargo-state-spoiled { filter: grayscale(1); }
@keyframes cargo-float { 50% { transform: translateY(-3%); } } @keyframes cargo-alert { 50% { filter: brightness(1.65); } }
.tractor-load {
  position: absolute;
  z-index: 6;
  top: -10%;
  right: -20%;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 2px;
  width: 29%;
  height: 122%;
  padding: 2px 2px 1px;
  border: 1px solid rgb(220 255 239 / .76);
  border-radius: 999px;
  background: linear-gradient(145deg, rgb(23 69 64 / .94), rgb(4 29 31 / .96));
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / .24),
    inset -1px -2px 3px rgb(0 0 0 / .4),
    0 2px 4px rgb(0 0 0 / .5);
  pointer-events: none;
}
.tractor-load-slots {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 0;
}
.tractor-load-slot {
  display: block;
  width: clamp(7px, 84%, 11px);
  aspect-ratio: 1;
  flex: 0 1 auto;
  border: 1px solid rgb(215 245 229 / .58);
  border-radius: 50%;
  box-shadow: inset 0 -1px 2px rgb(0 0 0 / .48), 0 1px 2px rgb(0 0 0 / .38);
}
.tractor-load-slot-empty {
  background: radial-gradient(circle at 35% 28%, rgb(186 225 209 / .34), rgb(40 82 76 / .5) 44%, rgb(6 31 33 / .92) 75%);
}
.tractor-load-slot-filled {
  border-color: rgb(255 255 235 / .92);
  box-shadow: inset 0 -2px 3px rgb(0 0 0 / .34), inset 1px 1px 1px rgb(255 255 255 / .56), 0 0 4px var(--slot-glow);
}
.load-slot-yellow { --slot-glow: rgb(255 211 65 / .9); background: radial-gradient(circle at 32% 25%, #fff7a9, #f5c52f 42%, #b66c0c 78%); }
.load-slot-blue { --slot-glow: rgb(68 207 255 / .9); background: radial-gradient(circle at 32% 25%, #d8fbff, #38bce8 42%, #14658f 78%); }
.load-slot-green { --slot-glow: rgb(159 225 71 / .9); background: radial-gradient(circle at 32% 25%, #ecffc0, #8ecf3e 42%, #3f781b 78%); }
.tractor-load-remaining {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 20%;
  padding: 8% 0 3%;
  border-top: 1px solid rgb(194 237 220 / .34);
  color: #f4fff4;
  line-height: .78;
  text-shadow: 0 1px 1px #001b18;
}
.tractor-load-remaining b { font-size: clamp(6px, .65vw, 10px); }
.tractor-load-remaining small { color: #8ed9c6; font-size: clamp(3px, .28vw, 5px); font-weight: 900; }
.priority-panel { display: grid; gap: 3px; margin: 0 0 8px; padding: 7px 8px; border: 1px solid rgb(83 218 191 / .52); border-radius: 7px; background: rgb(5 47 54 / .7); }
.priority-panel span { color: #89dccc; font-size: 8px; font-weight: 900; }.priority-panel strong { color: #fff; font-size: 11px; }.priority-yellow { color: #f7d261 !important; }.priority-blue { color: #75daf1 !important; }.priority-green { color: #b4e76a !important; }
.priority-queue { display: grid; gap: 1px; color: #b9d8ca; font-size: 9px; }
.status-warning { color: #ffe28e !important; }.status-danger { color: #ffaaa1 !important; }.status-success { color: #a9f1b4 !important; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; max-width: min(420px, calc(100vw - 32px)); padding: 10px 14px; transform: translateX(-50%); border: 2px solid #eac957; border-radius: 8px; background: #173c39; color: #fff4bf; box-shadow: 0 8px 20px rgb(0 0 0 / .35); font-weight: 800; text-align: center; }
.result-overlay { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(5 28 27 / .7); backdrop-filter: blur(4px); }
.result-panel { width: min(430px, 100%); padding: 28px 24px 24px; border: 2px solid #55d8c6; border-radius: 16px; background: linear-gradient(145deg, #063d47, #0a665a); color: #fff; text-align: center; box-shadow: 0 22px 60px rgb(0 0 0 / .5); }
.result-overlay[hidden], .toast[hidden] { display: none; }
.result-lost { border-color: #ef9a77; background: linear-gradient(145deg, #4a2930, #6b3b31); }.result-kicker { color: #9cf0d4; font-size: 11px; font-weight: 900; letter-spacing: .12em; }.result-lost .result-kicker { color: #ffc4a9; }.result-panel h2 { margin: 8px 0 4px; font-size: clamp(24px, 4vw, 34px); }.result-time { display: block; margin: 4px 0 12px; color: #ffe174; font-size: 42px; line-height: 1; }.result-panel p { margin: 0 auto 18px; max-width: 340px; color: #e5fff0; line-height: 1.4; }.result-restart { border: 1px solid #8bead4; border-radius: 7px; padding: 10px 14px; background: #0c3b45; color: #fff; cursor: pointer; font-weight: 900; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
@media (max-width: 980px) { .level-plank { width: 100%; max-width: 285px; height: auto; min-height: 64px; }.warehouse-road, .warehouse-list { display: none; } }
@media (max-width: 560px) { .capacity-counter { display: none; }.hud { grid-template-columns: 1fr 1fr 1fr 40px; }.title-plank { grid-column: span 2; }.hud-box.timer { grid-column: 3; }.pause-button { grid-column: 4; grid-row: 1; }.restart-button { grid-column: 4; grid-row: 2; }.level-plank { display: none; }.priority-panel { margin-bottom: 5px; }.field-legend { gap: 3px; }.cargo-marker small { font-size: 5px; } }
/* Final responsive geometry: seven header items keep their own grid tracks. */
.hud { grid-template-columns: minmax(220px, 1.3fr) 150px 150px minmax(160px, .8fr) 180px 44px 44px; gap: 8px; }
.level-plank { height: auto; min-height: 0; }
.pause-button { width: 44px; height: 44px; align-self: center; justify-self: center; border: 2px solid #2cc7c2; border-radius: 50%; background: #0c3b45; color: #d9ffff; cursor: pointer; font-weight: 900; box-shadow: inset 0 0 0 1px rgb(201 250 226 / .28), 0 8px 18px rgb(0 0 0 / .28); }
.pause-button:hover { background: #155e51; }
@media (min-width: 1450px) {
  .hud { grid-template-columns: minmax(320px, 382px) 190px 150px 285px 240px 46px; justify-content: space-between; gap: 8px; }
  .title-plank { grid-column: 1; }
  .hud-box.cargo-counter { grid-column: 2; }
  .hud-box.capacity-counter { grid-column: 3; }
  .level-plank { grid-column: 4; }
  .hud-box.timer { grid-column: 5; }
  .pause-button { grid-column: 6; grid-row: 1; }
  .restart-button { display: none; }
}
@media (min-width: 981px) and (max-width: 1449px) { .hud { grid-template-columns: minmax(220px, 1.3fr) 150px 150px minmax(160px, .8fr) 180px 44px 44px; } }
@media (max-width: 980px) { .hud { grid-template-columns: repeat(4, minmax(0, 1fr)) 40px; } .title-plank { grid-column: span 2; } .level-plank { width: 100%; max-width: 285px; } }
@media (max-width: 560px) { .pause-button { grid-column: 4; grid-row: 1; } .restart-button { grid-column: 4; grid-row: 2; } }

/* Final layout guard: do not reserve desktop height below the field. */
@media (min-width: 981px) {
  .scene-grid { min-height: 0; align-items: start; }
  .field-wrap, .left-rail, .right-rail { align-self: start; }
  .bottom-strip { margin-top: 10px; }
  .intro-warehouse { width: 112px; height: 96px; object-fit: cover; object-position: center 62%; }
}

/* Keep one actor on the field layer so each grid step can animate continuously. */
.tile-layer { display: contents; }
.tractor-sprite { left: 0; top: 0; width: calc(100% / var(--cols)); height: calc(100% / var(--rows)); box-sizing: border-box; padding: 6%; transform: translate(var(--tractor-left), var(--tractor-top)); transition: transform 170ms cubic-bezier(.2, .75, .25, 1); will-change: transform; }

/* Final medium-desktop balance: keep the field and left rail visually aligned. */
@media (min-width: 981px) and (max-width: 1449px) {
  .farm-landmarks { height: 155px; }
  .farmhouse { width: 210px; height: 155px; }
  .office-people { left: 118px; width: 46px; height: 64px; }
  .start-gate { width: 220px; height: 84px; }
  .field-grid { aspect-ratio: 17 / 15; }
}

.diagnostic-button { width: 100%; margin-top: 9px; border: 1px solid #6a9b7b; border-radius: 5px; padding: 6px 7px; background: #285748; color: #e8ffe3; cursor: pointer; font-size: 10px; font-weight: 900; }
.diagnostic-button:hover { background: #34725a; }
.diagnostic-status { display: block; min-height: 13px; margin-top: 3px; color: #2c6543; font-size: 9px; font-weight: 800; text-align: center; }

/* Actor coordinates are measured in field cells, not in sprite dimensions. */
.tractor-sprite { left: var(--tractor-left); top: var(--tractor-top); width: calc(90% / var(--cols)); height: calc(90% / var(--rows)); transform: translate(-50%, -50%); }

/* Match the field height to the compact desktop side rail so the field does not end in a long empty band. */
@media (min-width: 981px) and (max-width: 1449px) {
  .farm-landmarks { height: 155px; }
  .farmhouse { width: 210px; height: 155px; }
  .office-people { left: 118px; width: 46px; height: 64px; }
  .start-gate { width: 220px; height: 84px; }
  .field-grid { aspect-ratio: 17 / 15; }
}
@media (max-width: 560px) { .cargo-counter { grid-column: 1 / span 2; grid-row: 2; min-height: 56px; } .restart-button { grid-column: 4; grid-row: 2; } }
@media (min-width: 981px) and (max-width: 1449px) {
  .hud { grid-template-columns: minmax(200px, 1.35fr) minmax(105px, .8fr) minmax(105px, .8fr) minmax(130px, 1fr) minmax(130px, 1fr) 44px 44px; gap: 8px; }
  .title-plank { grid-column: 1; }
  .cargo-counter { grid-column: 2; }
  .hud-box.capacity-counter { grid-column: 3; }
  .level-plank { grid-column: 4; width: 100%; min-height: 76px; height: auto; }
  .hud-box.timer { grid-column: 5; min-width: 0; }
  .pause-button { grid-column: 6; grid-row: 1; }
  .restart-button { grid-column: 7; grid-row: 1; }
}

/* Keep the medium layout anchored to the field instead of stretching side rails. */
@media (min-width: 981px) and (max-width: 1449px) {
  .scene-grid { grid-template-columns: 250px minmax(0, 1fr) 220px; gap: 14px; min-height: 0; align-items: start; }
  .field-wrap { align-items: flex-start; padding-top: 0; }
  .field-frame { top: 0; }
  .farm-landmarks { height: 190px; }
  .farmhouse { left: -2px; top: 0; width: 235px; height: 185px; }
  .office-people { left: 132px; width: 52px; height: 72px; }
  .start-gate { width: 245px; height: 100px; margin: -4px 0 8px -6px; }
  .instruction-panel { width: 250px; padding: 10px; }
  .instruction-panel h1 { margin-bottom: 5px; font-size: 18px; }
  .instruction-panel p { min-height: 38px; margin-bottom: 6px; font-size: 11px; }
  .priority-panel { margin-bottom: 6px; padding: 6px; }
  .field-legend { gap: 3px; margin-bottom: 6px; font-size: 9px; }
  .legend-swatch { width: 15px; height: 15px; flex-basis: 15px; }
  .control-caption { padding: 4px; font-size: 11px; }
  .dpad { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 32px); gap: 3px; margin-top: 6px; }
  .dpad button { font-size: 17px; }
  .right-rail { padding-top: 0; }
  .warehouse-art { height: 250px; }
  .delivery-truck { width: 78px; height: 60px; }
  .warehouse-list { gap: 4px; margin-top: 6px; }
  .warehouse-card { padding: 5px 7px; }
}

/* On small screens the field is the main content; controls follow it, never float beside it. */
@media (max-width: 980px) {
  .scene-grid { grid-template-columns: 1fr; grid-template-areas: 'field' 'left'; align-items: start; }
  .field-wrap { grid-area: field; align-items: flex-start; }
  .left-rail { grid-area: left; display: block; }
  .instruction-panel { width: 100%; }
}

/* Current gameplay details: real direction views, deadline dials, and cargo inventory. */
.tractor-right { background-image: url('./assets/tractor-right.png'); }
.tractor-left { background-image: url('./assets/tractor-left.png'); }
.tractor-up { background-image: url('./assets/tractor-back.png'); }
.tractor-down { background-image: url('./assets/tractor-front.png'); }
.cargo-clock { position: absolute; z-index: 4; top: 0; right: 0; width: 31%; aspect-ratio: 1; border: 2px solid #f8e9a0; border-radius: 50%; background: conic-gradient(var(--clock-color, #f4cf4e) var(--clock-angle, 360deg), rgb(16 52 44 / .76) 0); box-shadow: 0 1px 4px rgb(0 0 0 / .5); }
.cargo-clock::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #173f3b; }
.cargo-state-urgent .cargo-clock { --clock-color: #f1785f; }
.cargo-state-ready .cargo-clock { --clock-color: #f5d04d; }
.tractor-loadout { display: grid; gap: 5px; margin: 0 0 8px; padding: 7px 8px; border: 1px solid rgb(83 218 191 / .52); border-radius: 7px; background: rgb(5 47 54 / .7); }
.loadout-heading { display: flex; justify-content: space-between; color: #a6f0da; font-size: 9px; font-weight: 900; letter-spacing: .05em; }
.loadout-heading strong { color: #fff2a8; }
.loadout-item { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px; }
.loadout-dot { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 900; }
.loadout-dot img { width: 100%; height: 100%; object-fit: contain; }
.loadout-yellow { background: #aa7b22; }.loadout-blue { background: #267f98; }.loadout-green { background: #628936; }
.loadout-item b, .loadout-item small { display: block; }.loadout-item b { color: #fff; font-size: 10px; }.loadout-item small { color: #bbdfd1; font-size: 8px; }
.tractor-loadout > p { margin: 0; color: #bbdfd1; font-size: 9px; line-height: 1.25; }
.intro-asset { width: 82px; height: 64px; object-fit: contain; filter: drop-shadow(0 5px 4px rgb(0 0 0 / .35)); }
.intro-tractor { width: 92px; }.intro-grain { width: 60px; }.intro-warehouse { width: 82px; }
.intro-cargo-dot img { width: 100%; height: 100%; object-fit: contain; }
.result-level-complete { border-color: #f4cf4e; background: linear-gradient(145deg, #315a3d, #0a665a); }
.result-level-complete .result-kicker { color: #ffe174; }
.result-won h2 { font-size: 28px; line-height: 1.15; text-wrap: balance; }
.result-time-label { display: block; margin: 18px 0 8px; color: #e5fff0; font-size: 16px; }
.result-time-label[hidden] { display: none; }
.result-totals { margin: 20px 0 24px; text-align: left; font-size: 18px; line-height: 1.3; }
.result-totals div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgb(229 255 240 / .3); }
.result-totals dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cargo colors are the route language: make every destination distinct at a glance. */
.cargo-yellow .bale-sprite { filter: drop-shadow(0 3px 2px rgb(63 28 5 / .5)); }
.cargo-blue .bale-sprite { filter: drop-shadow(0 3px 2px rgb(5 30 63 / .5)); }
.cargo-green .bale-sprite { filter: drop-shadow(0 3px 2px rgb(31 51 10 / .55)); }
.legend-yellow { background: #aa7b22 url('./assets/bale-wheat.png') center / contain no-repeat; }
.legend-blue { background: #267f98 url('./assets/bale-seed.png') center / contain no-repeat; }
.legend-green { background: #628936 url('./assets/bale-feed.png') center / contain no-repeat; }

/* Keep the desktop page height tied to the actual field, not a reserved grid box. */
@media (min-width: 981px) {
  .scene-grid { min-height: 0; align-items: start; }
  .field-wrap, .left-rail, .right-rail { align-self: start; }
  .bottom-strip { margin-top: 10px; }
  .intro-warehouse { width: 112px; height: 96px; object-fit: cover; object-position: center 62%; }
}

/* Start onboarding: the rules are part of the playable flow, not a separate page. */
.intro-overlay { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(3 25 28 / .78); backdrop-filter: blur(7px); }
.intro-panel { width: min(580px, 100%); min-height: 430px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 30px 24px; border: 2px solid #4ed8c9; border-radius: 16px; background: linear-gradient(145deg, #063a46, #0b665d 72%, #276e58); color: #f5fff1; box-shadow: 0 24px 70px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(220 255 225 / .18); }
.intro-progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.intro-progress span { display: block; width: 30px; height: 5px; border-radius: 3px; background: rgb(217 255 240 / .25); }
.intro-progress span.active { background: #f5d05a; box-shadow: 0 0 10px rgb(245 208 90 / .65); }
.intro-screen { display: grid; align-content: center; flex: 1; min-height: 310px; text-align: center; }
.intro-kicker { color: #91f2d1; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.intro-screen h2 { max-width: 480px; margin: 12px auto 14px; color: #fff; font-size: clamp(24px, 5vw, 36px); line-height: 1.08; text-shadow: 0 3px 12px rgb(0 0 0 / .3); }
.intro-screen p { max-width: 440px; margin: 0 auto; color: #e4fff0; font-size: 15px; line-height: 1.5; }
.intro-visual { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 8px auto 6px; color: #f9d25b; font-size: 43px; }
.intro-visual b { color: #8de7c6; font-size: 26px; }
.intro-fact { display: grid; gap: 4px; width: min(380px, 100%); margin: 24px auto 0; padding: 13px 16px; border: 1px solid rgb(145 242 209 / .5); border-radius: 8px; background: rgb(2 37 43 / .42); }
.intro-fact strong { color: #f9d25b; font-size: 11px; letter-spacing: .12em; }.intro-fact span { color: #fff; font-weight: 800; }
.intro-cargo-list { display: grid; gap: 8px; width: min(420px, 100%); margin: 6px auto 20px; text-align: left; }.intro-cargo-list > div { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgb(145 242 209 / .28); border-radius: 8px; background: rgb(2 37 43 / .4); }.intro-cargo-dot { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; font-size: 17px; }.intro-dot-yellow { background: #b98a2d; }.intro-dot-blue { background: #287c9b; }.intro-dot-green { background: #6f983e; }.intro-cargo-list strong { color: #fff; font-size: 14px; }.intro-cargo-list small { color: #b9e8d1; font-size: 12px; text-align: right; }
.intro-visual-small { gap: 9px; margin-bottom: 12px; font-size: 27px; }.intro-visual-small span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #8de7c6; border-radius: 6px; background: rgb(2 37 43 / .5); color: #fff; }.intro-visual-small b { margin: 0 5px; font-size: 13px; }.intro-visual-small strong { color: #fff; font-size: 16px; letter-spacing: .12em; }
.intro-gamepad-guide { display: grid; justify-items: center; gap: 6px; margin: 0 auto 12px; }
.intro-gamepad-guide > strong { color: #fff; font-size: 14px; }
.intro-gamepad-guide > small { color: #b9e8d1; font-size: 11px; font-weight: 800; }
.gamepad-shape { position: relative; width: 154px; height: 78px; border: 2px solid #8de7c6; border-radius: 34px 34px 25px 25px; background: linear-gradient(180deg, #173f49, #072b35); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .08), 0 8px 20px rgb(0 0 0 / .28); }
.gamepad-cross { position: absolute; left: 24px; top: 20px; display: grid; width: 30px; height: 30px; place-items: center; color: #e9fff7; font-size: 31px; font-weight: 900; line-height: 1; }
.gamepad-stick { position: absolute; left: 64px; top: 37px; width: 19px; height: 19px; border: 3px solid #87cfc0; border-radius: 50%; background: #102f39; }
.gamepad-button { position: absolute; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #072b35; font-size: 10px; font-weight: 900; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .22); }
.gamepad-button-a { right: 22px; top: 18px; background: #89e574; }
.gamepad-button-b { right: 48px; top: 37px; background: #f1d15b; }
.intro-rules { display: grid; gap: 12px; width: min(440px, 100%); margin: 0 auto; padding: 0; list-style: none; text-align: left; }.intro-rules li { position: relative; padding-left: 25px; color: #e4fff0; line-height: 1.4; }.intro-rules li::before { content: '✓'; position: absolute; left: 0; color: #f9d25b; font-weight: 900; }
.intro-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; margin-top: 12px; }.intro-actions button { min-height: 44px; border: 1px solid #8de7c6; border-radius: 7px; padding: 10px 17px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 900; }.intro-back { background: transparent; color: #c9f7df; }.intro-next, .intro-play { margin-left: auto; background: #f1c84e; color: #203b28; box-shadow: 0 4px 0 #9a7021; }.intro-play { padding-inline: 26px !important; }.intro-actions button:hover { filter: brightness(1.08); }.intro-actions button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.intro-screen[hidden], .intro-overlay[hidden] { display: none; }
@media (max-width: 560px) { .intro-overlay { padding: 10px; }.intro-panel { width: calc(100vw - 20px); min-height: min(570px, calc(100vh - 20px)); padding: 22px 16px 16px; }.intro-screen { min-height: 0; }.intro-screen h2 { font-size: 25px; }.intro-screen p { font-size: 14px; }.intro-visual { gap: 9px; font-size: 35px; }.intro-visual b { font-size: 21px; }.intro-cargo-list > div { grid-template-columns: 34px 1fr; }.intro-cargo-list small { grid-column: 2; margin-top: -7px; text-align: left; }.intro-actions button { padding-inline: 13px; } }

/* Final visual pass: the first screen shows the same bale as the field, and the warehouse reads as the destination. */
.intro-bale { width: 72px; height: 72px; }
.intro-warehouse { width: 112px; height: 96px; object-fit: cover; object-position: center 62%; }
@media (min-width: 981px) and (max-width: 1449px) {
  .scene-grid { grid-template-columns: 250px minmax(0, 1fr) 270px; }
  .warehouse-art { height: 340px; }
  .delivery-truck { width: 92px; height: 70px; }
}
@media (min-width: 1450px) {
  .scene-grid { grid-template-columns: 280px minmax(560px, 1fr) 300px; }
  .warehouse-art { width: 292px; height: 510px; margin-left: 8px; }
}

/* Keep the field and the route summary close together on desktop layouts. */
@media (min-width: 981px) {
  .scene-grid { min-height: 0; align-items: start; }
  .field-wrap, .left-rail, .right-rail { align-self: start; }
  .bottom-strip { margin-top: 10px; }
}

/* Final medium-desktop balance: keep the field and left rail visually aligned. */
@media (min-width: 981px) and (max-width: 1449px) {
  .farm-landmarks { height: 155px; }
  .farmhouse { width: 210px; height: 155px; }
  .office-people { left: 118px; width: 46px; height: 64px; }
  .start-gate { width: 220px; height: 84px; }
  .field-grid { aspect-ratio: 17 / 15; }
}

/* Tablet and narrow desktop: the field owns the full row after all desktop overrides. */
@media (min-width: 561px) and (max-width: 1100px) {
  .game-board { padding: 12px; }
  .hud { grid-template-columns: minmax(260px, 2fr) minmax(140px, 1fr) minmax(150px, 1fr) 44px 44px; gap: 6px; }
  .title-plank { grid-column: 1; height: 64px; }
  .cargo-counter { grid-column: 2; }
  .capacity-counter, .level-plank { display: none; }
  .hud-box.timer { grid-column: 3; }
  .pause-button { grid-column: 4; grid-row: 1; }
  .restart-button { grid-column: 5; grid-row: 1; }
  .scene-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'field' 'left'; gap: 12px; }
  .field-wrap { grid-area: field; width: 100%; height: auto; }
  .field-frame { width: 100%; height: auto; }
  .field-grid { width: 100%; height: auto; aspect-ratio: 17 / 12; }
  .left-rail { grid-area: left; display: block; width: 100%; }
  .right-rail, .farm-landmarks, .start-gate { display: none; }
  .instruction-panel { width: 100%; }
  .bottom-strip { grid-template-columns: 1fr 1fr; }
}

/* Responsive driving: interpolate cell movement and cross-fade directional views while turning. */
.tractor-sprite {
  background: none !important;
  padding: 0;
  transition: left 145ms cubic-bezier(.18, .72, .22, 1), top 145ms cubic-bezier(.18, .72, .22, 1);
  will-change: left, top;
}
.tractor-frame { position: absolute; z-index: 1; inset: -26%; background-position: center; background-repeat: no-repeat; background-size: contain; transform-origin: 50% 62%; }
.tractor-frame-current { opacity: 1; }
.tractor-frame-previous { opacity: 0; }
.tractor-turning .tractor-frame-current { animation: tractor-turn-in 180ms cubic-bezier(.2, .78, .28, 1) both; }
.tractor-turning .tractor-frame-previous { animation: tractor-turn-out 180ms ease-out both; }
@keyframes tractor-turn-in { 0% { opacity: 0; transform: scale(.9) rotate(-4deg); } 55% { opacity: .72; } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes tractor-turn-out { 0% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 0; transform: scale(.91) rotate(4deg); } }
.tractor-slowed .tractor-frame { animation: tractor-blink .32s steps(2, start) infinite; }

/* Growing cargo is a crop patch, not a faded finished bale. */
.cargo-state-growing { opacity: 1; animation: crop-grow-breathe 1.7s ease-in-out infinite; }
.cargo-state-growing::before, .cargo-state-growing::after { display: none; }
.cargo-state-growing .bale-sprite,
.cargo-state-growing.cargo-yellow .bale-sprite,
.cargo-state-growing.cargo-blue .bale-sprite,
.cargo-state-growing.cargo-green .bale-sprite { inset: -5%; width: 110%; height: 110%; opacity: 1; transform: none; filter: saturate(1.22) brightness(1.2) drop-shadow(0 3px 3px rgb(29 45 20 / .48)); }
.cargo-state-growing .cargo-clock { --clock-color: #8ee36f; width: 35%; border-color: #dff8a7; }
@keyframes crop-grow-breathe { 50% { transform: translateY(-2%) scale(1.035); filter: brightness(1.08); } }

/* Five required objects remain accounted for even after a bale leaves the map. */
.mission-progress { display: grid; gap: 5px; margin: 0 0 8px; padding: 7px 8px; border: 1px solid rgb(95 213 189 / .42); border-radius: 7px; background: rgb(4 38 45 / .7); }
.mission-heading { display: flex; align-items: center; justify-content: space-between; color: #a5eed7; font-size: 8px; font-weight: 900; }
.mission-heading strong { color: #fff1a1; font-size: 10px; }
.mission-items { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mission-item { display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: center; min-height: 27px; overflow: hidden; border: 1px solid rgb(211 244 223 / .2); border-left: 3px solid var(--mission-color); border-radius: 5px; padding: 3px 4px; background: rgb(10 60 62 / .64); }
.mission-item b { grid-row: 1 / span 2; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: var(--mission-color); color: #173230; font-size: 8px; }
.mission-cargo-icon img { width: 21px; height: 21px; max-width: none; object-fit: contain; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .45)); }
.mission-item span { min-width: 0; overflow: hidden; color: #fff; font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.mission-item small { min-width: 0; overflow: hidden; color: #b9d9ca; font-size: 6px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.mission-yellow { --mission-color: #ffd548; }.mission-blue { --mission-color: #42d6ff; }.mission-green { --mission-color: #a8df58; }
.mission-state-loaded { background: color-mix(in srgb, var(--mission-color) 24%, #083d43); box-shadow: inset 0 0 0 1px var(--mission-color); }
.mission-state-loaded small { color: #fff3a6; }
.mission-state-delivered { opacity: .68; background: #164f43; }
.mission-state-delivered b { background: #7fe49c; }
.mission-state-growing small { color: #b8ec86; }
.mission-state-urgent { animation: mission-urgent .65s steps(2, start) infinite; }
@keyframes mission-urgent { 50% { border-color: #fff0a2; filter: brightness(1.35); } }

/* Loaded cargo and its destination share the same strong color signal. */
.loadout-item { border-left: 3px solid var(--loadout-color); border-radius: 5px; padding: 4px 5px; background: rgb(7 57 58 / .72); }
.loadout-item-yellow { --loadout-color: #ffd548; }.loadout-item-blue { --loadout-color: #42d6ff; }.loadout-item-green { --loadout-color: #a8df58; }
.loadout-destination { color: var(--loadout-color) !important; font-weight: 900; }
.loadout-dot img { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .45)); }
.warehouse-target { position: relative; z-index: 2; box-shadow: inset 0 0 0 4px var(--warehouse-color), 0 0 18px var(--warehouse-color); animation: warehouse-target-pulse 1s ease-in-out infinite; }
.warehouse-marker-target { min-width: 76px; border-width: 2px; background: #062f35; box-shadow: 0 0 13px var(--warehouse-color); }
.warehouse-marker-target b { color: var(--warehouse-color); font-size: 7px; }
.warehouse-card-target { border-color: var(--warehouse-color); border-left-width: 7px; background: color-mix(in srgb, var(--warehouse-color) 18%, #062f38); box-shadow: 0 0 0 1px var(--warehouse-color), 0 0 12px color-mix(in srgb, var(--warehouse-color) 65%, transparent); }
.warehouse-card-target small { color: var(--warehouse-color); font-size: 9px; font-weight: 900; }
@keyframes warehouse-target-pulse { 50% { filter: brightness(1.22); box-shadow: inset 0 0 0 3px var(--warehouse-color), 0 0 8px var(--warehouse-color); } }

@media (min-width: 1450px) { .instruction-panel { height: auto; min-height: 270px; overflow: visible; } }
@media (max-width: 560px) {
  .mission-items { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mission-item { display: flex; min-height: 25px; justify-content: center; border-left-width: 1px; padding: 3px; }
  .mission-item span, .mission-item small { display: none; }
}

/* Decorative scene life: characters leave the office and a van departs from the warehouse. */
.office-people {
  left: 118px;
  bottom: 2px;
  width: 58px;
  height: auto;
  opacity: 0;
  object-fit: contain;
  transform-origin: 50% 94%;
  filter: drop-shadow(0 5px 3px rgb(0 0 0 / .36));
  animation: people-leave-office 15s cubic-bezier(.34, .18, .24, 1) infinite;
  will-change: transform, opacity;
}
.warehouse-road {
  height: 72px;
  margin-top: -6px;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgb(29 70 54 / .18), rgb(40 88 65 / .72)),
    linear-gradient(90deg, #2f634e, #6f8c64 48%, #345f4d);
  box-shadow: inset 0 1px 0 rgb(186 228 189 / .2), inset 0 -10px 18px rgb(8 42 36 / .24);
}
.warehouse-road::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: -6%;
  right: -6%;
  top: 53%;
  height: 2px;
  transform: rotate(-1deg);
  background: repeating-linear-gradient(90deg, rgb(217 224 180 / .58) 0 18px, transparent 18px 32px);
  opacity: .55;
}
.warehouse-road .delivery-truck {
  left: 32%;
  bottom: 3px;
  width: 92px;
  height: auto;
  opacity: 0;
  object-fit: contain;
  transform-origin: 50% 82%;
  filter: drop-shadow(0 6px 3px rgb(0 0 0 / .42));
  animation: truck-leave-warehouse 14s cubic-bezier(.28, .16, .22, 1) 1.2s infinite;
  will-change: transform, opacity;
}
@keyframes people-leave-office {
  0%, 12% { opacity: 0; transform: translate(-7px, -22px) scale(.64) rotate(-1deg); }
  18% { opacity: .35; }
  25% { opacity: 1; transform: translate(0, -8px) scale(.76) rotate(0); }
  37% { transform: translate(12px, 0) scale(.82) rotate(-1.2deg); }
  49% { transform: translate(24px, 6px) scale(.87) rotate(1deg); }
  61% { transform: translate(37px, 12px) scale(.91) rotate(-.8deg); }
  75% { opacity: 1; transform: translate(52px, 19px) scale(.96) rotate(.7deg); }
  86% { opacity: 0; transform: translate(68px, 27px) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(68px, 27px) scale(1); }
}
@keyframes truck-leave-warehouse {
  0%, 13% { opacity: 0; transform: translate(-18px, -34px) scale(.62) rotate(-2deg); }
  19% { opacity: .28; }
  27% { opacity: 1; transform: translate(-8px, -18px) scale(.74) rotate(-1deg); }
  39% { transform: translate(3px, -4px) scale(.83) rotate(0); }
  53% { transform: translate(40px, 0) scale(.9) rotate(.7deg); }
  72% { opacity: 1; transform: translate(108px, 1px) scale(.96) rotate(.3deg); }
  89% { opacity: 1; transform: translate(194px, 2px) scale(1) rotate(0); }
  97%, 100% { opacity: 0; transform: translate(248px, 2px) scale(1.02) rotate(0); }
}
@media (min-width: 1450px) {
  .office-people { left: 160px; width: 72px; }
  .warehouse-road .delivery-truck { width: 102px; }
}
@media (prefers-reduced-motion: reduce) {
  .office-people, .warehouse-road .delivery-truck { opacity: 1; animation: none !important; transform: none; }
}

/* Level three moves into early autumn while keeping the same readable terrain roles. */
.field-grid[data-season="early-autumn"] {
  border-color: rgb(225 190 113 / .62);
  background: #7c6337;
  box-shadow: inset 0 0 18px rgb(89 53 18 / .34);
}
.field-grid[data-season="early-autumn"] .path-tile {
  background:
    linear-gradient(rgb(108 92 48 / .08), rgb(83 75 39 / .16)),
    url('./assets/level3-path-autumn.webp') center / 155% 155%;
  box-shadow: inset 0 0 0 1px rgb(129 97 42 / .28);
}
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile) {
  background:
    linear-gradient(rgb(51 63 22 / .06), rgb(43 54 22 / .18)),
    url('./assets/level3-hedge-autumn.webp') center / 178% 178%;
  box-shadow: inset 0 0 0 1px rgb(34 62 24 / .72), inset 0 -5px 0 rgb(57 41 16 / .22);
}
.field-grid[data-season="early-autumn"] .wheat-tile {
  background:
    linear-gradient(rgb(255 210 76 / .06), rgb(117 65 12 / .18)),
    url('./assets/level3-wheat-autumn.webp') center / 190% 190%;
  box-shadow: inset 0 0 0 2px rgb(116 66 12 / .72), inset 0 -6px 0 rgb(72 39 7 / .3);
}
.field-grid[data-season="early-autumn"] .map-tile:nth-child(3n + 1) { background-position: 24% 22%; }
.field-grid[data-season="early-autumn"] .map-tile:nth-child(3n + 2) { background-position: 72% 43%; }
.field-grid[data-season="early-autumn"] .map-tile:nth-child(3n) { background-position: 46% 78%; }

/* The supplied HUD image contains a baked-in level number; cover it with the live label. */
.level-plank::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 19% 8% 17%;
  border-radius: 14px;
  background: linear-gradient(180deg, #092e35, #071f28 72%, #0b3439);
  box-shadow: inset 0 0 12px rgb(47 204 190 / .22);
}
.level-plank span {
  position: relative;
  z-index: 2;
  display: grid;
  height: 100%;
  place-items: center;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 5px rgb(0 0 0 / .72);
}

/* Orientation-aware runtime layout. Landscape is a single-screen cockpit; portrait stacks cleanly. */
@media (orientation: landscape) {
  html, body, .game-shell { min-height: 100%; }
  .game-shell { padding: 0; }
  .game-board {
    display: grid;
    height: 100dvh;
    min-height: 360px;
    grid-template-rows: auto minmax(0, 1fr);
    padding: clamp(6px, 1.4vh, 16px) clamp(8px, 1.4vw, 22px);
  }
  .scene-grid {
    height: 100%;
    min-height: 0;
    margin-top: clamp(5px, 1.2vh, 12px);
    align-items: stretch;
  }
  .field-wrap { height: 100%; min-height: 0; align-items: center; padding: 0; }
  .field-frame {
    position: relative;
    top: 0;
    left: 0;
    width: min(100%, calc((100dvh - 118px) * 1.4167));
    max-height: 100%;
  }
  .field-grid { aspect-ratio: 17 / 12; }
  .left-rail, .right-rail { height: 100%; min-height: 0; overflow: hidden; }
  .bottom-strip { display: none; }
}

@media (orientation: landscape) and (min-width: 981px) {
  .scene-grid {
    grid-template-columns: clamp(210px, 16vw, 245px) minmax(0, 1fr) clamp(220px, 17vw, 260px);
    grid-template-areas: none;
    gap: clamp(10px, 1.2vw, 18px);
  }
  .field-wrap, .left-rail, .right-rail { grid-area: auto; }
  .farm-landmarks { height: clamp(118px, 20vh, 178px); }
  .farmhouse { left: 0; top: 0; width: 100%; height: 100%; }
  .office-people { left: 54%; width: clamp(42px, 6vh, 58px); }
  .start-gate {
    width: 100%;
    height: clamp(62px, 10vh, 90px);
    margin: -2px 0 7px;
  }
  .instruction-panel { width: 100%; margin: 0; padding: 8px; }
  .instruction-panel h1 { margin-bottom: 4px; font-size: 17px; }
  .instruction-panel p { min-height: 30px; margin-bottom: 5px; font-size: 10px; }
  .priority-panel { margin-bottom: 5px; padding: 5px 6px; }
  .priority-queue { display: none; }
  .mission-progress { margin-bottom: 5px; padding: 5px 6px; }
  .field-legend, .diagnostic-status { display: none; }
  .control-caption { padding: 3px; font-size: 10px; }
  .dpad {
    grid-template-columns: repeat(3, 31px);
    grid-template-rows: repeat(2, 29px);
    gap: 3px;
    margin-top: 5px;
  }
  .dpad button { font-size: 16px; }
  .right-rail { display: flex; padding-top: 0; justify-content: flex-start; }
  .warehouse-art { width: 100%; height: clamp(180px, 40vh, 330px); margin: 0; }
  .warehouse-road { height: clamp(66px, 8vh, 72px); }
  .warehouse-list { gap: 4px; margin-top: 5px; }
  .warehouse-card { padding: 4px 7px; }
}

@media (orientation: landscape) and (min-width: 1450px) {
  .scene-grid { grid-template-columns: 235px minmax(0, 1fr) 260px; }
  .tractor-sprite { width: calc(90% / var(--cols)); height: calc(90% / var(--rows)); }
}

@media (orientation: landscape) and (max-height: 620px) {
  .start-gate { display: none; }
  .instruction-panel { max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
  .warehouse-art { height: min(39vh, 230px); }
  .warehouse-road { height: 45px; }
  .warehouse-list h2 { font-size: 11px; }
  .field-frame { width: min(100%, calc((100dvh - 136px) * 1.4167)); transform: none; }
}

@media (orientation: landscape) and (max-width: 980px) {
  .game-board { padding: 6px 8px; }
  .hud { grid-template-columns: minmax(155px, 1.5fr) minmax(92px, .8fr) minmax(92px, .8fr) 38px 38px; gap: 5px; }
  .title-plank { grid-column: 1; height: clamp(48px, 15vh, 62px); }
  .cargo-counter { grid-column: 2; min-height: 0; }
  .capacity-counter, .level-plank { display: none; }
  .hud-box.timer { grid-column: 3; }
  .pause-button { grid-column: 4; grid-row: 1; width: 38px; height: 38px; }
  .restart-button { grid-column: 5; grid-row: 1; width: 38px; height: 38px; }
  .hud-box { padding: 4px; }
  .hud-box strong { font-size: 15px; }
  .hud-box span, .hud-box small { font-size: 7px; }
  .scene-grid {
    grid-template-columns: minmax(0, 1fr) clamp(205px, 30vw, 260px);
    grid-template-areas: 'field left';
    gap: 8px;
  }
  .field-wrap { grid-area: field; }
  .left-rail { grid-area: left; display: block; }
  .right-rail, .farm-landmarks, .start-gate { display: none; }
  .instruction-panel { height: 100%; max-height: 100%; overflow-y: auto; padding: 7px; }
  .instruction-panel h1 { margin-bottom: 3px; font-size: 15px; }
  .instruction-panel p { min-height: 0; margin-bottom: 4px; font-size: 9px; }
  .priority-panel, .mission-progress { margin-bottom: 4px; padding: 4px 5px; }
  .priority-queue, .field-legend, .diagnostic-button, .diagnostic-status { display: none; }
  .control-caption { padding: 2px; font-size: 9px; }
  .dpad { grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(2, 28px); gap: 2px; margin-top: 4px; }
  .dpad button { font-size: 15px; }
  .field-frame { padding: 4px; border-width: 2px; transform: rotateX(4deg); }
}

@media (orientation: portrait) {
  html, body, .game-shell { min-height: 100%; }
  .game-board { display: block; height: auto; min-height: 100dvh; padding: clamp(7px, 2vw, 14px); }
  .scene-grid {
    display: grid;
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'field' 'left';
    gap: 12px;
    margin-top: 12px;
  }
  .field-wrap { grid-area: field; width: 100%; height: auto; }
  .field-frame { position: relative; top: 0; left: 0; width: 100%; height: auto; transform: none; }
  .field-grid { width: 100%; height: auto; aspect-ratio: 17 / 12; }
  .left-rail { grid-area: left; display: block; width: 100%; height: auto; overflow: visible; }
  .right-rail, .farm-landmarks, .start-gate, .bottom-strip { display: none; }
  .instruction-panel { width: 100%; height: auto; margin: 0; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .intro-overlay { padding: 5px; }
  .intro-panel {
    width: min(760px, 100%);
    height: calc(100dvh - 10px);
    min-height: 0;
    padding: 9px 16px 8px;
  }
  .intro-progress { gap: 6px; margin-bottom: 3px; }
  .intro-progress span { height: 4px; }
  .intro-screen { min-height: 0; overflow-y: auto; align-content: center; }
  .intro-kicker { font-size: 9px; }
  .intro-screen h2 { margin: 5px auto 6px; font-size: clamp(19px, 5.5vh, 25px); }
  .intro-screen p { font-size: 12px; line-height: 1.3; }
  .intro-visual { gap: 10px; margin: 2px auto; font-size: 28px; }
  .intro-visual b { font-size: 18px; }
  .intro-asset { max-height: 62px; }
  .intro-bale { width: 55px; height: 55px; }
  .intro-warehouse { width: 82px; height: 62px; }
  .intro-fact { margin-top: 8px; padding: 7px 10px; }
  .intro-cargo-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2px auto 7px; }
  .intro-cargo-list > div { grid-template-columns: 29px 1fr; gap: 5px; padding: 5px 7px; }
  .intro-cargo-dot { width: 27px; height: 27px; }
  .intro-cargo-list small { grid-column: 2; margin-top: -5px; text-align: left; }
  .intro-rules { gap: 4px; font-size: 11px; }
  .intro-rules li { padding-left: 19px; line-height: 1.22; }
  .intro-visual-small { margin-bottom: 4px; font-size: 19px; }
  .intro-visual-small span { width: 29px; height: 29px; }
  .intro-actions { min-height: 34px; margin-top: 5px; }
  .intro-actions button { min-height: 32px; padding: 5px 12px; font-size: 12px; }
}

/* Customer-render environment: forest surround, warm paths and raised maze walls. */
body { background: #173527; }
.game-shell {
  background: #173527 url('./assets/forest-surround-v2.webp') center / cover fixed no-repeat;
}
.game-board {
  background: rgb(8 39 31 / .22);
  box-shadow: inset 0 0 90px rgb(4 24 18 / .28);
}
.hud, .scene-grid { position: relative; z-index: 1; }

.field-frame {
  isolation: isolate;
  padding: clamp(9px, .8vw, 13px);
  border: 0;
  border-radius: 9px;
  background: #31553b;
  box-shadow: 0 22px 34px rgb(1 20 12 / .5), 0 6px 0 #24452f, inset 0 0 0 2px rgb(223 232 205 / .35);
  transform: rotateX(6deg) rotateZ(-.55deg) translateZ(0);
}
.field-frame::before {
  content: '';
  position: absolute;
  z-index: 12;
  inset: 4px;
  border: 4px solid #b9c8b8;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px #586d60, 0 3px 5px rgb(2 25 15 / .55), 0 0 0 1px rgb(245 252 232 / .72);
  pointer-events: none;
}
.field-frame::after {
  content: '';
  position: absolute;
  z-index: 13;
  inset: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #78867b, #526258 82%, #394c40) left 0 top 8.5% / 17px 8.8% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 5.2%, #d7e0d3 5.3% 5.9%, #52685b 6% 6.3%, transparent 6.4% 11.1%) top 1px left / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 5.2%, #d7e0d3 5.3% 5.9%, #52685b 6% 6.3%, transparent 6.4% 11.1%) bottom 1px left / 100% 12px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 6.8%, #d7e0d3 6.9% 7.8%, #52685b 7.9% 8.4%, transparent 8.5% 14.5%) top left 1px / 12px 100% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 6.8%, #d7e0d3 6.9% 7.8%, #52685b 7.9% 8.4%, transparent 8.5% 14.5%) top right 1px / 12px 100% no-repeat;
  pointer-events: none;
}
.field-grid {
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: #8e6b31;
  box-shadow: inset 0 0 28px rgb(39 44 17 / .38);
}

.map-tile { overflow: visible; }
.path-tile {
  z-index: 0;
  background-color: #c8953e;
  background-image: linear-gradient(rgb(255 221 136 / .08), rgb(102 75 25 / .08)), url('./assets/path-summer-v2.webp');
  background-size: auto, 230px 230px;
  background-position: center, 12% 18%;
  box-shadow: inset 0 0 0 1px rgb(92 67 24 / .08);
}
.path-tile:nth-child(4n + 1) { background-position: center, 48% 12%; }
.path-tile:nth-child(4n + 2) { background-position: center, 82% 53%; }
.path-tile:nth-child(4n + 3) { background-position: center, 28% 86%; }

.crop-tile {
  z-index: 2;
  transform: translateY(-4%);
  border-radius: 10% 10% 6% 6%;
  box-shadow: inset 0 2px 0 rgb(226 255 171 / .18), inset 0 -4px 0 rgb(3 42 22 / .28);
}
.crop-tile:not(.wheat-tile) {
  background-image: linear-gradient(rgb(255 241 146 / .04), rgb(5 45 25 / .16)), url('./assets/hedge-tile.png');
  background-size: auto, 175% 175%;
  filter: saturate(1.1) contrast(1.04) drop-shadow(0 3px 2px rgb(3 34 17 / .25));
}
.wheat-tile {
  background-image: linear-gradient(rgb(255 223 105 / .08), rgb(92 47 8 / .2)), url('./assets/wheat-tile.png');
  background-size: auto, cover;
  filter: saturate(1.12) contrast(1.03) drop-shadow(0 3px 2px rgb(61 36 8 / .28));
}
.wall-edge-north { box-shadow: inset 0 3px 0 rgb(222 250 165 / .18), inset 0 -4px 0 rgb(3 42 22 / .28); }
.wall-edge-west { border-left: 1px solid rgb(203 232 151 / .18); }
.wall-edge-south::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 1%;
  right: 1%;
  bottom: -12%;
  height: 18%;
  border-radius: 0 0 30% 30%;
  background: linear-gradient(180deg, rgb(29 76 39 / .96), rgb(8 43 25 / .95));
  box-shadow: 0 5px 7px rgb(2 28 15 / .45);
}
.wheat-tile.wall-edge-south::after {
  background: linear-gradient(180deg, #987025, #55360e);
}
.wall-edge-east::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 5%;
  right: -9%;
  bottom: -7%;
  width: 11%;
  border-radius: 0 45% 45% 0;
  background: linear-gradient(90deg, rgb(25 70 36 / .94), rgb(7 38 22 / .88));
  box-shadow: 3px 3px 5px rgb(2 28 15 / .32);
}
.wheat-tile.wall-edge-east::before { background: linear-gradient(90deg, #8b6320, #4f300b); }

.field-grid[data-season="early-autumn"] .path-tile {
  background-color: #a8762c;
  background-image: linear-gradient(rgb(223 164 67 / .06), rgb(77 50 14 / .14)), url('./assets/level3-path-autumn.webp');
  background-size: auto, 240px 240px;
}
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile) {
  background-image: linear-gradient(rgb(222 170 77 / .06), rgb(24 48 22 / .16)), url('./assets/level3-hedge-autumn.webp');
  background-size: auto, 175% 175%;
}
.field-grid[data-season="early-autumn"] .wheat-tile {
  background-image: linear-gradient(rgb(255 210 76 / .06), rgb(117 65 12 / .18)), url('./assets/level3-wheat-autumn.webp');
  background-size: auto, 190% 190%;
}

.farmhouse, .start-gate, .warehouse-art {
  border: 0;
  background-color: transparent;
  box-shadow: none;
  filter: drop-shadow(0 13px 9px rgb(1 27 17 / .4));
  -webkit-mask-image: radial-gradient(ellipse 76% 74% at 50% 52%, #000 67%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 74% at 50% 52%, #000 67%, transparent 100%);
}
.warehouse-art { overflow: visible; border-radius: 0; }
.warehouse-modern-art { border-radius: 0; }
.warehouse-road { background-color: rgb(27 72 49 / .55); }

.legend-path { background: #c8953e url('./assets/path-summer-v2.webp') center / 70px 70px; }
.legend-wall { background: #1f5734 url('./assets/hedge-tile.png') center / cover; }

@media (orientation: portrait) {
  .game-shell { background-position: center top; }
  .field-frame { transform: rotateX(4deg) translateZ(0); }
}
@media (orientation: landscape) and (min-width: 981px) {
  .field-wrap { align-items: flex-start; padding-top: clamp(5px, 1.4vh, 14px); }
}
@media (orientation: landscape) and (max-height: 620px) {
  .field-wrap { padding-top: 0; }
  .field-frame { transform: none; }
}

/* Updated customer render: office entry, three warehouse docks and a separate field exit. */
.entry-tile,
.exit-tile,
.warehouse-tile {
  z-index: 15;
  border-radius: 0;
  background-image:
    linear-gradient(90deg, rgb(196 211 178 / .14), transparent 30%, rgb(64 95 70 / .12)),
    url('./assets/path-summer-v2.webp');
  background-size: auto, 230px 230px;
  box-shadow: inset 0 0 0 1px rgb(245 250 225 / .16);
}
.entry-tile::after,
.exit-tile::after {
  content: '';
  position: absolute;
  z-index: 16;
  top: -5%;
  bottom: -5%;
  width: 9px;
  background: repeating-linear-gradient(0deg, #e0c27a 0 8px, #6c4f25 8px 11px);
  box-shadow: 0 2px 5px rgb(4 28 17 / .5);
}
.entry-tile::after { left: -2px; }
.exit-tile::after { right: -2px; }
.field-gate-marker {
  position: absolute;
  z-index: 18;
  top: 13%;
  display: grid;
  min-width: 78px;
  padding: 4px 7px 3px;
  border: 2px solid #d6bc73;
  border-radius: 3px;
  background: linear-gradient(#234f37, #102f24);
  color: #f7f0cd;
  text-align: center;
  box-shadow: 0 5px 8px rgb(1 23 13 / .45), inset 0 0 0 1px rgb(239 230 170 / .18);
}
.field-gate-marker b { font-size: 8px; line-height: 1; }
.field-gate-marker small { margin-top: 2px; color: #9fe7c3; font-size: 5px; font-weight: 900; line-height: 1; }
.entry-tile .field-gate-marker { left: 7px; }
.exit-tile .field-gate-marker { right: 7px; }
.exit-tile .field-gate-marker::before {
  content: '';
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: -4px;
  height: 2px;
  background: #8ed7ae;
  box-shadow: 0 0 6px #68e4a2;
}

.warehouse-tile { box-shadow: inset 0 0 0 3px var(--warehouse-color), inset 10px 0 16px color-mix(in srgb, var(--warehouse-color) 28%, transparent); }
.warehouse-yellow { --warehouse-color: #ffd43b; }
.warehouse-blue { --warehouse-color: #22c7ff; }
.warehouse-green { --warehouse-color: #8cdf3e; }
.warehouse-tile .warehouse-marker {
  left: auto;
  right: 22px;
  top: 10%;
  min-width: 78px;
  transform: none;
  border-width: 2px;
  background: rgb(4 35 34 / .94);
}

.warehouse-list { gap: 5px; }
.field-exit-card {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid rgb(198 229 205 / .3);
  border-left: 4px solid #8fa99b;
  border-radius: 7px;
  background: rgb(4 43 51 / .72);
  color: #c7d7ce;
}
.field-exit-card span { font-size: 10px; font-weight: 900; }
.field-exit-card small { font-size: 8px; }
.field-exit-ready { border-color: #82ecad; border-left-width: 7px; color: #a8ffd0; box-shadow: 0 0 10px rgb(80 231 145 / .38); }

@media (max-width: 980px) {
  .field-gate-marker { min-width: 58px; padding: 3px 4px; }
  .warehouse-tile .warehouse-marker { min-width: 58px; }
}

/* Stronger pseudo-3D diorama depth while preserving the real gameplay grid. */
.field-frame {
  transform: rotateX(6deg) rotateZ(-.45deg) translateZ(0);
  transform-origin: 50% 12%;
  box-shadow:
    0 25px 36px rgb(1 18 11 / .5),
    0 6px 0 #173b28,
    inset 0 0 0 2px rgb(223 232 205 / .38);
}
.field-grid {
  background: #795729;
  box-shadow: inset 0 10px 18px rgb(255 225 151 / .08), inset 0 -15px 24px rgb(35 25 10 / .28);
}
.path-tile {
  background-image:
    linear-gradient(145deg, rgb(255 235 173 / .13), transparent 38%, rgb(77 51 16 / .15)),
    url('./assets/path-summer-v2.webp');
  box-shadow: inset 1px 1px 0 rgb(255 240 191 / .08), inset -1px -1px 0 rgb(86 56 15 / .11);
}
.crop-tile {
  transform: translateY(-10%);
  border-radius: 13% 13% 5% 5%;
  box-shadow:
    inset 0 4px 0 rgb(225 255 180 / .22),
    inset 0 -6px 0 rgb(2 39 20 / .3);
}
.crop-tile:not(.wheat-tile) {
  background-image:
    linear-gradient(145deg, rgb(230 255 176 / .11), transparent 36%, rgb(2 37 19 / .22)),
    url('./assets/hedge-tile.png');
  filter: none;
}
.wall-edge-north {
  box-shadow:
    inset 0 5px 0 rgb(228 255 184 / .27),
    inset 0 -6px 0 rgb(2 39 20 / .3);
}
.wall-edge-west { border-left: 2px solid rgb(216 245 170 / .24); }
.wall-edge-south::after {
  left: 2%;
  right: 2%;
  bottom: -18%;
  height: 25%;
  border-radius: 0 0 14% 14%;
  background:
    linear-gradient(180deg, rgb(42 91 46 / .98), rgb(9 43 24 / .98) 68%, rgb(4 30 17 / .98));
  box-shadow: 0 5px 0 rgb(1 23 12 / .34);
}
.wall-edge-east::before {
  top: 5%;
  right: -13%;
  bottom: -12%;
  width: 15%;
  border-radius: 0 20% 20% 0;
  background: linear-gradient(90deg, rgb(31 78 39 / .98), rgb(6 36 21 / .97));
  box-shadow: 4px 4px 0 rgb(1 24 13 / .28);
}
.cargo-marker { transform: translateY(-5%); }
.tractor-sprite {
  filter: drop-shadow(0 9px 4px rgb(1 24 14 / .5));
}
.tractor-sprite::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 11%;
  right: 8%;
  bottom: 10%;
  height: 22%;
  border-radius: 50%;
  background: rgb(2 25 13 / .42);
  filter: blur(3px);
  transform: skewX(-12deg);
}

@media (orientation: portrait) {
  .field-frame { transform: rotateX(6deg) rotateZ(-.25deg) translateZ(0); }
  .wall-edge-south::after { bottom: -20%; height: 27%; }
  .wall-edge-east::before { right: -13%; width: 15%; }
}
@media (orientation: portrait) and (min-width: 981px) {
  .field-wrap { margin-bottom: 16px; }
}
@media (orientation: landscape) and (max-height: 620px) {
  .field-frame { transform: rotateX(5deg) rotateZ(-.25deg) translateZ(0); }
  .crop-tile { transform: translateY(-7%); }
}

/* Full-HD TV composition: let the playable field dominate while the outer forest stays visible. */
@media (orientation: landscape) and (min-width: 1450px) {
  .game-board {
    width: min(1920px, 100%);
    padding-inline: clamp(10px, 1vw, 18px);
  }
  .scene-grid {
    grid-template-columns: clamp(250px, 15vw, 285px) minmax(0, 1fr) clamp(265px, 15.8vw, 300px);
    gap: clamp(8px, .7vw, 13px);
  }
  .field-frame {
    width: min(100%, calc(80dvh * 1.4167));
  }
  .farm-landmarks { width: calc(100% + 26px); }
  .warehouse-art { width: calc(100% + 24px); margin-left: -24px; }
}

/* Smaller foliage inside each wall cell visually continues the forest surrounding the field. */
.crop-tile:not(.wheat-tile) {
  background-color: #1d5132;
  background-size: auto, 108% 108%;
  background-repeat: no-repeat;
}
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile) {
  background-color: #435326;
  background-size: auto, 110% 110%;
  background-repeat: no-repeat;
}

/* Keep the collision footprint cell-sized, but render a larger, shaded tractor above it. */
@media (orientation: landscape) and (min-width: 981px) {
  .tractor-sprite {
    width: calc(106% / var(--cols));
    height: calc(106% / var(--rows));
  }
}

/* The playable tractor is a real-time Three.js model. The DOM sprite remains
   as a WebGL fallback, while the 3D canvas turns continuously between inputs. */
.tractor-3d-canvas {
  position: absolute;
  z-index: 3;
  left: -50%;
  top: -52%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  transform-origin: 50% 68%;
  filter: drop-shadow(0 5px 3px rgb(2 27 14 / .24));
}

.tractor-3d-ready .tractor-frame,
.tractor-3d-ready .tractor-load,
.tractor-3d-ready::before {
  visibility: hidden;
}

@media (orientation: landscape) and (min-width: 981px) {
  .scene-canvas .tractor-3d-canvas {
    transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(18px);
    backface-visibility: hidden;
  }
}
.tractor-frame {
  inset: -31%;
  filter:
    saturate(1.16)
    contrast(1.08)
    drop-shadow(0 5px 2px rgb(1 22 12 / .58))
    drop-shadow(-1px -1px 0 rgb(255 245 199 / .22));
}
.tractor-sprite::before {
  left: 5%;
  right: 3%;
  bottom: 5%;
  height: 25%;
  background: rgb(1 20 11 / .5);
}

/* One continuous ground plane: side scenes overlap the field margins instead of floating as cards. */
@media (orientation: landscape) and (min-width: 981px) {
  .scene-grid { perspective: 1350px; }
  .farm-landmarks, .warehouse-art { position: relative; z-index: 4; }
  .farm-landmarks, .warehouse-art, .warehouse-road {
    transform: rotateX(6deg) rotateZ(-.45deg) translateZ(0);
    transform-origin: 50% 12%;
  }
  .farmhouse, .warehouse-modern-art {
    filter: saturate(1.06) contrast(1.03);
  }
}

/* Linear overlap between grid ticks removes the stop-and-start feel while retaining exact tile logic. */
.tractor-sprite {
  transition: left 150ms linear, top 150ms linear;
  backface-visibility: hidden;
  transform: translate3d(-50%, -50%, 0);
}

@media (orientation: landscape) and (min-width: 1450px) and (max-height: 620px) {
  .field-frame { width: min(100%, calc((100dvh - 136px) * 1.4167)); }
}

/* Customer-render composition: one horizontal ground plane shared by field and buildings. */
.field-frame {
  transform: rotateX(3deg) translateZ(0);
  transform-origin: 50% 8%;
  box-shadow: 0 18px 28px rgb(1 18 11 / .42), 0 4px 0 #23452f, inset 0 0 0 2px rgb(223 232 205 / .38);
}
.tractor-sprite {
  transition: left 220ms linear, top 220ms linear;
}

@media (orientation: landscape) and (min-width: 981px) {
  .game-board { --board-inline: clamp(8px, 1.4vw, 22px); }
  .scene-grid {
    isolation: isolate;
    perspective: 1400px;
  }
  .scene-grid > * { position: relative; z-index: 1; }
  .scene-grid::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: calc(-1 * var(--board-inline));
    right: calc(-1 * var(--board-inline));
    bottom: -4px;
    height: clamp(50px, 8.5vh, 82px);
    background:
      repeating-linear-gradient(90deg, transparent 0 42px, rgb(219 228 193 / .48) 43px 62px, transparent 63px 104px) center 58% / 100% 2px no-repeat,
      linear-gradient(180deg, #758276 0 8%, #536258 9% 86%, #344b3d 87% 100%);
    box-shadow: inset 0 7px 12px rgb(255 255 255 / .12), 0 -5px 12px rgb(5 31 21 / .3);
    clip-path: polygon(0 33%, 18% 18%, 34% 29%, 52% 16%, 72% 28%, 100% 14%, 100% 100%, 0 100%);
    pointer-events: none;
  }
  .farm-landmarks {
    height: clamp(150px, 23vh, 250px);
    transform: rotateX(4deg) translateZ(0);
    transform-origin: 50% 8%;
  }
  .farm-landmarks::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 59%;
    right: -74px;
    width: 112px;
    height: 52px;
    border: 1px solid rgb(220 230 207 / .34);
    background: linear-gradient(180deg, #78867b, #526258 82%, #394c40);
    box-shadow: inset 0 5px 8px rgb(255 255 255 / .1), 0 5px 8px rgb(4 29 19 / .26);
    clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);
    transform: rotate(-5deg);
    transform-origin: left center;
    pointer-events: none;
  }
  .warehouse-art,
  .warehouse-road {
    transform: rotateX(4deg) translateZ(0);
    transform-origin: 50% 8%;
  }
  .right-rail { overflow: visible; }
  .warehouse-art {
    align-self: end;
    width: calc(100% + var(--board-inline));
    height: clamp(300px, 48vh, 490px);
    margin: 0 calc(-1 * var(--board-inline)) 0 0;
  }
  .warehouse-modern-art {
    inset: 0 0 0 auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right top;
  }
  .warehouse-road {
    width: calc(100% + var(--board-inline));
    margin-right: calc(-1 * var(--board-inline));
    background:
      repeating-linear-gradient(90deg, transparent 0 18px, rgb(207 218 188 / .5) 19px 36px, transparent 37px 55px) center / 100% 2px no-repeat,
      linear-gradient(180deg, #66766a, #40574a);
  }
}

@media (orientation: landscape) and (min-width: 1450px) {
  .game-board { --board-inline: clamp(10px, 1vw, 18px); }
  .warehouse-art { width: calc(100% + var(--board-inline)); margin-left: 0; }
}

/* Hedge tiles keep exact collision cells but overlap visually like irregular shrubs. */
.crop-tile {
  transform: translateY(-6%) scale(1.055);
  transform-origin: 50% 70%;
  border-radius: 26% 31% 18% 23%;
}
.crop-tile:nth-child(3n + 1) { transform: translate(-1%, -6%) scale(1.06) rotate(.25deg); }
.crop-tile:nth-child(3n + 2) { transform: translate(1%, -7%) scale(1.05) rotate(-.2deg); }
.crop-tile:nth-child(3n) { transform: translateY(-5%) scale(1.065); }

@media (orientation: landscape) and (max-height: 620px) {
  .field-frame { transform: rotateX(2deg) translateZ(0); }
  .warehouse-art { height: min(46vh, 276px); }
}
@media (orientation: portrait) {
  .field-frame { transform: rotateX(3deg) translateZ(0); }
}

/* Final art direction: one contemporary volumetric farm scene instead of a tiled board. */
.field-wrap {
  position: relative;
  overflow: visible;
}
.field-frame {
  position: relative;
  z-index: 2;
  background: rgb(39 81 53 / .28);
  box-shadow:
    0 24px 48px rgb(1 21 13 / .34),
    0 8px 18px rgb(1 26 15 / .2),
    inset 0 1px 0 rgb(244 255 226 / .28);
}
.field-grid {
  overflow: visible;
  background:
    linear-gradient(145deg, rgb(255 238 178 / .08), rgb(80 51 16 / .1)),
    #c6923c url('./assets/path-summer-v2.webp') center / 430px 430px repeat;
  box-shadow:
    inset 0 13px 22px rgb(255 238 178 / .07),
    inset 0 -18px 30px rgb(52 34 10 / .16);
}
.path-tile,
.entry-tile,
.exit-tile,
.warehouse-tile {
  background: linear-gradient(145deg, rgb(255 247 208 / .035), transparent 43%, rgb(70 43 10 / .04));
  box-shadow: none;
}
.crop-tile:not(.wheat-tile),
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile) {
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 76%, rgb(3 39 21 / .46) 0 34%, transparent 68%),
    url('./assets/hedge-volume-v3.webp') center / 119% 119% no-repeat;
  box-shadow: none;
  filter:
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 8px 5px rgb(1 26 13 / .5))
    drop-shadow(-2px -2px 0 rgb(239 255 194 / .09));
}
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile) {
  filter:
    sepia(.16)
    hue-rotate(-9deg)
    saturate(1.05)
    drop-shadow(0 8px 5px rgb(35 27 8 / .5));
}
.wall-edge-south::after,
.wall-edge-east::before { display: none; }
.crop-tile { transform: translateY(-10%) scale(1.105); }
.crop-tile:nth-child(3n + 1) { transform: translate(-2%, -11%) scale(1.12) rotate(.35deg); }
.crop-tile:nth-child(3n + 2) { transform: translate(2%, -12%) scale(1.1) rotate(-.3deg); }
.crop-tile:nth-child(3n) { transform: translateY(-9%) scale(1.115); }
.wheat-tile {
  border-radius: 19% 22% 10% 14%;
  filter: saturate(1.14) contrast(1.04) drop-shadow(0 8px 5px rgb(61 36 8 / .42));
}
.cargo-marker .bale-sprite {
  filter: saturate(1.12) contrast(1.04) drop-shadow(0 7px 4px rgb(54 29 5 / .56));
}
.puddle-sprite {
  border-color: rgb(150 233 229 / .82);
  background:
    radial-gradient(ellipse at 58% 35%, rgb(255 255 255 / .74) 0 7%, transparent 9%),
    radial-gradient(ellipse at 47% 54%, #70c9ca 0 31%, #247d88 43% 67%, rgb(15 55 55 / .72) 70%);
  box-shadow: inset 0 -5px 8px rgb(8 48 54 / .48), 0 7px 5px rgb(12 48 32 / .32);
}

/* The office entrance and field exit continue into the same physical road system. */
.field-wrap::before,
.field-wrap::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: clamp(68px, 5.2vw, 104px);
  height: clamp(48px, 5.4vh, 68px);
  border: 1px solid rgb(226 222 188 / .18);
  border-radius: 44% 18% 38% 22%;
  background:
    radial-gradient(ellipse at 28% 44%, rgb(255 234 174 / .1), transparent 38%),
    linear-gradient(180deg, #8b8067, #635d4d 72%, #3f4d40);
  box-shadow: inset 0 6px 10px rgb(255 255 255 / .08), 0 8px 13px rgb(2 28 17 / .22);
  opacity: .9;
  pointer-events: none;
}
.field-wrap::before {
  left: clamp(-84px, -5vw, -60px);
  top: 11%;
  clip-path: polygon(0 30%, 100% 3%, 100% 97%, 0 72%);
  transform: rotate(-4deg);
}
.field-wrap::after {
  right: clamp(-84px, -5vw, -60px);
  bottom: 8%;
  clip-path: polygon(0 3%, 100% 30%, 100% 72%, 0 97%);
  transform: rotate(4deg);
}

/* One road runs from the warehouse past the office; one loaded van loops every 24 seconds. */
@media (orientation: landscape) and (min-width: 981px) {
  .scene-grid::before { display: none; }
  .scene-road {
    position: absolute;
    z-index: 5;
    left: calc(-1 * var(--board-inline));
    right: calc(-1 * var(--board-inline));
    bottom: -4px;
    height: clamp(58px, 8.5vh, 88px);
    overflow: hidden;
    background:
      linear-gradient(180deg, rgb(232 242 213 / .12), transparent 18%),
      linear-gradient(180deg, #718075 0 9%, #4d5e54 10% 86%, #33483c 87% 100%);
    box-shadow: inset 0 7px 12px rgb(255 255 255 / .12), 0 -8px 16px rgb(5 31 21 / .26);
    clip-path: polygon(0 28%, 18% 14%, 35% 26%, 54% 12%, 73% 24%, 100% 10%, 100% 100%, 0 100%);
    pointer-events: none;
  }
  .scene-road::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 58%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgb(222 230 198 / .57) 0 30px, transparent 30px 57px);
  }
  .scene-hauler-track {
    position: absolute;
    z-index: 2;
    left: 100%;
    bottom: 4%;
    width: clamp(92px, 7.2vw, 138px);
    opacity: 0;
    transform-origin: 50% 84%;
    filter: drop-shadow(0 8px 4px rgb(1 24 15 / .46));
    animation: loaded-van-road-loop 24s linear infinite;
    will-change: transform, opacity;
  }
  .scene-hauler-track .road-hauler {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    animation: none;
    transform: scaleX(-1);
  }
  .warehouse-road { visibility: hidden; }
}
@keyframes loaded-van-road-loop {
  0%, 5% { opacity: 0; transform: translateX(0) scale(.92); }
  9% { opacity: 1; }
  88% { opacity: 1; transform: translateX(calc(-100vw - 220px)) scale(1); }
  94%, 100% { opacity: 0; transform: translateX(calc(-100vw - 250px)) scale(1); }
}

/* Continuous retargeting makes grid-safe movement read as a heavy real tractor. */
.tractor-sprite {
  transition-property: left, top;
  transition-duration: 280ms;
  transition-timing-function: cubic-bezier(.2, .72, .3, 1);
}
.tractor-frame {
  filter:
    saturate(1.13)
    contrast(1.06)
    drop-shadow(0 10px 5px rgb(1 22 12 / .52))
    drop-shadow(-2px -2px 1px rgb(255 247 202 / .2));
}

@media (prefers-reduced-motion: reduce) {
  .scene-hauler-track { left: 72%; opacity: 1; animation: none !important; transform: none; }
}
@media (orientation: portrait), (max-width: 980px) {
  .scene-road { display: none; }
  .field-wrap::before, .field-wrap::after { display: none; }
}

/* Reference-composition lock: buildings, field and roads share one ground plane. */
.field-wrap { perspective: clamp(980px, 95vw, 1600px); perspective-origin: 50% 8%; }
.field-frame {
  padding: 7px;
  background: transparent;
  box-shadow: none;
  transform: rotateX(4deg) translateZ(0);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.field-frame::before {
  inset: 2px;
  border-width: clamp(7px, .55vw, 11px);
  border-color: #cbd6c8;
  box-shadow: inset 0 0 0 2px #607269, 0 5px 8px rgb(2 25 15 / .42), 0 0 0 1px rgb(245 252 232 / .72);
}
.field-frame::after { inset: -2px; opacity: .88; }
.field-grid {
  background:
    linear-gradient(145deg, rgb(255 241 194 / .08), rgb(86 95 45 / .02)),
    #a78338 url('./assets/field-ground-v5.webp') center / cover no-repeat;
  box-shadow: inset 0 10px 20px rgb(255 238 178 / .035), inset 0 -16px 28px rgb(31 35 12 / .16);
}
.path-tile,
.entry-tile,
.exit-tile,
.warehouse-tile {
  background: transparent;
  box-shadow: none;
}
.warehouse-tile {
  box-shadow: inset 0 0 0 3px var(--warehouse-color), inset 10px 0 16px color-mix(in srgb, var(--warehouse-color) 24%, transparent);
}
.crop-tile:not(.wheat-tile),
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile) {
  background-position: center;
  background-size: 132% 132%;
  filter:
    saturate(1.04)
    contrast(1.035)
    drop-shadow(0 8px 5px rgb(1 26 13 / .46))
    drop-shadow(-2px -2px 0 rgb(239 255 194 / .08));
}
.crop-tile { transform: translateY(-8%) scale(1.07); }
.crop-tile:nth-child(5n + 1) { transform: translate(-3%, -9%) scale(1.04) rotate(.7deg); background-size: 124% 124%; background-position: 42% 48%; }
.crop-tile:nth-child(5n + 2) { transform: translate(2%, -10%) scale(1.08) rotate(-.55deg); background-size: 140% 140%; background-position: 57% 44%; }
.crop-tile:nth-child(5n + 3) { transform: translate(-1%, -7%) scale(1.055) rotate(.35deg); background-size: 129% 129%; background-position: 48% 57%; }
.crop-tile:nth-child(5n + 4) { transform: translate(3%, -9%) scale(1.075) rotate(-.25deg); background-size: 136% 136%; background-position: 53% 51%; }
.crop-tile:nth-child(5n) { transform: translateY(-8%) scale(1.06); background-size: 127% 127%; background-position: 46% 43%; }
.field-grid[data-season="early-autumn"] {
  background-color: #a8762c;
  background-image:
    linear-gradient(145deg, rgb(223 164 67 / .045), rgb(77 50 14 / .08)),
    url('./assets/level3-path-autumn.webp');
  background-position: center, center;
  background-size: auto, cover;
  background-repeat: no-repeat;
}
.field-grid[data-season="early-autumn"] .path-tile,
.field-grid[data-season="early-autumn"] .entry-tile,
.field-grid[data-season="early-autumn"] .exit-tile,
.field-grid[data-season="early-autumn"] .warehouse-tile { background: transparent; }
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile) {
  background-image:
    radial-gradient(ellipse at 50% 76%, rgb(32 35 10 / .4) 0 34%, transparent 68%),
    url('./assets/hedge-volume-v3.webp');
  filter:
    sepia(.18)
    hue-rotate(-10deg)
    saturate(1.02)
    contrast(1.035)
    drop-shadow(0 8px 5px rgb(35 27 8 / .48));
}
.path-tile { z-index: calc(var(--tile-y) * 4); }
.crop-tile { z-index: calc(var(--tile-y) * 4 + 3); }
.entry-tile,
.exit-tile,
.warehouse-tile { z-index: calc(var(--tile-y) * 4 + 1); }
.tractor-sprite { z-index: calc(var(--tractor-y) * 4 + 2); }

@media (orientation: landscape) and (min-width: 981px) {
  .scene-grid {
    grid-template-columns: clamp(275px, 18.2vw, 350px) minmax(0, 1fr) clamp(285px, 17.2vw, 330px);
    gap: clamp(5px, .42vw, 8px);
  }
  .field-wrap { z-index: 2; }
  .field-frame { width: min(80%, calc((100dvh - 220px) * 1.4167)); }

  .left-rail, .right-rail { position: relative; z-index: 3; overflow: visible; }
  .farm-landmarks {
    height: clamp(208px, 30vh, 324px);
    transform: none;
  }
  .farmhouse { z-index: 2; }
  .farmhouse .landmark-art { object-fit: contain; object-position: center top; }
  .farm-landmarks::after {
    z-index: 0;
    top: auto;
    right: -92px;
    bottom: 2%;
    width: 146px;
    height: 66px;
    border: 0;
    background: url('./assets/farm-road-v4.webp') center / 100% 100% no-repeat;
    clip-path: polygon(0 20%, 100% 2%, 100% 88%, 0 100%);
    transform: rotate(-3deg);
    box-shadow: inset 0 5px 8px rgb(255 255 255 / .09), 0 7px 10px rgb(4 29 19 / .24);
  }
  .left-rail::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 39%;
    top: 24%;
    bottom: 3%;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgb(95 108 98 / .68) 20% 80%, transparent);
    clip-path: polygon(34% 0, 74% 0, 100% 100%, 0 100%);
    opacity: .62;
    pointer-events: none;
  }

  .warehouse-art {
    align-self: start;
    right: calc(-1 * var(--board-inline));
    width: 100%;
    height: clamp(390px, 55vh, 570px);
    margin: 0 0 0 -4px;
    transform: translateX(2px);
  }
  .warehouse-modern-art { object-position: right top; }

  .field-wrap::before {
    left: clamp(-92px, -5vw, -66px);
    top: 10%;
    width: clamp(82px, 5.8vw, 112px);
    transform: rotate(-2deg);
    border: 0;
    background: url('./assets/farm-road-v4.webp') center / 100% 100% no-repeat;
    box-shadow: 0 7px 10px rgb(4 29 19 / .24);
  }
  .field-wrap::after {
    right: clamp(-96px, -5.2vw, -68px);
    bottom: 9%;
    width: clamp(82px, 5.8vw, 112px);
    transform: rotate(2deg);
    border: 0;
    background: url('./assets/farm-road-v4.webp') center / 100% 100% no-repeat;
    box-shadow: 0 7px 10px rgb(4 29 19 / .24);
  }

  .scene-road {
    z-index: 1;
    height: clamp(66px, 9.2vh, 96px);
    background: url('./assets/farm-road-v4.webp') center / 100% 100% no-repeat;
    box-shadow: 0 -8px 16px rgb(5 31 21 / .2);
    clip-path: none;
  }
  .scene-road::before { display: none; }
  .scene-road .road-hauler-track { bottom: 12%; }
}

@media (orientation: landscape) and (min-width: 1450px) {
  .farm-landmarks { width: calc(100% + 34px); margin-left: -8px; }
  .instruction-panel { width: calc(100% - 18px); margin-left: 6px; }
  .warehouse-art { margin-left: -10px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .field-frame { transform: rotateX(9deg) translateZ(0); }
  .crop-tile { transform: translateY(-6%) scale(1.055); }
}

@media (orientation: portrait) {
  .field-wrap { perspective: none; }
  .field-frame { transform: none; }
}

/* The forest is a viewport backdrop, independent from the board height or page scroll. */
html,
body {
  min-width: 100%;
  min-height: 100%;
  background: #173527;
}
body { min-height: 100dvh; }
.game-shell {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: #173527;
}
.game-shell::before {
  content: '';
  position: fixed;
  z-index: 0;
  inset: -1px;
  background: #173527 url('./assets/forest-surround-v2.webp') center / cover no-repeat;
  pointer-events: none;
}
.game-board {
  position: relative;
  z-index: 1;
}

/* Customer camera pass: wider aerial field, connected hedges and one curved road plane. */
@media (orientation: landscape) and (min-width: 981px) {
  .field-wrap { padding-top: clamp(25px, 5vh, 54px); transform: none; }
  .field-frame { width: min(95%, calc((100dvh - 228px) * 1.5)); }
  .field-grid { aspect-ratio: 17 / 11; }

  .warehouse-art {
    width: calc(100% + 2px);
    height: clamp(470px, 60vh, 650px);
    margin-left: 0;
    transform: translateX(2px);
  }

  /* Keep the office outside the field fence; only its road connector may cross the gap. */
  .farm-landmarks { width: calc(100% - 12px); margin-left: 12px; }
  .farm-landmarks::after { right: -12px; width: 74px; }

  /* The office connector is the only left entrance; remove the duplicate ramp. */
  .field-wrap::before { display: none; }
  .field-wrap::after { z-index: 0; }
  .field-frame { position: relative; z-index: 2; }
  .field-wrap::after {
    right: calc(-1 * clamp(82px, 5.8vw, 112px) - 14px);
  }

  .scene-road {
    bottom: 0;
    height: clamp(230px, 35vh, 390px);
    overflow: visible;
    background: url('./assets/road-network-v5.webp') center / 100% 100% no-repeat;
    box-shadow: none;
  }
  .scene-road .road-hauler-track { bottom: 21%; }
}

.crop-tile:not(.wheat-tile),
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile) {
  overflow: visible;
  background: radial-gradient(ellipse at 50% 78%, rgb(3 39 21 / .28) 0 33%, transparent 69%);
  filter: none;
}
.crop-tile:not(.wheat-tile)::after,
.hedge-corner::before {
  content: '';
  position: absolute;
  z-index: 1;
  display: block;
  inset: -18%;
  background: url('./assets/hedge-continuous-v4.webp') center / 160% 160% no-repeat;
  filter:
    brightness(.9)
    saturate(.97)
    contrast(1.025)
    drop-shadow(0 7px 4px rgb(1 26 13 / .4))
    drop-shadow(-1px -1px 0 rgb(239 255 194 / .08));
  pointer-events: none;
}
.hedge-vertical::after,
.hedge-corner::before { transform: rotate(90deg); }
.hedge-horizontal::after {
  inset: -30% -18%;
}
.hedge-corner::before {
  inset: -28%;
}
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile)::after,
.field-grid[data-season="early-autumn"] .hedge-corner::before {
  filter:
    sepia(.17)
    hue-rotate(-10deg)
    saturate(.98)
    contrast(1.025)
    drop-shadow(0 7px 4px rgb(35 27 8 / .44));
}
.crop-tile,
.crop-tile:nth-child(5n + 1),
.crop-tile:nth-child(5n + 2),
.crop-tile:nth-child(5n + 3),
.crop-tile:nth-child(5n + 4),
.crop-tile:nth-child(5n) {
  transform: translateY(-7%) scale(1.09);
  border-radius: 8% 10% 6% 7%;
}

.farmhouse .landmark-art,
.warehouse-modern-art {
  -webkit-mask-image: radial-gradient(ellipse 96% 88% at 50% 47%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 96% 88% at 50% 47%, #000 62%, transparent 100%);
}

/* Customer fence and vehicle scale lock: thick posts, broad shrub walls, and a
   readable top-side tractor that still collides on its logical cell footprint. */
@media (orientation: landscape) and (min-width: 981px) {
  .field-frame::before {
    border-width: clamp(14px, 1vw, 20px);
  }

  .farm-landmarks::after {
    top: 48%;
    bottom: auto;
    right: 4px;
    width: 115px;
    height: 70px;
    border: 0;
    background: url('./assets/farm-road-v4.webp') center / 100% 100% no-repeat;
    clip-path: polygon(0 22%, 100% 0, 100% 82%, 0 100%);
    transform: rotate(-3deg);
  }

  .tractor-sprite {
    width: calc(112% / var(--cols));
    height: calc(112% / var(--rows));
  }

  .tractor-frame { inset: -14%; }
}

/* Final customer-parity correction: preserve the source warehouse ratio, keep its
   road connected, and make the shallow aerial perspective visible without turning
   the logical rectangular grid into a diamond board. */
@media (orientation: landscape) and (min-width: 981px) {
  .field-wrap {
    perspective: 1300px;
    perspective-origin: 50% 0;
  }

  .field-frame {
    transform: rotateX(7deg) translateZ(0);
    transform-origin: 50% 0;
  }

  .warehouse-art {
    height: auto;
    min-height: 0;
    aspect-ratio: 260 / 470;
    overflow: visible;
  }

  .warehouse-modern-art {
    object-fit: contain;
    object-position: right top;
  }

  .warehouse-road {
    visibility: visible;
    height: clamp(86px, 12vh, 132px);
    margin-top: 0;
    overflow: hidden;
    border-radius: 0;
    background:
      repeating-linear-gradient(90deg, transparent 0 18px, rgb(215 226 201 / .5) 19px 36px, transparent 37px 55px) center 54% / 100% 2px no-repeat,
      linear-gradient(90deg, transparent 16%, rgb(107 122 106 / .28) 17% 83%, transparent 84%),
      url('./assets/road-network-v5.webp') right center / auto 185% no-repeat;
    clip-path: none;
    box-shadow: inset 0 8px 12px rgb(255 255 255 / .08), 0 8px 13px rgb(2 28 17 / .2);
  }

  .warehouse-road::before {
    left: 50%;
    right: auto;
    top: 0;
    width: 2px;
    height: 100%;
    transform: none;
    background: repeating-linear-gradient(180deg, rgb(222 230 198 / .64) 0 16px, transparent 16px 31px);
    opacity: .45;
  }

  /* Every shrub wall uses the same continuous hedge strip; only its orientation
     changes. This avoids the checkerboard of differently cropped wall cells. */
  .crop-tile:not(.wheat-tile)::after,
  .hedge-corner::before {
    inset: -18%;
    background-size: 145% 100%;
  }

  .hedge-horizontal::after,
  .hedge-vertical::after,
  .hedge-corner::before {
    transform-origin: 50% 50%;
  }

  .hedge-horizontal::after { transform: none; }
  .hedge-vertical::after,
  .hedge-corner::before { transform: rotate(90deg); }
}

/* Client puddles are shallow, wide water patches with a single soft reflection. */
.puddle-sprite {
  --puddle-style: customer-shallow;
  left: 14%;
  top: 29%;
  width: 72%;
  height: 42%;
  border: 2px solid #5bb7b7;
  background:
    radial-gradient(ellipse at 68% 32%, rgb(239 255 246 / .72) 0 5%, transparent 7%),
    radial-gradient(ellipse at 50% 55%, #78c6c1 0 30%, #3c969a 31% 66%, #216c73 67% 100%);
  box-shadow:
    inset 0 -3px 6px rgb(8 48 54 / .36),
    inset 0 1px 2px rgb(239 255 246 / .3);
}

@media (orientation: portrait) {
  .puddle-sprite { left: 13%; width: 74%; }
}

@media (orientation: landscape) and (min-width: 981px) {
  /* The road remains below the field; only its vehicle rises above the fence so
     the full body and wheels cannot be swallowed by the field stacking layer. */
  .scene-hauler-track {
    position: absolute;
    z-index: 8;
    left: 100%;
    bottom: 3%;
    width: clamp(92px, 7.2vw, 138px);
  }
}

/* APK guidebook brand layer. The farm remains a game scene; these tokens are
   limited to identity, HUD chrome and interactive states. */
:root {
  --apk-green: #5eb420;
  --apk-green-light: #7fc63e;
  --apk-green-dark: #3f9812;
  --apk-blue: #4aace4;
  --apk-blue-dark: #2966cd;
  --apk-charcoal: #414141;
  --apk-gray: #bebebe;
  --apk-paper: #f5f5f5;
  --teal: var(--apk-blue-dark);
  --cyan: var(--apk-blue);
}

.title-plank {
  border-color: var(--apk-blue);
  padding: 5px 18px;
  background: #fff;
  box-shadow: 0 8px 18px rgb(0 0 0 / .2);
}
.brand-art {
  object-fit: contain;
  object-position: center;
}
.hud-box,
.level-plank,
.pause-button,
.restart-button {
  border-color: var(--apk-blue);
  background: linear-gradient(145deg, rgb(41 102 205 / .95), rgb(65 65 65 / .96));
  box-shadow: inset 0 0 0 1px rgb(245 245 245 / .2), 0 8px 18px rgb(0 0 0 / .26);
}
.cargo-counter,
.hud-box.timer,
.level-plank {
  background-image: none;
}
.cargo-counter::before,
.hud-box.timer::before {
  display: none;
}
.capacity-counter {
  border-color: var(--apk-green-light);
  background: linear-gradient(145deg, rgb(63 152 18 / .96), rgb(65 65 65 / .96));
}
.level-plank {
  color: #fff;
  font-size: clamp(18px, 1.35vw, 26px);
}
.hud-box span,
.hud-box small {
  color: var(--apk-paper);
}
.pause-button:hover,
.restart-button:hover {
  background: var(--apk-green-dark);
}

.instruction-panel,
.bottom-strip {
  border-color: var(--apk-blue);
  background: linear-gradient(145deg, rgb(51 61 64 / .97), rgb(41 102 205 / .78));
}
.instruction-panel h1,
.bottom-heading,
.result-kicker {
  color: var(--apk-green-light);
}
.control-caption,
.dpad button,
.diagnostic-button {
  border-color: var(--apk-blue);
}
.control-caption {
  background: rgb(41 102 205 / .78);
}
.dpad button,
.diagnostic-button {
  background: var(--apk-charcoal);
  color: #fff;
  box-shadow: 0 3px 0 var(--apk-blue-dark);
}
.dpad button:focus-visible,
.diagnostic-button:focus-visible,
.pause-button:focus-visible,
.restart-button:focus-visible {
  outline: 3px solid var(--apk-green-light);
  outline-offset: 3px;
}

.intro-panel,
.result-panel {
  border-color: var(--apk-blue);
  background: linear-gradient(145deg, #303b3e, #2966cd 72%, #3f9812);
}
.intro-brand-logo {
  display: block;
  width: min(320px, 78%);
  max-height: 104px;
  margin: 0 auto 8px;
  padding: 6px 12px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 8px 20px rgb(0 0 0 / .24);
}
.intro-kicker {
  color: #cceaff;
}
.intro-progress span.active {
  background: var(--apk-green-light);
  box-shadow: 0 0 10px rgb(127 198 62 / .65);
}
.intro-fact,
.intro-cargo-list > div,
.intro-actions button,
.gamepad-shape {
  border-color: var(--apk-blue);
}
.intro-fact strong,
.intro-rules li::before {
  color: var(--apk-green-light);
}
.intro-next,
.intro-play,
.result-restart {
  border-color: var(--apk-green-light);
  background: var(--apk-green);
  color: #102820;
  box-shadow: 0 4px 0 var(--apk-green-dark);
}
.intro-actions button:focus-visible,
.result-restart:focus-visible {
  outline-color: var(--apk-blue);
}

@media (orientation: landscape) and (min-width: 1450px) {
  .title-plank {
    height: 104px;
  }
}

@media (max-width: 560px) {
  .title-plank {
    height: 66px;
    padding: 5px 8px;
  }
  .intro-brand-logo {
    max-height: 82px;
  }
  .intro-visual {
    width: 100%;
    gap: 6px;
  }
  .intro-visual b {
    flex: 0 0 auto;
    font-size: 18px;
  }
  .intro-tractor {
    width: 68px;
    height: 56px;
  }
  .intro-bale {
    width: 56px;
    height: 56px;
  }
  .intro-warehouse {
    width: 84px;
    height: 66px;
  }
}

/* Unified world canvas. Every environmental element now shares one coordinate
   system and one camera matrix; interface panels remain screen-aligned. */
.scene-canvas {
  position: relative;
  transform-origin: 50% 3%;
  transform-style: preserve-3d;
}

@media (orientation: landscape) and (min-width: 981px) {
  .game-board {
    --scene-camera: perspective(1500px) rotateX(6deg) translateZ(0);
    overflow: hidden;
  }

  .scene-grid {
    position: relative;
    display: block;
    height: calc(100dvh - 132px);
    min-height: 570px;
    margin-top: 6px;
    perspective: none;
  }

  .scene-canvas {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: visible;
    isolation: isolate;
    transform: var(--scene-camera);
    will-change: transform;
  }

  .scene-canvas > .field-wrap {
    position: absolute;
    z-index: 4;
    left: 22.5%;
    top: 4.5%;
    display: block;
    width: 56.5%;
    height: auto;
    padding: 0;
    perspective: none;
    transform: none;
  }

  .scene-canvas .field-frame {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    padding: 7px;
    transform: none;
    transform-origin: center;
  }

  .scene-canvas .field-grid { aspect-ratio: 17 / 11; }

  .scene-canvas > .farm-landmarks {
    position: absolute;
    z-index: 5;
    left: 1.4%;
    top: 1.5%;
    width: 19.5%;
    height: 38%;
    margin: 0;
    transform: none;
    transform-origin: center;
  }

  .scene-canvas .farmhouse {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .scene-canvas .farmhouse .landmark-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
  }

  .scene-canvas .farm-landmarks::after {
    z-index: 1;
    top: 47%;
    right: -7%;
    bottom: auto;
    width: 38%;
    height: 24%;
    transform: none;
  }

  .warehouse-zone {
    position: absolute;
    z-index: 5;
    top: 2%;
    right: 0;
    width: 19.5%;
    height: 72%;
    overflow: visible;
  }

  .scene-canvas .warehouse-art {
    position: relative;
    right: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    aspect-ratio: 260 / 470;
    overflow: visible;
    transform: none;
    transform-origin: center;
  }

  .scene-canvas .warehouse-modern-art {
    object-fit: contain;
    object-position: right top;
  }

  .scene-canvas .warehouse-road {
    position: relative;
    z-index: -1;
    top: -1px;
    right: 0;
    width: 112%;
    height: clamp(86px, 12vh, 132px);
    margin: 0;
    visibility: visible;
    background: url('./assets/road-network-v5.webp') right center / auto 185% no-repeat;
    box-shadow: none;
    transform: none;
  }

  .scene-canvas > .scene-road {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 3%;
    width: 100%;
    height: 34%;
    overflow: visible;
    background: url('./assets/road-network-v5.webp') center / 100% 100% no-repeat;
    box-shadow: none;
    transform: none;
  }

  .scene-canvas > .scene-hauler-track {
    z-index: 7;
    bottom: 8%;
  }

  .scene-grid > .left-rail,
  .scene-grid > .right-rail {
    position: absolute;
    z-index: 20;
    height: auto;
    min-height: 0;
    overflow: visible;
    transform: none;
  }

  .scene-grid > .left-rail {
    left: .4%;
    top: 35%;
    width: 18%;
  }

  .scene-grid > .right-rail {
    right: .35%;
    top: 67%;
    width: 18.25%;
    padding: 0;
  }

  .scene-grid .instruction-panel {
    width: 100%;
    max-height: 59vh;
    margin: 0;
    overflow: auto;
  }

  .scene-grid .warehouse-list {
    margin-top: 0;
  }
}

@media (orientation: landscape) and (min-width: 1450px) {
  .scene-grid { min-height: 690px; }
}

@media (orientation: landscape) and (min-width: 981px) and (max-height: 720px) {
  .game-board { --scene-camera: perspective(1320px) rotateX(7deg) translateZ(0); }
  .scene-grid {
    height: calc(100dvh - 100px);
    min-height: 0;
  }
  .scene-grid > .left-rail { top: 31%; }
  .scene-grid > .right-rail { top: 62%; }
  .scene-grid .instruction-panel { max-height: 64vh; }
}

@media (orientation: landscape) and (min-width: 981px) and (max-height: 650px) {
  .scene-canvas > .field-wrap {
    left: 50%;
    width: min(56.5%, calc((100dvh - 190px) * 1.545));
    transform: translateX(-50%);
  }
  .scene-grid > .right-rail { top: 50.5%; }
  .scene-grid .control-caption,
  .scene-grid .dpad,
  .scene-grid .diagnostic-button,
  .scene-grid .diagnostic-status { display: none; }
}

@media (max-width: 980px), (orientation: portrait) {
  .scene-canvas {
    display: contents;
    transform: none;
  }
  .scene-canvas > .farm-landmarks,
  .scene-canvas > .warehouse-zone,
  .scene-canvas > .scene-road,
  .scene-canvas > .scene-hauler-track {
    display: none;
  }
  .scene-canvas > .field-wrap {
    position: relative;
    grid-area: field;
    width: 100%;
    height: auto;
    transform: none;
  }
  .scene-canvas .field-frame {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform: none;
  }
  .scene-grid > .left-rail { grid-area: left; }
  .scene-grid > .right-rail { display: none; }
}

/* True 2.5D camera. The ground is projected as one plane while tall artwork is
   counter-rotated around its ground contact point, matching a billboard-based
   isometric renderer instead of flattening the finished composition. */
@media (orientation: landscape) and (min-width: 981px) {
  .game-board {
    --world-tilt: 28deg;
    --scene-camera: perspective(1800px) rotateX(var(--world-tilt)) translateZ(0);
  }

  .scene-canvas {
    transform-origin: 50% 0;
  }

  .scene-canvas .field-frame {
    transform-style: preserve-3d;
  }

  /* The taller source plane becomes correctly proportioned after the camera
     shortens its Y axis. This also makes the near edge visibly wider. */
  .scene-canvas .field-grid {
    aspect-ratio: 17 / 11.5;
    overflow: visible;
    transform-style: preserve-3d;
  }

  .scene-canvas .map-tile {
    transform-style: flat;
  }

  .scene-canvas .map-tile.has-cargo,
  .scene-canvas .map-tile.has-puddle {
    transform-style: preserve-3d;
  }

  /* Hedges remain attached to the ground but rise above it. */
  .scene-canvas .crop-tile:not(.wheat-tile) {
    translate: none;
    filter: none;
    border-bottom: clamp(3px, .28vw, 5px) solid rgb(8 47 24 / .88);
    box-shadow:
      inset 0 3px 0 rgb(226 255 177 / .16),
      0 clamp(5px, .45vw, 8px) 0 rgb(12 55 29 / .9),
      0 clamp(9px, .72vw, 13px) 7px rgb(1 25 12 / .38);
  }

  /* Screen-facing objects use the tile as their anchor. */
  .scene-canvas .cargo-marker {
    transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(12px);
    transform-origin: 50% 78%;
    backface-visibility: hidden;
  }

  /* Water stays in the ground plane; counter-rotation made it look airborne. */
  .scene-canvas .puddle-sprite {
    transform: translateZ(1px);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
  }

  .scene-canvas .tractor-frame {
    transform: rotateX(calc(-1 * var(--world-tilt))) scale(1.06);
    transform-origin: 50% 78%;
    backface-visibility: hidden;
  }

  /* The source building renders already contain an aerial view, so they are
     billboards anchored by their lower edge rather than pictures laid flat. */
  .scene-canvas > .farm-landmarks,
  .scene-canvas > .warehouse-zone {
    transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(16px);
    transform-origin: 50% 100%;
    backface-visibility: hidden;
  }

  .scene-canvas > .farm-landmarks {
    left: 4.5%;
    width: 16%;
  }

  @keyframes cargo-float {
    0%, 100% { transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(12px) translateY(0); }
    50% { transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(12px) translateY(-3%); }
  }

  @keyframes cargo-alert {
    0%, 100% { transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(12px); filter: brightness(1); }
    50% { transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(12px); filter: brightness(1.65); }
  }

  @keyframes crop-grow-breathe {
    0%, 100% { transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(12px) scale(1); }
    50% { transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(12px) translateY(-2%) scale(1.035); filter: brightness(1.08); }
  }

  @keyframes puddle-shimmer {
    0%, 100% { transform: translateZ(1px) scale(1); opacity: 1; }
    50% { transform: translateZ(1px) scale(.98); opacity: .86; }
  }

  @keyframes tractor-turn-in {
    0% { opacity: 0; transform: rotateX(calc(-1 * var(--world-tilt))) scale(.95) rotate(-3deg); }
    55% { opacity: .72; }
    100% { opacity: 1; transform: rotateX(calc(-1 * var(--world-tilt))) scale(1.06) rotate(0); }
  }

  @keyframes tractor-turn-out {
    0% { opacity: 1; transform: rotateX(calc(-1 * var(--world-tilt))) scale(1.06) rotate(0); }
    100% { opacity: 0; transform: rotateX(calc(-1 * var(--world-tilt))) scale(.96) rotate(3deg); }
  }
}

@media (orientation: landscape) and (min-width: 981px) and (max-height: 720px) {
  .game-board {
    --world-tilt: 26deg;
    --scene-camera: perspective(1500px) rotateX(var(--world-tilt)) translateZ(0);
  }
}

/* Maze walls use aerial shrub blocks rather than a front-view hedge strip laid
   flat on the ground. Their lower edge remains the logical collision boundary. */
.crop-tile:not(.wheat-tile)::after,
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile)::after {
  inset: -24%;
  background: url('./assets/hedge-volume-v3.webp') center / contain no-repeat;
  filter:
    saturate(1.04)
    contrast(1.03)
    drop-shadow(0 6px 3px rgb(1 28 13 / .46));
}
.crop-tile:not(.wheat-tile) {
  background:
    linear-gradient(180deg, rgb(226 255 177 / .08), rgb(4 45 22 / .24)),
    url('./assets/hedge-tile.png') center / 128% 128% no-repeat;
}
.hedge-vertical::after,
.hedge-horizontal::after,
.hedge-corner::after { transform: none; }
.hedge-corner::before { display: none; }
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile)::after {
  filter:
    sepia(.18)
    hue-rotate(-10deg)
    saturate(.98)
    contrast(1.04)
    drop-shadow(0 6px 3px rgb(35 27 8 / .48));
}
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile) {
  background:
    linear-gradient(180deg, rgb(240 218 130 / .07), rgb(45 36 12 / .28)),
    url('./assets/level3-hedge-autumn.webp') center / 128% 128% no-repeat;
}

@media (orientation: landscape) and (min-width: 981px) {
  .scene-canvas .crop-tile:not(.wheat-tile) { transform-style: preserve-3d; }
  .scene-canvas .crop-tile:not(.wheat-tile)::after {
    transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(7px) scale(.92);
    transform-origin: 50% 76%;
    backface-visibility: hidden;
  }
}

/* Customer composition pass: the office is a landscape anchor, not a pasted
   rectangle. Its right edge sits behind the field fence and its source forest
   fades into the shared world backdrop. */
@media (orientation: landscape) and (min-width: 981px) {
  .scene-canvas > .farm-landmarks {
    z-index: 3;
    left: 3%;
    top: -0.5%;
    width: 19%;
    height: 40%;
    transform-origin: 56% 100%;
  }

  .scene-canvas .farmhouse .landmark-art {
    object-position: left top;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 82%, transparent 100%);
    filter:
      saturate(1.04)
      contrast(1.02)
      drop-shadow(0 10px 8px rgb(2 28 16 / .28));
  }

  .scene-canvas .farmhouse {
    height: auto;
    aspect-ratio: 400 / 310;
    filter: none;
  }

  .scene-canvas .farm-landmarks::after {
    display: none;
  }

  .hud-box span,
  .hud-box small,
  .level-plank,
  .instruction-panel h1,
  .control-caption,
  .mission-progress-head,
  .warehouse-list {
    font-family: var(--ui-font);
    letter-spacing: 0;
  }

  .hud-box span { font-size: 12px; line-height: 1; }
  .hud-box strong { font-size: 27px; line-height: 1; }
  .hud-box small { font-size: 10px; line-height: 1.05; }
  .level-plank { font-size: 27px; line-height: 1; }
  .instruction-panel h1 { font-size: 22px; line-height: 1; }
  .instruction-panel p { min-height: 42px; font-size: 13px; line-height: 1.28; }
  .priority-panel span, .loadout-heading, .mission-heading { font-size: 9px; }
  .priority-panel strong { font-size: 13px; }
  .tractor-loadout > p { font-size: 10px; }
  .mission-item span { font-size: 9px; }
  .mission-item small { font-size: 7px; }
}

@media (orientation: landscape) and (min-width: 981px) and (min-height: 721px) {
  .scene-grid > .left-rail {
    top: 42%;
    width: 17.6%;
  }
}

@media (orientation: landscape) and (min-width: 981px) and (max-height: 849px) {
  .scene-grid > .left-rail {
    top: 31%;
    width: 18%;
  }
  .instruction-panel h1 { font-size: 19px; }
  .instruction-panel p { min-height: 34px; font-size: 11px; }
  .priority-panel span, .loadout-heading, .mission-heading { font-size: 8px; }
  .priority-panel strong { font-size: 11px; }
  .tractor-loadout > p { font-size: 9px; }
  .mission-item span { font-size: 8px; }
  .mission-item small { font-size: 6px; }
}

@media (orientation: landscape) and (min-width: 981px) and (max-height: 650px) {
  .scene-grid > .left-rail { top: 30.5%; }
}

@media (orientation: landscape) and (min-width: 981px) and (min-height: 850px) and (max-height: 959px) {
  .scene-grid > .left-rail {
    top: 35%;
    width: 18%;
  }
}

/* Landmark asset correction. The scene camera still owns the shared ground
   plane, while the two building billboards retain their native proportions. */
.intro-warehouse {
  width: 112px;
  height: 96px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 6px 5px rgb(0 0 0 / .34));
}

@media (max-width: 560px) {
  .intro-warehouse {
    width: 84px;
    height: 68px;
  }
}

@media (orientation: landscape) and (min-width: 981px) {
  .scene-canvas > .farm-landmarks {
    left: 2.2%;
    top: 1%;
    width: 19.4%;
    height: 36%;
    transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(8px);
    transform-origin: 50% 100%;
  }

  .scene-canvas .farmhouse {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .scene-canvas .farmhouse .landmark-art {
    object-fit: contain;
    object-position: center bottom;
    -webkit-mask-image: none;
    mask-image: none;
    filter: drop-shadow(0 6px 4px rgb(2 28 16 / .3));
  }

  .scene-canvas > .warehouse-zone {
    transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(8px);
    transform-origin: 100% 100%;
  }

  .scene-canvas .warehouse-art {
    right: 0;
    width: 82%;
    height: auto;
    margin-left: auto;
    aspect-ratio: 280 / 470;
  }

  .scene-canvas .warehouse-modern-art {
    object-fit: contain;
    object-position: right top;
  }
}

/* Volumetric hedge lock. The collision cell stays rectangular, while a single
   transparent sprite contains the lit crown, dark front face and side depth.
   Keeping those parts in one render avoids flat square fills and CSS extrusion
   artifacts after the shared world camera is applied. */
.crop-tile:not(.wheat-tile),
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile) {
  --hedge-wall-style: volumetric-sprite-v5;
  isolation: isolate;
  overflow: visible;
  background: none;
  box-shadow: none;
  filter: none;
}

.crop-tile:not(.wheat-tile)::before,
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile)::before {
  display: none;
}

.crop-tile:not(.wheat-tile)::after,
.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile)::after {
  content: '';
  position: absolute;
  z-index: 2;
  display: block;
  inset: -30%;
  width: auto;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
  background: url('./assets/hedge-block-v5.webp') center / contain no-repeat;
  transform: translateY(-4%) scale(1.02);
  transform-origin: 50% 78%;
  backface-visibility: hidden;
  filter:
    saturate(1.03)
    contrast(1.045)
    drop-shadow(0 7px 4px rgb(1 28 13 / .5))
    drop-shadow(-2px -2px 1px rgb(238 255 193 / .12));
}

.field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile)::after {
  filter:
    sepia(.16)
    hue-rotate(-10deg)
    saturate(1.02)
    contrast(1.07)
    drop-shadow(0 5px 3px rgb(35 27 8 / .46));
}

@media (orientation: landscape) and (min-width: 981px) {
  .scene-canvas .crop-tile:not(.wheat-tile) {
    border-bottom: 0;
    box-shadow: none;
  }

  .scene-canvas .crop-tile:not(.wheat-tile)::after {
    transform:
      translateZ(6px)
      translateY(-7%)
      scale(1.08);
  }
}

/* Final scene alignment: shrubs keep a clear drive lane, while buildings and
   roads stay inside the same projected world instead of cancelling its camera. */
@media (orientation: landscape) and (min-width: 981px) {
  .scene-canvas .crop-tile:not(.wheat-tile)::after,
  .scene-canvas .field-grid[data-season="early-autumn"] .crop-tile:not(.wheat-tile)::after {
    inset: -10%;
    transform: translateZ(6px) translateY(-5%) scale(.97);
  }

  .scene-canvas > .farm-landmarks,
  .scene-canvas > .warehouse-zone {
    transform: translateZ(7px);
    backface-visibility: visible;
  }

  .scene-canvas > .farm-landmarks {
    left: 3.7%;
    top: 1.8%;
    width: 19.1%;
    transform: rotateX(-14deg) rotateZ(-2deg) translateZ(7px);
    transform-origin: 50% 82%;
  }

  .scene-canvas > .warehouse-zone {
    top: 1.4%;
    right: 7.5%;
    width: 18.5%;
    height: 92%;
    transform-origin: 100% 18%;
  }

  .scene-canvas .warehouse-art {
    position: relative;
    z-index: 3;
    width: 76%;
    /* The render already contains an aerial camera. Compensate part of the
       world tilt on the building only, while its approach road stays grounded. */
    transform: rotateX(-10deg) rotateZ(1.5deg) translateZ(7px);
    transform-origin: 100% 100%;
    backface-visibility: visible;
  }

  .scene-canvas .warehouse-road {
    position: absolute;
    z-index: 1;
    top: 48%;
    right: -2%;
    width: 124%;
    height: 51%;
    margin: 0;
    overflow: visible;
    background: url('./assets/road-network-v5.webp') right top / auto 100% no-repeat;
    transform: none;
  }

  .scene-canvas > .scene-road {
    bottom: 1.5%;
    height: 35%;
  }
}

/* The TV control panel must be fully usable without scrolling or clipping. */
@media (orientation: landscape) and (min-width: 981px) and (max-height: 849px) {
  .scene-grid > .left-rail {
    top: 30%;
    bottom: 1.5%;
  }

  .scene-grid .instruction-panel {
    height: 100%;
    max-height: none;
    padding: 8px;
    overflow: hidden;
  }

  .scene-grid .instruction-panel h1 { margin: 0 0 4px; }
  .scene-grid .instruction-panel > p { min-height: 0; margin: 0 0 5px; line-height: 1.2; }
  .scene-grid .priority-panel,
  .scene-grid .tractor-loadout,
  .scene-grid .mission-progress { gap: 3px; margin-bottom: 5px; padding: 5px 6px; }
  .scene-grid .mission-items { gap: 3px; }
  .scene-grid .mission-item { min-height: 0; padding: 3px 4px; }
  .scene-grid .control-caption { padding: 3px; }
  .scene-grid .dpad {
    grid-template-columns: repeat(3, 31px);
    grid-template-rows: repeat(2, 29px);
    gap: 3px;
    margin-top: 4px;
  }
  .scene-grid .diagnostic-button { margin-top: 5px; padding: 4px 6px; }
  .scene-grid .diagnostic-status { display: none; }
}

/* Design-audit lock: cargo color, destination language and UI geometry use one
   shared system at every breakpoint. */
.legend-yellow,
.intro-dot-yellow,
.loadout-yellow { background-color: var(--cargo-wheat); }
.legend-blue,
.intro-dot-blue,
.loadout-blue { background-color: var(--cargo-seed); }
.legend-green,
.intro-dot-green,
.loadout-green { background-color: var(--cargo-feed); }
.legend-yellow { background-image: url('./assets/bale-wheat.png'); }
.legend-blue { background-image: url('./assets/bale-seed.png'); }
.legend-green { background-image: url('./assets/bale-feed.png'); }
.legend-yellow,
.legend-blue,
.legend-green { background-position: center; background-repeat: no-repeat; background-size: contain; }

.warehouse-yellow,
.warehouse-marker-yellow,
.warehouse-card-yellow { --warehouse-color: var(--cargo-wheat); }
.warehouse-blue,
.warehouse-marker-blue,
.warehouse-card-blue { --warehouse-color: var(--cargo-seed); }
.warehouse-green,
.warehouse-marker-green,
.warehouse-card-green { --warehouse-color: var(--cargo-feed); }
.mission-yellow { --mission-color: var(--cargo-wheat); }
.mission-blue { --mission-color: var(--cargo-seed); }
.mission-green { --mission-color: var(--cargo-feed); }
.loadout-item-yellow { --loadout-color: var(--cargo-wheat); }
.loadout-item-blue { --loadout-color: var(--cargo-seed); }
.loadout-item-green { --loadout-color: var(--cargo-feed); }

.hud-box,
.capacity-counter,
.hud-box.timer,
.level-plank {
  border-radius: 14px;
  border-color: var(--apk-blue);
  background: linear-gradient(145deg, rgb(41 102 205 / .95), rgb(65 65 65 / .96));
  background-image: none;
}
.capacity-counter { display: grid; }
.pause-button,
.restart-button { border-radius: var(--radius-round); }
button:not(.pause-button):not(.restart-button) { border-radius: var(--radius-control); }

.warehouse-empty {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgb(199 240 211 / .24);
  border-radius: var(--radius-control);
  background: rgb(4 43 51 / .56);
  color: #d7ece2;
  font-size: 9px;
  line-height: 1.25;
}

.warehouse-list h2 {
  width: max-content;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 5px 10px;
  border: 1px solid rgb(83 218 204 / .58);
  border-radius: var(--radius-control);
  background: rgb(3 35 39 / .9);
  color: #e6fff3;
  text-shadow: 0 1px 2px #001c18;
  box-shadow: 0 4px 10px rgb(0 0 0 / .34);
}

.warehouse-list .warehouse-empty,
.warehouse-list .field-exit-card,
.warehouse-list .warehouse-card {
  border-color: rgb(120 224 205 / .58);
  background: rgb(3 35 39 / .96);
  box-shadow: 0 5px 12px rgb(0 0 0 / .38);
}
.warehouse-list .warehouse-empty {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.warehouse-list .field-exit-card span {
  color: #fff;
  font-size: 13px;
}
.warehouse-list .field-exit-card small {
  color: #f0fff8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}
.warehouse-list .warehouse-card strong { color: #fff; font-size: 12px; }
.warehouse-list .warehouse-card small { color: #f0fff8; font-size: 10px; }

/* Route information sits over a detailed road scene. Keep it on one opaque
   instrument panel so the background never breaks the reading order. */
@media (orientation: landscape) and (min-width: 981px) {
  .scene-grid .warehouse-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 10px;
    border: 2px solid #55dacc;
    border-radius: 10px;
    background: #052f35;
    box-shadow: 0 10px 24px rgb(0 0 0 / .58), inset 0 0 0 1px rgb(219 255 243 / .12);
  }

  .scene-grid .warehouse-list h2 {
    width: 100%;
    margin: 0;
    padding: 0 2px 7px;
    border: 0;
    border-bottom: 1px solid rgb(112 224 205 / .58);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    text-shadow: 0 2px 3px #001815;
    box-shadow: none;
  }

  .scene-grid .warehouse-list .warehouse-empty,
  .scene-grid .warehouse-list .field-exit-card,
  .scene-grid .warehouse-list .warehouse-card {
    margin: 0;
    border-color: #4f9389;
    background: #0b4147;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
  }

  .scene-grid .warehouse-list .warehouse-empty {
    padding: 10px 11px;
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
  }

  .scene-grid .warehouse-list .field-exit-card { padding: 9px 11px; }
  .scene-grid .warehouse-list .field-exit-card span { font-size: 15px; }
  .scene-grid .warehouse-list .field-exit-card small { font-size: 12px; }
}

.field-gate-marker {
  width: max-content;
  min-width: 76px;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}
.entry-tile .field-gate-marker { left: 5px; top: -8%; }


@media (orientation: landscape) and (min-width: 981px) {
  .scene-canvas > .warehouse-zone {
    top: 1.4%;
    right: 0;
    width: 21%;
    height: 92%;
    z-index: 10;
  }
  .scene-canvas .warehouse-art {
    width: 82%;
    margin-left: 0;
    aspect-ratio: 1;
  }
  .scene-canvas .warehouse-modern-art {
    object-fit: contain;
    object-position: right top;
  }
  .scene-canvas .warehouse-road {
    top: 33%;
    right: -1%;
    width: 111%;
    height: 61%;
  }
  .scene-grid > .right-rail {
    right: 1.1%;
    top: 72%;
    width: 18.5%;
  }
}

@media (orientation: landscape) and (min-width: 981px) and (max-height: 620px) {
  .scene-grid > .right-rail { top: 50%; }
}

@media (min-width: 561px) and (max-width: 1100px) {
  .hud {
    grid-template-columns: minmax(210px, 1.8fr) repeat(3, minmax(92px, 1fr)) 40px 40px;
  }
  .title-plank { grid-column: 1; }
  .cargo-counter { grid-column: 2; }
  .capacity-counter { grid-column: 3; display: grid; }
  .hud-box.timer { grid-column: 4; }
  .pause-button { grid-column: 5; grid-row: 1; }
  .restart-button { grid-column: 6; grid-row: 1; }
  .level-plank { display: none; }
}

@media (max-width: 560px) {
  .hud { grid-template-columns: repeat(3, minmax(0, 1fr)) 40px 40px; gap: 6px; }
  .title-plank { grid-column: 1 / span 2; grid-row: 1; }
  .hud-box.timer { grid-column: 3; grid-row: 1; }
  .pause-button { grid-column: 4; grid-row: 1; }
  .restart-button { grid-column: 5; grid-row: 1; }
  .cargo-counter { grid-column: 1 / span 2; grid-row: 2; min-height: 56px; }
  .capacity-counter { grid-column: 3 / span 2; grid-row: 2; min-height: 56px; display: grid; }
  .level-plank { display: none; }
  .field-gate-marker { min-width: 64px; padding-inline: 5px; }
}

/* The load is part of the tractor silhouette: a compact trailer replaces the
   detached vertical meter. The four states are tractor-only, then 1/2/3 real
   cargo assets on the platform. */
.tractor-load {
  position: absolute;
  z-index: 0;
  display: block;
  width: 88%;
  height: 64%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 180ms cubic-bezier(.2, .72, .3, 1);
}
.load-1 .tractor-load,
.load-2 .tractor-load,
.load-3 .tractor-load { opacity: 1; }

.tractor-cargo-hitch {
  position: absolute;
  z-index: 0;
  left: 72%;
  top: 45%;
  width: 40%;
  height: 8%;
  border-radius: 999px;
  background: linear-gradient(180deg, #c7d7c7, #31443b 48%, #14281f);
  box-shadow: 0 2px 2px rgb(0 0 0 / .48);
}
.tractor-cargo-platform {
  position: absolute;
  z-index: 1;
  inset: 9% 0 17%;
  border: max(1px, .08vw) solid #c9d9bd;
  border-radius: 18% 20% 24% 20%;
  background:
    linear-gradient(90deg, transparent 0 8%, rgb(222 239 193 / .32) 9% 12%, transparent 13% 44%, rgb(222 239 193 / .28) 45% 49%, transparent 50% 81%, rgb(222 239 193 / .3) 82% 86%, transparent 87%),
    linear-gradient(165deg, #3d7150 0 25%, #19452f 26% 69%, #0e2b20 70%);
  box-shadow:
    inset 0 2px 2px rgb(255 255 221 / .3),
    inset 0 -5px 4px rgb(0 17 10 / .55),
    0 5px 4px rgb(0 18 10 / .44);
}
.tractor-cargo-platform::before,
.tractor-cargo-platform::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: -17%;
  width: 24%;
  aspect-ratio: 1;
  border: 2px solid #283028;
  border-radius: 50%;
  background: radial-gradient(circle, #a9c15d 0 22%, #222b24 24% 58%, #070c09 60%);
  box-shadow: 0 2px 2px rgb(0 0 0 / .55);
}
.tractor-cargo-platform::before { left: 11%; }
.tractor-cargo-platform::after { right: 11%; }
.tractor-cargo-item {
  position: absolute;
  z-index: calc(4 - var(--cargo-index));
  top: -23%;
  display: block;
  width: 46%;
  aspect-ratio: 1;
  filter: drop-shadow(0 4px 2px rgb(0 18 9 / .55));
}
.tractor-cargo-item img { width: 100%; height: 100%; object-fit: contain; }
.load-1 .tractor-cargo-item:nth-child(1) { left: 27%; }
.load-2 .tractor-cargo-item:nth-child(1) { left: 5%; }
.load-2 .tractor-cargo-item:nth-child(2) { left: 49%; }
.load-3 .tractor-cargo-item:nth-child(1) { left: 0; }
.load-3 .tractor-cargo-item:nth-child(2) { left: 27%; top: -42%; }
.load-3 .tractor-cargo-item:nth-child(3) { left: 56%; }

/* Rear-mounted placement follows the current tractor projection. */
.tractor-right .tractor-load { left: -88%; top: 20%; transform: rotateX(calc(-1 * var(--world-tilt, 0deg))) rotate(-1deg); }
.tractor-left .tractor-load { right: -88%; top: 20%; transform: rotateX(calc(-1 * var(--world-tilt, 0deg))) rotate(1deg) scaleX(-1); }
.tractor-up .tractor-load { z-index: 2; left: 8%; top: 72%; width: 84%; transform: rotateX(calc(-1 * var(--world-tilt, 0deg))) scale(.84); }
.tractor-down .tractor-load { left: 8%; top: -48%; width: 84%; transform: rotateX(calc(-1 * var(--world-tilt, 0deg))) scale(.84); }
.tractor-up .tractor-cargo-hitch,
.tractor-down .tractor-cargo-hitch {
  left: 46%;
  width: 8%;
  height: 38%;
}
.tractor-up .tractor-cargo-hitch { top: -17%; }
.tractor-down .tractor-cargo-hitch { top: 78%; }

@media (prefers-reduced-motion: reduce) {
  .tractor-load { transition: none; }
}

/* One naturally proportioned U-road connects office, warehouse and the lower
   perimeter. Compressing the asset into a short strip broke both junctions. */
@media (orientation: landscape) and (min-width: 981px) {
  .scene-canvas .warehouse-road {
    visibility: hidden;
    background: none;
  }
  .scene-canvas > .scene-road {
    bottom: 0;
    height: 100%;
    background: url('./assets/road-network-v5.webp') center bottom / 100% auto no-repeat;
  }
}

/* Finished cargo is grounded on its tile. It keeps a subtle light pulse but no
   longer floats above the path or rises over a foreground hedge. */
.cargo-state-ready::before,
.cargo-state-urgent::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 17%;
  right: 17%;
  bottom: 12%;
  display: block;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(24 35 13 / .58), transparent 70%);
  filter: blur(2px);
}
.important-cargo,
.cargo-state-urgent { animation: cargo-ground-pulse 1.5s ease-in-out infinite; }
@keyframes cargo-ground-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@media (orientation: landscape) and (min-width: 981px) {
  .scene-canvas .cargo-marker {
    transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(2px) translateY(5%);
    transform-origin: 50% 92%;
  }
  .scene-canvas .cargo-marker .bale-sprite {
    inset: 6% 5% 15%;
    width: 90%;
    height: 79%;
  }
}

/* A puddle is painted into the ground around the wheel contact patch. It must
   never be counter-rotated or lifted in Z: both make it cover the tractor body. */
@media (orientation: landscape) and (min-width: 981px) {
  .scene-canvas .puddle-sprite {
    z-index: 0;
    left: -35%;
    top: 44%;
    width: 170%;
    height: 34%;
    transform: none;
    border: 0;
    border-radius: 52% 48% 44% 56% / 48% 56% 44% 52%;
    opacity: .82;
    filter: saturate(.86) brightness(.86);
    box-shadow:
      inset 0 -2px 4px rgb(8 48 54 / .25),
      inset 0 1px 2px rgb(239 255 246 / .18);
    animation: puddle-ground-shimmer 1.8s ease-in-out infinite;
  }
}

@keyframes puddle-ground-shimmer {
  0%, 100% { opacity: .82; }
  50% { opacity: .74; }
}

/* A turn always keeps one fully readable tractor frame on screen. Starting the
   incoming frame at zero opacity caused a visible blink on rapid direction
   changes, especially before a directional bitmap had reached the cache. */
.tractor-frame {
  will-change: opacity, transform;
}
.tractor-turning .tractor-frame-current {
  animation: tractor-turn-visible-in 150ms cubic-bezier(.2, .72, .3, 1) both;
}
.tractor-turning .tractor-frame-previous {
  animation: tractor-turn-visible-out 150ms cubic-bezier(.2, .72, .3, 1) both;
}
@keyframes tractor-turn-visible-in {
  0% { opacity: 1; transform: rotateX(calc(-1 * var(--world-tilt, 0deg))) scale(1.06); }
  100% { opacity: 1; transform: rotateX(calc(-1 * var(--world-tilt, 0deg))) scale(1.06); }
}
@keyframes tractor-turn-visible-out {
  0% { opacity: .72; transform: rotateX(calc(-1 * var(--world-tilt, 0deg))) scale(1.06); }
  100% { opacity: 0; transform: rotateX(calc(-1 * var(--world-tilt, 0deg))) scale(1.06); }
}

/* The trailer shares the tractor wheel baseline and casts one broad contact
   shadow, so the complete loaded silhouette sits on the field plane. */
.tractor-load::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: 3%;
  right: 3%;
  bottom: -4%;
  height: 25%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(1 20 11 / .58), transparent 72%);
  filter: blur(2px);
}
.tractor-right .tractor-load,
.tractor-left .tractor-load { top: 31%; }
.tractor-load {
  right: auto;
  transition:
    opacity 140ms ease,
    left 240ms cubic-bezier(.2, .72, .3, 1),
    top 240ms cubic-bezier(.2, .72, .3, 1),
    width 240ms cubic-bezier(.2, .72, .3, 1),
    height 240ms cubic-bezier(.2, .72, .3, 1),
    transform 240ms cubic-bezier(.2, .72, .3, 1);
  will-change: left, top, width, height, transform, opacity;
}
.tractor-right .tractor-load { left: -88%; }
.tractor-left .tractor-load {
  left: 100%;
  right: auto;
  transform: rotateX(calc(-1 * var(--world-tilt, 0deg))) rotate(1deg);
}
.tractor-left .tractor-cargo-hitch { left: -28%; }
.tractor-cargo-item {
  top: 2%;
  filter: drop-shadow(0 2px 1px rgb(0 18 9 / .5));
}
.load-3 .tractor-cargo-item:nth-child(2) { top: -10%; }

/* The front and rear tractor views need a longitudinal trailer. Reusing the
   wide side silhouette formed a T shape and placed the load over the hitch. */
.tractor-up .tractor-load,
.tractor-down .tractor-load {
  z-index: 0;
  left: 24%;
  width: 52%;
  height: 76%;
}
.tractor-up .tractor-load {
  top: 125%;
  transform: rotateX(calc(-1 * var(--world-tilt, 0deg))) scale(.88);
}
.tractor-down .tractor-load {
  top: -103%;
  transform: rotateX(calc(-1 * var(--world-tilt, 0deg))) scale(.88);
}
.tractor-up .tractor-cargo-platform,
.tractor-down .tractor-cargo-platform {
  inset: 4% 4% 7%;
  border-radius: 19% 19% 25% 25%;
  background:
    linear-gradient(90deg, transparent 0 8%, rgb(222 239 193 / .28) 9% 13%, transparent 14% 46%, rgb(222 239 193 / .25) 47% 52%, transparent 53% 84%, rgb(222 239 193 / .28) 85% 89%, transparent 90%),
    linear-gradient(165deg, #4a7b57 0 20%, #1a4931 21% 70%, #0d2b1f 71%);
}
.tractor-up .tractor-cargo-platform::before,
.tractor-up .tractor-cargo-platform::after,
.tractor-down .tractor-cargo-platform::before,
.tractor-down .tractor-cargo-platform::after {
  bottom: 16%;
  width: 32%;
}
.tractor-up .tractor-cargo-platform::before,
.tractor-down .tractor-cargo-platform::before { left: -17%; }
.tractor-up .tractor-cargo-platform::after,
.tractor-down .tractor-cargo-platform::after { right: -17%; }
.tractor-up .tractor-cargo-hitch,
.tractor-down .tractor-cargo-hitch {
  z-index: -1;
  left: 45%;
  width: 10%;
  height: 78%;
}
.tractor-up .tractor-cargo-hitch { top: -67%; }
.tractor-down .tractor-cargo-hitch { top: 88%; }
.tractor-up .tractor-load::before,
.tractor-down .tractor-load::before {
  left: -8%;
  right: -8%;
  bottom: 2%;
  height: 28%;
}
.tractor-up .tractor-cargo-item,
.tractor-down .tractor-cargo-item {
  width: 58%;
  top: 8%;
}
.tractor-up.load-1 .tractor-cargo-item:nth-child(1),
.tractor-down.load-1 .tractor-cargo-item:nth-child(1) { left: 21%; }
.tractor-up.load-2 .tractor-cargo-item:nth-child(1),
.tractor-down.load-2 .tractor-cargo-item:nth-child(1) { left: 1%; top: 20%; }
.tractor-up.load-2 .tractor-cargo-item:nth-child(2),
.tractor-down.load-2 .tractor-cargo-item:nth-child(2) { left: 41%; top: 2%; }
.tractor-up.load-3 .tractor-cargo-item:nth-child(1),
.tractor-down.load-3 .tractor-cargo-item:nth-child(1) { left: -2%; top: 25%; }
.tractor-up.load-3 .tractor-cargo-item:nth-child(2),
.tractor-down.load-3 .tractor-cargo-item:nth-child(2) { left: 21%; top: -5%; }
.tractor-up.load-3 .tractor-cargo-item:nth-child(3),
.tractor-down.load-3 .tractor-cargo-item:nth-child(3) { left: 44%; top: 25%; }

/* Final central-perspective lock. Both landmark renders are authored to face
   the scene center, then receive exactly the same local camera compensation. */
@media (orientation: landscape) and (min-width: 981px) {
  .scene-canvas > .farm-landmarks,
  .scene-canvas > .warehouse-zone {
    transform: rotateX(-12deg) translateZ(8px);
    transform-origin: 50% 100%;
    backface-visibility: hidden;
  }

  .scene-canvas > .farm-landmarks {
    z-index: 3;
    left: 1.7%;
    top: 3.5%;
    width: 19.5%;
    height: auto;
    aspect-ratio: 1.48;
    transform: rotateX(calc(-1 * var(--world-tilt))) translateZ(8px);
    transform-origin: 50% 100%;
    backface-visibility: hidden;
  }

  .scene-canvas .farmhouse,
  .scene-canvas .warehouse-art {
    right: auto;
    width: 100%;
    height: auto;
    margin: 0;
    overflow: visible;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .scene-canvas .farmhouse { aspect-ratio: 1.48; }
  .scene-canvas .warehouse-art { aspect-ratio: 1290 / 1014; }

  .scene-canvas .farmhouse .landmark-art,
  .scene-canvas .warehouse-modern-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .scene-canvas .office-3d-canvas {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .scene-canvas .farmhouse.office-3d-ready .landmark-art { visibility: hidden; }

  .scene-canvas > .warehouse-zone {
    z-index: 5;
    top: 1.2%;
    right: 2.8%;
    width: 18%;
    height: auto;
  }

  .scene-canvas .warehouse-tile .warehouse-marker { right: 62px; }

  /* People stay on the curved office entrance and return inside. Their parent
     now has a real aspect ratio, so the route cannot resolve against y=0. */
  .scene-canvas .office-people {
    z-index: 6;
    left: 44%;
    top: 65%;
    bottom: auto;
    width: 9%;
    opacity: 0;
    animation: people-on-office-plaza 15s cubic-bezier(.34, .18, .24, 1) infinite;
  }

  .scene-grid > .office-billboard {
    position: absolute;
    z-index: 3;
    left: 0.4%;
    top: 3.5%;
    width: 20%;
    height: auto;
    aspect-ratio: 1.82;
    transform: none;
    transform-origin: 50% 100%;
  }

  .scene-grid > .office-billboard::after { display: none; }

  .scene-grid > .office-billboard .farmhouse {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1.82;
    overflow: visible;
    transform: none;
  }

  .scene-grid > .office-billboard .landmark-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .scene-grid > .office-billboard .office-3d-canvas {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .scene-grid > .office-billboard .farmhouse.office-3d-ready .landmark-art { visibility: hidden; }

  .scene-grid > .office-billboard .office-people {
    z-index: 6;
    left: 44%;
    top: 65%;
    bottom: auto;
    width: 9%;
    opacity: 0;
    animation: people-on-office-plaza 15s cubic-bezier(.34, .18, .24, 1) infinite;
  }
}

@keyframes people-on-office-plaza {
  0%, 12% { opacity: 0; transform: translate(-3px, -10px) scale(.82); }
  22% { opacity: 1; transform: translate(0, -4px) scale(.88); }
  42% { opacity: 1; transform: translate(5px, 1px) scale(.94); }
  62% { opacity: 1; transform: translate(10px, 5px) scale(1); }
  78% { opacity: .92; transform: translate(5px, 1px) scale(.94); }
  88%, 100% { opacity: 0; transform: translate(0, -5px) scale(.86); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-canvas .office-people,
  .scene-grid > .office-billboard .office-people {
    opacity: 1 !important;
    animation: none !important;
    transform: translate(5px, 1px) scale(.94) !important;
  }
}

/* Fixed 4K UHD television output. Layout math stays in a stable 1920x1080
   coordinate system and is rendered at 2x on the 3840x2160 target panel. */
.tv-stage {
  position: relative;
  width: 100%;
  min-height: 100%;
}

@media (orientation: landscape) and (min-width: 1450px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .game-shell {
    display: block;
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .tv-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    flex: none;
    width: 1920px;
    height: 1080px;
    min-height: 1080px;
    transform: translate(-50%, -50%) scale(var(--tv-stage-scale, 1));
    transform-origin: center;
  }

  .tv-stage > .game-board {
    width: 1920px;
    max-width: none;
    height: 1080px;
    min-height: 1080px;
    margin: 0;
  }

  .tv-stage .scene-grid {
    height: 948px;
    min-height: 948px;
  }
}

/* One Three.js camera now owns the complete world. The DOM field remains as
   a hidden, inspectable state mirror for diagnostics and accessibility. */
.intro-asset-status {
  color: #effff5;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  margin-block: 12px;
}
.intro-asset-status p { margin: 0 0 8px; }
.intro-asset-status button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #8de7c6;
  border-radius: 7px;
  font: inherit;
  cursor: pointer;
}
.intro-asset-status button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.intro-actions button:disabled { opacity: 0.55; cursor: wait; box-shadow: none; }

.world-3d-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background: transparent;
}
.world-3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.render-notice {
  position: absolute;
  z-index: 2;
  top: 45%;
  left: 50%;
  width: min(380px, calc(100% - 32px));
  margin: 0;
  padding: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid #65b3d6;
  border-radius: 8px;
  background: #123c3e;
  color: #fff;
  font-size: 18px;
  text-align: center;
}
.world-3d-stage.world-3d-ready + .scene-canvas,
.world-3d-stage.world-3d-ready ~ .office-billboard {
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.scene-grid > .left-rail,
.scene-grid > .right-rail {
  z-index: 5;
}

@media (orientation: landscape) and (min-width: 981px) {
  .scene-grid {
    position: relative;
    display: block;
    height: calc(100dvh - 132px);
    min-height: 570px;
    overflow: hidden;
    background: transparent;
  }
  .scene-canvas { transform: none !important; }
  .scene-grid > .left-rail {
    left: 1.15%;
    top: 42%;
    width: 18.25%;
  }
  .scene-grid > .right-rail {
    left: 28.5%;
    right: auto;
    top: 8px;
    width: 43%;
  }
  .scene-grid .instruction-panel,
  .scene-grid .warehouse-list {
    border-color: rgb(87 202 255 / .78);
    background: linear-gradient(145deg, rgb(9 39 53 / .9), rgb(10 65 65 / .88));
    box-shadow: 0 14px 34px rgb(0 0 0 / .34), inset 0 0 0 1px rgb(255 255 255 / .08);
    backdrop-filter: blur(9px);
  }
  .scene-grid .warehouse-list {
    padding: 8px;
    border: 2px solid rgb(87 202 255 / .55);
    border-radius: 12px;
    display: flex;
    align-items: stretch;
    height: 68px;
    gap: 8px;
    background: #052f35;
    box-shadow: none;
    backdrop-filter: none;
  }
  .scene-grid .warehouse-list h2 {
    flex: 0 0 76px;
    width: auto;
    align-self: center;
    padding: 0;
    border: 0;
    font-size: 15px;
    line-height: 1.1;
  }
  .scene-grid .warehouse-list .warehouse-empty,
  .scene-grid .warehouse-list .warehouse-card,
  .scene-grid .warehouse-list .field-exit-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    padding: 3px 7px;
    border: 0;
    border-left: 2px solid #4f9389;
    border-radius: 0;
    background: none;
    box-shadow: none;
    justify-content: center;
    line-height: 1.2;
  }
  .scene-grid .warehouse-list .warehouse-empty { display: flex; align-items: center; font-size: 12px; }
  .scene-grid .warehouse-list .warehouse-card span,
  .scene-grid .warehouse-list .field-exit-card span { font-size: 13px; }
  .scene-grid .warehouse-list .warehouse-card strong,
  .scene-grid .warehouse-list .field-exit-card small { font-size: 11px; }
  .scene-grid .warehouse-list .warehouse-card small { font-size: 10px; }
}

@media (max-width: 980px), (orientation: portrait) {
  .scene-grid {
    position: relative;
    display: grid;
    min-height: 0;
    padding-top: min(72vw, 560px);
  }
  .world-3d-stage { height: min(72vw, 560px); }
  .world-3d-stage.world-3d-ready + .scene-canvas { display: none; }
}

@media (orientation: landscape) and (min-width: 981px) and (max-width: 1449px) and (max-height: 849px) {
  .scene-grid > .left-rail {
    top: 27%;
    bottom: auto;
    width: 23%;
    height: auto;
    overflow: visible;
    transform: scale(.78);
    transform-origin: left top;
  }
  .scene-grid .instruction-panel {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

@media (orientation: landscape) and (min-width: 981px) and (max-height: 620px) {
  .scene-grid {
    height: calc(100dvh - 112px);
    min-height: 0;
  }
  .scene-grid > .left-rail {
    top: 28%;
    width: 24%;
    transform: scale(.72);
    transform-origin: left top;
  }
  .scene-grid > .right-rail {
    top: 4px;
    transform: none;
  }
}

/* Television geometry lock. The physical 4K panel scales this 1920x1080
   composition as one bitmap-like surface; every major anchor has fixed logical
   coordinates, so buildings, HUD blocks and route panels cannot drift. */
@media (orientation: landscape) and (min-width: 1450px) {
  .tv-stage > .game-board {
    display: grid;
    grid-template-rows: 104px 950px;
    width: 1920px;
    height: 1080px;
    min-height: 1080px;
    padding: 14px 18px 12px;
  }

  .tv-stage .hud {
    position: relative;
    display: block;
    width: 1884px;
    height: 104px;
  }

  .tv-stage .title-plank,
  .tv-stage .cargo-counter,
  .tv-stage .capacity-counter,
  .tv-stage .level-plank,
  .tv-stage .hud-box.timer,
  .tv-stage .pause-button {
    position: absolute;
    top: 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
  }

  .tv-stage .title-plank { left: 0; width: 382px; height: 102px; }
  .tv-stage .cargo-counter { left: 500px; width: 190px; height: 102px; }
  .tv-stage .capacity-counter { left: 808px; width: 150px; height: 102px; }
  .tv-stage .level-plank { left: 1078px; width: 285px; height: 102px; }
  .tv-stage .hud-box.timer { left: 1480px; width: 240px; height: 102px; }
  .tv-stage .pause-button { left: 1838px; top: 28px; width: 46px; height: 46px; }
  .tv-stage .restart-button { display: grid; position: absolute; place-items: center; left: 1840px; top: 59px; width: 44px; height: 44px; min-height: 44px; margin: 0; }

  .tv-stage .scene-grid {
    position: relative;
    width: 1884px;
    height: 950px;
    min-height: 950px;
    margin: 0;
  }

  .tv-stage .scene-grid > .left-rail {
    left: 22px;
    top: 430px;
    bottom: auto;
    width: 344px;
    height: auto;
    transform: none;
  }

  .tv-stage .scene-grid > .right-rail {
    left: 560px;
    right: auto;
    top: 10px;
    width: 780px;
    height: auto;
    transform: none;
  }

  .tv-stage .scene-grid .instruction-panel,
  .tv-stage .scene-grid .warehouse-list {
    width: 100%;
    margin: 0;
  }
  .tv-stage .scene-grid .warehouse-list { height: 86px; }
  .tv-stage .scene-grid .warehouse-list h2 { flex-basis: 96px; font-size: 18px; }
  .tv-stage .scene-grid .warehouse-list .warehouse-empty { font-size: 14px; }
  .tv-stage .scene-grid .warehouse-list .warehouse-card span,
  .tv-stage .scene-grid .warehouse-list .field-exit-card span { font-size: 16px; }
  .tv-stage .scene-grid .warehouse-list .warehouse-card strong { font-size: 14px; }
  .tv-stage .scene-grid .warehouse-list .warehouse-card small,
  .tv-stage .scene-grid .warehouse-list .field-exit-card small { font-size: 12px; }
}

/* Asset-led onboarding. The tutorial uses the same production art as the
   playable world instead of illustrative placeholders. */
.intro-overlay {
  background:
    linear-gradient(rgb(4 26 27 / .72), rgb(4 26 27 / .82)),
    url('./assets/forest-surround-v2.webp') center / cover;
}

.intro-panel {
  width: min(760px, calc(100vw - 32px));
  min-height: 590px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 30px 22px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgb(10 42 48 / .96), rgb(12 78 69 / .95));
}

.intro-screen { min-height: 430px; }
.intro-brand-logo { width: min(390px, 72%); max-height: 116px; }

.intro-training-art {
  display: block;
  width: min(650px, 100%);
  height: auto;
  margin: 6px auto 10px;
  border: 2px solid rgb(126 198 62 / .82);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgb(0 0 0 / .24);
}

.intro-cargo-key {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(640px, 100%);
  margin: 6px auto 12px;
  text-align: left;
}
.intro-cargo-key > div { min-width: 0; padding-top: 6px; border-top: 3px solid #efd166; }
.intro-cargo-key > div:nth-child(2) { border-color: #65c9fa; }
.intro-cargo-key > div:nth-child(3) { border-color: #97cf55; }
.intro-cargo-key strong, .intro-cargo-key small { display: block; overflow-wrap: break-word; }
.intro-cargo-key strong { font-size: 17px; color: #fff; }
.intro-cargo-key small { font-size: 14px; color: #d4ece0; }

.game-guides {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 8px;
  height: 112px;
  margin: 0 0 8px;
  pointer-events: none;
}
.game-guides img {
  display: block;
  width: 88px;
  height: 112px;
  object-fit: cover;
  transform: translateY(0);
  animation: guide-bob 3.6s ease-in-out infinite;
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / .22));
}
.game-guides img + img { animation-delay: -1.8s; }
@keyframes guide-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.game-board:has(#timer-note[data-paused="true"]) .game-guides img,
.scene-grid[inert] .game-guides img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .game-guides img { animation: none; }
}

.intro-route-visual,
.intro-field-demo {
  position: relative;
  overflow: hidden;
  border: 2px solid rgb(126 198 62 / .82);
  border-radius: 8px;
  background:
    linear-gradient(rgb(222 188 112 / .12), rgb(70 104 44 / .16)),
    url('./assets/field-ground-v5.webp') center / cover;
  box-shadow: inset 0 0 28px rgb(11 42 31 / .26), 0 12px 24px rgb(0 0 0 / .24);
}

.intro-route-visual {
  width: min(650px, 100%);
  min-height: 190px;
  margin: 6px auto 10px;
  padding: 12px 18px;
  justify-content: space-around;
  gap: 10px;
}

.intro-route-visual .intro-tractor { width: 176px; height: 158px; }
.intro-route-visual .intro-bale { width: 94px; height: 94px; }
.intro-route-visual .intro-warehouse { width: 190px; height: 158px; object-fit: contain; }

.intro-route-arrow {
  position: relative;
  width: 50px;
  height: 5px;
  flex: 0 0 50px;
  border-radius: 3px;
  background: #87d23f;
  box-shadow: 0 0 10px rgb(135 210 63 / .72);
}

.intro-route-arrow::after {
  position: absolute;
  top: 50%;
  right: -2px;
  width: 16px;
  height: 16px;
  border-top: 5px solid #87d23f;
  border-right: 5px solid #87d23f;
  content: '';
  transform: translateY(-50%) rotate(45deg);
}

.intro-speaker {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: min(640px, 100%);
  margin: 4px auto 10px;
  text-align: left;
}

.intro-speaker-portrait {
  width: 82px;
  height: 112px;
  object-fit: cover;
  filter: drop-shadow(0 8px 6px rgb(0 0 0 / .32));
}

.intro-speech {
  position: relative;
  min-width: 0;
  padding: 10px 14px 11px;
  border: 1px solid rgb(74 172 228 / .8);
  border-radius: 8px;
  background: rgb(4 35 39 / .82);
  box-shadow: 0 8px 18px rgb(0 0 0 / .18);
}

.intro-speech::before {
  position: absolute;
  top: 50%;
  left: -9px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 9px solid rgb(74 172 228 / .8);
  border-bottom: 8px solid transparent;
  content: '';
  transform: translateY(-50%);
}

.intro-speaker-name {
  display: block;
  margin-bottom: 2px;
  color: #87d23f;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.intro-speaker .intro-kicker {
  display: block;
  margin: 0 0 2px;
  font-size: 10px;
  text-align: left;
}

.intro-speaker h2 {
  max-width: none;
  margin: 0 0 4px;
  font-size: 27px;
  text-align: left;
}

.intro-speaker p {
  max-width: none;
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  text-align: left;
}

.intro-speaker-duo {
  grid-template-columns: 112px minmax(0, 1fr);
  margin-top: 6px;
  margin-bottom: 8px;
}

.intro-speaker-portraits {
  display: flex;
  align-items: end;
  justify-content: center;
  width: 112px;
}

.intro-speaker-portraits img {
  width: 68px;
  height: 94px;
  object-fit: cover;
  filter: drop-shadow(0 8px 6px rgb(0 0 0 / .32));
}

.intro-speaker-portraits img + img { margin-left: -20px; }

.intro-cargo-list { width: min(610px, 100%); }
.intro-cargo-list > div {
  grid-template-columns: 64px 1fr auto;
  min-height: 76px;
  background: rgb(4 35 39 / .7);
}
.intro-cargo-dot { width: 58px; height: 58px; border-radius: 6px; background: transparent; }
.intro-cargo-list strong { font-size: 17px; }
.intro-cargo-list small { font-size: 14px; }

.intro-field-demo {
  width: min(600px, 100%);
  height: 190px;
  margin: 4px auto 12px;
}

.intro-field-demo img {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 8px 6px rgb(0 0 0 / .36));
}
.intro-demo-tractor { left: 8%; bottom: 2px; width: 190px; height: 180px; }
.intro-demo-growing { left: 46%; bottom: 32px; width: 105px; height: 105px; }
.intro-demo-ready { right: 8%; bottom: 28px; width: 112px; height: 112px; }

@media (max-width: 700px) {
  .intro-panel { min-height: 0; max-height: calc(100dvh - 20px); padding: 16px 14px 12px; }
  .intro-screen { min-height: 0; }
  .intro-route-visual { min-height: 130px; gap: 5px; padding: 6px; }
  .intro-route-visual .intro-tractor { width: 92px; height: 104px; }
  .intro-route-visual .intro-bale { width: 50px; height: 54px; }
  .intro-route-visual .intro-warehouse { width: 104px; height: 100px; }
  .intro-route-arrow { width: 18px; flex-basis: 18px; }
  .intro-route-arrow::after { width: 12px; height: 12px; border-width: 4px 4px 0 0; }
  .intro-field-demo { height: 138px; }
  .intro-demo-tractor { width: 126px; height: 126px; }
  .intro-demo-growing { width: 76px; height: 76px; }
  .intro-demo-ready { width: 78px; height: 78px; }
  .intro-cargo-list > div { grid-template-columns: 48px 1fr; min-height: 58px; }
  .intro-cargo-dot { width: 44px; height: 44px; }
  .intro-speaker { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; margin-bottom: 6px; }
  .intro-speaker-portrait { width: 56px; height: 76px; }
  .intro-speaker-duo { grid-template-columns: 76px minmax(0, 1fr); }
  .intro-speaker-portraits { width: 76px; }
  .intro-speaker-portraits img { width: 48px; height: 68px; }
  .intro-speaker-portraits img + img { margin-left: -17px; }
  .intro-speech { padding: 7px 9px; }
  .intro-speaker h2 { margin-bottom: 2px; font-size: 18px; }
  .intro-speaker p { font-size: 16px; }
  .intro-speaker-name { font-size: 10px; }
}

/* Driving controls: separated targets prevent accidental neighbouring presses. */
.scene-grid .dpad {
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(2, 44px);
  column-gap: 11px;
  row-gap: 8px;
}

.scene-grid .dpad button {
  min-width: 44px;
  min-height: 44px;
  touch-action: none;
  user-select: none;
}

.scene-grid .dpad button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #07252e;
}

.intro-actions button { min-height: 44px; }
.intro-actions button:focus-visible,
.result-restart:focus-visible,
.reset-actions button:focus-visible { outline: 3px solid #dfffad; outline-offset: 4px; }
.scene-grid .diagnostic-button { min-height: 44px; }
.reset-overlay {
  position: fixed;
  z-index: 45;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(3 25 28 / .8);
}
.reset-overlay[hidden] { display: none; }
.reset-panel {
  width: min(430px, 100%);
  padding: 24px;
  border: 2px solid #65b3d6;
  border-radius: 8px;
  background: #123c3e;
  color: #fff;
}
.reset-panel h2 { margin: 0 0 12px; font-size: 24px; }
.reset-panel p { margin: 0 0 24px; font-size: 16px; }
.reset-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.reset-actions button {
  flex: 1 1 150px;
  min-height: 48px;
  border: 1px solid #75b6af;
  border-radius: 6px;
  padding: 8px 12px;
  background: #245b59;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
#reset-cancel { background: #5eb420; color: #102820; }

/* Compensate the compact rail's scale in physical pointer targets. */
@media (orientation: landscape) and (min-width: 981px) and (max-width: 1449px) and (max-height: 849px) {
  .scene-grid .dpad { grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(2, 62px); }
  .scene-grid .dpad button { min-width: 62px; min-height: 62px; }
  .scene-grid .diagnostic-button { min-height: 62px; }
}
@media (orientation: landscape) and (min-width: 1450px) {
  .tv-stage .scene-grid > .left-rail { top: 410px; }
}

/* Keep the field and driving controls together; secondary details follow. */
@media (max-width: 980px), (orientation: portrait) {
  .scene-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'world' 'right' 'left';
    grid-template-rows: auto auto auto;
    height: auto;
    gap: 8px;
    padding-top: 0;
  }
  .world-3d-stage {
    position: relative;
    grid-area: world;
    inset: auto;
    width: 100%;
    height: min(62vw, 420px);
  }
  .world-3d-stage:not(.world-3d-ready) { display: none; }
  .scene-grid > .scene-canvas { grid-area: world; }
  .scene-canvas > .field-wrap { grid-area: world; }
  .scene-grid > .left-rail,
  .scene-grid > .right-rail {
    position: relative;
    display: block;
    inset: auto;
    width: 100%;
    height: auto;
    padding: 0;
    transform: none;
  }
  .scene-grid .instruction-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 166px;
    grid-template-areas: 'title pad' 'status pad' 'priority pad' 'route route' 'loadout loadout' 'mission mission' 'quality quality' 'diagnostic diagnostic' 'diagnostic-status diagnostic-status';
    gap: 6px 10px;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 10px;
    overflow: visible;
    background: #123c3e;
  }
  .scene-grid .instruction-panel h1 { grid-area: title; margin: 0; font-size: 18px; text-align: left; }
  .scene-grid .instruction-panel > p { grid-area: status; margin: 0; min-height: 0; font-size: 12px; text-align: left; }
  .scene-grid .priority-panel { grid-area: priority; margin: 0; padding: 6px; }
  .scene-grid .priority-panel span { font-size: 9px; }
  .scene-grid .priority-panel strong { font-size: 12px; }
  .scene-grid .dpad { grid-area: pad; align-self: center; justify-self: center; margin: 0; }
  .scene-grid .tractor-loadout { grid-area: loadout; min-height: 0; margin: 0; padding: 8px; }
  .scene-grid .tractor-loadout p { min-height: 0; margin: 4px 0 0; }
  .scene-grid .mission-progress { grid-area: mission; margin: 0; padding: 8px; }
  .scene-grid .diagnostic-button { grid-area: diagnostic; display: block; margin: 0; }
  .scene-grid .diagnostic-status { grid-area: diagnostic-status; }
  .scene-grid .field-legend,
  .scene-grid .control-caption,
  .scene-grid .priority-queue { display: none; }
  .scene-grid .warehouse-list {
    grid-area: route;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 8px;
    border: 1px solid #75b6af;
    border-radius: 8px;
    background: #123c3e;
  }
  .scene-grid .warehouse-list h2 { display: none; }
  .scene-grid .warehouse-list .warehouse-empty,
  .scene-grid .warehouse-list .warehouse-card,
  .scene-grid .warehouse-list .field-exit-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-left: 2px solid #75b6af;
    border-radius: 0;
    background: none;
    font-size: 12px;
    line-height: 1.25;
  }
  .scene-grid .warehouse-list .warehouse-card span,
  .scene-grid .warehouse-list .warehouse-card strong,
  .scene-grid .warehouse-list .field-exit-card span { font-size: 13px; }
  .scene-grid .warehouse-list .warehouse-card small,
  .scene-grid .warehouse-list .field-exit-card small { font-size: 11px; }
}

@media (min-width: 981px) and (max-width: 1449px) {
  .hud { grid-template-columns: minmax(170px, 1.35fr) minmax(90px, .8fr) minmax(90px, .8fr) minmax(120px, 1fr) minmax(130px, 1fr) 92px 44px 44px; }
  .title-plank { grid-column: 1; }
  .cargo-counter { grid-column: 2; }
  .hud-box.capacity-counter { grid-column: 3; }
  .level-plank { grid-column: 4; }
  .hud-box.timer { grid-column: 5; }
  .volume-control { grid-column: 6; grid-row: 1; width: 92px; }
  .pause-button { grid-column: 7; grid-row: 1; }
  .restart-button { grid-column: 8; grid-row: 1; }
}

@media (max-width: 560px) {
  .volume-control {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    height: 38px;
    gap: 12px;
  }
  .volume-control span { min-width: 0; }
}

/* The customer mark is the visual center; the four game counters flank it in
   the requested reading order. The language control stays available over
   onboarding and result dialogs. */
.language-toggle {
  position: absolute;
  z-index: 60;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 44px;
  padding: 0;
  border: 2px solid #65b3d6;
  border-radius: 8px;
  background: #0c3b45;
  color: #efffe9;
  box-shadow: 0 6px 14px rgb(0 0 0 / .28), inset 0 1px 0 rgb(255 255 255 / .12);
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
}
.language-toggle:hover { background: #15545d; }
.language-toggle:focus-visible { outline: 3px solid #dfffad; outline-offset: 4px; }
.brand-art { object-fit: contain; }

/* A physical gamepad replaces the on-screen directional pad. */
.gamepad-connected .instruction-panel .dpad { display: none !important; }

.quality-control {
  grid-area: quality;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-top: 4px;
  color: #efffe9;
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.quality-control select {
  width: 180px;
  max-width: 70%;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid #65b3d6;
  border-radius: 4px;
  background: #0c3b45;
  color: #efffe9;
  font: inherit;
  cursor: pointer;
  color-scheme: dark;
}
.quality-control select:hover { background: #15545d; }
.quality-control select:focus-visible { outline: 3px solid #dfffad; outline-offset: 2px; }
.quality-control select:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 980px), (orientation: portrait) {
  .gamepad-connected .scene-grid .instruction-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'title' 'status' 'priority' 'loadout' 'mission' 'quality' 'diagnostic' 'diagnostic-status';
  }
}

/* Driving controls stay on the office forecourt. */
@media (orientation: landscape) and (min-width: 981px) {
  .tv-stage .scene-grid > .left-rail { top: 35%; }
  .tv-stage .scene-grid .instruction-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px;
    grid-template-areas: 'title title' 'status status' 'priority priority' 'loadout loadout' 'mission mission' 'control pad' 'diagnostic pad' 'quality quality' 'diagnostic-status diagnostic-status';
    gap: 5px 8px;
    padding: 8px;
    height: auto;
    min-height: 0;
    max-height: none;
    background: #123c3e;
  }
  .tv-stage .instruction-panel h1 { grid-area: title; margin: 0; font-size: 20px; }
  .tv-stage .instruction-panel > #status { grid-area: status; min-height: 0; margin: 0; font-size: 12px; }
  .tv-stage .instruction-panel .priority-panel { grid-area: priority; margin: 0; padding: 5px 6px; }
  .tv-stage .instruction-panel .tractor-loadout { grid-area: loadout; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 5px 6px; }
  .tv-stage .instruction-panel .loadout-heading,
  .tv-stage .instruction-panel .tractor-loadout > p { grid-column: 1 / -1; }
  .tv-stage .instruction-panel .loadout-item { gap: 3px; }
  .tv-stage .instruction-panel .loadout-destination { display: none; }
  .tv-stage .instruction-panel .tractor-loadout > p { min-height: 0; margin: 0; }
  .tv-stage .instruction-panel .mission-progress { grid-area: mission; margin: 0; padding: 5px 6px; }
  .tv-stage .instruction-panel .mission-items { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tv-stage .instruction-panel .mission-item { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2px; padding: 3px 1px; }
  .tv-stage .instruction-panel .mission-item b { grid-row: auto; }
  .tv-stage .instruction-panel .mission-item span,
  .tv-stage .instruction-panel .mission-item small { max-width: 100%; }
  .tv-stage .instruction-panel .control-caption { grid-area: control; align-self: end; background: none; border: 0; }
  .tv-stage .instruction-panel .dpad { grid-area: pad; align-self: center; margin: 0; }
  .tv-stage .instruction-panel .diagnostic-button { grid-area: diagnostic; align-self: start; margin: 0; }
  .tv-stage .instruction-panel .diagnostic-status { grid-area: diagnostic-status; }
  .tv-stage .instruction-panel .diagnostic-status:empty { display: none; }
  .tv-stage .instruction-panel .field-legend { display: none; }
  .gamepad-connected .tv-stage .scene-grid .instruction-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'title' 'status' 'priority' 'loadout' 'mission' 'control' 'diagnostic' 'quality' 'diagnostic-status';
  }
  .tv-stage .scene-grid .instruction-panel .warehouse-list {
    grid-area: route;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 6px 0;
    border: 0;
    border-block: 1px solid #61958f;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  .tv-stage .scene-grid .instruction-panel .warehouse-list h2 {
    flex: 0 0 100%;
    margin: 0;
    font-size: 16px;
  }
  .tv-stage .scene-grid .instruction-panel .warehouse-list .warehouse-empty,
  .tv-stage .scene-grid .instruction-panel .warehouse-list .warehouse-card,
  .tv-stage .scene-grid .instruction-panel .warehouse-list .field-exit-card {
    flex: 1 1 0;
    min-height: 0;
    margin: 0;
    padding: 2px 5px;
    text-align: left;
    font-size: 12px;
  }
  .tv-stage .scene-grid .instruction-panel .warehouse-list .warehouse-card span,
  .tv-stage .scene-grid .instruction-panel .warehouse-list .field-exit-card span { font-size: 13px; }
  .tv-stage .scene-grid .instruction-panel .warehouse-list .warehouse-card strong,
  .tv-stage .scene-grid .instruction-panel .warehouse-list .field-exit-card small { font-size: 11px; }
  .tv-stage .scene-grid .instruction-panel .warehouse-list .field-exit-card {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }
}

@media (orientation: landscape) and (min-width: 981px) and (max-width: 1449px) and (max-height: 849px) {
  .tv-stage .scene-grid > .left-rail { top: 25%; }
  .game-guides { height: 80px; margin-bottom: 4px; }
  .game-guides img { width: 64px; height: 80px; }
  .tv-stage .scene-grid .instruction-panel { grid-template-columns: minmax(0, 1fr) 194px; }
}

@media (orientation: landscape) and (min-width: 1450px) {
  .tv-stage .level-plank { left: 0; width: 285px; height: 102px; }
  .tv-stage .hud-box.timer { left: 390px; width: 240px; height: 102px; }
  .tv-stage .title-plank { left: 751px; width: 382px; height: 102px; }
  .tv-stage .capacity-counter { left: 1236px; width: 180px; height: 102px; }
  .tv-stage .cargo-counter { left: 1432px; width: 190px; height: 102px; }
  .tv-stage .volume-control { left: 1638px; top: 21px; width: 106px; height: 60px; }
  .tv-stage .pause-button { left: 1838px; top: 28px; width: 46px; height: 46px; }
  .tv-stage .language-toggle { left: 1776px; right: auto; top: 42px; width: 48px; height: 46px; }
  .tv-stage .pause-button { left: 1840px; top: 8px; width: 44px; height: 44px; min-height: 44px; }
}

@media (min-width: 981px) and (max-width: 1449px) {
  .hud { grid-template-columns: minmax(120px, 1fr) minmax(130px, 1fr) minmax(210px, 1.4fr) minmax(100px, .8fr) minmax(110px, .85fr) 92px 44px 44px; padding-right: 54px; }
  .level-plank { grid-column: 1; }
  .hud-box.timer { grid-column: 2; }
  .title-plank { grid-column: 3; }
  .hud-box.capacity-counter { grid-column: 4; }
  .cargo-counter { grid-column: 5; }
  .volume-control { grid-column: 6; grid-row: 1; width: 92px; }
  .pause-button { grid-column: 7; grid-row: 1; }
  .restart-button { grid-column: 8; grid-row: 1; }
}

@media (max-width: 980px), (orientation: portrait) {
  .hud {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    padding-right: 54px;
  }
  .title-plank { grid-column: 1 / 4; grid-row: 1; }
  .pause-button { grid-column: 4; grid-row: 1; }
  .restart-button { grid-column: 5; grid-row: 1; }
  .level-plank { display: block; grid-column: 1 / 3; grid-row: 2; }
  .hud-box.timer { grid-column: 3 / 5; grid-row: 2; }
  .hud-box.capacity-counter { grid-column: 5 / 7; grid-row: 2; }
  .cargo-counter { grid-column: 1 / 4; grid-row: 3; }
  .volume-control { grid-column: 4 / 7; grid-row: 3; width: 100%; height: 100%; }
  .level-plank { padding-inline: 4px; font-size: 14px; white-space: nowrap; }
  .level-plank span { font-size: inherit; white-space: normal; }
}

/* A framed information stand; its feet stay inside the projected forecourt. */
.tv-stage .scene-grid .forecourt-guide {
  font-family: var(--ui-font);
  font-style: normal;
  letter-spacing: 0;
  position: absolute;
  z-index: 12;
  left: var(--forecourt-left);
  top: var(--forecourt-top);
  right: auto;
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: var(--forecourt-width);
  height: calc(var(--forecourt-height) - 14px);
  min-height: 0;
  margin: 0;
  padding: 5px 8px;
  border: 3px solid #637c80;
  border-radius: 4px;
  background: #ffffff;
  color: #173c3c;
  box-shadow: 4px 5px 8px rgb(13 33 29 / .24);
  backdrop-filter: none;
  pointer-events: none;
  text-align: left;
}
.tv-stage .scene-grid .forecourt-guide::before,
.tv-stage .scene-grid .forecourt-guide::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 9px;
  height: 14px;
  border: 1px solid #405d61;
  border-bottom: 3px solid #405d61;
  background: #84989a;
  box-shadow: 4px 3px 3px rgb(13 33 29 / .24);
}
.tv-stage .scene-grid .forecourt-guide::before { left: 18%; }
.tv-stage .scene-grid .forecourt-guide::after { right: 18%; }
.tv-stage .scene-grid .forecourt-guide h2 {
  display: block;
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #173c3c;
  font-size: 18px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: 0;
  text-shadow: none;
}
.tv-stage .scene-grid .forecourt-guide .warehouse-empty,
.tv-stage .scene-grid .forecourt-guide .warehouse-card,
.tv-stage .scene-grid .forecourt-guide .field-exit-card {
  flex: 0 0 auto;
  display: block;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #173c3c;
  box-shadow: none;
  text-shadow: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
}
.tv-stage .scene-grid .forecourt-guide .warehouse-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  padding-left: 6px;
  border-left: 4px solid #a27813;
}
.tv-stage .scene-grid .forecourt-guide .warehouse-card-blue { border-color: #227daa; }
.tv-stage .scene-grid .forecourt-guide .warehouse-card-green { border-color: #497c20; }
.tv-stage .scene-grid .forecourt-guide .warehouse-card span,
.tv-stage .scene-grid .forecourt-guide .field-exit-card span {
  color: #173c3c;
  font-size: 14px;
  font-weight: 900;
  line-height: 16px;
}
.tv-stage .scene-grid .forecourt-guide .warehouse-card strong { display: none; }
.tv-stage .scene-grid .forecourt-guide .warehouse-card small,
.tv-stage .scene-grid .forecourt-guide .field-exit-card small {
  color: #244e4b;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
}
.tv-stage .scene-grid .forecourt-guide .field-exit-card {
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid #8aa59c;
}
.tv-stage .scene-grid .forecourt-guide .field-exit-card span,
.tv-stage .scene-grid .forecourt-guide .field-exit-card small { display: block; }
.tv-stage .scene-grid .forecourt-guide .field-exit-ready { border-color: #497c20; }
@media (min-width: 981px) and (max-width: 1449px) and (orientation: landscape) {
  .tv-stage .scene-grid .forecourt-guide {
    left: var(--forecourt-side-left);
    top: auto;
    bottom: var(--forecourt-bottom);
    width: calc(100% - var(--forecourt-side-left) - 4px);
    height: auto;
    margin-bottom: 14px;
  }
  .tv-stage .scene-grid .forecourt-guide .warehouse-card small { display: none; }
}
@media (max-width: 980px), (orientation: portrait) {
  .tv-stage .scene-grid .forecourt-guide {
    position: relative;
    grid-area: right;
    inset: auto;
    width: 100%;
    height: auto;
    margin-bottom: 14px;
    padding: 10px 12px;
    pointer-events: auto;
  }
  .tv-stage .scene-grid .forecourt-guide .warehouse-empty { font-size: 16px; line-height: 21px; }
  .tv-stage .scene-grid .forecourt-guide .field-exit-card { margin-top: 4px; }
}