:root{--ink:#243e37;--paper:#f5f0e3;--moss:#476b53;--pink:#e89b89;--gold:#e9bc62;--line:#cfcfbb}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Trebuchet MS',Arial,sans-serif}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:10px 14px;touch-action:manipulation}button:hover{background:#e3e5ce}button:focus-visible{outline:3px solid #d47557;outline-offset:3px}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}header{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);gap:10px}header nav{display:flex;gap:7px}header button{border:0;background:transparent}#brand{font:700 22px Georgia,serif;white-space:nowrap;padding-left:0}#brand span{color:#ba6550}#brand small{font:10px monospace;letter-spacing:1.5px;margin-left:18px}.eyebrow{font:10px monospace;letter-spacing:2px;margin:0 0 10px;color:#69745c}#cover{max-width:1380px;margin:auto;min-height:calc(100dvh - 66px);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:36px 6vw;gap:20px}.cover-copy{max-width:520px}h1{font:normal clamp(64px,7.7vw,116px)/.92 Georgia,serif;letter-spacing:-5px;margin:30px 0}h1 em{color:#a35a48;font-weight:normal}p.intro{line-height:1.7;font-size:16px;color:#667367;margin:28px 0}.difficulty{display:flex;align-items:center;gap:7px;margin-bottom:20px;flex-wrap:wrap}.difficulty span{font:10px monospace;letter-spacing:1px;margin-right:8px}.difficulty button.selected{background:#d7dfbb;border-color:#708257}.primary{background:var(--ink);color:#f9f3df;border:0;padding:16px 25px;font-weight:bold}.primary:hover{background:#426655}.primary span{margin-left:40px}.quiet{border:0;background:transparent;text-decoration:underline;text-underline-offset:5px;display:block;margin-top:10px;padding-left:0}.tiny{font:11px/1.8 monospace;color:#74806b;margin-top:28px}.cover-art{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}.cover-art canvas{width:100%;max-height:700px;object-fit:contain}.cover-note{position:absolute;bottom:4%;right:5%;font:10px/1.8 monospace;letter-spacing:1px}.cover-note b{font-size:8px}#game{height:calc(100dvh - 66px);display:flex;flex-direction:column;max-width:1400px;margin:auto}.mission{height:80px;flex:none;padding:15px 28px;display:flex;align-items:center;justify-content:space-between}.mission .eyebrow{margin-bottom:4px}.mission h2{font:normal 25px Georgia,serif;margin:0}#hearts{font-size:23px;color:#b7594e;letter-spacing:4px;white-space:nowrap}#stage{position:relative;flex:1;min-height:180px;margin:0 18px;border-radius:18px;overflow:hidden;background:#e4e5cc;border:1px solid #b1bea3}#world{width:100%;height:100%;display:block;touch-action:none;outline:none}footer{height:74px;flex:none;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:15px}footer span{display:block;font-size:14px;font-weight:bold}footer small{display:block;font-size:11px;line-height:1.5;margin-top:4px;color:#6c7768}#help{border-radius:50%;height:34px;width:34px;padding:0;flex:none}#toast{position:absolute;left:50%;top:16px;transform:translateX(-50%) translateY(-80px);opacity:0;transition:.2s;background:#203c36ee;color:#fff8e5;box-shadow:0 5px 20px #203c3622;padding:12px 20px;border-radius:30px;max-width:92%;width:max-content;font-size:13px;pointer-events:none;text-align:center}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}#touchControls{display:none;position:absolute;bottom:14px;left:14px;right:14px;align-items:flex-end;justify-content:space-between;pointer-events:none}#pad{width:142px;display:grid;grid-template-columns:repeat(3,44px);gap:4px}#pad button,#action,#gas{background:#f8f5e7e8;box-shadow:0 2px 3px #243e3722;pointer-events:auto;user-select:none;-webkit-user-select:none;touch-action:none;border:1px solid #9fae94}#pad button{height:40px;padding:0}#pad button:first-child{grid-column:2}#pad button:nth-child(2){grid-row:2;grid-column:1}#pad button:nth-child(3){grid-row:2;grid-column:2}#pad button:nth-child(4){grid-row:2;grid-column:3}#gas{width:78px;height:68px;border-radius:20px;font-size:22px}#gas span{display:block;font:8px monospace;margin-top:3px}#action{width:78px;height:68px;border-radius:20px;font-size:22px}#action span{display:block;font:8px monospace;margin-top:3px}#aux{position:absolute;bottom:14px;right:16px;box-shadow:0 2px 3px #243e3722}#modal{position:fixed;inset:0;z-index:20;background:#1c352cc0;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}.modal-card{max-width:560px;width:100%;max-height:90dvh;overflow:auto;background:#f5f0e3;padding:32px;border-radius:24px;border:1px solid #d8dec3;box-shadow:0 30px 90px #10241e55}.modal-card h2{font:normal 35px/1.12 Georgia,serif;margin:10px 0 20px}.modal-card p{font-size:14px;line-height:1.8}.modal-card .lesson{border-left:3px solid #a8b774;padding-left:15px;color:#5b6c55}.modal-card .controls{font:11px/1.7 monospace;background:#e7ead6;padding:14px;border-radius:10px}#modalButtons{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}#modalButtons button:first-child{background:var(--ink);color:var(--paper);border-color:var(--ink)}.chapter-grid{display:grid;gap:7px}.chapter-grid button{text-align:left;padding:10px}.chapter-grid small{float:right}.file-note{font:11px/1.6 monospace!important;color:#6e7966}
@media(pointer:coarse){#touchControls.available{display:flex}}@media(max-width:650px){header{height:52px;padding:0 16px}header nav{gap:0}header nav button{font-size:11px;padding:8px}#brand{font-size:20px}#brand small{display:none}#cover{padding:26px 24px;grid-template-columns:1fr;gap:0;min-height:calc(100dvh - 52px)}.cover-copy{z-index:1}.cover-copy>.eyebrow{font-size:8px}h1{font-size:72px;letter-spacing:-3px;margin:20px 0}.intro{font-size:14px!important;margin:20px 0!important}.cover-art{grid-row:1;position:absolute;right:0;top:75px;width:50%;height:190px;opacity:.65;pointer-events:none}.cover-note{display:none}.difficulty{margin-top:22px}.difficulty span{width:100%;margin-bottom:4px}.tiny{font-size:10px}#game{height:calc(100dvh - 52px)}.mission{height:75px;padding:12px 16px}.mission h2{font-size:20px;max-width:255px}.mission .eyebrow{font-size:8px;letter-spacing:1px}#hearts{font-size:17px;letter-spacing:1px}#stage{margin:0 8px;border-radius:14px}footer{height:86px;padding:9px 16px}footer span{font-size:12px}footer small{font-size:10px}.modal-card{padding:24px}.modal-card h2{font-size:29px}#toast{font-size:12px;padding:10px 14px}#pad{width:124px;grid-template-columns:repeat(3,38px)}#pad button{height:36px}#action{width:67px;height:59px}}
@media(max-height:500px) and (orientation:landscape){header{height:42px}.mission{height:52px}.mission h2{font-size:19px}#game{height:calc(100dvh - 42px)}footer{height:50px}.mission .eyebrow{display:none}#touchControls{bottom:8px}#cover{min-height:400px}}

/* Keep canvas puzzles usable in short landscape windows; page may scroll. */
#game{min-height:620px}

#cityAtmosphere{height:125px;flex:none;margin:0 18px 12px;position:relative;overflow:hidden;border-radius:14px;background:#c9c4a5}#cityAtmosphere img{width:100%;height:100%;object-fit:cover;object-position:center 48%}#cityAtmosphere>div{position:absolute;bottom:10px;left:14px;padding:8px 12px;background:#f5f0e3ed;border-radius:8px;box-shadow:0 2px 10px #172e2b22}#cityName{display:block;font-size:14px;letter-spacing:1px}#cityMood{display:block;font-size:12px;margin-top:3px}#cityAtmosphere:not([hidden])~#stage{min-height:300px}@media(max-width:650px){#cityAtmosphere{height:100px;margin:0 8px 8px;border-radius:10px}#cityAtmosphere>div{bottom:6px;left:8px;padding:5px 9px}#cityMood{display:none}#cityName{font-size:12px}#cityAtmosphere:not([hidden])~#stage{min-height:280px}}
@media(min-width:900px){#cityAtmosphere{height:125px;display:flex;background:#e6d8bd}#cityAtmosphere img{width:375px;flex:none;margin-left:auto;order:2;object-fit:cover}#cityAtmosphere>div{position:static;align-self:center;margin-left:24px;background:transparent;box-shadow:none;padding:0}#cityName{font-size:21px}#cityMood{font-size:14px;margin-top:8px}}

.finishHeart{font-size:86px;line-height:1;color:#c95763;text-align:center;animation:heartPop .8s cubic-bezier(.2,1.5,.4,1) both}.finishWord{font:700 28px monospace;letter-spacing:8px;text-align:center;color:#243e37}@keyframes heartPop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}