/* YIELD - game UI kit. Wood frames, parchment panels, chunky pixel buttons. Loaded after app.css, so it wins. */
:root {
  --w1: #2b1808; --w2: #5a3716; --w3: #8c5a26; --w4: #b97d3a; --w5: #dba463;
  --p1: #fbeec2; --p2: #efd9a0; --p3: #d6b670;
  --gold: #ffd23f; --gold-d: #e39a12; --gold-dd: #8f5a06;
  --green: #79e069; --green-d: #2e9a45; --green-dd: #15602a;
  --blue: #7fd0ff; --blue-d: #2a86c8; --blue-dd: #164f86;
  --red: #e05a42; --red-d: #a3301f;
  --frame: 0 0 0 3px var(--w1), 0 0 0 6px var(--w3), 0 0 0 9px var(--w1);
  --lift: 0 12px 0 0 rgba(0, 0, 0, .22);
  /* --pix is the UI face: squared and semi-pixel, legible down to 10px. --mark is the wordmark,
     and it is deliberately the SAME face: Pixelify Sans was dropped because its "2" curls the
     wrong way and reads as a reversed "S" -- fatal when the ticker itself is $YIELD. */
  --pix: 'Oxanium', 'Space Grotesk', sans-serif;
  --mark: 'Oxanium', 'Space Grotesk', sans-serif;
}
body { font-family: 'Space Grotesk', system-ui, sans-serif; }

/* ---------- panels ---------- */
.panel {
  border: 0; margin: 0; padding: 8px 14px; gap: 10px; color: var(--w1);
  background: var(--p1);
  box-shadow: var(--frame), inset 0 3px 0 #fffbe6, inset 0 -3px 0 var(--p3), var(--lift);
}
.hud.tl { top: 18px; left: 18px; gap: 30px; }
.hud.tr { top: 14px; right: 14px; gap: 14px; }
.hud.bottom { bottom: 14px; }

