:root { color-scheme: dark; font-family: Krattet, ui-rounded, system-ui, sans-serif; --cream:#fff0bd; --ink:#19180f; --moss:#26351d; --lime:#cbe85b; --rust:#d86b34; }
@font-face { font-family: Krattet; src: url("ui/PixelifySans.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
.wordmark { display:block; image-rendering:pixelated; image-rendering:crisp-edges; pointer-events:none; user-select:none; }
* { box-sizing: border-box; }
html, body { touch-action: none; overscroll-behavior: none; }
body { margin:0; min-height:100vh; min-height:100dvh; display:grid; place-items:center; overflow:hidden; overscroll-behavior:none; background:radial-gradient(circle at 50% 30%,#344025,#10140e 72%); }
main { position:relative; width:min(100vw,calc(100vh * 1672 / 941)); width:min(100vw,calc(100dvh * 1672 / 941)); aspect-ratio:1672/941; overflow:hidden; background:#24301c; isolation:isolate; }
canvas { display:block; width:100%; height:100%; image-rendering:pixelated; touch-action: none; }
.panel { border:1px solid #edd58c28; background:linear-gradient(155deg,#252b1948,#11140d38); color:var(--cream); box-shadow:0 3px 0 #090b0730,0 7px 16px #0002,inset 0 1px #fff1; backdrop-filter:blur(3px); }
.topbar { position:absolute; z-index:10; inset:6px 6px auto 205px; display:grid; grid-template-columns:minmax(180px,1fr) auto auto; gap:5px; align-items:start; pointer-events:none; }
.brand { display:none !important; }
.brand-kicker,.mission-label,.event-banner small { color:#d9bd68; font-size:9px; font-weight:900; letter-spacing:.15em; }
.brand strong { margin-top:2px; font-family:Krattet, sans-serif; font-size:clamp(20px,2.1vw,34px); letter-spacing:.08em; color:#fff3c9; text-shadow:2px 2px #4c2d1d; }
.brand-sub { font-size:11px; color:#b7c992; letter-spacing:.18em; text-transform:uppercase; }
.progress { grid-column:1; justify-self:center; width:min(305px,100%); padding:4px 7px 5px; border-radius:8px; }
.resources { grid-column:2; }
.meta { grid-column:3; display:flex; align-items:center; gap:3px; padding:3px; border-radius:8px; pointer-events:auto; }
.game-clock { padding:0 8px; height:26px; display:grid; place-items:center; color:#fff0bd; font:800 11px system-ui; letter-spacing:.03em; white-space:nowrap; }
.meta-btn,.weather-icon { min-width:28px; height:26px; padding:0 6px; border:1px solid #d7c88766; border-radius:6px; background:#2027199c; color:#fff0bd; font:800 11px system-ui; cursor:pointer; transition:border-color .12s, background .12s, transform .12s; }
.meta-btn:hover,.weather-icon:hover { border-color:#d9c276; background:#303a21cc; }
.meta-btn:active,.weather-icon:active { transform:scale(.94); }
.weather-icon { display:grid; place-items:center; cursor:pointer; opacity:.9; }
.level-line { display:flex; justify-content:space-between; gap:14px; font-size:10px; }
.level-line strong { color:#fff2b3; text-transform:uppercase; letter-spacing:.08em; }
.level-line span { color:#b8c99a; }
.xp-track { position:relative; height:10px; margin-top:3px; overflow:hidden; border:1px solid #080a06; border-radius:4px; background:#090d08; box-shadow:inset 0 2px 5px #000; }
.xp-track i { position:absolute; inset:0 auto 0 0; width:0; background:repeating-linear-gradient(135deg,#b8da52 0 9px,#d6ec70 9px 14px); box-shadow:0 0 12px #c9ee65aa; transition:width .35s cubic-bezier(.2,.9,.25,1.25); }
.xp-track.gleam::after { content:''; position:absolute; inset:0 auto 0 -20%; width:40%; background:linear-gradient(90deg,transparent,#fff8c0aa,transparent); animation:xp-gleam .48s ease; pointer-events:none; }
.xp-track span { position:absolute; inset:0; display:grid; place-items:center; color:#fffbd8; font-size:8px; font-style:normal; font-weight:900; letter-spacing:.08em; text-shadow:0 1px 2px #000; }
.resources { display:flex; gap:1px; padding:3px; border-radius:10px 5px 9px 6px; }
.resource { min-width:64px; padding:2px 5px 3px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 4px; border-right:1px solid #fff2; }
.resource:last-child { border:0; }
.resource>span { grid-row:1/4; font-size:17px; filter:drop-shadow(0 2px 1px #0008); }
.resource b { font-size:17px; line-height:.95; color:#fff6cc; transition:transform .2s; font-variant-numeric:tabular-nums; }
.resource small, .resource em { display:none; }
.resource.wallet em { display:block; grid-column:2; font-size:8px; font-style:normal; font-weight:800; color:#cbe85b; letter-spacing:.03em; line-height:1.1; }
.resource.bump b { animation:bump .35s; color:#fff; }
.mission { position:absolute; z-index:11; left:6px; top:6px; max-width:194px; padding:4px 7px; border-radius:5px 9px 5px 8px; display:grid; gap:0; pointer-events:none; transform:rotate(.2deg); transition:.25s; opacity:.62; }
.mission strong { font:700 11px Krattet, sans-serif; }
.mission>span:last-child { display:none; }
.mission.compact { grid-template-columns:auto 1fr; gap:7px; align-items:center; padding-block:5px; opacity:.42; }
.mission.compact strong { font-size:11px; }.mission.compact>span:last-child{display:none}.mission.compact .mission-label{font-size:7px}
.controls { position:absolute; z-index:8; left:72px; bottom:10px; display:flex; align-items:center; gap:5px; padding:6px 9px; border-radius:7px; font-size:9px; color:#aab795; pointer-events:none; transition:.25s; }
.controls.auto-hidden { opacity:0; transform:translateY(8px); }
.help-toggle { display:none; position:absolute; z-index:12; left:72px; bottom:12px; width:27px; height:27px; border:1px solid #d7c88766; border-radius:50%; background:#2027199c; color:#fff0bd; font-weight:900; cursor:pointer; opacity:.72; }
.help-toggle.visible { display:block; }
kbd { padding:2px 5px; border:1px solid #d7c88777; border-bottom-width:2px; border-radius:4px; background:#303624; color:#fff0bd; font:800 8px system-ui; }
.plant-menu { position:absolute; z-index:20; right:12px; bottom:12px; width:min(292px,calc(100% - 24px)); max-height:calc(100% - 86px); padding:0; border:1px solid #cbaa5b70; border-radius:9px 15px 9px 13px; background:#171b1094; color:#f4e9c9; box-shadow:0 4px 0 #080a064d,0 10px 24px #0005; backdrop-filter:blur(5px); animation:menu-in .18s cubic-bezier(.2,.9,.2,1.25); overflow:auto; }
.plant-menu[hidden],.book-menu[hidden],.toast[hidden],.combo[hidden],.event-banner[hidden],.pause-root[hidden],.pause-page[hidden],.bed-current[hidden],.intro-root[hidden],.coach[hidden],.vow-root[hidden],.ninja-root[hidden] { display:none; }
.bed-current { margin:0; padding:6px 9px 0; color:#c9d9a4; font-size:10px; }
.plant-menu header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:8px 9px 7px; background:linear-gradient(90deg,#394528a8,#242b199c); border-bottom:1px solid #d5bd7244; backdrop-filter:blur(5px); }
.plant-menu header div { display:grid; }
.plant-menu header small { color:#b8d26d; font-weight:900; letter-spacing:.12em; }
.plant-menu header strong { font:700 15px Krattet, sans-serif; }
.plant-menu header button { width:26px;height:26px;border:1px solid #d8c47a55;border-radius:50%;background:#171b10aa;color:#f4e9c9;font-size:19px;line-height:20px;cursor:pointer; }
#plant-options { display:grid; gap:4px; padding:6px; }
.crop-option { position:relative; display:grid; grid-template-columns:1fr auto; gap:1px 8px; padding:7px 8px; border:1px solid #78673d80; border-radius:5px 9px 5px 8px; background:linear-gradient(100deg,#303a219c,#252d1c8f); color:#fff4d2; text-align:left; cursor:pointer; transition:.15s; overflow:hidden; }
.crop-option:hover:not(:disabled) { background:linear-gradient(100deg,#4b5d30,#344025); transform:translateX(3px); border-color:#d9c276; }
.crop-option:active:not(:disabled) { transform:translateX(3px) scale(.985); }
.crop-option:disabled { opacity:.42; cursor:not-allowed; filter:grayscale(.6); }
.crop-option strong { font-size:12px; }.crop-option b { color:#dcee85;font-size:10px; }.crop-option small { grid-column:1/-1;color:#aeb997;font-size:8px; line-height:1.35; }
.crop-option .crop-meta { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:3px 8px; color:#d7e3b3; font-size:8px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.plant-menu footer { padding:6px 8px 7px; border-top:1px dashed #b79f5d44; color:#9daa89; font-size:8px; }
.book-menu { position:absolute; z-index:20; left:8px; bottom:8px; width:min(236px,calc(100% - 16px)); pointer-events:auto; transform:rotate(-1.2deg); transform-origin:bottom left; animation:notebook-in .22s cubic-bezier(.18,.9,.22,1.12) forwards; }
.book-shell { position:relative; margin-top:16px; display:flex; flex-direction:column; max-height:min(278px,52vh); border:2px solid #5a3c22; border-radius:4px 10px 5px 4px; background:
  linear-gradient(180deg,#3a2816 0 10px,#d4c29a 10px 100%);
  box-shadow:5px 6px 0 #120e0870, 0 12px 22px #0005, inset 0 0 0 1px #ead9a844; color:#2c2214; }
.book-tabs { position:absolute; top:-15px; left:6px; right:28px; display:flex; flex-direction:row; flex-wrap:nowrap; gap:2px; padding:0; width:auto; }
.book-tabs button { writing-mode:horizontal-tb; transform:none; flex:1 1 auto; border:1px solid #5a3d22; border-bottom:0; border-radius:5px 5px 0 0; background:#7a5630; color:#f4e4c0; font:800 7px system-ui; letter-spacing:.04em; padding:4px 3px 5px; cursor:pointer; white-space:nowrap; }
.book-tabs button:hover { background:#8a6438; }
.book-tabs button.on { background:#d8c69a; color:#3a2a14; padding-bottom:7px; margin-bottom:-2px; }
.book-toggle { position:absolute; z-index:13; left:8px; bottom:8px; width:56px; height:60px; display:grid; place-items:center; padding:4px; border:1px solid #d7c88766; border-radius:10px 13px 9px 11px; background:#171b10a8; cursor:pointer; box-shadow:0 3px 0 #090b0738, 0 8px 16px #0004; backdrop-filter:blur(3px); transform:rotate(-3deg); transition:border-color .12s, background .12s, transform .12s; }
.book-toggle:hover { border-color:#d9c276; background:#303a21cc; transform:rotate(-4deg) scale(1.04); }
.book-toggle:active { transform:rotate(-2deg) scale(.96); }
.book-toggle img { width:44px; height:48px; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 2px 0 #0006); pointer-events:none; }
.book-close { position:absolute; top:-14px; right:0; z-index:2; width:20px; height:20px; border:1px solid #5a3d22; border-radius:5px 5px 0 0; background:#f3e6c4; color:#3a2a14; font-size:15px; line-height:16px; cursor:pointer; }
.book-spread { display:flex; flex-direction:column; min-height:0; max-height:min(262px,48vh); overflow:hidden; }
.book-page { padding:8px 9px 7px; overflow:auto; }
.book-left { flex:0 0 auto; background:linear-gradient(180deg,#efe2c4,#f4e9d0); border-right:0; border-bottom:1px dashed #b89a5c88; padding-bottom:6px; }
.book-right { flex:1 1 auto; min-height:0; overflow:auto; background:linear-gradient(180deg,#f7edd4,#efe2c4); transform-origin:top center; }
.book-right.flip { animation:page-flip .22s ease; }
.book-page small { display:block; color:#7a5a28; font-weight:900; letter-spacing:.1em; font-size:7px; }
.book-mark { width:198px; max-width:100%; height:auto; margin:0 0 4px; filter:drop-shadow(0 1px 0 #ead9a8); }
.book-page strong { display:block; margin:2px 0 4px; font:700 13px Krattet, sans-serif; color:#2c2214; }
.book-page p, .book-note { margin:0 0 5px; color:#4a3c28; font-size:10px; line-height:1.35; }
.book-left p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; font-size:9px; }
.book-menu .crop-option { background:linear-gradient(100deg,#efe6c8,#e7d7b0); color:#2c2214; border-color:#b89a5c88; padding:5px 6px; gap:0 6px; }
.book-menu .crop-option:hover:not(:disabled) { background:linear-gradient(100deg,#fff6dc,#ead9b0); transform:none; }
.book-menu .crop-option b { color:#5a6b20; }
.book-menu .crop-option small { color:#6a5a40; }
.book-menu .crop-option .crop-meta { font-size:7px; gap:2px 6px; }
.book-menu footer { color:#6a5a40; padding:4px 2px 0; font-size:8px; }
.book-menu .bed-current { color:#5a4a30; padding:0; font-size:9px; }
.book-menu #plant-options { padding:0; gap:3px; }
.hero-menu { left:auto; right:10px; bottom:10px; transform:rotate(1.1deg); transform-origin:bottom right; }
#hero-options { display:grid; gap:3px; }
.book-list { display:grid; gap:4px; }
.book-list div { padding:4px 6px; border:1px solid #c4a66a66; border-radius:5px; background:#fff8e888; }
.book-list strong { font-size:11px; margin:0; }
.book-list span { display:block; font-size:9px; color:#6a5a40; }
.book-list .locked { opacity:.45; }
.book-dl { display:grid; grid-template-columns:1fr auto; gap:4px 8px; margin:2px 0 0; }
.book-dl dt { color:#6a5a40; font-size:10px; }
.book-dl dd { margin:0; text-align:right; color:#2c2214; font:700 11px Krattet, sans-serif; }
#plant-menu:not([hidden]) ~ .controls { opacity:0; }
#plant-menu:not([hidden]) ~ .help-toggle { opacity:0; pointer-events:none; }
#plant-menu:not([hidden]) ~ .book-toggle { opacity:0; pointer-events:none; }
#plant-menu:not([hidden]) ~ .coach { left:252px; bottom:10px; }
.ninja-root { position:absolute; z-index:46; inset:0; background:#1a140e; }
.ninja-root canvas { width:100%; height:100%; display:block; image-rendering:auto; cursor:none; touch-action:none; }
.ninja-leave { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:2; padding:6px 12px; border:1px solid #d7c88788; border-radius:8px; background:#171b10cc; color:#fff0bd; font:700 11px Krattet, sans-serif; cursor:pointer; transition:border-color .12s, background .12s; }
.ninja-leave:hover { border-color:#d9c276; background:#171b10ee; }
.pause-root { position:absolute; z-index:50; inset:0; display:grid; place-items:center; background:#0c1008a8; pointer-events:auto; }
.pause-card { width:min(320px,86%); padding:12px 12px 10px; border-radius:10px 16px 10px 14px; }
.pause-card header { margin-bottom:8px; display:grid; justify-items:center; text-align:center; gap:2px; }
.pause-card small { color:#d9bd68; font-size:9px; font-weight:900; letter-spacing:.16em; }
.pause-kicker { width:159px; max-width:100%; height:auto; image-rendering:auto; filter:drop-shadow(1px 2px 0 #2a1a0c); }
.pause-mark { width:156px; max-width:100%; height:auto; margin:0 auto; filter:drop-shadow(1px 2px 0 #2a1a0c); }
.pause-card h2 { margin:0; }
.pause-page { display:grid; gap:5px; }
.pause-page.copy { gap:8px; }
.pause-page p, .pause-page dd { margin:0; color:#d7e0c4; font-size:12px; line-height:1.4; }
.pause-page button, .pause-page label, .pause-page select { width:100%; }
.pause-card button { padding:8px 10px; border:1px solid #78673d80; border-radius:6px 10px 6px 8px; background:linear-gradient(100deg,#303a219c,#252d1c8f); color:#fff4d2; font:700 13px Krattet, sans-serif; cursor:pointer; text-align:left; transition:border-color .12s, background .12s, transform .12s; }
.pause-card button:hover { border-color:#d9c276; background:linear-gradient(100deg,#4b5d30,#344025); }
.pause-card button:active { transform:scale(.985); }
.pause-card button.ghost { font-family:system-ui; font-size:11px; opacity:.85; }
.pause-card button.danger { color:#ffd0b0; border-color:#a45a3a88; }
.pause-page label { display:grid; gap:3px; color:#e8d9a4; font-size:11px; font-weight:800; }
.pause-page label.check { grid-template-columns:auto 1fr; align-items:center; gap:8px; font-weight:700; }
.pause-page input[type=range], .pause-page select { accent-color:#cbe85b; background:#171b10; color:#fff0bd; border:1px solid #78673d80; border-radius:4px; }
.pause-page dl { display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin:0; font-size:12px; }
.pause-page dt { color:#b8c99a; } .pause-page dd { text-align:right; color:#fff0bd; font-weight:800; }
.toast { position:absolute; z-index:25; left:50%; bottom:31px; transform:translateX(-50%); padding:5px 11px; border:1px solid #e6ca8366; border-radius:5px 12px 5px 12px; background:#171b1088; color:#fff0b8cc; box-shadow:0 3px 10px #0004; pointer-events:none; font:700 11px system-ui; animation:toast-in .18s cubic-bezier(.2,.9,.3,1.3); }
.feedback-layer { position:absolute; z-index:30; inset:0; pointer-events:none; overflow:hidden; }
.float-reward { position:absolute; display:grid; justify-items:center; color:#fff8c7; font-weight:1000; line-height:1; text-shadow:0 2px 0 #3a230d,2px 0 #3a230d,-2px 0 #3a230d; animation:reward-fly 1.25s ease-out forwards; }
.float-reward strong { font-size:clamp(18px,2.2vw,30px); font-family:Krattet,sans-serif; }.float-reward small { margin-top:4px;color:#d9f16d;font-size:10px; }
.float-reward.frenzy .frenzy-mark { width:216px; max-width:46vw; height:auto; filter:drop-shadow(0 2px 0 #3a230d); }
.float-reward.frenzy strong { font-size:clamp(18px,2.4vw,30px); letter-spacing:.04em; }
.event-banner.short { animation:event-in .7s ease forwards; }
.event-banner { position:absolute; z-index:40; left:50%; top:22%; width:min(420px,76%); transform:translate(-50%,-50%) rotate(-1deg); display:grid; justify-items:center; padding:8px 20px 10px; color:#fff3bdcc; background:linear-gradient(90deg,transparent,#25180f72 12%,#25180f72 88%,transparent); text-align:center; text-shadow:0 2px #401f1288; pointer-events:none; animation:event-in 1.45s ease forwards; }
.event-banner strong { font:800 clamp(18px,2.6vw,32px) Krattet, sans-serif; letter-spacing:.04em; }.event-banner span { color:#d8e995bb;font-size:11px; }
.combo { position:absolute; z-index:15; right:16px; top:100px; width:118px; padding:6px 7px 10px; color:#fff0ad; background:#351f129c; border:2px solid #e78a3dcc; transform:rotate(2deg); box-shadow:4px 5px 0 #160d0866; pointer-events:none; }
.combo.pop { animation:combo-pop .22s cubic-bezier(.2,.9,.25,1.12); }
.combo .combo-mark { width:104px; max-width:100%; height:auto; margin:0 0 2px; filter:drop-shadow(1px 1px 0 #5d2417); }
.combo strong { display:block; font-family:Krattet,sans-serif; font-size:28px; line-height:1; color:#ffb13d; text-shadow:2px 2px #5d2417; } .combo i { position:absolute;left:7px;right:7px;bottom:4px;height:3px;background:#ffb13d;transform-origin:left;animation:combo-drain 2.6s linear forwards; }
@keyframes bump { 45%{transform:scale(1.55) rotate(-5deg)} }
@keyframes menu-in { from{opacity:0;transform:translateY(9px) scale(.94)} }
@keyframes notebook-in { from{opacity:0;transform:translateY(14px) rotate(-7deg) scale(.9)} to{opacity:1;transform:rotate(-1.2deg) scale(1)} }
@keyframes page-flip { from{opacity:.45;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes toast-in { from{opacity:0;transform:translate(-50%,10px) scale(.9)} }
@keyframes reward-fly { 0%{opacity:0;transform:translate(-50%,10px) scale(.72)} 14%{opacity:1;transform:translate(-50%,-8px) scale(1.12)} 42%{opacity:1;transform:translate(-50%,-30px) scale(1.04)} 100%{opacity:0;transform:translate(-50%,-105px) scale(.92)} }
@keyframes combo-drain { to{transform:scaleX(0)} }
@keyframes combo-pop { 0%{transform:rotate(2deg) scale(.84)} 58%{transform:rotate(-1.4deg) scale(1.1)} 100%{transform:rotate(2deg) scale(1)} }
@keyframes xp-gleam { from{transform:translateX(0)} to{transform:translateX(280%)} }
@keyframes event-in { 0%{opacity:0;transform:translate(-50%,-30%) scale(.72) rotate(-3deg)} 12%,72%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)} 100%{opacity:0;transform:translate(-50%,-65%) scale(1.04)} }
.intro-root { position:absolute; z-index:60; inset:0; display:grid; place-items:center; background:#0c1008d4; pointer-events:auto; }
.intro-card { width:min(400px,90%); padding:16px 16px 14px; border-radius:12px 18px 12px 16px; text-align:center; }
.intro-card small { color:#d9bd68; font-size:9px; font-weight:900; letter-spacing:.16em; }
.intro-title { margin:8px 0 12px; display:grid; justify-items:center; gap:6px; }
.wordmark-title { width:317px; max-width:100%; height:auto; filter:drop-shadow(2px 3px 0 #2a1a0c); }
.wordmark-sub { width:236px; max-width:94%; height:auto; filter:drop-shadow(1px 2px 0 #2a1a0c); }
.intro-card p { margin:0 0 8px; color:#d7e0c4; font-size:14px; line-height:1.45; }
.intro-vow { color:#f0e2a4 !important; font:600 14px Krattet, sans-serif; }
.intro-card button { width:100%; margin-top:8px; padding:10px 12px; border:1px solid #78673d80; border-radius:6px 10px 6px 8px; background:linear-gradient(100deg,#4b5d30,#344025); color:#fff4d2; font:700 14px Krattet, sans-serif; cursor:pointer; transition:border-color .12s, transform .12s, filter .12s; }
.intro-card button:hover { border-color:#d9c276; filter:brightness(1.08); }
.intro-card button:active { transform:scale(.985); }
.coach { position:absolute; z-index:36; left:12px; bottom:76px; max-width:min(240px,70%); padding:8px 10px; border:1px solid #e6ca83b0; border-radius:6px 12px 6px 10px; background:#171b10c4; color:#fff0b8; pointer-events:none; box-shadow:0 4px 0 #090b0760,0 8px 16px #0005; }
.coach strong { display:block; font:700 13px Krattet, sans-serif; color:#fff3c9; }
.coach span { display:block; margin-top:3px; color:#c9d9a4; font-size:11px; line-height:1.35; }
.vow-root { position:absolute; z-index:45; inset:0; display:grid; place-content:center; gap:10px; background:#0c10087a; pointer-events:none; padding:8%; }
.vow-root p { margin:0; text-align:center; color:#fff3c9; font:700 clamp(16px,2.6vw,28px) Krattet, sans-serif; text-shadow:0 2px #401f12, 0 0 18px #0008; line-height:1.35; }
.achieve-list { list-style:none; margin:0; padding:0; display:grid; gap:6px; max-height:min(42vh,280px); overflow:auto; }
.achieve-list li { display:grid; gap:1px; padding:6px 8px; border:1px solid #78673d55; border-radius:6px; }
.achieve-list li.locked { opacity:.42; }
.achieve-list strong { font-size:12px; color:#fff0bd; }
.achieve-list span { font-size:10px; color:#b8c99a; }
@media(max-width:720px){.mission,.controls{display:none}.topbar{inset:5px 5px auto;grid-template-columns:1fr auto auto}.progress{grid-row:2;grid-column:1/-1;width:min(270px,75vw)}.resources{justify-self:end}.resource{min-width:36px;padding-inline:4px}.resource small,.resource em{display:none}.brand-kicker{display:none}.coach{left:8px;bottom:80px;max-width:72%}.book-menu:not([hidden])~.coach{left:8px;bottom:12px}.help-toggle{display:block;left:74px;width:36px;height:36px}.book-toggle{width:62px;height:66px}}
@media(pointer:coarse){
  .meta-btn,.weather-icon,.game-clock{min-width:40px;height:40px;font-size:14px}
  .help-toggle{display:block;left:74px;width:36px;height:36px;opacity:.9}
  .book-toggle{width:62px;height:66px}
  .controls{display:none}
  .crop-option{padding:10px 10px;min-height:44px}
  .pause-card button{padding:12px 12px;min-height:44px}
  .plant-menu{width:min(340px,calc(100% - 16px))}
}
/* --------------------------------------------------------- vend telefonen */
/* Krattet er 1672x941. På højkant bliver banen så lille, at man ikke kan ramme
   en høne. Så beder vi pænt om at få telefonen vendt — og holder spillet i ro
   imens. Kun på touch-skærme; en smal computerskærm skal ikke rammes. */
.rotate-root { display:none; }
@media (orientation: portrait) and (pointer: coarse) {
  .rotate-root:not([hidden]) {
    position:fixed; inset:0; z-index:200; display:grid; place-content:center;
    justify-items:center; gap:14px; padding:24px; text-align:center;
    background:radial-gradient(circle at 50% 38%,#34402580,#0d1109 70%), #0d1109;
  }
  .rotate-root strong { color:#fff3c9; font:700 clamp(20px,7vw,30px) Krattet, sans-serif; text-shadow:0 2px #401f12; }
  .rotate-root span { color:#c9d9a4; font:600 clamp(12px,3.6vw,15px) system-ui; max-width:22ch; line-height:1.4; }
  .rotate-phone { width:54px; height:92px; border:3px solid #d9c276; border-radius:10px; position:relative; animation:rotate-hint 2.4s ease-in-out infinite; }
  .rotate-phone i { position:absolute; left:50%; bottom:6px; width:16px; height:2px; margin-left:-8px; background:#d9c276; border-radius:2px; }
}
@keyframes rotate-hint {
  0%, 22% { transform:rotate(0deg); }
  50%, 72% { transform:rotate(-90deg); }
  100% { transform:rotate(0deg); }
}

/* ------------------------------------------------ fingerstørrelse på touch */
/* Bogens faner stod med 7px skrift og var ikke til at ramme. De vokser her,
   og ::after strækker selve trykfeltet ud til 44px uden at flytte grafikken. */
@media (pointer: coarse) {
  .book-tabs { top:-30px; gap:4px; }
  .book-tabs button { font-size:11px; padding:9px 6px 10px; min-height:34px; position:relative; }
  .book-tabs button.on { padding-bottom:12px; }
  .book-tabs button::after { content:''; position:absolute; inset:-6px -2px -8px; }
  .book-close { top:-30px; width:34px; height:34px; font-size:22px; line-height:30px; }
  .book-close::after { content:''; position:absolute; inset:-7px; }
  .ninja-leave { min-height:44px; padding:10px 18px; font-size:14px; }
  #intro-start { min-height:48px; padding:12px 20px; font-size:15px; }
  .topbar button, .book-toggle, .help-toggle { touch-action:manipulation; }
}

@media (prefers-reduced-motion: reduce) {
  .combo.pop,.float-reward,.event-banner,.toast,.xp-track.gleam::after,.resource.bump b { animation-duration:.01ms !important; }
}