@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans','Noto Sans TC',sans-serif;color:#242a22;background:#f5f3ed;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;font-weight:400;--ink:#242a22;--muted:#777a70;--orange:#cb6845;--green:#354639;--line:#dfddd3;--paper:#f5f3ed;--mono:'DM Mono',monospace}*{box-sizing:border-box}body{margin:0;min-width:340px;min-height:100vh;background:radial-gradient(ellipse at 55% 35%,#fbfaf6 0,#f5f3ed 55%,#f0eee5 100%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}.app-shell{max-width:1240px;margin:0 auto;padding:0 42px}.topbar{height:79px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}.brand-mark{width:37px;height:37px;border-radius:50%;background:#354639;display:grid;place-items:center}.brand-mark svg{width:25px;fill:none;stroke:#f2eee4;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.brand-name{font-weight:800;font-size:14px;letter-spacing:.07em;line-height:1.2}.brand-sub{display:block;margin-top:3px;font:8px var(--mono);letter-spacing:.12em;color:#7e8076}.topbar-note,.sound-toggle{font:10px var(--mono);letter-spacing:.08em;color:#797a70}.topbar-note{display:flex;gap:9px;align-items:center}.live-dot,.status-dot{width:7px;height:7px;border-radius:50%;background:#71956c;display:inline-block;box-shadow:0 0 0 3px #71956c21}.sound-toggle{cursor:pointer;border:1px solid var(--line);border-radius:2px;background:transparent;padding:9px 12px;color:var(--ink);display:flex;gap:8px;align-items:center;transition:all .18s}.sound-toggle:hover{border-color:#899082}.sound-toggle span:first-child{font-size:14px;color:var(--orange)}.intro{padding:34px 0 22px;display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{font:10px var(--mono);letter-spacing:.09em;color:#848479;margin:0 0 12px}.eyebrow span{color:var(--orange)}h1{font-size:clamp(32px,4vw,45px);font-weight:600;letter-spacing:-.075em;margin:0;line-height:1.23}h1 em{font-style:normal;color:var(--orange)}.intro-subtitle{font-size:12px;color:#77786f;margin:10px 0 0;letter-spacing:.025em}.session-stamp{display:flex;align-items:flex-end;gap:9px;padding-bottom:4px}.stamp-label{font:9px var(--mono);letter-spacing:.08em;color:#8c8a80}.stamp-number{font-size:11px;color:#56594f}.stamp-line{width:31px;height:1px;background:#cb6845;margin-bottom:6px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:stretch}.play-column{min-width:0}.range-frame{border:1px solid #d8d5c9;background:#e8e7d9;box-shadow:0 7px 28px #3837280a}.range-topline,.range-bottomline{height:34px;background:#f6f4ed;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#737469;font:9px var(--mono);letter-spacing:.04em}.range-topline{border-bottom:1px solid #d8d5c9}.range-bottomline{height:32px;border-top:1px solid #d8d5c9;font-size:8px}.range-bottomline b{color:#343c32;font-weight:500}.range-topline>span:first-child{display:flex;align-items:center;gap:8px}.status-dot{width:5px;height:5px}.range-coordinates{color:#797a70}.canvas-wrap{position:relative;overflow:hidden;touch-action:none;cursor:crosshair;background:#d9dfd1}canvas{width:100%;height:auto;aspect-ratio:1.84;display:block;touch-action:none}.canvas-hint{position:absolute;top:14px;left:15px;display:flex;align-items:center;gap:10px;padding:9px 12px;background:#f8f7f0e8;border:1px solid #ffffffad;box-shadow:0 3px 15px #1b241111;border-radius:2px;pointer-events:none;transition:opacity .3s,transform .3s}.canvas-hint.dismissed{opacity:0;transform:translateY(-6px)}.hint-icon{font-size:21px;color:var(--orange)}.canvas-hint b,.canvas-hint small{display:block}.canvas-hint b{font-size:11px;font-weight:700}.canvas-hint small{font-size:9px;color:#74776c;margin-top:3px}.hint-dismiss{font:8px var(--mono);color:#8b8c82;border-left:1px solid #e1dfd4;padding-left:10px;margin-left:2px}.round-overlay{position:absolute;inset:0;background:#263328df;backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f5f3ed}.round-overlay[hidden]{display:none}.overlay-kicker,.overlay-label{font:9px var(--mono);letter-spacing:.18em;color:#c4beab}.round-overlay>strong{font-size:24px;margin-top:9px;font-weight:600}.overlay-score{font:500 53px var(--mono);color:#e4a17f;margin-top:8px;line-height:1}.overlay-label{margin-top:5px}.overlay-button{margin-top:22px;background:#d57a56;color:#fff;border:0;padding:11px 18px;cursor:pointer;font-size:11px;transition:background .2s}.overlay-button:hover{background:#e08d68}.controls-note{display:flex;align-items:center;gap:10px;padding:12px 4px 0;color:#818177}.control-symbol{display:grid;place-items:center;width:25px;height:25px;border:1px solid #dcd9cd;color:#686c5f;font-size:12px}.controls-note>span:nth-child(2){display:flex;gap:9px;align-items:baseline}.controls-note b{font-size:10px;color:#4e5348;white-space:nowrap}.controls-note>span:nth-child(2)>span{font-size:9px}.controls-note kbd{margin-left:auto;white-space:nowrap;font:9px var(--mono);border:1px solid #dedbd1;border-radius:2px;padding:4px 7px;background:#f9f7f1}.controls-note kbd i{font-style:normal;font:9px 'DM Sans',sans-serif;color:#85857a}.score-panel{display:flex;flex-direction:column;border:1px solid #dfddd3;background:#fbfaf6;padding:17px 17px 13px;min-height:100%}.panel-heading{display:flex;justify-content:space-between;align-items:center;color:#88877d;font:9px var(--mono);letter-spacing:.1em}.panel-heading-mark{font-size:14px;color:var(--orange)}.score-block{margin-top:32px}.metric-label{display:flex;align-items:center;gap:9px;font-size:11px;color:#74756b}.metric-label span{font:8px var(--mono);color:#aaa89e;letter-spacing:.09em}.score-number{display:block;font:500 45px var(--mono);letter-spacing:-.08em;color:#30382e;margin-top:6px;line-height:1.05}.score-divider{height:1px;background:#e4e2d9;margin-top:18px;position:relative}.score-divider:before{content:'';display:block;width:34px;height:1px;background:#cb6845}.arrows-block{margin-top:20px}.arrow-count{display:flex;align-items:baseline;gap:8px;margin-top:6px}.arrow-count strong{font:500 34px var(--mono);letter-spacing:-.06em;color:#30382e}.arrow-count span{font-size:10px;color:#85857b}.arrow-pips{display:flex;gap:5px;margin-top:11px}.arrow-pip{height:3px;flex:1;background:#d8d7ce;transition:background .2s}.arrow-pip.active{background:#63745a}.arrow-pip.used{background:#e1a38d}.last-shot{display:flex;align-items:center;gap:10px;margin-top:24px;background:#f2f0e8;padding:11px 9px;min-height:50px}.last-shot-icon{font-size:18px;color:#c97555}.last-shot b,.last-shot small{display:block}.last-shot b{font-size:9px;font-weight:600;color:#4a5045}.last-shot small{font-size:8px;color:#85867b;margin-top:3px}.restart-button{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding:11px 9px;background:#354639;color:#f8f6ee;border:0;cursor:pointer;font-size:10px;letter-spacing:.04em;transition:background .18s,transform .18s}.restart-button:hover{background:#49604b}.restart-button:active{transform:translateY(1px)}.restart-button>span:first-child{font-size:15px;color:#e3a383}.button-key{margin-left:auto;color:#c7cbbf;border:1px solid #718071;padding:2px 5px;font:8px var(--mono)}.panel-footer{border-top:1px solid #e4e2d9;padding-top:10px;margin-top:13px;display:flex;justify-content:space-between;gap:4px;color:#9c9a8f;font:7px var(--mono)}.page-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:22px;padding:12px 0 18px;color:#929186;font-size:9px}.page-footer>span:first-child{font-style:italic}.page-footer>span:last-child{font:8px var(--mono);letter-spacing:.04em}.footer-star{color:var(--orange);font-size:12px;vertical-align:-1px;margin-right:5px}@media(min-width:1440px){.app-shell{padding-inline:52px}.game-layout{grid-template-columns:minmax(0,1fr) 278px;gap:23px}.intro{padding-top:42px;padding-bottom:28px}}@media(max-width:750px){.app-shell{padding:0 22px}.topbar{height:67px}.topbar-note{font-size:8px}.intro{padding-top:29px}h1{font-size:36px}.game-layout{grid-template-columns:minmax(0,1fr) 220px;gap:12px}.score-panel{padding:14px}.score-block{margin-top:26px}.score-number{font-size:39px}.range-bottomline{font-size:7px;padding-inline:9px}.controls-note>span:nth-child(2){display:block}.controls-note>span:nth-child(2)>span{display:block;margin-top:3px;line-height:1.5}.page-footer{margin-top:17px}}@media(max-width:560px){.app-shell{padding:0 14px}.topbar{height:61px}.brand-mark{width:33px;height:33px}.brand-name{font-size:12px}.brand-sub{font-size:7px}.topbar-note{display:none}.sound-toggle{font-size:9px;padding:8px 9px}.intro{padding:25px 0 17px;align-items:flex-end}h1{font-size:32px}.eyebrow{font-size:9px;margin-bottom:8px}.intro-subtitle{font-size:10px;max-width:265px;line-height:1.6}.stamp-number{font-size:9px}.stamp-label{font-size:8px}.stamp-line{width:16px}.game-layout{display:flex;flex-direction:column;gap:11px}.range-topline{height:29px;padding-inline:10px;font-size:8px}.range-bottomline{height:27px;font-size:7px;padding-inline:8px}.range-bottomline span:nth-child(2){font-size:6px;letter-spacing:0}.canvas-hint{top:8px;left:8px;gap:7px;padding:6px 8px}.canvas-hint b{font-size:9px}.canvas-hint small{font-size:7px}.hint-icon{font-size:17px}.hint-dismiss{font-size:7px;padding-left:7px}.controls-note{padding-top:9px}.controls-note b{font-size:9px}.controls-note>span:nth-child(2)>span{font-size:8px}.controls-note kbd{font-size:8px}.score-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:9px;padding:12px 13px 10px;min-height:0}.panel-heading{grid-column:1/-1}.score-block{margin-top:2px}.score-number{font-size:34px;margin-top:3px}.metric-label{font-size:9px;gap:6px}.metric-label span{font-size:7px}.score-divider{margin-top:10px}.arrows-block{margin-top:2px}.arrow-count{margin-top:3px}.arrow-count strong{font-size:31px}.arrow-pips{margin-top:8px}.last-shot{grid-column:1/-1;margin-top:2px;min-height:42px;padding:7px 9px}.restart-button{grid-column:1/-1;margin-top:0;padding:9px}.panel-footer{grid-column:1/-1;margin-top:0;padding-top:7px}.page-footer{margin-top:14px;padding:10px 0 15px;font-size:8px}.page-footer>span:last-child{font-size:7px}.round-overlay>strong{font-size:20px}.overlay-score{font-size:43px}.overlay-button{margin-top:16px}.session-stamp{gap:5px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}