/* coin plaque */
.coinbox { background: var(--w2); color: #fff6d8; padding: 6px 16px 6px 10px; box-shadow: var(--frame), inset 0 3px 0 var(--w3), inset 0 -4px 0 var(--w1), var(--lift); min-width: 170px; }
.coinbox canvas { width: 34px; height: 34px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.coinbox b { font: 400 26px var(--pix); color: var(--gold); text-shadow: 0 3px 0 var(--w1), 2px 0 0 var(--w1), -2px 0 0 var(--w1), 0 -2px 0 var(--w1); min-width: 56px; letter-spacing: .02em; }
.coinbox small { font: 400 10px var(--pix); color: #e9cf91; letter-spacing: .08em; margin-left: auto; }
.coinbox.up b { color: #b8ff9a; }
.coinbox.down b { color: #ff9a8a; }

/* level badge + xp */
.level { padding: 6px 12px 6px 6px; }
.level b { font: 400 13px var(--pix); background: var(--gold); color: var(--w1); padding: 8px 9px; min-width: 46px; text-align: center; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #fff2a8, inset 0 -3px 0 var(--gold-d); text-shadow: 0 1px 0 #fff2a8; margin-right: 4px; }
.level .e, .energy .e { font: 400 11px var(--pix); color: var(--w2); min-width: 54px; text-align: right; }
.energy { padding: 6px 12px; }
.energy .lbl { font: 400 10px var(--pix); color: var(--w2); letter-spacing: .06em; display: inline-flex; align-items: center; gap: 6px; }

/* bars */
.bar { height: 16px; width: 110px; background: var(--w1); border: 0; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 rgba(0, 0, 0, .55); padding: 0; position: relative; overflow: hidden; }
.bar i { height: 100%; background: var(--green); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .4), inset 0 -4px 0 rgba(0, 0, 0, .22); transition: width .35s ease-in-out; }
.bar.xp i { background: var(--gold); }
.bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, .28) 9px 11px); pointer-events: none; }

/* ---------- buttons ---------- */
.chip, .btn {
  border: 0; font-family: var(--pix); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
  color: #fff8dc; text-shadow: 0 2px 0 var(--w1);
  background: var(--w4);
  box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 var(--w5), inset 0 -4px 0 var(--w3), 0 6px 0 3px var(--w1);
  transition: transform .08s, filter .15s;
}
.chip { padding: 9px 12px; font-size: 10px; margin-bottom: 6px; }
.btn { padding: 13px 20px; font-size: 13px; margin-bottom: 6px; }
.btn.small { padding: 9px 12px; font-size: 10px; }
.chip:hover, .btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 var(--w5), inset 0 -4px 0 var(--w3), 0 8px 0 3px var(--w1); background: var(--w4); }
.chip:active, .btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 var(--w5), inset 0 -4px 0 var(--w3), 0 1px 0 3px var(--w1); }
.btn { background: var(--gold); color: var(--w1); text-shadow: 0 1px 0 #fff2a8; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #fff2a8, inset 0 -4px 0 var(--gold-d), 0 6px 0 3px var(--w1); }
.btn:hover:not(:disabled) { background: var(--gold); box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #fff2a8, inset 0 -4px 0 var(--gold-d), 0 8px 0 3px var(--w1); }
.btn:active:not(:disabled) { box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #fff2a8, inset 0 -4px 0 var(--gold-d), 0 1px 0 3px var(--w1); }
.btn:disabled { background: var(--p3); color: #8a7446; text-shadow: none; filter: saturate(.4); box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 var(--p2), inset 0 -4px 0 #b39a5c, 0 3px 0 3px var(--w1); cursor: not-allowed; }
#walletBtn { background: var(--gold); text-transform: none; font-size: 11px; }
#walletBtn.on { background: var(--green); color: var(--w1); text-shadow: 0 1px 0 #d8ffc9; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #d8ffc9, inset 0 -4px 0 var(--green-d), 0 6px 0 3px var(--w1); }
.chip.zoom { min-width: 40px; font-size: 18px; padding: 6px 10px; }
.chip.icon { padding: 7px 9px; }
.chip.icon.off { opacity: .55; filter: grayscale(.5); }
.chip canvas.ic { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; margin-right: 8px; margin-top: -3px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.chip.icon canvas { margin: 0; }
.link { font-family: var(--pix); font-size: 11px; color: var(--w2); text-transform: uppercase; }

/* ---------- hotbar: an inventory tray ---------- */
.hotbar { gap: 8px; padding: 10px 10px 6px; margin-bottom: 8px; background: var(--w3); box-shadow: var(--frame), inset 0 3px 0 var(--w4), inset 0 -4px 0 var(--w2), var(--lift); max-width: min(96vw, 860px); scrollbar-width: none; }
.hotbar::-webkit-scrollbar { display: none; }
.seed {
  width: 70px; padding: 18px 4px 6px; border: 0; color: #fff3cc; cursor: pointer;
  background: #3a2411; box-shadow: 0 0 0 3px var(--w1), inset 0 4px 0 rgba(0, 0, 0, .5), inset 0 -2px 0 rgba(255, 255, 255, .08);
  transition: transform .12s, box-shadow .12s, filter .2s;
}
.seed canvas { width: 46px; height: 46px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.seed b { font: 400 8px var(--pix); color: #f3dfaa; margin-top: 2px; letter-spacing: .03em; }
.seed small { font: 400 10px var(--pix); color: var(--gold); margin-top: 2px; }
.seed small::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--gold); box-shadow: 0 0 0 1px var(--w1); border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.seed .hotkey { left: 3px; top: 3px; font: 400 9px var(--pix); color: var(--w1); background: #f3dfaa; padding: 1px 4px; box-shadow: 0 0 0 2px var(--w1); }
.seed:hover:not(.locked) { transform: translateY(-4px); filter: brightness(1.15); }
.seed[aria-checked="true"] { transform: translateY(-9px); background: #6b4a18; box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px var(--w1), 0 0 16px 6px rgba(255, 210, 63, .65), inset 0 4px 0 rgba(0, 0, 0, .4); animation: selglow 1.2s ease-in-out infinite; }
@keyframes selglow { 50% { box-shadow: 0 0 0 3px #fff2a8, 0 0 0 6px var(--w1), 0 0 22px 8px rgba(255, 210, 63, .8), inset 0 4px 0 rgba(0, 0, 0, .4); } }
.seed.poor:not([aria-checked="true"]) { opacity: 1; filter: grayscale(.85) brightness(.75); }
.seed.poor small { color: #ff8a70; }
.seed.locked { opacity: 1; filter: grayscale(1) brightness(.55); }
.seed.locked b::after { content: " LV" attr(data-lv); color: #ff8a70; }
.seed.nope { animation: shake .3s; }

/* ---------- action prompt + bulk buttons ---------- */
.prompt { margin-bottom: 14px; padding: 12px 22px; border: 0; font: 400 13px var(--pix); letter-spacing: .05em; color: #fff8dc; background: var(--w2); box-shadow: var(--frame), inset 0 3px 0 var(--w3), inset 0 -4px 0 var(--w1), var(--lift); text-shadow: 0 2px 0 var(--w1); }
.prompt b { display: inline-block; color: var(--w1); background: #fff3cc; padding: 3px 8px; margin-right: 10px; text-shadow: none; box-shadow: 0 0 0 2px var(--w1), 0 4px 0 2px var(--w1), inset 0 -3px 0 var(--p3); transform: translateY(-2px); animation: keyhint 1s ease-in-out infinite; }
@keyframes keyhint { 50% { transform: translateY(1px); box-shadow: 0 0 0 2px var(--w1), 0 1px 0 2px var(--w1), inset 0 -3px 0 var(--p3); } }
.prompt.locked { background: #3a2411; color: #c9b27a; }
.prompt.reel { background: var(--red-d); animation: reelp .25s ease-in-out infinite; }
.bulk { gap: 14px; margin-bottom: 14px; }
.bulk .chip { font-size: 11px; padding: 11px 16px; margin: 0; }
#allBtn { background: var(--gold); color: var(--w1); text-shadow: 0 1px 0 #fff2a8; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #fff2a8, inset 0 -4px 0 var(--gold-d), 0 6px 0 3px var(--w1); animation: pop-in .25s ease-in-out, ready 1.1s ease-in-out infinite .3s; }
@keyframes ready { 50% { transform: translateY(-3px); } }
#plantAll { background: var(--green); color: var(--w1); text-shadow: 0 1px 0 #d8ffc9; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #d8ffc9, inset 0 -4px 0 var(--green-d), 0 6px 0 3px var(--w1); }
#waterAll { background: var(--blue); color: var(--w1); text-shadow: 0 1px 0 #e6f7ff; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #e6f7ff, inset 0 -4px 0 var(--blue-d), 0 6px 0 3px var(--w1); }

.run { width: 62px; height: 62px; font-size: 11px; right: 14px; bottom: 150px; border-radius: 0; }
.run[aria-pressed="true"] { background: var(--gold); color: var(--w1); text-shadow: 0 1px 0 #fff2a8; }

/* ---------- toasts ---------- */
.toasts { top: 84px; gap: 14px; }
.toast { border: 0; padding: 11px 20px; font: 700 14px 'Space Grotesk', sans-serif; color: var(--w1); background: var(--p1); box-shadow: var(--frame), inset 0 3px 0 #fffbe6, inset 0 -3px 0 var(--p3), var(--lift); }
.toast.win { background: var(--gold); box-shadow: var(--frame), inset 0 3px 0 #fff2a8, inset 0 -3px 0 var(--gold-d), var(--lift); }
.toast.bad { background: #ffb8a8; box-shadow: var(--frame), inset 0 3px 0 #ffd9cf, inset 0 -3px 0 var(--red), var(--lift); }

/* ---------- modals ---------- */
.modal { background: rgba(20, 10, 2, .68); }
.sheet { border: 0; padding: 26px 24px 22px; background: var(--p1); box-shadow: var(--frame), inset 0 4px 0 #fffbe6, inset 0 -4px 0 var(--p3), 0 18px 0 0 rgba(0, 0, 0, .3); max-width: 780px; width: calc(100% - 34px); }
.sheet h2 { font: 400 16px var(--pix); letter-spacing: .06em; text-transform: uppercase; color: #fff8dc; background: var(--w3); padding: 11px 16px; margin: 0 0 14px; text-shadow: 0 2px 0 var(--w1); box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 var(--w4), inset 0 -4px 0 var(--w2); }
.sheet h2.gap { margin-top: 20px; }
.x { right: 14px; top: 14px; font: 400 13px var(--pix); padding: 8px 11px; color: #fff; background: var(--red); border: 0; text-shadow: 0 2px 0 var(--red-d); box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #ff9a86, inset 0 -3px 0 var(--red-d); z-index: 2; }
.x:hover { filter: brightness(1.15); }
.lede { font-size: 15px; color: var(--w2); }
.pace { padding: 10px 14px; background: #fff8dc; box-shadow: 0 0 0 3px var(--w1); font-weight: 700; }
table.odds { border: 0; background: #fff8dc; box-shadow: 0 0 0 3px var(--w1); font-size: 13px; margin: 6px 0 14px; }
table.odds th { background: var(--w3); color: #fff8dc; font: 400 10px var(--pix); border: 0; text-shadow: 0 2px 0 var(--w1); padding: 9px 10px; }
table.odds td { border: 0; border-top: 2px solid var(--p2); padding: 8px 10px; }
table.odds tr:nth-child(even) td { background: #fdf3cf; }
.rules { padding-left: 20px; } .rules li { margin: 4px 0; }
.cash, .ca, .shopcard, .seedrow { border: 0; background: #fff8dc; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #fffdf0, inset 0 -3px 0 var(--p2); }
.cash { padding: 14px; margin-top: 18px; }
.cash .lbl { font: 400 12px var(--pix); color: var(--w2); }
.amt { border: 0; background: #fff; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 rgba(0, 0, 0, .12); font: 700 16px 'Space Grotesk', sans-serif; padding: 10px 12px; }
.seedrow { padding: 10px 12px; }
.seedrow b, .shopcard h3 { font: 400 13px var(--pix); text-transform: uppercase; }
.tier { border: 0; background: var(--gold); box-shadow: 0 0 0 2px var(--w1); font: 400 10px var(--pix); padding: 3px 7px; }
.feed li { border-top: 2px dashed var(--p3); padding: 7px 0; }

/* ---------- title screen ---------- */
.title { background: radial-gradient(ellipse at center, rgba(20, 40, 24, .15) 0, rgba(12, 20, 12, .72) 100%); }
.title .card { border: 0; max-width: 460px; padding: 26px 26px 20px; gap: 10px; background: var(--p1); box-shadow: var(--frame), inset 0 4px 0 #fffbe6, inset 0 -4px 0 var(--p3), 0 18px 0 0 rgba(0, 0, 0, .3); animation: cardin .5s ease-in-out; }
@keyframes cardin { from { transform: translateY(40px) scale(.94); opacity: 0; } }
.title img { width: 150px; height: 150px; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .25)); animation: float 2.4s ease-in-out infinite alternate; }
@keyframes float { to { transform: translateY(-8px); } }
.title h1 { font: 400 46px var(--mark); color: var(--gold); letter-spacing: .05em; text-shadow: 0 5px 0 var(--w1), 3px 0 0 var(--w1), -3px 0 0 var(--w1), 0 -3px 0 var(--w1), 3px 5px 0 var(--w1), -3px 5px 0 var(--w1), 3px -3px 0 var(--w1), -3px -3px 0 var(--w1); margin: 4px 0 8px; }
.title p { color: var(--w2); font-size: 14px; }
.title .entry { padding: 12px; background: #fff8dc; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #fffdf0; gap: 8px; font-size: 13px; border: 0; }
.title .entry li { display: flex; align-items: center; gap: 10px; }
.title .entry b { flex: none; margin: 0; padding: 5px 8px; font: 400 9px var(--pix); color: var(--w1); box-shadow: 0 0 0 2px var(--w1); }
.title .entry li:nth-child(1) b { background: var(--green); }
.title .entry li:nth-child(2) b { background: var(--gold); }
.title .entry li:nth-child(3) b { background: var(--blue); }
#gateBtn { font-size: 15px; padding: 16px 28px; background: var(--green); color: var(--w1); text-shadow: 0 1px 0 #d8ffc9; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #d8ffc9, inset 0 -4px 0 var(--green-d), 0 6px 0 3px var(--w1); animation: playpulse 1.1s ease-in-out infinite; }
#gateBtn:hover:not(:disabled) { background: var(--green); box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #d8ffc9, inset 0 -4px 0 var(--green-d), 0 8px 0 3px var(--w1); }
@keyframes playpulse { 50% { transform: scale(1.04); } }
.err { font-family: var(--pix); font-size: 10px; }
.online { font: 400 10px var(--pix); color: var(--w2); }
.online::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--green-d); border-radius: 50%; margin-right: 6px; box-shadow: 0 0 0 2px var(--w1); }

.banner { font-family: var(--pix); }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .hud.tl { top: 64px; left: 12px; gap: 14px; }
  .hud.tr { top: 10px; right: 10px; gap: 10px; }
  .coinbox { min-width: 0; padding: 4px 12px 4px 8px; } .coinbox b { font-size: 20px; min-width: 40px; } .coinbox small { display: none; } .coinbox canvas { width: 28px; height: 28px; }
  .bar { width: 84px; }
  .chip { padding: 8px 9px; font-size: 9px; } .chip canvas.ic { width: 18px; height: 18px; margin-right: 5px; }
  .seed { width: 58px; padding-top: 16px; } .seed canvas { width: 36px; height: 36px; }
  .prompt { font-size: 11px; padding: 10px 14px; }
  .run { bottom: 170px; right: 12px; }
  .title h1 { font-size: 36px; }
  .sheet { padding: 22px 14px 16px; }
}
@media (max-height: 640px) { .title .card { padding: 14px; } .title img { width: 90px; height: 90px; } .title h1 { font-size: 32px; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .title .card, .title img, #gateBtn, #allBtn, .prompt b, .seed[aria-checked="true"] { animation: none; } }

/* ---------- the Bag: collection of fish and crops, by rarity ---------- */
.bagstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; }
.bagstats div { background: #fff8dc; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #fffdf0, inset 0 -3px 0 var(--p2); padding: 8px 10px; text-align: center; }
.bagstats b { display: block; font: 400 18px var(--pix); color: var(--w1); }
.bagstats span { font: 400 9px var(--pix); color: var(--w2); text-transform: uppercase; letter-spacing: .05em; }
.tabs { display: flex; gap: 10px; margin: 0 0 12px; }
.tab { font: 400 11px var(--pix); text-transform: uppercase; padding: 10px 14px; cursor: pointer; color: var(--w2); background: var(--p2); border: 0; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 var(--p1), inset 0 -3px 0 var(--p3); }
.tab.on { background: var(--gold); color: var(--w1); box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #fff2a8, inset 0 -3px 0 var(--gold-d); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; font: 400 9px var(--pix); text-transform: uppercase; color: var(--w2); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 2px var(--w1); }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.item { position: relative; text-align: center; padding: 12px 6px 8px; background: #3a2411; color: #fff3cc; box-shadow: 0 0 0 3px var(--w1), inset 0 4px 0 rgba(0, 0, 0, .5); }
.item canvas { width: 56px; height: 56px; image-rendering: pixelated; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.item b { display: block; font: 400 10px var(--pix); margin-top: 4px; }
.item .rar { display: inline-block; margin-top: 4px; padding: 2px 6px; font: 400 8px var(--pix); text-transform: uppercase; color: var(--w1); box-shadow: 0 0 0 2px var(--w1); }
.item .cnt { position: absolute; right: 6px; top: 6px; font: 400 10px var(--pix); color: var(--gold); text-shadow: 0 2px 0 var(--w1); }
.item small { display: block; margin-top: 3px; font-size: 10px; color: #d6c08a; }
.item.unk canvas { filter: brightness(0) opacity(.55); }
.item.unk b { color: #8a7a5c; }
.item.unk .rar { opacity: .5; }
.item.legendary:not(.unk), .item.epic:not(.unk) { animation: itemglow 1.6s ease-in-out infinite; }
@keyframes itemglow { 50% { box-shadow: 0 0 0 3px var(--w1), 0 0 14px 4px var(--glow), inset 0 4px 0 rgba(0, 0, 0, .5); } }

/* ---------- the seed shop ---------- */
.seedbal { margin: 0 0 12px; padding: 8px 12px; background: #3a2411; color: var(--gold); font: 400 13px var(--pix); box-shadow: 0 0 0 3px var(--w1); text-align: center; }
.seedrow { grid-template-columns: 56px 1fr; align-items: center; gap: 10px 14px; padding: 12px; }
.seedrow.sel { box-shadow: 0 0 0 3px var(--w1), 0 0 0 6px var(--gold); }
.seedrow .info small { display: block; color: var(--w2); margin-top: 2px; }
.seedrow .own { display: inline-block; margin-top: 4px; padding: 2px 8px; font: 400 10px var(--pix); background: var(--w2); color: #fff3cc; }
.seedrow .buys { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.seedrow .buys .btn { margin: 0 4px 6px 0; font-size: 10px; }
.seedrow .buys .use { background: var(--green); margin-left: auto; }
.seed small { color: var(--gold); }
#shopBtn { background: var(--green); color: var(--w1); text-shadow: 0 1px 0 #d8ffc9; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #d8ffc9, inset 0 -4px 0 var(--green-d), 0 6px 0 3px var(--w1); }
.seed small::before { display: none; }

/* conversion queue */
.wd { margin-top: 12px; }
.wd li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 2px dashed var(--p3); font-size: 13px; }
.wd li:first-child { border-top: 0; }
.wd b { font: 400 12px var(--pix); }
.wd .sub { margin: 0 0 0 auto; font-size: 11px; color: var(--w2); }
.wd a { margin-left: auto; font: 400 10px var(--pix); color: var(--blue-dd); }
.wtag { padding: 3px 8px; font: 400 9px var(--pix); text-transform: uppercase; box-shadow: 0 0 0 2px var(--w1); }
.wtag.pending { background: var(--gold); color: var(--w1); animation: itemglow 1.6s ease-in-out infinite; --glow: #ffd23f; }
.wtag.paid { background: var(--green); color: var(--w1); }
.wtag.rejected { background: var(--p3); color: var(--w1); }

/* ---------- compact bottom bar: more of the world on screen ---------- */
.hud.bottom { bottom: 6px; }
.hotbar { gap: 6px; padding: 7px 8px 5px; margin-bottom: 4px; box-shadow: 0 0 0 3px var(--w1), 0 0 0 5px var(--w3), 0 0 0 8px var(--w1), inset 0 3px 0 var(--w4), inset 0 -3px 0 var(--w2), 0 8px 0 0 rgba(0, 0, 0, .22); }
.seed { width: 58px; padding: 15px 3px 4px; }
.seed canvas { width: 36px; height: 36px; }
.seed b { font-size: 7px; margin-top: 1px; }
.seed small { font-size: 9px; margin-top: 1px; }
.seed .hotkey { font-size: 8px; padding: 1px 3px; }
.seed[aria-checked="true"] { transform: translateY(-5px); }
.seed:hover:not(.locked) { transform: translateY(-3px); }
.prompt { margin-bottom: 10px; padding: 9px 18px; font-size: 12px; }
.bulk { margin-bottom: 10px; gap: 12px; }
.bulk .chip { padding: 9px 14px; font-size: 10px; }

/* ---------- the Help panel ---------- */
.keys h3 { margin: 14px 0 8px; font: 400 12px var(--pix); text-transform: uppercase; color: var(--w2); letter-spacing: .06em; }
.keys h3:first-child { margin-top: 0; }
.keys dl { margin: 0; display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 8px 16px; align-items: start; }
.keys dt { white-space: nowrap; }
.keys dd { margin: 0; font-size: 14px; }
kbd { display: inline-block; min-width: 24px; padding: 2px 7px; margin: 0 3px 3px 0; text-align: center; font: 400 11px var(--pix); color: var(--w1); background: #fff3cc; box-shadow: 0 0 0 2px var(--w1), 0 3px 0 2px var(--w1), inset 0 -3px 0 var(--p3); }
@media (max-width: 720px) { .keys dl { grid-template-columns: 1fr; gap: 2px; } .keys dd { margin-bottom: 10px; } }

/* close button sits inside the title bar, on its right end */
.sheet .x { top: 33px; right: 34px; padding: 6px 10px; font-size: 12px; line-height: 1.4; }
.sheet h2:first-of-type { padding-right: 64px; }
@media (max-width: 720px) { .sheet .x { top: 29px; right: 22px; } }

/* attention pulses glow instead of moving, so a button you are about to click never slides out from under the pointer */
@keyframes playpulse { 50% { filter: brightness(1.18); box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #d8ffc9, inset 0 -4px 0 var(--green-d), 0 6px 0 3px var(--w1), 0 0 18px 6px rgba(121, 224, 105, .65); } }
@keyframes ready { 50% { filter: brightness(1.15); box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #fff2a8, inset 0 -4px 0 var(--gold-d), 0 6px 0 3px var(--w1), 0 0 16px 5px rgba(255, 210, 63, .7); } }
#gateBtn { animation-duration: 1.6s; }
#allBtn { animation: pop-in .25s ease-out, ready 1.4s ease-in-out infinite .3s; }

/* a toast never covers the panel you are reading */
body:has(.modal:not([hidden])) .toasts { top: auto; bottom: 18px; }
.sheet.narrow { max-width: 520px; }
.sheet .tier { color: var(--w1); }
.feed li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* phone: the header is icons only, one row; zoom is a pinch */
@media (max-width: 720px) {
  .hud.tr { flex-wrap: nowrap; gap: 6px; }
  .hud.tr .chip span { display: none; }
  .hud.tr .chip canvas.ic { margin: 0; width: 20px; height: 20px; }
  .hud.tr .chip { padding: 7px 8px; display: inline-flex !important; }
  .hud.tr .chip.zoom, .hud.tr #muteBtn { display: none !important; }
  .hud.tr .chip.icon canvas { width: 20px; height: 20px; }
  #walletBtn { font-size: 9px; padding: 8px 8px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hud.tl { top: 62px; }
}
.run.away { display: none !important; }

/* ---------- the Decor shop ---------- */
.items.decor { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.items.decor .item { padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.items.decor .item canvas { width: 72px; height: 72px; }
.items.decor .item small { min-height: 2.6em; color: #e9d7a6; font-size: 12px; line-height: 1.3; }
.items.decor .item .btn { margin-top: 6px; }
.items.decor .item.owned { box-shadow: 0 0 0 3px var(--w1), 0 0 0 6px var(--green), inset 0 4px 0 rgba(0, 0, 0, .5); }
#decoBtn { background: #c9a2f2; color: var(--w1); text-shadow: 0 1px 0 #f1e4ff; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #f1e4ff, inset 0 -4px 0 #8a5cc4, 0 6px 0 3px var(--w1); }

/* ---------- readable type: Oxanium (--pix) carries every label, button, table header and the
   wordmark, down to 10px. Silkscreen was unreadable below ~14px, and Pixelify Sans was dropped for
   a reversed-looking "2" -- so the site now loads just Oxanium + Space Grotesk. ---------- */
.chip, .btn, .prompt, .seed b, .seed small, .tab, .tier, .wtag, .legend, .online, .err, .link, .lbl,
.bagstats span, .item b, .item .rar, .item .cnt, .seedrow .own, .seedbal, kbd, .keys h3, .cash .lbl, .level b, .level .e, .energy .e, .energy .lbl, .coinbox small, table.odds th {
  font-family: var(--pix); font-weight: 600; letter-spacing: .02em;
}
.chip { font-size: 13px; }
.btn { font-size: 15px; }
.btn.small { font-size: 13px; }
.prompt { font-size: 15px; }
.bulk .chip { font-size: 13px; }
.seed b { font-size: 11px; text-transform: none; }
.seed small { font-size: 12px; }
.seed .hotkey { font-size: 11px; }
.level b, .level .e, .energy .e { font-size: 13px; }
.energy .lbl, .coinbox small { font-size: 12px; }
.coinbox b { font-family: 'Oxanium', monospace; }
.tab, .legend, .tier, .wtag, .item .rar, .seedrow .own { font-size: 12px; }
.item b, .item .cnt, .bagstats span, .online, .err, .link { font-size: 13px; }
.bagstats b { font-size: 20px; }
.seedbal { font-size: 15px; }
.seedrow b, .shopcard h3 { font: 600 16px var(--pix); }
.keys h3 { font-size: 14px; }
kbd { font-size: 13px; }
table.odds th { font-size: 12px; }
.sheet h2 { font-size: 17px; }
.lede, .seedrow .info small, .feed, .rules, .keys dd { font-size: 15px; color: #3a2410; }
.tip, .toast { font-size: 15px; }

/* ---------- custom scrollbars: a wooden rail and a gold handle, everywhere ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--gold-d) var(--p2); }
::-webkit-scrollbar { width: 14px; height: 12px; }
::-webkit-scrollbar-track { background: var(--p2); box-shadow: inset 3px 0 0 var(--w1), inset -3px 0 0 var(--w1), inset 0 3px 0 var(--w1), inset 0 -3px 0 var(--w1); }
::-webkit-scrollbar-thumb { background: var(--gold); box-shadow: inset 0 0 0 3px var(--w1), inset 0 6px 0 #fff2a8, inset 0 -6px 0 var(--gold-d); min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background: #ffe066; }
::-webkit-scrollbar-button { display: none; height: 0; }
::-webkit-scrollbar-corner { background: var(--p2); }
.hotbar::-webkit-scrollbar { height: 8px; display: block; }
.hotbar { scrollbar-width: thin; }

/* ---------- corners: zoom bottom-left, help bottom-right, the bag beside the farm buttons ---------- */
.hud.corner { bottom: 16px; gap: 10px; align-items: flex-end; }
.hud.corner.bl { left: 16px; }
.hud.corner.br { right: 16px; }
.hud.corner .chip { margin: 0 0 6px; }
.hud.corner .chip.zoom { min-width: 46px; font-size: 22px; padding: 6px 12px; }
#bagBtn { background: var(--w4); }
#bagBtn canvas.ic { margin-right: 8px; }
@media (max-width: 720px) {
  .hud.corner.bl { display: none; }
  .hud.corner.br { bottom: auto; top: 62px; right: 10px; }
  .hud.corner.br .chip span { display: none; }
  .hud.corner.br .chip canvas.ic { margin: 0; }
  .bulk #bagBtn span { display: none; }
  .bulk #bagBtn canvas.ic { margin: 0; }
}
@media (max-width: 720px) { .run { bottom: 270px !important; right: 12px; } }

/* ---------- phones held sideways (and any short window): the whole HUD shrinks to the corners so the farm shows ---------- */
@media (max-height: 560px) {
  .hud.tl { top: 6px; left: 6px; gap: 14px; transform: scale(.66); transform-origin: top left; }
  .hud.tr { top: 6px; right: 6px; gap: 8px; transform: scale(.72); transform-origin: top right; flex-wrap: nowrap; }
  .hud.tr .chip span { display: none; }
  .hud.tr .chip canvas.ic { margin: 0; }
  .hud.bottom { bottom: 2px; transform: scale(.68); transform-origin: bottom center; }
  .hud.corner { bottom: 6px; transform: scale(.72); }
  .hud.corner.bl { transform-origin: bottom left; left: 6px; }
  .hud.corner.br { transform-origin: bottom right; right: 6px; }
  .hud.corner .chip span { display: none; }
  .hud.corner .chip canvas.ic { margin: 0; }
  .bulk #bagBtn span { display: none; }
  .bulk #bagBtn canvas.ic { margin: 0; }
  .run { width: 52px !important; height: 52px !important; font-size: 10px; bottom: 70px !important; right: 8px; }
  .toasts { top: 8px; transform: translateX(-50%) scale(.8); }
  .sheet { max-height: 96vh; padding: 16px 16px 12px; }
  .title .card { transform: scale(.8); }
}
@media (max-height: 560px) and (pointer: coarse) { .hud.corner.bl { display: none; } }
@media (max-height: 420px) {
  .hud.tl { transform: scale(.55); }
  .hud.bottom { transform: scale(.58); }
  .hud.tr { transform: scale(.62); }
  .title .card { transform: scale(.66); }
}

/* ---------- notifications sit on the right, stacked under the header ---------- */
.toasts { left: auto !important; right: 16px; top: 78px; transform: none !important; justify-items: end; max-width: min(380px, calc(100vw - 32px)); }
.toast { text-align: left; animation: slidein .25s ease-out; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
body:has(.modal:not([hidden])) .toasts { top: auto; bottom: 18px; }
@media (max-width: 720px) { .toasts { top: auto; bottom: 230px; right: 10px; } }
@media (max-height: 560px) { .toasts { top: 52px; right: 8px; max-width: 300px; } .toast { font-size: 13px; padding: 7px 12px; } }

/* ---------- the starter to-do list ---------- */
.quests { flex-direction: column; align-items: stretch; padding: 8px 12px 10px; width: 290px; gap: 6px; }
.qhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 2px 0; border: 0; background: none; cursor: pointer; font: 600 14px var(--pix); color: var(--w1); text-transform: uppercase; letter-spacing: .03em; }
.qhead span { font-size: 13px; padding: 2px 8px; background: var(--gold); box-shadow: 0 0 0 2px var(--w1); }
.qhead::after { content: '\25BE'; font-size: 13px; margin-left: 4px; }
.quests.closed .qhead::after { content: '\25B8'; }
.quests.closed ol { display: none; }
.quests ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.quests li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.3; color: var(--w2); }
.quests li i { flex: none; width: 13px; height: 13px; margin-top: 2px; background: #fff; box-shadow: 0 0 0 2px var(--w1); }
.quests li.ok { color: #8a7a5c; text-decoration: line-through; }
.quests li.ok i { background: var(--green); box-shadow: 0 0 0 2px var(--w1), inset 0 0 0 3px var(--green), inset 0 0 0 7px #fff; }
.quests li.next { color: var(--w1); font-weight: 700; }
.quests li.next i { background: var(--gold); animation: itemglow 1.6s ease-in-out infinite; --glow: #ffd23f; }
@media (max-width: 720px) { .quests { width: 240px; } }

/* ---------- chat ---------- */
.chatbar { position: fixed; left: 50%; bottom: 210px; transform: translateX(-50%); z-index: 15; display: flex; gap: 10px; width: min(620px, calc(100vw - 24px)); padding: 10px; background: var(--p1); box-shadow: var(--frame), var(--lift); }
.chatbar input { flex: 1; min-width: 0; border: 0; padding: 10px 12px; font: 600 15px 'Space Grotesk', sans-serif; color: var(--w1); background: #fff; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 rgba(0, 0, 0, .1); }
.chatbar .btn { margin: 0; }
.chatlog { position: fixed; left: 16px; bottom: 74px; z-index: 9; width: min(360px, calc(100vw - 32px)); display: grid; gap: 4px; pointer-events: none; }
.cl { font: 600 13px 'Space Grotesk', sans-serif; color: #fff8dc; background: rgba(43, 24, 8, .78); padding: 5px 10px; box-shadow: 0 0 0 2px var(--w1); transition: opacity .8s; word-break: break-word; }
.cl b { font: 600 13px var(--pix); color: var(--gold); }
.cl.me b { color: var(--green); }
.cl.old { opacity: 0; }
#chatBtn { position: fixed; left: 16px; bottom: 74px; z-index: 11; }
#chatBtn:not([hidden]) ~ .chatlog, .chatlog { bottom: 128px; }
.namerow { display: flex; gap: 12px; align-items: center; margin: 6px 0; }
.namerow .amt { margin: 0; }
.namerow .btn { margin: 0; }
#nameMsg.bad { color: var(--red-d); font-weight: 700; }
#nameMsg.ok { color: var(--green-dd); font-weight: 700; }
.btn.out { margin-top: 16px; background: var(--p3); }
#walletBtn { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .chatbar { bottom: 290px; } #chatBtn { bottom: auto; top: 112px; left: auto; right: 10px; } #chatBtn span { display: none; } #chatBtn canvas.ic { margin: 0; } .chatlog { bottom: 230px; left: 10px; } }
@media (max-height: 560px) { .chatbar { bottom: 120px; } #chatBtn { bottom: 52px; left: 8px; transform: scale(.75); transform-origin: bottom left; } .chatlog { bottom: 96px; width: 300px; } .cl { font-size: 11px; } }

.tp { background: #9fe3ff; color: var(--w1); text-shadow: 0 1px 0 #effbff; box-shadow: 0 0 0 3px var(--w1), inset 0 3px 0 #effbff, inset 0 -4px 0 #4aa8d4, 0 6px 0 3px var(--w1); }
.tp:disabled { opacity: .5; }

.chatbar.pop { animation: chatpop .14s ease-out; }
@keyframes chatpop { from { transform: translateX(-50%) translateY(14px) scale(.96); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
#chatBtn.on { filter: brightness(1.15); box-shadow: 0 0 0 3px var(--gold, #ffc21a), var(--frame, none); }
.chatbar .chatx { background: var(--p3, #d9c9a3); min-width: 38px; }
@media (prefers-reduced-motion: reduce) { .chatbar.pop { animation: none; } }

.btn.working, .chip.working { opacity: .75; cursor: progress; filter: saturate(.7); }
.btn.working::after { content: ''; display: inline-block; width: .7em; height: .7em; margin-left: .5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.1em; animation: wspin .6s linear infinite; }
@keyframes wspin { to { transform: rotate(360deg); } }