:root{font-family:'NanumSquare','Noto Sans KR',system-ui,-apple-system,sans-serif;color:#303943;font-synthesis:none}
*{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#7bbced} body{display:grid;place-items:center;overscroll-behavior:none}button{font:inherit;touch-action:none;cursor:pointer}
.game-shell{width:min(100vw,177.777vh);height:min(56.25vw,100vh);aspect-ratio:16/9;position:relative;overflow:hidden;isolation:isolate;box-shadow:0 18px 50px #3e6c8a20;background:#a2d7f5;user-select:none;-webkit-user-select:none}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;inset:2.1% 2.4% auto;height:11%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;pointer-events:none;z-index:3}
.best-pill{justify-self:start;border-radius:3rem;background:#fffcf0ed;min-width:12%;display:flex;gap:.5rem;align-items:center;font-weight:900;font-size:clamp(13px,2.5vw,31px);padding:clamp(3px,.8vw,10px) clamp(10px,1.5vw,24px);white-space:nowrap}
.best-pill img{width:clamp(24px,3.4vw,48px);height:auto;object-fit:contain}
.distance{justify-self:center;white-space:nowrap;font-size:clamp(25px,5.5vw,72px);font-weight:900;line-height:1.12;text-shadow:0 2px 1px #ffffff63;font-variant-numeric:tabular-nums}.distance small{font-size:.58em}
.square-btn{width:clamp(42px,5vw,72px);height:clamp(42px,5vw,72px);border:0;border-radius:22%;background:#fffdf5ec;box-shadow:0 3px 0 #c9ddd2a0;display:grid;place-items:center;pointer-events:auto}
.square-btn img{width:67%;height:67%;object-fit:contain}.pause-button{justify-self:end}
.control-holder{position:absolute;inset:auto 2.1% 3% 2.1%;display:flex;justify-content:space-between;z-index:4;pointer-events:none}
.ctrl{width:clamp(65px,11.6vw,170px);height:clamp(65px,11.6vw,170px);background:transparent;border:0;padding:0;pointer-events:auto;opacity:.75;transition:transform .1s,opacity .1s}
.ctrl img{height:100%;width:100%;object-fit:contain}.ctrl:active,.ctrl.held{opacity:1;transform:scale(.94)}
.hud-tip{position:absolute;left:50%;transform:translateX(-50%);top:20%;background:#fffce7df;padding:4px 12px;border-radius:2rem;font-weight:800;opacity:0;transition:opacity .2s;z-index:5}
.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#213c567b;backdrop-filter:blur(3px);padding:12px}
.overlay[hidden]{display:none}.modal{width:min(460px,90vw);padding:30px 32px;display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;background:#fffdf5;border:5px solid #3a4448;border-radius:29px;box-shadow:0 11px 0 #253f4b3f}
.modal h1,.modal h2{font-size:clamp(24px,3.3vw,43px);margin:0;font-weight:900;letter-spacing:-.06em}.modal p{margin:0}.start-modal{width:min(530px,90vw)}.start-modal p{font-size:clamp(12px,1.2vw,17px)}
.hero-preview{position:relative;width:160px;height:163px}.hero-preview img:first-child{position:absolute;width:120px;top:53px;left:20px}.hero-preview img:last-child{position:absolute;width:116px;top:-10px;left:22px}
button.cta,button.outline{border:4px solid #424744;min-height:52px;border-radius:38px;width:min(285px,100%);font-weight:900;font-size:19px}.cta{background:#f3c65e;color:#29333a}.outline{background:#fff9ec;color:#35434b}.help{color:#596b74;font-size:13px!important}.result-distance{font-weight:900;font-size:50px!important;color:#dc8456}.record{font-weight:700;color:#617783}
@media(max-height:490px){.modal{padding:14px 20px;gap:7px}.hero-preview{height:100px;width:105px}.hero-preview img:first-child{width:80px;top:30px;left:13px}.hero-preview img:last-child{width:80px;top:-14px;left:13px}.modal h1{font-size:25px}button.cta,button.outline{min-height:35px;font-size:15px;border-width:3px}.ctrl{width:75px;height:75px}}
.hud-records{display:flex;gap:8px;align-items:flex-start}.best-pill{font-size:clamp(12px,1.5vw,20px)}.best-pill img{width:clamp(22px,2.5vw,34px)}.coin-pill{min-width:0}.home-link{color:#536b76;font-size:13px;font-weight:700;text-decoration:none;padding:4px}.home-link:hover{text-decoration:underline}.result-coins{color:#617783;font-weight:700}.ctrl:focus-visible,.square-btn:focus-visible,.cta:focus-visible,.outline:focus-visible,.home-link:focus-visible{outline:3px solid #26689a;outline-offset:3px}
@media(max-width:600px) and (orientation:portrait){.game-shell{width:100vw;height:100svh;max-height:none;aspect-ratio:auto;box-shadow:none}canvas{inset:15% 0 auto;width:100%;height:62%;object-fit:cover;object-position:36.5% center}.hud{inset:5% 3% auto;height:auto}.distance{font-size:clamp(24px,7vw,38px)}.control-holder{bottom:8%;left:5%;right:5%}.ctrl{width:92px;height:92px}.modal{max-height:90svh;overflow:auto}.best-pill{padding:5px 8px}.hud-records{gap:3px}.best-pill img{width:22px}}