/* Lawn Crew: Landscape Contractor -- painted gouache site plan */

:root {
  --turf-deep: #3F6B2E;
  --turf: #4F7D35;
  --mown: #78AC47;
  --stripe: #B4D07A;
  --paper: #EFE6D2;
  --paper-2: #E6D9BC;
  --manila: #DCC391;
  --manila-dark: #C9AE7A;
  --asphalt: #8C8A7E;
  --soil: #7A4E2C;
  --amber: #F0A72C;
  --ink: #2B3327;
  --ink-soft: #46503E;
  --stamp: #A6402F;
  --stamp-dark: #75281C;
  --shadow: rgba(43, 51, 39, .32);
  --display: 'Alfa Slab One', Georgia, serif;
  --text: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--turf-deep);
  color: var(--ink);
  font-family: var(--text);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

#game { position: fixed; inset: 0; z-index: 0; }
#game canvas { display: block; width: 100%; height: 100%; touch-action: none; }

#stick {
  position: fixed; left: 0; top: 0; width: 92px; height: 92px;
  z-index: 12; pointer-events: none; display: none;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(43, 51, 39, .5);
  border-radius: 50%;
  background: rgba(239, 230, 210, .16);
  box-shadow: 0 3px 0 rgba(43, 51, 39, .18);
}
#stick i {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px;
  border-radius: 50%; background: var(--amber); border: 3px solid rgba(43, 51, 39, .8);
  transform: translate(-50%, -50%);
}
#stick.show { display: block; }

#grain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background-image: url(../assets/tex/paper_grain.png);
  background-size: 256px 256px;
  opacity: .9;
  mix-blend-mode: multiply;
}

button { font-family: var(--text); cursor: pointer; }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }

/* ------------------------------------------------------------- paper kit */
.paper {
  background-color: var(--paper-2);
  background-image: url(../assets/tex/paper_grain.png);
  background-blend-mode: multiply;
  border: 1.6px solid #8a6b42;
  box-shadow: 6px 8px 0 var(--shadow);
}

