@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--ink:#243542;--mint:#39a68f;--coral:#ed7b87;--bg:#fbf8f2}
*{box-sizing:border-box}
body{margin:0;min-width:300px;background:var(--bg);font:500 13px/1.6 Outfit,"Noto Sans KR",sans-serif;color:var(--ink)}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}
button:focus-visible,a:focus-visible{outline:3px solid #e9aa57;outline-offset:3px}
[hidden]{display:none!important}
.shell{max-width:1180px;padding:0 22px;margin:auto}
.nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid #e5e5d9}
.back,.edition{color:#879b98;font-weight:800;letter-spacing:.05em;font-size:11px}
.back:hover{color:var(--mint)}
.brand{font:900 29px Outfit,sans-serif;letter-spacing:-.065em}
.brand>span:first-child{color:var(--coral)}
.brand-icon{background:#daf1e6;color:#38a38e;border-radius:11px;padding:1px 8px;margin-left:7px}
.hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:31px 0 22px}
.eyebrow{font-size:10px;letter-spacing:.18em;color:#40a88d;font-weight:900}
.hero h1{font-weight:900;font-size:clamp(32px,4.4vw,53px);line-height:1.2;letter-spacing:-.07em;margin:6px 0 8px}
.hero h1 em{color:var(--coral);font-style:normal}
.hero p{margin:0;color:#8c9c98;font-size:12px}
.personal{background:#fff;border:1px solid #e5e7d9;box-shadow:0 10px 27px #9eb8a922;
 padding:11px 20px;min-width:142px;border-radius:16px;display:grid;justify-items:end}
.personal small{font-size:10px;font-weight:800;color:#9baca5}
.personal strong{font:900 38px/1.25 Outfit,sans-serif;color:#e27985}
.personal span{font-size:10px;color:#8b9c92;font-weight:700}
.game-layout{display:grid;grid-template-columns:minmax(0,720px) 285px;gap:18px;align-items:start;justify-content:center}
.game-box{min-width:0;border:1px solid #d4e3d9;border-radius:19px;overflow:hidden;
 background:white;box-shadow:0 15px 41px #c5d7c222}
.scoreboard{display:flex;gap:15px;align-items:center;min-height:78px;padding:13px 16px}
.stat{min-width:65px;display:grid}.stat.score{flex:1}
.stat small{font-size:9px;color:#96aaa6;font-weight:900;letter-spacing:.10em}
.stat strong{font:900 27px/1.15 Outfit,sans-serif;white-space:nowrap}
.stat strong span{font-size:13px;color:#9caeac}
.stat:first-child strong{color:#e67a82}
.stat.score strong{color:#293e49}.stat:nth-child(4) strong{color:#379d89}
.misses strong{font-size:15px;color:#d98289;letter-spacing:1px}
.pause-button{background:#f5faf7;border:1px solid #d7e5dd;border-radius:10px;padding:9px 12px;font-weight:900}
.pause-button:hover:not(:disabled){background:#e4f4ea}
.timebar{height:5px;background:#e8eee4}.timebar>div{height:100%;width:100%;background:linear-gradient(90deg,#eab77a,#6cc6a3);transition:width .08s linear}
.stage{position:relative;aspect-ratio:4/3;background:#faf8f0;overflow:hidden;isolation:isolate}
.stage canvas{width:100%;height:100%;display:block;touch-action:none}
.overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
 padding:19px;gap:12px;background:#fbfdf8f3;backdrop-filter:blur(13px);overflow-y:auto}
.kicker{border:1px solid #d7eadb;background:#e8f7ec;color:#388f80;border-radius:6px;padding:6px 13px;
 font:900 10px Outfit,sans-serif;letter-spacing:.1em}
.overlay h2{margin:0;font:900 clamp(36px,6vw,69px)/1.04 Outfit,sans-serif;letter-spacing:-.065em}
.overlay h2 em{font-style:normal;color:var(--coral)}
.overlay p{margin:0;color:#829691;font-size:12px;line-height:1.8}
.overlay p b{color:#c77876}
.overlay-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.primary,.secondary{min-height:44px;border-radius:10px;padding:11px 16px;font-weight:900}
.primary{background:#38aa90;border:1px solid #319b84;color:#fff;box-shadow:0 7px 15px #48ae9a28}
.primary:hover{background:#258f79}
.secondary{background:#fff;border:1px solid #d4e2d8;color:#53766d}
.secondary:hover{background:#e9f8ef}
.overlay-help{color:#92a49b;font-weight:700;font-size:11px}
kbd{background:white;border:1px solid #cbdcd1;border-radius:6px;padding:4px 8px;font:900 11px Outfit,sans-serif;margin-right:6px}
.result-score{font:900 59px/1 Outfit,sans-serif;color:#df7885}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:23px;margin:4px 0 6px}
.result-stats div{display:grid}
.result-stats small{font-size:10px;color:#98a99e;font-weight:800}
.result-stats strong{font-size:28px;font-weight:900}
.controls{padding:14px 18px 18px;border-top:1px solid #e6eee7;background:#fff}
.pour-button{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;border:2px solid #61b8a2;
 min-height:93px;border-radius:15px;background:linear-gradient(180deg,#ddf8eb,#cbefdf);color:#277969;
 touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:0 5px 0 #b1dfca;
 transition:transform .12s,background .12s}
.pour-button:active:not(:disabled),.pour-button.is-pressed{background:linear-gradient(180deg,#ffe6be,#f7d7a0);color:#956b45;
 border-color:#f0bc78;transform:translateY(4px);box-shadow:0 1px 0 #e8c89f}
.pour-mark{font:900 47px/1 Outfit,sans-serif}
.pour-copy{display:grid;text-align:left;gap:1px}
.pour-copy strong{font:900 clamp(20px,3.5vw,29px)/1.1 Outfit,sans-serif;letter-spacing:-.04em}
.pour-copy small{font-weight:700;font-size:11px}
.keycap{border:1px solid currentColor;border-radius:6px;padding:5px 9px;font-size:11px;font-weight:900;opacity:.8}
.control-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px}
#liveStatus{font-size:12px;font-weight:700;color:#83a093;max-width:65%;word-break:keep-all}
.fill-track{width:35%;height:9px;border-radius:999px;background:#e8eee7;position:relative;overflow:visible}
.fill-track>div{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#72ceb7,#e9b77a);transition:width .06s}
.fill-track>i{position:absolute;top:-4px;left:80%;height:17px;width:3px;border-radius:2px;background:#e98785}
.side{background:white;border:1px solid #e0e9df;border-radius:18px;padding:22px;box-shadow:0 10px 30px #d6e2d022}
.side-heading h2{font-size:24px;letter-spacing:-.06em;font-weight:900;line-height:1.3;margin:8px 0}
.side-heading p{margin:0 0 16px;color:#94a59d;font-size:11px;word-break:keep-all}
.grade-list{display:grid;gap:4px}
.grade{display:flex;align-items:center;gap:8px;padding:10px 3px;border-bottom:1px solid #eef3ee}
.grade-dot{height:10px;width:10px;border-radius:50%;background:#83caaf;flex:none}
.grade-dot.great{background:#add7b5}.grade-dot.good{background:#ebca8c}.grade-dot.miss{background:#e59b9f}
.grade strong{font-size:11px;font-weight:900;min-width:64px}
.grade small{color:#a1afa9;font-size:9px;flex:1}
.grade b{font-size:11px;color:#3b9b84;white-space:nowrap}
.grade.fail b{color:#d07980}
.guide-note{background:#f1f9f0;border:1px solid #d9ead7;border-radius:13px;padding:14px;margin-top:20px}
.guide-note span{font:900 9px Outfit,sans-serif;color:#4a9e84;letter-spacing:.12em}
.guide-note strong{display:block;margin:6px 0;font-size:12px}
.guide-note p{font-size:10px;color:#8c9e95;margin:0}
.share{width:100%;min-height:42px;margin-top:15px;border:1px solid #d4e7db;background:#fff;color:#508a7b;border-radius:10px;font-weight:800;font-size:11px}
.share:hover{background:#eef9f1}
.bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:39px 0}
.bottom h2{margin:6px 0 0;font-size:21px;letter-spacing:-.05em}
.pills{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.pills span{border:1px solid #e2eadd;background:#fff;border-radius:30px;padding:6px 11px;font-size:10px;color:#819c90;font-weight:800}
footer{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;border-top:1px solid #e4e9df;padding:17px 0 26px;font-weight:700;font-size:10px;color:#99aaa0}
footer a:hover{color:#289e84}
@media(max-width:1090px){.game-layout{grid-template-columns:minmax(0,720px);justify-content:center}
.side{max-width:720px;width:100%;margin:auto}.grade-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 20px}
.bottom{max-width:720px;margin:auto}}
@media(max-width:720px){
 .shell{padding:0 11px}.nav{height:58px}.brand{font-size:23px}.brand-icon{display:none}.edition{display:none}
 .hero{padding:18px 0 14px;gap:12px}.hero h1{font-size:clamp(26px,6vw,40px)}.hero p{font-size:10px}
 .eyebrow{font-size:9px}.personal{min-width:92px;padding:8px 9px;border-radius:10px}
 .personal small,.personal span{font-size:9px}.personal strong{font-size:29px}
 .game-box{border-radius:12px}.scoreboard{gap:8px;min-height:61px;padding:8px}
 .stat{min-width:0}.stat small{font-size:8px}.stat strong{font-size:19px}
 .stat strong span{font-size:9px}.misses strong{font-size:11px}
 .pause-button{padding:4px 8px;min-height:33px}
 .controls{padding:11px}.pour-button{min-height:75px;gap:8px}.pour-mark{font-size:36px}
 .pour-copy strong{font-size:clamp(18px,5vw,26px)}.pour-copy small{font-size:10px}.keycap{display:none}
 .control-bottom{margin-top:11px}#liveStatus{font-size:11px}
 .side{padding:15px}.side-heading h2{font-size:20px}.side-heading p{font-size:10px}
 .grade strong{font-size:10px}.grade small,.grade b{font-size:9px}
 .bottom{padding:28px 0;display:block}.bottom h2{font-size:18px}.pills{margin-top:14px;justify-content:flex-start}
 .stage>.overlay{position:fixed;inset:0;max-height:100dvh;overflow-y:auto;
  padding:calc(17px + env(safe-area-inset-top)) 12px calc(17px + env(safe-area-inset-bottom))}
 .overlay h2{font-size:clamp(37px,9vw,65px)}.overlay p{font-size:12px}
 .overlay-actions button{font-size:12px}.result-score{font-size:51px}
}
@media(max-height:480px) and (max-width:720px){.stage>.overlay{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}