*{box-sizing:border-box} :root{--ink:#153e38;--paper:#f7f1e4;--muted:#778078;--red:#b74c3d;--line:#dcd8c8}body{margin:0;background:#203c37;color:var(--ink);font-family:"Malgun Gothic",system-ui,sans-serif;overscroll-behavior:none}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{opacity:.55;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #d4923f;outline-offset:3px}#app{max-width:480px;min-height:100svh;margin:auto;background:var(--paper);padding:env(safe-area-inset-top) 22px max(16px,env(safe-area-inset-bottom));overflow:hidden;box-shadow:0 0 90px #0003}header{height:63px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:11px}header a{text-decoration:none;color:var(--ink)}.brand{letter-spacing:3px;font-weight:bold}.icon{border:1px solid var(--line);border-radius:30px;background:transparent;padding:8px 11px;color:var(--ink);font-size:11px;min-height:36px}.screen[hidden]{display:none}.screen{padding-top:27px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#8f7959}h1{font-family:serif;font-size:66px;line-height:1.1;letter-spacing:-5px;margin:16px 0 12px;font-weight:900;position:relative}h1 small{display:block;font-size:32px;letter-spacing:6px;margin-bottom:4px}h1 .seal{font-family:serif;font-size:15px;letter-spacing:1px;display:inline-block;vertical-align:top;color:var(--red);border:2px solid var(--red);padding:7px 4px;margin:5px 0 0 15px;writing-mode:vertical-rl;transform:rotate(7deg)}.subtitle{font-size:12px;color:#728077;margin:0}#menu .eyebrow,#menu h1,#menu .subtitle{text-align:center}.hero{height:235px;position:relative;margin:0 -22px 9px;overflow:hidden}.sun{position:absolute;width:100px;height:100px;border-radius:50%;background:#e8b69a;top:38px;left:65px;opacity:.65}.mountain{position:absolute;border-radius:55% 70% 0 0;transform:rotate(-9deg);width:440px;height:100px;bottom:0;left:-80px;background:#bfcabd}.mountain.back{height:125px;bottom:5px;left:140px;background:#d8ddcd}.mountain.front{bottom:-43px;background:#9eafa0}.hero .character{position:absolute;width:240px;height:229px;left:calc(50% - 105px);bottom:8px}.hero-target{position:absolute;top:98px;right:42px;width:55px;height:74px;border-radius:50%;background:radial-gradient(ellipse,#e9b952 0 20%,#b74c3d 21% 40%,#466879 41% 60%,#35463f 61% 80%,#eee7d7 81%);transform:rotate(8deg);border:3px solid #b7a483}.hero-target:after{content:"";display:block;width:4px;height:70px;background:#827559;position:absolute;top:65px;left:23px}.hero-caption{position:absolute;bottom:8px;font-size:10px;left:0;right:0;text-align:center;color:#365249}.menu-form label{font-size:11px;font-weight:bold;display:flex;justify-content:space-between;margin-bottom:8px}.menu-form label span{color:#9c9f92;font-weight:normal}input{width:100%;background:#fff9ed;border:1px solid #d3d0bc;border-radius:10px;height:47px;padding:0 15px;color:var(--ink);font:inherit;font-size:14px;outline-color:var(--ink)}#notice{font-size:11px;color:var(--red);min-height:16px;margin:5px 0 7px}.primary,.secondary{width:100%;min-height:51px;border-radius:11px;padding:13px 18px;font-size:15px;font-weight:bold;text-align:center}.primary{background:var(--ink);color:#fff7e5;border:0;box-shadow:0 4px 0 #092921}.primary span,.secondary span{float:right}.secondary{background:transparent;color:var(--ink);border:1px solid #b5bda9;margin-top:12px}.menu-foot{text-align:center;font-size:9px;letter-spacing:.4px;color:#909284;margin:23px 0 8px}h2{font-family:serif;font-size:25px;margin:9px 0 0;letter-spacing:-1px}.play-top{display:flex;justify-content:space-between;align-items:center}.total{text-align:right}.total b{display:block;font-family:Georgia,serif;font-size:41px;line-height:1}.total span{font-size:9px;color:var(--muted)}.conditions{display:grid;grid-template-columns:1fr 1.7fr .8fr;background:#e9ecdf;border:1px solid #d6decd;border-radius:12px;padding:13px 0;margin:22px 0 18px;text-align:center}.conditions>div+div{border-left:1px solid #cdd6c8}.conditions span{display:block;font-size:9px;color:#788576;margin-bottom:6px}.conditions b{font-size:22px}.conditions small{font-size:11px;font-weight:normal}.conditions em{font-style:normal}.wind i{display:inline-block;color:var(--red);font-style:normal;margin-right:6px;font-size:23px}.shot-heading{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#8a8f80}.shot-heading strong{font-size:20px;color:var(--ink)}#shot-message{font-size:10px}#range{position:relative;margin:7px -10px 0;aspect-ratio:1;background:linear-gradient(#e4e8d8,#ece5d2);border-radius:100px 100px 16px 16px;overflow:hidden}#target{display:block;width:100%;height:100%;touch-action:none;user-select:none;outline-offset:-3px}.range-label{position:absolute;bottom:11px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:3px;color:#778974;pointer-events:none}.range-label span{border:1px solid #8c9d83;padding:1px 3px}#feedback{position:absolute;top:39%;left:0;right:0;text-align:center;color:white;text-shadow:0 2px 15px #153e38;font-size:46px;font-weight:900;pointer-events:none;opacity:0;transition:opacity .1s}#feedback.visible{opacity:1}#shot-strip{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:12px}#shot-strip span{display:grid;place-items:center;border:1px solid #d3d5c4;border-radius:5px;font-size:10px;height:26px;color:#9ba190}#shot-strip span.done{color:var(--ink);background:#e1e7d7;border-color:#bdccb5}#shot-strip span.x{background:#dca94d;color:#fff;border-color:#dca94d}.shoot-area{display:flex;align-items:center;min-height:116px}.shoot-area .character{width:110px;height:110px;margin-left:-12px}.shoot-controls{flex:1}.shoot-controls p{font-size:10px;color:#7d856f;margin:0 0 10px}.shoot-controls .primary{background:var(--red);box-shadow:0 4px 0 #903629;min-height:54px}.hint{font-size:9px;text-align:center;color:#999b8a;margin:0}.text-button{display:block;border:0;background:none;color:#738175;font-size:12px;padding:16px;margin:0 auto;min-height:44px}.danger{color:var(--red)}#result{padding-top:40px;text-align:center}.result-hero{display:flex;align-items:center;justify-content:center;margin:24px -12px}.result-hero .character{width:150px;height:150px}.result-score b{font-size:66px;font-family:Georgia,serif}.result-score small{color:#87927c}#result-name{font-size:13px}#result-counts,#personal-best{font-size:12px}#result-shots{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}#result-shots div{border:1px solid var(--line);border-radius:8px;padding:9px;font-size:18px}#result-shots small{display:block;font-size:9px;color:#8b9780;margin-bottom:7px}#save-status{font-size:11px;color:#77866b;min-height:34px;line-height:1.7}dialog{width:calc(100% - 24px);max-width:440px;max-height:87svh;background:var(--paper);color:var(--ink);border:1px solid #cecdb7;border-radius:18px;padding:22px}dialog::backdrop{background:#102b26bb;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.rank-rule,#rank-status{font-size:10px;line-height:1.7;color:#7d8973}.rank-row{display:grid;grid-template-columns:27px 1fr auto;align-items:center;border-bottom:1px solid var(--line);padding:14px 0;font-size:13px;gap:8px}.rank-row small{font-size:9px;color:#839176;display:block;margin-top:3px}.rank-row.mine{color:var(--red)}.rank-row strong{font:700 24px Georgia,serif}.rank-row .name{overflow-wrap:anywhere}#rank-list{min-height:80px}@media(max-height:740px){.screen{padding-top:17px}.hero{height:185px}.hero .character{width:195px;height:185px}.menu-foot{margin-top:16px}h1{font-size:58px}.conditions{margin:12px 0}.shoot-area{min-height:91px}.shoot-area .character{width:88px;height:88px}#range{max-height:39svh;aspect-ratio:auto;height:39svh}.hint{display:none}}@media(min-width:540px){#app{min-height:100vh}}@media(max-width:350px){#app{padding-left:16px;padding-right:16px}.hero{margin-left:-16px;margin-right:-16px}h2{font-size:22px}.brand{letter-spacing:1px}.shoot-controls p{font-size:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Keep the same mobile composition at every width and reserve room for firing. */
[hidden]{display:none!important}
@media(max-height:650px){#menu{padding-top:10px}#menu>.eyebrow{display:none}#menu h1{font-size:44px;margin:8px 0}#menu h1 small{font-size:22px}#menu .hero{height:110px}#menu .hero .character{height:110px;width:116px;left:calc(50% - 58px)}#menu .hero-caption{display:none}#menu .hero-target{top:44px;right:58px;width:38px;height:48px}#menu input{height:40px}#menu #notice{margin:3px 0}#menu .primary,#menu .secondary{min-height:44px;padding:10px}#menu .secondary{margin-top:8px}#menu .menu-foot{display:none}}
#play:not([hidden]){height:calc(100svh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;flex-direction:column;padding-top:16px}
#play .play-top{flex-shrink:0}#play .conditions{flex-shrink:0;margin:14px 0 12px;padding:10px 0}#play .shot-heading{flex-shrink:0}
#play #range{flex:1;min-height:120px;max-height:none;height:auto;aspect-ratio:auto}#play #shot-strip{flex-shrink:0;margin-top:10px}#play .shoot-area{flex-shrink:0;min-height:100px}#play .shoot-area .character{width:100px;height:100px}#play .hint{flex-shrink:0}
@media(max-height:740px){header{height:52px}#play:not([hidden]){height:calc(100svh - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding-top:10px}#play h2{font-size:20px;margin-top:4px}#play .total b{font-size:32px}#play .conditions{margin:9px 0;padding:7px 0}#play .conditions b{font-size:19px}#play .conditions span{margin-bottom:3px}#play .shoot-area{min-height:82px}#play .shoot-area .character{width:78px;height:78px}#play .shoot-controls p{margin-bottom:6px}#play .shoot-controls .primary{min-height:46px;padding:10px}#play #shot-strip{margin-top:7px}#play #shot-strip span{height:23px}}