.stamp-btn {
  font-family: var(--text);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .075em;
  font-size: 15px;
  line-height: 1;
  color: #F7EBD8;
  background-color: var(--stamp);
  background-image: url(../assets/tex/paper_grain.png);
  background-blend-mode: multiply;
  border: 2px solid var(--stamp-dark);
  padding: 12px 20px;
  box-shadow: 4px 5px 0 rgba(43, 51, 39, .38);
  transform: rotate(-1.1deg);
  transition: transform .08s linear, box-shadow .08s linear, background-color .15s;
}
.stamp-btn:hover { transform: rotate(-1.1deg) translate(-1px, -1px); box-shadow: 5px 6px 0 rgba(43, 51, 39, .38); }
.stamp-btn:active { transform: rotate(-1.1deg) translate(2px, 2px); box-shadow: 2px 2px 0 rgba(43, 51, 39, .38); }
.stamp-btn.small { font-size: 13px; padding: 9px 12px; letter-spacing: .05em; }
.stamp-btn.big { font-size: clamp(20px, 4.2vw, 30px); padding: 16px 34px; }
.stamp-btn.dark { background-color: #3d4b39; border-color: #232b20; }
.stamp-btn:disabled { background-color: #8a857a; border-color: #6d665c; color: #e8e0cf; cursor: default; transform: rotate(-1.1deg); }

.display { font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }

/* ------------------------------------------------------------------ HUD */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#hud .hidden { display: none; }

#ticketHud {
  position: absolute; left: 12px; top: 12px;
  width: clamp(196px, 17vw, 252px);
  aspect-ratio: 640 / 1024;
  background: url(../assets/img/job_ticket.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(5px 7px 0 rgba(43, 51, 39, .24));
  pointer-events: auto;
  container-type: inline-size;
  cursor: pointer;
}

.ticket-face { position: absolute; inset: 0; color: #3c2e1b; }

.tk-lines {
  position: absolute; left: 41.4%; top: 17.4%; width: 50%; height: 21.2%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.tk-line { height: 25%; display: flex; align-items: flex-end; gap: 4%; padding-bottom: 1.2%; }
.tk-lines .k {
  font-family: var(--text); font-weight: 700; font-size: 3.9cqw;
  letter-spacing: .06em; color: #6c5636; width: 27%; flex: none;
  line-height: 1;
}
.tk-lines .v {
  font-family: var(--text); font-weight: 700; font-size: 4.7cqw; line-height: 1;
  color: #2e2516; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-lines .v.num { font-family: var(--mono); font-weight: 500; font-size: 4.2cqw; letter-spacing: -.01em; }

.tk-rows { position: absolute; left: 5%; top: 44.6%; width: 90%; }
.tk-row {
  height: 6.55cqw; display: grid;
  grid-template-columns: 1fr .62fr 8%;
  align-items: center; column-gap: 3%;
  border-bottom: 1px solid rgba(90, 70, 40, .22);
}
.tk-row .s { font-family: var(--text); font-weight: 800; font-size: 5.1cqw; letter-spacing: .06em; }
.tk-row .v { font-family: var(--mono); font-size: 4.6cqw; text-align: right; color: #50401f; }
.tk-row .chk { width: 100%; aspect-ratio: 1; display: block; position: relative; }
.tk-row .chk.on::before {
  content: ''; position: absolute; left: 12%; top: 50%; width: 46%; height: 3px;
  background: #2f4b22; transform: rotate(-45deg); transform-origin: left center;
}
.tk-row .chk.on::after {
  content: ''; position: absolute; left: 34%; top: 72%; width: 74%; height: 3px;
  background: #2f4b22; transform: rotate(-52deg); transform-origin: left center;
}
.tk-row.payrow .s { color: #6c5636; }
.tk-row.payrow .v { font-weight: 600; color: #2e2516; }

.ticket-tape {
  position: absolute; left: 55.5%; top: 69.8%; width: 41%; height: 25.4%;
  background: rgba(233, 218, 184, .97);
  border: 1px solid rgba(122, 96, 56, .6);
  transform: rotate(-7deg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--text); font-weight: 800; font-size: 4cqw; letter-spacing: .13em;
  color: #7b5f35; text-align: center;
  box-shadow: 2px 2px 0 rgba(90, 70, 40, .18);
}
.ticket-shell.paid .ticket-tape { display: none; }
.ticket-shell.paid { animation: thud .38s cubic-bezier(.2,.8,.35,1) both; }
@keyframes thud {
  0% { transform: scale(1); }
  38% { transform: scale(1.045); }
  100% { transform: scale(1); }
}

#ticketChip { display: none; }

#ledger {
  position: absolute; right: 12px; top: 12px;
  width: clamp(196px, 17vw, 252px);
  background-color: var(--manila);
  background-image: url(../assets/tex/paper_grain.png);
  background-blend-mode: multiply;
  border: 1.6px solid #8a6b42;
  box-shadow: 5px 7px 0 rgba(43, 51, 39, .28);
  padding: 7px 11px 9px;
}
.ledger-title {
  font-family: var(--text); font-weight: 800; font-size: 10px; letter-spacing: .22em;
  color: #6b512c; border-bottom: 1.6px solid rgba(110, 85, 48, .65);
  padding-bottom: 3px; margin-bottom: 6px;
}
.ledger-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px;
  align-items: baseline;
}
.led-item { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.ledger-grid span { font-family: var(--text); font-weight: 700; font-size: 11px; letter-spacing: .1em; color: #6b5738; }
.ledger-grid b { font-family: var(--mono); font-weight: 600; font-size: 14px; color: #2b3327; text-align: right; }

.clock {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  background: #2F4F2D url(../assets/tex/green_board.jpg) center / 180px;
  border: 2px solid #22351f;
  box-shadow: 4px 5px 0 rgba(43, 51, 39, .28), inset 0 0 0 1px rgba(216,166,58,.55);
  padding: 5px 18px 6px;
  text-align: center;
  color: #EFE6D2;
}
.clock span { display: block; font-family: var(--text); font-weight: 700; font-size: 9px; letter-spacing: .2em; color: #B9C9A3; }
.clock b { font-family: var(--mono); font-weight: 600; font-size: 23px; line-height: 1.05; letter-spacing: .02em; }
.clock.low b { color: #F2B09C; }

.tool-tag {
  position: absolute; left: 50%; bottom: 89px; transform: translateX(-50%) rotate(-.7deg);
  background: var(--amber); color: #2b2414;
  border: 1.7px solid #6d4b16;
  padding: 3px 12px 4px;
  font-family: var(--text); font-weight: 800; font-size: 12px; letter-spacing: .14em;
  box-shadow: 3px 3px 0 rgba(43, 51, 39, .3);
  white-space: nowrap;
}

/* -------------------------------------------------------------- toolbar */
#toolbar {
  position: fixed; left: 50%; bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 30;
  display: flex; align-items: flex-end; gap: 3px;
  padding: 7px 9px 6px;
  background: #2F4F2D url(../assets/tex/green_board.jpg) center / 200px;
  border: 2px solid #1f301d;
  box-shadow: 5px 7px 0 rgba(43, 51, 39, .35), inset 0 0 0 2px rgba(216, 166, 58, .35);
  clip-path: polygon(0.8% 3%, 99% 0, 100% 90%, 97.6% 100%, 2% 99%, 0 86%);
}
.tool {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: clamp(38px, 4.4vw, 58px);
  padding: 3px 2px 3px;
  border: 2px solid transparent;
  background: none;
  color: var(--paper);
  pointer-events: auto;
}
.tool img { width: clamp(30px, 3.6vw, 43px); height: clamp(30px, 3.6vw, 43px); object-fit: contain; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.22)); }
.tool .tlabel { font-family: var(--text); font-weight: 700; font-size: clamp(7px, .78vw, 9px); letter-spacing: .08em; color: #d8e0c6; }
.tool.active {
  transform: translateY(-7px);
  background: var(--amber);
  border-color: #6d4b16;
  box-shadow: 0 4px 0 rgba(0,0,0,.26), 0 0 0 1px rgba(255, 226, 160, .5);
}
.tool.active .tlabel { color: #2b2414; }
.tool.active img { filter: drop-shadow(1px 2px 0 rgba(0,0,0,.28)); }
.tool .keyhint { position: absolute; right: 2px; top: 1px; font-family: var(--mono); font-size: 8px; color: rgba(238,230,210,.55); }
.tool.active .keyhint { color: #4b3510; }

.svg-icon { width: clamp(30px, 3.6vw, 43px); height: clamp(30px, 3.6vw, 43px); display: block; }
.svg-icon * { stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }

#finishBtn {
  position: fixed; right: 16px; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 86px);
  z-index: 31;
  font-family: var(--text); font-weight: 800; font-size: 15px; letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--paper-2);
  color: #3c3222;
  border: 2px solid #6f5836;
  padding: 10px 16px;
  box-shadow: 4px 5px 0 rgba(43, 51, 39, .32);
  transform: rotate(-1deg);
}
#finishBtn.ready {
  background: var(--amber); color: #2b2414; border-color: #6d4b16;
  box-shadow: 0 0 0 3px rgba(240, 167, 44, .25), 4px 5px 0 rgba(43, 51, 39, .32);
}

.toast {
  position: fixed; left: 50%; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 150px);
  transform: translateX(-50%) translateY(8px);
  z-index: 40;
  max-width: min(88vw, 520px);
  background: var(--paper);
  border: 1.6px solid #8a6b42;
  box-shadow: 4px 5px 0 rgba(43, 51, 39, .3);
  padding: 8px 16px;
  font-family: var(--text); font-weight: 700; font-size: 14px; letter-spacing: .05em;
  color: #3a2e1c; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --------------------------------------------------------------- screens */
.screen {
  position: fixed; inset: 0; z-index: 40;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(14px, 2.6vw, 34px);
}
.screen.desk, .title-screen {
  background-color: #4b3423;
  background-image: url(../assets/tex/desk_wood.jpg);
  background-size: 480px 512px;
}
.screen.overlay {
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 40, 29, .72);
  padding: 16px;
}

.sheet { max-width: 1220px; margin: 0 auto; }
.sheet-head, .screen-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
  margin-bottom: clamp(14px, 2.4vw, 26px);
}
.sheet-head h1, .screen-head h1, .screen-head h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  color: #F1E5C8; font-size: clamp(30px, 4.6vw, 56px); line-height: .95;
  text-shadow: 3px 4px 0 rgba(0, 0, 0, .34);
  letter-spacing: .01em;
}
.screen-head h2 { font-family: var(--display); font-size: clamp(26px, 3.8vw, 46px); }
.head-sub, .screen-head .sub {
  margin-top: 7px;
  font-family: var(--text); font-weight: 700; font-size: 12px; letter-spacing: .18em;
  color: #E4D3AF;
}
.screen-head .sub.light { color: #E7E0CC; }
.head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.head-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.mini-stats {
  display: grid; grid-template-columns: auto auto; gap: 1px 12px;
  background: var(--manila); background-image: url(../assets/tex/paper_grain.png); background-blend-mode: multiply;
  border: 1.5px solid #8a6b42; padding: 7px 11px;
  box-shadow: 4px 5px 0 rgba(43, 51, 39, .25);
}
.mini-stats span { font-family: var(--text); font-weight: 700; font-size: 11px; letter-spacing: .1em; color: #6b5738; }
.mini-stats b { font-family: var(--mono); font-size: 13px; color: #2b3327; text-align: right; }

.board-note {
  margin-top: 18px; font-family: var(--text); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; color: #ddc9a5;
}

/* ----------------------------------------------------------- job board */
.board-row {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 42px);
  justify-content: center; align-items: flex-start;
  padding: 8px 0 20px;
}
.board-ticket {
  position: relative;
  width: clamp(238px, 25vw, 330px);
  aspect-ratio: 640 / 1024;
  background: url(../assets/img/job_ticket.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(6px 8px 0 rgba(20, 16, 10, .38));
  container-type: inline-size;
}
.board-ticket:nth-child(1) { transform: rotate(-1.5deg); }
.board-ticket:nth-child(2) { transform: rotate(.8deg) translateY(8px); }
.board-ticket:nth-child(3) { transform: rotate(-.6deg) translateY(2px); }
.board-ticket .ticket-patch {
  position: absolute; left: 49.5%; top: 69.5%; width: 48%; height: 27%;
  background: #E2CBA0;
  border: 1.4px solid rgba(122, 96, 56, .7);
  transform: rotate(-5.5deg);
  box-shadow: 2px 3px 0 rgba(43,51,39,.18);
  display: flex; align-items: center; justify-content: center;
  padding: 6%;
}
.board-ticket .take-btn {
  width: 100%; height: 100%;
  font-size: clamp(12px, 3.2cqw, 18px); padding: 0;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-1deg);
}
.board-ticket .tk-rows .tk-row { height: 4.9cqw; border-bottom-color: rgba(90,70,40,.16); }
.board-ticket .tk-row .s { font-size: 4.5cqw; }
.board-ticket .tk-row .v { font-size: 4.1cqw; }
.board-ticket .tk-row .chk { display: none; }
.board-ticket .board-quote {
  position: absolute; left: 5.2%; top: 37.4%; width: 86%;
  border-top: 1.5px solid rgba(90,70,40,.5);
  padding-top: 3.4%;
  display: flex; justify-content: space-between;
  font-family: var(--text); font-weight: 800; font-size: 5cqw; letter-spacing: .06em; color: #4a3921;
}
.board-ticket .board-quote b { font-family: var(--mono); font-weight: 600; font-size: 6.2cqw; color: #2e2516; }
.board-ticket .tk-rows { top: 46.2%; }
.board-ticket .tk-row.payrow { display: none; }
.board-ticket .ticket-tape { display: none; }

/* ---------------------------------------------------------------- crew */
.crew-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: clamp(14px, 2.2vw, 24px);
  padding-bottom: 26px;
}
.crew-card {
  background-color: var(--paper-2);
  background-image: url(../assets/tex/paper_grain.png); background-blend-mode: multiply;
  border: 1.6px solid #8a6b42; box-shadow: 6px 8px 0 rgba(20,16,10,.3);
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.crew-card .portrait {
  width: 100%; aspect-ratio: 325 / 300; object-fit: cover; object-position: center 22%;
  border: 1.6px solid #6f5836; background: #d9c499;
}
.crew-card .cc-name { font-family: var(--display); font-size: 23px; color: #2f291c; line-height: 1; }
.crew-card .cc-role { font-family: var(--text); font-weight: 800; font-size: 11px; letter-spacing: .16em; color: var(--stamp); }
.crew-card .cc-note { font-family: var(--text); font-size: 14px; line-height: 1.25; color: #4c4130; min-height: 35px; }
.crew-card .cc-stats { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; border-top: 1.4px solid rgba(110,85,48,.45); padding-top: 6px; }
.crew-card .cc-stats span { font-family: var(--text); font-weight: 700; font-size: 11px; letter-spacing: .08em; color: #6b5738; }
.crew-card .cc-stats b { font-family: var(--mono); font-size: 13px; color: #2b3327; text-align: right; }
.crew-card .cc-actions { margin-top: 3px; display: flex; align-items: center; gap: 8px; }
.crew-card.hired { outline: 3px solid rgba(240,167,44,.85); outline-offset: -3px; }
.crew-card.hired .cc-role { color: #3e6b2c; }
.on-payroll { font-family: var(--text); font-weight: 800; font-size: 10px; letter-spacing: .13em; color: #3e6b2c; }

/* ------------------------------------------------------------ equipment */
.yard-screen {
  background-color: #6f6c5f;
  background-image: url(../assets/img/lawn_tiles_06_gravel_path.webp);
  background-size: 340px 348px;
}
.yard-screen::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background: rgba(40, 45, 34, .28);
}
.yard-sheet { position: relative; max-width: 1220px; margin: 0 auto; }
.yard-sheet .stamp-btn { margin-top: 8px; }
.equip-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(14px, 2.2vw, 24px);
  padding: 6px 0 24px;
}
.equip-card {
  background-color: var(--paper-2);
  background-image: url(../assets/tex/paper_grain.png); background-blend-mode: multiply;
  border: 1.6px solid #8a6b42; box-shadow: 6px 8px 0 rgba(20,16,10,.34);
  padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px;
  min-height: 290px;
}
.equip-card .ec-icon { height: 110px; display: flex; align-items: center; justify-content: center; }
.equip-card .ec-icon img { max-width: 100%; max-height: 110px; object-fit: contain; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.2)); }
.equip-card .ec-name { font-family: var(--display); font-size: 21px; color: #2f291c; line-height: 1; }
.equip-card .ec-blurb { font-family: var(--text); font-size: 14px; line-height: 1.22; color: #4c4130; min-height: 52px; }
.equip-card .ec-stat { font-family: var(--mono); font-size: 11px; color: #5d4a2d; border-top: 1.4px solid rgba(110,85,48,.45); padding-top: 5px; }
.equip-card .ec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.equip-card .ec-price { font-family: var(--mono); font-size: 17px; font-weight: 600; color: #2b3327; }
.equip-card.maxed { background-color: #e4dcc6; }
.equip-card .pips { display: flex; gap: 4px; }
.equip-card .pips i { width: 11px; height: 11px; border: 1.5px solid #6f5836; display: block; background: transparent; }
.equip-card .pips i.on { background: var(--turf); }

/* -------------------------------------------------------------- payslip */
.slip-screen {
  background-color: #3b2a1c;
  background-image: url(../assets/tex/desk_wood.jpg);
  background-size: 480px 512px;
  display: flex; align-items: flex-start; justify-content: center;
}
.slip-sheet {
  position: relative;
  width: min(560px, 94vw);
  margin: 2vh auto 4vh;
  background-color: var(--paper);
  background-image: url(../assets/tex/paper_grain.png); background-blend-mode: multiply;
  border: 1.6px solid #8a6b42;
  box-shadow: 9px 12px 0 rgba(20, 16, 10, .42);
  padding: clamp(18px, 3.6vw, 32px);
  color: #2d291c;
}
.slip-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2.4px solid #4c4331; padding-bottom: 8px;
}
.slip-title { font-family: var(--display); font-size: clamp(30px, 6vw, 46px); line-height: 1; letter-spacing: .01em; }
.slip-head .mono { font-size: 15px; color: #6b5738; }
.slip-client { display: flex; flex-direction: column; gap: 1px; margin: 12px 0 4px; }
.slip-client b { font-family: var(--text); font-weight: 800; font-size: 17px; letter-spacing: .05em; }
.slip-client span { font-family: var(--text); font-size: 13px; color: #6b5c42; letter-spacing: .06em; }
.slip-rows { margin-top: 10px; }
.slip-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px dotted rgba(90, 70, 40, .55);
  font-family: var(--text); font-weight: 700; font-size: 15px; letter-spacing: .05em;
}
.slip-row b { font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: 0; }
.slip-row.minor { font-weight: 600; color: #5d523c; font-size: 13px; }
.slip-row.minor b { font-size: 13px; }
.slip-row.neg b { color: #8e3526; }
.slip-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 14px; padding-top: 10px; border-top: 2.4px solid #4c4331;
}
.slip-total span { font-family: var(--display); font-size: 25px; letter-spacing: .04em; }
.slip-total b { font-family: var(--mono); font-size: 30px; font-weight: 600; }
.slip-foot { display: flex; gap: 26px; margin-top: 16px; flex-wrap: wrap; }
.slip-foot div { display: flex; flex-direction: column; gap: 1px; }
.slip-foot span { font-family: var(--text); font-weight: 700; font-size: 10px; letter-spacing: .14em; color: #6b5738; }
.slip-foot b { font-family: var(--mono); font-size: 17px; }
.paid-stamp {
  position: absolute; right: 8%; bottom: 68px;
  width: clamp(110px, 24vw, 150px); height: clamp(110px, 24vw, 150px);
  border: 5px solid rgba(166, 64, 47, .85);
  border-radius: 50%;
  color: rgba(166, 64, 47, .9);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: clamp(26px, 5.4vw, 40px); letter-spacing: .04em;
  transform: rotate(-14deg);
  mix-blend-mode: multiply;
  opacity: .92;
  pointer-events: none;
  animation: stampIn .5s cubic-bezier(.15,.85,.3,1) both;
}
.paid-stamp::before {
  content: ''; position: absolute; inset: 9px; border: 2px solid rgba(166, 64, 47, .6); border-radius: 50%;
}
@keyframes stampIn {
  0% { transform: scale(2.1) rotate(-24deg); opacity: 0; }
  55% { transform: scale(.97) rotate(-14deg); opacity: .95; }
  100% { transform: scale(1) rotate(-14deg); opacity: .92; }
}
#nextDayBtn {
  margin-top: 22px;
  font-family: var(--text); font-weight: 800; font-size: 18px; letter-spacing: .1em; text-transform: uppercase;
  background-color: var(--stamp); background-image: url(../assets/tex/paper_grain.png); background-blend-mode: multiply;
  color: #F7EBD8; border: 2px solid var(--stamp-dark);
  padding: 13px 26px; box-shadow: 4px 5px 0 rgba(43,51,39,.35);
  transform: rotate(-.8deg);
}

/* ---------------------------------------------------------------- title */
.title-screen {
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  padding: 0;
}
.title-screen::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background: rgba(34, 45, 30, .30);
}
.title-stack {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(12px, 2.4vh, 26px);
  padding: 20px;
  width: min(880px, 94vw);
}
.sign {
  width: min(760px, 92vw);
  transform: rotate(-.75deg);
  filter: drop-shadow(9px 12px 0 rgba(20,16,10,.42));
}
.sign-plate {
  position: relative;
  background: #2F4F2D url(../assets/tex/green_board.jpg) center / 210px;
  border: 4px solid #D3A23A;
  box-shadow: inset 0 0 0 3px #26341f, inset 0 0 90px rgba(20,30,18,.55);
  padding: 5.2% 6% 5.6%;
  display: flex; flex-direction: column; align-items: center;
  clip-path: polygon(1.2% 2.4%, 99% 0, 99.4% 96%, 97.8% 99%, 2% 100%, 0 95%);
  overflow: hidden;
}
.sign-plate::after {
  content: ''; position: absolute; inset: 2.6%; border: 1.5px solid rgba(239, 230, 210, .24); pointer-events: none;
}
.sign-line {
  font-family: var(--display); color: #F2E3BE;
  font-size: clamp(42px, 9.5vw, 96px); line-height: .88; letter-spacing: .01em;
  text-shadow: 3px 4px 0 rgba(0,0,0,.36), 0 1px 0 rgba(255,255,255,.15);
  text-align: center;
}
.sign-sub, .sign-sub2 {
  font-family: var(--display); color: #EFDDAF;
  font-size: clamp(18px, 3.6vw, 37px); line-height: 1.05; letter-spacing: .04em;
  text-shadow: 2px 3px 0 rgba(0,0,0,.32);
  text-align: center;
}
.sign-sub2 { color: #E7D29E; font-size: clamp(16px, 3.1vw, 32px); }
.sign-mower {
  position: absolute; right: 2.2%; bottom: 7%; width: 16%; max-width: 150px;
  transform: rotate(3deg);
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,.3));
}
.title-kicker {
  font-family: var(--text); font-weight: 700; font-size: clamp(11px, 1.5vw, 14px);
  letter-spacing: .3em; color: #EFE6D2; text-shadow: 1px 2px 0 rgba(0,0,0,.5);
}
.title-meta {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  color: #EADFC5; text-shadow: 1px 2px 0 rgba(0,0,0,.5);
  text-align: center;
}

/* --------------------------------------------------------------- pause */
.pause-card {
  position: relative;
  width: min(520px, 94vw);
  background-color: var(--paper-2);
  background-image: url(../assets/tex/paper_grain.png); background-blend-mode: multiply;
  border: 1.8px solid #8a6b42;
  box-shadow: 9px 11px 0 rgba(15, 14, 9, .42);
  padding: clamp(18px, 3vw, 30px);
  max-height: 94vh; overflow-y: auto;
}
.pause-card h2 { font-family: var(--display); font-size: 44px; color: #2f291c; line-height: 1; }
.pause-btns { display: flex; flex-direction: column; gap: 9px; margin: 16px 0; align-items: flex-start; }
.pause-btns .stamp-btn { min-width: 210px; }
.sound-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-family: var(--text); font-weight: 700; font-size: 12px; letter-spacing: .16em; color: #5d4a2d; }
.controls { border-top: 1.6px solid rgba(110, 85, 48, .5); padding-top: 12px; }
.controls h3 { font-family: var(--display); font-size: 19px; margin-bottom: 7px; color: #2f291c; }
.controls p { font-family: var(--text); font-size: 14.5px; line-height: 1.35; color: #4b402e; margin-bottom: 5px; }
.controls p b { font-weight: 800; letter-spacing: .04em; }
.controls p.tiny { font-size: 12px; color: #6b5c42; margin-top: 8px; }

/* ----------------------------------------------------------------- map */
.map-card {
  width: min(920px, 96vw);
  background-color: var(--paper);
  background-image: url(../assets/tex/paper_grain.png); background-blend-mode: multiply;
  border: 1.8px solid #8a6b42;
  box-shadow: 9px 11px 0 rgba(15,14,9,.42);
  padding: clamp(12px, 2.2vw, 22px);
  max-height: 94vh; overflow-y: auto;
}
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.map-head h2 { font-family: var(--display); font-size: 30px; color: #2f291c; }
#mapCanvas { display: block; width: 100%; height: auto; border: 1.6px solid #6f5836; background: #3F6B2E; }
.map-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-family: var(--text); font-weight: 700; font-size: 11px; letter-spacing: .1em; color: #5d4a2d; }
.map-legend span { display: flex; align-items: center; gap: 5px; }
.sw { width: 12px; height: 12px; display: block; border: 1.4px solid #5d4a2d; }
.sw.mown { background: var(--stripe); }
.sw.unmown { background: var(--turf-deep); }
.sw.amber { background: var(--amber); }
.sw.soil { background: var(--soil); }

/* --------------------------------------------------------------- modals */
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(27, 35, 24, .74);
  padding: 16px;
  overflow-y: auto;
}
.modal-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 96vh; overflow-y: auto; padding: 4px; }
.modal-ticket {
  position: relative;
  width: min(380px, 84vw);
  aspect-ratio: 640 / 1024;
  background: url(../assets/img/job_ticket.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(7px 9px 0 rgba(15,14,9,.42));
  container-type: inline-size;
}
.confirm-card {
  width: min(430px, 92vw);
  background-color: var(--paper-2);
  background-image: url(../assets/tex/paper_grain.png); background-blend-mode: multiply;
  border: 1.8px solid #8a6b42;
  box-shadow: 8px 10px 0 rgba(15,14,9,.42);
  padding: 22px;
}
.confirm-card h3 { font-family: var(--display); font-size: 26px; color: #2f291c; margin-bottom: 8px; }
.confirm-card p { font-family: var(--text); font-size: 15px; line-height: 1.35; color: #4b402e; margin-bottom: 16px; }
.confirm-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 760px) {
  #ticketHud, #clock { display: none; }
  #ticketChip {
    display: block; position: absolute; left: 8px; top: 8px;
    width: 47%; max-width: 230px;
    background-color: var(--manila);
    background-image: url(../assets/tex/paper_grain.png); background-blend-mode: multiply;
    border: 1.5px solid #8a6b42;
    box-shadow: 4px 5px 0 rgba(43,51,39,.3);
    padding: 6px 8px 7px;
    pointer-events: auto;
    font-family: var(--text);
  }
  .chip-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
  .chip-row b { font-weight: 800; font-size: 12px; letter-spacing: .04em; color: #3c2e1b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chip-row span { font-size: 11px; letter-spacing: .04em; color: #5d4a2d; white-space: nowrap; }
  .chip-row .mono { font-family: var(--mono); font-size: 11px; color: #2b3327; flex: none; }
  #chipProgress { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 68%; }
  #chipClient { max-width: 66%; }
  #ledger { right: 8px; top: 8px; width: 47%; max-width: 230px; padding: 6px 8px 7px; }
  .ledger-title { font-size: 8px; margin-bottom: 4px; }
  .ledger-grid span { font-size: 9.5px; }
  .ledger-grid b { font-size: 11.5px; }
  .ledger-grid { gap: 2px 7px; }
  .tool-tag { bottom: 78px; font-size: 10px; padding: 2px 9px 3px; }
  #finishBtn { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 76px); right: 8px; font-size: 12px; padding: 8px 11px; }
  .toast { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 132px); font-size: 12.5px; padding: 7px 11px; }
  #toolbar { gap: 1px; padding: 5px 5px 4px; width: calc(100% - 12px); justify-content: space-between; clip-path: none; }
  .tool { width: auto; flex: 1 1 0; padding: 2px 0 2px; }
  .tool img, .svg-icon { width: 29px; height: 29px; }
  .tool .tlabel { font-size: 6.5px; letter-spacing: .02em; }
  .tool .keyhint { display: none; }
  .tool.active { transform: translateY(-5px); }
  .board-row { gap: 26px; }
  .board-ticket { width: min(78vw, 340px); }
  .board-ticket:nth-child(2) { transform: rotate(.6deg); }
  .crew-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
  .crew-card .cc-name { font-size: 19px; }
  .crew-card .cc-note { font-size: 12.5px; min-height: 44px; }
  .equip-grid { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; }
  .equip-card { min-height: 250px; padding: 8px 9px 10px; }
  .equip-card .ec-icon { height: 76px; }
  .equip-card .ec-icon img { max-height: 76px; }
  .equip-card .ec-name { font-size: 17px; }
  .equip-card .ec-blurb { font-size: 12.5px; min-height: 48px; }
  .equip-card .ec-price { font-size: 14px; }
  .sheet-head h1, .screen-head h1 { font-size: 32px; }
  .screen-head h2 { font-size: 26px; }
  .head-side, .head-right { align-items: flex-start; }
  .sign { width: 94vw; }
  .sign-mower { width: 13%; }
  .title-stack { gap: 16px; }
  .slip-sheet { width: min(560px, 94vw); }
  .paid-stamp { position: static; margin: 18px auto 0; }
  #nextDayBtn { width: 100%; }
  .screen { padding: 12px; }
  .sheet-head, .screen-head { gap: 10px; }
}

@media (max-height: 620px) {
  .modal { align-items: flex-start; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .title-stack { gap: 8px; padding: 8px; }
  .sign { width: min(620px, 70vw); }
  .sign-line { font-size: clamp(30px, 5vw, 52px); }
  .sign-sub { font-size: clamp(14px, 2vw, 20px); }
  .sign-sub2 { font-size: clamp(13px, 1.8vw, 18px); }
  .title-kicker { display: none; }
  .title-meta { font-size: 10px; }
  #toolbar { padding: 3px 6px; }
  .tool img, .svg-icon { width: 28px; height: 28px; }
  .tool .tlabel { display: none; }
  .tool-tag { bottom: 60px; }
  .toast { bottom: 116px; }
}

@media (prefers-reduced-motion: reduce) {
  .stamp-btn, .tool { transition: none; }
  .ticket-shell.paid, .paid-stamp { animation: none; }
}