/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 · macrostructure: full-bleed 3D world with a ticket overlay, then stamped olive ledger sections · theme: studied-DNA (source: The Tuscan Journey Begins, Awwwards SOTD) · paper #e3dbc3 · accent olive #465016 · display Archivo 125/880 · body Archivo 100/440 · nav: floating pill on the scene · footer: soil band with mark · contrast: pass */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-wdth-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --olive: #465016;
  --olive-2: #3a4312;
  --olive-deep: #252b0b;
  --soil: #5b3a1c;
  --soil-deep: #3a2411;
  --cream: #ede6d6;
  --paper: #e3dbc3;
  --paper-2: #d8ceb1;
  --wheat: #d9b45a;
  --terra: #b5532a;
  --lime: #b9cf5a;
  --ink: #1f230c;
  --muted: #5d5f3e;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pad: clamp(16px, 2.6vw, 44px);
}

* { box-sizing: border-box; }
html { background: var(--soil-deep); color: var(--ink); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; font-family: "Archivo", system-ui, sans-serif; font-stretch: 100%; font-weight: 440;
  font-size: 16px; line-height: 1.5; background: var(--olive); overflow-x: clip;
}
img, svg, canvas { display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--wheat); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 99; background: var(--cream); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* paper grain over everything, like the inspiration's painted canvas */
.grain {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .13; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .05 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(4) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* ---------- header ---------- */
.bar {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 18px;
  padding: calc(var(--pad) * .7) calc(var(--pad) + 8px) 0; pointer-events: none;
}
.bar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); }
.brand img { width: 40px; height: 40px; filter: drop-shadow(2px 2px 0 rgba(31, 35, 12, .55)); }
.brand span { font-stretch: 125%; font-weight: 860; font-size: 19px; text-transform: uppercase; letter-spacing: .01em; text-shadow: 2px 2px 0 rgba(31, 35, 12, .85), 0 0 14px rgba(31, 35, 12, .55); }
.links { display: flex; gap: 4px; margin-left: 10px; background: rgba(37, 43, 11, .55); backdrop-filter: blur(8px); border-radius: 999px; padding: 4px; }
.links a { color: var(--cream); text-decoration: none; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 560; transition: background .3s var(--ease), color .3s; }
.links a:hover { background: var(--cream); color: var(--olive-deep); }
.tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ico {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--cream);
  background: rgba(37, 43, 11, .62); backdrop-filter: blur(8px); transition: transform .35s var(--ease), background .3s;
}
.ico:hover { transform: rotate(-8deg) scale(1.07); background: var(--olive); }
.ca {
  height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px dashed rgba(237, 230, 214, .55); background: rgba(37, 43, 11, .62);
  backdrop-filter: blur(8px); color: var(--cream); font-size: 13.5px; font-weight: 560; cursor: default; white-space: nowrap;
}
.ca.live { border-style: solid; cursor: pointer; }
.pair { color: var(--cream); font-size: 13px; background: rgba(37, 43, 11, .62); padding: 9px 12px; border-radius: 999px; white-space: nowrap; }
.btn {
  height: 38px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; display: inline-grid; place-items: center;
  font-weight: 680; font-size: 14.5px; white-space: nowrap; transition: transform .35s var(--ease), background .3s, color .3s;
}
.btn:hover { transform: translateY(-2px) rotate(-1.5deg); }
.btn-line { color: var(--cream); background: rgba(37, 43, 11, .62); box-shadow: inset 0 0 0 1.5px var(--cream); backdrop-filter: blur(8px); }
.btn-line[aria-disabled="true"] { opacity: .72; }
.btn-cream { background: var(--cream); color: var(--olive-deep); box-shadow: 3px 3px 0 var(--olive-deep); }
/* the scalloped cream tag button from the inspiration: a pill whose ends are bitten into a wave */
.btn-scallop {
  height: 52px; padding: 0 30px; font-size: 16.5px; background: var(--cream); color: var(--olive-deep); border-radius: 26px / 50%;
  -webkit-mask: radial-gradient(9px at 0 50%, #0000 98%, #000) 0 50% / 51% 100% no-repeat, radial-gradient(9px at 100% 50%, #0000 98%, #000) 100% 50% / 51% 100% no-repeat;
          mask: radial-gradient(9px at 0 50%, #0000 98%, #000) 0 50% / 51% 100% no-repeat, radial-gradient(9px at 100% 50%, #0000 98%, #000) 100% 50% / 51% 100% no-repeat;
  filter: drop-shadow(3px 3px 0 var(--olive-deep));
}
.btn-scallop:disabled { opacity: .6; cursor: progress; }

/* ---------- the farm (first view) ---------- */
.farm { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--soil); }
.stage { position: absolute; inset: 0; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#world.pointing { cursor: pointer; }
#world:active { cursor: grabbing; }
.frame { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.frame-svg { width: 100%; height: 100%; }
.loader { position: absolute; inset: 0; display: grid; place-items: center; background: var(--soil); z-index: 3; color: var(--cream); font-stretch: 125%; font-weight: 800; font-size: 15px; transition: opacity .9s var(--ease); }
.loader.gone { opacity: 0; pointer-events: none; }
.loader span { animation: breathe 1.4s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: .35; } }

.hover-tag {
  position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none; transform: translate(-50%, calc(-100% - 18px));
  background: var(--olive-deep); color: var(--cream); padding: 8px 12px 9px; border-radius: 10px; font-size: 13.5px; line-height: 1.3; white-space: nowrap;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .25);
}
.hover-tag b { font-stretch: 118%; font-weight: 800; font-size: 15px; display: block; }
.hover-tag .up { color: var(--lime); } .hover-tag .down { color: #f08a5d; }

/* the olive ticket, laid over the world like the inspiration's title card */
.ticket {
  position: absolute; z-index: 10; left: calc(var(--pad) + 14px); top: clamp(92px, 13vh, 150px); width: min(560px, calc(100vw - 2 * var(--pad) - 28px));
  transform: rotate(-1.6deg); transform-origin: 20% 50%;
}
.ticket::before {
  content: ""; position: absolute; inset: -12px 18px 12px -12px; background: var(--olive-deep); border-radius: 4px; transform: rotate(2.4deg); z-index: -1;
  background-image: repeating-linear-gradient(90deg, transparent 0 58px, rgba(237, 230, 214, .05) 58px 60px);
}
.ticket-inner {
  background: var(--olive); color: var(--cream); padding: clamp(22px, 2.6vw, 38px) clamp(22px, 2.8vw, 42px) clamp(20px, 2.2vw, 30px);
  border-radius: 4px; position: relative;
  background-image: repeating-linear-gradient(90deg, transparent 0 78px, rgba(0, 0, 0, .06) 78px 80px);
  -webkit-mask: radial-gradient(14px at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(14px at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(14px at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(14px at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
          mask: radial-gradient(14px at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(14px at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(14px at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(14px at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
}
.mark {
  margin: 0 0 14px; font-stretch: 125%; font-weight: 880; text-transform: uppercase; line-height: .86; letter-spacing: -.01em;
  font-size: clamp(54px, 6.4vw, 104px); color: var(--cream); text-shadow: 4px 4px 0 var(--olive-deep);
}
.mark span { display: block; white-space: nowrap; }
.mark .l2 { padding-left: .62em; }
.mark .ch, .big .ch { display: inline-block; will-change: transform; }
.lede { margin: 0 0 18px; max-width: 46ch; font-size: clamp(15px, 1.05vw, 17px); color: rgba(237, 230, 214, .92); }
.sow { display: flex; gap: 10px; align-items: center; }
.sow input {
  flex: 1; min-width: 0; height: 52px; border-radius: 14px; border: 1.5px solid rgba(237, 230, 214, .35); background: rgba(31, 35, 12, .35);
  padding: 0 16px; color: var(--cream); font-size: 15px; transition: border-color .3s, background .3s;
}
.sow input::placeholder { color: rgba(237, 230, 214, .55); }
.sow input:focus { border-color: var(--wheat); background: rgba(31, 35, 12, .55); outline: none; }
.linkish { margin-top: 12px; background: none; border: 0; padding: 4px 0; color: var(--cream); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(237, 230, 214, .4); cursor: pointer; font-size: 14.5px; }
.linkish:hover { text-decoration-color: var(--wheat); }
.sow-status { margin: 10px 0 0; min-height: 1.5em; font-size: 14px; color: var(--wheat); }
.sow-status.err { color: #f4a37e; }

.inspector {
  position: absolute; z-index: 12; right: calc(var(--pad) + 14px); bottom: clamp(70px, 10vh, 110px); width: min(360px, calc(100vw - 2 * var(--pad)));
  background: var(--paper); color: var(--ink); border-radius: 6px; padding: 22px 22px 20px; transform-origin: 80% 100%;
  box-shadow: 5px 5px 0 var(--olive-deep);
  background-image: radial-gradient(rgba(91, 58, 28, .08) 1px, transparent 1.4px); background-size: 7px 7px;
}
.inspector .x { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; cursor: pointer; color: var(--ink); }
.inspector .x:hover { background: var(--paper-2); }
.insp-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding-right: 26px; }
.insp-top img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--paper-2); }
.insp-top h3 { margin: 0; font-stretch: 118%; font-weight: 850; font-size: 22px; line-height: 1.05; overflow-wrap: anywhere; }
.insp-top p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(31, 35, 12, .15); border-radius: 8px; overflow: hidden; margin: 0 0 14px; }
.facts div { background: var(--paper); padding: 9px 11px; }
.facts dt { font-size: 12.5px; color: var(--muted); }
.facts dd { margin: 0; font-weight: 720; font-size: 16px; font-variant-numeric: tabular-nums; }
.up { color: #4c6a12; } .down { color: var(--terra); }
.insp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.insp-actions .btn { height: 42px; }
.btn-olive { background: var(--olive); color: var(--cream); box-shadow: 3px 3px 0 var(--olive-deep); }
.btn-paper { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.insights { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.insights li { padding-left: 18px; position: relative; font-size: 14.5px; line-height: 1.35; }
.insights li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 8px; height: 8px; border-radius: 50% 0; background: var(--olive); transform: rotate(45deg); }
.rulenote { font-size: 12.5px; color: var(--muted); margin: -4px 0 12px; }

.sky-note {
  position: absolute; z-index: 9; left: calc(var(--pad) + 18px); bottom: calc(var(--pad) + 12px); max-width: min(520px, 60vw);
  color: var(--cream); font-size: 14px; background: rgba(37, 43, 11, .6); backdrop-filter: blur(8px); padding: 10px 14px; border-radius: 12px;
}
.sky-note b { font-weight: 760; }
.drag-hint {
  position: absolute; z-index: 9; right: calc(var(--pad) + 18px); bottom: calc(var(--pad) + 12px); margin: 0; color: var(--cream); font-size: 14px;
  padding: 10px 14px 10px 40px; background: rgba(37, 43, 11, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ede6d6' stroke-width='1.8'%3E%3Crect x='7' y='3' width='10' height='16' rx='5'/%3E%3Cpath d='M12 7v3'/%3E%3C/svg%3E") 14px 50% / 18px no-repeat;
  backdrop-filter: blur(8px); border-radius: 12px;
}
.inspector:not([hidden]) ~ .drag-hint { opacity: 0; }

/* ---------- ledger sections (olive, stamped, like the inspiration's form page) ---------- */
.ledger, .rows, .method, .foot { overflow-x: clip; }
.ledger, .rows, .method {
  position: relative; z-index: 5; padding: clamp(80px, 10vw, 150px) calc(var(--pad) + 14px); color: var(--cream);
  background-color: var(--olive);
  background-image: url("/assets/img/stamp.svg"); background-size: 190px 190px;
}
.rows { background-color: var(--olive-2); }
.method { background-color: var(--olive-deep); }
.ledger::before { content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 40px; background: var(--olive); -webkit-mask: url("/assets/img/torn-top.svg") 0 0 / 100% 100%; mask: url("/assets/img/torn-top.svg") 0 0 / 100% 100%; }
.rows::before, .method::before { content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 40px; -webkit-mask: url("/assets/img/torn-top.svg") 0 0 / 100% 100%; mask: url("/assets/img/torn-top.svg") 0 0 / 100% 100%; }
.rows::before { background: var(--olive-2); } .method::before { background: var(--olive-deep); }
.big {
  margin: 0; font-stretch: 125%; font-weight: 880; text-transform: uppercase; line-height: .88; font-size: clamp(56px, 8.4vw, 148px);
  text-shadow: 5px 5px 0 rgba(20, 23, 6, .7); letter-spacing: -.01em;
}
.big span { display: inline-block; white-space: nowrap; }
.ledger-head, .rows-head { display: flex; align-items: flex-end; gap: clamp(20px, 4vw, 70px); flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 70px); }
.sub { margin: 0; max-width: 44ch; font-size: clamp(15px, 1.1vw, 18px); color: rgba(237, 230, 214, .86); padding-bottom: .6em; }

.ledger-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.paper {
  background: var(--paper); color: var(--ink); border-radius: 4px; padding: clamp(18px, 2.2vw, 34px); position: relative;
  box-shadow: 8px 8px 0 rgba(20, 23, 6, .55);
}
.paper::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; border-radius: 4px 4px 0 0; background: var(--ink);
  background-image: radial-gradient(circle, var(--cream) 2.4px, transparent 3px); background-size: 34px 30px; background-position: 17px 50%;
}
.paper > :first-child { margin-top: 26px; }
.paper-barn { transform: rotate(-.8deg); }
.paper-card { transform: rotate(1.1deg); min-height: 320px; }
.harvests { list-style: none; margin: 0; padding: 0; }
.harvests li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1.5px dashed rgba(31, 35, 12, .22); }
.harvests li:last-child { border-bottom: 0; }
.harvests li.empty { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; color: var(--muted); padding: 26px 4px; font-size: 16.5px; }
.harvests li.empty svg { width: 120px; height: auto; }
.sprout { width: 58px; height: 44px; }
.h-who { font-weight: 760; font-size: 15.5px; }
.h-who a { text-decoration: none; border-bottom: 1.5px solid rgba(31, 35, 12, .3); }
.h-what { font-size: 14.5px; color: #3e4120; overflow-wrap: anywhere; }
.h-when { font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-empty { color: var(--muted); font-size: 16px; margin: 26px 0 0; aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; padding: 24px; border: 2px dashed rgba(31, 35, 12, .25); border-radius: 4px; background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(70, 80, 22, .06) 14px 16px); }
.paper-card { min-height: 0 !important; }
.card-img { width: 100%; height: auto; border-radius: 3px; margin-top: 26px; }
.card-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.card-actions .btn { height: 44px; }

.rows-table { display: grid; gap: 0; background: var(--paper); color: var(--ink); border-radius: 4px; box-shadow: 8px 8px 0 rgba(20, 23, 6, .55); overflow: hidden; }
.row {
  display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(5, minmax(80px, 1fr)) 120px; gap: 12px; align-items: center;
  padding: 13px clamp(14px, 2vw, 28px); border-bottom: 1.5px dashed rgba(31, 35, 12, .18); font-variant-numeric: tabular-nums; font-size: 15px;
  transition: background .3s;
}
.row:hover { background: var(--paper-2); }
.row.head { background: var(--ink); color: var(--cream); font-size: 13.5px; font-weight: 650; border-bottom: 0; letter-spacing: .01em; }
.row.head span { color: var(--cream); text-decoration: none; }
.row > span { display: block; min-width: 0; }
.row .c-v { display: block; margin-bottom: 6px; }
.row .coin { display: flex; gap: 10px; align-items: center; font-weight: 760; min-width: 0; font-size: 16.5px; }
.row .coin img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: var(--paper-2); flex: none; }
.row .coin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .vol { display: block; height: 8px; max-width: 150px; border-radius: 6px; background: rgba(31, 35, 12, .12); overflow: hidden; }
.row .vol i { display: block; height: 100%; border-radius: 6px; background: var(--olive); transform-origin: left; }
.row button { height: 34px; font-size: 13.5px; padding: 0 12px; }
.rows-empty { padding: 26px; color: var(--muted); }

.packets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); margin-top: clamp(40px, 5vw, 70px); }
.packet {
  background: var(--cream); color: var(--ink); padding: 26px 24px 22px; border-radius: 4px; position: relative; box-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
}
.packet:nth-child(odd) { transform: rotate(-1.2deg); } .packet:nth-child(even) { transform: rotate(1deg) translateY(18px); }
.packet h3 { margin: 0 0 10px; font-stretch: 122%; font-weight: 850; font-size: 22px; line-height: 1.05; }
.packet p { margin: 0 0 12px; font-size: 15px; }
.packet .src { margin: 0; font-size: 13px; color: var(--muted); border-top: 1.5px dashed rgba(31, 35, 12, .25); padding-top: 10px; }

.foot { background: var(--soil-deep); color: var(--cream); padding: 80px calc(var(--pad) + 14px) 60px; display: grid; justify-items: center; text-align: center; gap: 14px; position: relative; z-index: 5; }
.foot-mark { margin: 0; font-stretch: 125%; font-weight: 880; text-transform: uppercase; font-size: clamp(48px, 9vw, 150px); line-height: .9; text-shadow: 5px 5px 0 rgba(0, 0, 0, .4); }
.foot-line { margin: 0; max-width: 52ch; color: rgba(237, 230, 214, .75); font-size: 14.5px; }
.foot-tools { display: flex; gap: 10px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .links { display: none; }
  .packets { grid-template-columns: 1fr 1fr; }
  .row { grid-template-columns: minmax(130px, 1.4fr) repeat(3, minmax(70px, 1fr)) 110px; }
  .row .c-buyers, .row .c-mcap { display: none; }
}
@media (max-width: 820px) {
  .ledger-grid { grid-template-columns: 1fr; }
  .pair { display: none; }
}
@media (max-width: 640px) {
  .bar { gap: 8px; padding: 12px 14px 0; }
  .brand span, #walletBtn { display: none; }
  #caChip { font-size: 11px; padding: 0 8px; height: 32px; }
  .ico { width: 32px !important; height: 32px !important; }
  #buyBtn { padding: 0 10px; height: 32px; }
  .tools { gap: 5px; }
  .ico { width: 34px; height: 34px; }
  .btn { height: 34px; padding: 0 12px; font-size: 13.5px; }
  .farm { height: 100svh; min-height: 640px; }
  .ticket { left: 14px; right: 14px; width: auto; top: auto; bottom: 64px; transform: rotate(-1deg); }
  .ticket-inner { padding: 18px 18px 14px; }
  .mark { font-size: clamp(40px, 13vw, 58px); margin-bottom: 8px; }
  .lede { font-size: 14px; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .sow input { height: 46px; font-size: 14px; }
  .btn-scallop { height: 46px; padding: 0 20px; font-size: 15px; }
  .inspector { left: 12px; right: 12px; width: auto; bottom: 12px; top: auto; max-height: 72svh; overflow: auto; }
  .sky-note { left: 14px; right: 14px; max-width: none; bottom: 14px; font-size: 12.5px; padding: 8px 12px; }
  .drag-hint { display: none; }
  .packets { grid-template-columns: 1fr; }
  .packet:nth-child(even) { transform: rotate(1deg); }
  .row { grid-template-columns: minmax(0, 1.5fr) minmax(64px, 1fr) minmax(56px, .8fr); }
  .row .c-buys, .row .c-act, .row .c-bar { display: none; }
  .harvests li { grid-template-columns: 44px minmax(0, 1fr); }
  .harvests li.empty { grid-template-columns: 1fr; gap: 12px; }
  .harvests li.empty svg { width: 84px; }
  .h-when { grid-column: 2; text-align: left; }
  .sprout { width: 44px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ?clean=1: the bare farm, for share art renders */
body.clean .bar, body.clean .ticket, body.clean .sky-note, body.clean .drag-hint, body.clean .hover-tag, body.clean .inspector,
body.clean main > section:not(.farm), body.clean .foot, body.clean .skip { display: none !important; }