@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&display=swap');
:root{--mint:#b9f0d1;--ink:#eaf5ef;--muted:#9aafb8;--dark:#132c3f}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 80% -12%,#265b64 0%,#122c3c 50%,#0e2030 100%);min-height:100vh;color:var(--ink);font-family:"Noto Sans KR",Outfit,sans-serif}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit;touch-action:manipulation}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,a:focus-visible{outline:3px solid #fcdf9b;outline-offset:3px}
.page{width:min(1100px,calc(100% - 30px));margin:auto}
.nav{height:70px;display:flex;align-items:center;gap:19px;border-bottom:1px solid #ffffff30}
.back{border:1px solid #718a96;background:#203d4c;border-radius:10px;padding:10px 12px;font-weight:800;font-size:11px;color:#d0dcd9}
.wordmark{font:900 25px Outfit,sans-serif;letter-spacing:-1px;margin-left:auto}
.wordmark span{color:#a4e6c4}
.tag{font:800 10px Outfit,sans-serif;letter-spacing:1.2px;color:#9cbbc0;margin-left:auto}
.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 0 19px}
.eyebrow{font:900 10px Outfit,sans-serif;letter-spacing:1.6px;color:#9fe7d0;margin:0 0 8px}
.intro h1{font:900 clamp(27px,4vw,42px) "Noto Sans KR",Outfit,sans-serif;letter-spacing:-1.3px;margin:0 0 8px}
.intro h1 em,.rules h2 em{font-style:normal;color:#fdd99e}
.intro p:not(.eyebrow){margin:0;color:#b4c8ca;font-size:12px;line-height:1.65}
.best{padding:10px 16px;border-radius:13px;min-width:126px;border:1px solid #608c8d;background:#1c414b;text-align:right}
.best small,.best span{display:block;color:#acd0cc;font:800 10px Outfit,sans-serif}
.best strong{font:900 34px Outfit,sans-serif;color:#ffe2a5;display:block}
.arena{background:#193747;border:1px solid #4e797e;border-radius:17px;overflow:hidden;box-shadow:0 25px 55px #0004}
.scoreboard{display:flex;background:#163646;align-items:center;min-height:65px}
.scoreboard>div{padding:10px 18px;min-width:119px;border-right:1px solid #ffffff18}
.scoreboard small,.result-stats small{display:block;color:#9fbfc2;font:800 10px Outfit,sans-serif;letter-spacing:1.2px}
.scoreboard strong{display:block;font:900 22px Outfit,sans-serif}
.scoreboard sup{font-size:11px;color:#bcd7d1}
#goalValue{white-space:nowrap;color:#eccfa8;font-size:18px}
#pauseBtn{margin-left:auto;margin-right:14px;min-height:37px;min-width:40px;background:#305261;color:#e3f5e6;border:1px solid #779b9e;border-radius:9px}
.time-track{height:5px;background:#294e58}
.time-track>div{height:100%;width:100%;background:linear-gradient(90deg,#8cddc7,#f9d599)}
.canvas-wrap{position:relative;width:100%;aspect-ratio:900/500;overflow:hidden}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:manipulation}
.overlay{position:absolute;inset:0;z-index:5;background:#0c263bd9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;text-align:center;backdrop-filter:blur(4px)}
.overlay-kicker{font:900 11px Outfit,sans-serif;color:#a8f3df;letter-spacing:1.5px;margin:0 0 9px}
.overlay h2{font:900 clamp(26px,4vw,46px) "Noto Sans KR",Outfit,sans-serif;margin:0 0 8px}
.overlay h2 em{font-style:normal;color:#ffdba5}
.overlay p:not(.overlay-kicker){line-height:1.8;font-size:13px;color:#dae9e8;margin:0 0 16px}
.overlay small{font-size:11px;color:#a4d0c5;margin-top:11px}
.overlay-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.primary,.secondary{padding:10px 16px;border-radius:10px;min-height:44px;font-weight:900;font-size:12px}
.primary{background:#c3f2d8;border:2px solid #effff1;color:#225347}
.secondary{background:#315263;border:1px solid #86abae;color:#eefaf5}
.result-score{font:900 51px Outfit,sans-serif;color:#ffdfa4}
.result-stats{display:flex;gap:10px;margin:9px 0 16px}
.result-stats>div{padding:9px 12px;min-width:88px;border:1px solid #ffffff30;border-radius:10px;background:#1e4457}
.result-stats strong{font:900 23px Outfit,sans-serif}
.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px;background:#173848}
.direction{min-width:0;display:flex;align-items:center;justify-content:center;gap:13px;padding:8px 13px;min-height:79px;border-radius:13px;border:2px solid #d9f7d6;background:#c1ebd1;color:#22524b;box-shadow:0 5px 0 #417b72}
.direction.center{background:#fbe2b7;border-color:#fff3d8;color:#5b4d39;box-shadow:0 5px 0 #a28757}
.direction.right{background:#bcdee9;border-color:#ecfaff;color:#2d5164;box-shadow:0 5px 0 #497488}
.direction:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #31544e}
.direction .arrow{font:900 35px Outfit,sans-serif}
.direction strong{font:900 20px Outfit,sans-serif}
.direction small{font:800 10px Outfit,sans-serif;letter-spacing:1px}
.status-line{display:flex;align-items:center;gap:12px;padding:10px 17px 15px;background:#173848}
.status-line>strong{white-space:nowrap;font:900 12px Outfit,sans-serif;color:#ffe0ab}
.status-line>span{flex:1;font-size:11px;color:#b7d8d2;overflow-wrap:anywhere}
.progress-track{flex:0 0 100px;height:6px;background:#47686c;border-radius:12px;overflow:hidden}
.progress-track>div{height:100%;width:0;background:#fce4a5;transition:width .08s linear}
.share{font-size:10px;font-weight:850;border:1px solid #658c92;color:#c7e8dd;background:#214958;border-radius:8px;padding:7px}
.rules{display:grid;grid-template-columns:240px 1fr;gap:20px;padding:26px 0 30px}
.rules h2{font-size:25px;margin:0;color:#ffe0ab}
.rules-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rules article{padding:15px;border-radius:12px;border:1px solid #496b71;background:#1b3b4c}
.rules article b{font:900 10px Outfit,sans-serif;color:#9af5d3}
.rules article strong{display:block;margin:7px 0;font-size:14px}
.rules article p{font-size:11px;line-height:1.65;color:#bad0d0;margin:0}
footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff22;padding:17px 0 32px;gap:10px;color:#8eafb4;font-size:10px}
@media(max-width:730px){
 .page{width:calc(100% - 18px)}
 .nav{height:60px}.tag{display:none}.wordmark{font-size:21px}
 .intro{padding:16px 0}.intro h1{font-size:25px}
 .intro p:not(.eyebrow){font-size:10px}
 .best{min-width:90px;padding:8px}.best strong{font-size:25px}
 .scoreboard>div{min-width:0;flex:1;text-align:center;padding:10px 4px}
 .scoreboard small{font-size:8px}.scoreboard strong{font-size:17px}
 #goalValue{font-size:13px}#pauseBtn{min-width:33px;min-height:32px;margin:0 5px}
 .direction{min-height:70px;gap:5px;padding:7px}
 .direction strong{font-size:16px}.direction .arrow{font-size:30px}
 .status-line{gap:9px;padding:9px 11px}.status-line>span{font-size:10px}
 .progress-track{flex-basis:65px}.share{display:none}
 .rules{display:block}.rules-grid{display:grid;grid-template-columns:1fr;margin-top:15px}
 footer{display:block;line-height:1.8}footer a{display:block;margin-top:8px}
}
@media(max-width:420px){
 .intro{gap:7px}.intro h1{font-size:22px}.intro p:not(.eyebrow){font-size:9px}
 .best{min-width:75px}.best strong{font-size:20px}
 .scoreboard strong{font-size:14px}.scoreboard small{font-size:7px}
 .direction{gap:4px;min-height:63px;padding:5px}
 .direction .arrow{font-size:25px}.direction strong{font-size:12px}.direction small{font-size:8px}
 .controls{gap:6px;padding:9px}
 .overlay{padding:9px}.overlay h2{font-size:23px}
 .overlay p:not(.overlay-kicker){font-size:10px;margin:0 0 7px}
 .primary,.secondary{min-height:35px;padding:7px 9px;font-size:10px}
 .result-stats{gap:5px}.result-stats>div{min-width:70px;padding:6px}
 .result-stats strong{font-size:17px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}