@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Noto+Sans+KR:wght@400;600;700;900&display=swap');
:root{font-family:'DM Sans','Noto Sans KR',sans-serif;color:#183427;background:#142d22}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible{outline:2px solid #d5f469;outline-offset:-3px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}.field-shell{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}canvas{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}canvas[data-phase="place"]{cursor:crosshair}canvas[data-phase="aim"],canvas[data-phase="power"]{cursor:pointer}.field-header{position:absolute;top:max(14px,env(safe-area-inset-top));left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.brand{font-size:17px;letter-spacing:-.5px;color:#ecf0d6;text-shadow:0 1px 6px #142d22}.field-header>div{display:flex;gap:7px;pointer-events:auto}.field-header button{font-size:10px;background:#163b2de8;border:1px solid #ffffff32;color:#e3edce;padding:9px 12px;border-radius:7px}.overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(360px,calc(100% - 36px));max-height:calc(100dvh - 116px);overflow:auto;overscroll-behavior:contain;background:#fffef3f5;border:1px solid #ffffffe0;box-shadow:0 25px 70px #071c2155;border-radius:19px;padding:28px;text-align:center;backdrop-filter:blur(14px)}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:800;margin:0 0 12px}h1{font-size:29px;letter-spacing:-1.5px;margin:0 0 9px}h1 span{font-weight:400}h2{font-size:24px;margin:0 0 8px;letter-spacing:-.7px}.muted{font-size:11px;color:#72806b;line-height:1.8;margin:0}.stepper{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;margin:24px 0 18px;background:#e9eddf;border-radius:12px}.stepper button{border:1px solid #cdd6bc;background:#fffdf2;color:#31462a;border-radius:50%;width:37px;height:37px;font-size:25px}.stepper strong{display:block;font-size:42px;line-height:1.1}.stepper span{font-size:8px;letter-spacing:2px}.cap-preview{display:flex;justify-content:center;flex-wrap:wrap;gap:5px}.cap-icon{width:52px;height:54px;object-fit:contain;transform:rotate(-9deg)}.small-note{font-size:10px;color:#7a856f;margin:16px 0 20px}.primary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 18px;min-height:49px;font-size:13px;font-weight:800;border:0;border-radius:8px;background:#d5f469;color:#24381b}.primary:hover{background:#c7e75c}.primary span{font-size:20px}.turn-hud{position:absolute;top:66px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:7px 13px;background:#153b2de8;border:1px solid #ffffff28;border-radius:11px;color:#edf4d9;pointer-events:none;white-space:nowrap}.turn-hud .cap-icon{width:38px;height:40px}.turn-hud p{font-size:8px;letter-spacing:1px;color:#b8cc9c;margin:0 0 3px}.turn-hud strong{font-size:12px}.turn-hud #capName{font-size:9px;margin-left:7px;color:#b9c9a9}.steps{display:flex;gap:9px;border-left:1px solid #ffffff22;padding-left:13px;margin-left:8px;font-size:9px;color:#839d77}.steps .active{color:#d5f469;font-weight:800}.field-instruction{position:absolute;top:135px;left:50%;transform:translateX(-50%);text-align:center;padding:10px 17px;border-radius:9px;background:#173b2de8;color:#eef3d7;max-width:calc(100% - 28px);pointer-events:none;white-space:nowrap}.field-instruction strong{font-size:12px}.field-instruction p{font-size:10px;color:#c3d1ae;margin:5px 0 0}.field-meter{position:absolute;top:204px;left:50%;transform:translateX(-50%);width:210px;border:1px solid #ffffff20;background:#173b2dec;border-radius:9px;padding:11px 14px;pointer-events:none}.meter-label{display:flex;justify-content:space-between;font-size:9px;color:#d4e5b7;margin-bottom:8px}.meter{position:relative;background:#456040;height:8px;border-radius:6px;overflow:hidden}.meter>div{height:100%;width:0;background:#d5f469}.meter>i{position:absolute;left:80%;top:0;height:100%;border-left:1px solid #152b22aa}.distance{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:24px;color:#d2dbb8;text-shadow:0 1px 5px #122d20;font-size:10px;letter-spacing:1.5px;pointer-events:none}.results{width:min(410px,calc(100% - 32px))}.results .primary{margin-top:19px}#scoreboard{margin-top:17px;text-align:left}.score-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #dfe3d2}.score-row .cap-icon{width:36px;height:38px}.rank{font-size:13px;width:16px;color:#738454;text-align:center}.score-name{font-size:12px;flex:1;font-weight:700}.score-name small{display:block;font-size:9px;color:#819074;font-weight:400;margin-top:3px}.score-value{font-size:12px}.retired{color:#ad6855;font-size:10px}dialog{border:1px solid #dce2cc;border-radius:18px;max-width:480px;width:calc(100% - 32px);max-height:85dvh;background:#fffef3;color:#183427;padding:30px}dialog::backdrop{background:#0b251dc9;backdrop-filter:blur(5px)}dialog ol{padding-left:20px;font-size:12px;line-height:1.9}dialog li{margin:12px 0}dialog li b{display:block}.dialog-close{position:absolute;right:12px;top:10px;background:none;border:0;font-size:28px;color:#183427}
@media(max-width:600px){.field-header{left:12px;right:12px}.brand{font-size:12px}.field-header button{font-size:9px;padding:8px}.turn-hud{top:60px;width:max-content;max-width:calc(100% - 20px);gap:5px;padding:6px 10px}.turn-hud #capName{display:none}.steps{gap:8px;margin-left:3px;padding-left:10px}.field-instruction{top:125px;padding:9px 12px}.field-instruction p{font-size:9px}.field-meter{top:191px}.distance{left:15px;font-size:9px}.overlay{padding:24px}.score-row{padding:7px 0}}
@media(max-height:550px){.overlay{padding:17px;max-height:calc(100dvh - 70px);top:calc(50% + 15px)}.stepper{margin:12px 0;padding:8px 20px}.stepper strong{font-size:29px}.cap-icon{width:35px;height:37px}.small-note{margin:8px 0}.turn-hud{left:15px;transform:none;top:55px}.field-instruction{left:auto;right:15px;transform:none;top:55px}.field-meter{left:auto;right:15px;transform:none;top:120px}.results .score-row{padding:5px 0}}

/* During play the desktop itself is the only playing surface. */
body.playing .brand,body.playing #viewButton,body.playing #helpButton{display:none}
body.playing .field-header{justify-content:flex-end}
body.playing .field-header button{background:none;border:0;color:#493c2d;padding:7px;font-size:10px}
.field-instruction{top:58px;background:none;border:0;border-radius:0;color:#352d20;padding:0;white-space:normal;width:calc(100% - 36px);text-shadow:0 1px 2px #eddfb788}
.field-instruction strong{font-size:13px}.field-instruction p{color:#4d432f}
body.playing:not([data-phase="finished"]) .field-instruction p{display:none}
.field-meter{top:90px;background:none;border:0;padding:8px 12px;width:180px}
.meter-label{color:#413a28}.meter{background:#65584040}.meter>div{background:#4b692f}
.distance{color:#594c34;text-shadow:none;font-size:9px}
body[data-phase="finished"] .field-instruction{top:42%;background:none;color:#f4f1d9;text-shadow:0 2px 8px #132d22;width:100%;padding:16px}
body[data-phase="finished"] .field-instruction strong{font-size:22px}body[data-phase="finished"] .field-instruction p{color:#edf0d6}
@media(max-height:550px){.field-instruction{left:50%;right:auto;transform:translateX(-50%);top:45px}.field-meter{left:50%;right:auto;transform:translateX(-50%);top:76px}}

.final-results{width:min(430px,calc(100% - 30px));max-height:calc(100dvh - 48px);display:flex;flex-direction:column;overflow:hidden;padding:25px;z-index:5}
.final-results>h2,.final-results>.eyebrow,.final-results>.muted,.final-results>.primary,.final-results>.result-note{flex-shrink:0}
.result-list{overflow-y:auto;overscroll-behavior:contain;min-height:0;text-align:left;margin:16px 0 20px;padding-right:3px}
.result-list h3{font-size:11px;color:#67784f;margin:12px 0 5px}.result-list h3:first-child{margin-top:0}
#retiredSection{margin-top:22px}.final-results .score-row{padding:10px 0}.final-results .cap-icon{width:43px;height:45px}.final-results .rank{width:24px;flex-shrink:0}.final-results .score-value{white-space:nowrap}.result-note{font-size:9px;color:#859176;margin:10px 0 0}.empty-result{font-size:11px;color:#8a917b;padding:12px 0;margin:0}
@media(max-height:550px){.final-results{top:50%;max-height:calc(100dvh - 24px);padding:18px}.final-results .score-row{padding:5px 0}.result-list{margin:8px 0 12px}}

.numbered-cap{position:relative;display:inline-flex;flex-shrink:0}.cap-number{position:absolute;right:0;bottom:1px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 3px;border-radius:10px;background:#183427;color:#fffef3;border:1px solid #fffef3;font-size:9px;font-weight:700}.cap-preview{max-height:230px;overflow-y:auto;padding:3px}.cap-preview .cap-icon{width:44px;height:46px}
.setup-links{display:flex;justify-content:center;flex-wrap:wrap;gap:7px 13px;margin-top:17px}.setup-links a{color:#667559;font-size:9px;text-decoration:none;border-bottom:1px solid #b9c3aa;padding-bottom:2px}.setup-links a:hover{color:#183427;border-color:#183427}
@media(pointer:coarse){canvas:focus{outline:none}}