:root {
  --wood: #a46a37; --wood-dark: #5e3a1c; --wood-light: #d9a064; --wood-shade: #7d4b24; --wood-glint: #ecc088; --parch: #f6e4b8; --parch-dark: #d9bb7a; --parch-light: #fff3cf;
  --ink: #3b2412; --ink-soft: #6d4a2b; --accent: #e9c46a; --good: #4fae4a; --bad: #c9533f; --stud: #f2c23a; --stud-dark: #8a5a1a;
  --font: 'VT323', 'Courier New', monospace; --font-title: 'Press Start 2P', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1d3a1e; overflow: hidden; -webkit-tap-highlight-color: transparent; cursor: url(img/cursor.svg) 2 2, auto; }
button, a, .slot, .entry, #dialogue, input { cursor: url(img/cursor-hand.svg) 8 0, pointer; }
body { font-family: var(--font); color: var(--ink); font-size: 20px; line-height: 1.1; }
/* the farm sits on dark planks; the canvas itself is framed like a picture */
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #162b17 repeating-linear-gradient(180deg, transparent 0 22px, rgba(0,0,0,.22) 22px 23px, rgba(255,255,255,.03) 23px 24px); }
#stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35) 100%); }
#world { box-shadow: 0 0 0 2px #2b1d14, 0 0 0 4px #5e3a1c, 0 0 0 5px #2b1d14, 0 10px 30px rgba(0,0,0,.55); }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
#frame { position: absolute; pointer-events: none; }
/* the lettering waits for the pixel fonts so nothing flashes in a fallback face (2.5s cap in index.html) */
html:not(.fonts) #frame, html:not(.fonts) #title { visibility: hidden; }
#frame > * { pointer-events: auto; }
#world { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); touch-action: manipulation; }
.hidden { display: none !important; }

/* wooden Stardew frame: dark outline, a bevelled plank band lit from the top-left, a thin dark inner line, then parchment.
   The four corner studs are drawn by ::before so every frame gets them for free. */
.wood { position: relative; background: var(--parch); border: 4px solid var(--wood-dark); border-radius: 4px;
  box-shadow: inset 3px 3px 0 var(--wood-glint), inset -3px -3px 0 var(--wood-shade), inset 0 0 0 3px var(--wood), inset 0 0 0 5px var(--wood-dark), inset 0 0 0 6px var(--parch-dark), 0 4px 0 rgba(0,0,0,.35); }
.wood::before { content: ''; position: absolute; inset: -4px; pointer-events: none; border-radius: 4px; z-index: 1;
  background:
    radial-gradient(circle at 2px 2px, var(--stud) 0 1.5px, var(--stud-dark) 1.6px 2.5px, transparent 2.6px) 2px 2px / 6px 6px no-repeat,
    radial-gradient(circle at 2px 2px, var(--stud) 0 1.5px, var(--stud-dark) 1.6px 2.5px, transparent 2.6px) calc(100% - 2px) 2px / 6px 6px no-repeat,
    radial-gradient(circle at 2px 2px, var(--stud) 0 1.5px, var(--stud-dark) 1.6px 2.5px, transparent 2.6px) 2px calc(100% - 2px) / 6px 6px no-repeat,
    radial-gradient(circle at 2px 2px, var(--stud) 0 1.5px, var(--stud-dark) 1.6px 2.5px, transparent 2.6px) calc(100% - 2px) calc(100% - 2px) / 6px 6px no-repeat; }

