@font-face{font-family:system-ui;src:local('Arial')}*{box-sizing:border-box} :root{color-scheme:light;--ink:#26352e;--muted:#737a6f;--paper:#f5f2e9;--green:#375849;--orange:#c66a3e}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b96a2e;outline-offset:4px}[hidden]{display:none!important}header{max-width:1260px;margin:auto;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dcded3}.brand{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:750;color:var(--ink);text-decoration:none;letter-spacing:-.8px}header nav{display:flex;gap:8px;align-items:center}header nav button,header nav a{border:0;background:transparent;color:var(--ink);font-size:12px;padding:10px;text-decoration:none}header nav button{border-radius:30px;background:#e9e9df}.edition{letter-spacing:2px;font-size:10px;color:var(--muted)}main{max-width:1200px;margin:auto;padding:30px 30px 0}.heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:2.6px;color:var(--muted);font-weight:650;margin:0 0 10px}.heading h1{font-size:46px;letter-spacing:-2.5px;margin:0;line-height:1.1;font-weight:850}.heading h1 em{font-style:normal;color:var(--orange)}.intro{font-size:14px;color:var(--muted);margin:12px 0 0}.best{text-align:right;font-variant-numeric:tabular-nums}.best small{display:block;font-size:10px;letter-spacing:1px;color:var(--muted);margin-bottom:4px}.best b{font-size:32px;font-weight:450}.best span{font-size:11px;margin-left:5px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:start}.arena{position:relative;height:580px;border-radius:20px;overflow:hidden;background:#c1bba9;box-shadow:0 16px 40px #26352e13;isolation:isolate}#stage{position:absolute;inset:0;touch-action:none}#stage canvas{display:block;width:100%;height:100%;outline:none}.top-hud{position:absolute;top:22px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:8px}.place{background:#f8f5ece8;backdrop-filter:blur(8px);padding:9px 12px;border-radius:20px;font-size:9px;font-weight:650;letter-spacing:1.4px}.place i{display:inline-block;width:6px;height:6px;background:#71905b;border-radius:50%;margin-right:6px}.round{background:#283b31e8;color:#fff;border-radius:12px;padding:10px 13px;text-align:center;min-width:88px}.round small{font-size:9px;display:block;opacity:.6;margin-bottom:3px;letter-spacing:1px}.round b{font-size:19px;font-weight:600}.score-hud{position:absolute;top:80px;left:24px;pointer-events:none;display:flex;gap:22px;color:#27372d}.score-hud small{display:block;font-size:10px;opacity:.7;margin-bottom:4px}.score-hud b{font-size:27px;line-height:1;font-variant-numeric:tabular-nums}.bottom-hud{position:absolute;bottom:20px;left:20px;right:20px;pointer-events:none;text-align:center}.cue{display:inline-block;background:#f8f5eee8;backdrop-filter:blur(10px);border:1px solid #ffffff6b;border-radius:12px;padding:12px 20px;font-size:13px;font-weight:550;line-height:1.5;box-shadow:0 4px 20px #00000008}.cue.success{background:#2c503fef;color:#fff}.cue.miss{background:#fcf1e5ef;color:#864720}#power-float{margin:10px auto 0;width:180px;background:#27382c30;height:5px;border-radius:10px;overflow:hidden}#power-fill{height:100%;width:0;background:#43664c;transition:background .1s}.callout{position:absolute;top:30%;left:0;right:0;pointer-events:none;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .15s,transform .15s}.callout.show{opacity:1;transform:translateY(0)}.callout b{display:block;color:#fffdf0;font-weight:900;font-size:48px;letter-spacing:-2px;text-shadow:0 3px 0 #315240,0 7px 24px #253d3266}.callout small{display:inline-block;background:#314f3fe8;color:#fff;margin-top:8px;border-radius:20px;padding:7px 15px;font-size:12px}#loading{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;font-size:14px;background:#e7e2d5;z-index:2}.panel{padding:6px 0}.panel h2{font-size:16px;letter-spacing:-.5px;margin:0 0 18px}.modes{display:flex;flex-direction:column;gap:7px}.mode{border:1px solid #d9ddcf;border-radius:12px;text-align:left;padding:13px 14px;display:flex;gap:12px;align-items:center;background:transparent;color:var(--ink)}.mode.active{background:#e5eadd;border-color:#8b9e82}.mode .mark{font-size:19px;width:24px;text-align:center}.mode strong{display:block;font-size:13px;font-weight:650}.mode small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.section-label{font-size:10px;font-weight:700;letter-spacing:1px;margin:22px 0 10px;color:var(--muted)}.colors{display:flex;gap:12px}.swatch{width:35px;height:35px;border-radius:50%;border:3px solid var(--paper);outline:1px solid transparent;position:relative}.swatch[aria-pressed=true]{outline:1px solid #506949}.swatch[aria-pressed=true]:after{content:'✓';color:#fff;font-weight:700}.ground{display:flex;gap:5px}.ground button{flex:1;border:1px solid #d9ddcf;border-radius:8px;font-size:11px;padding:9px 4px;background:transparent;color:var(--ink)}.ground button[aria-pressed=true]{background:#e5eadd;border-color:#8b9e82}.primary{border:0;border-radius:12px;background:var(--green);color:white;min-height:48px;padding:13px 18px;font-weight:650;font-size:14px;box-shadow:0 4px 12px #37584915}.start{width:100%;margin-top:22px;display:flex;align-items:center;justify-content:space-between}.under-start{font-size:10px;text-align:center;color:var(--muted);margin:10px 0}.guide{border-top:1px solid #dcded3;margin-top:22px;padding-top:18px}.guide p{font-size:12px;line-height:1.8;color:#657060;margin:7px 0}.guide strong{color:var(--ink)}.guide button,.text-button{border:0;background:transparent;padding:5px 0;color:var(--green);text-decoration:underline;text-underline-offset:3px;font-size:11px}.active-controls{margin-top:20px;border-top:1px solid #dcded3;padding-top:18px}.active-controls label{font-size:12px;display:flex;justify-content:space-between}.active-controls input{width:100%;accent-color:var(--green);margin:15px 0}.active-controls .primary{width:100%}.active-controls .text-button{display:block;margin:10px auto}.history{display:flex;gap:6px;margin-top:13px}.history i{width:12px;height:12px;border-radius:3px;border:1px solid #b8b9a9;background:#e6e4d8}.history i.hit{background:#4f7654;border-color:#4f7654}.history i.miss{background:#c88b6b;border-color:#c88b6b}.detail-strip{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;color:var(--muted);font-size:10px;gap:10px}.detail-strip span{display:flex;align-items:center;gap:7px}.detail-strip i{width:5px;height:5px;border-radius:50%;background:#c49156}.footnote{font-size:11px;color:var(--muted);line-height:1.7;text-align:center;margin:12px auto 24px;max-width:750px}footer{border-top:1px solid #dcded3;max-width:1140px;margin:10px auto 0;padding:18px 0 24px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}footer a{color:var(--green);text-decoration:none}dialog{border:1px solid #ddd9c9;border-radius:22px;background:#f7f4eb;color:var(--ink);padding:30px;max-width:430px;width:calc(100% - 36px);box-shadow:0 25px 100px #0004}dialog::backdrop{background:#1d30276e;backdrop-filter:blur(5px)}dialog h2{margin:10px 0;font-size:30px;letter-spacing:-1px}dialog p{font-size:13px;line-height:1.8;color:var(--muted)}.result-total{font-size:66px;font-weight:800;letter-spacing:-3px;margin:15px 0;color:var(--green)}.result-stats{display:flex;gap:20px;border-top:1px solid #ddd9c9;border-bottom:1px solid #ddd9c9;padding:15px 0;margin:0 0 20px}.result-stats span{font-size:11px;flex:1;color:var(--muted)}.result-stats b{display:block;font-size:22px;color:var(--ink);margin-top:5px}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.secondary{background:transparent;border:1px solid #b6c1ad;color:var(--green);border-radius:12px;padding:12px;font-size:12px}dialog .text-button{display:block;margin:14px auto 0}#share-status{font-size:11px;min-height:16px}dialog ol{padding-left:20px;font-size:13px;line-height:2.2}.mini-tile{width:70px;height:70px;margin:22px auto;background:conic-gradient(#b64e35 0 25%,#d77550 0 50%,#b64e35 0 75%,#e48d65 0);transform:rotate(20deg);box-shadow:3px 8px 0 #813a2b,9px 18px 20px #0002;border:1px solid #f7bd8b}.help-keys{font-size:11px!important;background:#e9eadd;padding:12px;border-radius:10px}.paused-screen{position:absolute;inset:0;z-index:4;background:#e8e8ddc9;backdrop-filter:blur(5px);display:grid;place-content:center;text-align:center;gap:15px}.paused-screen h2{font-size:26px;margin:0}.pause{pointer-events:auto;background:#f8f5ece8;border:0;border-radius:20px;padding:9px 12px;font-size:11px;color:var(--ink)}.hud-right{display:flex;gap:8px;align-items:start}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#263d32;color:#fff;border-radius:12px;padding:13px 20px;font-size:12px;z-index:20;max-width:90%;text-align:center}
@media(min-width:1500px){main{padding-top:40px}.arena{height:640px}}@media(max-width:800px){header{height:56px;padding:0 18px}.edition{display:none}main{padding:22px 16px 0}.heading{margin-bottom:18px}.heading h1{font-size:34px}.intro{font-size:12px;max-width:240px;line-height:1.5}.best b{font-size:26px}.layout{grid-template-columns:1fr;gap:10px}.arena{height:min(62dvh,570px);min-height:390px;border-radius:16px}.panel{display:grid;grid-template-columns:1fr;gap:0}.panel h2{display:none}.modes{flex-direction:row;gap:6px}.mode{flex:1;padding:10px 8px;gap:6px}.mode .mark{font-size:15px;width:18px}.mode strong{font-size:11px}.mode small{font-size:9px}.setup-options{display:flex;align-items:center;justify-content:space-between;gap:14px}.setup-options .section-label{margin-top:15px}.ground button{padding:8px;font-size:10px}.swatch{width:30px;height:30px}.colors{gap:9px}.start{margin-top:16px}.guide{display:none}.active-controls{margin-top:8px;padding-top:12px;display:grid;grid-template-columns:1fr 130px;gap:8px 16px}.active-controls label{grid-column:1}.active-controls input{grid-column:1;margin:0}.active-controls .primary{grid-column:2;grid-row:1/3;min-height:44px}.active-controls .text-button{grid-column:1/3;margin:0}.detail-strip{font-size:9px;padding:10px 2px}.footnote{font-size:10px;margin:10px auto 20px}footer{margin:0 16px;padding:16px 0}.top-hud{top:16px;left:14px;right:14px}.score-hud{left:17px;top:65px}.place{font-size:8px;padding:8px 9px}.round{padding:7px 10px;min-width:70px}.round b{font-size:16px}.bottom-hud{bottom:14px;left:12px;right:12px}.cue{font-size:12px;padding:10px 12px}.callout b{font-size:40px}.history{margin-top:9px}.heading .eyebrow{font-size:8px;letter-spacing:1.8px}.under-start{margin-bottom:0}.playing .setup-options,.playing .modes,.playing .under-start{display:none}.playing .panel{padding-top:0}.playing .start{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.score-hud{background:#f8f5eceb;border:1px solid #fff6;backdrop-filter:blur(8px);border-radius:12px;padding:12px 14px;box-shadow:0 3px 12px #27372d08}
@media(max-width:800px){.score-hud{padding:9px 11px}.score-hud b{font-size:23px}}