*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:"Avenir Next","Trebuchet MS",sans-serif;color:#f5edcc;background:linear-gradient(#081e1dda,#081e1dcc),url("img/orchard-v3/forest.webp") center/cover;display:grid;place-items:center}
#game{position:relative;width:min(100vw,60dvh);height:min(100dvh,166.667vw);box-shadow:0 0 100px #031616aa}
#stage{position:absolute;inset:0}canvas{display:block;touch-action:none}
#hud{position:absolute;z-index:2;inset:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 12px;background:linear-gradient(#102e28f5,#102e28de);border-bottom:1px solid #c6b47466;height:64px}
#hud button{width:44px;height:44px;flex:none;margin:0;padding:10px;border-radius:13px;background:#294b3a;border:1px solid #baaa6c77;box-shadow:0 3px 0 #0b241e}
#score{margin-left:auto;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.2px}
#panel{position:absolute;inset:13% 6% auto;z-index:3;padding:26px 22px;max-height:82%;overflow:auto;background:linear-gradient(150deg,#143b31f7,#0b2725f5);border:1px solid #d9c782a8;border-radius:24px;box-shadow:0 18px 60px #03191688,inset 0 0 0 5px #a2ba5c0b;text-align:center}
h1{font-family:Georgia,"Palatino Linotype",serif;font-size:clamp(28px,8vw,42px);line-height:1.1;font-weight:800;letter-spacing:-.7px;margin:12px 0;color:#edf1b7;text-shadow:0 3px 0 #051d18}
small{font-size:10px;font-weight:800;letter-spacing:2.5px;color:#dbc885}
p{font-size:14px;line-height:1.6;color:#c9dbca}
button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:46px;border:1px solid #edbf73;border-radius:13px;background:linear-gradient(#d65536,#a83322);color:#fff5df;font:800 15px "Avenir Next","Trebuchet MS",sans-serif;letter-spacing:.2px;padding:13px 12px;margin-top:10px;cursor:pointer;touch-action:manipulation;box-shadow:0 4px 0 #682b20;transition:filter .15s,transform .15s}
button svg{width:21px;height:21px;flex:none}button:hover{filter:brightness(1.13)}button:active{transform:translateY(2px);box-shadow:0 1px 0 #09231b}
button.secondary{background:#234839;color:#e0eac4;border:1px solid #8da26866;box-shadow:none;padding:10px}
button:focus-visible{outline:3px solid #ffdc83;outline-offset:3px}
.flap-control{position:absolute;z-index:2;bottom:9px;left:50%;transform:translateX(-50%);width:152px;min-height:44px;margin:0;padding:9px;background:linear-gradient(#91aa4e,#586d2e);border-color:#d5d98e;box-shadow:0 3px 0 #263b22}
.flap-control:active{transform:translate(-50%,2px)}
[hidden]{display:none!important}
#notice{position:absolute;z-index:2;top:22%;left:50%;transform:translateX(-50%);max-width:90%;padding:12px 20px;border-radius:16px;border:1px solid #dacc8d;background:#123d31eb;color:#fff1b1;font-size:22px;font-weight:800;text-align:center;pointer-events:none;white-space:nowrap;box-shadow:0 4px 20px #08251e77}
#score{white-space:pre-line;text-align:right;line-height:1.4;font-size:12px}
@media(max-height:650px){#panel{inset:10% 6% auto;padding:16px}button{padding:9px;margin-top:7px}p{margin:8px 0}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
#notice{white-space:normal;font-size:clamp(15px,4vw,22px);width:max-content;max-width:88%;padding:10px 14px}
.run-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.run-stat{padding:12px 6px;background:#ffffff09;border:1px solid #b9d48c33;border-radius:12px;color:#c9dbca;font-size:12px}
.run-stat strong{display:block;color:#fff1b1;font-size:24px}
.medal-progress{width:100%;height:12px;accent-color:#cedb81}
.record-badge{padding:8px;border-radius:12px;background:#e5c67422;color:#ffe8a1;font-weight:800}
@media(max-width:360px){#hud{padding:8px;gap:6px}#score{font-size:10px}#panel{padding:16px 12px}}

.portal-link{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px;margin-top:12px;border:1px solid #d9c782a8;border-radius:13px;color:#fff1b1;text-decoration:none;font-weight:700}.portal-link:focus-visible{outline:3px solid #ffdc83;outline-offset:3px}