/* Archer's Farm: big, bright, chunky, thumb-sized. Every button is at
   least 64px (most are 80+) so a six-year-old can hit it on a phone. */

@font-face { font-family: "Lexend"; src: url("fonts/lexend-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/lexend-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/lexend-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --bg: #8fd3ff; --surface: #fffaf0; --edge: #e8d9bd; --ink: #3a2a33; --muted: #8a7a70;
  --accent: #3d8fe0; --reward: #ffc933; --danger: #e0483f; --green: #3fae4f; --pink: #ff6b9d;
  --text-s: clamp(14px, 1.6vw, 17px); --text-m: clamp(17px, 2.2vw, 22px);
  --text-l: clamp(22px, 3.2vw, 32px); --text-xl: clamp(46px, 9vw, 110px);
  --space: 8px; --radius: 22px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --btn: clamp(72px, 10vmin, 104px);
  --font-ui: "Lexend", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-weight: 700;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none; overscroll-behavior: none;
}
body { position: fixed; inset: 0; height: 100dvh; }
button { font-family: inherit; font-weight: 800; color: inherit; border: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
svg { width: 1em; height: 1em; }
img { -webkit-user-drag: none; pointer-events: none; }
.hidden { display: none !important; }

#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#flash { position: fixed; inset: 0; pointer-events: none; background: #fff; opacity: 0; transition: opacity .35s; z-index: 60; }

/* ---------------------------------------------------------- screens */
.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 40; }
.screen.show { display: flex; }
.screen.dim { background: rgba(40, 70, 110, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#loading { background: linear-gradient(#8fd3ff, #c8ecff 60%, #9fdc70 60.2%, #7cc850); flex-direction: column; gap: 24px; }
.loadbar { width: min(60vw, 360px); height: 22px; border-radius: 99px; background: #fff; box-shadow: inset 0 3px 0 rgba(0,0,0,.08), 0 4px 0 #e0cfae; overflow: hidden; }
.loadbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd23f, #ff9f3d); border-radius: 99px; transition: width .2s; }

.logo { font-weight: 800; line-height: .9; text-align: center; letter-spacing: -.02em; filter: drop-shadow(0 6px 0 rgba(90, 50, 20, .35)); }
.logo span, .logo b { display: block; font-size: var(--text-xl); -webkit-text-stroke: clamp(4px, .8vw, 9px) #6b3514; paint-order: stroke fill; }
.logo span { color: #fff6e0; font-size: calc(var(--text-xl) * .62); transform: rotate(-3deg); }
.logo b { font-size: calc(var(--text-xl) * 1.08); background: linear-gradient(#ffe45c 20%, #ffb22e 60%, #ff8a1f); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; position: relative; }
.logo b::before { content: "Farm"; position: absolute; inset: 0; -webkit-text-stroke: clamp(8px, 1.6vw, 18px) #6b3514; color: #6b3514; z-index: -1; }
.logo.small span, .logo.small b { font-size: clamp(30px, 6vw, 60px); }
.logo.small b::before { -webkit-text-stroke: 8px #6b3514; }

#title { background: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); }
.title-wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 4vh, 40px); animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.big-play {
  display: flex; align-items: center; gap: 14px; padding: 18px 46px 18px 36px; border-radius: 999px;
  font-size: clamp(30px, 5.4vw, 52px); color: #fff; background: linear-gradient(#5fd06a, #36a845);
  box-shadow: 0 9px 0 #217a2f, 0 16px 24px rgba(0,0,0,.25); text-shadow: 0 3px 0 rgba(0,0,0,.2);
  transition: transform .08s, box-shadow .08s; animation: pulse 1.6s ease-in-out infinite;
}
.big-play svg { width: 1.1em; height: 1.1em; filter: drop-shadow(0 3px 0 rgba(0,0,0,.2)); }
.big-play:active { transform: translateY(6px); box-shadow: 0 3px 0 #217a2f, 0 8px 14px rgba(0,0,0,.2); }
.big-play.small { font-size: clamp(26px, 4vw, 38px); padding: 14px 38px 14px 30px; animation: none; }
@keyframes pulse { 50% { transform: scale(1.05); } }
.title-row { display: flex; gap: 12px; }
.pill-btn { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 99px; background: rgba(255,255,255,.85); font-size: var(--text-m); box-shadow: 0 5px 0 rgba(0,0,0,.15); min-height: 56px; }
.pill-btn.off { opacity: .55; }
a.back { position: fixed; left: calc(16px + var(--sal)); bottom: calc(12px + var(--sab)); color: #2a5b86; font-size: var(--text-s); text-decoration: none; background: rgba(255,255,255,.7); padding: 10px 16px; border-radius: 99px; }

/* ---------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
#hud > * { pointer-events: auto; }
.hud-tl { position: absolute; top: calc(12px + var(--sat)); left: calc(12px + var(--sal)); display: flex; gap: 10px; flex-direction: column; align-items: flex-start; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px 6px 8px; border-radius: 99px; background: var(--surface); box-shadow: 0 5px 0 var(--edge), 0 8px 14px rgba(0,0,0,.12); font-size: var(--text-l); font-variant-numeric: tabular-nums; min-height: 56px; }
.pill .ico { width: 44px; height: 44px; }
.pill.stars { font-size: var(--text-m); min-height: 46px; }
.pill.stars .ico { width: 34px; height: 34px; }
.pill.bump { animation: bump .3s; }
@keyframes bump { 40% { transform: scale(1.18); } }

.goal {
  position: absolute; top: calc(12px + var(--sat)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border-radius: 26px;
  background: var(--surface); box-shadow: 0 5px 0 var(--edge), 0 8px 14px rgba(0,0,0,.12);
  max-width: min(46vw, 520px); min-height: 64px; text-align: left; font-size: var(--text-m);
}
.goal img { width: 58px; height: 58px; flex: none; }
.goal-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.goal-body span { line-height: 1.1; }
.goal-bar { height: 12px; border-radius: 99px; background: #efe3cc; overflow: hidden; width: 100%; min-width: 120px; }
.goal-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #7dd35a, #3fae4f); transition: width .3s; }
.goal-say { width: 28px; height: 28px; color: var(--accent); flex: none; }
.goal.done { animation: goaldone 1.2s; background: #fff6c0; }
.goal.new { animation: goalnew .6s; }
@keyframes goaldone { 20% { transform: translateX(-50%) scale(1.15); } 60% { transform: translateX(-50%) scale(1.1) rotate(2deg); } }
@keyframes goalnew { 0% { transform: translateX(-50%) translateY(-120%); } 70% { transform: translateX(-50%) translateY(8px); } }

.hud-tr { position: absolute; top: calc(12px + var(--sat)); right: calc(12px + var(--sar)); }
.round-btn { width: 64px; height: 64px; border-radius: 50%; background: var(--surface); box-shadow: 0 5px 0 var(--edge), 0 8px 14px rgba(0,0,0,.12); display: grid; place-items: center; font-size: 30px; color: var(--ink); }
.round-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge); }

.hud-bl { position: absolute; left: calc(12px + var(--sal)); bottom: calc(12px + var(--sab)); display: flex; gap: 12px; }
.veh {
  width: var(--btn); height: var(--btn); border-radius: 26px; background: var(--surface); position: relative;
  box-shadow: 0 6px 0 var(--edge), 0 10px 16px rgba(0,0,0,.14); padding: 0; transition: transform .12s;
}
.veh img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.veh span { position: absolute; left: 0; right: 0; bottom: -6px; font-size: 13px; background: var(--surface); border-radius: 99px; width: fit-content; margin: auto; padding: 1px 8px; }
.veh.on { background: #fff3b0; box-shadow: 0 6px 0 #e6b52a, 0 0 0 5px #ffd23f, 0 10px 16px rgba(0,0,0,.14); transform: translateY(-4px) scale(1.06); }
.veh:active { transform: translateY(3px); }

.hud-bc { position: absolute; bottom: calc(12px + var(--sab)); left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: flex-end; }
.tank { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; background: var(--surface); border-radius: 99px; box-shadow: 0 5px 0 var(--edge), 0 8px 14px rgba(0,0,0,.12); min-height: 64px; font-size: var(--text-m); font-variant-numeric: tabular-nums; }
.tank .ico { width: 40px; height: 40px; }
.tank-bar { width: clamp(90px, 16vw, 200px); height: 22px; border-radius: 99px; background: #efe3cc; overflow: hidden; box-shadow: inset 0 3px 0 rgba(0,0,0,.08); }
.tank-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, #ffd23f 0 10px, #f3c64f 10px 20px); border-radius: 99px; transition: width .15s; }
.tank.full { animation: full 0.8s infinite; }
.tank.full .tank-bar i { background: repeating-linear-gradient(-45deg, #ffb02e 0 10px, #ff9f3d 10px 20px); }
@keyframes full { 50% { transform: scale(1.08); } }
.ctx-btn { height: var(--btn); min-width: var(--btn); border-radius: 26px; background: var(--surface); box-shadow: 0 6px 0 var(--edge), 0 10px 16px rgba(0,0,0,.14); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 10px; font-size: 14px; position: relative; }
.ctx-btn img { width: 62px; height: 56px; object-fit: contain; }
.ctx-btn svg { width: 54px; height: 54px; }
.ctx-btn:active { transform: translateY(4px); }
.ctx-btn.glow { animation: glow 1s infinite; background: #fff3b0; }
@keyframes glow { 50% { box-shadow: 0 6px 0 #e6b52a, 0 0 0 7px rgba(255, 210, 63, .8); transform: scale(1.06); } }
.ctx-btn.cool { opacity: .5; }
.seeds { display: flex; gap: 8px; }
.seed { width: calc(var(--btn) * .82); height: calc(var(--btn) * .82); border-radius: 22px; background: var(--surface); box-shadow: 0 5px 0 var(--edge), 0 8px 14px rgba(0,0,0,.12); padding: 0; position: relative; }
.seed img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.seed span { position: absolute; left: 0; right: 0; bottom: -8px; margin: auto; width: fit-content; font-size: 12px; background: var(--surface); border-radius: 99px; padding: 1px 7px; white-space: nowrap; }
.seed.on { background: #d9f7c4; box-shadow: 0 5px 0 #7cbf55, 0 0 0 5px #7dd35a; transform: translateY(-4px); }

.hud-br { position: absolute; right: calc(12px + var(--sar)); bottom: calc(12px + var(--sab)); }
.shop-btn {
  width: calc(var(--btn) * 1.18); height: calc(var(--btn) * 1.18); border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #ff7fb0, #ff4f8a); color: #fff; font-size: 18px;
  box-shadow: 0 7px 0 #c02a63, 0 12px 20px rgba(0,0,0,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.shop-btn svg { width: 52%; height: 52%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.2)); }
.shop-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #c02a63; }
.shop-btn.wiggle { animation: wiggle 1.2s infinite; }
@keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-10deg) scale(1.08); } 80% { transform: rotate(10deg) scale(1.08); } 90% { transform: rotate(-6deg); } }

.arrow { position: absolute; width: 70px; height: 70px; margin: -35px 0 0 -35px; color: #ffd23f; filter: drop-shadow(0 4px 0 #b3730f) drop-shadow(0 6px 10px rgba(0,0,0,.3)); pointer-events: none !important; display: none; }
.arrow svg { width: 100%; height: 100%; }
.arrow.show { display: block; animation: arrowbob .7s ease-in-out infinite alternate; }
@keyframes arrowbob { to { scale: 1.2; } }

/* float labels, coin flyers */
#floats { position: fixed; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
.flabel { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; animation: flabel 2s forwards; pointer-events: auto; }
.flabel .fw { background: var(--surface); padding: 4px 16px; border-radius: 18px; font-size: clamp(24px, 3.6vw, 36px); box-shadow: 0 4px 0 var(--edge); }
.flabel .fs { color: #fff; font-size: clamp(16px, 2.2vw, 22px); -webkit-text-stroke: 5px #3a2a33; paint-order: stroke fill; margin-top: 2px; }
@keyframes flabel { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.5); } 12% { opacity: 1; transform: translate(-50%, -100%) scale(1.1); } 20% { transform: translate(-50%, -100%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%); } }
.bigtext { position: absolute; transform: translate(-50%, -50%); font-size: clamp(44px, 8vw, 90px); color: #ffd23f; -webkit-text-stroke: 10px #7a3d10; paint-order: stroke fill; animation: big 1.8s forwards; white-space: nowrap; display: flex; align-items: center; gap: 12px; }
.bigtext svg { width: .9em; height: .9em; }
@keyframes big { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.3); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%); } }
.flycoin { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; will-change: transform; }
.flycoin svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------- sheets */
.sheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(40, 70, 110, .35); }
.sheet-card {
  width: min(96vw, 1100px); height: min(92dvh, 820px); background: var(--surface); border-radius: 32px;
  box-shadow: 0 10px 0 var(--edge), 0 20px 40px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden;
  animation: sheetin .28s cubic-bezier(.2, 1.4, .5, 1);
}
@keyframes sheetin { from { transform: translateY(40px) scale(.94); opacity: 0; } }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px; background: #fff0cf; border-bottom: 4px solid var(--edge); flex-wrap: wrap; }
.sheet-head .pill { min-height: 50px; font-size: var(--text-m); }
.sheet-head .pill .ico { width: 36px; height: 36px; }
.sheet-head .close { margin-left: auto; }
.tabs { display: flex; gap: 8px; flex: 1 1 100%; flex-wrap: nowrap; order: 3; overflow-x: auto; padding: 4px 2px 8px; touch-action: pan-x; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs::before, .tabs::after { content: ""; margin: auto; }
.tab { flex: none; }
@media (min-width: 900px) and (min-height: 560px) { .tabs { order: 0; flex: 1 1 auto; } }
.tab { display: flex; flex-direction: column; align-items: center; width: 84px; height: 84px; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 var(--edge); padding: 2px; font-size: 13px; position: relative; }
.tab img { width: 60px; height: 58px; object-fit: contain; }
.tab.on { background: #ffe57a; box-shadow: 0 5px 0 #e6b52a; transform: translateY(-3px); }
.tab .dot { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--pink); border: 3px solid #fff; }
.grid { flex: 1; overflow-y: auto; padding: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; align-content: start; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.item {
  background: #fff; border-radius: 24px; box-shadow: 0 6px 0 var(--edge); display: flex; flex-direction: column; align-items: center;
  padding: 8px 8px 12px; gap: 4px; position: relative; min-height: 196px; transition: transform .1s;
}
.item:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--edge); }
.item img { width: 128px; height: 116px; object-fit: contain; }
.item .nm { font-size: var(--text-m); }
.item .pr { display: flex; align-items: center; gap: 6px; font-size: var(--text-m); font-variant-numeric: tabular-nums; color: #b36b00; }
.item .pr svg { width: 28px; height: 28px; }
.item.cant .pr { color: var(--muted); }
.item.cant img { filter: saturate(.85); }
.item .lock { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; color: #b8a99a; }
.item.owned { background: #eaffdc; box-shadow: 0 6px 0 #a9dd8a; }
.item .own { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 22px; }
.item .own.active { background: #ffb02e; }
.item .count { position: absolute; top: 8px; left: 10px; background: var(--accent); color: #fff; border-radius: 99px; padding: 0 9px; font-size: 16px; }
.item.good { animation: good 2s infinite; }
@keyframes good { 50% { box-shadow: 0 6px 0 var(--edge), 0 0 0 5px rgba(125, 211, 90, .7); } }
.item .hint { font-size: 13px; color: var(--muted); }

.detail { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(40, 70, 110, .35); z-index: 32; }
.detail-card { background: var(--surface); border-radius: 32px; padding: 24px 28px 28px; width: min(92vw, 460px); display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; box-shadow: 0 10px 0 var(--edge), 0 20px 40px rgba(0,0,0,.3); animation: sheetin .25s cubic-bezier(.2, 1.4, .5, 1); }
.detail-card .close { position: absolute; top: 12px; right: 12px; }
.detail-card img { width: min(60vw, 260px); height: min(50vw, 220px); object-fit: contain; animation: spinin .5s; }
@keyframes spinin { from { transform: scale(.6) rotate(-8deg); } }
.d-name { font-size: var(--text-l); display: flex; gap: 8px; align-items: center; }
.d-name svg { color: var(--accent); width: 32px; height: 32px; }
.d-stats { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.stat { display: flex; align-items: center; gap: 4px; font-size: 16px; color: var(--muted); }
.stat .pips { display: flex; gap: 3px; }
.stat .pips i { width: 14px; height: 14px; border-radius: 4px; background: #e8dcc4; }
.stat .pips i.on { background: #ffc933; }
.stat svg { width: 26px; height: 26px; }
.d-need { width: 100%; display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--muted); }
.d-need .jar { flex: 1; height: 20px; border-radius: 99px; background: #efe3cc; overflow: hidden; }
.d-need .jar i { display: block; height: 100%; background: linear-gradient(90deg, #ffe45c, #ffb22e); }
.buy-btn { display: flex; align-items: center; gap: 10px; padding: 14px 34px; border-radius: 99px; font-size: var(--text-l); color: #fff; background: linear-gradient(#5fd06a, #36a845); box-shadow: 0 7px 0 #217a2f; min-height: 72px; font-variant-numeric: tabular-nums; }
.buy-btn svg { width: 40px; height: 40px; }
.buy-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #217a2f; }
.buy-btn.off { background: linear-gradient(#cfc4b6, #b3a797); box-shadow: 0 7px 0 #8e8374; }
.buy-btn.use { background: linear-gradient(#ffc24a, #ff9f1a); box-shadow: 0 7px 0 #c26d00; }

/* ---------------------------------------------------------- word card */
.word-card { background: var(--surface); border-radius: 36px; padding: clamp(16px, 3vh, 30px) clamp(16px, 3vw, 36px) clamp(20px, 4vh, 36px); width: min(96vw, 860px); display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 3vh, 28px); box-shadow: 0 10px 0 var(--edge), 0 20px 40px rgba(0,0,0,.3); animation: sheetin .35s cubic-bezier(.2, 1.4, .5, 1); position: relative; }
.word-row { display: flex; align-items: center; gap: 18px; }
.word-row .say { width: 76px; height: 76px; font-size: 40px; color: var(--accent); }
.word { display: flex; gap: 4px; font-size: clamp(64px, 13vmin, 130px); font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: .04em; }
.word i { font-style: normal; display: inline-block; padding: 0 2px; border-radius: 12px; transition: transform .12s, background .12s, color .12s; }
.word i.hl { background: #ffe57a; color: #b3350f; transform: translateY(-8px) scale(1.12); }
.word.sweep i { background: #d9f7c4; }
.choices { display: flex; gap: clamp(12px, 3vw, 28px); justify-content: center; flex-wrap: wrap; }
.choice { width: clamp(150px, 24vmin, 220px); height: clamp(150px, 24vmin, 220px); border-radius: 30px; background: #fff; box-shadow: 0 8px 0 var(--edge); padding: 8px; transition: transform .1s; position: relative; }
.choice img { width: 100%; height: 100%; object-fit: contain; }
.choice:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--edge); }
.choice.no { animation: no .5s; opacity: .45; filter: grayscale(.6); }
@keyframes no { 20%, 60% { transform: translateX(-12px) rotate(-3deg); } 40%, 80% { transform: translateX(12px) rotate(3deg); } }
.choice.yes { background: #d9f7c4; box-shadow: 0 8px 0 #7cbf55, 0 0 0 8px #7dd35a; animation: yes .6s; }
@keyframes yes { 40% { transform: scale(1.15) rotate(-3deg); } }
.choice.glow { animation: hintglow 1s infinite; }
@keyframes hintglow { 50% { box-shadow: 0 8px 0 var(--edge), 0 0 0 8px rgba(255, 210, 63, .9); transform: scale(1.04); } }
.choice .cap { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: var(--surface); border-radius: 99px; padding: 2px 12px; font-size: 22px; }

/* ---------------------------------------------------------- pause */
.panel { background: var(--surface); border-radius: 32px; padding: 22px 26px 24px; width: min(94vw, 560px); max-height: 94dvh; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: 0 10px 0 var(--edge), 0 20px 40px rgba(0,0,0,.3); }
.panel h2 { margin: 0; font-size: var(--text-l); }
.toggles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.tog { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border-radius: 22px; background: #d9f7c4; box-shadow: 0 5px 0 #a9dd8a; font-size: 14px; min-height: 84px; }
.tog svg { width: 36px; height: 36px; }
.tog.off { background: #eee5d6; box-shadow: 0 5px 0 #d4c6ad; color: var(--muted); }
.tog.off svg { opacity: .5; }
.parents { width: 100%; border-top: 3px dashed var(--edge); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; align-items: center; font-weight: 500; }
.p-title { font-size: 15px; color: var(--muted); font-weight: 700; }
.seg { display: flex; align-items: center; gap: 6px; background: #f1e7d4; padding: 5px; border-radius: 99px; }
.seg-label { padding: 0 10px; font-size: 14px; color: var(--muted); font-weight: 700; }
.seg button { padding: 10px 16px; border-radius: 99px; background: transparent; font-size: 15px; min-height: 44px; }
.seg button.on { background: #fff; box-shadow: 0 3px 0 var(--edge); }
.p-stats { font-size: 14px; color: var(--muted); text-align: center; line-height: 1.5; }
.p-save { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.p-saved { font-size: 14px; color: var(--green); font-weight: 700; text-align: center; }
.p-saved.bad { color: var(--danger); }
.p-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.text-btn { padding: 10px 16px; border-radius: 99px; background: #f1e7d4; font-size: 14px; color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.text-btn.danger.armed { background: var(--danger); color: #fff; }

/* ---------------------------------------------------------- toast */
#toast { position: fixed; left: 50%; top: calc(96px + var(--sat)); transform: translateX(-50%) translateY(-20px); background: #3a2a33; color: #fff; padding: 12px 22px; border-radius: 99px; font-size: var(--text-m); opacity: 0; transition: opacity .25s, transform .25s; z-index: 50; pointer-events: none; white-space: nowrap; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* small phones held upright: tuck things in */
@media (max-width: 600px) {
  .goal { top: auto; bottom: calc(var(--btn) * 2 + 52px + var(--sab)); max-width: 92vw; min-height: 56px; }
  .goal img { width: 48px; height: 48px; }
  .hud-bc { bottom: calc(var(--btn) + 30px + var(--sab)); }
  .toggles { grid-template-columns: repeat(2, 1fr); }
  .tab { width: 72px; height: 76px; }
  .tab img { width: 52px; height: 50px; }
  .grid { grid-template-columns: repeat(2, 1fr); padding: 12px; gap: 12px; }
  .item img { width: 110px; height: 100px; }
}
@media (orientation: portrait) {
  .logo span, .logo b { font-size: clamp(46px, 16vw, 130px); }
  .logo span { font-size: clamp(30px, 10vw, 90px); }
}
@media (max-height: 500px) {
  :root { --btn: 64px; }
  .pill { min-height: 48px; }
  .pill .ico { width: 36px; height: 36px; }
  .goal { min-height: 54px; font-size: 17px; padding: 4px 12px 4px 6px; }
  .goal img { width: 44px; height: 44px; }
  .goal-bar { height: 9px; }
  .tank { min-height: 54px; }
  .item { min-height: 170px; }
  .item img { height: 96px; }
  .tab { width: 70px; height: 70px; }
  .tab img { width: 48px; height: 46px; }
}
/* ---------------------------------------------------------- flying */
.fly-only { display: none !important; }
body.flying .fly-only { display: flex !important; }
body.flying .fly-only.hidden { display: none !important; }
body.flying .hud-bc, body.flying .hud-br { display: none; }
body.flying .hud-tr { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; width: min(46vw, 330px); }
body.flying .hud-tr #btnPause { order: 9; }
body.flying .goal { max-width: min(38vw, 440px); }
/* in the air, the vehicle buttons fold into one "back to the farm" button */
body.flying .hud-bl { bottom: auto; top: calc(12px + var(--sat) + 124px); }
body.flying .veh { width: 64px; height: 64px; border-radius: 20px; }
body.flying .veh[data-v="tractor"], body.flying .veh.on { display: none; }
.drive-only { display: none !important; }
body.driving .drive-only { display: flex !important; }
body.driving #lever { display: none !important; }
#btnJump { position: absolute; right: calc(16px + var(--sar)); bottom: calc(16px + var(--sab)); width: clamp(96px, 15vmin, 128px); height: clamp(96px, 15vmin, 128px); flex-direction: column; gap: 0; font-size: 16px; color: #fff; background: radial-gradient(circle at 40% 30%, #ffae5a, #ff7a1a); box-shadow: 0 7px 0 #c2530a, 0 12px 18px rgba(0,0,0,.2); }
#btnJump svg { width: 50%; height: 50%; }
#btnJump:active { transform: translateY(5px); box-shadow: 0 2px 0 #c2530a; }
#btnHorn { position: absolute; right: calc(28px + var(--sar)); bottom: calc(40px + var(--sab) + clamp(96px, 15vmin, 128px)); width: 72px; height: 72px; }
#btnHorn svg { width: 44px; height: 44px; }
#btnShop2 svg { width: 38px; height: 38px; color: var(--pink); }
.mini { width: 110px; height: 110px; border-radius: 50%; box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 10px 18px rgba(0,0,0,.2); cursor: pointer; }
body.flying .mini { flex-basis: 100%; max-width: fit-content; margin-left: auto; }
body.flying .mini.hidden { display: none; }
#stickZone { position: absolute; left: 0; bottom: 0; width: 44vw; height: 64vh; align-items: flex-end; touch-action: none; }
#stickBase {
  position: absolute; left: calc(22px + var(--sal)); bottom: calc(22px + var(--sab));
  width: clamp(124px, 24vmin, 200px); height: clamp(124px, 24vmin, 200px); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.34), rgba(255,255,255,.16) 70%);
  border: 4px solid rgba(255,255,255,.8); box-shadow: 0 8px 18px rgba(0,0,0,.18); pointer-events: none;
}
#stickBase.free { bottom: auto; }
#stickBase.on { background: radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,.22) 70%); }
#stickBase .ar { position: absolute; width: 0; height: 0; border: 10px solid transparent; opacity: .85; }
#stickBase .ar.up { left: 50%; top: 6px; margin-left: -10px; border-bottom: 13px solid #fff; border-top: 0; }
#stickBase .ar.down { left: 50%; bottom: 6px; margin-left: -10px; border-top: 13px solid #fff; border-bottom: 0; }
#stickBase .ar.left { top: 50%; left: 6px; margin-top: -10px; border-right: 13px solid #fff; border-left: 0; }
#stickBase .ar.right { top: 50%; right: 6px; margin-top: -10px; border-left: 13px solid #fff; border-right: 0; }
#stickKnob {
  position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ff8a7a, #e0483f 70%); box-shadow: 0 6px 0 #a8322d, 0 10px 14px rgba(0,0,0,.25);
}
#lever {
  position: absolute; right: calc(16px + var(--sar)); bottom: calc(16px + var(--sab)); width: clamp(84px, 13vmin, 110px);
  height: clamp(190px, 50vh, 330px); flex-direction: column; align-items: center; gap: 6px; padding: 8px 0;
  border-radius: 30px; background: rgba(255,250,240,.9); box-shadow: 0 6px 0 var(--edge), 0 10px 18px rgba(0,0,0,.18); touch-action: none;
}
#lever .lv-top, #lever .lv-bot { width: 44px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: #3d8fe0; flex: none; }
#lever .lv-top { background: #ff7a45; }
#lever svg { width: 30px; height: 30px; }
#lever svg.h, #lever.hover svg:not(.h) { display: none; }
#lever.hover svg.h { display: block; }
#leverTrack { position: relative; flex: 1; width: 44%; border-radius: 99px; background: #e8dcc4; box-shadow: inset 0 4px 0 rgba(0,0,0,.1); }
#leverFill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 99px; background: linear-gradient(#ff9f3d, #ffd23f); }
#lever.hover #leverFill { background: linear-gradient(#8fd3ff, #bfeaff); }
#leverKnob {
  position: absolute; left: 50%; top: 0; width: 170%; aspect-ratio: 1.3; margin-left: -85%; border-radius: 18px;
  background: linear-gradient(#5a6070, #3a3f4f); box-shadow: 0 5px 0 #23262f, 0 8px 12px rgba(0,0,0,.25);
}
#leverKnob::after { content: ""; position: absolute; left: 18%; right: 18%; top: 44%; height: 12%; border-radius: 99px; background: rgba(255,255,255,.5); }
#lever.on #leverKnob { background: linear-gradient(#7a8298, #4a5063); }
#lever.hint { animation: glow 1.1s infinite; }
#btnBoost { position: absolute; right: calc(34px + var(--sar) + clamp(84px, 13vmin, 110px)); bottom: calc(16px + var(--sab)); width: 84px; height: 84px; flex-direction: column; gap: 0; font-size: 14px; background: linear-gradient(#ffe45c, #ffb22e); box-shadow: 0 6px 0 #c27a00; }
#btnBoost svg { width: 44px; height: 44px; }
#btnBoost.on { transform: translateY(4px) scale(1.08); box-shadow: 0 2px 0 #c27a00, 0 0 0 6px rgba(255,120,40,.6); }
#btnCam svg, #btnMap svg { width: 42px; height: 42px; }
/* the cockpit: window posts and the instrument panel */
#dash { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; z-index: 12; pointer-events: none; }
.frame { position: fixed; inset: 0; pointer-events: none; z-index: 11; overflow: hidden; }
.frame .post { position: absolute; top: -10vh; width: 30px; height: 110vh; background: linear-gradient(90deg, #2c3040, #4a5063 60%, #2c3040); }
.frame .post { width: 26px; }
.frame .post.l { left: 3vw; transform: rotate(7deg); transform-origin: 50% 100%; }
.frame .post.r { right: 3vw; transform: rotate(-7deg); transform-origin: 50% 100%; }
.frame .bar { position: absolute; left: -5vw; right: -5vw; top: -30px; height: calc(46px + var(--sat)); background: #2c3040; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.frame.heli { background: radial-gradient(ellipse 72% 80% at 50% 58%, transparent 90%, #2c3040 91%); }
.frame.heli .post, .frame.heli .bar, .frame.balloon .post, .frame.balloon .bar { display: none; }
.frame.balloon { background: linear-gradient(transparent 70%, rgba(0,0,0,0) 70%); }
body.cockpit #vehBtns, body.cockpit .hud-tl { z-index: 13; }
/* a race in progress */
.race-pill { position: absolute; top: calc(92px + var(--sat)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 99px; background: #3a2a33; color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.25); font-size: var(--text-m); z-index: 2; }
.race-pill .flag { width: 38px; height: 38px; }
.rp-body { display: flex; flex-direction: column; line-height: 1.05; }
.rp-body span { font-size: 15px; color: #ffd23f; }
.rp-time { font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; font-size: var(--text-l); }
.rp-x { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; display: grid; place-items: center; font-size: 20px; }
/* the big map */
#mapSheet { z-index: 34; }
#mapStage { position: relative; border-radius: 28px; box-shadow: 0 10px 0 rgba(0,0,0,.2), 0 20px 40px rgba(0,0,0,.3); animation: sheetin .28s cubic-bezier(.2, 1.4, .5, 1); }
#mapCanvas { width: 100%; height: 100%; border-radius: 28px; display: block; border: 6px solid var(--surface); }
#mapClose { position: absolute; top: -12px; right: -12px; }
.pin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; background: none; padding: 0; }
.pin img { width: clamp(44px, 8vmin, 76px); height: clamp(44px, 8vmin, 76px); border-radius: 50%; background: rgba(255,250,240,.92); box-shadow: 0 4px 0 var(--edge); padding: 3px; }
.pin span { margin-top: -6px; background: var(--surface); border-radius: 99px; padding: 1px 9px; font-size: clamp(13px, 1.8vmin, 18px); box-shadow: 0 3px 0 var(--edge); }
.pin .ok { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; font-style: normal; font-size: 16px; display: grid; place-items: center; }
.pin.target img { box-shadow: 0 0 0 6px #ffd23f, 0 4px 0 var(--edge); animation: bump .8s infinite; }
.pin.race img { box-shadow: 0 0 0 4px #3a2a33, 0 4px 0 var(--edge); }
.pin.race span { background: #3a2a33; color: #fff; }
.pin:active { transform: translate(-50%, -50%) scale(.94); }
#mapMe { position: absolute; width: 44px; height: 44px; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
#mapMe svg { width: 100%; height: 100%; }
@media (max-height: 500px) {
  body.flying .hud-tr .round-btn { width: 54px; height: 54px; }
  body.flying .hud-bl { top: calc(8px + var(--sat) + 100px); }
  body.flying .veh { width: 54px; height: 54px; }
  .mini { width: 88px; height: 88px; }
  #lever { height: clamp(150px, 54vh, 330px); width: 80px; }
  #btnBoost { width: 70px; height: 70px; right: calc(28px + var(--sar) + 80px); }
  #btnHorn { width: 58px; height: 58px; bottom: calc(26px + var(--sab) + clamp(96px, 15vmin, 128px)); }
}
@media (max-width: 600px) {
  body.flying .goal { top: auto; bottom: calc(clamp(124px, 24vmin, 200px) + 40px + var(--sab)); left: auto; right: 12px; transform: none; max-width: 60vw; }
  body.flying .hud-tr { width: 54vw; }
}
html.rm *, html.rm *::before { animation-duration: .001s !important; animation-iteration-count: 1 !important; }