*{box-sizing:border-box}body{margin:0;background:#f7f1e8;color:#594e43;font:16px/1.5 Arial,'PingFang HK','Microsoft JhengHei',sans-serif}main{max-width:620px;margin:auto;padding:20px 20px max(18px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between}a{font-size:14px;color:#786957;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit;border:0;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #ad6a53;outline-offset:4px}#pause{width:44px;height:44px;background:transparent;border:1px solid #d9cebd;border-radius:50%;font-size:19px}h1{text-align:center;font-size:30px;margin:10px 0 18px;letter-spacing:1px}h1 span{color:#b38468}#intro{background:#fffaf3;border:1px solid #ded1c0;border-radius:20px;padding:20px;text-align:center;margin-bottom:16px}h2{font-size:20px;line-height:1.5;margin:0 0 15px}#start{background:#a67d62;color:#fffaf0;border-radius:13px;padding:13px 28px;min-width:190px;min-height:48px;box-shadow:0 4px 0 #86634c;font-weight:bold}#result{margin:0 0 18px;font-size:16px;color:#8a725e}#result strong{display:block;font-size:44px;line-height:1.3;color:#886147}#result small{font-size:18px}#result span{display:block;font-size:16px;margin-top:8px}.stage{position:relative;overflow:hidden;background:#eee3d4;border:1px solid #dfd1bf;border-radius:23px;height:clamp(330px,57svh,540px)}.hud{position:absolute;top:16px;left:19px;right:19px;display:flex;justify-content:space-between;z-index:2;pointer-events:none}.hud small{font-size:14px;color:#8d7762;display:block}.hud strong{font-size:32px;font-weight:500;font-variant-numeric:tabular-nums}.hud strong span{font-size:16px}.right{text-align:right}#hearts{font-size:22px;letter-spacing:3px;color:#b97462;margin-top:7px}canvas{width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#notice{position:absolute;top:84px;left:50%;transform:translateX(-50%);padding:5px 12px;border-radius:20px;font-size:14px;color:#936a4d;background:#fffaf0ed;white-space:nowrap;opacity:0;pointer-events:none}#drop{display:block;width:100%;height:62px;border-radius:16px;background:#a67d62;color:#fffaf0;margin-top:15px;box-shadow:0 4px 0 #86634c;font-size:18px;font-weight:bold}#drop:active{transform:translateY(2px);box-shadow:0 2px 0 #86634c}#drop:disabled{opacity:.45;cursor:default}.hint{text-align:center;font-size:14px;color:#8b7864;margin:17px 0 0}body.resting .stage{height:220px}body.resting .hud{display:none}body.resting #drop,body.resting .hint{display:none}[hidden]{display:none!important}@media(max-width:360px){main{padding:14px}h1{font-size:27px;margin:8px 0 13px}.stage{height:330px}}@media(orientation:landscape) and (max-height:500px){body:not(.resting) main{max-width:900px;padding:8px 16px;display:grid;grid-template-columns:1fr 145px;gap:10px 16px}body:not(.resting) header{grid-column:1/-1;height:32px}body:not(.resting) h1,body:not(.resting) .hint{display:none}body:not(.resting) #pause{height:32px;width:32px}body:not(.resting) .stage{height:calc(100svh - 66px)}body:not(.resting) #drop{align-self:end;height:76px;margin:0 0 8px}}

body.paused #intro{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(90vw,400px);z-index:5;box-shadow:0 0 0 100vmax #6c563c55}

/* More room to judge the drop, without surrounding instruction text. */
body:not(.resting) main{max-width:760px;padding-top:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
body:not(.resting) header{height:32px}
body:not(.resting) #pause{height:32px;width:32px}
body:not(.resting) h1{font-size:26px;margin:6px 0 12px}
body:not(.resting) .stage{height:clamp(350px,calc(100svh - 200px),700px)}
body:not(.resting) #drop{height:60px;margin-top:12px}
body:not(.resting) .hint{display:none}
@media(orientation:landscape) and (max-height:500px){body:not(.resting) main{max-width:1000px;padding:8px 16px}body:not(.resting) .stage{height:calc(100svh - 66px)}body:not(.resting) #drop{height:76px;margin:0 0 8px}}

.stage{background:#efe5d7;isolation:isolate}.stage canvas{position:relative;z-index:1}.hud{z-index:2}#notice{top:auto;bottom:18px;font-size:16px;background:#fff9eff2;border:1px solid #ddc6ab;z-index:2}
#wind-indicator{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0;overflow:hidden}#wind-indicator svg{display:block;width:82%;max-width:520px;height:auto;overflow:visible}#wind-arrow{fill:#916644;opacity:.24;transform-origin:200px 142px}#wind-indicator[data-direction="left"] #wind-arrow{transform:scaleX(-1)}#wind-indicator[data-level="2"] #wind-arrow{opacity:.28}#wind-indicator[data-level="3"] #wind-arrow{opacity:.33}.wind-glyph{display:none;fill:none;stroke:#895b3a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:.52}#wind-indicator[data-level="1"] #wind-icon-1{display:block;transform:translate(174px,26px)}#wind-indicator[data-level="2"] #wind-icon-1{display:block;transform:translate(134px,26px)}#wind-indicator[data-level="2"] #wind-icon-2{display:block;transform:translate(214px,26px)}#wind-indicator[data-level="3"] #wind-icon-1{display:block;transform:translate(94px,26px)}#wind-indicator[data-level="3"] #wind-icon-2{display:block;transform:translate(174px,26px)}#wind-indicator[data-level="3"] #wind-icon-3{display:block;transform:translate(254px,26px)}#wind-indicator[data-direction="left"] #wind-icons{transform:translate(400px,0) scaleX(-1)}body.resting #wind-indicator{display:none}
.action-row{display:flex;gap:10px;align-items:stretch;margin-top:12px}.action-row #drop{flex:1;min-width:0;width:auto;margin:0}body.resting .action-row{display:none}@media(orientation:landscape) and (max-height:500px){body:not(.resting) .action-row{align-self:end;flex-direction:column;margin:0 0 8px}body:not(.resting) .action-row #drop{width:100%;height:76px;flex:none;margin:0}}
#wind-indicator svg{max-height:55%;transform:translateY(60px)}