:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #fffceb; background: #80963f; }
* { box-sizing: border-box; }
html, body, main { width: 100%; height: 100%; min-height: 100dvh; margin: 0; overflow: hidden; }
body { overscroll-behavior: none; }
#game { display: block; width: 100%; height: 100%; touch-action: none; }
.hud { position: fixed; top: 0; left: 0; display: flex; width: 100%; align-items: flex-start; justify-content: space-between; padding: clamp(1rem, 3vw, 2rem); pointer-events: none; }
.eyebrow { margin: 0 0 .2rem; color: #d3efa8; font-size: .63rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.55rem, 4vw, 2.5rem); font-weight: 500; letter-spacing: -.04em; text-shadow: 0 2px 12px rgb(0 0 0 / .35); }
.count { margin: 0; padding: .65rem .9rem; color: #183a17; background: rgb(239 246 210 / .9); border: 1px solid rgb(255 255 255 / .55); border-radius: 999px; box-shadow: 0 5px 20px rgb(0 0 0 / .18); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; backdrop-filter: blur(8px); }
.count strong { font-size: 1rem; }
.resources { display: grid; justify-items: end; gap: .45rem; }
.money { margin: 0; padding: .5rem .8rem; color: #fff2bd; background: rgb(61 42 10 / .82); border: 1px solid rgb(255 219 104 / .35); border-radius: 999px; box-shadow: 0 5px 20px rgb(0 0 0 / .18); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; backdrop-filter: blur(8px); }
.money strong { color: #ffd866; font-size: .95rem; }
.store-panel { position: fixed; z-index: 3; top: clamp(7.5rem, 18vh, 10rem); right: clamp(1rem, 4vw, 3rem); width: min(88vw, 27rem); padding: 1.25rem; color: #f8f1d4; background: rgb(25 38 19 / .94); border: 1px solid rgb(229 215 166 / .4); border-radius: 1rem; box-shadow: 0 1.5rem 5rem rgb(0 0 0 / .5); backdrop-filter: blur(10px); }
.store-panel[hidden] { display: none; }
.market-panel { position: fixed; z-index: 4; top: 50%; left: 50%; width: min(90vw, 25rem); padding: 1.3rem; translate: -50% -50%; color: #f8f1d4; background: rgb(37 30 23 / .97); border: 1px solid rgb(224 188 124 / .55); border-radius: 1rem; box-shadow: 0 1.5rem 6rem rgb(0 0 0 / .65); backdrop-filter: blur(12px); }
.market-panel[hidden] { display: none; }
.market-panel h2 { margin: 0; font: 500 1.65rem/1.1 Georgia, serif; }
.market-description { margin: .45rem 0 1rem; color: #cec6b3; font-size: .78rem; line-height: 1.45; }
.market-details { display: grid; gap: .15rem; margin: 0; }
.market-details div { display: flex; justify-content: space-between; padding: .55rem .65rem; background: rgb(255 255 255 / .055); border-radius: .4rem; }
.market-details dt { color: #bdb5a5; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.market-details dd { margin: 0; font-size: .78rem; }
.market-details strong { color: #ffd866; }
.market-warning { margin: .85rem 0; color: #d9bca5; font-size: .7rem; }
.market-actions { display: flex; justify-content: flex-end; gap: .55rem; }
.market-actions button { padding: .7rem .85rem; border: 1px solid rgb(255 255 255 / .2); border-radius: .6rem; font: 800 .68rem/1 system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.market-cancel { color: #eee7d5; background: rgb(255 255 255 / .08); }
.market-confirm { color: #352313; background: #e2b96e; }
.market-actions button:hover { filter: brightness(1.12); }
.store-heading h2 { margin: 0; font: 500 1.6rem/1.1 Georgia, serif; }
.store-heading > p:last-child { margin: .4rem 0 1rem; color: #bfc9ad; font-size: .74rem; }
.store-list { display: grid; gap: .65rem; }
.store-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); border-radius: .75rem; }
.store-item.unaffordable { opacity: .58; }
.store-item h3 { margin: 0 0 .25rem; font-size: .9rem; }
.store-item p { margin: 0; color: #cbd4bb; font-size: .72rem; }
.seeds { flex: 0 0 auto; padding: .65rem .8rem; color: #173715; background: #d9efa5; border: 1px solid rgb(255 255 255 / .5); border-radius: .65rem; box-shadow: 0 4px 14px rgb(0 0 0 / .2); font: 800 .68rem/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.seeds:hover:not(:disabled) { background: #edffc1; }
.seeds.placing { color: #fff9d9; background: #6f8f31; outline: 2px solid #e7f5aa; }
.seeds:disabled { opacity: .45; cursor: not-allowed; }
.seeds-status { min-height: 1em; margin: .75rem 0 0; color: #d9efa5; font-size: .68rem; font-weight: 700; text-shadow: 0 1px 5px #000; }
.effect-status { max-width: 12rem; margin: 0; text-align: right; }
.deliveries { display: flex; gap: .45rem; margin: 0; color: #d8dfc7; font-size: .58rem; }
.deliveries div { display: grid; gap: .08rem; min-width: 3.25rem; padding: .25rem .4rem; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .1); border-radius: .4rem; }
.deliveries dt { color: #aeb99b; font-size: .52rem; letter-spacing: .05em; text-transform: uppercase; }
.deliveries dd { margin: 0; color: #f3edcf; font-weight: 800; }
.notifications { position: fixed; top: 6.5rem; right: clamp(1rem, 3vw, 2rem); display: grid; justify-items: end; gap: .4rem; pointer-events: none; }
.notification { padding: .55rem .8rem; color: #fff5c9; background: rgb(38 29 9 / .86); border: 1px solid rgb(255 219 104 / .4); border-radius: .6rem; box-shadow: 0 6px 20px rgb(0 0 0 / .22); font-size: .78rem; animation: notice 2.5s ease forwards; }
@keyframes notice { 0% { opacity: 0; translate: 1rem 0; } 12%, 75% { opacity: 1; translate: 0; } 100% { opacity: 0; translate: 0 -.5rem; } }
.instructions { position: fixed; left: 50%; bottom: clamp(1rem, 4vw, 2rem); width: min(90vw, 22rem); padding: 1rem 1.25rem; translate: -50% 0; text-align: center; background: rgb(7 31 9 / .8); border: 1px solid rgb(255 255 255 / .2); border-radius: 1rem; box-shadow: 0 12px 35px rgb(0 0 0 / .25); transition: opacity .5s, translate .5s; backdrop-filter: blur(8px); pointer-events: none; }
.instructions.hidden { opacity: 0; translate: -50% 1rem; }
.instructions p { margin: .2rem 0 .65rem; color: #dceccf; font-size: .82rem; }
.keys { display: grid; justify-items: center; gap: .2rem; }
.keys span { display: flex; gap: .2rem; }
kbd { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; color: #173715; background: #edf6d5; border: 0; border-radius: .3rem; box-shadow: 0 2px 0 #9bb47d; font: 700 .72rem/1 system-ui, sans-serif; }
.touch-instruction { display: none; }

@media (pointer: coarse), (hover: none) {
  .instructions { display: none; }
}

@media (max-width: 600px) {
  .hud { padding: max(.7rem, env(safe-area-inset-top)) .75rem .75rem; }
  .hud h1 { font-size: 1.3rem; }
  .hud .eyebrow { display: none; }
  .resources { gap: .3rem; }
  .count, .money { padding: .42rem .62rem; font-size: .61rem; }
  .count strong, .money strong { font-size: .78rem; }
  .deliveries { gap: .2rem; }
  .deliveries div { min-width: 2.55rem; padding: .2rem .28rem; }
  .deliveries dt { font-size: .45rem; }
  .effect-status { max-width: 9rem; font-size: .58rem; }
  .notifications { top: 4.6rem; right: .75rem; max-width: 75vw; }
  .notification { font-size: .7rem; }
  .store-panel { top: 4.5rem; right: 4vw; bottom: auto; width: 92vw; max-height: calc(100dvh - 10rem); overflow-y: auto; }
  .market-panel { width: 92vw; max-height: calc(100dvh - 2rem); overflow-y: auto; }
  .market-actions button { min-height: 2.75rem; }
  .seeds { min-height: 2.75rem; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .store-panel { top: 3.6rem; right: max(.7rem, env(safe-area-inset-right)); width: min(46vw, 25rem); max-height: calc(100dvh - 4.3rem); }
  .market-panel { width: min(62vw, 25rem); max-height: calc(100dvh - 1rem); padding: 1rem; }
}

.breeding-tooltip { position: fixed; z-index: 5; pointer-events: none; width: min(380px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: hidden; padding: 14px; border: 1px solid #829667; border-radius: 10px; background: rgb(23 35 20 / .97); color: #f5f2df; box-shadow: 0 8px 30px #0006; font: 12px/1.45 system-ui, sans-serif; }
.breeding-tooltip[hidden] { display: none; }
.breeding-tooltip strong { font-size: 14px; }
.breeding-tooltip p { margin: 7px 0; }
.breeding-pass { color: #c4e5a3; }
.breeding-blocked { color: #ffbc9e; }
.breeding-explanation { border-top: 1px solid #ffffff30; padding-top: 7px; white-space: pre-line; color: #d2d8c6; }

/* Match the menu to the title already painted into the supplied artwork. */
[hidden] { display: none !important; }
.start-screen { position: fixed; inset: 0; overflow: auto; background: #354527; }
.start-scene { position: absolute; width: min(100vw, 177.68dvh); aspect-ratio: 1672 / 941; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url("images/startscreen_background.png") center / 100% 100% no-repeat; }
.start-menu { position: absolute; left: 13.5%; top: 42.3%; width: max(16.8%, 150px); display: grid; gap: clamp(10px, 1.8dvh, 20px); }
.wood-button { position: relative; width: 100%; min-height: 48px; padding: .55em .7em; border: 3px solid #4c351e; border-radius: 7px; color: #fff0c8; background: repeating-linear-gradient(0deg, transparent 0 15px, #482c191f 16px 18px), linear-gradient(#98713f, #73522f); box-shadow: inset 0 2px #d9aa61, inset 0 -3px #56371f, 0 4px 0 #302d1c, 0 7px 12px #17261166; font: 900 clamp(17px, 1.65vw, 28px)/1.2 "Courier New", monospace; text-transform: uppercase; letter-spacing: .035em; text-shadow: 2px 2px #4d321e; cursor: pointer; }
.wood-button::before, .wood-button::after { content: ""; position: absolute; top: 20%; bottom: 20%; width: 4px; background: linear-gradient(#e8bf72 0 4px, transparent 4px calc(50% - 2px), #e8bf72 calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px) calc(100% - 4px), #e8bf72 calc(100% - 4px)); }
.wood-button::before { left: 6px; } .wood-button::after { right: 6px; }
.wood-button.primary { background: repeating-linear-gradient(0deg, transparent 0 15px, #80451930 16px 18px), linear-gradient(#c68a39, #a56528); border-color: #784418; }
.wood-button:hover:not(:disabled) { filter: brightness(1.14); }
.wood-button:active:not(:disabled) { translate: 0 2px; }
.wood-button:focus-visible { outline: 3px solid #fff2b7; outline-offset: 5px; }
.wood-button:disabled { filter: saturate(.5) brightness(.8); cursor: default; }
#start-status { margin: 0; text-align: center; color: #fff4d0; font-size: 14px; text-shadow: 0 2px 3px #203319; }
.start-settings { width: min(90vw, 380px); padding: 26px; color: #fff0c8; background: #354527; border: 3px solid #a98b50; border-radius: 8px; box-shadow: 0 15px 60px #0008; }
.start-settings::backdrop { background: #172411a8; }
.start-settings h2 { margin-top: 0; text-align: center; font-family: Georgia, serif; }
.start-settings .wood-button { font-size: 18px; }
.start-settings p { text-align: center; font-size: 14px; }
/* On portrait screens keep the full landscape above a comfortably sized menu. */
@media (max-aspect-ratio: 1/1) {
  .start-scene { width: 100vw; left: 0; top: 0; transform: none; }
  .start-menu { left: 50%; top: 100%; transform: translateX(-50%); width: min(70vw, 320px); padding: 24px 0; gap: 18px; }
  .start-menu .wood-button { min-height: 54px; font-size: 21px; }
}

/* Uneven plank ends, grain, and worn edges give the menu a rustic finish. */
.wood-button {
  border: 0;
  border-radius: 0;
  padding: .7em 1em;
  clip-path: polygon(3% 0, 35% 1%, 66% 0, 96% 2%, 97% 8%, 100% 11%, 99% 39%, 100% 63%, 98% 88%, 96% 90%, 96% 98%, 62% 100%, 31% 98%, 3% 100%, 3% 92%, 0 87%, 1% 59%, 0 29%, 1% 9%, 3% 8%);
  background:
    radial-gradient(ellipse at 76% 66%, #39281866 0 1%, transparent 2% 4%, #48301940 5% 6%, transparent 7%),
    repeating-linear-gradient(2deg, transparent 0 7px, #e0b77818 8px, #3d291b26 9px, transparent 11px 17px),
    repeating-linear-gradient(0deg, transparent 0 20px, #402a1b66 21px, #d4a56833 23px, transparent 24px 43px),
    linear-gradient(95deg, #715031, #967044 28%, #89613b 72%, #68492d);
  box-shadow: inset 0 3px #d7ac6b99, inset 3px 0 #c0945555, inset -3px 0 #38271977, inset 0 -5px #3e2c20, inset 0 7px 10px #edc58622;
  color: #f2e4bf;
  text-shadow: 1px 2px 0 #493220, -1px 0 #d4bc8b55;
}
.wood-button.primary {
  background:
    radial-gradient(ellipse at 25% 72%, #62391766 0 1%, transparent 2% 4%, #78471e44 5% 6%, transparent 7%),
    repeating-linear-gradient(-2deg, transparent 0 8px, #f4cc811f 9px, #6e3b192e 10px, transparent 12px 19px),
    repeating-linear-gradient(0deg, transparent 0 20px, #70431d77 21px, #efbd6d44 23px, transparent 24px 43px),
    linear-gradient(95deg, #98622e, #bd8745 25%, #b37b39 70%, #8c582b);
}
.wood-button::before, .wood-button::after {
  width: 5px;
  top: 23%; bottom: 23%;
  background: radial-gradient(circle at 50% 3px, #dac18b 0 1px, #947347 2px, #473321 3px, transparent 3.5px) top / 5px 6px no-repeat,
    radial-gradient(circle at 50% 3px, #c7aa72 0 1px, #806039 2px, #473321 3px, transparent 3.5px) bottom / 5px 6px no-repeat;
}
.wood-button::before { left: 11px; }
.wood-button::after { right: 11px; }
.wood-button:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff2b7, inset 0 0 12px #fff2b788; }
.start-menu .wood-button:nth-child(1) { rotate: -.4deg; }
.start-menu .wood-button:nth-child(2) { rotate: .3deg; }
.start-menu .wood-button:nth-child(3) { rotate: -.2deg; }