500;700&family=Patrick+Hand&display=swap');
*{box-sizing:border-box}body{margin:0;background:#f6f1e7;color:#343d32;font-family:system-ui,-apple-system,sans-serif}main{max-width:1080px;margin:auto;padding:30px 38px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8d6c7;padding-bottom:22px}.brand{font-family:'Chalkboard SE','Comic Sans MS',cursive;font-size:30px;color:inherit;text-decoration:none}.brand span{display:block;font:11px system-ui,-apple-system,sans-serif;letter-spacing:1px;color:#7a806d}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #cbcdbb;background:#faf7ee;border-radius:12px;padding:10px 16px}button:focus-visible{outline:3px solid #8cab66;outline-offset:3px}.layout{display:flex;align-items:center;justify-content:space-between;gap:65px;padding:38px 30px}aside{flex:1}.tag{font-size:10px;letter-spacing:2px;color:#718261}h1{font-family:'Chalkboard SE','Comic Sans MS',cursive;font-weight:400;font-size:76px;line-height:1.05;margin:24px 0}h1 em{color:#779257;font-style:normal}aside p{font-size:14px;color:#747b69;line-height:1.9}.notes{margin:35px 0;padding:22px 25px;background:#ebeedd;border-radius:3px;transform:rotate(-2deg);max-width:300px}.notes strong{font:24px 'Chalkboard SE','Comic Sans MS',cursive}.notes p{font-size:12px}small{font-size:11px;color:#858b76}.game{width:420px;flex-shrink:0;position:relative;border:2px solid #545c48;border-radius:24px;overflow:hidden;box-shadow:9px 10px 0 #e4e4d6;background:#fcfaf2}.stats{height:63px;display:flex;align-items:center;gap:28px;padding:10px 22px;border-bottom:1px solid #dbe0cd;font-size:9px;letter-spacing:1.5px}.stats b{display:block;font:26px 'Chalkboard SE','Comic Sans MS',cursive;letter-spacing:0}.stats button{margin-left:auto;border:0;font-size:22px;padding:3px 12px}canvas{display:block;width:100%;height:auto;touch-action:none}.controls{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-top:1px solid #dbe0cd;touch-action:none}.controls span{font:17px 'Chalkboard SE','Comic Sans MS',cursive;color:#899078}.controls button{font-size:23px;width:62px;touch-action:none;user-select:none}#overlay{position:absolute;inset:63px 0 61px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fcfaf2d9;padding:25px}#overlay[hidden]{display:none}.paw{font-size:38px;color:#89a36a}h2{font:38px 'Chalkboard SE','Comic Sans MS',cursive;margin:20px 0 0}#overlay p{font-size:13px;color:#7d826f;line-height:1.8}#start{background:#7e985d;color:white;border-color:#6d854e;padding:14px 32px;margin:18px 0}footer{text-align:center;font-size:9px;letter-spacing:2px;color:#969b88;padding:15px}@media(max-width:740px){main{padding:16px}header{padding-bottom:14px}.brand{font-size:24px}.layout{padding:22px 0;justify-content:center}aside{display:none}.game{width:min(420px,100%)}canvas{height:auto}footer{padding:0}header button{font-size:11px}}@media(prefers-reduced-motion:reduce){.notes{transform:none}}

/* Notebook layout and companion polish. Canvas keeps its original aspect ratio. */
:root{--paper:#fcfaf2;--ink:#343d32;--green:#779257}
body{background-image:radial-gradient(#d4ccb84d .6px,transparent .6px);background-size:7px 7px}
main{max-width:1080px;padding:22px 38px}header{padding-bottom:16px}.layout{gap:56px;padding:24px 30px}.game{width:min(420px,calc((100svh - 230px)*.6176));min-width:270px;box-shadow:7px 8px 0 #e4e4d6;border-radius:21px;display:grid;grid-template-rows:56px auto 60px}.stats{height:56px;gap:25px;padding:7px 20px}.stats b{font-size:25px}canvas{grid-row:2}.controls{height:60px;padding:7px 12px}.controls button{min-height:44px;min-width:60px;padding:5px 16px;background:#f0f2e5;border-radius:12px}.controls button:active{background:#d5dfbf;transform:translateY(1px)}button{transition:background .15s,box-shadow .15s}button:hover{box-shadow:0 2px 0 #d8deca}#sound[aria-pressed="true"]{background:#e7eed9}#pause{min-width:44px;min-height:44px}#overlay{inset:56px 0 60px;padding:22px 20px;background:linear-gradient(#fcfaf2b8,#fcfaf2ed 45%,#fcfaf2de);overflow:auto}.companion{width:140px;height:125px;flex-shrink:0;filter:drop-shadow(0 5px 0 #e8e6d64d)}h2{font-size:32px;line-height:1.12;max-width:290px;margin:10px 0 0}#overlay p{margin:12px 0 0;max-width:270px;color:#666e5c}#start{margin:18px 0 14px;min-height:48px;padding:12px 25px;font-weight:700;box-shadow:0 3px 0 #607745}#start:hover{background:#6d884f}#start:active{transform:translateY(2px);box-shadow:0 1px 0 #607745}.steer-hint{line-height:1.6;color:#69745f}.mobile-hint{display:none}.notes{position:relative;margin:26px 0 22px;padding:20px 23px;border:1px solid #dce1ca;box-shadow:2px 4px 0 #e2e3d5}.notes:before{content:"";position:absolute;top:-10px;left:90px;width:74px;height:20px;background:#dfcdb69e;transform:rotate(5deg)}.notes p{color:#636d56;margin-bottom:14px}.legend{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:11px;color:#636d56}.legend li{display:flex;align-items:center;gap:9px}.ledge{display:inline-block;width:27px;height:9px;border:1.5px solid #4e5945;border-radius:6px;flex-shrink:0}.safe{background:#9bc55f}.moving{background:#88b7c9}.fragile{background:#c7a37a;background-image:linear-gradient(115deg,transparent 46%,#695440 47%,#695440 53%,transparent 54%)}.spring{width:27px;text-align:center;font-size:17px;line-height:10px;color:#59634e}h1{font-size:clamp(54px,6vw,76px);margin:20px 0}footer{padding:6px;font-size:9px;line-height:1.5}
@media(max-width:740px){main{padding:12px 14px max(8px,env(safe-area-inset-bottom))}header{padding-bottom:10px;gap:12px}.brand{font-size:24px}.brand span{font-size:9px;letter-spacing:.6px}header button{min-height:40px;padding:8px 12px}.layout{padding:14px 0 12px}.game{width:min(420px,100%,calc((100svh - 235px)*.6176));min-width:0;border-radius:18px;box-shadow:4px 5px 0 #e4e4d6}aside{display:none}.desktop-hint{display:none}.mobile-hint{display:inline}.companion{width:120px;height:107px}h2{font-size:30px}.controls span{font-size:15px}footer{font-size:8px;letter-spacing:1px}}
@media(max-height:650px){.companion{width:86px;height:77px}#overlay{padding:12px}h2{font-size:26px}#overlay p{font-size:12px}#start{margin:12px 0}main{padding-top:10px}.layout{padding-top:12px;padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Approved big-head Sprout Cat portraits; gameplay canvas remains first in DOM. */
#companion{width:160px;height:160px;max-width:60%;filter:none;flex-shrink:0;touch-action:auto}
#overlay[data-state="ready"] #companion{animation:companion-drift 3.4s ease-in-out infinite;transform-origin:50% 85%}
#overlay[data-state="paused"] #companion{transform:rotate(-3deg)}
#overlay[data-state="over"] #companion{transform:rotate(3deg)}
@keyframes companion-drift{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@media(max-width:740px){#companion{width:145px;height:145px}}
@media(max-height:650px){#companion{width:102px;height:102px}}
@media(prefers-reduced-motion:reduce){#overlay[data-state="ready"] #companion{animation:none}}

@media(max-width:740px) and (max-height:650px){.controls span{font-size:13px;text-align:center}.stats{gap:16px;padding:7px 12px}.stats button{padding:3px 8px}.steer-hint{font-size:10px}}
@media(max-width:740px) and (max-height:650px){#overlay{padding:8px 10px}#companion{width:88px;height:88px}#title{font-size:24px}#message{font-size:11px;line-height:1.5;margin-top:8px}#start{margin:10px 0}.steer-hint{font-size:9px;line-height:1.4}}