:root{font-family:Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;color:#253b3c;background:#9c654c;font-synthesis:none;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button,select{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,select:focus-visible{outline:3px solid #de9c58;outline-offset:3px}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}
#app{position:relative;width:100%;height:100dvh;overflow:hidden;touch-action:none}#scene,#wind{position:absolute;inset:0;width:100%;height:100%;display:block}#wind{pointer-events:none;z-index:2}
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:#192a2b33}.card{width:min(380px,100%);padding:32px 28px;background:#f6f2e8f2;border:1px solid #ffffff8c;border-radius:18px;box-shadow:0 10px 40px #14252a24;text-align:center;backdrop-filter:blur(8px)}h1{font-size:clamp(40px,10vw,54px);letter-spacing:.05em;margin:4px 0 28px;font-weight:850}h2{font-size:26px;margin:0 0 28px;line-height:1.5}.best{font-size:17px;margin:0 0 26px;color:#5d6a66}.best strong{margin-left:8px;font-weight:700;color:#263b3e}
button{border:1px solid #43595336;background:transparent;border-radius:10px;min-height:48px;padding:12px 20px}button.primary{display:block;width:100%;background:#263f42;color:#fff9ec;border:0;font-weight:700;font-size:21px;box-shadow:0 3px 0 #173033;margin:8px 0 16px}.menuRow{display:flex;gap:12px}.menuRow button{flex:1}.textButton{border:0;margin-top:10px}.titleCard{margin-top:-8vh}.settingsCard label{display:flex;align-items:center;justify-content:space-between;font-size:18px;margin:0 0 16px;text-align:left;gap:12px}.settingsCard select,.settingsCard label button{min-width:112px;border:1px solid #263f4255;border-radius:8px;background:#f7f4e9;padding:10px;font-size:17px}.settingsCard h2{margin-bottom:24px}
#hud{position:absolute;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));z-index:10;display:flex;align-items:center;gap:20px;color:#263b3e;text-shadow:0 1px 6px #ffffffc0;font-size:18px;font-weight:700}#timer{font-size:23px}.unit{font-size:16px;margin-left:4px}#interrupt{margin-left:auto;min-width:42px;min-height:42px;padding:2px;font-size:29px;background:#f6f2e8bd;border-color:#ffffff70}
#callout{position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);font-size:clamp(30px,7vw,48px);font-weight:800;text-shadow:0 2px 18px #fff;color:#253b3c;z-index:12;white-space:nowrap}
#rail{position:absolute;right:max(9px,env(safe-area-inset-right));top:49%;transform:translateY(-50%);width:70px;height:calc(30dvh + 56px);max-height:380px;min-height:210px;z-index:30;touch-action:none;cursor:ns-resize;outline:none}.leftHand #rail{right:auto;left:max(9px,env(safe-area-inset-left))}.railLine{position:absolute;left:22px;right:22px;top:24px;bottom:24px;border:1px solid #fff9ec8c;border-radius:20px;background:#233b3e38;box-shadow:inset 0 0 8px #18313112;backdrop-filter:blur(2px)}.railEnd{position:absolute;left:31px;width:8px;height:2px;background:#fff7e7a0}.railEnd.top{top:29px}.railEnd.bottom{bottom:29px}.knob{position:absolute;left:9px;width:52px;height:56px;transform:translateY(-50%);border-radius:15px;background:#faf3e4e8;border:2px solid #ffffff;box-shadow:0 4px 12px #152e3440;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.knob i{width:19px;height:2px;border-radius:2px;background:#62736d}.held .knob{background:#fff9e9;box-shadow:0 3px 18px #102f3459;border-color:#e3ba77}
.resultCard h2{font-size:clamp(56px,14vw,78px);line-height:1.2;margin:2px 0 14px;letter-spacing:-.04em}.resultCard h2 span{font-size:22px;margin-left:6px;letter-spacing:0}#newBest{font-size:20px;color:#96621e;margin-bottom:16px;font-weight:700}.resultCard #copy{width:100%;font-size:18px}#error{font-size:17px;line-height:1.6;margin:16px 0 0}
@media(orientation:landscape) and (max-height:550px){.card{padding:20px 26px;max-height:calc(100dvh - 30px);overflow:auto}.titleCard{margin-top:0;width:360px}h1{font-size:39px;margin:0 0 12px}.best{margin-bottom:16px}.card button.primary{margin-bottom:12px}#rail{height:calc(40dvh + 56px);min-height:185px;top:53%}.resultCard h2{font-size:55px}.settingsCard label{margin-bottom:8px}.settingsCard h2{margin-bottom:12px}}

/* Two-dimensional arm input; the middle strip remains the fixed target. */
#rail{width:132px;border:1px solid #fff7e75c;border-radius:18px;background:#24424817;cursor:move}
#rail .railLine{left:calc(50% - 8px);right:auto;width:16px;background:#efc36e66;border-color:#ffe6a980}
#rail .railEnd{left:calc(50% - 4px)}
#rail .knob{left:50%;transform:translate(-50%,-50%)}

.creditsCard{max-height:calc(100dvh - 40px);overflow:auto}.creditsCard ul{list-style:none;padding:0;text-align:left;font-size:17px;line-height:1.6}.creditsCard li{margin-bottom:14px}.creditsCard a{color:#345a5b}

.settingsCard{max-height:calc(100dvh - 32px);overflow:auto}

.resultCard{max-height:calc(100dvh - 32px);overflow:auto;touch-action:pan-y;overscroll-behavior:contain}#shareX{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 20px;margin-top:10px;border:1px solid #43595336;border-radius:10px;font-size:18px;color:inherit;text-decoration:none;background:transparent;touch-action:manipulation}#shareX:focus-visible{outline:3px solid #de9c58;outline-offset:3px}

:root{--ink:#253b3c;--cream:#f6f2e8;--line:#43595336}
.ranking-form{display:grid;gap:9px;margin:18px 0 8px;text-align:center}.ranking-form label{font-size:14px}.ranking-form input{min-width:0;width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fffdf5;color:var(--ink);font:inherit;font-size:16px;user-select:text!important;-webkit-user-select:text!important;touch-action:auto}.ranking-form button{min-height:48px;border-radius:11px;background:#273d43;color:#fff5df;font-weight:700}.ranking-form p{margin:0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}.ranking-form p:empty{display:none}.ranking-dialog{width:min(600px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:16px;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:18px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}.ranking-dialog::backdrop{background:#101d2acc}.ranking-heading{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}.ranking-heading h2{margin:7px 0 12px;font-size:clamp(19px,4vw,25px);overflow-wrap:anywhere}.ranking-heading button{flex-shrink:0;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px}.ranking-status{font-size:14px;text-align:center}.ranking-status:empty{display:none}.ranking-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:14px}.ranking-position{width:44px}.ranking-record{width:38%}.ranking-table th,.ranking-table td{min-width:0;padding:12px 4px;text-align:center;vertical-align:middle;overflow-wrap:anywhere;white-space:pre-line;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}.ranking-form input:focus-visible{outline:3px solid #c17b29;outline-offset:2px}.ranking-form button:disabled{opacity:.65}

input{font:inherit}.overlay{overflow:auto;touch-action:pan-y}.card{flex-shrink:0;max-height:calc(100dvh - 32px);overflow:auto;touch-action:pan-y}.resultCard{margin:auto}.ranking-dialog{z-index:100}.ranking-table th,.ranking-table td{text-align:center!important}.ranking-record{width:32%}

.helpButton{width:100%;margin:0 0 12px}
#helpDialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:20px;border:1px solid #ffffff8c;border-radius:18px;background:#f6f2e8;color:#253b3c;box-shadow:0 12px 48px #102e3459;overflow:auto;touch-action:pan-y}
#helpDialog::backdrop{background:#14292bb3;backdrop-filter:blur(3px)}
.helpHeading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.helpHeading h2{font-size:23px;margin:0}
.helpHeading button{min-height:44px;padding:8px 14px;flex-shrink:0}
.helpIllustration{position:relative;margin:0;border-radius:12px;overflow:hidden;border:1px solid #43595336;background:#9c654c}
.helpIllustration img{display:block;width:100%;height:auto}
.helpArrow{position:absolute;right:3%;top:24%;font-size:70px;line-height:1;color:#fff5c5;text-shadow:0 2px 4px #132d31,0 0 8px #132d31;pointer-events:none}
#helpText{font-size:18px;line-height:1.8;margin:16px 0 0;text-align:center;overflow-wrap:anywhere}
@media(max-height:500px){#helpDialog{width:min(380px,calc(100vw - 32px));padding:14px}.helpIllustration{max-height:150px}.helpIllustration img{height:150px;object-fit:cover;object-position:center}.helpHeading{margin-bottom:10px}#helpText{font-size:16px;margin-top:10px}.helpArrow{font-size:54px;top:18%}}

.helpLast{display:inline-block;white-space:nowrap}