/* YIELD - the game fills the window; the UI is flat pixel panels on top. No gradients. */
:root {
  --sky: #cbe8f8; --grass: #5fbf4a; --ink: #17402a; --ink-2: #2f6a45; --cream: #fff6dc; --cream-d: #f1e2b6;
  --wood: #8a5a2b; --wood-d: #4b2d14; --gold: #ffc21a; --gold-d: #c98a0a; --red: #c4462f; --shadow: 3px 3px 0 var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #3a8ecb; color: var(--ink); font: 15px/1.45 'Space Grotesk', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
h1 { font-family: 'Oxanium', 'Space Grotesk', sans-serif; }
h2, .btn, .chip, .lbl, .panel b, .prompt, .hotkey { font-family: 'Oxanium', 'Space Grotesk', sans-serif; }
[hidden] { display: none !important; }
#world { position: fixed; inset: 0; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; cursor: pointer; }

.hud { position: fixed; z-index: 10; display: flex; gap: 8px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.tl { top: 10px; left: 10px; flex-direction: column; align-items: flex-start; }
.tr { top: 10px; right: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 20px); }
.bottom { left: 0; right: 0; bottom: 10px; flex-direction: column; align-items: center; }

.panel { background: var(--cream); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
.coinbox b { font-size: 22px; min-width: 48px; }
.coinbox small { font-size: 12px; text-transform: uppercase; color: var(--ink-2); }
.coinbox canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.coinbox.pop { animation: pop .18s ease-in-out; }
@keyframes pop { 50% { transform: translateY(-3px) scale(1.06); } }
.level b { font-size: 14px; min-width: 40px; }
.bar.xp i { background: var(--gold); }
.bar.xp { width: 96px; }
.seed.locked { opacity: .55; }
.seed.locked b::after { content: " (LV" attr(data-lv) ")"; }
.prompt.locked { background: #4b2d14; }
.energy .lbl { font-size: 11px; text-transform: uppercase; }
.energy .e { font: 700 12px 'Oxanium', monospace; min-width: 42px; text-align: right; }
.bar { width: 96px; height: 12px; background: #fff; border: 2px solid var(--ink); }
.bar i { display: block; height: 100%; width: 0; background: var(--grass); }

.btn { font-size: 13px; font-weight: 700; padding: 11px 16px; color: var(--ink); background: var(--gold); border: 3px solid var(--ink); box-shadow: var(--shadow); cursor: pointer; text-transform: uppercase; letter-spacing: .03em; }
.btn:hover:not(:disabled) { background: #ffd54d; }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { background: var(--cream-d); color: #7a7a5c; cursor: not-allowed; box-shadow: 2px 2px 0 var(--ink); }
.btn.small { padding: 7px 10px; font-size: 11px; }
#walletBtn.on { text-transform: none; }
.chip { font-size: 11px; font-weight: 700; padding: 7px 9px; text-decoration: none; color: var(--ink); background: var(--cream); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); text-transform: uppercase; cursor: pointer; }
.chip:hover { background: var(--grass); }
.link { background: none; border: 0; color: var(--ink); font: inherit; text-decoration: underline; cursor: pointer; padding: 6px; }

.hotbar { display: flex; gap: 6px; }
.seed { position: relative; width: 74px; padding: 6px 4px 4px; text-align: center; font: inherit; color: var(--ink); background: var(--cream); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.seed canvas { display: block; margin: 0 auto 2px; width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.seed b { display: block; font: 700 10px 'Oxanium', monospace; text-transform: uppercase; }
.seed small { display: block; font-size: 10px; color: var(--ink-2); }
.seed .hotkey { position: absolute; left: 2px; top: 0; font-size: 10px; color: var(--ink-2); }
.seed[aria-checked="true"] { background: var(--gold); transform: translateY(-4px); }
.prompt { margin-bottom: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--cream); background: var(--ink); border: 3px solid var(--cream); box-shadow: 0 0 0 3px var(--ink); cursor: pointer; }
.prompt b { color: var(--gold); }
.tip { margin-top: 8px; font-size: 12px; color: #fff; text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink); }

.title { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(23, 64, 42, .35); }
.title .card { max-width: 420px; width: 100%; text-align: center; background: var(--cream); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 22px 22px 16px; display: grid; gap: 8px; justify-items: center; }
.title img { image-rendering: pixelated; width: 140px; height: 140px; }
.title h1 { margin: 0; font-size: 34px; }
.title p { margin: 0; }
.err { color: var(--red); font-weight: 700; min-height: 1.3em; }
.online { font-size: 12px; color: var(--ink-2); }

.modal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(23, 64, 42, .55); }
.sheet { position: relative; width: 100%; max-width: 760px; max-height: 92vh; overflow: auto; background: var(--cream); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 18px; }
.sheet h2 { font-size: 20px; margin: 0 0 6px; }
.sheet h2.gap { margin-top: 14px; }
.x { position: absolute; right: 8px; top: 8px; font: 700 13px 'Oxanium', monospace; padding: 4px 8px; background: var(--gold); border: 3px solid var(--ink); cursor: pointer; }
.lede { margin: 0 0 10px; }
.scroll { overflow-x: auto; }
table.odds { width: 100%; border-collapse: collapse; background: #fff; border: 3px solid var(--ink); font-size: 13px; }
table.odds th, table.odds td { padding: 6px 8px; border: 2px solid var(--ink); text-align: right; white-space: nowrap; }
table.odds th:first-child, table.odds td:first-child { text-align: left; }
table.odds th { font-family: 'Oxanium', monospace; font-size: 11px; text-transform: uppercase; background: var(--grass); }
.pace { margin: 10px 0 14px; font-weight: 700; }
.rules { margin: 0 0 8px; padding-left: 22px; }
.cash { margin-top: 12px; padding: 10px; border: 3px solid var(--ink); background: #fff; }
.row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.lbl { font-size: 12px; text-transform: uppercase; }
.sub { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.wd { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.ca { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 3px solid var(--ink); background: #fff; padding: 8px 10px; }
.ca span { font: 700 12px 'Oxanium', monospace; }
.ca code { font-size: 12px; word-break: break-all; flex: 1; min-width: 160px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feed { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.feed li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 2px dashed var(--cream-d); }
.feed li:first-child { border-top: 0; }
.feed .empty { color: var(--ink-2); }
.tier { font: 700 11px 'Oxanium', monospace; padding: 1px 6px; border: 2px solid var(--ink); background: #fff; }

.toasts { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); display: grid; gap: 6px; z-index: 40; pointer-events: none; }
.toast { background: var(--cream); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 8px 14px; font-weight: 700; text-align: center; animation: drop .2s ease-in-out; }
.toast.win { background: var(--gold); }
.toast.bad { background: #ffd9cf; }
@keyframes drop { from { transform: translateY(-10px); opacity: 0; } }

@media (max-width: 720px) {
  .cols { grid-template-columns: 1fr; }
  .chip:not(#boardBtn):not(#infoBtn):not(#allBtn):not(#bagBtn):not(#plantAll):not(#waterAll):not(#shopBtn):not(#helpBtn):not(#runBtn):not(#decoBtn):not(#tpMarket):not(#tpFarm) { display: none; }
  .tl { top: 52px; }
  .coinbox b { font-size: 18px; min-width: 32px; }
  .tr { gap: 6px; }
  .seed { width: 62px; }
  .tip { display: none; }
  .energy .lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) { .coinbox.pop, .toast { animation: none; } }

.chip.zoom { min-width: 34px; text-align: center; font-size: 16px; padding: 4px 8px; }

.shopgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.shopcard { border: 3px solid var(--ink); background: #fff; padding: 12px; display: grid; gap: 8px; }
.shopcard h3 { margin: 0; }
.shopcard p { margin: 0; font-size: 14px; }
.prompt.reel { background: #c4462f; animation: reelp .25s ease-in-out infinite; }
@keyframes reelp { 50% { transform: translateY(-3px); } }
@media (max-width: 720px) { .shopgrid { grid-template-columns: 1fr; } }

.basket b { font-size: 18px; min-width: 22px; }
.basket small { font-size: 12px; color: var(--ink-2); }
.basket.full { background: #ffe57a; }
.basket.pop { animation: pop .18s ease-in-out; }
.seedlist { display: grid; gap: 10px; margin-top: 10px; }
.seedrow { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; border: 3px solid var(--ink); background: #fff; padding: 8px 10px; }
.seedrow canvas { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.seedrow b { font: 700 14px 'Oxanium', monospace; display: block; }
.seedrow small { color: var(--ink-2); }
.seedrow.locked { opacity: .55; }

/* ten seeds: the hotbar scrolls sideways on a narrow screen instead of overflowing */
.hotbar { max-width: calc(100vw - 12px); overflow-x: auto; padding: 6px 4px 2px; }
.seed { width: 66px; flex: none; }
@media (max-width: 760px) { .seed { width: 54px; padding: 4px 2px 3px; } .seed canvas { width: 34px; height: 34px; } }
.amt { display: block; width: 100%; margin: 8px 0; padding: 8px 10px; font: 700 14px 'Space Grotesk', sans-serif; border: 3px solid var(--ink); background: var(--cream); color: var(--ink); }

/* title card: entry rules, CA, harvest-all */
.title .entry { list-style: none; margin: 4px 0 6px; padding: 8px 10px; width: 100%; text-align: left; border: 3px solid var(--ink); background: #fff; display: grid; gap: 4px; font-size: 13px; }
.title .entry b { font-family: 'Oxanium', monospace; font-size: 11px; text-transform: uppercase; margin-right: 6px; color: var(--ink); }
.title .ca { margin-top: 4px; width: 100%; }
#allBtn { margin-bottom: 8px; background: var(--gold); box-shadow: 3px 3px 0 var(--ink); font-size: 13px; padding: 9px 14px; }
@media (max-height: 640px) { .title .card { padding: 14px; } .title img { width: 96px; height: 96px; } }

/* juice */
.bulk { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.bulk .chip { margin: 0; font-size: 13px; padding: 9px 14px; animation: pop-in .25s ease-in-out; }
#plantAll { background: #c9f0a8; } #waterAll { background: #bfe6ff; }
.bulk .chip:hover, .chip:hover { transform: translateY(-2px); box-shadow: 2px 4px 0 var(--ink); }
.chip:active, .btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } }
.coinbox { transition: background .2s; }
.coinbox.up { animation: pop .25s ease-in-out, glowup .7s; } .coinbox.down { animation: shake .25s; }
@keyframes glowup { 0% { background: #c9f0a8; } 100% { background: var(--cream); } }
@keyframes shake { 20% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
.seed { transition: transform .12s, opacity .2s; }
.seed:hover:not(.locked) { transform: translateY(-4px); }
.seed[aria-checked="true"] { transform: translateY(-8px); }
.seed.poor:not([aria-checked="true"]) { opacity: .55; }
.seed.nope { animation: shake .3s; }
.toast { animation: drop .2s ease-in-out; }
.sheet { animation: pop-in .2s ease-in-out; }
.banner { position: fixed; left: 0; right: 0; top: 28%; text-align: center; z-index: 40; pointer-events: none; font: 700 clamp(36px, 9vw, 84px) 'Oxanium', sans-serif; color: #ffd23f; text-shadow: 4px 4px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); animation: bannerin 2.2s both; }
@keyframes bannerin { 0% { transform: scale(.3); opacity: 0; } 15% { transform: scale(1.15); opacity: 1; } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .banner { animation: none; } .bulk .chip, .sheet { animation: none; } }

/* run toggle for touch screens */
.run { display: none; position: fixed; right: 10px; bottom: 118px; z-index: 11; width: 64px; height: 64px; border-radius: 50%; font-size: 13px; }
.run[aria-pressed="true"] { background: var(--gold); transform: translateY(2px); box-shadow: 0 0 0 3px #fff3a0, 1px 1px 0 var(--ink); }
@media (pointer: coarse), (max-width: 720px) { .run:not([hidden]) { display: block; } }

/* header logos */
.chip.icon { display: inline-flex; align-items: center; justify-content: center; padding: 5px 7px; }
.chip.icon canvas { width: 24px; height: 24px; image-rendering: pixelated; display: block; }
.chip.icon.off { opacity: .45; cursor: default; pointer-events: auto; }
@media (max-width: 720px) { .chip.icon { display: inline-flex !important; } }

.labels { position: fixed; left: 0; top: 0; pointer-events: none; }