#hud { position: absolute; top: 14px; right: 14px; width: auto; max-width: 420px; padding: 8px 12px 7px; font-size: 21px; user-select: none; display: grid; grid-template-columns: auto auto auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-items: center; line-height: 1.15; }
.hud-top, .hud-mid { display: contents; }
#hud-date { grid-row: 1; grid-column: 1; white-space: nowrap; }
#hud-date::after { content: ' ·'; color: var(--ink-soft); }
#hud-season { grid-row: 1; grid-column: 2; white-space: nowrap; }
#hud-season small { font-size: .8em; color: var(--ink-soft); }
#hud-time { grid-row: 1; grid-column: 3; color: var(--ink-soft); white-space: nowrap; }
/* the weather sits on a little sky swatch so sun, moon and clouds read against the parchment */
#hud-weather { grid-row: 1; grid-column: 4; width: 30px; height: 30px; justify-self: end; background: #7ec0ee; border: 2px solid var(--wood-dark); box-shadow: inset 0 0 0 1px #bfe4f8; border-radius: 3px; transition: background .6s, box-shadow .6s; }
#hud-weather[data-sky="night"] { background: #1a2550; box-shadow: inset 0 0 0 1px #3a4a80; }
#hud-weather[data-sky="cloudy"] { background: #9fb4c8; box-shadow: inset 0 0 0 1px #c9d6e2; }
#hud-weather[data-sky="rain"] { background: #6b7a8c; box-shadow: inset 0 0 0 1px #8a99ab; }
#hud-weather[data-sky="storm"] { background: #3f4650; box-shadow: inset 0 0 0 1px #5a626e; }
.hud-bottom { grid-row: 2; grid-column: 1 / 5; font-size: 16px; color: var(--ink-soft); min-height: 18px; overflow-wrap: anywhere; }
.radio::before { content: '◉ '; color: var(--good); }
.radio.off::before { color: var(--bad); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

#hotbar { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; user-select: none; }
/* inventory slots: a sunken well in the planks, shaded top-left, lit bottom-right */
.slot { position: relative; width: 52px; height: 52px; background: #e7cf92; border: 3px solid var(--wood-dark); box-shadow: inset 2px 2px 0 #c7a868, inset -2px -2px 0 var(--parch-light); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slot:hover, .slot.pinned { background: #fff1c9; box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 3px #b8891a; }
.slot canvas { width: 40px; height: 40px; }
.slot .count { position: absolute; right: 2px; bottom: 0; font-size: 18px; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000; }
.slot.glow { animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: inset 2px 2px 0 #c7a868, inset -2px -2px 0 var(--parch-light), 0 0 12px 4px #ffe27a; } }

/* speech bubble: sits over the farmer's head (placed every frame by main.js), with a tail pointing down at them */
#dialogue { position: absolute; left: 0; top: 0; width: max-content; max-width: min(320px, calc(100% - 16px)); padding: 8px 12px 7px; font-size: 21px; line-height: 1.1; color: var(--ink); animation: pop .18s ease-out; transform-origin: 50% 100%; border-radius: 6px; }
#dialogue.below { transform-origin: 50% 0; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.bubble-body { position: relative; }
#dialogue-ghost { visibility: hidden; display: block; overflow-wrap: anywhere; }
#dialogue-text { position: absolute; inset: 0; overflow-wrap: anywhere; }
.tail { position: absolute; left: var(--tail-x, 50%); bottom: -13px; width: 16px; height: 13px; margin-left: -8px; overflow: hidden; pointer-events: none; }
.tail-fill { position: absolute; left: 2px; top: -9px; width: 12px; height: 12px; background: var(--parch); border: 3px solid var(--wood-dark); border-top: 0; border-left: 0; transform: rotate(45deg); box-shadow: inset -2px -2px 0 var(--parch-dark); }
#dialogue.below .tail { bottom: auto; top: -13px; transform: scaleY(-1); }
.pfp { display: none; }
#zbubble { position: absolute; left: 0; top: 0; width: max-content; padding: 5px 9px 4px; font-size: 18px; color: var(--ink-soft); font-style: italic; animation: pop .18s ease-out; transform-origin: 50% 100%; border-radius: 6px; pointer-events: none; }
#zbubble.below { transform-origin: 50% 0; }
#portrait { width: 56px; height: 56px; background: #c7e7f3; border: 3px solid var(--wood-dark); box-shadow: inset 2px 2px 0 rgba(0,0,0,.18), 0 0 0 1px var(--wood-light); }
/* the farmer's name on a little wooden tag under the portrait */
#dialogue-name { margin-top: -3px; font-size: 15px; line-height: 1; padding: 3px 7px 2px; color: var(--parch); background: var(--wood); border: 2px solid var(--wood-dark); box-shadow: inset 1px 1px 0 var(--wood-glint), inset -1px -1px 0 var(--wood-shade); text-align: center; text-shadow: 1px 1px 0 rgba(0,0,0,.35); white-space: nowrap; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
@keyframes bob { 50% { transform: translateY(3px); } }

#buttons { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: row; gap: 6px; }
#btn-sound { order: 4; } /* Journal, Almanac, Snap, then the sound toggle, on every layout */
button.pix { font-family: var(--font); font-size: 20px; line-height: 1.1; color: var(--parch); background: var(--wood); border: 3px solid var(--wood-dark); box-shadow: inset 2px 2px 0 var(--wood-glint), inset -2px -2px 0 var(--wood-shade), 0 3px 0 rgba(0,0,0,.4); padding: 4px 12px; cursor: pointer; text-shadow: 1px 1px 0 rgba(0,0,0,.4); }
button.pix:hover { background: #b2763f; }
button.pix:active { transform: translateY(2px); box-shadow: inset 2px 2px 0 var(--wood-shade), inset -2px -2px 0 var(--wood-glint); }

#tooltip { position: absolute; z-index: 50; pointer-events: none; max-width: min(260px, calc(100vw - 16px)); overflow-wrap: anywhere; word-break: break-word; padding: 8px 10px; background: var(--parch); border: 3px solid var(--wood-dark); box-shadow: inset 2px 2px 0 var(--parch-light), inset -2px -2px 0 var(--parch-dark), 0 0 0 1px var(--wood-light), 3px 3px 0 rgba(0,0,0,.4); font-size: 20px; }
#tooltip.pinned { pointer-events: auto; }
.tt-title { font-size: 22px; color: var(--ink); border-bottom: 2px solid var(--parch-dark); margin-bottom: 4px; padding-bottom: 2px; }
.tt-desc { color: var(--ink-soft); font-size: 18px; }
.tt-real { margin-top: 6px; overflow-wrap: anywhere; font-size: 18px; color: #2b3e66; border-top: 2px dashed var(--parch-dark); padding-top: 4px; white-space: pre-line; }
.tt-real:empty { display: none; }

#journal, #almanac, #shipped, #visit, #tip { position: absolute; inset: 0; background: rgba(20, 30, 15, .55); display: flex; align-items: center; justify-content: center; z-index: 30; }
.journal-book { width: min(640px, calc(100vw - 20px)); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; padding: 12px; }
.journal-head { display: flex; justify-content: space-between; align-items: center; font-size: 26px; border-bottom: 3px solid var(--parch-dark); padding-bottom: 6px; margin-bottom: 6px; }
.journal-head button { font-size: 18px; padding: 2px 8px; }
#journal-list, #almanac-list, #shipped-list { overflow: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.entry { display: grid; overflow-wrap: anywhere; min-width: 0; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 2px dotted var(--parch-dark); font-size: 20px; cursor: help; }
.entry:hover { background: #fff1c9; }
.entry canvas { width: 36px; height: 52px; }
.entry .when { color: var(--ink-soft); font-size: 16px; }
.entry .grain { color: #8a6a1a; font-size: 18px; white-space: nowrap; }
.entry.good .outcome { color: #2e7d2a; } .entry.bad .outcome { color: #a33d2c; } .entry.dead .outcome { color: #5a3a2a; }
.journal-foot { font-size: 16px; color: var(--ink-soft); padding-top: 6px; text-align: center; }

/* title: a hanging wooden plaque over the dimmed farm */
#title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(10, 20, 8, .5); z-index: 40; cursor: pointer; text-align: center; padding: 20px; }
.title-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 34px 18px; width: min(560px, calc(100vw - 32px)); animation: plaque .5s cubic-bezier(.2,.9,.3,1.2); box-shadow: inset 3px 3px 0 var(--wood-glint), inset -3px -3px 0 var(--wood-shade), inset 0 0 0 3px var(--wood), inset 0 0 0 5px var(--wood-dark), inset 0 0 0 6px var(--parch-dark), 0 6px 0 rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.5); }
@keyframes plaque { from { transform: translateY(-24px) scale(.94); opacity: 0; } }
#title span { font-family: var(--font-title); font-size: clamp(20px, 5.2vw, 36px); line-height: 1.25; color: #f2c23a; padding: 0 4px; white-space: nowrap;
  background: linear-gradient(#fff0a6 0%, #f2c23a 45%, #c9811a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(3px 3px 0 #5e3a1c) drop-shadow(0 0 1px rgba(94,58,28,.6)); animation: titleBob 3.2s ease-in-out infinite; }
@keyframes titleBob { 50% { transform: translateY(-3px); } }
/* a stitched rule with a leaf at each end, under the lettering */
.title-rule { width: 70%; height: 2px; margin: 2px 0 4px; background: repeating-linear-gradient(90deg, var(--wood-dark) 0 6px, transparent 6px 10px); position: relative; }
.title-rule::before, .title-rule::after { content: ''; position: absolute; top: -4px; width: 10px; height: 10px; background: var(--stud); border: 2px solid var(--stud-dark); transform: rotate(45deg); box-sizing: border-box; }
.title-rule::before { left: -14px; } .title-rule::after { right: -14px; }
#title small { font-size: clamp(16px, 4.6vw, 24px); white-space: nowrap; color: var(--ink); }
.title-prompt { font-size: clamp(14px, 4vw, 19px); color: var(--ink-soft); animation: promptBlink 1.6s steps(2) infinite; }
.title-prompt::before { content: '▶ '; color: var(--stud-dark); } .title-prompt::after { content: ' ◀'; color: var(--stud-dark); }
@keyframes promptBlink { 50% { opacity: .35; } }
/* two leaves pinned to the top corners of the plaque */
.title-leaf { position: absolute; top: -9px; width: 18px; height: 18px; background: #4fae4a; border: 2px solid #2b1d14; box-sizing: border-box; border-radius: 0 60% 0 60%; box-shadow: inset 3px 3px 0 #7cd062; z-index: 2; }
.title-leaf-l { left: 14px; transform: rotate(-20deg); } .title-leaf-r { right: 14px; transform: rotate(70deg) scaleX(-1); }

@media (max-width: 700px) {
  body { font-size: 18px; }
  /* phones: the HUD is one slim row across the top of the sky: radio dot, day and date, weather, four short buttons.
     The phone's own status bar shows the time, so the clock and season stay off this bar; the radio text only appears when the link drops. */
  #hud { width: auto; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); font-size: 15px; padding: 8px 10px; display: grid; grid-template-columns: auto auto 1fr auto; grid-template-rows: auto; column-gap: 5px; row-gap: 4px; align-items: center; line-height: 1.15; }
  #hud .hud-top, #hud .hud-mid { display: contents; }
  #hud #hud-date { grid-row: 1; grid-column: 1; white-space: nowrap; }
  #hud #hud-date::before { content: '◉ '; color: var(--good); }
  #hud.radio-off #hud-date::before { color: var(--bad); animation: blink 1s steps(2) infinite; }
  #hud #hud-date::after { content: ' ·'; color: var(--ink-soft); }
  #hud #hud-season { grid-row: 1; grid-column: 2; white-space: nowrap; }
  #hud #hud-season small { display: none; }
  #hud #hud-time { display: none; }
  #hud #hud-weather { grid-row: 1; grid-column: 3; width: 22px; height: 22px; justify-self: end; }
  #hud .hud-bottom { display: none; grid-row: 2; grid-column: 1 / 5; margin-top: 0; font-size: 12px; min-height: 0; }
  #hud.radio-off .hud-bottom { display: block; }
  #hud .hud-bottom .radio { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #hud .hud-bottom .radio::before { content: ''; }
  #hud #buttons { position: static; grid-row: 1; grid-column: 4; display: flex; flex-direction: row; gap: 4px; flex-shrink: 0; }
  #hud #buttons button.pix { font-size: 13px; padding: 0 5px; height: 22px; line-height: 18px; box-shadow: inset 0 0 0 2px var(--wood-light), 0 1px 0 rgba(0,0,0,.4); border-width: 2px; white-space: nowrap; }
  #hud #hud-weather { width: 22px; height: 22px; }
  .slot { width: 33px; height: 33px; } .slot canvas { width: 26px; height: 26px; } .slot .count { font-size: 13px; } /* nine slots fit the 341px frame a 3x phone gets */
  #hotbar { gap: 3px; padding: 5px; }
  #dialogue { font-size: 17px; max-width: min(250px, calc(100% - 12px)); padding: 6px 9px 5px; }
  #buttons { bottom: auto; top: calc(14px + env(safe-area-inset-top)); left: 14px; flex-direction: column; }
  button.pix { font-size: 16px; padding: 3px 8px; }
}

/* floating action numbers */
.float { position: absolute; z-index: 15; pointer-events: none; transform: translate(-50%, -100%); font-family: var(--font); font-size: 30px; white-space: nowrap;
  text-shadow: 2px 2px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000; animation: floatUp 2.4s ease-out forwards; }
.float.good { color: #7cf27a; } .float.bad { color: #ff6b5a; } .float.gold { color: #ffe27a; } .float.neutral { color: #fff; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -110%) scale(1.15); } 25% { transform: translate(-50%, -110%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -220%); } }
@media (max-width: 700px) { .float { font-size: 24px; } }

/* almanac */
.almanac-entry { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 2px dotted var(--parch-dark); font-size: 19px; }
.almanac-entry canvas { width: 36px; height: 36px; justify-self: center; }
.almanac-entry b { font-size: 21px; }
.almanac-entry .metric { color: #2b3e66; font-size: 17px; }

/* live farm value lettered on the deed sign */
#deed-label { position: absolute; pointer-events: none; display: flex; align-items: center; justify-content: center; font-family: var(--font); color: var(--ink); line-height: 1; white-space: nowrap; overflow: hidden; }

/* day summary */
#shipped-summary, .journal-summary { display: flex; justify-content: space-between; gap: 10px; padding: 6px 4px 8px; border-bottom: 3px solid var(--parch-dark); margin-bottom: 4px; font-size: 20px; }
#shipped-summary .net, .journal-summary .net { font-size: 26px; }
.net.good { color: #2e7d2a; } .net.bad { color: #a33d2c; }
.summary-sub { color: var(--ink-soft); font-size: 16px; }
.shipped-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; padding: 5px 4px; border-bottom: 2px dotted var(--parch-dark); font-size: 19px; }
.shipped-row canvas { width: 36px; height: 52px; }
.shipped-row .amt { font-size: 20px; white-space: nowrap; }
.shipped-row.good .amt { color: #2e7d2a; } .shipped-row.bad .amt { color: #a33d2c; }
.shipped-empty { padding: 18px 4px; color: var(--ink-soft); text-align: center; }

/* the narrowest phones: keep the HUD row to one line by dropping the calendar date (the phone's own status bar shows it) */
@media (max-width: 430px) {
  #hud #hud-season { display: none; }
  #hud #hud-date::after { content: ''; }
}

/* visit a farm / tip jar */
.small-book { width: min(460px, calc(100vw - 20px)); }
.visit-body { padding: 8px 4px 4px; font-size: 20px; }
.visit-body p { margin: 0 0 10px; color: var(--ink-soft); }
#visit-input, #visit-name { width: 100%; margin-bottom: 8px; font-family: var(--font); font-size: 20px; padding: 8px 10px; background: #fff8e4; border: 3px solid var(--wood-dark); color: var(--ink); box-shadow: inset 0 0 0 2px var(--parch-dark); }
#visit-input:focus, #visit-name:focus { outline: 3px solid var(--accent); outline-offset: -3px; }
.visit-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.pix-link { font-size: 18px; color: #2b3e66; }
.visit-err { min-height: 22px; margin-top: 6px; color: #a33d2c; font-size: 18px; }
.tip-addr { background: #fff8e4; border: 3px solid var(--wood-dark); box-shadow: inset 0 0 0 2px var(--parch-dark); padding: 8px 10px; font-size: 17px; word-break: break-all; }
.tip-addr code { font-family: var(--font); }
#title .title-visit { font-size: 16px; color: #2b3e66; text-decoration: underline; margin-top: 6px; opacity: .9; }
#visit, #tip { z-index: 45; }
.tip-rule { height: 2px; margin: 14px 0 10px; background: repeating-linear-gradient(90deg, var(--parch-dark) 0 6px, transparent 6px 10px); }
.tip-join { margin: 0 0 8px; font-size: 19px; line-height: 1.15; color: var(--ink); }
.tip-join b { color: var(--ink); } .tip-join a { color: #2b3e66; }
.codes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.codes .code { font-size: 18px; padding: 4px 10px; letter-spacing: 1px; color: #fff0a6; }


@media (max-width: 360px) {
  .slot { width: 31px; height: 31px; } .slot canvas { width: 24px; height: 24px; } .slot .count { font-size: 11px; }
}


/* the registry board's lettering, next to its pie */
#board-label { position: absolute; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; line-height: 1; white-space: nowrap; overflow: hidden; }
.board-title, .board-share { display: flex; align-items: center; justify-content: center; }
.board-title { font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: 0; color: #f2c23a;
  background: linear-gradient(#fff0a6 0%, #f2c23a 45%, #c9811a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(1px 1px 0 #5e3a1c); }
.board-share { font-family: var(--font); color: var(--ink); }

/* wooden scrollbars inside the parchment panels */
#journal-list, #almanac-list, #shipped-list { scrollbar-width: thin; scrollbar-color: var(--wood) var(--parch-dark); }
#journal-list::-webkit-scrollbar, #almanac-list::-webkit-scrollbar, #shipped-list::-webkit-scrollbar { width: 10px; }
#journal-list::-webkit-scrollbar-track, #almanac-list::-webkit-scrollbar-track, #shipped-list::-webkit-scrollbar-track { background: var(--parch-dark); border-left: 2px solid var(--parch); }
#journal-list::-webkit-scrollbar-thumb, #almanac-list::-webkit-scrollbar-thumb, #shipped-list::-webkit-scrollbar-thumb { background: var(--wood); border: 2px solid var(--wood-dark); box-shadow: inset 1px 1px 0 var(--wood-glint); }

/* the plaque lifts away when the valley wakes */
#title.leaving { pointer-events: none; animation: titleOut .35s ease-in forwards; }
#title.leaving .title-card { animation: plaqueOut .35s ease-in forwards; }
@keyframes titleOut { to { opacity: 0; } }
@keyframes plaqueOut { to { transform: translateY(-18px) scale(.96); opacity: 0; } }

/* a phone held sideways: the landscape farm on a short screen, so the chrome shrinks to leave the fields visible */
@media (max-height: 480px) and (min-width: 701px) {
  body { font-size: 16px; }
  #hud { top: 8px; right: 8px; font-size: 15px; padding: 5px 8px 4px; column-gap: 6px; max-width: 320px; }
  #hud-weather { width: 22px; height: 22px; }
  .hud-bottom { font-size: 12px; min-height: 14px; }
  #buttons { left: 8px; top: 8px; gap: 4px; }
  button.pix { font-size: 15px; padding: 2px 8px; }
  .slot { width: 36px; height: 36px; } .slot canvas { width: 28px; height: 28px; } .slot .count { font-size: 13px; }
  #hotbar { gap: 3px; padding: 4px; bottom: 8px; } /* short screens: the same 8px the HUD gets */
  #dialogue { font-size: 16px; max-width: min(260px, calc(100% - 12px)); padding: 5px 9px 4px; }
  .title-card { padding: 14px 24px 10px; gap: 6px; width: min(420px, calc(100vw - 32px)); }
  #title span { font-size: 24px; } #title small { font-size: 16px; } .title-prompt { font-size: 13px; } #title .title-visit { font-size: 13px; margin-top: 2px; }
  .journal-book { max-height: calc(100dvh - 16px); padding: 8px; } .journal-head { font-size: 20px; }
}