:root {
  color-scheme: light;
  --ink: #28352a;
  --muted: #788276;
  --paper: #f0f2e8;
  --card: #fffef9;
  --line: #e1e7d8;
  --green: #438153;
  --green-dark: #30643d;
  --green-light: #eaf3e4;
  --gold: #dfaa4d;
  --sans: "Segoe UI", Arial, sans-serif;
  --display: Georgia, "Times New Roman", serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(#d9dfce 0.7px, transparent 0.7px), var(--paper); background-size: 15px 15px; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #d99c3d; outline-offset: 3px; }
button:disabled { cursor: not-allowed !important; opacity: .52; }
[hidden] { display: none !important; }

.page-shell { width: min(1190px, calc(100% - 48px)); margin: 0 auto; }
.topbar { height: 72px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #dbe0d2; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 800 15px "Cascadia Code", Consolas, monospace; letter-spacing: -.07em; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50% 50% 45% 48%; color: #fffdf2; background: var(--green); font: 700 18px var(--display); transform: rotate(-7deg); }
.brand-light { color: var(--green); }
.topbar-note { color: var(--muted); font-size: 11px; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 8px 11px; border: 1px solid #d8e5d1; border-radius: 99px; color: #527658; background: #f7faf1; font: 8px "Cascadia Code", Consolas, monospace; letter-spacing: .05em; }
.live-pill > span, .working-indicator > span { width: 7px; height: 7px; border-radius: 50%; background: #77a958; box-shadow: 0 0 0 3px #77a95824; animation: breathe 2.2s ease-in-out infinite; }
.intro-row { display: flex; align-items: end; justify-content: space-between; gap: 25px; padding: 29px 0 20px; }
.eyebrow { margin: 0 0 6px; color: var(--green); font: 500 8px "Cascadia Code", Consolas, monospace; letter-spacing: .12em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 5px; font: 600 clamp(31px, 4vw, 43px)/1.1 var(--display); letter-spacing: -.04em; }
h1 span { color: var(--green); font-style: italic; }
.intro-copy { max-width: 520px; margin: 0; color: #778072; font-size: 12px; line-height: 1.55; }
.level-card { min-width: 226px; display: grid; grid-template: auto auto / 38px 1fr auto; gap: 4px 10px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fffef9; }
.level-badge { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fffdf3; background: var(--green); font: 700 17px var(--display); }
.level-card > span:nth-child(2) { display: grid; gap: 2px; }
.level-card small { color: #919588; font: 7px "Cascadia Code", Consolas, monospace; }
.level-card strong { font: 600 13px var(--display); }
.level-progress { grid-column: 2 / 4; height: 5px; overflow: hidden; border-radius: 8px; background: #e7ebdf; }
.level-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: #77a958; transition: width .3s; }
.xp-label { grid-column: 3; grid-row: 1; align-self: start; }

.economy-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; padding: 10px; border: 1px solid #dfe5d7; border-radius: 11px; background: #fffef9; box-shadow: 0 4px 12px #41502e09; }
.resource { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 3px 8px; border-right: 1px solid #e9ecdf; }
.resource:last-child { border: 0; }
.resource > span:first-child { font-size: 19px; }
.resource > span:last-child { display: grid; gap: 3px; min-width: 0; }
.resource small { color: #999b8f; font: 7px "Cascadia Code", Consolas, monospace; letter-spacing: .06em; white-space: nowrap; }
.resource strong { overflow: hidden; color: var(--ink); font: 600 14px var(--display); text-overflow: ellipsis; white-space: nowrap; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .83fr); align-items: start; gap: 14px; }
.farm-panel, .side-card { border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: 0 7px 22px #4450310a; }
.farm-panel { padding: 16px; }
.panel-heading, .side-card-heading, .production-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading .eyebrow, .side-card-heading .eyebrow, .production-heading .eyebrow { margin-bottom: 3px; }
.panel-heading h2, .side-card h2 { margin: 0; font: 600 20px var(--display); }
.weather-pill { padding: 6px 9px; border: 1px solid #f0e6c8; border-radius: 99px; color: #967440; background: #fffae9; font-size: 9px; }
.farm-scene { --scene-sky: #bfe1e5; --scene-hill: #92c78e; --scene-hill-light: #a1d29b; --scene-grass: #9dc77e; --scene-path: #ecd7a7; position: relative; height: 365px; overflow: hidden; margin-top: 12px; border: 1px solid #d7e6ca; border-radius: 10px; background: linear-gradient(var(--scene-sky) 0 35%, #b6d999 35% 60%, var(--scene-grass) 60%); isolation: isolate; transition: background .65s, border-color .65s; }
.farm-scene[data-scene="island"] { --scene-sky: #9ddce4; --scene-hill: #75bdb0; --scene-hill-light: #8ec9b5; --scene-grass: #8fc694; --scene-path: #ebd39a; border-color: #afd8d1; }
.farm-scene[data-scene="balogun"] { --scene-sky: #f0d5a7; --scene-hill: #c39a70; --scene-hill-light: #d3ad76; --scene-grass: #b5ad68; --scene-path: #f0d29b; border-color: #e2c28c; }
.farm-scene[data-scene="lekki"] { --scene-sky: #9bd8dd; --scene-hill: #75ae79; --scene-hill-light: #89bf7e; --scene-grass: #83b875; --scene-path: #e7ce98; border-color: #abd2bd; }
.farm-scene[data-scene="victoria"] { --scene-sky: #b9d5e6; --scene-hill: #91b3a0; --scene-hill-light: #a4c5ab; --scene-grass: #91bb87; --scene-path: #e7d2aa; border-color: #b6d2d7; }
.farm-scene[data-scene="ikoyi"] { --scene-sky: #bedce7; --scene-hill: #84b486; --scene-hill-light: #98c68f; --scene-grass: #8dbb75; --scene-path: #e6d2a5; border-color: #cadbbd; }
.sun-decoration { position: absolute; top: 21px; right: 14%; color: #efbf58; font-size: 30px; filter: drop-shadow(0 0 12px #ffe09e); }
.cloud { position: absolute; color: #fffef3d9; font-size: 48px; animation: cloud-drift 12s ease-in-out infinite alternate; }
.cloud-a { top: 16px; left: 15%; }.cloud-b { top: 36px; left: 57%; font-size: 33px; }
.distant-hill { position: absolute; z-index: -1; border-radius: 50%; background: var(--scene-hill); transition: background .65s; }
.hill-a { top: 116px; left: 0; width: 55%; height: 120px; }
.hill-b { top: 128px; right: 0; width: 60%; height: 130px; background: var(--scene-hill-light); }
.river { position: absolute; z-index: -1; right: 8%; bottom: -39px; width: 18%; height: 105px; border: 10px solid var(--scene-path); border-radius: 50% 0 0; background: repeating-linear-gradient(0deg, #79c3cf 0 8px, #8ad0d5 8px 12px); background-size: 100% 24px; animation: river-flow 2s linear infinite; transform: rotate(-23deg); }
.farm-path { position: absolute; z-index: -1; left: 4%; bottom: -85px; width: 82%; height: 170px; border: 20px solid var(--scene-path); border-bottom: 0; border-radius: 50% 48% 0 0; transform: rotate(-7deg); transition: border-color .65s; }
.scene-trees { position: absolute; right: 3%; bottom: 11px; color: #376e46; font-size: 14px; opacity: .68; }
.scene-landmark { position: absolute; z-index: 1; top: 38%; right: 21%; font-size: 34px; opacity: .82; filter: drop-shadow(0 3px 2px #40533942); animation: landmark-sway 3s ease-in-out infinite alternate; pointer-events: none; transition: filter .65s; }
.farm-scene.is-changing::after { position: absolute; z-index: 20; inset: 0; content: ""; background: #fff8e7; opacity: 0; pointer-events: none; animation: scene-arrival .65s ease-out; }
.market-mascot { position: absolute; z-index: 6; bottom: 8%; left: 3%; width: 101px; height: 145px; pointer-events: none; filter: drop-shadow(0 3px 2px #46372059); animation: mascot-route 16s linear infinite; }
.mascot-frame { position: absolute; bottom: 0; left: 0; display: block; height: 145px; overflow: hidden; background-repeat: no-repeat; background-position: 0 0; }
.mascot-idle { width: 68px; background-image: url("./assets/market-runner-idle.png"); background-size: auto 145px; animation: idle-frames .9s steps(7) infinite, idle-visibility 16s linear infinite; }
.mascot-walk { width: 73px; background-image: url("./assets/market-runner-walk.png"); background-size: auto 145px; animation: walk-frames 1s steps(10) infinite, walk-visibility 16s linear infinite; }
.mascot-run { width: 95px; background-image: url("./assets/market-runner-run.png"); background-size: auto 145px; opacity: 0; }
.mascot-jump { width: 101px; background-image: url("./assets/market-runner-jump.png"); background-size: auto 145px; opacity: 0; }
.market-mascot.is-rushing .mascot-walk { opacity: 0 !important; }
.market-mascot.is-rushing .mascot-run { opacity: 1; animation: run-frames .42s steps(5) infinite; }
.market-mascot.is-jumping .mascot-frame { opacity: 0 !important; animation: none; }
.market-mascot.is-jumping .mascot-jump { opacity: 1 !important; animation: jump-frames .72s steps(7) forwards, mascot-hop .72s ease-out; }
.farm-scene[data-circuit="1"] .scene-landmark { filter: sepia(.18) saturate(1.25) drop-shadow(0 3px 2px #40533942); }
.farm-scene[data-circuit="2"] .scene-landmark { filter: hue-rotate(-14deg) saturate(1.15) drop-shadow(0 3px 2px #40533942); }
.farm-layout { position: absolute; inset: 0; }
.map-field { position: absolute; z-index: 2; width: 108px; height: 59px; display: flex; align-items: center; justify-content: space-evenly; border: 4px solid #94ad64; border-radius: 7px; background: repeating-linear-gradient(0deg, #7d9e51 0 6px, #adc975 6px 11px); box-shadow: 0 3px 5px #43573429; transform: rotate(-5deg); animation: field-sway 4s ease-in-out infinite alternate; }
.map-field > span { font-size: 16px; filter: drop-shadow(0 1px 0 #536f3855); animation: crop-grow 1.8s ease-in-out infinite alternate; }
.map-field > span:nth-child(2) { animation-delay: .6s; }.map-field > span:nth-child(3) { animation-delay: 1.2s; }
.map-field small, .map-building small { position: absolute; z-index: 2; bottom: -16px; padding: 3px 5px; border-radius: 3px; color: #fffced; background: #486b43; font: 6px "Cascadia Code", Consolas, monospace; letter-spacing: .06em; white-space: nowrap; }
.field-1 { top: 24%; left: 8%; }.field-2 { top: 47%; left: 18%; transform: rotate(7deg); }.field-3 { top: 23%; left: 36%; transform: rotate(4deg); }.field-4 { top: 48%; left: 43%; transform: rotate(-4deg); }.field-5 { top: 26%; right: 6%; transform: rotate(-7deg); }.field-6 { top: 56%; right: 15%; transform: rotate(5deg); }
.market-garden { position: absolute; z-index: 3; top: 49%; right: 21%; display: grid; justify-items: center; gap: 1px; width: 92px; padding: 3px 5px 2px; border: 1px solid #fff5d4; border-radius: 7px; background: #fff9e9d9; box-shadow: 0 2px 5px #43573429; pointer-events: none; }
.market-garden img { display: block; width: 78px; height: 42px; object-fit: contain; }
.market-garden small { color: #496343; font: 5px "Cascadia Code", Consolas, monospace; letter-spacing: .06em; white-space: nowrap; }
.map-plot { position: absolute; width: 57px; height: 44px; display: grid; place-items: center; border: 2px dashed #7eaa68a8; border-radius: 7px; background: #9dc97965; opacity: .86; }
.map-plot span { opacity: .52; font-size: 18px; }
.map-plot-1 { top: 29%; left: 9%; }.map-plot-2 { top: 53%; left: 27%; }.map-plot-3 { top: 30%; left: 46%; }.map-plot-4 { top: 53%; left: 55%; }.map-plot-5 { top: 32%; right: 16%; }.map-plot-6 { top: 57%; right: 20%; }
.map-building { position: absolute; z-index: 3; display: grid; justify-items: center; align-content: center; width: 72px; height: 65px; border: 2px solid #fff5d4; border-radius: 8px; background: #f0c77c; box-shadow: 0 4px 5px #42533833; }
.map-building > span { font-size: 33px; line-height: 1; filter: drop-shadow(0 2px 1px #684b2a28); }
.map-building small { bottom: -13px; font-size: 5px; }
.map-building i { position: absolute; right: -5px; bottom: -2px; font-size: 16px; font-style: normal; }
.grater-building { top: 49%; left: 5%; width: 70px; height: 60px; background: #dfa963; }
.market-building { top: 48%; right: 4%; background: #efc074; }
.farm-scene[data-scene="balogun"] .market-building { background: #d99750; }
.farm-scene[data-scene="victoria"] .market-building { background: #dfbb82; }
.farmhouse { right: 36%; bottom: 9%; width: 61px; height: 55px; background: #e7bd85; }
.farmhouse > span { font-size: 27px; }
.map-person { position: absolute; z-index: 5; font-size: 25px; transition: left 1.1s ease-in-out, top 1.1s ease-in-out; animation: person-walk .4s ease-in-out infinite alternate; filter: drop-shadow(0 2px 1px #40533a65); }
.person-a { left: 18%; top: 42%; }.person-b { left: 75%; top: 43%; animation-delay: .2s; }
.farm-activity { position: absolute; z-index: 2; top: 61%; right: 16%; left: 16%; height: 52px; pointer-events: none; }
.activity-label { position: absolute; top: -16px; left: 50%; display: flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #ffffffc9; border-radius: 99px; color: #fffef4; background: #477447e8; box-shadow: 0 2px 5px #425c3940; font: 6px "Cascadia Code", Consolas, monospace; letter-spacing: .07em; white-space: nowrap; transform: translateX(-50%); }
.activity-label i { width: 5px; height: 5px; border-radius: 50%; background: #dff28a; box-shadow: 0 0 0 3px #e7f69d32; animation: breathe .8s ease-in-out infinite; }
.activity-route { position: absolute; top: 27px; right: 3%; left: 3%; height: 8px; border-top: 3px dashed #fff9db; filter: drop-shadow(0 1px 2px #385634); }
.moving-crop { position: absolute; z-index: 2; top: 4px; left: 0; display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid #fffdf0; border-radius: 50%; background: #fff9e9; box-shadow: 0 2px 7px #304a3170; font-size: 18px; animation: farm-delivery 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.crop-two { animation-delay: -1.2s; }.crop-three { animation-delay: -2.4s; }
.farm-equipment { position: absolute; z-index: 4; right: 12%; bottom: 5%; left: 12%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 5px; border: 1px solid #fff6d6e8; border-radius: 9px; background: #fff9e7ed; box-shadow: 0 4px 11px #3d563844; }
.farm-equipment-item { position: relative; min-width: 0; min-height: 48px; display: grid; justify-items: center; align-content: center; gap: 1px; padding: 4px 1px 5px; border: 1px solid #dce2c7; border-radius: 6px; color: #496343; background: #f7f5e9; transition: background .25s, border-color .25s, transform .25s, box-shadow .25s; }
.farm-equipment-item > span { font-size: 18px; line-height: 1.1; filter: saturate(.7); transition: filter .2s, transform .2s; }
.farm-equipment-item small { overflow: hidden; max-width: 100%; color: #627153; font: 5px "Cascadia Code", Consolas, monospace; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.farm-equipment-item i { position: absolute; top: -5px; right: -3px; min-width: 14px; padding: 1px 2px; border: 1px solid #fffdf2; border-radius: 6px; color: #fff; background: #829064; font: normal 5px "Cascadia Code", Consolas, monospace; text-align: center; }
.farm-equipment-item em { position: absolute; right: 2px; bottom: -5px; max-width: 35px; overflow: hidden; padding: 1px 3px; border: 1px solid #fffdf2; border-radius: 8px; color: #597245; background: #fffef5; font: normal 6px "Cascadia Code", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.farm-equipment-item.is-working { border-color: #97b96f; box-shadow: 0 0 0 2px #92bc663d, 0 2px 7px #55703c30; }
.farm-equipment-item.is-working > span { animation: machine-work .65s ease-in-out infinite alternate; }
.farm-equipment-item.is-waiting > span { filter: grayscale(.65) saturate(.55); }
.farm-equipment-item.equipment-roaster.is-working::after { position: absolute; top: 0; right: 2px; content: "♨"; color: #e6944b; font-size: 10px; animation: steam-rise .9s ease-out infinite; }
.farm-equipment-item[data-tier="1"] { border-color: #c5b274; background: #fff4d9; box-shadow: 0 1px 4px #bd984547; }
.farm-equipment-item[data-tier="2"] { border-color: #b77c51; background: #f8e8d1; box-shadow: 0 1px 5px #9a643e5c; }
.farm-equipment-item[data-tier="3"] { border-color: #9eaa9a; background: #e5f2e5; box-shadow: 0 1px 7px #65977070; transform: translateY(-2px); }
.farm-equipment-item[data-tier="4"] { border-color: #83a7bd; background: #dff0f4; box-shadow: 0 2px 8px #47859b78; transform: translateY(-3px); }
.farm-equipment-item[data-tier="5"] { border-color: #d1a449; background: linear-gradient(140deg, #fff0bc, #f8df99); box-shadow: 0 2px 11px #dfa934a1; transform: translateY(-4px); }
.farm-equipment-item[data-tier="1"] > span, .farm-equipment-item[data-tier="2"] > span { filter: saturate(1.2); }
.farm-equipment-item[data-tier="3"] > span, .farm-equipment-item[data-tier="4"] > span, .farm-equipment-item[data-tier="5"] > span { filter: saturate(1.6) drop-shadow(0 1px 1px #4f63335a); transform: scale(1.12); }
.farm-equipment-item[data-tier="1"] i { background: #a78a4a; }.farm-equipment-item[data-tier="2"] i { background: #a96c40; }.farm-equipment-item[data-tier="3"] i { background: #52865b; }.farm-equipment-item[data-tier="4"] i { background: #468698; }.farm-equipment-item[data-tier="5"] i { color: #58451d; background: #e6bd50; }
.farm-equipment-item[data-tier="5"].is-working { box-shadow: 0 0 0 3px #edcb5a75, 0 2px 11px #dfa934a1; }
.town-sign { position: absolute; z-index: 5; top: 7px; left: 10px; display: grid; gap: 2px; padding: 6px 9px; border: 2px solid #e5ce96; border-radius: 3px; color: #fff7db; background: #477347; box-shadow: 0 2px 4px #45533a3d; transform: rotate(-2deg); }
.town-sign span { font: 6px "Cascadia Code", Consolas, monospace; letter-spacing: .1em; }.town-sign strong { font: 700 10px var(--display); }
.scene-bird { position: absolute; z-index: 1; top: 22%; color: #728c7a; font: 22px var(--display); }
.bird-one { left: 48%; }.bird-two { top: 16%; left: 56%; font-size: 15px; }
.scene-bird { animation: bird-glide 3s ease-in-out infinite alternate; }.bird-two { animation-delay: 1s; }
.scene-caption { position: absolute; z-index: 6; bottom: 9px; left: 11px; padding: 5px 7px; border-radius: 4px; color: #fffdf2; background: #365e3ec9; font: 7px "Cascadia Code", Consolas, monospace; letter-spacing: .08em; }

.production-heading { margin: 15px 0 8px; }
.production-heading h3 { margin: 0; font: 600 17px var(--display); }
.working-indicator { display: inline-flex; align-items: center; gap: 7px; color: #6a8068; font-size: 8px; }
.working-indicator > span { width: 6px; height: 6px; }
.production-list { display: grid; gap: 7px; }
.production-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 6px 9px; align-items: center; padding: 9px; border: 1px solid #edf0e7; border-radius: 8px; background: #fffefa; }
.production-icon { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #eef4e5; font-size: 17px; }
.mill-icon { background: #fcf1df; }
.production-copy { display: grid; gap: 2px; }.production-copy strong { font: 600 11px var(--display); }.production-copy small, .production-rate small { color: #95978a; font-size: 8px; }
.production-rate { grid-column: 3; grid-row: 1 / 3; display: grid; justify-items: end; gap: 2px; }
.production-rate strong { color: var(--green-dark); font: 600 10px "Cascadia Code", Consolas, monospace; }
.rate-track { grid-column: 2; height: 4px; overflow: hidden; border-radius: 5px; background: #edf0e5; }
.rate-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #8dbd6b; transition: width .3s; }
.production-row:nth-child(2) .rate-track > span { background: #e0b45b; }
.production-row:nth-child(3) .rate-track > span { background: #bc9b63; }
.farm-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; color: #989888; font-size: 8px; }
.farm-footer > span:first-child { color: #748567; }.farm-footer strong { font-weight: 500; }

.side-column { display: grid; gap: 13px; }
.side-card { padding: 15px; }
.side-card-heading { margin-bottom: 13px; }
.side-card h2 { font-size: 18px; }
.order-icon { font-size: 22px; }
.customer-line { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #f0e8d7; border-radius: 8px; background: #fffaf0; }
.customer-avatar { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; color: #704d32; background: #edc38b; font: 600 14px var(--display); }
.customer-line > span:last-child { display: grid; gap: 3px; }.customer-line strong { font: 600 11px var(--display); }.customer-line small { color: #929083; font-size: 8px; }
.order-product { display: flex; align-items: center; gap: 8px; padding: 12px 2px 8px; }.order-product > span:first-child { font-size: 20px; }.order-product > span:last-child { display: grid; gap: 2px; }.order-product strong { font: 600 12px var(--display); }.order-product small { color: #989789; font-size: 8px; }
.order-meter { height: 7px; overflow: hidden; border-radius: 6px; background: #eceee5; }
.order-meter > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #81b46b, #a0ca7b); transition: width .5s; }
.order-reward { display: flex; align-items: center; gap: 9px; margin: 10px 0; color: #989789; font-size: 8px; }.order-reward > span { margin-right: auto; }.order-reward strong { color: #6f734c; font: 600 9px "Cascadia Code", Consolas, monospace; white-space: nowrap; }
.deliver-button { width: 100%; min-height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border: 0; border-radius: 7px; color: #fffdf4; background: var(--green); box-shadow: 0 3px 0 var(--green-dark); font-size: 10px; font-weight: 700; cursor: pointer; transition: background-color .15s, transform .15s; }
.deliver-button:hover:not(:disabled) { background: var(--green-dark); transform: translateY(-1px); }.deliver-button > span:last-child { font-size: 17px; font-weight: 400; }
.order-note { min-height: 13px; margin: 9px 0 0; color: #979587; font-size: 8px; line-height: 1.4; }
.upgrade-sparkle { color: #d6a747; font-size: 20px; }
.equipment-intro { margin: -7px 0 10px; color: #929385; font-size: 8px; line-height: 1.45; }
.equipment-list { display: grid; gap: 6px; }
.equipment-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 62px; padding: 6px; border: 1px solid #e9ede2; border-radius: 8px; background: #fffefa; transition: border-color .2s, background .2s; }
.equipment-card:has(.tier-visual.tier-1) { border-color: #eee3c5; background: #fffdf6; }
.equipment-card:has(.tier-visual.tier-2) { border-color: #ecddca; background: #fffaf3; }
.equipment-card:has(.tier-visual.tier-3) { border-color: #d6e8d6; background: #fafff8; }
.equipment-card:has(.tier-visual.tier-4) { border-color: #d0e4e7; background: #f7fcfc; }
.equipment-card:has(.tier-visual.tier-5) { border-color: #ecdca9; background: #fffcf0; }
.tier-visual { position: relative; width: 45px; height: 45px; display: flex; align-items: end; justify-content: center; gap: 2px; overflow: hidden; padding: 3px; border: 1px solid #e6e8db; border-radius: 7px; background: linear-gradient(#f6f5e8 0 62%, #dce8cb 62%); transition: background .2s, border-color .2s; }
.tier-visual > span { width: 3px; height: 5px; border-radius: 2px 2px 0 0; background: #d5d9cb; }
.tier-visual > span.is-active { height: 9px; background: #93ad75; }
.tier-visual strong { position: absolute; top: 4px; left: 50%; font-size: 19px; line-height: 1; filter: saturate(.75); transform: translateX(-50%); transition: filter .2s, transform .2s; }
.tier-visual.tier-1 { border-color: #d7c68d; background: linear-gradient(#fff7e3 0 62%, #ebd8a5 62%); }.tier-visual.tier-1 > span.is-active { background: #b79a5d; }
.tier-visual.tier-2 { border-color: #c7976d; background: linear-gradient(#fff0db 0 62%, #ddb58b 62%); }.tier-visual.tier-2 > span.is-active { height: 12px; background: #ae7444; }
.tier-visual.tier-3 { border-color: #9dbc9c; background: linear-gradient(#f0faec 0 62%, #b5d2aa 62%); }.tier-visual.tier-3 > span.is-active { height: 15px; background: #5e996b; }
.tier-visual.tier-4 { border-color: #91b9c1; background: linear-gradient(#e9f8fa 0 62%, #9ecbd0 62%); }.tier-visual.tier-4 > span.is-active { height: 18px; background: #438e9a; }
.tier-visual.tier-5 { border-color: #dbbf71; background: linear-gradient(#fff8da 0 62%, #e9ce7e 62%); box-shadow: inset 0 0 8px #f2ce6873; }.tier-visual.tier-5 > span.is-active { height: 21px; background: #d09e35; }
.tier-visual.tier-1 strong { filter: saturate(1.15); }.tier-visual.tier-2 strong { filter: saturate(1.4); transform: translateX(-50%) scale(1.07); }.tier-visual.tier-3 strong { filter: saturate(1.65) drop-shadow(0 1px 1px #54895c70); transform: translateX(-50%) scale(1.1); }.tier-visual.tier-4 strong { filter: saturate(1.8) drop-shadow(0 1px 2px #44879680); transform: translateX(-50%) scale(1.14); }.tier-visual.tier-5 strong { filter: saturate(2) drop-shadow(0 0 4px #e2b33dbd); transform: translateX(-50%) scale(1.19); }
.equipment-info { min-width: 0; display: grid; gap: 3px; }.equipment-info > strong { overflow: hidden; font: 600 9px var(--display); text-overflow: ellipsis; white-space: nowrap; }.equipment-info > small { color: #939486; font-size: 7px; white-space: nowrap; }.tier-name { color: #789060; font: 600 7px "Cascadia Code", Consolas, monospace; }.tier-name > span { color: #a09e91; font-weight: 400; }
.equipment-upgrade { min-width: 59px; display: grid; justify-items: center; gap: 3px; padding: 6px 5px; border: 1px solid #dbe5d2; border-radius: 6px; color: #627746; background: #f1f7e9; font: 600 8px "Cascadia Code", Consolas, monospace; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }.equipment-upgrade:hover:not(:disabled) { border-color: #9ab384; background: #e6f0dc; transform: translateY(-1px); }.equipment-upgrade > span { color: #8a9580; font-size: 5px; letter-spacing: .05em; }.equipment-upgrade:disabled { cursor: not-allowed; opacity: .55; }
.upgrade-option { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0 0 7px; padding: 9px 7px; border: 1px solid #e9ede2; border-radius: 8px; text-align: left; color: var(--ink); background: #fffefa; cursor: pointer; transition: border-color .15s, background .15s; }
.upgrade-option:hover:not(:disabled) { border-color: #bad0af; background: #f8fbf2; }
.upgrade-emoji { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #eef4e5; font-size: 16px; }.upgrade-option:nth-of-type(2) .upgrade-emoji { background: #fbf0dc; }
.upgrade-copy, .upgrade-price { display: grid; gap: 3px; }.upgrade-copy strong { font: 600 10px var(--display); }.upgrade-copy small, .upgrade-price small { color: #99998d; font-size: 7px; }.upgrade-price { justify-items: end; }.upgrade-price strong { color: #7e794d; font: 600 9px "Cascadia Code", Consolas, monospace; }
.expand-option { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 6px 7px; border: 0; border-top: 1px solid #eef0e8; color: var(--green-dark); text-align: left; background: transparent; cursor: pointer; }.expand-option > span:first-child { width: 25px; height: 25px; display: grid; place-items: center; border: 1px dashed #a9c09c; border-radius: 6px; font-size: 16px; }.expand-option > span:nth-child(2) { display: grid; gap: 2px; }.expand-option strong { font: 600 10px var(--display); }.expand-option small { color: #929385; font-size: 8px; }.expand-arrow { margin-left: auto; font-size: 15px; }
.upgrade-hint { margin: 5px 0 0; color: #a09f92; font-size: 8px; line-height: 1.45; }
.toast { position: fixed; z-index: 10; right: max(24px, calc((100vw - 1190px) / 2)); bottom: 18px; max-width: min(390px, calc(100% - 32px)); margin: 0; padding: 11px 15px; border: 1px solid #dce6d4; border-radius: 9px; color: #476749; background: #fffef7; box-shadow: 0 8px 28px #34412b22; font-size: 10px; line-height: 1.5; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }.toast.is-visible { opacity: 1; transform: translateY(0); }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 17px 2px 25px; color: #98998d; font: 8px "Cascadia Code", Consolas, monospace; }

@keyframes breathe { 50% { box-shadow: 0 0 0 5px #77a95812; opacity: .65; } }
@keyframes idle-frames { to { background-position: -475px 0; } }
@keyframes walk-frames { to { background-position: -739px 0; } }
@keyframes run-frames { to { background-position: -475px 0; } }
@keyframes jump-frames { to { background-position: -703px 0; } }
@keyframes idle-visibility { 0%, 7% { opacity: 1; } 8%, 91% { opacity: 0; } 92%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes walk-visibility { 0%, 7% { opacity: 0; } 9%, 89% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes mascot-route { 0%, 9% { left: 3%; } 91%, 100% { left: calc(100% - 101px); } }
@keyframes mascot-hop { 40% { transform: translateY(-38px) rotate(-5deg); } 75% { transform: translateY(-18px) rotate(4deg); } }
@keyframes landmark-sway { to { transform: translateY(-4px) rotate(2deg); } }
@keyframes scene-arrival { 0% { opacity: .45; } 100% { opacity: 0; } }
@keyframes field-sway { to { translate: 0 -2px; } }
@keyframes crop-grow { to { transform: translateY(-3px) scale(1.18); filter: drop-shadow(0 1px 3px #f6e77c); } }
@keyframes machine-work { to { transform: translateY(-3px) rotate(-7deg) scale(1.12); filter: saturate(1.7) drop-shadow(0 1px 3px #e1bc58); } }
@keyframes person-walk { to { translate: 7px -10px; rotate: 8deg; } }
@keyframes farm-delivery { 0% { left: 0; top: 0; opacity: 0; rotate: -25deg; scale: .65; } 12% { opacity: 1; } 48% { top: 15px; rotate: 20deg; scale: 1.28; } 88% { opacity: 1; } 100% { left: calc(100% - 32px); top: 0; opacity: 0; rotate: -25deg; scale: .8; } }
@keyframes cloud-drift { to { translate: 22px 0; } }
@keyframes bird-glide { to { translate: 16px -7px; } }
@keyframes river-flow { to { background-position-y: 24px; } }
@keyframes steam-rise { to { translate: 0 -8px; opacity: 0; } }

@media (max-width: 850px) {
  .page-shell { width: min(100% - 30px, 700px); }
  .intro-row { align-items: start; flex-direction: column; gap: 14px; padding-top: 25px; }.level-card { width: min(100%, 310px); }
  .game-layout { grid-template-columns: 1fr; }.side-column { grid-template-columns: 1fr 1fr; align-items: start; }.farm-scene { height: 350px; }
}
@media (max-width: 580px) {
  .page-shell { width: calc(100% - 22px); }.topbar { height: 60px; }.topbar-note { display: none; }.live-pill { padding: 7px; font-size: 6px; }
  .intro-row { padding: 22px 0 15px; }h1 { font-size: 34px; }.intro-copy { font-size: 11px; }
  .economy-strip { grid-template-columns: repeat(3, 1fr); gap: 7px 2px; padding: 8px 4px; }.resource { gap: 5px; padding: 3px 5px; }.resource:nth-child(3) { border: 0; }.resource:nth-child(4) { border-top: 1px solid #e9ecdf; padding-top: 8px; }.resource:nth-child(5) { grid-column: 2 / 4; border-top: 1px solid #e9ecdf; padding-top: 8px; }.resource > span:first-child { font-size: 15px; }.resource small { font-size: 6px; }.resource strong { font-size: 12px; }
  .side-column { grid-template-columns: 1fr; }.farm-panel { padding: 11px; }.farm-scene { height: 320px; }.map-field { width: 82px; height: 50px; }.map-field > span { font-size: 13px; }.field-1 { left: 7%; }.field-2 { left: 14%; }.field-3 { left: 36%; }.field-4 { left: 40%; }.field-5 { right: 3%; }.field-6 { right: 9%; }.map-building { transform: scale(.82); }.grater-building { left: 1%; }.market-building { right: 1%; }.farmhouse { right: 36%; bottom: 22%; }
  .production-heading h3 { font-size: 15px; }.working-indicator { font-size: 7px; }.farm-footer { font-size: 7px; }.footer { flex-direction: column; gap: 5px; }
  .farm-activity { top: 58%; right: 13%; left: 13%; height: 50px; }.moving-crop { width: 27px; height: 27px; font-size: 15px; }
  .market-garden { top: 49%; right: 19%; width: 78px; padding: 2px 3px; }.market-garden img { width: 68px; height: 36px; }
  .farm-equipment { right: 7%; bottom: 5%; left: 7%; gap: 2px; padding: 4px 2px; }.farm-equipment-item { min-height: 44px; padding: 4px 0 5px; }.farm-equipment-item > span { font-size: 14px; }.farm-equipment-item small { font-size: 4px; }.farm-equipment-item i { font-size: 4px; }.farm-equipment-item em { font-size: 5px; }
  .equipment-card { grid-template-columns: 48px minmax(0, 1fr) auto; }.equipment-info > strong { font-size: 10px; }.equipment-info > small { font-size: 8px; }.tier-name { font-size: 8px; }.equipment-upgrade { min-width: 68px; font-size: 9px; }.equipment-upgrade > span { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.tap-scene { height: 430px; }
.market-boss { position: absolute; z-index: 7; top: 13px; left: 50%; width: min(310px, calc(100% - 38px)); display: grid; gap: 5px; padding: 10px 13px; border: 1px solid #fff9e0; border-radius: 10px; color: #394c35; background: #fffef1ed; box-shadow: 0 4px 16px #38513535; text-align: center; transform: translateX(-50%); }
.boss-kicker { color: #7e905e; font: 7px "Cascadia Code", Consolas, monospace; letter-spacing: .12em; }
.market-boss > strong { font: 600 17px var(--display); }
.boss-health-track { height: 10px; overflow: hidden; border: 1px solid #adbf8d; border-radius: 99px; background: #e6ebd9; }
.boss-health-track > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #85b863, #deba56); transition: width .18s; }
.market-boss > small { color: #74816d; font-size: 8px; }
.tap-target { position: absolute; z-index: 8; top: 54%; left: 50%; width: 136px; height: 136px; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 12px; border: 0; border-radius: 50%; color: #fffdf3; background: transparent; cursor: pointer; transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tap-target-glow { position: absolute; inset: 0; border: 4px solid #fff6d5; border-radius: inherit; background: radial-gradient(circle at 35% 25%, #ffeb9d, #d9913f 72%); box-shadow: 0 8px 0 #9b5e2e, 0 12px 25px #3e573b70, inset 0 0 0 5px #ffc967; transition: transform .12s, filter .12s; animation: bowl-pulse 2.4s ease-in-out infinite; }
.tap-target-icon, .tap-target-label { position: relative; z-index: 1; filter: drop-shadow(0 2px 2px #653f274f); pointer-events: none; }
.tap-target-icon { font-size: 54px; line-height: 1.04; }
.tap-target-label { color: #fffdf2; font: 800 9px "Cascadia Code", Consolas, monospace; letter-spacing: .1em; }
.tap-target:hover .tap-target-glow { filter: brightness(1.08); }
.tap-target:active .tap-target-glow, .tap-target.is-tapping .tap-target-glow { transform: scale(.9) translateY(4px); box-shadow: 0 3px 0 #9b5e2e, 0 5px 12px #3e573b70, inset 0 0 0 5px #ffc967; }
.tap-target:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.floating-numbers { position: absolute; z-index: 9; inset: 30% 0 15%; overflow: hidden; pointer-events: none; }
.floating-number { position: absolute; left: 50%; top: 42%; color: #fffef0; font: 800 16px "Cascadia Code", Consolas, monospace; text-shadow: 0 2px 3px #523c21, 0 0 8px #735324; white-space: nowrap; animation: number-float .85s ease-out forwards; }
.town-helper-count { position: absolute; z-index: 5; right: 4%; bottom: 4%; padding: 4px 7px; border: 1px solid #fff5d4; border-radius: 99px; color: #fffced; background: #486b43e8; font: 7px "Cascadia Code", Consolas, monospace; }
.challenge-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 11px; color: #7a826f; font-size: 9px; }
.challenge-footer strong { color: #96743d; font: 700 12px "Cascadia Code", Consolas, monospace; }
.helper-list, .upgrade-list { display: grid; gap: 7px; }
.helper-card, .upgrade-card { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 8px 6px; border: 1px solid #e9ede2; border-radius: 8px; background: #fffefa; }
.helper-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #eef4e5; font-size: 17px; }
.helper-card:nth-child(2) .helper-icon { background: #fbf0dc; }
.helper-card:nth-child(3) .helper-icon { background: #f4e8d8; }
.helper-copy { min-width: 0; display: grid; gap: 3px; }
.helper-copy strong { overflow: hidden; font: 600 9px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.helper-copy small { overflow: hidden; color: #929385; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.hire-button { min-width: 66px; display: grid; justify-items: center; gap: 3px; padding: 6px 4px; border: 1px solid #dbe5d2; border-radius: 6px; color: #627746; background: #f1f7e9; font: 600 7px "Cascadia Code", Consolas, monospace; cursor: pointer; }
.hire-button:hover:not(:disabled) { border-color: #9ab384; background: #e6f0dc; }
.hire-button > span { color: #8a9580; font-size: 5px; letter-spacing: .05em; }
.prestige-box { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding: 10px 8px; border: 1px solid #ead7a7; border-radius: 8px; background: linear-gradient(110deg, #fff8dd, #fffef5); }
.prestige-box > div { display: grid; gap: 4px; }
.prestige-box strong { color: #725c2a; font: 600 9px var(--display); }
.prestige-box small { color: #92835d; font-size: 7px; line-height: 1.4; }
.prestige-button { flex: 0 0 auto; padding: 8px; border: 1px solid #cfaa4a; border-radius: 6px; color: #594314; background: #f5d77a; font: 700 7px "Cascadia Code", Consolas, monospace; cursor: pointer; }
.prestige-button:disabled { border-color: #e6e5dc; color: #99998f; background: #f1f0e9; }
.prestige-summary { border-color: #ead9ac; background: #fffdf4; }
.prestige-summary .level-badge { color: #594314; background: #e7c66e; }
.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.quick-action { padding: 8px 10px; border: 1px solid #d8d9c9; border-radius: 7px; color: #49663f; background: linear-gradient(180deg, #edf7ea, #e0f0db); font: 700 7px "Cascadia Code", Consolas, monospace; letter-spacing: .11em; cursor: pointer; }
.quick-action-secondary { color: #7a5526; background: linear-gradient(180deg, #fff6e1, #f7ebcd); border-color: #e8d39b; }
.quick-action:hover:not(:disabled) { filter: brightness(1.02); }

@keyframes bowl-pulse { 50% { box-shadow: 0 8px 0 #9b5e2e, 0 13px 30px #3e573b80, inset 0 0 0 7px #ffdb83; } }
@keyframes number-float { from { opacity: 0; transform: translate(-50%, 12px) scale(.7); } 25% { opacity: 1; } to { opacity: 0; transform: translate(calc(-50% + 15px), -55px) scale(1.18); } }

@media (max-width: 850px) {
  .tap-scene { height: 390px; }
}
@media (max-width: 580px) {
  .economy-strip { grid-template-columns: repeat(3, 1fr); }
  .resource:nth-child(4), .resource:nth-child(5) { border-top: 1px solid #e9ecdf; padding-top: 8px; }
  .resource:nth-child(4) { grid-column: 1 / 2; }
  .resource:nth-child(5) { grid-column: 2 / 4; }
  .tap-scene { height: 360px; }
  .market-boss { top: 12px; padding: 8px 10px; }
  .market-boss > strong { font-size: 15px; }
  .tap-target { top: 56%; width: 120px; height: 120px; }
  .tap-target-icon { font-size: 48px; }
  .farm-activity { top: 73%; }
  .town-helper-count { bottom: 2%; }
  .challenge-footer { font-size: 8px; }
}

:root {
  --ink: #30231e;
  --muted: #857366;
  --paper: #f5efe4;
  --card: #fffdf8;
  --line: #e6d7bb;
  --green: #845128;
  --green-dark: #57381f;
  --green-light: #f5ead0;
  --gold: #c29a45;
}
body { background: radial-gradient(#d3b77538 0.7px, transparent 0.7px), #f5efe4; background-size: 17px 17px; }
.topbar { border-color: #dfc997; }
.brand-mark { color: #fff9eb; background: linear-gradient(145deg, #bd9446, #765029); box-shadow: inset 0 0 0 2px #f2d68d; }
.brand-light, .eyebrow { color: #95682c; }
.live-pill { border-color: #e2ce9f; color: #76552c; background: #fffaf0; }
.live-pill > span { background: #bd9446; box-shadow: 0 0 0 3px #bd944628; }
.farm-panel, .side-card { border-color: #e7d8bc; box-shadow: 0 8px 24px #5c41210d; }
.market-boss { border-color: #e6cd8d; background: #fffaf0f2; }
.boss-kicker { color: #997333; }
.prestige-box { border-color: #ddc386; background: linear-gradient(110deg, #fff3d5, #fffdf5); }
.prestige-button { border-color: #b98d3c; color: #fff8e5; background: linear-gradient(145deg, #c49b45, #96662e); }
.prestige-button:disabled { border-color: #e6e5dc; color: #99998f; background: #f1f0e9; }
.prestige-details { min-width: 0; }
.prestige-details > strong { color: #73552c; }
.share-caption { margin: 9px 0 5px; color: #8c7a65; font-size: 8px; line-height: 1.4; }
.share-on-x, .share-on-youtube { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 32px; margin: 0 0 5px; padding: 7px 9px; border: 1px solid #33302d; border-radius: 6px; color: #fff; background: #24211f; font: 600 8px "Cascadia Code", Consolas, monospace; text-decoration: none; cursor: pointer; }
.share-on-x:hover { background: #3b3430; }
.share-on-youtube { border-color: #582c40; background: linear-gradient(100deg, #201c22, #563043); }
.share-on-youtube:hover { filter: brightness(1.15); }
.store-list { display: grid; gap: 7px; }
.store-card { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 8px 6px; border: 1px solid #ecdfc7; border-radius: 8px; background: linear-gradient(115deg, #fffdf8, #fdf6e9); }
.store-card.is-owned { border-color: #d9c18b; background: linear-gradient(115deg, #fff9e9, #f6ebd2); }
.store-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #ecdfc7; border-radius: 8px; background: #fff8e8; font-size: 17px; }
.store-button:not(:disabled) { border-color: #dfcc9f; color: #806036; background: #fff7e3; }
.store-button:hover:not(:disabled) { border-color: #bc9654; background: #f8eac8; }
.store-card.is-owned .store-button { border-color: #c8ae72; color: #68522c; background: #f0e0b9; }
.leaderboard-refresh { padding: 6px 9px; border: 1px solid #d8c18a; border-radius: 6px; color: #74542f; background: #fffaf0; font: 700 7px "Cascadia Code", Consolas, monospace; cursor: pointer; }
.leaderboard-refresh:hover:not(:disabled) { background: #fff3d8; }
.leaderboard-refresh:disabled { cursor: wait; opacity: .6; }
.leaderboard-table-wrap { overflow-x: auto; margin-top: 8px; }
.leaderboard-table { width: 100%; border-collapse: collapse; text-align: left; }
.leaderboard-table th { padding: 6px 4px; border-bottom: 1px solid #e9ede2; color: #89907e; font: 7px "Cascadia Code", Consolas, monospace; text-transform: uppercase; white-space: nowrap; }
.leaderboard-table td { padding: 7px 4px; border-bottom: 1px solid #f0f1e9; color: #68705f; font-size: 8px; white-space: nowrap; }
.leaderboard-table tbody tr:first-child td { color: #806036; font-weight: 700; }
.leaderboard-table td:nth-child(2) { max-width: 105px; overflow: hidden; text-overflow: ellipsis; }
.leaderboard-table tbody tr:last-child td { border-bottom: 0; }
.topbar-note { color: #927654; }
.economy-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.tap-target { width: 166px; height: 166px; align-content: end; justify-items: center; gap: 0; padding: 10px 0 12px; }
.tap-target:active .tap-bowl-shell, .tap-target.is-tapping .tap-bowl-shell { transform: translateY(4px) scale(.93); filter: brightness(1.08); }
.tap-target:focus-visible { outline-color: #c8a456; }
.tap-bowl-shell { --bowl-main: #a95133; --bowl-rim: #d59a45; --bowl-edge: #704028; position: relative; z-index: 1; width: 138px; height: 78px; display: block; margin-bottom: 7px; border: 4px solid var(--bowl-edge); border-radius: 9px 9px 62px 62px / 12px 12px 49px 49px; background: linear-gradient(100deg, var(--bowl-edge), var(--bowl-main) 18%, var(--bowl-rim) 48%, var(--bowl-main) 78%, var(--bowl-edge)); box-shadow: 0 9px 0 #47302283, 0 14px 20px #49362253, inset 0 -8px 12px #452a3155; transition: transform .12s, filter .12s, background .45s, border-color .45s; }
.tap-bowl-shell::before { position: absolute; top: -12px; right: -4px; left: -4px; height: 31px; content: ""; border: 4px solid var(--bowl-edge); border-radius: 50%; background: linear-gradient(90deg, var(--bowl-main), var(--bowl-rim) 50%, var(--bowl-main)); transition: background .45s, border-color .45s; }
.tap-garri { position: absolute; z-index: 2; top: -6px; right: 7px; left: 7px; height: 24px; overflow: hidden; border: 2px solid #fffdf2; border-radius: 50%; background-color: #f8f5e9; background-image: radial-gradient(ellipse at 15% 38%, #fffefa 0 1px, transparent 1.7px), radial-gradient(ellipse at 24% 60%, #e3dfd1 0 .8px, transparent 1.5px), radial-gradient(ellipse at 35% 25%, #fff 0 1.2px, transparent 1.8px), radial-gradient(ellipse at 44% 64%, #d9d5c8 0 .8px, transparent 1.6px), radial-gradient(ellipse at 56% 35%, #fffefa 0 1.1px, transparent 1.8px), radial-gradient(ellipse at 67% 68%, #e1ddce 0 .8px, transparent 1.6px), radial-gradient(ellipse at 77% 32%, #fff 0 1px, transparent 1.7px), radial-gradient(ellipse at 88% 58%, #ddd9cb 0 .8px, transparent 1.5px), radial-gradient(ellipse at 12% 76%, #ebe7da 0 .8px, transparent 1.5px), radial-gradient(ellipse at 51% 85%, #fffefa 0 1px, transparent 1.7px); box-shadow: 0 2px 4px #42321b80, inset 0 2px 3px #fff; }
.garri-grains { position: absolute; z-index: 3; top: 0; right: 10px; left: 10px; height: 18px; border-radius: 50%; background: radial-gradient(ellipse, #fffefa 0 1px, transparent 1.8px) 0 0 / 12px 8px, radial-gradient(ellipse, #e1ddcf 0 .8px, transparent 1.6px) 4px 4px / 13px 9px; opacity: .8; pointer-events: none; }
.tap-target-label { z-index: 2; margin-top: 2px; color: #fff7e2; font-size: 8px; text-shadow: 0 1px 3px #30201a; }
.tap-target[data-luxury="0"] .tap-bowl-shell, .showcase-bowl[data-luxury="0"] { --bowl-main: #a95133; --bowl-rim: #d59a45; --bowl-edge: #704028; }
.tap-target[data-luxury="1"] .tap-bowl-shell, .showcase-bowl[data-luxury="1"] { --bowl-main: #9da9ac; --bowl-rim: #ecf1e9; --bowl-edge: #647376; }
.tap-target[data-luxury="2"] .tap-bowl-shell, .showcase-bowl[data-luxury="2"] { --bowl-main: #c7942d; --bowl-rim: #ffe390; --bowl-edge: #815719; }
.tap-target[data-luxury="3"] .tap-bowl-shell, .showcase-bowl[data-luxury="3"] { --bowl-main: #21795c; --bowl-rim: #9bd296; --bowl-edge: #174631; }
.tap-target[data-luxury="4"] .tap-bowl-shell, .showcase-bowl[data-luxury="4"] { --bowl-main: #76b6d7; --bowl-rim: #e2fbff; --bowl-edge: #386284; }
.tap-target[data-luxury="5"] .tap-bowl-shell, .showcase-bowl[data-luxury="5"] { --bowl-main: #572c69; --bowl-rim: #e1bb73; --bowl-edge: #301840; }
.bowl-showcase { position: absolute; z-index: 10; bottom: 34px; left: 12px; width: 122px; display: grid; justify-items: center; gap: 3px; padding: 7px; border: 1px solid #e7d4a4; border-radius: 9px; color: #51402b; background: #fffaf0ed; box-shadow: 0 3px 10px #493c2833; text-align: center; }
.showcase-kicker { color: #98713a; font: 6px "Cascadia Code", Consolas, monospace; letter-spacing: .08em; }
.showcase-bowl { --bowl-main: #a95133; --bowl-rim: #d59a45; --bowl-edge: #704028; position: relative; width: 52px; height: 23px; border: 2px solid var(--bowl-edge); border-radius: 3px 3px 22px 22px / 5px 5px 16px 16px; background: linear-gradient(90deg, var(--bowl-edge), var(--bowl-main), var(--bowl-rim), var(--bowl-main), var(--bowl-edge)); box-shadow: 0 3px 0 #48331f40; transition: background .45s, border-color .45s; }
.showcase-bowl > span { position: absolute; top: -4px; right: 3px; left: 3px; height: 10px; border: 1px solid #fffefa; border-radius: 50%; background-color: #f5f1e2; background-image: radial-gradient(ellipse, #fff 0 1px, transparent 1.6px) 0 0 / 7px 5px, radial-gradient(ellipse, #d8d2c3 0 .8px, transparent 1.4px) 3px 2px / 8px 5px; }
.bowl-showcase > strong { max-width: 100%; color: #72542b; font: 600 8px var(--display); }
.bowl-showcase > small { color: #927e5d; font: 6px "Cascadia Code", Consolas, monospace; }
.farm-layout .helper-visitors { position: absolute; z-index: 6; right: 17%; bottom: 15%; left: 14%; display: flex; justify-content: space-evenly; pointer-events: none; }
.helper-sprite { display: inline-block; font-size: 20px; filter: drop-shadow(0 2px 2px #49371d77); animation: helper-party-dance 1.1s ease-in-out var(--worker-delay) infinite alternate; }
.helper-sprite.helper-danfo { font-size: 18px; animation-name: helper-ride; }
.helper-sprite.helper-guild { filter: drop-shadow(0 0 5px #d5ac58); }
.tap-target[data-luxury="5"] .tap-bowl-shell { filter: drop-shadow(0 0 11px #eed28bba); }
.tap-target[data-luxury="4"] .tap-bowl-shell { filter: drop-shadow(0 0 9px #b4ebffb0); }
.town-sign { border-color: #d8b86c; color: #fff7df; background: linear-gradient(140deg, #51323d, #805229); }
.market-boss { border-color: #dec785; box-shadow: 0 5px 18px #45391f33; }
.boss-health-track > span { background: linear-gradient(90deg, #b89849, #f1d88b); }
.prestige-button:not(:disabled):hover { filter: brightness(1.08); }
.level-card { border-color: #dfcca2; background: linear-gradient(110deg, #fffdf5, #f8f0df); }
.level-badge { color: #fff5da; background: linear-gradient(145deg, #b78a3f, #76502a); }
.level-progress { background: #eee5d0; }
.level-progress span { background: linear-gradient(90deg, #aa7833, #ead285); }
.helper-sprite.helper-aunty { position: relative; }
.helper-sprite.helper-aunty::before { position: absolute; top: -3px; left: 4px; width: 15px; height: 8px; content: ""; border: 1px solid #f4d78d; border-radius: 80% 80% 35% 35%; background: linear-gradient(130deg, #8c3562, #d2a14a); box-shadow: 0 0 4px #ffe7a0a3; }
.helper-sprite.helper-creators { filter: drop-shadow(0 0 6px #ec5594); }
.garri-wallet, .player-account { display: grid; gap: 11px; margin: 0 0 14px; padding: 14px; border: 1px solid #d8c18a; border-radius: 11px; background: linear-gradient(110deg, #fffdf7, #f7eedb); box-shadow: 0 5px 16px #4530210b; }
.wallet-heading, .account-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wallet-heading > div, .account-heading > div { display: grid; gap: 4px; }
.wallet-kicker { color: #8c6a34; font: 600 8px "Cascadia Code", Consolas, monospace; letter-spacing: .08em; }
.wallet-heading h2, .account-heading h2 { margin: 0; color: #402e28; font: 600 17px var(--display); }
.wallet-total { display: grid; justify-items: end; gap: 2px; color: #49372c; }
.wallet-total strong { font: 700 19px "Cascadia Code", Consolas, monospace; }
.wallet-total small { color: #8b765c; font-size: 8px; }
.wallet-intro { margin: 0; color: #8b765c; font-size: 9px; line-height: 1.5; }
.garri-varieties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.garri-variety { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid #e7d8b8; border-radius: 8px; color: #49372c; background: #fffefa; text-align: left; cursor: pointer; }
.garri-variety.is-selected { border-color: #c19954; box-shadow: inset 0 0 0 1px #c1995444; background: linear-gradient(120deg, #fffefa, #fbf0d8); }
.variety-icon { font-size: 20px; }
.variety-copy { min-width: 0; display: grid; gap: 3px; }
.variety-copy strong { font: 600 10px var(--display); }
.variety-copy small { color: #8b765c; font-size: 7px; line-height: 1.3; }
.variety-stock { display: grid; justify-items: end; color: #60452e; font: 600 9px "Cascadia Code", Consolas, monospace; }
.variety-stock small { color: #8b765c; font: 7px "Cascadia Code", Consolas, monospace; }
.account-access, .account-icons { display: flex; align-items: center; gap: 7px; }
.account-handle { padding: 5px 8px; border: 1px solid #e6d6b2; border-radius: 99px; color: #765834; background: #fffaf0; font: 600 9px "Cascadia Code", Consolas, monospace; }
.account-icon-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 6px; border: 1px solid #ddc898; border-radius: 50%; color: #74542f; background: #fffaf0; cursor: pointer; }
.account-icon-button:hover:not(:disabled) { border-color: #b68b4b; background: #fff3d8; }
.account-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.account-dialog { width: min(440px, calc(100% - 24px)); max-width: none; max-height: min(90vh, 560px); margin: auto; padding: 18px; border: 1px solid #d8c18a; border-radius: 12px; color: #49372c; background: #fffdf7; box-shadow: 0 18px 60px #261a1755; }
.account-dialog::backdrop { background: #241a1ac2; backdrop-filter: blur(3px); }
.account-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.account-dialog-heading h2 { margin: 0; color: #402e28; font: 600 19px var(--display); }
.account-status { margin: 0; color: #78684f; font-size: 9px; line-height: 1.45; }
.account-status.is-error { color: #a33d42; }
.account-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.account-form label, .account-transfer label { min-width: 0; display: grid; gap: 5px; color: #8b765c; font: 600 8px "Cascadia Code", Consolas, monospace; }
.account-handle-input { grid-column: 1 / -1; }
.account-form input, .account-transfer input, .account-transfer select { width: 100%; min-width: 0; padding: 8px; border: 1px solid #e0d1b1; border-radius: 6px; color: #463226; background: #fffefa; font: 500 10px "Cascadia Code", Consolas, monospace; }
.account-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.account-button { min-height: 34px; padding: 8px 12px; border: 1px solid #9e7950; border-radius: 6px; color: #64482e; background: #fffefa; font: 700 8px "Cascadia Code", Consolas, monospace; cursor: pointer; }
.account-button-primary { border-color: #774255; color: #fff4e9; background: linear-gradient(120deg, #b84962, #633550 58%, #25242a); }
.account-button:disabled { cursor: not-allowed; opacity: .55; }
.account-button:not(:disabled):hover { filter: brightness(1.08); }
.account-transfer { display: grid; grid-template-columns: 1.1fr 1fr .7fr auto auto; align-items: end; gap: 8px; }
.account-sign-out { border-color: #d9c8a6; }
.player-account [hidden] { display: none; }
.share-on-youtube { border-color: #633649; background: linear-gradient(100deg, #221e25, #64334d 65%, #24616a); }
.tap-target.is-tapping .tap-bowl-shell { animation: bowl-tap .22s ease-out; }
.bowl-showcase { border-color: #ddbd75; background: linear-gradient(145deg, #fffdf5, #f6ead2f2); }
.showcase-kicker { color: #805726; }
.showcase-bowl[data-luxury="1"] { box-shadow: 0 0 8px #fff; }
.showcase-bowl[data-luxury="2"] { box-shadow: 0 0 10px #f1cf7f; }
.showcase-bowl[data-luxury="3"] { box-shadow: 0 0 9px #90d3ad; }
.showcase-bowl[data-luxury="4"] { box-shadow: 0 0 11px #9addf7; }
.showcase-bowl[data-luxury="5"] { box-shadow: 0 0 12px #e8c175; }
.farm-layout .helper-visitors { bottom: 15%; }
.tap-target.is-tapping .tap-bowl-shell { animation: bowl-tap .22s ease-out; }
.garri-sprinkle { position: absolute; z-index: 11; top: 51%; left: 50%; width: 6px; height: 5px; border: 1px solid #fffef5; border-radius: 50%; background: #eeeadd; box-shadow: 0 0 3px #fff; pointer-events: none; animation: garri-sprinkle .62s ease-out forwards; }
.tap-target[data-luxury="0"] { --tap-glow: #b76d3a; }
.tap-target[data-luxury="1"] { --tap-glow: #92adb0; }
.tap-target[data-luxury="2"] { --tap-glow: #c99a3b; }
.tap-target[data-luxury="3"] { --tap-glow: #368566; }
.tap-target[data-luxury="4"] { --tap-glow: #76b9d9; }
.tap-target[data-luxury="5"] { --tap-glow: #82519a; }
.tap-bowl-shell::after { position: absolute; z-index: 1; top: -7px; right: 4px; left: 4px; height: 24px; content: ""; border: 2px solid #fff7da; border-radius: 50%; box-shadow: 0 0 0 2px var(--bowl-rim), 0 0 16px var(--tap-glow, #c59548); pointer-events: none; }

@keyframes bowl-tap { 45% { transform: translateY(5px) scale(.9) rotate(-2deg); } }
@keyframes garri-sprinkle { from { opacity: 1; transform: translate(-50%, 0) scale(.8); } to { opacity: 0; transform: translate(calc(-50% + var(--grain-drift)), -36px) scale(.35); } }
@keyframes helper-party-dance { from { translate: 0 0; rotate: -9deg; } to { translate: 7px -7px; rotate: 10deg; } }
@keyframes helper-ride { from { translate: -4px 0; } to { translate: 6px -3px; } }

@media (max-width: 580px) {
  .economy-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .economy-strip .resource:nth-child(4), .economy-strip .resource:nth-child(5), .economy-strip .resource:nth-child(6) { grid-column: auto; border-top: 1px solid #e9ecdf; padding-top: 8px; }
  .economy-strip .resource:nth-child(6) { border-right: 0; }
  .economy-strip .resource:nth-child(5) { grid-column: auto; }
  .bowl-showcase { bottom: 32px; left: 8px; width: 112px; }
  .tap-target { width: 148px; height: 148px; top: 56%; }
  .tap-bowl-shell { width: 124px; height: 72px; }
  .scene-caption { right: 10px; left: auto; }
  .garri-wallet, .player-account { padding: 10px; }
  .garri-varieties { grid-template-columns: 1fr; }
  .variety-copy small { font-size: 8px; }
  .account-access { gap: 5px; }
  .account-icon-button { width: 31px; height: 31px; }
  .account-dialog { padding: 14px; }
  .account-form { grid-template-columns: 1fr; }
  .account-transfer { grid-template-columns: 1fr 1fr; }
  .account-transfer .account-button { min-height: 36px; }
  .account-transfer .account-sign-out { grid-column: 1 / -1; }
}